Format Text File using Angularjs from Nodejs - css

i ma using nodejs with express to read the content of a text file using node in the backend.
when i hit the service i get the data on the front end.
Object {data: "s1:- hi thank you for calling my name is oh…↵s1:- no worries your welcome bye mam
↵s2:- bye
↵", status: 200, config: Object, statusText: "OK"}
I am able to get the text but i need to format these text based on some keywords such as s1 and s2 and add line break, bold to it on the fly and display that data using angular

First suggestion is if you have access to the file and you control the content maybe you can use Markdown and then use a directive like: angular-markdown-directive
if you can't change the contents you would have to create your own directive that will effectively find and replace those tags in the content and convert them into HTML. and then you can use ng-bind-html to render the output.
it will look something like:
angular.module('specialParse', [])
.directive('specialParse', function() {
return {
template: '<div ng-bind-html="content"></div>',
link: function(scope, element, attr) {
scope.content = attr.specialParse
.replace(/\r?\n/g, '<br />') // Replace line breaks
.replace('s1', 'something') // Special tag
.replace('s2', 'somethingElse'); // Special tag
// ..... And so on.
}
}
});
And the HTML
<div special-parse="data"></div>

Related

Mailchimp/Mandrill and Handlebars changing preview text

I'm working with MailChimps Mandrill to send transnational emails with handlebars. The whole setup is done and the emails send absolutely fine - but when they arrive they still have the default Mailchimp template string for the preview text that look like:
|*MC_PREVIEW*|
Is anyone aware of a way to remove this from showing or change it? Currently I have to go into the code of the email in Mandrill and remove the block of code myself - wondering if there is a way to do that from Mailchimps end at all as it's a bit tedious every time an email template is updated and exported back to Mandrill to go in and remove it again.
Thanks in advance!
I've had this issue, and what helped me was first changing the Mandrill default merge tags to Handlebars, then re-exporting the templates from Mailchimp back to Mandrill.
This converts all *|Mailchimp|* style merge tags in the code of the email into {{handlebars}}-style.
Important Edit:
If your Mailchimp templates are using handlebars to define the merge tags, these will get escaped like so:
\{{mergeTag}}
You will either have to manually delete these backslashes to get the tags to work again, OR reformat the merge tags in Mailchimp to be in the *|MAILCHIMP|* style before exporting.
If you choose the latter, when converting a camelCase merge tag to Mailchimp style, just put it in all caps.
E.g. {{mergeTag}} becomes *|MERGETAG|*
We encountered the same issue and wrote a little lambda http endoint that we can trigger via slack integration to fix all our mandrill templates:
const mailchimpFactory = require('#mailchimp/mailchimp_transactional');
const mailchimp = mailchimpFactory(process.env.MAILCHIMP_API_KEY);
function fixTemplate({ name, code }) {
const regex = /\*\|MC_PREVIEW_TEXT\|\*/ig; // regexr.com/69390
const fixedBody = code.replace(regex, '');
console.log(`Updating ${name}`);
return mailchimp.templates.update({
name,
code: fixedBody,
});
}
// removes all mailchimp preview merge variables from all
// templates in mandrill (since we're using handlebars)
async function fixAllTemplates(event) {
const templates = await mailchimp.templates.list();
await Promise.all(templates.map(fixTemplate));
const templateList = templates.map(({ name }) => `\n> ${name}`).join('');
const msg = `*Mandrill Template Fixer:* Updated ${templates.length} templates. ${templateList}`;
console.log(msg);
return { statusCode: 200, body: msg };
}
module.exports = { fixAllTemplates };

Server Side Rendering HTML text (write with HTML tags in DB) as effectively html in an email

On one hand
I've a field will in a collection, where user can save html text (through a WYSIWYG editor): it works fine and users can write/save some strings like this it's<strong>bold</strong> and sometimes <i>italic</i>. Nothing crazy..
On a second hand
When a user send this field will by email (as part of emailData), rendered with meteorhacks:ssr in an html template, the field show up as it's<strong>bold</strong> and sometimes <i>italic</i>. with HTML tags as normal text.
So, anyone know the trick to render in the html email's body: 'it's bold and sometimes italic.'? Thanks.
My code is very complicated, lot of const and succession of functions, but except of html rendering, it works fine and is finally structured like this:
SSR.compileTemplate('htmlEmail', Assets.getText('replycontact.html'));
var emailData = {
message: `${message}`,
will: `${will}`,
origincontactdate: `${origincontactdate}`,
contactname: `${contactname}`,
};
//send the mail
Email.send({
to: to,
from: from,
subject: subject,
html: SSR.render('htmlEmail', emailData),
});
The problem was that Meteor was escaping the HTML string.
Therefore, the solution is to use 3 brackets {{{ }}} instead of 2 - here for the emailData in the html template : instead of {{will}}, use {{{will}}}.
The code above in the question remain as it.
source: https://stackoverflow.com/a/16565529/7281870
Your data is most likely being saved as HTML encoded in the database, eg
<b>
is saved as
<b>
If so, you simply need to unencode it using the Javascript decodeURI() function, which you can read more about here:
http://www.w3schools.com/jsref/jsref_decodeuri.asp
So your code will look like this:
var emailData = {
message: `${message}`,
will: decodeURI(${will}),
origincontactdate: `${origincontactdate}`,
contactname: `${contactname}`,
};
//send the mail
Email.send({
to: to,
from: from,
subject: subject,
html: SSR.render('htmlEmail', emailData),
});

Create/modify Meteor templates at runtime

I am wondering how to solve this problem:
I have a template which contains some text with some template helpers inside:
<template>Hello {{who}}, the wheather is {{weather}}</template>
Now I need to change the content of the template dynamically at runtime, while maintaining the helper functionality. For example I would need it like this:
<template>Oh, the {{weather}}. Good evening {{who}}</template>
The text changes and the helpers are needed at different positions. Think of an application where users can create custom forms with placeholders for certain variables like the name of the user who fills out the form. Basically, the content of the template is stored in a mongo document and needs to be turned into a template at runtime, or an existing template needs to be changed.
How to approach this? Can I change the contents of a template at runtime?
To solve this use case you need to use two techniques.
Firstly you need to be able to change the template reactivel. To do this you can use Template.dynamic. eg:
{{> Template.dynamic template=helperToReturnName [data=data] }}
See here: http://docs.meteor.com/#/full/template_dynamic
Now that you can change template, you need to be able to create new templates on the fly from you database content. This is non trivial, but it's possible if you're willing to write code to create them, like this:
Template.__define__("postList", (function() {
var view = this;
return [
HTML.Raw("<h1>Post List</h1>\n "),
HTML.UL("\n ", Blaze.Each(function() {
return Spacebars.call(view.lookup("posts"));
},
function() {
return [ "\n ", HTML.LI(Blaze.View(function() {
return Spacebars.mustache(view.lookup("title"));
})), "\n " ];
}), "\n ")
];
}));
That code snippet was taken from this article on Meteorhacks, and the article itself goes into far more detail. After reading the article you'll be armed with the knowledge you need to complete the task...
Just have a helper dynamically build the entire string (remembering that this refers to the current data context):
Template.foo.helpers({
dynamicString: function(switch){
if ( switch == 1) return "Hello "+this.who+", the wheather is "+this.weather;
else return "Oh, the "+this.weather+". Good evening "+this.who;
}
});
Then in your template:
<template name="foo">
{{dynamicString}}
</template>
Alternatively, just use {{#if variable}} or {{#unless variable}} blocks to change the logic in your template. Much, much simpler.
<template name="foo">
{{#if case1}}
Hello {{who}}, the wheather is {{weather}}
{{else}}
Oh, the {{weather}}. Good evening {{who}}
{{/if}}
</template>
You can always have a template helper that computes the necessary boolean variables (e.g. case1).

Meteor - TRIPLE template tag is not allowed in an HTML attribute error

I got error message when trying to run existing meteor project.
$meteor
=> Started proxy.
=> Started MongoDB.
=> Errors prevented startup:
While building the application:
client/coinmx.html:169: TRIPLE template tag is not allowed in an HTML attribute
...title="Totals: {{{get...
^
In Meteor 0.8, it's possible to return a Javascript object which is directly rendered into HTML attributes versus earlier versions, where you had to render it yourself.
Old version:
<input name={{name}} title={{title}}>
helpers:
Template.foo.name = "fooName";
Template.foo.title = "fooTitle";
New version:
<input {{attributes}}>
helpers:
Template.foo.attributes = {
name: "fooName",
title: "fooTitle"
};
All of these can be functions, and reactive, etc. Because the object is rendered directly into attributes, there is no need for you to SafeString some manually rendered content as before. This is the recommended way to go if need to render HTML attributes.
See also the following for how conditional attributes work under this scheme:
https://github.com/meteor/meteor/wiki/Using-Blaze#conditional-attributes-with-no-value-eg-checked-selected
The error is pretty much explanatory: you cannot use {{{something}}} inside a HTML attribute, you need to use {{something}} instead. Depending on what the something is (it's not known from your question as you didn't provide the code), that's either all you need to do, or you can achieve similar functionality by returning new Handlebars.SafeString("result") from your helper instead of just "result". However, if you do, you need to be super sure that the thing you'll return won't break the HTML structure.
Hugo's answer above gave me the missing piece I needed for the same issue-- triple stashes in 0.8 no longer supported. Here is an example that hopefully helps.
Where you might have had {{{resolve}}} in your template, you would now do:
<template name='thing'>
<ol>
{{#each all}}
{{resolve}}
{{/each}}
</ol>
<template>
The helper code then makes use of Spacebars.SafeString which looks to be preferred with Blaze:
Template.thing.helpers({
all: function () {
return Things.find();
},
resolve: function () {
var result = "<li>";
for (var i = 0; i < this.arrayOfClassNames.length; ++i)
result += <'div class='" + this.arrayOfClassNames[i] + "'></div>";
result += "</li>";
return new Spacebars.SafeString(result);
}
});
The key here is to return the 'new Spacebars.SafeString(result)' to wrap your HTML (which must be well formed).

How to print PDF or an image from a page

I have an ASP.NET app (it uses DevExpress v 10.2). There is a button called PRINT on a page. When the button is clicked the application should:
1. extract a file from its DB. The file is either PDF or JPEG (the application knows its type in runtime only)
2. TO PRINT OUT the file. Some ‘preview’ should be shown to user during this
The question is – how to implement this (the item ‘2’)? There is a well-known method to print out an image using JavaScript like the following:
function DisplayPrintPopup(html) {
var win = window.open('', 'popup', 'toolbar=no,menubar=no,width=500,height=500,scrollbars=yes');
self.focus();
win.document.open();
win.document.write('<head><style></style></head><body>' + html + '<style></style></head><body>');
win.document.close();
win.print();
win.close();
}
This could be Ok for me. But what to do when a file is PDF?
This just print an element from you page where strid=id of the element you want to print,
before the print is possible to view a preview:
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var WinPrint = window.open('', '', 'letf=0,top=0,width=800,height=600,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
http://forums.asp.net/t/1034884.aspx/1

Resources