@innovastudio/contentbuilder 1.0.33 → 1.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/README.md +1913 -0
  2. package/license.txt +80 -0
  3. package/package.json +40 -19
  4. package/public/contentbuilder/config.js +8 -0
  5. package/public/contentbuilder/contentbuilder.css +4282 -0
  6. package/public/contentbuilder/contentbuilder.esm.js +59500 -0
  7. package/public/contentbuilder/contentbuilder.min.js +122 -0
  8. package/public/contentbuilder/lang/en.js +299 -0
  9. package/public/contentbuilder/lang/fr.js +299 -0
  10. package/public/contentbuilder/plugins/buttoneditor/images/a.jpg +0 -0
  11. package/public/contentbuilder/plugins/buttoneditor/images/b.jpg +0 -0
  12. package/public/contentbuilder/plugins/buttoneditor/images/c.jpg +0 -0
  13. package/public/contentbuilder/plugins/buttoneditor/images/d.jpg +0 -0
  14. package/public/contentbuilder/plugins/buttoneditor/images/e.jpg +0 -0
  15. package/public/contentbuilder/plugins/buttoneditor/images/f.jpg +0 -0
  16. package/public/contentbuilder/plugins/buttoneditor/images/g.jpg +0 -0
  17. package/public/contentbuilder/plugins/buttoneditor/images/h.jpg +0 -0
  18. package/public/contentbuilder/plugins/buttoneditor/plugin.js +1566 -0
  19. package/public/contentbuilder/plugins/buttoneditor/readme.txt +7 -0
  20. package/public/contentbuilder/plugins/helloworld/plugin.js +15 -0
  21. package/public/contentbuilder/plugins/helloworld/readme.txt +23 -0
  22. package/public/contentbuilder/plugins/preview/plugin.js +301 -0
  23. package/public/contentbuilder/plugins/preview/readme.txt +23 -0
  24. package/public/contentbuilder/plugins/searchreplace/plugin.js +458 -0
  25. package/public/contentbuilder/plugins/searchreplace/readme.txt +23 -0
  26. package/public/contentbuilder/plugins/searchreplace/searchreplace.html +264 -0
  27. package/public/contentbuilder/plugins/showgrid/plugin.js +73 -0
  28. package/public/contentbuilder/plugins/showgrid/readme.txt +23 -0
  29. package/public/contentbuilder/plugins/symbols/plugin.js +2876 -0
  30. package/public/contentbuilder/plugins/symbols/readme.txt +23 -0
  31. package/public/contentbuilder/plugins/wordcount/plugin.js +75 -0
  32. package/public/contentbuilder/plugins/wordcount/readme.txt +23 -0
  33. package/public/contentbuilder/themes/colored-blue.css +1125 -0
  34. package/public/contentbuilder/themes/colored-blue2.css +1125 -0
  35. package/public/contentbuilder/themes/colored-blue3.css +1125 -0
  36. package/public/contentbuilder/themes/colored-blue4.css +1125 -0
  37. package/public/contentbuilder/themes/colored-blue5.css +1125 -0
  38. package/public/contentbuilder/themes/colored-blue6.css +1125 -0
  39. package/public/contentbuilder/themes/colored-blue7.css +1125 -0
  40. package/public/contentbuilder/themes/colored-blue8.css +1125 -0
  41. package/public/contentbuilder/themes/colored-dark.css +1125 -0
  42. package/public/contentbuilder/themes/colored-darkblue.css +1125 -0
  43. package/public/contentbuilder/themes/colored-gray.css +1125 -0
  44. package/public/contentbuilder/themes/colored-green.css +1125 -0
  45. package/public/contentbuilder/themes/colored-green2.css +1125 -0
  46. package/public/contentbuilder/themes/colored-green3.css +1125 -0
  47. package/public/contentbuilder/themes/colored-green4.css +1125 -0
  48. package/public/contentbuilder/themes/colored-green5.css +1125 -0
  49. package/public/contentbuilder/themes/colored-magenta.css +1125 -0
  50. package/public/contentbuilder/themes/colored-orange.css +1125 -0
  51. package/public/contentbuilder/themes/colored-orange2.css +1125 -0
  52. package/public/contentbuilder/themes/colored-orange3.css +1125 -0
  53. package/public/contentbuilder/themes/colored-pink.css +1125 -0
  54. package/public/contentbuilder/themes/colored-pink2.css +1125 -0
  55. package/public/contentbuilder/themes/colored-pink3.css +1125 -0
  56. package/public/contentbuilder/themes/colored-pink4.css +1125 -0
  57. package/public/contentbuilder/themes/colored-purple.css +1125 -0
  58. package/public/contentbuilder/themes/colored-purple2.css +1125 -0
  59. package/public/contentbuilder/themes/colored-red.css +1125 -0
  60. package/public/contentbuilder/themes/colored-red2.css +1125 -0
  61. package/public/contentbuilder/themes/colored-red3.css +1125 -0
  62. package/public/contentbuilder/themes/colored-red4.css +1125 -0
  63. package/public/contentbuilder/themes/colored-red5.css +1125 -0
  64. package/public/contentbuilder/themes/colored-yellow.css +1125 -0
  65. package/public/contentbuilder/themes/colored-yellow2.css +1125 -0
  66. package/public/contentbuilder/themes/dark-blue.css +1125 -0
  67. package/public/contentbuilder/themes/dark-blue2.css +1125 -0
  68. package/public/contentbuilder/themes/dark-blue3.css +1125 -0
  69. package/public/contentbuilder/themes/dark-gray.css +1125 -0
  70. package/public/contentbuilder/themes/dark-pink.css +1125 -0
  71. package/public/contentbuilder/themes/dark-purple.css +1125 -0
  72. package/public/contentbuilder/themes/dark-red.css +1125 -0
  73. package/public/contentbuilder/themes/dark.css +1124 -0
  74. package/public/contentbuilder/themes/light-blue.css +1125 -0
  75. package/public/contentbuilder/themes/light-blue2.css +1125 -0
  76. package/public/contentbuilder/themes/light-blue3.css +1125 -0
  77. package/public/contentbuilder/themes/light-cyan.css +1125 -0
  78. package/public/contentbuilder/themes/light-gray.css +1125 -0
  79. package/public/contentbuilder/themes/light-gray2.css +1125 -0
  80. package/public/contentbuilder/themes/light-green.css +1125 -0
  81. package/public/contentbuilder/themes/light-pink.css +1125 -0
  82. package/public/contentbuilder/themes/light-pink2.css +1125 -0
  83. package/public/contentbuilder/themes/light-purple.css +1125 -0
  84. package/public/contentbuilder/themes/light-purple2.css +1125 -0
  85. package/public/contentbuilder/themes/light-red.css +1125 -0
  86. package/public/contentbuilder/themes/light-yellow.css +1125 -0
  87. package/public/contentbuilder/themes/light-yellow2.css +1125 -0
  88. package/readme.txt +23 -0
  89. package/.eslintrc.json +0 -28
  90. package/lib/contentbuilder.js +0 -46711
  91. package/rollup.config.js +0 -23
package/public/contentbuilder/plugins/buttoneditor/plugin.js ADDED
@@ -0,0 +1,1566 @@
1
+ /*
2
+ Button Editor Plugin
3
+ */
4
+
5
+ (function () {
6
+ var html = '<div class="is-modal buttoneditor">' +
7
+ '<div class="is-modal-content" style="width:505px;height:620px;position: relative;display: flex;flex-direction: column;align-items: center;padding: 0px;">' +
8
+ '<div class="is-modal-bar is-draggable" style="background:'+_cb.styleTabsBackground+';position: absolute;top: 0;left: 0;width: 100%;z-index:1;line-height:32px;height:32px;">' + _cb.out('Button Editor') +
9
+ '<div class="is-modal-close" style="z-index:1;width:32px;height:32px;position:absolute;top:0px;right:0px;box-sizing:border-box;padding:0;line-height:32px;font-size: 12px;text-align:center;cursor:pointer;">&#10005;</div>' +
10
+ '</div>' +
11
+ '<iframe data-width="1440" style="width:100%;height:100%;max-width:1440px;border:none;border-top:32px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' +
12
+ '</div>' +
13
+ '</div>';
14
+
15
+ _cb.addHtml(html);
16
+
17
+ var html_button = '<button title="' + _cb.out('Edit Button') + '" data-title="' + _cb.out('Edit Button') + '" class="button-edit" style="display:none;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>';
18
+
19
+ var linkTool = document.querySelector('#divLinkTool');
20
+ if(!linkTool) return; // in case builder is destroyed
21
+
22
+ linkTool.insertAdjacentHTML('afterBegin', html_button); //add button to existing #divLinkTool
23
+
24
+ var buttonEdit = linkTool.querySelector('.button-edit');
25
+
26
+ //Extend onContentClick
27
+ var oldget = _cb.opts.onContentClick;
28
+ _cb.opts.onContentClick = function (e) {
29
+
30
+ let elm = e.target;
31
+
32
+ var elmDisplay = getStyle(elm, 'display');
33
+ if((elm.tagName.toLowerCase() === 'a' && elmDisplay === 'inline-block')) {
34
+
35
+
36
+ buttonEdit.style.display = 'block';
37
+
38
+
39
+ } else {
40
+
41
+ buttonEdit.style.display = 'none';
42
+
43
+ }
44
+
45
+ if(oldget) {
46
+ var ret = oldget.apply(this, arguments);
47
+ return ret;
48
+ }
49
+ };
50
+
51
+ buttonEdit.addEventListener('click', function(){
52
+
53
+ var modal = document.querySelector('.is-modal.buttoneditor');
54
+ _cb.showModal(modal);
55
+
56
+ _cb.saveForUndo(true); // checkLater = true
57
+
58
+ var btnClose = modal.querySelector('.is-modal-close');
59
+ btnClose.addEventListener('click', function(e){
60
+ _cb.hideModal(modal);
61
+ });
62
+
63
+ // Update style
64
+ modal.querySelector('.is-modal-bar').style.background = _cb.styleTabsBackground;
65
+
66
+ // var scriptPath = _cb.getScriptPath();
67
+ // modal.querySelector('iframe').src = scriptPath + 'plugins/buttoneditor/buttoneditor.html';
68
+
69
+ iframe = modal.querySelector('iframe');
70
+ doc = iframe.contentWindow.document;
71
+ doc.open();
72
+ doc.write(getHTML());
73
+ doc.close();
74
+ });
75
+
76
+ var getStyle = function(element, property) {
77
+ return window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(property) : element.style[property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })];
78
+ }
79
+
80
+ function getHTML() {
81
+
82
+ var pluginPath = _cb.opts.pluginPath + 'plugins/buttoneditor/';
83
+
84
+ const html = `
85
+ <!DOCTYPE HTML>
86
+ <html>
87
+ <head>
88
+ <meta charset="utf-8">
89
+ <title></title>
90
+ <style>
91
+ body {
92
+ color: ${_cb.styleModalColor};
93
+ margin:0;
94
+ overflow-x:hidden;overflow-y:auto;
95
+ font-family:sans-serif;
96
+ font-size:13px;
97
+ letter-spacing:1px;
98
+ font-weight:300;
99
+ }
100
+ .container > div {
101
+ text-align:center;
102
+ font-size:24px;c
103
+ ursor:pointer;margin: 0;
104
+ display:inline-block;
105
+ float:left;
106
+ width:25%;
107
+ height:80px;
108
+ line-height:80px;
109
+ border:#eee 1px solid;
110
+ box-sizing:border-box;
111
+ }
112
+ .clearfix:before, .clearfix:after {content: " ";display: table;}
113
+ .clearfix:after {clear: both;}
114
+ .clearfix {*zoom: 1;}
115
+
116
+ .inptext {
117
+ width:90%;
118
+ font-size:17px;
119
+ letter-spacing:1px;
120
+ border:none;
121
+ padding:10px;
122
+ border:rgba(127, 127, 127, 0.32) 1px solid;
123
+ }
124
+ button {
125
+ width: 55px;
126
+ height: 50px;
127
+ line-height: 1;
128
+ display: inline-block;
129
+ box-sizing: border-box;
130
+ margin: 0;
131
+ padding: 0;
132
+ cursor: pointer;
133
+ background-color: ${_cb.styleButtonClassicBackground};
134
+ color: ${_cb.styleButtonClassicColor};
135
+ border: 1px solid transparent;
136
+ font-family: sans-serif;
137
+ letter-spacing: 1px;
138
+ font-size: 11px;
139
+ font-weight: normal;
140
+ text-transform: uppercase;
141
+ text-align: center;
142
+ position: relative;
143
+ border-radius: 0;
144
+ transition: all ease 0.3s
145
+ }
146
+ .inptext:focus {outline:none}
147
+ button:focus {outline:none;}
148
+
149
+ button.classic-primary {
150
+ display: inline-block;
151
+ width: auto;
152
+ height: 50px;
153
+ padding-left: 10px;
154
+ padding-right: 10px;
155
+ min-width: 135px;
156
+ background-color: ${_cb.styleButtonClassicBackground};
157
+ }
158
+ button.classic-secondary {
159
+ display: inline-block;
160
+ width: auto;
161
+ height: 50px;
162
+ padding-left: 10px;
163
+ padding-right: 10px;
164
+ background: transparent;
165
+ }
166
+ select {
167
+ font-size: 14px;
168
+ letter-spacing: 1px;
169
+ height: 50px;
170
+ line-height: 1.7;
171
+ color: #454545;
172
+ border-radius: 0;
173
+ border: none;
174
+ background-color: #eee;
175
+ width: auto;
176
+ display: inline-block;
177
+ background-image: none;
178
+ -webkit-appearance: menulist;
179
+ -moz-appearance: menulist;
180
+ appearance: menulist;
181
+ padding: 0 5px;
182
+ }
183
+ select:focus {outline:none}
184
+
185
+ /*
186
+ Tabs
187
+ */
188
+ .is-tabs.simple {
189
+ white-space:nowrap;
190
+ padding:20px;padding-bottom:5px;padding-top: 10px;
191
+ box-sizing:border-box;
192
+ font-family: sans-serif;
193
+ font-size: 11px;
194
+ text-transform: uppercase;
195
+ letter-spacing: 2px;
196
+ background: ${_cb.styleTabsBackground};
197
+ }
198
+ .is-tabs.simple a {
199
+ display: inline-block;
200
+ float:left;
201
+ padding: 3px 0 0 1px;
202
+ color: ${_cb.styleTabItemColor};
203
+ border-bottom: transparent 1px solid;
204
+
205
+ margin: 0 16px 16px 0;
206
+ text-decoration: none;
207
+ transition: box-shadow ease 0.3s;
208
+ }
209
+ .is-tabs.simple a:hover {
210
+
211
+ }
212
+ .is-tabs.simple a.active {
213
+ background: transparent;
214
+ box-shadow: none;
215
+ cursor:default;
216
+ border-bottom: ${_cb.styleTabItemBorderBottomActive};
217
+ }
218
+ .is-tab-content.simple {display:none;padding:20px;}
219
+
220
+ /* Overide */
221
+ .is-tabs.simple {border-bottom:${_cb.styleSeparatorColor} 1px solid;padding-bottom:15px;}
222
+ .is-tabs.simple a {margin: 0 16px 0 0;line-height:1.5}
223
+ .is-tab-content {
224
+ border:none;
225
+ padding:20px;
226
+ box-sizing:border-box;
227
+ display:none;
228
+ height: 100%;
229
+ position: absolute;
230
+ width: 100%;
231
+ box-sizing: border-box;
232
+ border-top: 50px solid transparent;
233
+ top: 0px;
234
+ }
235
+
236
+
237
+ .is-button-remove {
238
+ position: absolute;
239
+ top: 0px;
240
+ right: 0px;
241
+ width: 20px;
242
+ height: 20px;
243
+ background: rgba(95, 94, 94, 0.26);
244
+ color: #fff;
245
+ line-height: 20px;
246
+ text-align: center;
247
+ font-size: 12px;
248
+ cursor: pointer;
249
+ display:none;
250
+ }
251
+ #divMyButtonList {
252
+ height: 100%;
253
+ width: 100%;
254
+ position: absolute;
255
+ top: 0;
256
+ left: 0;
257
+ padding: 20px;
258
+ border-top: transparent 90px solid;
259
+ box-sizing: border-box;
260
+ overflow: hidden;
261
+ overflow-y: auto;
262
+ }
263
+ #divMyButtonList a {position:relative}
264
+ #divMyButtonList a.active .is-button-remove {display:block;}
265
+ #divButtonTemplates {
266
+ height: 100%;
267
+ width: 100%;
268
+ position: absolute;
269
+ top: 0;
270
+ left: 0;
271
+ padding: 20px;
272
+ box-sizing: border-box;
273
+ overflow: hidden;
274
+ overflow-y: auto;
275
+ opacity: 0.95;
276
+ }
277
+
278
+ /* Templates */
279
+ #divMyButtonList > a, #divButtonTemplates > a {
280
+ margin: 0px 13px 15px 0;
281
+ padding: 10px 50px;
282
+ font-size: 1rem;
283
+ line-height: 2rem;
284
+ border-radius: 0;
285
+ letter-spacing: 3px;
286
+ display: inline-block;
287
+ font-weight: normal;
288
+ text-align: center;
289
+ text-decoration: none;
290
+ cursor: pointer;
291
+ background-image: none;
292
+ border: 1px solid transparent;
293
+ white-space: nowrap;
294
+ -webkit-transition: all 0.16s ease;
295
+ transition: all 0.16s ease;
296
+ text-decoration:none;
297
+ color: #000;
298
+ }
299
+
300
+ button.is-btn-color {
301
+ width: 50px;
302
+ height: 50px;
303
+ padding: 0;
304
+ background: ${_cb.styleButtonPickColorBackground};
305
+ // border: rgba(0,0,0,0.09) 1px solid;
306
+ border: ${_cb.styleButtonPickColorBorder};
307
+ }
308
+
309
+ .colored .is-tabs.simple {border-bottom:transparent 1px solid;}
310
+
311
+ select {
312
+ background: ${_cb.styleSelectBackground};
313
+ color: ${_cb.styleSelectColor};
314
+ }
315
+
316
+ /* Scrollbar for modal */
317
+
318
+ .dark * {
319
+ scrollbar-width: thin;
320
+ scrollbar-color: rgba(255, 255, 255, 0.3) auto;
321
+ }
322
+ .dark *::-webkit-scrollbar {
323
+ width: 12px;
324
+ }
325
+ .dark *::-webkit-scrollbar-track {
326
+ background: transparent;
327
+ }
328
+ .dark *::-webkit-scrollbar-thumb {
329
+ background-color:rgba(255, 255, 255, 0.3);
330
+ }
331
+
332
+ .colored-dark * {
333
+ scrollbar-width: thin;
334
+ scrollbar-color: rgb(100, 100, 100) auto;
335
+ }
336
+ .colored-dark *::-webkit-scrollbar {
337
+ width: 12px;
338
+ }
339
+ .colored-dark *::-webkit-scrollbar-track {
340
+ background: transparent;
341
+ }
342
+ .colored-dark *::-webkit-scrollbar-thumb {
343
+ background-color:rgb(100, 100, 100);
344
+ }
345
+
346
+ .colored * {
347
+ scrollbar-width: thin;
348
+ scrollbar-color: rgba(0, 0, 0, 0.4) auto;
349
+ }
350
+ .colored *::-webkit-scrollbar {
351
+ width: 12px;
352
+ }
353
+ .colored *::-webkit-scrollbar-track {
354
+ background: transparent;
355
+ }
356
+ .colored *::-webkit-scrollbar-thumb {
357
+ background-color: rgba(0, 0, 0, 0.4);
358
+ }
359
+
360
+ .light * {
361
+ scrollbar-width: thin;
362
+ scrollbar-color: rgba(0, 0, 0, 0.4) auto;
363
+ }
364
+ .light *::-webkit-scrollbar {
365
+ width: 12px;
366
+ }
367
+ .light *::-webkit-scrollbar-track {
368
+ background: transparent;
369
+ }
370
+ .light *::-webkit-scrollbar-thumb {
371
+ background-color: rgba(0, 0, 0, 0.4);
372
+ }
373
+ </style>
374
+ </head>
375
+ <body${_cb.styleDark?' class="dark"':''}${_cb.styleColored?' class="colored"':''}${_cb.styleColoredDark?' class="colored-dark"':''}${_cb.styleLight?' class="light"':''}>
376
+
377
+ <svg width="0" height="0" style="position:absolute;display:none;">
378
+ <defs>
379
+ <symbol viewBox="0 0 512 512" id="ion-ios-close-empty"><path d="M340.2 160l-84.4 84.3-84-83.9-11.8 11.8 84 83.8-84 83.9 11.8 11.7 84-83.8 84.4 84.2 11.8-11.7-84.4-84.3 84.4-84.2z"></path></symbol>
380
+ <symbol viewBox="0 0 512 512" id="ion-contrast"><path d="M256 32C132.3 32 32 132.3 32 256s100.3 224 224 224 224-100.3 224-224S379.7 32 256 32zm135.8 359.8C355.5 428 307 448 256 448V64c51 0 99.5 20 135.8 56.2C428 156.5 448 204.7 448 256c0 51.3-20 99.5-56.2 135.8z"></path></symbol>
381
+ </defs>
382
+ </svg>
383
+
384
+ <div class="is-tabs simple clearfix" data-group="button" style="position: absolute;top: 0;height: 51px;width: 100%;z-index: 1;">
385
+ <a title="${_cb.out('Default')}" href="" data-content="divButtonDefault" class="active" data-lang>${_cb.out('Default')}</a>
386
+ <a title="${_cb.out('Hover')}" href="" data-content="divButtonHover" data-lang>${_cb.out('Hover')}</a>
387
+ <a title="${_cb.out('Saved')}" href="" data-content="divMyButtons" data-lang>${_cb.out('Saved')}</a>
388
+ <a title="${_cb.out('Templates')}" href="" data-content="divTemplates" data-lang>${_cb.out('Templates')}</a>
389
+ </div>
390
+ <div id="divButtonDefault" class="is-tab-content" data-group="button" style="display:block">
391
+
392
+ <div style="display:flex;margin:10px 0 0">
393
+ <div style="width:160px">
394
+ <label>${_cb.out('Background Color')}:<br />
395
+ <button title="${_cb.out('Background Color')}" class="button-bgcolor is-btn-color" style="margin-top:10px"></button>
396
+ </label>
397
+ </div>
398
+ <div>
399
+ <label>${_cb.out('Text Color')}:<br />
400
+ <button title="${_cb.out('Text Color')}" class="button-textcolor is-btn-color" style="margin-top:10px"></button>
401
+ </label>
402
+ </div>
403
+ </div>
404
+
405
+ <div style="display:flex;margin:15px 0 0">
406
+ <div style="width:160px">
407
+ <label for="inpBorderWidth">${_cb.out('Border')}</label>:<br />
408
+ <select id="inpBorderWidth" style="margin-top:10px">
409
+ <option value="" data-lang>${_cb.out('Default')}</option>
410
+ <option value="none" data-lang>${_cb.out('No Border')}</option>
411
+ <option value="1px">1px</option>
412
+ <option value="2px">2px</option>
413
+ <option value="3px">3px</option>
414
+ <option value="4px">4px</option>
415
+ </select>
416
+ </div>
417
+ <div style="width:170px">
418
+ <label>
419
+ ${_cb.out('Border Color')}:<br />
420
+ <button title="${_cb.out('Border Color')}" class="button-bordercolor is-btn-color" style="margin-top:10px"></button>
421
+ </label>
422
+ <button title="${_cb.out('Same as bg color')}" class="classic-primary same-as-bg" style="display:block;min-width:40px;margin:0;font-size:11px;height:30px;padding:0 8px;text-transform:none;">${_cb.out('Same as bg color')}</button>
423
+ </div>
424
+ <div>
425
+ <label>${_cb.out('Border Radius')}</label>:<br />
426
+ <button title="${_cb.out('Decrease')}" class="classic-primary border-radius-dec" style="min-width:55px;font-size:18px;margin-top:10px;float:left">-</button>
427
+ <button title="${_cb.out('Increase')}" class="classic-primary border-radius-inc" style="min-width:55px;font-size:18px;margin-top:10px;">+</button>
428
+ </div>
429
+ </div>
430
+ <div style="display:flex;margin:5px 0 25px">
431
+ <div>
432
+ <label>${_cb.out('Button Size')}</label>: <br />
433
+ <button title="${_cb.out('xxs')}" class="classic-primary size-xxs" style="min-width:55px;margin-top:10px;">${_cb.out('xxs')}</button>
434
+ <button title="${_cb.out('xs')}" class="classic-primary size-xs" style="min-width:55px;margin-top:10px;">${_cb.out('xs')}</button>
435
+ <button title="${_cb.out('s')}" class="classic-primary size-s" style="min-width:55px;margin-top:10px;">${_cb.out('s')}</button>
436
+ <button title="${_cb.out('m')}" class="classic-primary size-m" style="min-width:55px;margin-top:10px;">${_cb.out('m')}</button>
437
+ <button title="${_cb.out('l')}" class="classic-primary size-l" style="min-width:55px;margin-top:10px;">${_cb.out('l')}</button>
438
+ <button title="${_cb.out('xl')}" class="classic-primary size-xl" style="min-width:55px;margin-top:10px;">${_cb.out('xl')}</button>
439
+ <button title="${_cb.out('xxl')}" class="classic-primary size-xxl" style="min-width:55px;margin-top:10px;">${_cb.out('xxl')}</button>
440
+ </div>
441
+ </div>
442
+ <div style="display:flex;margin:20px 0 25px">
443
+ <div style="width:145px">
444
+ <label>${_cb.out('Font Size')}</label>: <br />
445
+ <button title="${_cb.out('Decrease')}" class="classic-primary font-size-dec" style="min-width:55px;font-size:18px;margin-top:10px;float:left">-</button>
446
+ <button title="${_cb.out('Increase')}" class="classic-primary font-size-inc" style="min-width:55px;font-size:18px;margin-top:10px;">+</button>
447
+ </div>
448
+ <div style="width:150px">
449
+ <label>${_cb.out('Letter Spacing')}</label>: <br />
450
+ <button title="${_cb.out('Decrease')}" class="classic-primary letter-spacing-dec" style="min-width:55px;font-size:18px;margin-top:10px;float:left">-</button>
451
+ <button title="${_cb.out('Increase')}" class="classic-primary letter-spacing-inc" style="min-width:55px;font-size:18px;margin-top:10px;">+</button>
452
+ </div>
453
+ <div style="width:120px">
454
+ <label>${_cb.out('Upper/lower')}: <br />
455
+ <button title="${_cb.out('Upper/Lower')}" class="classic-primary textcase" style="margin-top:10px;min-width:55px;font-family: serif;font-size: 14px;text-transform: initial;">Aa</button>
456
+ </label>
457
+ </div>
458
+ <div style="width:110px">
459
+ <label for="inpFontWeight">${_cb.out('Weight')}</label>: <br />
460
+ <select id="inpFontWeight" style="margin-top:10px">
461
+ <option value=""></option>
462
+ <option value="100">100</option>
463
+ <option value="200">200</option>
464
+ <option value="300">300</option>
465
+ <option value="400">400</option>
466
+ <option value="500">500</option>
467
+ <option value="600">600</option>
468
+ <option value="700">700</option>
469
+ <option value="800">800</option>
470
+ <option value="900">900</option>
471
+ <option value="bold" data-lang>${_cb.out('Bold')}</option>
472
+ <option value="normal" data-lang>${_cb.out('Normal')}</option>
473
+ </select>
474
+
475
+ <!--<button title="Bold" class="classic-primary fontweight" style="min-width:55px;margin-top:10px;font-family: serif;font-size: 14px;text-transform: initial;">B</button>-->
476
+ </div>
477
+ </div>
478
+
479
+ <div style="display:flex;margin:15px 0 0">
480
+ <button title="${_cb.out('Clear')}" class="input-clear classic-primary" data-lang>${_cb.out('Clear')}</button>
481
+ </div>
482
+
483
+ </div>
484
+ <div id="divButtonHover" class="is-tab-content" data-group="button">
485
+
486
+ <div style="display:flex;margin:10px 0 0">
487
+ <div style="width:160px">
488
+ <label>${_cb.out('Background Color')}:<br>
489
+ <button title="${_cb.out('Background Color')}" class="buttonhover-bgcolor is-btn-color" style="margin-top:10px"></button>
490
+ </label>
491
+ </div>
492
+ <div>
493
+ <label>${_cb.out('Text Color')}:<br />
494
+ <button title="${_cb.out('Text Color')}" class="buttonhover-textcolor is-btn-color" style="margin-top:10px"></button>
495
+ </label>
496
+ </div>
497
+ </div>
498
+
499
+ <div style="display:flex;margin:15px 0 25px">
500
+ <div>
501
+ <label>${_cb.out('Border Color')}:<br>
502
+ <button title="${_cb.out('Border Color')}" class="buttonhover-bordercolor is-btn-color" style="margin-top:10px"></button>
503
+ </label>
504
+ <button title="${_cb.out('Same as bg color')}" class="classic-primary same-as-hoverbg" style="display:block;min-width:40px;margin:0;font-size:11px;height:30px;padding:0 8px;text-transform:none;">${_cb.out('Same as bg color')}</button>
505
+ </div>
506
+ </div>
507
+
508
+ <div style="display:flex;margin:15px 0 0">
509
+ <button title="${_cb.out('Clear')}" class="input-clearhover classic-primary" data-lang>${_cb.out('Clear')}</button>
510
+ </div>
511
+
512
+ </div>
513
+ <div id="divMyButtons" class="is-tab-content" data-group="button" style="padding:0;">
514
+
515
+ <div style="height:90px;padding:20px;box-sizing:border-box;position:absolute;top:0;left:0;z-index:1">
516
+ <button title="${_cb.out('Save Current Button')}" class="input-save classic-primary" style="width:220px;" data-lang>${_cb.out('Save Current Button')}</button>
517
+ </div>
518
+ <div id="divMyButtonList" style="padding:1px 20px 10px;"></div>
519
+
520
+ </div>
521
+ <div id="divTemplates" class="is-tab-content" data-group="button" style="padding:0">
522
+
523
+ <div id="divButtonTemplates"></div>
524
+
525
+ </div>
526
+
527
+ <script>
528
+
529
+ var activeLink = parent._cb.activeLink;
530
+
531
+ // https://stackoverflow.com/questions/1887104/how-to-get-the-background-color-of-an-element-using-javascript
532
+ var getStyle = function(element, property) {
533
+ return window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(property) : element.style[property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })];
534
+ };
535
+
536
+ var appendHtml = function(parent, html) {parent.insertAdjacentHTML('beforeend', html);}
537
+
538
+ var removeClass = function(element, classname) {
539
+ if(!element) return;
540
+ if(element.classList.length>0) {
541
+ element.className = element.className.replace(classname, '');
542
+ }
543
+ }
544
+
545
+ var addClass = function(element, classname) {
546
+ if(!element) return;
547
+ if(hasClass(element,classname)) return;
548
+ if(element.classList.length===0) element.className = classname;
549
+ else element.className = element.className + ' ' + classname;
550
+ element.className = element.className.replace(/ +/g, ' ');
551
+ }
552
+
553
+ var hasClass = function(element, classname) {
554
+ if(!element) return false;
555
+ try{
556
+ let s = element.getAttribute('class');
557
+ return new RegExp('\\b'+ classname+'\\b').test(s);
558
+ } catch(e) {
559
+ 0;
560
+ }
561
+ }
562
+
563
+ // var elms = document.querySelectorAll('[data-lang]');
564
+ // Array.prototype.forEach.call(elms, function(elm) {
565
+
566
+ // elm.innerText = parent._cb.out(elm.textContent);
567
+
568
+ // });
569
+
570
+ document.querySelector('#divButtonTemplates').innerHTML = '';
571
+ var general = '<a style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(23, 23, 23); border-color: rgb(23, 23, 23); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 3-->' +
572
+ '<a style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 24-->' +
573
+ '<a style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(188, 188, 188); border-color: rgb(188, 188, 188); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 25-->' +
574
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="rgb(23, 23, 23)" data-hover-color="#ffffff" data-hover-bordercolor="rgb(23, 23, 23)" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(23, 23, 23); border-color: rgb(23, 23, 23); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!-- Button 20 -->' +
575
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="rgb(225, 225, 225)" data-hover-color="#000000" data-hover-bordercolor="rgb(225, 225, 225)" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 23-->' +
576
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="#ffffff" data-hover-color="#000000" data-hover-bordercolor="#616161" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(158, 158, 158); border-width: 2px; border-color: rgb(188, 188, 188); border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a>';
577
+
578
+ var divButtonTemplates = document.querySelector('#divButtonTemplates');
579
+ appendHtml(divButtonTemplates, '<img src="${pluginPath}images/a.jpg" style="margin:10px 0 20px -20px;width:109%"/>');
580
+ appendHtml(divButtonTemplates, generateButtons('#8ea1ff'));
581
+ appendHtml(divButtonTemplates, '<img src="${pluginPath}images/b.jpg" style="margin:10px 0 20px -20px;width:109%"/>');
582
+ appendHtml(divButtonTemplates, generateButtons());
583
+ appendHtml(divButtonTemplates, '<img src="${pluginPath}images/c.jpg" style="margin:10px 0 20px -20px;width:109%"/>');
584
+ appendHtml(divButtonTemplates, generateButtons('#ff8733'));
585
+ appendHtml(divButtonTemplates, '<img src="${pluginPath}images/d.jpg" style="margin:10px 0 20px -20px;width:109%"/>');
586
+ appendHtml(divButtonTemplates, generateButtons('#ffca18'));
587
+ appendHtml(divButtonTemplates, '<img src="${pluginPath}images/e.jpg" style="margin:10px 0 20px -20px;width:109%"/>');
588
+ appendHtml(divButtonTemplates, generateButtons('#ec4130'));
589
+ appendHtml(divButtonTemplates, '<img src="${pluginPath}images/f.jpg" style="margin:10px 0 20px -20px;width:109%"/>');
590
+ appendHtml(divButtonTemplates, generateButtons('#07d2c0'));
591
+ appendHtml(divButtonTemplates, '<img src="${pluginPath}images/g.jpg" style="margin:10px 0 20px -20px;width:109%"/>');
592
+ appendHtml(divButtonTemplates, generateButtons('#07d1ff'));
593
+ appendHtml(divButtonTemplates, '<img src="${pluginPath}images/h.jpg" style="margin:10px 0 20px -20px;width:109%"/>');
594
+ appendHtml(divButtonTemplates, generateButtons('#ff4c8e'));
595
+
596
+ if (parent._cb.settings.emailMode) {
597
+ var element = activeLink;
598
+ while(element.tagName.toLowerCase() !== 'td') {
599
+ element = element.parentNode;
600
+ }
601
+ activeLink = element;
602
+ var a = activeLink.querySelector('a');
603
+ a.style.color = 'inherit !important';
604
+ a.style.fontWeight = 'inherit !important';
605
+ a.style.fontSize = 'inherit !important';
606
+ }
607
+
608
+ //background color
609
+ var bgcolor = getStyle(activeLink, 'background-color');
610
+ var btnBgColor = document.querySelector('.button-bgcolor');
611
+ btnBgColor.style.backgroundColor = bgcolor;
612
+
613
+ btnBgColor.addEventListener('click', function(e) {
614
+
615
+ parent._cb.uo.saveForUndo(true); // checkLater = true
616
+
617
+ parent._cb.pickColor(function (color) {
618
+
619
+ activeLink.style.backgroundColor = color;
620
+ document.querySelector('.button-bgcolor').style.backgroundColor = color;
621
+
622
+ //Trigger Change event
623
+ parent._cb.opts.onChange();
624
+
625
+ }, document.querySelector('.button-bgcolor').style.backgroundColor);
626
+
627
+ });
628
+
629
+ //text color
630
+ var textcolor = getStyle(activeLink, 'color');
631
+ var btnTextColor = document.querySelector('.button-textcolor');
632
+ btnTextColor.style.backgroundColor = textcolor;
633
+
634
+ btnTextColor.addEventListener('click', function(e) {
635
+
636
+ parent._cb.uo.saveForUndo(true); // checkLater = true
637
+
638
+ parent._cb.pickColor(function (color) {
639
+
640
+ activeLink.style.color = color;
641
+ if (parent._cb.settings.emailMode) {
642
+ var a = activeLink.querySelector('a');
643
+ if(a) a.style.color = color;
644
+ }
645
+
646
+ document.querySelector('.button-textcolor').style.backgroundColor = color;
647
+
648
+ //Trigger Change event
649
+ parent._cb.opts.onChange();
650
+
651
+ }, document.querySelector('.button-textcolor').style.backgroundColor);
652
+
653
+ });
654
+
655
+ //border color
656
+ var bordercolor = getStyle(activeLink, 'border-color');
657
+ var btnBorderColor = document.querySelector('.button-bordercolor');
658
+ btnBorderColor.style.backgroundColor = bordercolor;
659
+
660
+ btnBorderColor.addEventListener('click', function(e) {
661
+
662
+ parent._cb.uo.saveForUndo(true); // checkLater = true
663
+
664
+ parent._cb.pickColor(function (color) {
665
+
666
+ activeLink.style.borderColor = color;
667
+ document.querySelector('.button-bordercolor').style.backgroundColor = color;
668
+
669
+ //Trigger Change event
670
+ parent._cb.opts.onChange();
671
+
672
+ }, document.querySelector('.button-bordercolor').style.backgroundColor);
673
+
674
+ });
675
+
676
+ //border width
677
+ var currBw = getStyle(activeLink, 'border-top-width'); // use one side
678
+ if (currBw == '' || currBw == '1px' || currBw == '2px' || currBw == '3px') document.querySelector('#inpBorderWidth').value = currBw;
679
+ if (activeLink.style.border == 'none' || activeLink.style.border == 'none') document.querySelector('#inpBorderWidth').value = 'none';
680
+
681
+ var inpBorderWidth = document.querySelector('#inpBorderWidth');
682
+ inpBorderWidth.addEventListener('change', function(e) {
683
+
684
+ parent._cb.uo.saveForUndo();
685
+
686
+ var bw = document.querySelector('#inpBorderWidth').value;
687
+ if (bw == 'none') {
688
+ activeLink.style.border = 'none';
689
+ } else {
690
+
691
+ var btnBorderColor = document.querySelector('.button-bordercolor');
692
+ var color = btnBorderColor.style.backgroundColor;
693
+
694
+ if (color == '') {
695
+ btnBorderColor.style.backgroundColor = 'rgb(0,0,0)';
696
+ color = 'rgb(0,0,0)';
697
+ }
698
+ activeLink.style.borderWidth = bw;
699
+ activeLink.style.borderColor = color;
700
+ activeLink.style.borderStyle = 'solid';
701
+ }
702
+
703
+ //Trigger Change event
704
+ parent._cb.opts.onChange();
705
+ });
706
+
707
+ //border radius
708
+ var btnBorderRadiusDec = document.querySelector('.border-radius-dec');
709
+ btnBorderRadiusDec.addEventListener('click', function(e) {
710
+
711
+ parent._cb.uo.saveForUndo();
712
+
713
+ var borderradius = getStyle(activeLink, 'border-radius');
714
+ if(borderradius=='') borderradius = activeLink.style.borderRadius;
715
+ var currBrad = borderradius;
716
+ if (currBrad == '') currBrad = '0px';
717
+ var n = parseInt(currBrad);
718
+ n = n - 2;
719
+ if (n <= 0) n = 0;
720
+ activeLink.style.borderRadius = n + 'px';
721
+
722
+ //Trigger Change event
723
+ parent._cb.opts.onChange();
724
+ });
725
+ var btnBorderRadiusInc = document.querySelector('.border-radius-inc');
726
+ btnBorderRadiusInc.addEventListener('click', function(e) {
727
+
728
+ parent._cb.uo.saveForUndo();
729
+
730
+ var borderradius = getStyle(activeLink, 'border-radius');
731
+ if(borderradius=='') borderradius = activeLink.style.borderRadius;
732
+ var currBrad = borderradius;
733
+ if (currBrad == '') currBrad = '0px';
734
+ var n = parseInt(currBrad);
735
+ n = n + 2;
736
+ activeLink.style.borderRadius = n + 'px';
737
+
738
+ //Trigger Change event
739
+ parent._cb.opts.onChange();
740
+ });
741
+
742
+ //sizes
743
+ var btnSizeXXS = document.querySelector('.size-xxs');
744
+ btnSizeXXS.addEventListener('click', function(e) {
745
+
746
+ parent._cb.uo.saveForUndo();
747
+
748
+ activeLink.style.padding = '6px 12px';
749
+ activeLink.style.fontSize = '8px';
750
+ activeLink.style.lineHeight = '1.5';
751
+
752
+ //Trigger Change event
753
+ parent._cb.opts.onChange();
754
+ });
755
+ var btnSizeXS = document.querySelector('.size-xs');
756
+ btnSizeXS.addEventListener('click', function(e) {
757
+
758
+ parent._cb.uo.saveForUndo();
759
+
760
+ activeLink.style.padding = '8px 17px';
761
+ activeLink.style.fontSize = '10px';
762
+ activeLink.style.lineHeight = '1.5';
763
+
764
+ //Trigger Change event
765
+ parent._cb.opts.onChange();
766
+ });
767
+ var btnSizeS = document.querySelector('.size-s');
768
+ btnSizeS.addEventListener('click', function(e) {
769
+
770
+ parent._cb.uo.saveForUndo();
771
+
772
+ activeLink.style.padding = '10px 22px';
773
+ activeLink.style.fontSize = '12px';
774
+ activeLink.style.lineHeight = '1.5';
775
+
776
+ //Trigger Change event
777
+ parent._cb.opts.onChange();
778
+ });
779
+ var btnSizeM = document.querySelector('.size-m');
780
+ btnSizeM.addEventListener('click', function(e) {
781
+
782
+ parent._cb.uo.saveForUndo();
783
+
784
+ activeLink.style.padding = '13px 28px';
785
+ activeLink.style.fontSize = '14px';
786
+ activeLink.style.lineHeight = '1.5';
787
+
788
+ //Trigger Change event
789
+ parent._cb.opts.onChange();
790
+ });
791
+ var btnSizeL = document.querySelector('.size-l');
792
+ btnSizeL.addEventListener('click', function(e) {
793
+
794
+ parent._cb.uo.saveForUndo();
795
+
796
+ activeLink.style.padding = '16px 35px';
797
+ activeLink.style.fontSize = '16px';
798
+ activeLink.style.lineHeight = '1.5';
799
+
800
+ //Trigger Change event
801
+ parent._cb.opts.onChange();
802
+ });
803
+ var btnSizeXL = document.querySelector('.size-xl');
804
+ btnSizeXL.addEventListener('click', function(e) {
805
+
806
+ parent._cb.uo.saveForUndo();
807
+
808
+ activeLink.style.padding = '19px 42px';
809
+ activeLink.style.fontSize = '18px';
810
+ activeLink.style.lineHeight = '1.5';
811
+
812
+ //Trigger Change event
813
+ parent._cb.opts.onChange();
814
+ });
815
+ var btnSizeXXL = document.querySelector('.size-xxl');
816
+ btnSizeXXL.addEventListener('click', function(e) {
817
+
818
+ parent._cb.uo.saveForUndo();
819
+
820
+ activeLink.style.padding = '22px 50px';
821
+ activeLink.style.fontSize = '20px';
822
+ activeLink.style.lineHeight = '1.5';
823
+
824
+ //Trigger Change event
825
+ parent._cb.opts.onChange();
826
+ });
827
+
828
+ //text case
829
+ var btnTextCase = document.querySelector('.textcase');
830
+ btnTextCase.addEventListener('click', function(e) {
831
+
832
+ parent._cb.uo.saveForUndo();
833
+
834
+ var tt = getStyle(activeLink, 'text-transform');
835
+ if (tt == 'uppercase') {
836
+ activeLink.style.textTransform = 'initial';
837
+ } else {
838
+ activeLink.style.textTransform = 'uppercase';
839
+ }
840
+
841
+ //Trigger Change event
842
+ parent._cb.opts.onChange();
843
+ });
844
+
845
+ //font weight
846
+ var fw = getStyle(activeLink, 'font-weight');
847
+ document.querySelector('#inpFontWeight').value = fw;
848
+ var inpFontWeight = document.querySelector('#inpFontWeight');
849
+ inpFontWeight.addEventListener('change', function(e) {
850
+
851
+ parent._cb.uo.saveForUndo();
852
+
853
+ var fw = document.querySelector('#inpFontWeight').value;
854
+ activeLink.style.fontWeight = fw;
855
+
856
+ //Trigger Change event
857
+ parent._cb.opts.onChange();
858
+ });
859
+
860
+ //font size
861
+ var btnFontSizeDec = document.querySelector('.font-size-dec');
862
+ btnFontSizeDec.addEventListener('click', function(e) {
863
+
864
+ parent._cb.uo.saveForUndo();
865
+
866
+ var currFs = getStyle(activeLink, 'font-size');
867
+ var n = parseInt(currFs);
868
+ n = n - 1;
869
+ if (n <= 8) n = 8;
870
+ activeLink.style.fontSize = n + 'px';
871
+
872
+ //added by Jack - apply to child nodes
873
+ var cbDom = parent._cb.cbDom;
874
+ var arrSizes = parent._cb.opts.fontSizeClassValues;
875
+ let elmns = Array.prototype.slice.call(activeLink.getElementsByTagName("*"));
876
+ for(var i=0; i<elmns.length; i++) {
877
+ elmns[i].style.fontSize = n + 'px';
878
+ //remove font-size class
879
+ for(var j=0;j<arrSizes.length; j++) {
880
+ cbDom.removeClass(elmns[i], 'size-'+arrSizes[j]);
881
+ }
882
+ }
883
+ // ----
884
+
885
+ //Trigger Change event
886
+ parent._cb.opts.onChange();
887
+ });
888
+ var btnFontSizeInc = document.querySelector('.font-size-inc');
889
+ btnFontSizeInc.addEventListener('click', function(e) {
890
+
891
+ parent._cb.uo.saveForUndo();
892
+
893
+ var currFs = getStyle(activeLink, 'font-size');
894
+ var n = parseInt(currFs);
895
+ n = n + 1;
896
+ activeLink.style.fontSize = n + 'px';
897
+
898
+ //added by Jack - apply to child nodes
899
+ var cbDom = parent._cb.cbDom;
900
+ var arrSizes = parent._cb.opts.fontSizeClassValues;
901
+ let elmns = Array.prototype.slice.call(activeLink.getElementsByTagName("*"));
902
+ for(var i=0; i<elmns.length; i++) {
903
+ elmns[i].style.fontSize = n + 'px';
904
+ //remove font-size class
905
+ for(var j=0;j<arrSizes.length; j++) {
906
+ cbDom.removeClass(elmns[i], 'size-'+arrSizes[j]);
907
+ }
908
+ }
909
+ // ----
910
+
911
+ //Trigger Change event
912
+ parent._cb.opts.onChange();
913
+ });
914
+
915
+ //letter spacing
916
+ var btnLetterSpacingDec = document.querySelector('.letter-spacing-dec');
917
+ btnLetterSpacingDec.addEventListener('click', function(e) {
918
+
919
+ parent._cb.uo.saveForUndo();
920
+
921
+ var currLs = getStyle(activeLink, 'letter-spacing');
922
+ var n = parseInt(currLs);
923
+ if(!isNaN(n)) {
924
+ n = n - 1;
925
+ if (n <= 0) n = 0;
926
+ } else {
927
+ n = 0;
928
+ }
929
+ activeLink.style.letterSpacing = n + 'px';
930
+
931
+ //Trigger Change event
932
+ parent._cb.opts.onChange();
933
+ });
934
+ var btnLetterSpacingInc = document.querySelector('.letter-spacing-inc');
935
+ btnLetterSpacingInc.addEventListener('click', function(e) {
936
+
937
+ parent._cb.uo.saveForUndo();
938
+
939
+ var currLs = getStyle(activeLink, 'letter-spacing');
940
+ var n = parseInt(currLs);
941
+ if(!isNaN(n)) {
942
+ n = n + 1;
943
+ } else {
944
+ n = 1;
945
+ }
946
+ activeLink.style.letterSpacing = n + 'px';
947
+
948
+ //Trigger Change event
949
+ parent._cb.opts.onChange();
950
+ });
951
+
952
+ //make = bg color
953
+ var btnSameAsBgColor = document.querySelector('.same-as-bg');
954
+ btnSameAsBgColor.addEventListener('click', function(e) {
955
+
956
+ parent._cb.uo.saveForUndo();
957
+
958
+ var btnBgColor = document.querySelector('.button-bgcolor');
959
+ var bgcolor = btnBgColor.style.backgroundColor;
960
+
961
+ var btnBorderColor = document.querySelector('.button-bordercolor');
962
+ btnBorderColor.style.backgroundColor = bgcolor;
963
+
964
+ activeLink.style.borderColor = bgcolor;
965
+
966
+ //Trigger Change event
967
+ parent._cb.opts.onChange();
968
+ });
969
+
970
+ //clear
971
+ var btnClear = document.querySelector('.input-clear');
972
+ btnClear.addEventListener('click', function(e) {
973
+
974
+ parent._cb.uo.saveForUndo();
975
+
976
+ activeLink.setAttribute('style', '');
977
+ document.querySelector('#inpBorderWidth').value = '';
978
+
979
+ if (parent._cb.settings.emailMode) {
980
+ var a = activeLink.querySelector('a');
981
+ if(a) {
982
+ a.setAttribute('style', 'color: inherit !important; font-weight: inherit !important; font-size: inherit !important');
983
+ }
984
+ }
985
+
986
+ var btnBgColor = document.querySelector('.button-bgcolor');
987
+ btnBgColor.style.backgroundColor = '';
988
+
989
+ var btnTextColor = document.querySelector('.button-textcolor');
990
+ btnTextColor.style.backgroundColor = '';
991
+
992
+ var btnBorderColor = document.querySelector('.button-bordercolor');
993
+ btnBorderColor.style.backgroundColor = '';
994
+
995
+ //Trigger Change event
996
+ parent._cb.opts.onChange();
997
+ });
998
+
999
+ //hover background color
1000
+ var hoverbgcolor = activeLink.getAttribute('data-hover-bgcolor');
1001
+ var btnHoverBgColor = document.querySelector('.buttonhover-bgcolor');
1002
+ btnHoverBgColor.style.backgroundColor = hoverbgcolor;
1003
+
1004
+ btnHoverBgColor.addEventListener('click', function(e) {
1005
+
1006
+ parent._cb.uo.saveForUndo(true); // checkLater = true
1007
+
1008
+ parent._cb.pickColor(function (color) {
1009
+
1010
+ activeLink.setAttribute('data-hover-bgcolor', color);
1011
+ addButtonScript(activeLink);
1012
+
1013
+ document.querySelector('.buttonhover-bgcolor').style.backgroundColor = color;
1014
+
1015
+ //Trigger Change event
1016
+ parent._cb.opts.onChange();
1017
+
1018
+ }, document.querySelector('.buttonhover-bgcolor').style.backgroundColor);
1019
+
1020
+ });
1021
+
1022
+ //hover text color
1023
+ var hovertextcolor = activeLink.getAttribute('data-hover-color');
1024
+ var btnHoverTextColor = document.querySelector('.buttonhover-textcolor');
1025
+ btnHoverTextColor.style.backgroundColor = hovertextcolor;
1026
+
1027
+ btnHoverTextColor.addEventListener('click', function(e) {
1028
+
1029
+ parent._cb.uo.saveForUndo(true); // checkLater = true
1030
+
1031
+ parent._cb.pickColor(function (color) {
1032
+
1033
+ activeLink.setAttribute('data-hover-color', color);
1034
+ addButtonScript(activeLink);
1035
+
1036
+ document.querySelector('.buttonhover-textcolor').style.backgroundColor = color;
1037
+
1038
+ //Trigger Change event
1039
+ parent._cb.opts.onChange();
1040
+
1041
+ }, document.querySelector('.buttonhover-textcolor').style.backgroundColor);
1042
+
1043
+ });
1044
+
1045
+ //hover border color
1046
+ var hoverbordercolor = activeLink.getAttribute('data-hover-bordercolor');
1047
+ var btnHoverBorderColor = document.querySelector('.buttonhover-bordercolor');
1048
+ btnHoverBorderColor.style.backgroundColor = hoverbordercolor;
1049
+
1050
+ btnHoverBorderColor.addEventListener('click', function(e){
1051
+
1052
+ parent._cb.uo.saveForUndo(true); // checkLater = true
1053
+
1054
+ parent._cb.pickColor(function (color) {
1055
+
1056
+ activeLink.setAttribute('data-hover-bordercolor', color);
1057
+ addButtonScript(activeLink);
1058
+
1059
+ document.querySelector('.buttonhover-bordercolor').style.backgroundColor = color;
1060
+
1061
+ //Trigger Change event
1062
+ parent._cb.opts.onChange();
1063
+
1064
+ }, document.querySelector('.buttonhover-bordercolor').style.backgroundColor);
1065
+
1066
+ });
1067
+
1068
+ //make = hover bg color
1069
+ var btnSameAsHoverBgColor = document.querySelector('.same-as-hoverbg');
1070
+ btnSameAsHoverBgColor.addEventListener('click', function(e){
1071
+
1072
+ parent._cb.uo.saveForUndo();
1073
+
1074
+ var btnHoverBgColor = document.querySelector('.buttonhover-bgcolor');
1075
+ var hoverbgcolor = btnHoverBgColor.style.backgroundColor;
1076
+
1077
+ var btnHoverBorderColor = document.querySelector('.buttonhover-bordercolor');
1078
+ btnHoverBorderColor.style.backgroundColor = hoverbgcolor;
1079
+
1080
+ activeLink.setAttribute('data-hover-bordercolor', hoverbgcolor);
1081
+
1082
+ //Trigger Change event
1083
+ parent._cb.opts.onChange();
1084
+ });
1085
+
1086
+ //clear hover
1087
+ var btnClearHover = document.querySelector('.input-clearhover');
1088
+ btnClearHover.addEventListener('click', function(e) {
1089
+
1090
+ parent._cb.uo.saveForUndo();
1091
+
1092
+ var btnHoverBgColor = document.querySelector('.buttonhover-bgcolor');
1093
+ btnHoverBgColor.style.backgroundColor = '';
1094
+
1095
+ var btnHoverTextColor = document.querySelector('.buttonhover-textcolor');
1096
+ btnHoverTextColor.style.backgroundColor = '';
1097
+
1098
+ var btnHoverBorderColor = document.querySelector('.buttonhover-bordercolor');
1099
+ btnHoverBorderColor.style.backgroundColor = '';
1100
+
1101
+ activeLink.removeAttribute('data-hover-bgcolor');
1102
+ activeLink.removeAttribute('data-hover-color');
1103
+ activeLink.removeAttribute('data-hover-bordercolor');
1104
+
1105
+ activeLink.removeAttribute('onmouseover');
1106
+ activeLink.removeAttribute('onmouseout');
1107
+
1108
+ //Trigger Change event
1109
+ parent._cb.opts.onChange();
1110
+ });
1111
+
1112
+
1113
+ if (localStorage.getItem("_mybuttons") != null) {
1114
+
1115
+ renderMyButtons();
1116
+
1117
+ var buttons = document.querySelectorAll('#divMyButtonList a');
1118
+ Array.prototype.forEach.call(buttons, function(button) {
1119
+
1120
+ var activeButton = button;
1121
+ button.addEventListener('click', function(e){
1122
+
1123
+ parent._cb.uo.saveForUndo();
1124
+
1125
+ var links = document.querySelectorAll('#divMyButtonList a');
1126
+ Array.prototype.forEach.call(links, function(link) {
1127
+ removeClass(link, 'active');
1128
+ });
1129
+ addClass(activeButton, 'active');
1130
+
1131
+ applyStyles(activeLink, activeButton);
1132
+
1133
+ updateSettings(activeLink);
1134
+
1135
+ cleanupClasses(activeLink);
1136
+
1137
+ //Trigger Change event
1138
+ parent._cb.opts.onChange();
1139
+ });
1140
+
1141
+ });
1142
+
1143
+ var btnRemoves = document.querySelectorAll('.is-button-remove');
1144
+ Array.prototype.forEach.call(btnRemoves, function(btnRemove) {
1145
+
1146
+ btnRemove.addEventListener('click', function(e) {
1147
+
1148
+ parent._cb.uo.saveForUndo();
1149
+
1150
+ var button = e.target.parentNode.parentNode;
1151
+
1152
+ if(button.tagName.toLowerCase() !== 'a') button = button.parentNode;
1153
+
1154
+ if (localStorage.getItem("_mybuttons") != null) {
1155
+ var mybuttons = JSON.parse(localStorage.getItem("_mybuttons"));
1156
+
1157
+ var id = button.getAttribute('data-id');
1158
+
1159
+ for (var i = 0; i < mybuttons.length; i++) {
1160
+ if (i == id) {
1161
+ mybuttons.splice(i, 1);
1162
+
1163
+ localStorage.setItem("_mybuttons", JSON.stringify(mybuttons));
1164
+
1165
+ button.parentNode.removeChild(button);
1166
+
1167
+ var n = 0;
1168
+
1169
+ var links = document.querySelectorAll('#divMyButtonList a');
1170
+ Array.prototype.forEach.call(links, function(link) {
1171
+ link.setAttribute('data-id', n);
1172
+ n = n + 1;
1173
+ });
1174
+
1175
+ return;
1176
+ }
1177
+ }
1178
+
1179
+ }
1180
+
1181
+ //Trigger Change event
1182
+ parent._cb.opts.onChange();
1183
+
1184
+ });
1185
+
1186
+ });
1187
+
1188
+ }
1189
+
1190
+ //save button
1191
+ var btnSave = document.querySelector('.input-save');
1192
+ btnSave.addEventListener('click', function(e) {
1193
+
1194
+ var btnBgColor = document.querySelector('.button-bgcolor');
1195
+ var bgcolor = btnBgColor.style.backgroundColor;
1196
+ if (bgcolor != '') {
1197
+ bgcolor = 'background-color:' + bgcolor + ';';
1198
+ } else {
1199
+ bgcolor = '';
1200
+ }
1201
+
1202
+ var btnTextColor = document.querySelector('.button-textcolor');
1203
+ var textcolor = btnTextColor.style.backgroundColor;
1204
+ if (textcolor != '') {
1205
+ textcolor = 'color:' + textcolor + ';';
1206
+ } else {
1207
+ textcolor = '';
1208
+ }
1209
+ var borderwidth = document.querySelector('#inpBorderWidth').value;
1210
+ var border = '';
1211
+ if (borderwidth == 'none') {
1212
+ border = 'border:none;';
1213
+ } else {
1214
+
1215
+ var btnBorderColor = document.querySelector('.button-bordercolor');
1216
+ var bordercolor = btnBorderColor.style.backgroundColor;
1217
+
1218
+ if (bordercolor != '') {
1219
+ bordercolor = 'border-color:' + bordercolor + ';';
1220
+ } else {
1221
+ bordercolor = '';
1222
+ }
1223
+ border = 'border-width:' + borderwidth + ';' + bordercolor;
1224
+ }
1225
+ var borderradius = activeLink.style.borderRadius;
1226
+ if (borderradius == '') {
1227
+ borderradius = 'border-radius:0px;';
1228
+ } else {
1229
+ borderradius = 'border-radius:' + borderradius + ';';
1230
+ }
1231
+ var padding = activeLink.style.padding;
1232
+ var lineheight = activeLink.style.lineHeight;
1233
+ var texttransform = activeLink.style.textTransform;
1234
+ var fontweight = activeLink.style.fontWeight;
1235
+ var fontsize = activeLink.style.fontSize;
1236
+ var letterspacing = activeLink.style.letterSpacing;
1237
+
1238
+ //var css = bgcolor + textcolor + border + borderradius + 'padding:' + padding + ';line-height:' + lineheight + ';text-transform:' + texttransform + ';font-weight:' + fontweight + ';font-size:' + fontsize + ';letter-spacing:' + letterspacing + ' ;';
1239
+ var css = activeLink.getAttribute('style');
1240
+
1241
+ var mybuttons = [];
1242
+ if (localStorage.getItem("_mybuttons") != null) {
1243
+ var mybuttons = JSON.parse(localStorage.getItem("_mybuttons"));
1244
+ }
1245
+ mybuttons.push([
1246
+ bgcolor + '|' +
1247
+ css + '|' +
1248
+ (activeLink.getAttribute('data-hover-bgcolor') ? activeLink.getAttribute('data-hover-bgcolor') : '') + '|' +
1249
+ (activeLink.getAttribute('data-hover-color') ? activeLink.getAttribute('data-hover-color') : '') + '|' +
1250
+ (activeLink.getAttribute('data-hover-bordercolor') ? activeLink.getAttribute('data-hover-bordercolor') : '')
1251
+ ]);
1252
+ localStorage.setItem("_mybuttons", JSON.stringify(mybuttons));
1253
+
1254
+ renderMyButtons();
1255
+
1256
+ var buttons = document.querySelectorAll('#divMyButtonList a');
1257
+ Array.prototype.forEach.call(buttons, function(button) {
1258
+
1259
+ var activeButton = button;
1260
+ button.addEventListener('click', function(e){
1261
+
1262
+ parent._cb.uo.saveForUndo();
1263
+
1264
+ var links = document.querySelectorAll('#divMyButtonList a');
1265
+ Array.prototype.forEach.call(links, function(link) {
1266
+ removeClass(link, 'active');
1267
+ });
1268
+ addClass(activeButton, 'active');
1269
+
1270
+ applyStyles(activeLink, activeButton);
1271
+
1272
+ updateSettings(activeLink);
1273
+
1274
+ cleanupClasses(activeLink);
1275
+
1276
+ //Trigger Change event
1277
+ parent._cb.opts.onChange();
1278
+ });
1279
+
1280
+ });
1281
+
1282
+
1283
+ var btnRemoves = document.querySelectorAll('.is-button-remove');
1284
+ Array.prototype.forEach.call(btnRemoves, function(btnRemove) {
1285
+
1286
+ btnRemove.addEventListener('click', function(e) {
1287
+
1288
+ parent._cb.uo.saveForUndo();
1289
+
1290
+ var button = e.target.parentNode.parentNode;
1291
+
1292
+ if(button.tagName.toLowerCase() !== 'a') button = button.parentNode;
1293
+
1294
+ if (localStorage.getItem("_mybuttons") != null) {
1295
+ var mybuttons = JSON.parse(localStorage.getItem("_mybuttons"));
1296
+
1297
+ var id = button.getAttribute('data-id');
1298
+
1299
+ for (var i = 0; i < mybuttons.length; i++) {
1300
+ if (i == id) {
1301
+ mybuttons.splice(i, 1);
1302
+
1303
+ localStorage.setItem("_mybuttons", JSON.stringify(mybuttons));
1304
+
1305
+ button.parentNode.removeChild(button);
1306
+
1307
+ var n = 0;
1308
+
1309
+ var links = document.querySelectorAll('#divMyButtonList a');
1310
+ Array.prototype.forEach.call(links, function(link) {
1311
+ link.setAttribute('data-id', n);
1312
+ n = n + 1;
1313
+ });
1314
+
1315
+ return;
1316
+ }
1317
+ }
1318
+
1319
+ }
1320
+
1321
+ //Trigger Change event
1322
+ parent._cb.opts.onChange();
1323
+
1324
+ });
1325
+
1326
+ });
1327
+
1328
+ });
1329
+
1330
+ var buttons = document.querySelectorAll('#divButtonTemplates a');
1331
+ Array.prototype.forEach.call(buttons, function(button) {
1332
+
1333
+ var activeButton = button;
1334
+ button.addEventListener('click', function(e){
1335
+
1336
+ parent._cb.uo.saveForUndo();
1337
+
1338
+ var links = document.querySelectorAll('#divButtonTemplates a');
1339
+ Array.prototype.forEach.call(links, function(link) {
1340
+ removeClass(link, 'active');
1341
+ });
1342
+ addClass(activeButton, 'active');
1343
+
1344
+ applyStyles(activeLink, activeButton);
1345
+
1346
+ updateSettings(activeLink);
1347
+
1348
+ cleanupClasses(activeLink);
1349
+
1350
+ //Trigger Change event
1351
+ parent._cb.opts.onChange();
1352
+ });
1353
+
1354
+ });
1355
+
1356
+ function generateButtons(base) {
1357
+ var template = '' +
1358
+ '<a style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: #34dd87; border-color: #34dd87; border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 18-->' +
1359
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="#34dd87" data-hover-color="#f8f8f8" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: #34dd87; border-color: #34dd87; border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 4-->' +
1360
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="#34dd87" data-hover-color="#ffffff" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(23, 23, 23); border-color: rgb(23, 23, 23); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 19-->' +
1361
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="#34dd87" data-hover-color="#f8f8f8" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 22-->' +
1362
+ /*'<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="#34dd87" data-hover-color="#f8f8f8" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(188, 188, 188); border-color: rgb(188, 188, 188); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 9-->' +*/
1363
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="" data-hover-color="#000000" data-hover-bordercolor="#000000" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: #34dd87; border-color: #34dd87; border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 12-->' +
1364
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="#ffffff" data-hover-color="#34dd87" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(0, 0, 0); border-color: rgb(17, 17, 17); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 17-->' +
1365
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="" data-hover-color="#34dd87" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgba(0, 0, 0, 0); color: rgb(158, 158, 158); border-color: rgb(188, 188, 188); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 10-->' +
1366
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="#3dea92" data-hover-color="#ffffff" data-hover-bordercolor="#3dea92" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: #34dd87; color: rgb(248, 248, 248); border-color: #34dd87; border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 5-->' +
1367
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="#2fd07e" data-hover-color="#ffffff" data-hover-bordercolor="#2fd07e" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: #34dd87; color: rgb(255, 255, 255); border-color: #34dd87; border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 8-->' +
1368
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="#000000" data-hover-color="#f8f8f8" data-hover-bordercolor="#000000" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: #34dd87; color: rgb(23, 23, 23); border-color: #34dd87; border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 11-->' +
1369
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="#34dd87" data-hover-color="#ffffff" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgb(23, 23, 23); color: #34dd87; border-color: rgb(23, 23, 23); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 14-->' +
1370
+ '<a onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" data-hover-bgcolor="#34dd87" data-hover-color="#ffffff" data-hover-bordercolor="#34dd87" style="display:inline-block;text-decoration:none;transition: all 0.16s ease;border-style:solid;cursor:pointer;background-color: rgb(23, 23, 23); color: rgb(255, 255, 255); border-color: rgb(23, 23, 23); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px;">Button</a><!--Button 16-->';
1371
+ if (!base) return template;
1372
+ var html = '';
1373
+ html = template.replace(new RegExp('#34dd87', 'g'), base);
1374
+ var hover1 = parent._cb.LightenDarkenColor(base, 15);
1375
+ var hover2 = parent._cb.LightenDarkenColor(base, -20);
1376
+ html = html.replace(new RegExp('#3dea92', 'g'), hover1);
1377
+ html = html.replace(new RegExp('#2fd07e', 'g'), hover2);
1378
+ return html;
1379
+ }
1380
+
1381
+ function renderMyButtons() {
1382
+ var mybuttons = JSON.parse(localStorage.getItem("_mybuttons"));
1383
+
1384
+ var html_mybuttons = '';
1385
+ for (var i = 0; i < mybuttons.length; i++) {
1386
+
1387
+ var s = mybuttons[i] + '';
1388
+ var bg = s.split('|')[0]; //not used
1389
+ var css = s.split('|')[1];
1390
+
1391
+ var onmouse = 'onmouseover="this.setAttribute(\\'data-style\\',this.style.cssText);if(this.getAttribute(\\'data-hover-bordercolor\\')) this.style.borderColor=this.getAttribute(\\'data-hover-bordercolor\\');if(this.getAttribute(\\'data-hover-bgcolor\\')) this.style.backgroundColor=this.getAttribute(\\'data-hover-bgcolor\\');if(this.getAttribute(\\'data-hover-color\\')) this.style.color=this.getAttribute(\\'data-hover-color\\');" ' +
1392
+ 'onmouseout="this.setAttribute(\\'style\\',this.getAttribute(\\'data-style\\'));this.removeAttribute(\\'data-style\\')" ';
1393
+ if (s.split('|')[2] == '' && s.split('|')[3] == '' && s.split('|')[4] == '') {
1394
+ onmouse = '';
1395
+ }
1396
+ var datahoverbgcolor = '';
1397
+ if (s.split('|')[2] != '') {
1398
+ datahoverbgcolor = 'data-hover-bgcolor="' + s.split('|')[2] + '" ';
1399
+ }
1400
+ var datahovercolor = '';
1401
+ if (s.split('|')[3] != '') {
1402
+ datahovercolor = 'data-hover-color="' + s.split('|')[3] + '" ';
1403
+ }
1404
+ var datahoverbordercolor = '';
1405
+ if (s.split('|')[4] != '') {
1406
+ datahoverbordercolor = 'data-hover-bordercolor="' + s.split('|')[4] + '" ';
1407
+ }
1408
+
1409
+ html_mybuttons += '<a ' +
1410
+ 'data-id="' + i + '" ' +
1411
+ onmouse +
1412
+ datahoverbgcolor +
1413
+ datahovercolor +
1414
+ datahoverbordercolor +
1415
+ 'data-style="' + css + '" ' +
1416
+ 'style="' + css + '">Button<div class="is-button-remove"><svg class="is-icon-flex" style="fill:rgba(255, 255, 266, 1);width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></div></a>';
1417
+
1418
+ }
1419
+
1420
+ document.querySelector('#divMyButtonList').innerHTML = html_mybuttons;
1421
+ }
1422
+
1423
+ function applyStyles(link, button) {
1424
+ var margin = 'margin-top: ' + link.style.marginTop + ';';
1425
+ margin += 'margin-right: ' + link.style.marginRight + ';';
1426
+ margin += 'margin-bottom: ' + link.style.marginBottom + ';';
1427
+ margin += 'margin-left: ' + link.style.marginLeft + ';';
1428
+
1429
+ if (button.getAttribute('data-style')) {
1430
+ link.setAttribute('style', margin + button.getAttribute('data-style'));
1431
+ } else {
1432
+ link.setAttribute('style', margin + button.getAttribute('style'));
1433
+ }
1434
+ if (button.getAttribute('data-hover-bgcolor')) {
1435
+ link.setAttribute('data-hover-bgcolor', button.getAttribute('data-hover-bgcolor'));
1436
+ } else {
1437
+ link.removeAttribute('data-hover-bgcolor');
1438
+ }
1439
+ if (button.getAttribute('data-hover-color')) {
1440
+ link.setAttribute('data-hover-color', button.getAttribute('data-hover-color'));
1441
+ } else {
1442
+ link.removeAttribute('data-hover-color');
1443
+ }
1444
+ if (button.getAttribute('data-hover-bordercolor')) {
1445
+ link.setAttribute('data-hover-bordercolor', button.getAttribute('data-hover-bordercolor'));
1446
+ } else {
1447
+ link.removeAttribute('data-hover-bordercolor');
1448
+ }
1449
+ if (button.getAttribute('onmouseover')) {
1450
+ link.setAttribute("onmouseover", "this.setAttribute('data-style',this.style.cssText);if(this.getAttribute('data-hover-bordercolor')) this.style.borderColor=this.getAttribute('data-hover-bordercolor');if(this.getAttribute('data-hover-bgcolor')) this.style.backgroundColor=this.getAttribute('data-hover-bgcolor');if(this.getAttribute('data-hover-color')) this.style.color=this.getAttribute('data-hover-color');");
1451
+ } else {
1452
+ link.removeAttribute('onmouseover');
1453
+ }
1454
+ if (button.getAttribute('onmouseout')) {
1455
+ link.setAttribute("onmouseout", "this.setAttribute('style',this.getAttribute('data-style'));this.removeAttribute('data-style')");
1456
+ } else {
1457
+ link.removeAttribute('onmouseout');
1458
+ }
1459
+
1460
+ if (parent._cb.settings.emailMode) {
1461
+ var a = link.querySelector('a');
1462
+ if(a) {
1463
+ a.setAttribute('style', 'color: inherit !important; font-weight: inherit !important; font-size: inherit !important');
1464
+ }
1465
+ }
1466
+ }
1467
+
1468
+ function updateSettings(link) {
1469
+ setTimeout(function () {
1470
+
1471
+ var btnBgColor = document.querySelector('.button-bgcolor');
1472
+ btnBgColor.style.backgroundColor = link.style.backgroundColor;
1473
+
1474
+ var btnTextColor = document.querySelector('.button-textcolor');
1475
+ btnTextColor.style.backgroundColor = link.style.color;
1476
+
1477
+ var btnBorderColor = document.querySelector('.button-bordercolor');
1478
+ btnBorderColor.style.backgroundColor = link.style.borderColor;
1479
+
1480
+ var currBw = link.style.borderTopWidth;
1481
+ if (currBw == '' || currBw == '1px' || currBw == '2px' || currBw == '3px') document.querySelector('#inpBorderWidth').value = currBw;
1482
+ if (link.style.border == 'none' || link.style.border == 'none') document.querySelector('#inpBorderWidth').value = 'none';
1483
+
1484
+ var btnHoverBgColor = document.querySelector('.buttonhover-bgcolor');
1485
+ btnHoverBgColor.style.backgroundColor = link.getAttribute('data-hover-bgcolor');
1486
+
1487
+ var btnHoverTextColor = document.querySelector('.buttonhover-textcolor');
1488
+ btnHoverTextColor.style.backgroundColor = link.getAttribute('data-hover-color');
1489
+
1490
+ var btnHoverBorderColor = document.querySelector('.buttonhover-bordercolor');
1491
+ btnHoverBorderColor.style.backgroundColor = link.getAttribute('data-hover-bordercolor');
1492
+
1493
+ }, 300);
1494
+ }
1495
+
1496
+ function cleanupClasses(link) {
1497
+ removeClass(link, 'is-btn-ghost1');
1498
+ removeClass(link, 'is-btn-ghost2');
1499
+ removeClass(link, 'is-upper');
1500
+ removeClass(link, 'is-btn-small');
1501
+ removeClass(link, 'is-btn');
1502
+ removeClass(link, 'is-rounded-30');
1503
+ removeClass(link, 'btn-primary');
1504
+ removeClass(link, 'btn-default');
1505
+ removeClass(link, 'btn');
1506
+ }
1507
+
1508
+ function addButtonScript(link) {
1509
+ link.setAttribute("onmouseover", "this.setAttribute('data-style',this.style.cssText);" +
1510
+ "if(this.getAttribute('data-hover-bordercolor')) this.style.borderColor=this.getAttribute('data-hover-bordercolor');" +
1511
+ "if(this.getAttribute('data-hover-bgcolor')) this.style.backgroundColor=this.getAttribute('data-hover-bgcolor');" +
1512
+ "if(this.getAttribute('data-hover-color')) this.style.color=this.getAttribute('data-hover-color');");
1513
+
1514
+ link.setAttribute("onmouseout", "this.setAttribute('style',this.getAttribute('data-style'));" +
1515
+ "this.removeAttribute('data-style')");
1516
+
1517
+ }
1518
+
1519
+ /* ------------------- Tabs --------------------- */
1520
+
1521
+ var tabs = document.querySelectorAll('.is-tabs a');
1522
+ Array.prototype.forEach.call(tabs, function(tab) {
1523
+
1524
+ tab.addEventListener('click', function(e){
1525
+
1526
+ if(hasClass(tab, 'active')) {
1527
+ e.preventDefault();
1528
+ return false;
1529
+ }
1530
+ var id = tab.getAttribute('data-content');
1531
+ if(!id) {
1532
+ e.preventDefault();
1533
+ return false;
1534
+ }
1535
+
1536
+ var group = tab.parentNode.getAttribute('data-group');
1537
+
1538
+ var samegrouptabs = document.querySelectorAll('.is-tabs[data-group="' + group + '"] > a');
1539
+ Array.prototype.forEach.call(samegrouptabs, function(samegrouptab) {
1540
+ removeClass(samegrouptab, 'active');
1541
+ });
1542
+ addClass(tab, 'active');
1543
+
1544
+ var samegroupcontents = document.querySelectorAll('.is-tab-content[data-group="' + group + '"]');
1545
+ Array.prototype.forEach.call(samegroupcontents, function(samegroupcontent) {
1546
+ samegroupcontent.style.display = 'none';
1547
+ });
1548
+ document.querySelector('#' + id).style.display = 'block';
1549
+
1550
+ e.preventDefault();
1551
+ return false;
1552
+ });
1553
+
1554
+ });
1555
+
1556
+ </script>
1557
+ </body>
1558
+ </html>
1559
+
1560
+ `;
1561
+
1562
+ return html;
1563
+ }
1564
+
1565
+ })();
1566
+