-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
134 lines (115 loc) · 4.7 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
Templates.js - Demo Page
</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!--
Required javascript libraries.
-->
<script src="./javascripts/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="./javascripts/1.3.0/adminflare-demo-init.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700" rel="stylesheet" type="text/css">
<!--
Required css files.
-->
<link href="./css/1.3.0/black-blue/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" id="bootstrap-css">
<link href="./css/1.3.0/black-blue/adminflare.min.css" media="all" rel="stylesheet" type="text/css" id="adminflare-css">
<!--
Include these templates.js libraries and its css file.
-->
<link rel="stylesheet" href="./public/templatesjs/css/templates.css">
<script src="./public/templatesjs/javascripts/commons.js" type="text/javascript"></script>
<script src="./public/templatesjs/javascripts/templates.min.js" type="text/javascript"></script>
</head>
<body>
<div id='myTemplate' style='width:750px;'> </div>
<button id='setFocus'>Set Focus</button><br/>
<br/>
<button id='getSpintax'>Get Spintax</button><br/>
<br/>
<button id='getFieldNames'>Get Field Names</button><br/>
<br/>
<button id='getFieldValue'>Get Field Value</button><input type='text' id='fieldName' value='' placeholder='write the name of a field here' /><br/>
<br/>
<textarea id='result' cols=150 rows=15> </textarea>
</body>
<script>
/*
* Example.
*
*/
var a = "{Hello|Hi there|Hi|Hello there}! !fname. " +
"{Thanks|Thank you} for {accepting my invitation|adding me to your contacts|adding me to your friends|adding me to your connections}.<br/>" +
"<br/>" +
"Our {brand new|exclusive|unique|new} {service|product} {was|is} {crafted|created|designed} to " +
"<!benefit1!write the most attractive benefit of your service!>; " +
"and {I want|I would like|I'd like} to {send you|invite you for|share} a {free|absolutely free|absolute free} <!lead magnet!write a lead magnet here!>.<br/>" +
"<br/>" +
"{Do you want to try it out?|Do you want to test it?|Would you like to test it out?}";
var b = "{Thank you|Thanks} for accepting , !fname {Happy|Glad} to {have|count with} you {into|in} my {connections|friends|list of connections|list of contacts}.<br/>" +
"<br/>" +
"{Our|My} {company|business|team} is {working on|creating|developing|crafting|releasing|putting the last touches to} {this|a|a new} {service|product} to" +
"<!benefit1!write the most attractive benefit of your service!> , and {I’d like|I would like|I want} you to {test|try} {it|it out}.<br/>" +
"<br/>" +
"{Kindly|Please} {advice me|let me know} if you{'d like| would like| want} to {test|try} {our|this} {brand-new|new} {service|product} so we can " +
"{schedule|set|book} a {meeting|call}.";
var c = "{Hello|Hi} !fname.<br/>" +
"<br/>" +
"As {I wrote|said|I said|I said before|I wrote before|I said in my previous message|I wrote in my previous message|I said in other message|I wrote in other message}, " +
"{I am going to|I'm going to|I will|I'll} {launch|start|release|offer} a new {service|program} to <!benefit1!write the most attractive benefit of your service!>.<br/>" +
"<br/>" +
"Can I {send you|share} {a private|a personal|an email} invitation to {a free|an absolutely free|a free of charge} {demo|presentation|call}?<br/>" +
"<br/>" +
"{What's|What is} your {best|primary|main|daily} {email|email address}?";
var ctx = document.getElementById('myTemplate');
templatesJs.draw(ctx, {
index: 2,
versions: [{
title: 'Template #1',
code: a,
values: {
'benefit1': null,
'lead magnet': null,
},
}, {
title: 'Template #2',
code: b,
values: {
'benefit1': null,
},
}, {
title: 'Template #3',
code: c,
values: {
'benefit1': null,
},
}],
});
$('#setFocus').click(function() {
templatesJs.setFocus(ctx);
});
$('#getSpintax').click(function() {
$('#result').text(
templatesJs.getSpintax(ctx)
);
});
$('#getFieldNames').click(function() {
$('#result').text(
templatesJs.getFieldNames(ctx).toString()
);
});
$('#getFieldValue').click(function() {
$('#result').text(
templatesJs.getFieldValue(ctx, $('#fieldName').val())
);
});
</script>
</html>