@innovastudio/contentbuilder 1.1.12 → 1.1.13

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