@innovastudio/contentbox 1.4.51 → 1.4.53

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 (3) hide show
  1. package/package.json +2 -2
  2. package/public/contentbox/contentbox.esm.js +2034 -10
  3. package/public/contentbox/contentbox.min.js +9 -9
package/public/contentbox/contentbox.esm.js CHANGED
@@ -465,6 +465,19 @@ const prepareSvgIcons$1 = builder => {
465
465
  <path d="M20 4v5h-5"></path>
466
466
  </symbol>
467
467
 
468
+ <symbol id="icon-device-mobile" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
469
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
470
+ <rect x="6" y="3" width="12" height="18" rx="2"></rect>
471
+ <line x1="11" y1="4" x2="13" y2="4"></line>
472
+ <line x1="12" y1="17" x2="12" y2="17.01"></line>
473
+ </symbol>
474
+
475
+ <symbol id="icon-device-laptop" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
476
+ <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
477
+ <line x1="3" y1="19" x2="21" y2="19"></line>
478
+ <rect x="5" y="6" width="14" height="10" rx="1"></rect>
479
+ </symbol>
480
+
468
481
  </defs>
469
482
  </svg>`;
470
483
  const builderStuff = builder.builderStuff;
@@ -63595,6 +63608,10 @@ class Image$1 {
63595
63608
  } else {
63596
63609
  preview.style.height = maxH + 'px';
63597
63610
  }
63611
+ }
63612
+
63613
+ if (window.innerHeight <= 800) {
63614
+ preview.style.height = '350px';
63598
63615
  } // imagePreview.src = img.src;
63599
63616
 
63600
63617
 
@@ -64232,7 +64249,14 @@ class ButtonEditor {
64232
64249
  <a title="${util.out('Saved')}" href="" data-content="divMyButtons">${util.out('Saved')}</a>
64233
64250
  <a title="${util.out('Templates')}" href="" data-content="divButtonTemplates">${util.out('Templates')}</a>
64234
64251
  </div>
64235
- <div id="divButtonGeneral" class="is-tab-content active" tabindex="-1" data-group="button" style="display:block">
64252
+ <div id="divButtonGeneral" class="is-tab-content active" tabindex="-1" data-group="button" style="display: flex;
64253
+ height: 100%;
64254
+ width:100%;
64255
+ overflow-y: auto;
64256
+ position: absolute;
64257
+ border-top: 82px solid transparent;
64258
+ box-sizing: border-box;
64259
+ top: 0px;">
64236
64260
 
64237
64261
  <div class="flex flex-row">
64238
64262
  <div class="flex flex-col" style="margin-right: 40px;">
@@ -64282,7 +64306,7 @@ class ButtonEditor {
64282
64306
  <div>
64283
64307
  <label>${util.out('Padding X')}</label>:
64284
64308
  </div>
64285
- <div class="flex flex-row flex-wrap" style="margin-top:5px">
64309
+ <div class="flex flex-row" style="margin-top:5px">
64286
64310
  <button title="2" data-command="2" class="paddingx-command" style="margin-right:4px">2</button>
64287
64311
  <button title="3" data-command="3" class="paddingx-command" style="margin-right:4px">3</button>
64288
64312
  <button title="4" data-command="4" class="paddingx-command" style="margin-right:4px">4</button>
@@ -64298,7 +64322,7 @@ class ButtonEditor {
64298
64322
  <div>
64299
64323
  <label>${util.out('Padding Y')}</label>:
64300
64324
  </div>
64301
- <div class="flex flex-row flex-wrap" style="margin-top:5px">
64325
+ <div class="flex flex-row" style="margin-top:5px">
64302
64326
  <button title="0" data-command="0" class="paddingy-command" style="margin-right:4px">0</button>
64303
64327
  <button title="1" data-command="1" class="paddingy-command" style="margin-right:4px">1</button>
64304
64328
  <button title="2" data-command="2" class="paddingy-command" style="margin-right:4px">2</button>
@@ -79381,7 +79405,7 @@ class Preferences {
79381
79405
 
79382
79406
  }
79383
79407
 
79384
- const dom$2 = new Dom();
79408
+ const dom$2$1 = new Dom();
79385
79409
 
79386
79410
  class ColorClassPicker {
79387
79411
  constructor(opts = {}, mode) {
@@ -79521,7 +79545,7 @@ class ColorClassPicker {
79521
79545
  this.showColorGradient('gray');
79522
79546
  let btns = document.querySelectorAll('.base-color');
79523
79547
  Array.prototype.forEach.call(btns, btn => {
79524
- dom$2.addEventListener(btn, 'click', () => {
79548
+ dom$2$1.addEventListener(btn, 'click', () => {
79525
79549
  const base = btn.getAttribute('data-base');
79526
79550
  this.showColorGradient(base);
79527
79551
  let val = btn.getAttribute('data-value');
@@ -79531,7 +79555,7 @@ class ColorClassPicker {
79531
79555
  });
79532
79556
  btns = document.querySelectorAll('.quick-color');
79533
79557
  Array.prototype.forEach.call(btns, btn => {
79534
- dom$2.addEventListener(btn, 'click', e => {
79558
+ dom$2$1.addEventListener(btn, 'click', e => {
79535
79559
  e.preventDefault();
79536
79560
  let val = btn.getAttribute('data-value');
79537
79561
  if (this.mode === 'text') val = val.replace('bg-', 'text-');
@@ -79555,7 +79579,7 @@ class ColorClassPicker {
79555
79579
  divDetails.innerHTML = s;
79556
79580
  const btns = document.querySelectorAll('.detail-color');
79557
79581
  Array.prototype.forEach.call(btns, btn => {
79558
- dom$2.addEventListener(btn, 'click', () => {
79582
+ dom$2$1.addEventListener(btn, 'click', () => {
79559
79583
  let val = btn.getAttribute('data-value');
79560
79584
  if (this.mode === 'text') val = val.replace('bg-', 'text-');
79561
79585
  this.opts.onPick(val);
@@ -93422,8 +93446,7 @@ class ContentStuff {
93422
93446
 
93423
93447
  }
93424
93448
 
93425
- // Experimental
93426
- const dom$1 = new Dom$1();
93449
+ const dom$2 = new Dom$1();
93427
93450
 
93428
93451
  class AnimateScroll {
93429
93452
  constructor(builder) {
@@ -94499,7 +94522,7 @@ class AnimateScroll {
94499
94522
 
94500
94523
  </div>
94501
94524
  `;
94502
- dom$1.appendHtml(builderStuff, html);
94525
+ dom$2.appendHtml(builderStuff, html);
94503
94526
  const modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
94504
94527
  this.modalAnimateScroll = modalAnimateScroll;
94505
94528
  const divEnterAnim = modalAnimateScroll.querySelector('#divEnterAnim');
@@ -97767,6 +97790,2002 @@ class AnimateScroll {
97767
97790
 
97768
97791
  }
97769
97792
 
97793
+ const dom$1 = new Dom$1();
97794
+
97795
+ class Timeline {
97796
+ constructor(builder) {
97797
+ this.builder = builder;
97798
+ const builderStuff = this.builder.builderStuff;
97799
+ this.builderStuff = builderStuff;
97800
+ let html = `
97801
+ <style>
97802
+ .is-modal.page-timeline {
97803
+ width: 1190px !important;
97804
+ height: 332px !important;
97805
+ top: auto !important;
97806
+ bottom: 30px !important;
97807
+ left: auto !important;
97808
+ right: 30px !important;
97809
+ }
97810
+
97811
+ @media all and (max-width: 1919px) {
97812
+ .is-modal.page-timeline {
97813
+ width: 60vw !important;
97814
+ }
97815
+ }
97816
+ @media all and (max-width: 1850px) {
97817
+ .is-modal.page-timeline {
97818
+ width: 55vw !important;
97819
+ }
97820
+ }
97821
+ @media all and (max-width: 1650px) {
97822
+ .is-modal.page-timeline {
97823
+ width: 50vw !important;
97824
+ }
97825
+ }
97826
+ @media all and (max-width: 1480px) {
97827
+ .is-modal.page-timeline {
97828
+ width: 45vw !important;
97829
+ }
97830
+ }
97831
+ @media all and (max-width: 1350px) {
97832
+ .is-modal.page-timeline {
97833
+ width: 40vw !important;
97834
+ min-width: 576px;
97835
+ }
97836
+ }
97837
+
97838
+ .page-timeline td {
97839
+ font-size: 13px;
97840
+ padding: 3px 0px;
97841
+ }
97842
+ .page-timeline .table-header td {
97843
+ font-size: 11px;
97844
+ padding: 3px 0 0;
97845
+ }
97846
+ .page-timeline td input[type=text] {
97847
+ font-size: 12px !important;
97848
+ font-family: sans-serif !important;
97849
+ font-weight: 300 !important;
97850
+ padding: 0 !important;
97851
+ width: 36px !important;
97852
+ height: 30px !important;
97853
+ text-align: center !important;
97854
+ letter-spacing: 0px !important;
97855
+ }
97856
+ </style>
97857
+ <div class="is-modal is-modal-content page-timeline" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
97858
+ <div class="is-modal-bar is-draggable" draggable="">
97859
+ <span>${out('Timeline')}</span>
97860
+ <button class="is-modal-close" tabindex="-1" title="${out('Close')}">
97861
+ <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>
97862
+ </button>
97863
+ </div>
97864
+ <div style="position:absolute;box-sizing:border-box;top:0;left:0;width:100%;height:100%;border-top:transparent 35px solid;overflow-y:hidden;overflow-x:auto;">
97865
+
97866
+ <div style="width:1190px;">
97867
+ <table class="table-timeline" style="margin:0 15px 10px;border-collapse:initial;">
97868
+ <tr class="table-header">
97869
+ <td style="text-align:center"> </td>
97870
+ <td style="text-align:center">0</td>
97871
+ <td style="text-align:center"></td>
97872
+ <td style="text-align:center"></td>
97873
+ <td style="text-align:center"></td>
97874
+ <td style="text-align:center"></td>
97875
+ <td style="text-align:center"></td>
97876
+ <td style="text-align:center"></td>
97877
+ <td style="text-align:center">50%</td>
97878
+ <td style="text-align:center"></td>
97879
+ <td style="text-align:center"></td>
97880
+ <td style="text-align:center"></td>
97881
+ <td style="text-align:center"></td>
97882
+ <td style="text-align:center"></td>
97883
+ <td style="text-align:center"></td>
97884
+ <td style="text-align:center">100%</td>
97885
+ <td style="text-align:center"></td>
97886
+ <td style="text-align:center"></td>
97887
+ <td style="text-align:center"></td>
97888
+ <td style="text-align:center"></td>
97889
+ <td style="text-align:center"></td>
97890
+ <td style="text-align:center"></td>
97891
+ <td style="text-align:center">150%</td>
97892
+ <td style="text-align:center"></td>
97893
+ <td style="text-align:center"></td>
97894
+ <td style="text-align:center"></td>
97895
+ <td style="text-align:center"></td>
97896
+ <td style="text-align:center"></td>
97897
+ <td style="text-align:center"></td>
97898
+ <td style="text-align:center">200%</td>
97899
+ </tr>
97900
+ <tr>
97901
+ <td>
97902
+ <span class="bold">${out('Slide X')}</span>
97903
+ </td>
97904
+ <td>
97905
+ <input class="inp-x" placeholder="" type="text" />
97906
+ </td>
97907
+ <td>
97908
+ <input class="inp-x-100" placeholder="" type="text" />
97909
+ </td>
97910
+ <td>
97911
+ <input class="inp-x-200" placeholder="" type="text" />
97912
+ </td>
97913
+ <td>
97914
+ <input class="inp-x-300" placeholder="" type="text" />
97915
+ </td>
97916
+ <td>
97917
+ <input class="inp-x-400" placeholder="" type="text" />
97918
+ </td>
97919
+ <td>
97920
+ <input class="inp-x-500" placeholder="" type="text" />
97921
+ </td>
97922
+ <td>
97923
+ <input class="inp-x-600" placeholder="" type="text" />
97924
+ </td>
97925
+ <td>
97926
+ <input class="inp-x-700" placeholder="" type="text" />
97927
+ </td>
97928
+ <td>
97929
+ <input class="inp-x-800" placeholder="" type="text" />
97930
+ </td>
97931
+ <td>
97932
+ <input class="inp-x-900" placeholder="" type="text" />
97933
+ </td>
97934
+ <td>
97935
+ <input class="inp-x-1000" placeholder="" type="text" />
97936
+ </td>
97937
+ <td>
97938
+ <input class="inp-x-1100" placeholder="" type="text" />
97939
+ </td>
97940
+ <td>
97941
+ <input class="inp-x-1200" placeholder="" type="text" />
97942
+ </td>
97943
+ <td>
97944
+ <input class="inp-x-1300" placeholder="" type="text" />
97945
+ </td>
97946
+ <td>
97947
+ <input class="inp-x-1400" placeholder="" type="text" />
97948
+ </td>
97949
+ <td>
97950
+ <input class="inp-x-1500" placeholder="" type="text" />
97951
+ </td>
97952
+ <td>
97953
+ <input class="inp-x-1600" placeholder="" type="text" />
97954
+ </td>
97955
+
97956
+ <td>
97957
+ <input class="inp-x-1700" placeholder="" type="text" />
97958
+ </td>
97959
+ <td>
97960
+ <input class="inp-x-1800" placeholder="" type="text" />
97961
+ </td>
97962
+ <td>
97963
+ <input class="inp-x-1900" placeholder="" type="text" />
97964
+ </td>
97965
+ <td>
97966
+ <input class="inp-x-2000" placeholder="" type="text" />
97967
+ </td>
97968
+ <td>
97969
+ <input class="inp-x-2100" placeholder="" type="text" />
97970
+ </td>
97971
+ <td>
97972
+ <input class="inp-x-2200" placeholder="" type="text" />
97973
+ </td>
97974
+ <td>
97975
+ <input class="inp-x-2300" placeholder="" type="text" />
97976
+ </td>
97977
+ <td>
97978
+ <input class="inp-x-2400" placeholder="" type="text" />
97979
+ </td>
97980
+ <td>
97981
+ <input class="inp-x-2500" placeholder="" type="text" />
97982
+ </td>
97983
+ <td>
97984
+ <input class="inp-x-2600" placeholder="" type="text" />
97985
+ </td>
97986
+ <td>
97987
+ <input class="inp-x-2700" placeholder="" type="text" />
97988
+ </td>
97989
+ <td>
97990
+ <input class="inp-x-2800" placeholder="" type="text" />
97991
+ </td>
97992
+ </tr>
97993
+ <tr>
97994
+ <td>
97995
+ <span class="bold">${out('Slide Y')}</span>
97996
+ </td>
97997
+ <td>
97998
+ <input class="inp-y" placeholder="" type="text" />
97999
+ </td>
98000
+ <td>
98001
+ <input class="inp-y-100" placeholder="" type="text" />
98002
+ </td>
98003
+ <td>
98004
+ <input class="inp-y-200" placeholder="" type="text" />
98005
+ </td>
98006
+ <td>
98007
+ <input class="inp-y-300" placeholder="" type="text" />
98008
+ </td>
98009
+ <td>
98010
+ <input class="inp-y-400" placeholder="" type="text" />
98011
+ </td>
98012
+ <td>
98013
+ <input class="inp-y-500" placeholder="" type="text" />
98014
+ </td>
98015
+ <td>
98016
+ <input class="inp-y-600" placeholder="" type="text" />
98017
+ </td>
98018
+ <td>
98019
+ <input class="inp-y-700" placeholder="" type="text" />
98020
+ </td>
98021
+ <td>
98022
+ <input class="inp-y-800" placeholder="" type="text" />
98023
+ </td>
98024
+ <td>
98025
+ <input class="inp-y-900" placeholder="" type="text" />
98026
+ </td>
98027
+ <td>
98028
+ <input class="inp-y-1000" placeholder="" type="text" />
98029
+ </td>
98030
+ <td>
98031
+ <input class="inp-y-1100" placeholder="" type="text" />
98032
+ </td>
98033
+ <td>
98034
+ <input class="inp-y-1200" placeholder="" type="text" />
98035
+ </td>
98036
+ <td>
98037
+ <input class="inp-y-1300" placeholder="" type="text" />
98038
+ </td>
98039
+ <td>
98040
+ <input class="inp-y-1400" placeholder="" type="text" />
98041
+ </td>
98042
+ <td>
98043
+ <input class="inp-y-1500" placeholder="" type="text" />
98044
+ </td>
98045
+ <td>
98046
+ <input class="inp-y-1600" placeholder="" type="text" />
98047
+ </td>
98048
+
98049
+ <td>
98050
+ <input class="inp-y-1700" placeholder="" type="text" />
98051
+ </td>
98052
+ <td>
98053
+ <input class="inp-y-1800" placeholder="" type="text" />
98054
+ </td>
98055
+ <td>
98056
+ <input class="inp-y-1900" placeholder="" type="text" />
98057
+ </td>
98058
+ <td>
98059
+ <input class="inp-y-2000" placeholder="" type="text" />
98060
+ </td>
98061
+ <td>
98062
+ <input class="inp-y-2100" placeholder="" type="text" />
98063
+ </td>
98064
+ <td>
98065
+ <input class="inp-y-2200" placeholder="" type="text" />
98066
+ </td>
98067
+ <td>
98068
+ <input class="inp-y-2300" placeholder="" type="text" />
98069
+ </td>
98070
+ <td>
98071
+ <input class="inp-y-2400" placeholder="" type="text" />
98072
+ </td>
98073
+ <td>
98074
+ <input class="inp-y-2500" placeholder="" type="text" />
98075
+ </td>
98076
+ <td>
98077
+ <input class="inp-y-2600" placeholder="" type="text" />
98078
+ </td>
98079
+ <td>
98080
+ <input class="inp-y-2700" placeholder="" type="text" />
98081
+ </td>
98082
+ <td>
98083
+ <input class="inp-y-2800" placeholder="" type="text" />
98084
+ </td>
98085
+ </tr>
98086
+ <tr>
98087
+ <td>
98088
+ <span class="bold">${out('Scale')}</span>
98089
+ </td>
98090
+ <td>
98091
+ <input class="inp-sc" placeholder="" type="text" />
98092
+ </td>
98093
+ <td>
98094
+ <input class="inp-sc-100" placeholder="" type="text" />
98095
+ </td>
98096
+ <td>
98097
+ <input class="inp-sc-200" placeholder="" type="text" />
98098
+ </td>
98099
+ <td>
98100
+ <input class="inp-sc-300" placeholder="" type="text" />
98101
+ </td>
98102
+ <td>
98103
+ <input class="inp-sc-400" placeholder="" type="text" />
98104
+ </td>
98105
+ <td>
98106
+ <input class="inp-sc-500" placeholder="" type="text" />
98107
+ </td>
98108
+ <td>
98109
+ <input class="inp-sc-600" placeholder="" type="text" />
98110
+ </td>
98111
+ <td>
98112
+ <input class="inp-sc-700" placeholder="" type="text" />
98113
+ </td>
98114
+ <td>
98115
+ <input class="inp-sc-800" placeholder="" type="text" />
98116
+ </td>
98117
+ <td>
98118
+ <input class="inp-sc-900" placeholder="" type="text" />
98119
+ </td>
98120
+ <td>
98121
+ <input class="inp-sc-1000" placeholder="" type="text" />
98122
+ </td>
98123
+ <td>
98124
+ <input class="inp-sc-1100" placeholder="" type="text" />
98125
+ </td>
98126
+ <td>
98127
+ <input class="inp-sc-1200" placeholder="" type="text" />
98128
+ </td>
98129
+ <td>
98130
+ <input class="inp-sc-1300" placeholder="" type="text" />
98131
+ </td>
98132
+ <td>
98133
+ <input class="inp-sc-1400" placeholder="" type="text" />
98134
+ </td>
98135
+ <td>
98136
+ <input class="inp-sc-1500" placeholder="" type="text" />
98137
+ </td>
98138
+ <td>
98139
+ <input class="inp-sc-1600" placeholder="" type="text" />
98140
+ </td>
98141
+
98142
+ <td>
98143
+ <input class="inp-sc-1700" placeholder="" type="text" />
98144
+ </td>
98145
+ <td>
98146
+ <input class="inp-sc-1800" placeholder="" type="text" />
98147
+ </td>
98148
+ <td>
98149
+ <input class="inp-sc-1900" placeholder="" type="text" />
98150
+ </td>
98151
+ <td>
98152
+ <input class="inp-sc-2000" placeholder="" type="text" />
98153
+ </td>
98154
+ <td>
98155
+ <input class="inp-sc-2100" placeholder="" type="text" />
98156
+ </td>
98157
+ <td>
98158
+ <input class="inp-sc-2200" placeholder="" type="text" />
98159
+ </td>
98160
+ <td>
98161
+ <input class="inp-sc-2300" placeholder="" type="text" />
98162
+ </td>
98163
+ <td>
98164
+ <input class="inp-sc-2400" placeholder="" type="text" />
98165
+ </td>
98166
+ <td>
98167
+ <input class="inp-sc-2500" placeholder="" type="text" />
98168
+ </td>
98169
+ <td>
98170
+ <input class="inp-sc-2600" placeholder="" type="text" />
98171
+ </td>
98172
+ <td>
98173
+ <input class="inp-sc-2700" placeholder="" type="text" />
98174
+ </td>
98175
+ <td>
98176
+ <input class="inp-sc-2800" placeholder="" type="text" />
98177
+ </td>
98178
+ </tr>
98179
+ <tr>
98180
+ <td>
98181
+ <span class="bold">${out('Rotate')}</span>
98182
+ </td>
98183
+ <td>
98184
+ <input class="inp-rt" placeholder="" type="text" />
98185
+ </td>
98186
+ <td>
98187
+ <input class="inp-rt-100" placeholder="" type="text" />
98188
+ </td>
98189
+ <td>
98190
+ <input class="inp-rt-200" placeholder="" type="text" />
98191
+ </td>
98192
+ <td>
98193
+ <input class="inp-rt-300" placeholder="" type="text" />
98194
+ </td>
98195
+ <td>
98196
+ <input class="inp-rt-400" placeholder="" type="text" />
98197
+ </td>
98198
+ <td>
98199
+ <input class="inp-rt-500" placeholder="" type="text" />
98200
+ </td>
98201
+ <td>
98202
+ <input class="inp-rt-600" placeholder="" type="text" />
98203
+ </td>
98204
+ <td>
98205
+ <input class="inp-rt-700" placeholder="" type="text" />
98206
+ </td>
98207
+ <td>
98208
+ <input class="inp-rt-800" placeholder="" type="text" />
98209
+ </td>
98210
+ <td>
98211
+ <input class="inp-rt-900" placeholder="" type="text" />
98212
+ </td>
98213
+ <td>
98214
+ <input class="inp-rt-1000" placeholder="" type="text" />
98215
+ </td>
98216
+ <td>
98217
+ <input class="inp-rt-1100" placeholder="" type="text" />
98218
+ </td>
98219
+ <td>
98220
+ <input class="inp-rt-1200" placeholder="" type="text" />
98221
+ </td>
98222
+ <td>
98223
+ <input class="inp-rt-1300" placeholder="" type="text" />
98224
+ </td>
98225
+ <td>
98226
+ <input class="inp-rt-1400" placeholder="" type="text" />
98227
+ </td>
98228
+ <td>
98229
+ <input class="inp-rt-1500" placeholder="" type="text" />
98230
+ </td>
98231
+ <td>
98232
+ <input class="inp-rt-1600" placeholder="" type="text" />
98233
+ </td>
98234
+
98235
+ <td>
98236
+ <input class="inp-rt-1700" placeholder="" type="text" />
98237
+ </td>
98238
+ <td>
98239
+ <input class="inp-rt-1800" placeholder="" type="text" />
98240
+ </td>
98241
+ <td>
98242
+ <input class="inp-rt-1900" placeholder="" type="text" />
98243
+ </td>
98244
+ <td>
98245
+ <input class="inp-rt-2000" placeholder="" type="text" />
98246
+ </td>
98247
+ <td>
98248
+ <input class="inp-rt-2100" placeholder="" type="text" />
98249
+ </td>
98250
+ <td>
98251
+ <input class="inp-rt-2200" placeholder="" type="text" />
98252
+ </td>
98253
+ <td>
98254
+ <input class="inp-rt-2300" placeholder="" type="text" />
98255
+ </td>
98256
+ <td>
98257
+ <input class="inp-rt-2400" placeholder="" type="text" />
98258
+ </td>
98259
+ <td>
98260
+ <input class="inp-rt-2500" placeholder="" type="text" />
98261
+ </td>
98262
+ <td>
98263
+ <input class="inp-rt-2600" placeholder="" type="text" />
98264
+ </td>
98265
+ <td>
98266
+ <input class="inp-rt-2700" placeholder="" type="text" />
98267
+ </td>
98268
+ <td>
98269
+ <input class="inp-rt-2800" placeholder="" type="text" />
98270
+ </td>
98271
+ </tr>
98272
+ <tr>
98273
+ <td>
98274
+ <span class="bold">${out('Opacity')}</span>
98275
+ </td>
98276
+ <td>
98277
+ <input class="inp-op" placeholder="" type="text" />
98278
+ </td>
98279
+ <td>
98280
+ <input class="inp-op-100" placeholder="" type="text" />
98281
+ </td>
98282
+ <td>
98283
+ <input class="inp-op-200" placeholder="" type="text" />
98284
+ </td>
98285
+ <td>
98286
+ <input class="inp-op-300" placeholder="" type="text" />
98287
+ </td>
98288
+ <td>
98289
+ <input class="inp-op-400" placeholder="" type="text" />
98290
+ </td>
98291
+ <td>
98292
+ <input class="inp-op-500" placeholder="" type="text" />
98293
+ </td>
98294
+ <td>
98295
+ <input class="inp-op-600" placeholder="" type="text" />
98296
+ </td>
98297
+ <td>
98298
+ <input class="inp-op-700" placeholder="" type="text" />
98299
+ </td>
98300
+ <td>
98301
+ <input class="inp-op-800" placeholder="" type="text" />
98302
+ </td>
98303
+ <td>
98304
+ <input class="inp-op-900" placeholder="" type="text" />
98305
+ </td>
98306
+ <td>
98307
+ <input class="inp-op-1000" placeholder="" type="text" />
98308
+ </td>
98309
+ <td>
98310
+ <input class="inp-op-1100" placeholder="" type="text" />
98311
+ </td>
98312
+ <td>
98313
+ <input class="inp-op-1200" placeholder="" type="text" />
98314
+ </td>
98315
+ <td>
98316
+ <input class="inp-op-1300" placeholder="" type="text" />
98317
+ </td>
98318
+ <td>
98319
+ <input class="inp-op-1400" placeholder="" type="text" />
98320
+ </td>
98321
+ <td>
98322
+ <input class="inp-op-1500" placeholder="" type="text" />
98323
+ </td>
98324
+ <td>
98325
+ <input class="inp-op-1600" placeholder="" type="text" />
98326
+ </td>
98327
+
98328
+ <td>
98329
+ <input class="inp-op-1700" placeholder="" type="text" />
98330
+ </td>
98331
+ <td>
98332
+ <input class="inp-op-1800" placeholder="" type="text" />
98333
+ </td>
98334
+ <td>
98335
+ <input class="inp-op-1900" placeholder="" type="text" />
98336
+ </td>
98337
+ <td>
98338
+ <input class="inp-op-2000" placeholder="" type="text" />
98339
+ </td>
98340
+ <td>
98341
+ <input class="inp-op-2100" placeholder="" type="text" />
98342
+ </td>
98343
+ <td>
98344
+ <input class="inp-op-2200" placeholder="" type="text" />
98345
+ </td>
98346
+ <td>
98347
+ <input class="inp-op-2300" placeholder="" type="text" />
98348
+ </td>
98349
+ <td>
98350
+ <input class="inp-op-2400" placeholder="" type="text" />
98351
+ </td>
98352
+ <td>
98353
+ <input class="inp-op-2500" placeholder="" type="text" />
98354
+ </td>
98355
+ <td>
98356
+ <input class="inp-op-2600" placeholder="" type="text" />
98357
+ </td>
98358
+ <td>
98359
+ <input class="inp-op-2700" placeholder="" type="text" />
98360
+ </td>
98361
+ <td>
98362
+ <input class="inp-op-2800" placeholder="" type="text" />
98363
+ </td>
98364
+ </tr>
98365
+ </table>
98366
+ <div class="flex-wrap" style="padding: 0 15px 15px;box-sizing: border-box;width: 100%;justify-content: space-between;">
98367
+
98368
+ <div class="flex-wrap">
98369
+ <div class="flex-wrap" style="margin-right:15px">
98370
+ <select class="input-target">
98371
+ <option value="element">${out('Element')}</option>
98372
+ <option value="column">${out('Column')}</option>
98373
+ <option value="row">${out('Row')}</option>
98374
+ <option value="container">${out('Container')}</option>
98375
+ <option value="overlay">${out('Overlay')}</option>
98376
+ <option value="bg">${out('Background')}</option>
98377
+ <option value="box">${out('Box')}</option>
98378
+ <option value="section">${out('Section')}</option>
98379
+ </select>
98380
+ </div>
98381
+ <div class="flex-wrap" style="margin-right:50px">
98382
+ <button title="${out('Large Screen')}" class="input-device on" data-value="" style="width:40px;height:34px;">
98383
+ <svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-desktop"></use></svg>
98384
+ </button>
98385
+ <button title="${out('Medium Screen')}" class="input-device" data-value="md" style="display:none;width:40px;height:34px;">
98386
+ <svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-laptop"></use></svg>
98387
+ </button>
98388
+ <button title="${out('Small Screen')}" class="input-device" data-value="sm" style="width:40px;height:34px;">
98389
+ <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>
98390
+ </button>
98391
+ </div>
98392
+
98393
+ <div class="flex-wrap">
98394
+ <label for="chkPinSection2" style="margin:0;display:flex;">
98395
+ <input id="chkPinSection2" type="checkbox" style="margin:-1px 6px 0 0">
98396
+ <span>${out('Pin Section')}</span>.
98397
+ </label>
98398
+ </div>
98399
+ <div class="flex-wrap div-pin-spacing" style="display:none;margin-left:5px">
98400
+ <div class="flex-wrap">
98401
+ <button title="0" class="cmd-pin-space" data-value="" style="padding-left:15px;padding-right:15px;height:34px;">${out('No Spacing')}</button>
98402
+ <button title="0" class="cmd-pin-space" data-value="medium" style="padding-left:15px;padding-right:15px;height:34px;">${out('Medium')}</button>
98403
+ <button title="20" class="cmd-pin-space" data-value="large" style="padding-left:15px;padding-right:15px;height:34px;">${out('Large')}</button>
98404
+ </div>
98405
+ </div>
98406
+
98407
+ <div class="flex-wrap" style="margin-left:50px">
98408
+ <button title="${out('Disable Smooth Animation')}" class="cmd-disable-smoothanim" style="padding-left:15px;padding-right: 15px;">${out('Disable Smooth Animation')}</button>
98409
+ <button title="${out('Hidden on Start')}" class="cmd-hidden-onstart" style="padding-left:15px;padding-right: 15px;">${out('Hidden on Start')}</button>
98410
+ </div>
98411
+
98412
+ </div>
98413
+
98414
+ <div class="flex-wrap" style="">
98415
+ <button title="${out('Clear All')}" class="cmd-clear-timeline" style="height:34px;flex: none;width: auto;padding: 0px !important;box-shadow: none !important;background: transparent !important;">
98416
+ <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
98417
+ <span style="margin-left:7px">${out('Clear All')}</span>
98418
+ </button>
98419
+ </div>
98420
+
98421
+ </div>
98422
+ </div>
98423
+
98424
+ </div>
98425
+ </div>
98426
+ `;
98427
+ dom$1.appendHtml(builderStuff, html);
98428
+ const modalTimeline = builderStuff.querySelector('.page-timeline');
98429
+ this.modalTimeline = modalTimeline;
98430
+ this.inpX = this.modalTimeline.querySelector('.inp-x');
98431
+ this.inpX_100 = this.modalTimeline.querySelector('.inp-x-100');
98432
+ this.inpX_200 = this.modalTimeline.querySelector('.inp-x-200');
98433
+ this.inpX_300 = this.modalTimeline.querySelector('.inp-x-300');
98434
+ this.inpX_400 = this.modalTimeline.querySelector('.inp-x-400');
98435
+ this.inpX_500 = this.modalTimeline.querySelector('.inp-x-500');
98436
+ this.inpX_600 = this.modalTimeline.querySelector('.inp-x-600');
98437
+ this.inpX_700 = this.modalTimeline.querySelector('.inp-x-700');
98438
+ this.inpX_800 = this.modalTimeline.querySelector('.inp-x-800');
98439
+ this.inpX_900 = this.modalTimeline.querySelector('.inp-x-900');
98440
+ this.inpX_1000 = this.modalTimeline.querySelector('.inp-x-1000');
98441
+ this.inpX_1100 = this.modalTimeline.querySelector('.inp-x-1100');
98442
+ this.inpX_1200 = this.modalTimeline.querySelector('.inp-x-1200');
98443
+ this.inpX_1300 = this.modalTimeline.querySelector('.inp-x-1300');
98444
+ this.inpX_1400 = this.modalTimeline.querySelector('.inp-x-1400');
98445
+ this.inpX_1500 = this.modalTimeline.querySelector('.inp-x-1500');
98446
+ this.inpX_1600 = this.modalTimeline.querySelector('.inp-x-1600');
98447
+ this.inpX_1700 = this.modalTimeline.querySelector('.inp-x-1700');
98448
+ this.inpX_1800 = this.modalTimeline.querySelector('.inp-x-1800');
98449
+ this.inpX_1900 = this.modalTimeline.querySelector('.inp-x-1900');
98450
+ this.inpX_2000 = this.modalTimeline.querySelector('.inp-x-2000');
98451
+ this.inpX_2100 = this.modalTimeline.querySelector('.inp-x-2100');
98452
+ this.inpX_2200 = this.modalTimeline.querySelector('.inp-x-2200');
98453
+ this.inpX_2300 = this.modalTimeline.querySelector('.inp-x-2300');
98454
+ this.inpX_2400 = this.modalTimeline.querySelector('.inp-x-2400');
98455
+ this.inpX_2500 = this.modalTimeline.querySelector('.inp-x-2500');
98456
+ this.inpX_2600 = this.modalTimeline.querySelector('.inp-x-2600');
98457
+ this.inpX_2700 = this.modalTimeline.querySelector('.inp-x-2700');
98458
+ this.inpX_2800 = this.modalTimeline.querySelector('.inp-x-2800');
98459
+ this.inpY = this.modalTimeline.querySelector('.inp-y');
98460
+ this.inpY_100 = this.modalTimeline.querySelector('.inp-y-100');
98461
+ this.inpY_200 = this.modalTimeline.querySelector('.inp-y-200');
98462
+ this.inpY_300 = this.modalTimeline.querySelector('.inp-y-300');
98463
+ this.inpY_400 = this.modalTimeline.querySelector('.inp-y-400');
98464
+ this.inpY_500 = this.modalTimeline.querySelector('.inp-y-500');
98465
+ this.inpY_600 = this.modalTimeline.querySelector('.inp-y-600');
98466
+ this.inpY_700 = this.modalTimeline.querySelector('.inp-y-700');
98467
+ this.inpY_800 = this.modalTimeline.querySelector('.inp-y-800');
98468
+ this.inpY_900 = this.modalTimeline.querySelector('.inp-y-900');
98469
+ this.inpY_1000 = this.modalTimeline.querySelector('.inp-y-1000');
98470
+ this.inpY_1100 = this.modalTimeline.querySelector('.inp-y-1100');
98471
+ this.inpY_1200 = this.modalTimeline.querySelector('.inp-y-1200');
98472
+ this.inpY_1300 = this.modalTimeline.querySelector('.inp-y-1300');
98473
+ this.inpY_1400 = this.modalTimeline.querySelector('.inp-y-1400');
98474
+ this.inpY_1500 = this.modalTimeline.querySelector('.inp-y-1500');
98475
+ this.inpY_1600 = this.modalTimeline.querySelector('.inp-y-1600');
98476
+ this.inpY_1700 = this.modalTimeline.querySelector('.inp-y-1700');
98477
+ this.inpY_1800 = this.modalTimeline.querySelector('.inp-y-1800');
98478
+ this.inpY_1900 = this.modalTimeline.querySelector('.inp-y-1900');
98479
+ this.inpY_2000 = this.modalTimeline.querySelector('.inp-y-2000');
98480
+ this.inpY_2100 = this.modalTimeline.querySelector('.inp-y-2100');
98481
+ this.inpY_2200 = this.modalTimeline.querySelector('.inp-y-2200');
98482
+ this.inpY_2300 = this.modalTimeline.querySelector('.inp-y-2300');
98483
+ this.inpY_2400 = this.modalTimeline.querySelector('.inp-y-2400');
98484
+ this.inpY_2500 = this.modalTimeline.querySelector('.inp-y-2500');
98485
+ this.inpY_2600 = this.modalTimeline.querySelector('.inp-y-2600');
98486
+ this.inpY_2700 = this.modalTimeline.querySelector('.inp-y-2700');
98487
+ this.inpY_2800 = this.modalTimeline.querySelector('.inp-y-2800');
98488
+ this.inpScale = this.modalTimeline.querySelector('.inp-sc');
98489
+ this.inpScale_100 = this.modalTimeline.querySelector('.inp-sc-100');
98490
+ this.inpScale_200 = this.modalTimeline.querySelector('.inp-sc-200');
98491
+ this.inpScale_300 = this.modalTimeline.querySelector('.inp-sc-300');
98492
+ this.inpScale_400 = this.modalTimeline.querySelector('.inp-sc-400');
98493
+ this.inpScale_500 = this.modalTimeline.querySelector('.inp-sc-500');
98494
+ this.inpScale_600 = this.modalTimeline.querySelector('.inp-sc-600');
98495
+ this.inpScale_700 = this.modalTimeline.querySelector('.inp-sc-700');
98496
+ this.inpScale_800 = this.modalTimeline.querySelector('.inp-sc-800');
98497
+ this.inpScale_900 = this.modalTimeline.querySelector('.inp-sc-900');
98498
+ this.inpScale_1000 = this.modalTimeline.querySelector('.inp-sc-1000');
98499
+ this.inpScale_1100 = this.modalTimeline.querySelector('.inp-sc-1100');
98500
+ this.inpScale_1200 = this.modalTimeline.querySelector('.inp-sc-1200');
98501
+ this.inpScale_1300 = this.modalTimeline.querySelector('.inp-sc-1300');
98502
+ this.inpScale_1400 = this.modalTimeline.querySelector('.inp-sc-1400');
98503
+ this.inpScale_1500 = this.modalTimeline.querySelector('.inp-sc-1500');
98504
+ this.inpScale_1600 = this.modalTimeline.querySelector('.inp-sc-1600');
98505
+ this.inpScale_1700 = this.modalTimeline.querySelector('.inp-sc-1700');
98506
+ this.inpScale_1800 = this.modalTimeline.querySelector('.inp-sc-1800');
98507
+ this.inpScale_1900 = this.modalTimeline.querySelector('.inp-sc-1900');
98508
+ this.inpScale_2000 = this.modalTimeline.querySelector('.inp-sc-2000');
98509
+ this.inpScale_2100 = this.modalTimeline.querySelector('.inp-sc-2100');
98510
+ this.inpScale_2200 = this.modalTimeline.querySelector('.inp-sc-2200');
98511
+ this.inpScale_2300 = this.modalTimeline.querySelector('.inp-sc-2300');
98512
+ this.inpScale_2400 = this.modalTimeline.querySelector('.inp-sc-2400');
98513
+ this.inpScale_2500 = this.modalTimeline.querySelector('.inp-sc-2500');
98514
+ this.inpScale_2600 = this.modalTimeline.querySelector('.inp-sc-2600');
98515
+ this.inpScale_2700 = this.modalTimeline.querySelector('.inp-sc-2700');
98516
+ this.inpScale_2800 = this.modalTimeline.querySelector('.inp-sc-2800');
98517
+ this.inpRotate = this.modalTimeline.querySelector('.inp-rt');
98518
+ this.inpRotate_100 = this.modalTimeline.querySelector('.inp-rt-100');
98519
+ this.inpRotate_200 = this.modalTimeline.querySelector('.inp-rt-200');
98520
+ this.inpRotate_300 = this.modalTimeline.querySelector('.inp-rt-300');
98521
+ this.inpRotate_400 = this.modalTimeline.querySelector('.inp-rt-400');
98522
+ this.inpRotate_500 = this.modalTimeline.querySelector('.inp-rt-500');
98523
+ this.inpRotate_600 = this.modalTimeline.querySelector('.inp-rt-600');
98524
+ this.inpRotate_700 = this.modalTimeline.querySelector('.inp-rt-700');
98525
+ this.inpRotate_800 = this.modalTimeline.querySelector('.inp-rt-800');
98526
+ this.inpRotate_900 = this.modalTimeline.querySelector('.inp-rt-900');
98527
+ this.inpRotate_1000 = this.modalTimeline.querySelector('.inp-rt-1000');
98528
+ this.inpRotate_1100 = this.modalTimeline.querySelector('.inp-rt-1100');
98529
+ this.inpRotate_1200 = this.modalTimeline.querySelector('.inp-rt-1200');
98530
+ this.inpRotate_1300 = this.modalTimeline.querySelector('.inp-rt-1300');
98531
+ this.inpRotate_1400 = this.modalTimeline.querySelector('.inp-rt-1400');
98532
+ this.inpRotate_1500 = this.modalTimeline.querySelector('.inp-rt-1500');
98533
+ this.inpRotate_1600 = this.modalTimeline.querySelector('.inp-rt-1600');
98534
+ this.inpRotate_1700 = this.modalTimeline.querySelector('.inp-rt-1700');
98535
+ this.inpRotate_1800 = this.modalTimeline.querySelector('.inp-rt-1800');
98536
+ this.inpRotate_1900 = this.modalTimeline.querySelector('.inp-rt-1900');
98537
+ this.inpRotate_2000 = this.modalTimeline.querySelector('.inp-rt-2000');
98538
+ this.inpRotate_2100 = this.modalTimeline.querySelector('.inp-rt-2100');
98539
+ this.inpRotate_2200 = this.modalTimeline.querySelector('.inp-rt-2200');
98540
+ this.inpRotate_2300 = this.modalTimeline.querySelector('.inp-rt-2300');
98541
+ this.inpRotate_2400 = this.modalTimeline.querySelector('.inp-rt-2400');
98542
+ this.inpRotate_2500 = this.modalTimeline.querySelector('.inp-rt-2500');
98543
+ this.inpRotate_2600 = this.modalTimeline.querySelector('.inp-rt-2600');
98544
+ this.inpRotate_2700 = this.modalTimeline.querySelector('.inp-rt-2700');
98545
+ this.inpRotate_2800 = this.modalTimeline.querySelector('.inp-rt-2800');
98546
+ this.inpOpacity = this.modalTimeline.querySelector('.inp-op');
98547
+ this.inpOpacity_100 = this.modalTimeline.querySelector('.inp-op-100');
98548
+ this.inpOpacity_200 = this.modalTimeline.querySelector('.inp-op-200');
98549
+ this.inpOpacity_300 = this.modalTimeline.querySelector('.inp-op-300');
98550
+ this.inpOpacity_400 = this.modalTimeline.querySelector('.inp-op-400');
98551
+ this.inpOpacity_500 = this.modalTimeline.querySelector('.inp-op-500');
98552
+ this.inpOpacity_600 = this.modalTimeline.querySelector('.inp-op-600');
98553
+ this.inpOpacity_700 = this.modalTimeline.querySelector('.inp-op-700');
98554
+ this.inpOpacity_800 = this.modalTimeline.querySelector('.inp-op-800');
98555
+ this.inpOpacity_900 = this.modalTimeline.querySelector('.inp-op-900');
98556
+ this.inpOpacity_1000 = this.modalTimeline.querySelector('.inp-op-1000');
98557
+ this.inpOpacity_1100 = this.modalTimeline.querySelector('.inp-op-1100');
98558
+ this.inpOpacity_1200 = this.modalTimeline.querySelector('.inp-op-1200');
98559
+ this.inpOpacity_1300 = this.modalTimeline.querySelector('.inp-op-1300');
98560
+ this.inpOpacity_1400 = this.modalTimeline.querySelector('.inp-op-1400');
98561
+ this.inpOpacity_1500 = this.modalTimeline.querySelector('.inp-op-1500');
98562
+ this.inpOpacity_1600 = this.modalTimeline.querySelector('.inp-op-1600');
98563
+ this.inpOpacity_1700 = this.modalTimeline.querySelector('.inp-op-1700');
98564
+ this.inpOpacity_1800 = this.modalTimeline.querySelector('.inp-op-1800');
98565
+ this.inpOpacity_1900 = this.modalTimeline.querySelector('.inp-op-1900');
98566
+ this.inpOpacity_2000 = this.modalTimeline.querySelector('.inp-op-2000');
98567
+ this.inpOpacity_2100 = this.modalTimeline.querySelector('.inp-op-2100');
98568
+ this.inpOpacity_2200 = this.modalTimeline.querySelector('.inp-op-2200');
98569
+ this.inpOpacity_2300 = this.modalTimeline.querySelector('.inp-op-2300');
98570
+ this.inpOpacity_2400 = this.modalTimeline.querySelector('.inp-op-2400');
98571
+ this.inpOpacity_2500 = this.modalTimeline.querySelector('.inp-op-2500');
98572
+ this.inpOpacity_2600 = this.modalTimeline.querySelector('.inp-op-2600');
98573
+ this.inpOpacity_2700 = this.modalTimeline.querySelector('.inp-op-2700');
98574
+ this.inpOpacity_2800 = this.modalTimeline.querySelector('.inp-op-2800');
98575
+ this.dummyElm = document.querySelector('.dummy-elm');
98576
+ const btnClose = modalTimeline.querySelector('.is-modal-close');
98577
+ btnClose.addEventListener('click', () => {
98578
+ this.close();
98579
+ });
98580
+ const inpTarget = modalTimeline.querySelector('.input-target');
98581
+ inpTarget.addEventListener('change', () => {
98582
+ this.read();
98583
+ });
98584
+ const btnDevices = this.modalTimeline.querySelectorAll('.input-device');
98585
+ btnDevices.forEach(btn => {
98586
+ btn.addEventListener('click', () => {
98587
+ const elms = this.modalTimeline.querySelectorAll('.input-device');
98588
+ elms.forEach(elm => {
98589
+ elm.classList.remove('on');
98590
+ });
98591
+ btn.classList.add('on');
98592
+ this.read();
98593
+ });
98594
+ });
98595
+ const chkPinSection = modalTimeline.querySelector('#chkPinSection2');
98596
+ const divPinSpacing = modalTimeline.querySelector('.div-pin-spacing');
98597
+ chkPinSection.addEventListener('click', () => {
98598
+ const section = this.builder.activeSection;
98599
+ if (!section) return;
98600
+ this.builder.editor.saveForUndo();
98601
+
98602
+ if (chkPinSection.checked) {
98603
+ section.classList.add('section-pin');
98604
+ divPinSpacing.style.display = 'block';
98605
+ let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
98606
+ elms.forEach(elm => {
98607
+ elm.classList.remove('on');
98608
+ });
98609
+ let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="medium"]');
98610
+ btn.classList.add('on');
98611
+ } else {
98612
+ section.classList.remove('section-pin');
98613
+ divPinSpacing.style.display = 'none';
98614
+ } //Trigger Change event
98615
+
98616
+
98617
+ this.builder.onChange();
98618
+ });
98619
+ const btnPinSpacing = divPinSpacing.querySelectorAll('.cmd-pin-space');
98620
+ btnPinSpacing.forEach(btn => {
98621
+ btn.addEventListener('click', () => {
98622
+ const section = this.builder.activeSection;
98623
+ if (!section) return;
98624
+ let val = btn.getAttribute('data-value');
98625
+ this.builder.editor.saveForUndo();
98626
+ section.classList.remove('no-spacing');
98627
+ section.classList.remove('pin-space-20');
98628
+ section.classList.remove('pin-space-40');
98629
+ section.classList.remove('pin-space-60');
98630
+ section.classList.remove('pin-space-80');
98631
+ section.classList.remove('pin-space-100');
98632
+ section.classList.remove('pin-space-large');
98633
+ if (val === '') section.classList.add('no-spacing');
98634
+ if (val === 'large') section.classList.add('pin-space-large');
98635
+ let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
98636
+ elms.forEach(elm => {
98637
+ elm.classList.remove('on');
98638
+ });
98639
+ btn.classList.add('on'); //Trigger Change event
98640
+
98641
+ this.builder.onChange();
98642
+ });
98643
+ });
98644
+ const btnDisableSmoothAnim = modalTimeline.querySelector('.cmd-disable-smoothanim');
98645
+ btnDisableSmoothAnim.addEventListener('click', () => {
98646
+ if (btnDisableSmoothAnim.classList.contains('on')) {
98647
+ btnDisableSmoothAnim.classList.remove('on');
98648
+ } else {
98649
+ btnDisableSmoothAnim.classList.add('on');
98650
+ }
98651
+
98652
+ this.applyTimeline();
98653
+ });
98654
+ const btnHiddenOnStart = modalTimeline.querySelector('.cmd-hidden-onstart');
98655
+ btnHiddenOnStart.addEventListener('click', () => {
98656
+ if (btnHiddenOnStart.classList.contains('on')) {
98657
+ btnHiddenOnStart.classList.remove('on');
98658
+ } else {
98659
+ btnHiddenOnStart.classList.add('on');
98660
+ }
98661
+
98662
+ this.applyTimeline();
98663
+ });
98664
+ const btnClearTimeline = modalTimeline.querySelector('.cmd-clear-timeline');
98665
+ btnClearTimeline.addEventListener('click', () => {
98666
+ let activeElement;
98667
+ let target = this.getTarget();
98668
+ activeElement = target.element;
98669
+ if (!activeElement) return;
98670
+ this.builder.editor.saveForUndo();
98671
+ this.cleanup(activeElement);
98672
+ activeElement.style.transform = '';
98673
+ activeElement.style.transition = '';
98674
+ activeElement.style.opacity = '';
98675
+ this.read();
98676
+
98677
+ if (this.builder.win.skrollrr) {
98678
+ this.builder.win.skrollrr.refresh();
98679
+ } //Trigger Change event
98680
+
98681
+
98682
+ this.builder.settings.onChange();
98683
+ }); //Extend onPageContentClick
98684
+
98685
+ let old = this.builder.settings.onPageContentClick;
98686
+
98687
+ this.builder.settings.onPageContentClick = () => {
98688
+ if (old) old.call(this); // call user's defined onRender
98689
+
98690
+ if (!modalTimeline.classList.contains('active')) return;
98691
+ setTimeout(() => {
98692
+ this.clickContent();
98693
+ }, 30);
98694
+ };
98695
+
98696
+ const inps = this.modalTimeline.querySelectorAll('.table-timeline input');
98697
+ inps.forEach(inp => {
98698
+ inp.addEventListener('change', () => {
98699
+ this.applyTimeline();
98700
+ });
98701
+ });
98702
+ }
98703
+
98704
+ clickContent() {
98705
+ let inpTarget = this.modalTimeline.querySelector('.input-target');
98706
+ inpTarget.value = 'element'; // default
98707
+ // Dynamically choose target based on selected element
98708
+
98709
+ let currentTarget = this.readTarget();
98710
+
98711
+ if (currentTarget) {
98712
+ if (currentTarget.name === 'element' || currentTarget.name === 'inspectedElement') {
98713
+ inpTarget.value = 'element';
98714
+ } else if (currentTarget.name === 'column') {
98715
+ inpTarget.value = 'column';
98716
+ } else if (currentTarget.name === 'row') {
98717
+ inpTarget.value = 'row';
98718
+ } else if (currentTarget.name === 'container') {
98719
+ inpTarget.value = 'container';
98720
+ } else if (currentTarget.name === 'bg') {
98721
+ inpTarget.value = 'bg';
98722
+ } else if (currentTarget.name === 'overlay') {
98723
+ inpTarget.value = 'overlay';
98724
+ } else if (currentTarget.name === 'box') {
98725
+ inpTarget.value = 'box';
98726
+ } else if (currentTarget.name === 'section') {
98727
+ inpTarget.value = 'section';
98728
+ }
98729
+
98730
+ this.read();
98731
+ } else {
98732
+ this.clearSettings();
98733
+ }
98734
+ }
98735
+
98736
+ clearSettings() {
98737
+ this.inpX.value = '';
98738
+ this.inpX_100.value = '';
98739
+ this.inpX_200.value = '';
98740
+ this.inpX_300.value = '';
98741
+ this.inpX_400.value = '';
98742
+ this.inpX_500.value = '';
98743
+ this.inpX_600.value = '';
98744
+ this.inpX_700.value = '';
98745
+ this.inpX_800.value = '';
98746
+ this.inpX_900.value = '';
98747
+ this.inpX_900.value = '';
98748
+ this.inpX_1000.value = '';
98749
+ this.inpX_1100.value = '';
98750
+ this.inpX_1200.value = '';
98751
+ this.inpX_1300.value = '';
98752
+ this.inpX_1400.value = '';
98753
+ this.inpX_1500.value = '';
98754
+ this.inpX_1600.value = '';
98755
+ this.inpX_1700.value = '';
98756
+ this.inpX_1800.value = '';
98757
+ this.inpX_1900.value = '';
98758
+ this.inpX_2000.value = '';
98759
+ this.inpX_2100.value = '';
98760
+ this.inpX_2200.value = '';
98761
+ this.inpX_2300.value = '';
98762
+ this.inpX_2400.value = '';
98763
+ this.inpX_2500.value = '';
98764
+ this.inpX_2600.value = '';
98765
+ this.inpX_2700.value = '';
98766
+ this.inpX_2800.value = '';
98767
+ this.inpY.value = '';
98768
+ this.inpY_100.value = '';
98769
+ this.inpY_200.value = '';
98770
+ this.inpY_300.value = '';
98771
+ this.inpY_400.value = '';
98772
+ this.inpY_500.value = '';
98773
+ this.inpY_600.value = '';
98774
+ this.inpY_700.value = '';
98775
+ this.inpY_800.value = '';
98776
+ this.inpY_900.value = '';
98777
+ this.inpY_900.value = '';
98778
+ this.inpY_1000.value = '';
98779
+ this.inpY_1100.value = '';
98780
+ this.inpY_1200.value = '';
98781
+ this.inpY_1300.value = '';
98782
+ this.inpY_1400.value = '';
98783
+ this.inpY_1500.value = '';
98784
+ this.inpY_1600.value = '';
98785
+ this.inpY_1700.value = '';
98786
+ this.inpY_1800.value = '';
98787
+ this.inpY_1900.value = '';
98788
+ this.inpY_2000.value = '';
98789
+ this.inpY_2100.value = '';
98790
+ this.inpY_2200.value = '';
98791
+ this.inpY_2300.value = '';
98792
+ this.inpY_2400.value = '';
98793
+ this.inpY_2500.value = '';
98794
+ this.inpY_2600.value = '';
98795
+ this.inpY_2700.value = '';
98796
+ this.inpY_2800.value = '';
98797
+ this.inpScale.value = '';
98798
+ this.inpScale_100.value = '';
98799
+ this.inpScale_200.value = '';
98800
+ this.inpScale_300.value = '';
98801
+ this.inpScale_400.value = '';
98802
+ this.inpScale_500.value = '';
98803
+ this.inpScale_600.value = '';
98804
+ this.inpScale_700.value = '';
98805
+ this.inpScale_800.value = '';
98806
+ this.inpScale_900.value = '';
98807
+ this.inpScale_900.value = '';
98808
+ this.inpScale_1000.value = '';
98809
+ this.inpScale_1100.value = '';
98810
+ this.inpScale_1200.value = '';
98811
+ this.inpScale_1300.value = '';
98812
+ this.inpScale_1400.value = '';
98813
+ this.inpScale_1500.value = '';
98814
+ this.inpScale_1600.value = '';
98815
+ this.inpScale_1700.value = '';
98816
+ this.inpScale_1800.value = '';
98817
+ this.inpScale_1900.value = '';
98818
+ this.inpScale_2000.value = '';
98819
+ this.inpScale_2100.value = '';
98820
+ this.inpScale_2200.value = '';
98821
+ this.inpScale_2300.value = '';
98822
+ this.inpScale_2400.value = '';
98823
+ this.inpScale_2500.value = '';
98824
+ this.inpScale_2600.value = '';
98825
+ this.inpScale_2700.value = '';
98826
+ this.inpScale_2800.value = '';
98827
+ this.inpRotate.value = '';
98828
+ this.inpRotate_100.value = '';
98829
+ this.inpRotate_200.value = '';
98830
+ this.inpRotate_300.value = '';
98831
+ this.inpRotate_400.value = '';
98832
+ this.inpRotate_500.value = '';
98833
+ this.inpRotate_600.value = '';
98834
+ this.inpRotate_700.value = '';
98835
+ this.inpRotate_800.value = '';
98836
+ this.inpRotate_900.value = '';
98837
+ this.inpRotate_900.value = '';
98838
+ this.inpRotate_1000.value = '';
98839
+ this.inpRotate_1100.value = '';
98840
+ this.inpRotate_1200.value = '';
98841
+ this.inpRotate_1300.value = '';
98842
+ this.inpRotate_1400.value = '';
98843
+ this.inpRotate_1500.value = '';
98844
+ this.inpRotate_1600.value = '';
98845
+ this.inpRotate_1700.value = '';
98846
+ this.inpRotate_1800.value = '';
98847
+ this.inpRotate_1900.value = '';
98848
+ this.inpRotate_2000.value = '';
98849
+ this.inpRotate_2100.value = '';
98850
+ this.inpRotate_2200.value = '';
98851
+ this.inpRotate_2300.value = '';
98852
+ this.inpRotate_2400.value = '';
98853
+ this.inpRotate_2500.value = '';
98854
+ this.inpRotate_2600.value = '';
98855
+ this.inpRotate_2700.value = '';
98856
+ this.inpRotate_2800.value = '';
98857
+ this.inpOpacity.value = '';
98858
+ this.inpOpacity_100.value = '';
98859
+ this.inpOpacity_200.value = '';
98860
+ this.inpOpacity_300.value = '';
98861
+ this.inpOpacity_400.value = '';
98862
+ this.inpOpacity_500.value = '';
98863
+ this.inpOpacity_600.value = '';
98864
+ this.inpOpacity_700.value = '';
98865
+ this.inpOpacity_800.value = '';
98866
+ this.inpOpacity_900.value = '';
98867
+ this.inpOpacity_900.value = '';
98868
+ this.inpOpacity_1000.value = '';
98869
+ this.inpOpacity_1100.value = '';
98870
+ this.inpOpacity_1200.value = '';
98871
+ this.inpOpacity_1300.value = '';
98872
+ this.inpOpacity_1400.value = '';
98873
+ this.inpOpacity_1500.value = '';
98874
+ this.inpOpacity_1600.value = '';
98875
+ this.inpOpacity_1700.value = '';
98876
+ this.inpOpacity_1800.value = '';
98877
+ this.inpOpacity_1900.value = '';
98878
+ this.inpOpacity_2000.value = '';
98879
+ this.inpOpacity_2100.value = '';
98880
+ this.inpOpacity_2200.value = '';
98881
+ this.inpOpacity_2300.value = '';
98882
+ this.inpOpacity_2400.value = '';
98883
+ this.inpOpacity_2500.value = '';
98884
+ this.inpOpacity_2600.value = '';
98885
+ this.inpOpacity_2700.value = '';
98886
+ this.inpOpacity_2800.value = '';
98887
+ }
98888
+
98889
+ read() {
98890
+ this.clearSettings();
98891
+ let activeElement;
98892
+ let target = this.getTarget();
98893
+ activeElement = target.element;
98894
+ if (!activeElement) return;
98895
+ const activeSection = this.builder.activeSection;
98896
+
98897
+ if (activeSection) {
98898
+ const divPinSpacing = this.modalTimeline.querySelector('.div-pin-spacing');
98899
+ const chkPinSection = this.modalTimeline.querySelector('#chkPinSection2');
98900
+
98901
+ if (activeSection.classList.contains('section-pin')) {
98902
+ chkPinSection.checked = true;
98903
+ divPinSpacing.style.display = 'block';
98904
+ } else {
98905
+ chkPinSection.checked = false;
98906
+ divPinSpacing.style.display = 'none';
98907
+ }
98908
+
98909
+ let elms = divPinSpacing.querySelectorAll('.cmd-pin-space');
98910
+ elms.forEach(elm => {
98911
+ elm.classList.remove('on');
98912
+ });
98913
+
98914
+ if (activeSection.classList.contains('no-spacing')) {
98915
+ let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value=""]');
98916
+ btn.classList.add('on');
98917
+ } else if (activeSection.classList.contains('pin-space-large')) {
98918
+ let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="large"]');
98919
+ btn.classList.add('on');
98920
+ } else {
98921
+ let btn = divPinSpacing.querySelector('.cmd-pin-space[data-value="medium"]');
98922
+ btn.classList.add('on');
98923
+ }
98924
+ }
98925
+
98926
+ const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
98927
+
98928
+ if (activeElement.hasAttribute('data-smooth-scrolling')) {
98929
+ btnDisableSmoothAnim.classList.add('on');
98930
+ } else {
98931
+ btnDisableSmoothAnim.classList.remove('on');
98932
+ }
98933
+
98934
+ const btnHiddenOnStart = this.modalTimeline.querySelector('.cmd-hidden-onstart');
98935
+
98936
+ if (activeElement.hasAttribute('data-hidden-onstart')) {
98937
+ btnHiddenOnStart.classList.add('on');
98938
+ } else {
98939
+ btnHiddenOnStart.classList.remove('on');
98940
+ }
98941
+
98942
+ for (let i = 0; i <= 28; i++) {
98943
+ this.fillValue(i * 100, activeElement);
98944
+ }
98945
+ }
98946
+
98947
+ fillValue(i, activeElement) {
98948
+ let s = '';
98949
+ if (i > 0) s = '-' + i;
98950
+ let css;
98951
+ let device = this.getDevice();
98952
+
98953
+ if (device === 'md') {
98954
+ // 970-1280
98955
+ css = activeElement.getAttribute('data-md-t' + s);
98956
+ } else if (device === 'sm') {
98957
+ // <970
98958
+ css = activeElement.getAttribute('data-sm-t' + s);
98959
+ } else {
98960
+ // >1280
98961
+ css = activeElement.getAttribute('data-t' + s);
98962
+ }
98963
+
98964
+ this.dummyElm.style.cssText = css;
98965
+ let transform = this.getTransform(this.dummyElm, css);
98966
+ if (transform.translateX) this.modalTimeline.querySelector('.inp-x' + s).value = transform.translateX.replace('px', '');
98967
+ if (transform.translateY) this.modalTimeline.querySelector('.inp-y' + s).value = transform.translateY.replace('px', '');
98968
+ if (transform.scale) this.modalTimeline.querySelector('.inp-sc' + s).value = transform.scale;
98969
+ if (transform.rotate) this.modalTimeline.querySelector('.inp-rt' + s).value = transform.rotate;
98970
+ if (transform.opacity) this.modalTimeline.querySelector('.inp-op' + s).value = transform.opacity;
98971
+ }
98972
+
98973
+ applyTimeline() {
98974
+ let activeElement;
98975
+ let target = this.getTarget();
98976
+ activeElement = target.element;
98977
+ if (!activeElement) return;
98978
+ let valX;
98979
+ if (this.inpX.value !== '') valX = this.inpX.value + (this.inpX.value.indexOf('%') !== -1 ? '' : 'px');
98980
+ let valX_100;
98981
+ if (this.inpX_100.value !== '') valX_100 = this.inpX_100.value + (this.inpX_100.value.indexOf('%') !== -1 ? '' : 'px');
98982
+ let valX_200;
98983
+ if (this.inpX_200.value !== '') valX_200 = this.inpX_200.value + (this.inpX_200.value.indexOf('%') !== -1 ? '' : 'px');
98984
+ let valX_300;
98985
+ if (this.inpX_300.value !== '') valX_300 = this.inpX_300.value + (this.inpX_300.value.indexOf('%') !== -1 ? '' : 'px');
98986
+ let valX_400;
98987
+ if (this.inpX_400.value !== '') valX_400 = this.inpX_400.value + (this.inpX_400.value.indexOf('%') !== -1 ? '' : 'px');
98988
+ let valX_500;
98989
+ if (this.inpX_500.value !== '') valX_500 = this.inpX_500.value + (this.inpX_500.value.indexOf('%') !== -1 ? '' : 'px');
98990
+ let valX_600;
98991
+ if (this.inpX_600.value !== '') valX_600 = this.inpX_600.value + (this.inpX_600.value.indexOf('%') !== -1 ? '' : 'px');
98992
+ let valX_700;
98993
+ if (this.inpX_700.value !== '') valX_700 = this.inpX_700.value + (this.inpX_700.value.indexOf('%') !== -1 ? '' : 'px');
98994
+ let valX_800;
98995
+ if (this.inpX_800.value !== '') valX_800 = this.inpX_800.value + (this.inpX_800.value.indexOf('%') !== -1 ? '' : 'px');
98996
+ let valX_900;
98997
+ if (this.inpX_900.value !== '') valX_900 = this.inpX_900.value + (this.inpX_900.value.indexOf('%') !== -1 ? '' : 'px');
98998
+ let valX_1000;
98999
+ if (this.inpX_1000.value !== '') valX_1000 = this.inpX_1000.value + (this.inpX_1000.value.indexOf('%') !== -1 ? '' : 'px');
99000
+ let valX_1100;
99001
+ if (this.inpX_1100.value !== '') valX_1100 = this.inpX_1100.value + (this.inpX_1100.value.indexOf('%') !== -1 ? '' : 'px');
99002
+ let valX_1200;
99003
+ if (this.inpX_1200.value !== '') valX_1200 = this.inpX_1200.value + (this.inpX_1200.value.indexOf('%') !== -1 ? '' : 'px');
99004
+ let valX_1300;
99005
+ if (this.inpX_1300.value !== '') valX_1300 = this.inpX_1300.value + (this.inpX_1300.value.indexOf('%') !== -1 ? '' : 'px');
99006
+ let valX_1400;
99007
+ if (this.inpX_1400.value !== '') valX_1400 = this.inpX_1400.value + (this.inpX_1400.value.indexOf('%') !== -1 ? '' : 'px');
99008
+ let valX_1500;
99009
+ if (this.inpX_1500.value !== '') valX_1500 = this.inpX_1500.value + (this.inpX_1500.value.indexOf('%') !== -1 ? '' : 'px');
99010
+ let valX_1600;
99011
+ if (this.inpX_1600.value !== '') valX_1600 = this.inpX_1600.value + (this.inpX_1600.value.indexOf('%') !== -1 ? '' : 'px');
99012
+ let valX_1700;
99013
+ if (this.inpX_1700.value !== '') valX_1700 = this.inpX_1700.value + (this.inpX_1700.value.indexOf('%') !== -1 ? '' : 'px');
99014
+ let valX_1800;
99015
+ if (this.inpX_1800.value !== '') valX_1800 = this.inpX_1800.value + (this.inpX_1800.value.indexOf('%') !== -1 ? '' : 'px');
99016
+ let valX_1900;
99017
+ if (this.inpX_1900.value !== '') valX_1900 = this.inpX_1900.value + (this.inpX_1900.value.indexOf('%') !== -1 ? '' : 'px');
99018
+ let valX_2000;
99019
+ if (this.inpX_2000.value !== '') valX_2000 = this.inpX_2000.value + (this.inpX_2000.value.indexOf('%') !== -1 ? '' : 'px');
99020
+ let valX_2100;
99021
+ if (this.inpX_2100.value !== '') valX_2100 = this.inpX_2100.value + (this.inpX_2100.value.indexOf('%') !== -1 ? '' : 'px');
99022
+ let valX_2200;
99023
+ if (this.inpX_2200.value !== '') valX_2200 = this.inpX_2200.value + (this.inpX_2200.value.indexOf('%') !== -1 ? '' : 'px');
99024
+ let valX_2300;
99025
+ if (this.inpX_2300.value !== '') valX_2300 = this.inpX_2300.value + (this.inpX_2300.value.indexOf('%') !== -1 ? '' : 'px');
99026
+ let valX_2400;
99027
+ if (this.inpX_2400.value !== '') valX_2400 = this.inpX_2400.value + (this.inpX_2400.value.indexOf('%') !== -1 ? '' : 'px');
99028
+ let valX_2500;
99029
+ if (this.inpX_2500.value !== '') valX_2500 = this.inpX_2500.value + (this.inpX_2500.value.indexOf('%') !== -1 ? '' : 'px');
99030
+ let valX_2600;
99031
+ if (this.inpX_2600.value !== '') valX_2600 = this.inpX_2600.value + (this.inpX_2600.value.indexOf('%') !== -1 ? '' : 'px');
99032
+ let valX_2700;
99033
+ if (this.inpX_2700.value !== '') valX_2700 = this.inpX_2700.value + (this.inpX_2700.value.indexOf('%') !== -1 ? '' : 'px');
99034
+ let valX_2800;
99035
+ if (this.inpX_2800.value !== '') valX_2800 = this.inpX_2800.value + (this.inpX_2800.value.indexOf('%') !== -1 ? '' : 'px');
99036
+ let valY;
99037
+ if (this.inpY.value !== '') valY = this.inpY.value + (this.inpY.value.indexOf('%') !== -1 ? '' : 'px');
99038
+ let valY_100;
99039
+ if (this.inpY_100.value !== '') valY_100 = this.inpY_100.value + (this.inpY_100.value.indexOf('%') !== -1 ? '' : 'px');
99040
+ let valY_200;
99041
+ if (this.inpY_200.value !== '') valY_200 = this.inpY_200.value + (this.inpY_200.value.indexOf('%') !== -1 ? '' : 'px');
99042
+ let valY_300;
99043
+ if (this.inpY_300.value !== '') valY_300 = this.inpY_300.value + (this.inpY_300.value.indexOf('%') !== -1 ? '' : 'px');
99044
+ let valY_400;
99045
+ if (this.inpY_400.value !== '') valY_400 = this.inpY_400.value + (this.inpY_400.value.indexOf('%') !== -1 ? '' : 'px');
99046
+ let valY_500;
99047
+ if (this.inpY_500.value !== '') valY_500 = this.inpY_500.value + (this.inpY_500.value.indexOf('%') !== -1 ? '' : 'px');
99048
+ let valY_600;
99049
+ if (this.inpY_600.value !== '') valY_600 = this.inpY_600.value + (this.inpY_600.value.indexOf('%') !== -1 ? '' : 'px');
99050
+ let valY_700;
99051
+ if (this.inpY_700.value !== '') valY_700 = this.inpY_700.value + (this.inpY_700.value.indexOf('%') !== -1 ? '' : 'px');
99052
+ let valY_800;
99053
+ if (this.inpY_800.value !== '') valY_800 = this.inpY_800.value + (this.inpY_800.value.indexOf('%') !== -1 ? '' : 'px');
99054
+ let valY_900;
99055
+ if (this.inpY_900.value !== '') valY_900 = this.inpY_900.value + (this.inpY_900.value.indexOf('%') !== -1 ? '' : 'px');
99056
+ let valY_1000;
99057
+ if (this.inpY_1000.value !== '') valY_1000 = this.inpY_1000.value + (this.inpY_1000.value.indexOf('%') !== -1 ? '' : 'px');
99058
+ let valY_1100;
99059
+ if (this.inpY_1100.value !== '') valY_1100 = this.inpY_1100.value + (this.inpY_1100.value.indexOf('%') !== -1 ? '' : 'px');
99060
+ let valY_1200;
99061
+ if (this.inpY_1200.value !== '') valY_1200 = this.inpY_1200.value + (this.inpY_1200.value.indexOf('%') !== -1 ? '' : 'px');
99062
+ let valY_1300;
99063
+ if (this.inpY_1300.value !== '') valY_1300 = this.inpY_1300.value + (this.inpY_1300.value.indexOf('%') !== -1 ? '' : 'px');
99064
+ let valY_1400;
99065
+ if (this.inpY_1400.value !== '') valY_1400 = this.inpY_1400.value + (this.inpY_1400.value.indexOf('%') !== -1 ? '' : 'px');
99066
+ let valY_1500;
99067
+ if (this.inpY_1500.value !== '') valY_1500 = this.inpY_1500.value + (this.inpY_1500.value.indexOf('%') !== -1 ? '' : 'px');
99068
+ let valY_1600;
99069
+ if (this.inpY_1600.value !== '') valY_1600 = this.inpY_1600.value + (this.inpY_1600.value.indexOf('%') !== -1 ? '' : 'px');
99070
+ let valY_1700;
99071
+ if (this.inpY_1700.value !== '') valY_1700 = this.inpY_1700.value + (this.inpY_1700.value.indexOf('%') !== -1 ? '' : 'px');
99072
+ let valY_1800;
99073
+ if (this.inpY_1800.value !== '') valY_1800 = this.inpY_1800.value + (this.inpY_1800.value.indexOf('%') !== -1 ? '' : 'px');
99074
+ let valY_1900;
99075
+ if (this.inpY_1900.value !== '') valY_1900 = this.inpY_1900.value + (this.inpY_1900.value.indexOf('%') !== -1 ? '' : 'px');
99076
+ let valY_2000;
99077
+ if (this.inpY_2000.value !== '') valY_2000 = this.inpY_2000.value + (this.inpY_2000.value.indexOf('%') !== -1 ? '' : 'px');
99078
+ let valY_2100;
99079
+ if (this.inpY_2100.value !== '') valY_2100 = this.inpY_2100.value + (this.inpY_2100.value.indexOf('%') !== -1 ? '' : 'px');
99080
+ let valY_2200;
99081
+ if (this.inpY_2200.value !== '') valY_2200 = this.inpY_2200.value + (this.inpY_2200.value.indexOf('%') !== -1 ? '' : 'px');
99082
+ let valY_2300;
99083
+ if (this.inpY_2300.value !== '') valY_2300 = this.inpY_2300.value + (this.inpY_2300.value.indexOf('%') !== -1 ? '' : 'px');
99084
+ let valY_2400;
99085
+ if (this.inpY_2400.value !== '') valY_2400 = this.inpY_2400.value + (this.inpY_2400.value.indexOf('%') !== -1 ? '' : 'px');
99086
+ let valY_2500;
99087
+ if (this.inpY_2500.value !== '') valY_2500 = this.inpY_2500.value + (this.inpY_2500.value.indexOf('%') !== -1 ? '' : 'px');
99088
+ let valY_2600;
99089
+ if (this.inpY_2600.value !== '') valY_2600 = this.inpY_2600.value + (this.inpY_2600.value.indexOf('%') !== -1 ? '' : 'px');
99090
+ let valY_2700;
99091
+ if (this.inpY_2700.value !== '') valY_2700 = this.inpY_2700.value + (this.inpY_2700.value.indexOf('%') !== -1 ? '' : 'px');
99092
+ let valY_2800;
99093
+ if (this.inpY_2800.value !== '') valY_2800 = this.inpY_2800.value + (this.inpY_2800.value.indexOf('%') !== -1 ? '' : 'px');
99094
+ let valScale;
99095
+ if (this.inpScale.value !== '') valScale = this.inpScale.value;
99096
+ let valScale_100;
99097
+ if (this.inpScale_100.value !== '') valScale_100 = this.inpScale_100.value;
99098
+ let valScale_200;
99099
+ if (this.inpScale_200.value !== '') valScale_200 = this.inpScale_200.value;
99100
+ let valScale_300;
99101
+ if (this.inpScale_300.value !== '') valScale_300 = this.inpScale_300.value;
99102
+ let valScale_400;
99103
+ if (this.inpScale_400.value !== '') valScale_400 = this.inpScale_400.value;
99104
+ let valScale_500;
99105
+ if (this.inpScale_500.value !== '') valScale_500 = this.inpScale_500.value;
99106
+ let valScale_600;
99107
+ if (this.inpScale_600.value !== '') valScale_600 = this.inpScale_600.value;
99108
+ let valScale_700;
99109
+ if (this.inpScale_700.value !== '') valScale_700 = this.inpScale_700.value;
99110
+ let valScale_800;
99111
+ if (this.inpScale_800.value !== '') valScale_800 = this.inpScale_800.value;
99112
+ let valScale_900;
99113
+ if (this.inpScale_900.value !== '') valScale_900 = this.inpScale_900.value;
99114
+ let valScale_1000;
99115
+ if (this.inpScale_1000.value !== '') valScale_1000 = this.inpScale_1000.value;
99116
+ let valScale_1100;
99117
+ if (this.inpScale_1100.value !== '') valScale_1100 = this.inpScale_1100.value;
99118
+ let valScale_1200;
99119
+ if (this.inpScale_1200.value !== '') valScale_1200 = this.inpScale_1200.value;
99120
+ let valScale_1300;
99121
+ if (this.inpScale_1300.value !== '') valScale_1300 = this.inpScale_1300.value;
99122
+ let valScale_1400;
99123
+ if (this.inpScale_1400.value !== '') valScale_1400 = this.inpScale_1400.value;
99124
+ let valScale_1500;
99125
+ if (this.inpScale_1500.value !== '') valScale_1500 = this.inpScale_1500.value;
99126
+ let valScale_1600;
99127
+ if (this.inpScale_1600.value !== '') valScale_1600 = this.inpScale_1600.value;
99128
+ let valScale_1700;
99129
+ if (this.inpScale_1700.value !== '') valScale_1700 = this.inpScale_1700.value;
99130
+ let valScale_1800;
99131
+ if (this.inpScale_1800.value !== '') valScale_1800 = this.inpScale_1800.value;
99132
+ let valScale_1900;
99133
+ if (this.inpScale_1900.value !== '') valScale_1900 = this.inpScale_1900.value;
99134
+ let valScale_2000;
99135
+ if (this.inpScale_2000.value !== '') valScale_2000 = this.inpScale_2000.value;
99136
+ let valScale_2100;
99137
+ if (this.inpScale_2100.value !== '') valScale_2100 = this.inpScale_2100.value;
99138
+ let valScale_2200;
99139
+ if (this.inpScale_2200.value !== '') valScale_2200 = this.inpScale_2200.value;
99140
+ let valScale_2300;
99141
+ if (this.inpScale_2300.value !== '') valScale_2300 = this.inpScale_2300.value;
99142
+ let valScale_2400;
99143
+ if (this.inpScale_2400.value !== '') valScale_2400 = this.inpScale_2400.value;
99144
+ let valScale_2500;
99145
+ if (this.inpScale_2500.value !== '') valScale_2500 = this.inpScale_2500.value;
99146
+ let valScale_2600;
99147
+ if (this.inpScale_2600.value !== '') valScale_2600 = this.inpScale_2600.value;
99148
+ let valScale_2700;
99149
+ if (this.inpScale_2700.value !== '') valScale_2700 = this.inpScale_2700.value;
99150
+ let valScale_2800;
99151
+ if (this.inpScale_2800.value !== '') valScale_2800 = this.inpScale_2800.value;
99152
+ let valRotate;
99153
+ if (this.inpRotate.value !== '') valRotate = this.inpRotate.value;
99154
+ let valRotate_100;
99155
+ if (this.inpRotate_100.value !== '') valRotate_100 = this.inpRotate_100.value;
99156
+ let valRotate_200;
99157
+ if (this.inpRotate_200.value !== '') valRotate_200 = this.inpRotate_200.value;
99158
+ let valRotate_300;
99159
+ if (this.inpRotate_300.value !== '') valRotate_300 = this.inpRotate_300.value;
99160
+ let valRotate_400;
99161
+ if (this.inpRotate_400.value !== '') valRotate_400 = this.inpRotate_400.value;
99162
+ let valRotate_500;
99163
+ if (this.inpRotate_500.value !== '') valRotate_500 = this.inpRotate_500.value;
99164
+ let valRotate_600;
99165
+ if (this.inpRotate_600.value !== '') valRotate_600 = this.inpRotate_600.value;
99166
+ let valRotate_700;
99167
+ if (this.inpRotate_700.value !== '') valRotate_700 = this.inpRotate_700.value;
99168
+ let valRotate_800;
99169
+ if (this.inpRotate_800.value !== '') valRotate_800 = this.inpRotate_800.value;
99170
+ let valRotate_900;
99171
+ if (this.inpRotate_900.value !== '') valRotate_900 = this.inpRotate_900.value;
99172
+ let valRotate_1000;
99173
+ if (this.inpRotate_1000.value !== '') valRotate_1000 = this.inpRotate_1000.value;
99174
+ let valRotate_1100;
99175
+ if (this.inpRotate_1100.value !== '') valRotate_1100 = this.inpRotate_1100.value;
99176
+ let valRotate_1200;
99177
+ if (this.inpRotate_1200.value !== '') valRotate_1200 = this.inpRotate_1200.value;
99178
+ let valRotate_1300;
99179
+ if (this.inpRotate_1300.value !== '') valRotate_1300 = this.inpRotate_1300.value;
99180
+ let valRotate_1400;
99181
+ if (this.inpRotate_1400.value !== '') valRotate_1400 = this.inpRotate_1400.value;
99182
+ let valRotate_1500;
99183
+ if (this.inpRotate_1500.value !== '') valRotate_1500 = this.inpRotate_1500.value;
99184
+ let valRotate_1600;
99185
+ if (this.inpRotate_1600.value !== '') valRotate_1600 = this.inpRotate_1600.value;
99186
+ let valRotate_1700;
99187
+ if (this.inpRotate_1700.value !== '') valRotate_1700 = this.inpRotate_1700.value;
99188
+ let valRotate_1800;
99189
+ if (this.inpRotate_1800.value !== '') valRotate_1800 = this.inpRotate_1800.value;
99190
+ let valRotate_1900;
99191
+ if (this.inpRotate_1900.value !== '') valRotate_1900 = this.inpRotate_1900.value;
99192
+ let valRotate_2000;
99193
+ if (this.inpRotate_2000.value !== '') valRotate_2000 = this.inpRotate_2000.value;
99194
+ let valRotate_2100;
99195
+ if (this.inpRotate_2100.value !== '') valRotate_2100 = this.inpRotate_2100.value;
99196
+ let valRotate_2200;
99197
+ if (this.inpRotate_2200.value !== '') valRotate_2200 = this.inpRotate_2200.value;
99198
+ let valRotate_2300;
99199
+ if (this.inpRotate_2300.value !== '') valRotate_2300 = this.inpRotate_2300.value;
99200
+ let valRotate_2400;
99201
+ if (this.inpRotate_2400.value !== '') valRotate_2400 = this.inpRotate_2400.value;
99202
+ let valRotate_2500;
99203
+ if (this.inpRotate_2500.value !== '') valRotate_2500 = this.inpRotate_2500.value;
99204
+ let valRotate_2600;
99205
+ if (this.inpRotate_2600.value !== '') valRotate_2600 = this.inpRotate_2600.value;
99206
+ let valRotate_2700;
99207
+ if (this.inpRotate_2700.value !== '') valRotate_2700 = this.inpRotate_2700.value;
99208
+ let valRotate_2800;
99209
+ if (this.inpRotate_2800.value !== '') valRotate_2800 = this.inpRotate_2800.value;
99210
+ let valOpacity;
99211
+ if (this.inpOpacity.value !== '') valOpacity = this.inpOpacity.value;
99212
+ let valOpacity_100;
99213
+ if (this.inpOpacity_100.value !== '') valOpacity_100 = this.inpOpacity_100.value;
99214
+ let valOpacity_200;
99215
+ if (this.inpOpacity_200.value !== '') valOpacity_200 = this.inpOpacity_200.value;
99216
+ let valOpacity_300;
99217
+ if (this.inpOpacity_300.value !== '') valOpacity_300 = this.inpOpacity_300.value;
99218
+ let valOpacity_400;
99219
+ if (this.inpOpacity_400.value !== '') valOpacity_400 = this.inpOpacity_400.value;
99220
+ let valOpacity_500;
99221
+ if (this.inpOpacity_500.value !== '') valOpacity_500 = this.inpOpacity_500.value;
99222
+ let valOpacity_600;
99223
+ if (this.inpOpacity_600.value !== '') valOpacity_600 = this.inpOpacity_600.value;
99224
+ let valOpacity_700;
99225
+ if (this.inpOpacity_700.value !== '') valOpacity_700 = this.inpOpacity_700.value;
99226
+ let valOpacity_800;
99227
+ if (this.inpOpacity_800.value !== '') valOpacity_800 = this.inpOpacity_800.value;
99228
+ let valOpacity_900;
99229
+ if (this.inpOpacity_900.value !== '') valOpacity_900 = this.inpOpacity_900.value;
99230
+ let valOpacity_1000;
99231
+ if (this.inpOpacity_1000.value !== '') valOpacity_1000 = this.inpOpacity_1000.value;
99232
+ let valOpacity_1100;
99233
+ if (this.inpOpacity_1100.value !== '') valOpacity_1100 = this.inpOpacity_1100.value;
99234
+ let valOpacity_1200;
99235
+ if (this.inpOpacity_1200.value !== '') valOpacity_1200 = this.inpOpacity_1200.value;
99236
+ let valOpacity_1300;
99237
+ if (this.inpOpacity_1300.value !== '') valOpacity_1300 = this.inpOpacity_1300.value;
99238
+ let valOpacity_1400;
99239
+ if (this.inpOpacity_1400.value !== '') valOpacity_1400 = this.inpOpacity_1400.value;
99240
+ let valOpacity_1500;
99241
+ if (this.inpOpacity_1500.value !== '') valOpacity_1500 = this.inpOpacity_1500.value;
99242
+ let valOpacity_1600;
99243
+ if (this.inpOpacity_1600.value !== '') valOpacity_1600 = this.inpOpacity_1600.value;
99244
+ let valOpacity_1700;
99245
+ if (this.inpOpacity_1700.value !== '') valOpacity_1700 = this.inpOpacity_1700.value;
99246
+ let valOpacity_1800;
99247
+ if (this.inpOpacity_1800.value !== '') valOpacity_1800 = this.inpOpacity_1800.value;
99248
+ let valOpacity_1900;
99249
+ if (this.inpOpacity_1900.value !== '') valOpacity_1900 = this.inpOpacity_1900.value;
99250
+ let valOpacity_2000;
99251
+ if (this.inpOpacity_2000.value !== '') valOpacity_2000 = this.inpOpacity_2000.value;
99252
+ let valOpacity_2100;
99253
+ if (this.inpOpacity_2100.value !== '') valOpacity_2100 = this.inpOpacity_2100.value;
99254
+ let valOpacity_2200;
99255
+ if (this.inpOpacity_2200.value !== '') valOpacity_2200 = this.inpOpacity_2200.value;
99256
+ let valOpacity_2300;
99257
+ if (this.inpOpacity_2300.value !== '') valOpacity_2300 = this.inpOpacity_2300.value;
99258
+ let valOpacity_2400;
99259
+ if (this.inpOpacity_2400.value !== '') valOpacity_2400 = this.inpOpacity_2400.value;
99260
+ let valOpacity_2500;
99261
+ if (this.inpOpacity_2500.value !== '') valOpacity_2500 = this.inpOpacity_2500.value;
99262
+ let valOpacity_2600;
99263
+ if (this.inpOpacity_2600.value !== '') valOpacity_2600 = this.inpOpacity_2600.value;
99264
+ let valOpacity_2700;
99265
+ if (this.inpOpacity_2700.value !== '') valOpacity_2700 = this.inpOpacity_2700.value;
99266
+ let valOpacity_2800;
99267
+ if (this.inpOpacity_2800.value !== '') valOpacity_2800 = this.inpOpacity_2800.value;
99268
+ let anim = (valX ? ` translateX(${valX})` : '') + (valY ? ` translateY(${valY})` : '') + (valScale ? ` scale(${valScale})` : '') + (valRotate ? ` rotate(${valRotate})` : '');
99269
+ anim = anim.trim();
99270
+ let anim_100 = (valX_100 ? ` translateX(${valX_100})` : '') + (valY_100 ? ` translateY(${valY_100})` : '') + (valScale_100 ? ` scale(${valScale_100})` : '') + (valRotate_100 ? ` rotate(${valRotate_100})` : '');
99271
+ anim_100 = anim_100.trim();
99272
+ let anim_200 = (valX_200 ? ` translateX(${valX_200})` : '') + (valY_200 ? ` translateY(${valY_200})` : '') + (valScale_200 ? ` scale(${valScale_200})` : '') + (valRotate_200 ? ` rotate(${valRotate_200})` : '');
99273
+ anim_200 = anim_200.trim();
99274
+ let anim_300 = (valX_300 ? ` translateX(${valX_300})` : '') + (valY_300 ? ` translateY(${valY_300})` : '') + (valScale_300 ? ` scale(${valScale_300})` : '') + (valRotate_300 ? ` rotate(${valRotate_300})` : '');
99275
+ anim_300 = anim_300.trim();
99276
+ let anim_400 = (valX_400 ? ` translateX(${valX_400})` : '') + (valY_400 ? ` translateY(${valY_400})` : '') + (valScale_400 ? ` scale(${valScale_400})` : '') + (valRotate_400 ? ` rotate(${valRotate_400})` : '');
99277
+ anim_400 = anim_400.trim();
99278
+ let anim_500 = (valX_500 ? ` translateX(${valX_500})` : '') + (valY_500 ? ` translateY(${valY_500})` : '') + (valScale_500 ? ` scale(${valScale_500})` : '') + (valRotate_500 ? ` rotate(${valRotate_500})` : '');
99279
+ anim_500 = anim_500.trim();
99280
+ let anim_600 = (valX_600 ? ` translateX(${valX_600})` : '') + (valY_600 ? ` translateY(${valY_600})` : '') + (valScale_600 ? ` scale(${valScale_600})` : '') + (valRotate_600 ? ` rotate(${valRotate_600})` : '');
99281
+ anim_600 = anim_600.trim();
99282
+ let anim_700 = (valX_700 ? ` translateX(${valX_700})` : '') + (valY_700 ? ` translateY(${valY_700})` : '') + (valScale_700 ? ` scale(${valScale_700})` : '') + (valRotate_700 ? ` rotate(${valRotate_700})` : '');
99283
+ anim_700 = anim_700.trim();
99284
+ let anim_800 = (valX_800 ? ` translateX(${valX_800})` : '') + (valY_800 ? ` translateY(${valY_800})` : '') + (valScale_800 ? ` scale(${valScale_800})` : '') + (valRotate_800 ? ` rotate(${valRotate_800})` : '');
99285
+ anim_800 = anim_800.trim();
99286
+ let anim_900 = (valX_900 ? ` translateX(${valX_900})` : '') + (valY_900 ? ` translateY(${valY_900})` : '') + (valScale_900 ? ` scale(${valScale_900})` : '') + (valRotate_900 ? ` rotate(${valRotate_900})` : '');
99287
+ anim_900 = anim_900.trim();
99288
+ let anim_1000 = (valX_1000 ? ` translateX(${valX_1000})` : '') + (valY_1000 ? ` translateY(${valY_1000})` : '') + (valScale_1000 ? ` scale(${valScale_1000})` : '') + (valRotate_1000 ? ` rotate(${valRotate_1000})` : '');
99289
+ anim_1000 = anim_1000.trim();
99290
+ let anim_1100 = (valX_1100 ? ` translateX(${valX_1100})` : '') + (valY_1100 ? ` translateY(${valY_1100})` : '') + (valScale_1100 ? ` scale(${valScale_1100})` : '') + (valRotate_1100 ? ` rotate(${valRotate_1100})` : '');
99291
+ anim_1100 = anim_1100.trim();
99292
+ let anim_1200 = (valX_1200 ? ` translateX(${valX_1200})` : '') + (valY_1200 ? ` translateY(${valY_1200})` : '') + (valScale_1200 ? ` scale(${valScale_1200})` : '') + (valRotate_1200 ? ` rotate(${valRotate_1200})` : '');
99293
+ anim_1200 = anim_1200.trim();
99294
+ let anim_1300 = (valX_1300 ? ` translateX(${valX_1300})` : '') + (valY_1300 ? ` translateY(${valY_1300})` : '') + (valScale_1300 ? ` scale(${valScale_1300})` : '') + (valRotate_1300 ? ` rotate(${valRotate_1300})` : '');
99295
+ anim_1300 = anim_1300.trim();
99296
+ let anim_1400 = (valX_1400 ? ` translateX(${valX_1400})` : '') + (valY_1400 ? ` translateY(${valY_1400})` : '') + (valScale_1400 ? ` scale(${valScale_1400})` : '') + (valRotate_1400 ? ` rotate(${valRotate_1400})` : '');
99297
+ anim_1400 = anim_1400.trim();
99298
+ let anim_1500 = (valX_1500 ? ` translateX(${valX_1500})` : '') + (valY_1500 ? ` translateY(${valY_1500})` : '') + (valScale_1500 ? ` scale(${valScale_1500})` : '') + (valRotate_1500 ? ` rotate(${valRotate_1500})` : '');
99299
+ anim_1500 = anim_1500.trim();
99300
+ let anim_1600 = (valX_1600 ? ` translateX(${valX_1600})` : '') + (valY_1600 ? ` translateY(${valY_1600})` : '') + (valScale_1600 ? ` scale(${valScale_1600})` : '') + (valRotate_1600 ? ` rotate(${valRotate_1600})` : '');
99301
+ anim_1600 = anim_1600.trim();
99302
+ let anim_1700 = (valX_1700 ? ` translateX(${valX_1700})` : '') + (valY_1700 ? ` translateY(${valY_1700})` : '') + (valScale_1700 ? ` scale(${valScale_1700})` : '') + (valRotate_1700 ? ` rotate(${valRotate_1700})` : '');
99303
+ anim_1700 = anim_1700.trim();
99304
+ let anim_1800 = (valX_1800 ? ` translateX(${valX_1800})` : '') + (valY_1800 ? ` translateY(${valY_1800})` : '') + (valScale_1800 ? ` scale(${valScale_1800})` : '') + (valRotate_1800 ? ` rotate(${valRotate_1800})` : '');
99305
+ anim_1800 = anim_1800.trim();
99306
+ let anim_1900 = (valX_1900 ? ` translateX(${valX_1900})` : '') + (valY_1900 ? ` translateY(${valY_1900})` : '') + (valScale_1900 ? ` scale(${valScale_1900})` : '') + (valRotate_1900 ? ` rotate(${valRotate_1900})` : '');
99307
+ anim_1900 = anim_1900.trim();
99308
+ let anim_2000 = (valX_2000 ? ` translateX(${valX_2000})` : '') + (valY_2000 ? ` translateY(${valY_2000})` : '') + (valScale_2000 ? ` scale(${valScale_2000})` : '') + (valRotate_2000 ? ` rotate(${valRotate_2000})` : '');
99309
+ anim_2000 = anim_2000.trim();
99310
+ let anim_2100 = (valX_2100 ? ` translateX(${valX_2100})` : '') + (valY_2100 ? ` translateY(${valY_2100})` : '') + (valScale_2100 ? ` scale(${valScale_2100})` : '') + (valRotate_2100 ? ` rotate(${valRotate_2100})` : '');
99311
+ anim_2100 = anim_2100.trim();
99312
+ let anim_2200 = (valX_2200 ? ` translateX(${valX_2200})` : '') + (valY_2200 ? ` translateY(${valY_2200})` : '') + (valScale_2200 ? ` scale(${valScale_2200})` : '') + (valRotate_2200 ? ` rotate(${valRotate_2200})` : '');
99313
+ anim_2200 = anim_2200.trim();
99314
+ let anim_2300 = (valX_2300 ? ` translateX(${valX_2300})` : '') + (valY_2300 ? ` translateY(${valY_2300})` : '') + (valScale_2300 ? ` scale(${valScale_2300})` : '') + (valRotate_2300 ? ` rotate(${valRotate_2300})` : '');
99315
+ anim_2300 = anim_2300.trim();
99316
+ let anim_2400 = (valX_2400 ? ` translateX(${valX_2400})` : '') + (valY_2400 ? ` translateY(${valY_2400})` : '') + (valScale_2400 ? ` scale(${valScale_2400})` : '') + (valRotate_2400 ? ` rotate(${valRotate_2400})` : '');
99317
+ anim_2400 = anim_2400.trim();
99318
+ let anim_2500 = (valX_2500 ? ` translateX(${valX_2500})` : '') + (valY_2500 ? ` translateY(${valY_2500})` : '') + (valScale_2500 ? ` scale(${valScale_2500})` : '') + (valRotate_2500 ? ` rotate(${valRotate_2500})` : '');
99319
+ anim_2500 = anim_2500.trim();
99320
+ let anim_2600 = (valX_2600 ? ` translateX(${valX_2600})` : '') + (valY_2600 ? ` translateY(${valY_2600})` : '') + (valScale_2600 ? ` scale(${valScale_2600})` : '') + (valRotate_2600 ? ` rotate(${valRotate_2600})` : '');
99321
+ anim_2600 = anim_2600.trim();
99322
+ let anim_2700 = (valX_2700 ? ` translateX(${valX_2700})` : '') + (valY_2700 ? ` translateY(${valY_2700})` : '') + (valScale_2700 ? ` scale(${valScale_2700})` : '') + (valRotate_2700 ? ` rotate(${valRotate_2700})` : '');
99323
+ anim_2700 = anim_2700.trim();
99324
+ let anim_2800 = (valX_2800 ? ` translateX(${valX_2800})` : '') + (valY_2800 ? ` translateY(${valY_2800})` : '') + (valScale_2800 ? ` scale(${valScale_2800})` : '') + (valRotate_2800 ? ` rotate(${valRotate_2800})` : '');
99325
+ anim_2800 = anim_2800.trim();
99326
+ let s = (anim ? 'transform: ' + anim + ';' : '') + (valOpacity ? `opacity:${valOpacity}` : '');
99327
+ let s_100 = (anim_100 ? 'transform: ' + anim_100 + ';' : '') + (valOpacity_100 ? `opacity:${valOpacity_100}` : '');
99328
+ let s_200 = (anim_200 ? 'transform: ' + anim_200 + ';' : '') + (valOpacity_200 ? `opacity:${valOpacity_200}` : '');
99329
+ let s_300 = (anim_300 ? 'transform: ' + anim_300 + ';' : '') + (valOpacity_300 ? `opacity:${valOpacity_300}` : '');
99330
+ let s_400 = (anim_400 ? 'transform: ' + anim_400 + ';' : '') + (valOpacity_400 ? `opacity:${valOpacity_400}` : '');
99331
+ let s_500 = (anim_500 ? 'transform: ' + anim_500 + ';' : '') + (valOpacity_500 ? `opacity:${valOpacity_500}` : '');
99332
+ let s_600 = (anim_600 ? 'transform: ' + anim_600 + ';' : '') + (valOpacity_600 ? `opacity:${valOpacity_600}` : '');
99333
+ let s_700 = (anim_700 ? 'transform: ' + anim_700 + ';' : '') + (valOpacity_700 ? `opacity:${valOpacity_700}` : '');
99334
+ let s_800 = (anim_800 ? 'transform: ' + anim_800 + ';' : '') + (valOpacity_800 ? `opacity:${valOpacity_800}` : '');
99335
+ let s_900 = (anim_900 ? 'transform: ' + anim_900 + ';' : '') + (valOpacity_900 ? `opacity:${valOpacity_900}` : '');
99336
+ let s_1000 = (anim_1000 ? 'transform: ' + anim_1000 + ';' : '') + (valOpacity_1000 ? `opacity:${valOpacity_1000}` : '');
99337
+ let s_1100 = (anim_1100 ? 'transform: ' + anim_1100 + ';' : '') + (valOpacity_1100 ? `opacity:${valOpacity_1100}` : '');
99338
+ let s_1200 = (anim_1200 ? 'transform: ' + anim_1200 + ';' : '') + (valOpacity_1200 ? `opacity:${valOpacity_1200}` : '');
99339
+ let s_1300 = (anim_1300 ? 'transform: ' + anim_1300 + ';' : '') + (valOpacity_1300 ? `opacity:${valOpacity_1300}` : '');
99340
+ let s_1400 = (anim_1400 ? 'transform: ' + anim_1400 + ';' : '') + (valOpacity_1400 ? `opacity:${valOpacity_1400}` : '');
99341
+ let s_1500 = (anim_1500 ? 'transform: ' + anim_1500 + ';' : '') + (valOpacity_1500 ? `opacity:${valOpacity_1500}` : '');
99342
+ let s_1600 = (anim_1600 ? 'transform: ' + anim_1600 + ';' : '') + (valOpacity_1600 ? `opacity:${valOpacity_1600}` : '');
99343
+ let s_1700 = (anim_1700 ? 'transform: ' + anim_1700 + ';' : '') + (valOpacity_1700 ? `opacity:${valOpacity_1700}` : '');
99344
+ let s_1800 = (anim_1800 ? 'transform: ' + anim_1800 + ';' : '') + (valOpacity_1800 ? `opacity:${valOpacity_1800}` : '');
99345
+ let s_1900 = (anim_1900 ? 'transform: ' + anim_1900 + ';' : '') + (valOpacity_1900 ? `opacity:${valOpacity_1900}` : '');
99346
+ let s_2000 = (anim_2000 ? 'transform: ' + anim_2000 + ';' : '') + (valOpacity_2000 ? `opacity:${valOpacity_2000}` : '');
99347
+ let s_2100 = (anim_2100 ? 'transform: ' + anim_2100 + ';' : '') + (valOpacity_2100 ? `opacity:${valOpacity_2100}` : '');
99348
+ let s_2200 = (anim_2200 ? 'transform: ' + anim_2200 + ';' : '') + (valOpacity_2200 ? `opacity:${valOpacity_2200}` : '');
99349
+ let s_2300 = (anim_2300 ? 'transform: ' + anim_2300 + ';' : '') + (valOpacity_2300 ? `opacity:${valOpacity_2300}` : '');
99350
+ let s_2400 = (anim_2400 ? 'transform: ' + anim_2400 + ';' : '') + (valOpacity_2400 ? `opacity:${valOpacity_2400}` : '');
99351
+ let s_2500 = (anim_2500 ? 'transform: ' + anim_2500 + ';' : '') + (valOpacity_2500 ? `opacity:${valOpacity_2500}` : '');
99352
+ let s_2600 = (anim_2600 ? 'transform: ' + anim_2600 + ';' : '') + (valOpacity_2600 ? `opacity:${valOpacity_2600}` : '');
99353
+ let s_2700 = (anim_2700 ? 'transform: ' + anim_2700 + ';' : '') + (valOpacity_2700 ? `opacity:${valOpacity_2700}` : '');
99354
+ let s_2800 = (anim_2800 ? 'transform: ' + anim_2800 + ';' : '') + (valOpacity_2800 ? `opacity:${valOpacity_2800}` : '');
99355
+ this.builder.editor.saveForUndo();
99356
+ let device = this.getDevice();
99357
+
99358
+ if (device === 'md') {
99359
+ // 970-1280
99360
+ if (s !== '') activeElement.setAttribute('data-md-t', s);else activeElement.removeAttribute('data-md-t');
99361
+ if (s_100 !== '') activeElement.setAttribute('data-md-t-100', s_100);else activeElement.removeAttribute('data-md-t-100');
99362
+ if (s_200 !== '') activeElement.setAttribute('data-md-t-200', s_200);else activeElement.removeAttribute('data-md-t-200');
99363
+ if (s_300 !== '') activeElement.setAttribute('data-md-t-300', s_300);else activeElement.removeAttribute('data-md-t-300');
99364
+ if (s_400 !== '') activeElement.setAttribute('data-md-t-400', s_400);else activeElement.removeAttribute('data-md-t-400');
99365
+ if (s_500 !== '') activeElement.setAttribute('data-md-t-500', s_500);else activeElement.removeAttribute('data-md-t-500');
99366
+ if (s_600 !== '') activeElement.setAttribute('data-md-t-600', s_600);else activeElement.removeAttribute('data-md-t-600');
99367
+ if (s_700 !== '') activeElement.setAttribute('data-md-t-700', s_700);else activeElement.removeAttribute('data-md-t-700');
99368
+ if (s_800 !== '') activeElement.setAttribute('data-md-t-800', s_800);else activeElement.removeAttribute('data-md-t-800');
99369
+ if (s_900 !== '') activeElement.setAttribute('data-md-t-900', s_900);else activeElement.removeAttribute('data-md-t-900');
99370
+ if (s_1000 !== '') activeElement.setAttribute('data-md-t-1000', s_1000);else activeElement.removeAttribute('data-md-t-1000');
99371
+ if (s_1100 !== '') activeElement.setAttribute('data-md-t-1100', s_1100);else activeElement.removeAttribute('data-md-t-1100');
99372
+ if (s_1200 !== '') activeElement.setAttribute('data-md-t-1200', s_1200);else activeElement.removeAttribute('data-md-t-1200');
99373
+ if (s_1300 !== '') activeElement.setAttribute('data-md-t-1300', s_1300);else activeElement.removeAttribute('data-md-t-1300');
99374
+ if (s_1400 !== '') activeElement.setAttribute('data-md-t-1400', s_1400);else activeElement.removeAttribute('data-md-t-1400');
99375
+ if (s_1500 !== '') activeElement.setAttribute('data-md-t-1500', s_1500);else activeElement.removeAttribute('data-md-t-1500');
99376
+ if (s_1600 !== '') activeElement.setAttribute('data-md-t-1600', s_1600);else activeElement.removeAttribute('data-md-t-1600');
99377
+ if (s_1700 !== '') activeElement.setAttribute('data-md-t-1700', s_1700);else activeElement.removeAttribute('data-md-t-1700');
99378
+ if (s_1800 !== '') activeElement.setAttribute('data-md-t-1800', s_1800);else activeElement.removeAttribute('data-md-t-1800');
99379
+ if (s_1900 !== '') activeElement.setAttribute('data-md-t-1900', s_1900);else activeElement.removeAttribute('data-md-t-1900');
99380
+ if (s_2000 !== '') activeElement.setAttribute('data-md-t-2000', s_2000);else activeElement.removeAttribute('data-md-t-2000');
99381
+ if (s_2100 !== '') activeElement.setAttribute('data-md-t-2100', s_2100);else activeElement.removeAttribute('data-md-t-2100');
99382
+ if (s_2200 !== '') activeElement.setAttribute('data-md-t-2200', s_2200);else activeElement.removeAttribute('data-md-t-2200');
99383
+ if (s_2300 !== '') activeElement.setAttribute('data-md-t-2300', s_2300);else activeElement.removeAttribute('data-md-t-2300');
99384
+ if (s_2400 !== '') activeElement.setAttribute('data-md-t-2400', s_2400);else activeElement.removeAttribute('data-md-t-2400');
99385
+ if (s_2500 !== '') activeElement.setAttribute('data-md-t-2500', s_2500);else activeElement.removeAttribute('data-md-t-2500');
99386
+ if (s_2600 !== '') activeElement.setAttribute('data-md-t-2600', s_2600);else activeElement.removeAttribute('data-md-t-2600');
99387
+ if (s_2700 !== '') activeElement.setAttribute('data-md-t-2700', s_2700);else activeElement.removeAttribute('data-md-t-2700');
99388
+ if (s_2800 !== '') activeElement.setAttribute('data-md-t-2800', s_2800);else activeElement.removeAttribute('data-md-t-2800');
99389
+ } else if (device === 'sm') {
99390
+ // <970
99391
+ if (s !== '') activeElement.setAttribute('data-sm-t', s);else activeElement.removeAttribute('data-sm-t');
99392
+ if (s_100 !== '') activeElement.setAttribute('data-sm-t-100', s_100);else activeElement.removeAttribute('data-sm-t-100');
99393
+ if (s_200 !== '') activeElement.setAttribute('data-sm-t-200', s_200);else activeElement.removeAttribute('data-sm-t-200');
99394
+ if (s_300 !== '') activeElement.setAttribute('data-sm-t-300', s_300);else activeElement.removeAttribute('data-sm-t-300');
99395
+ if (s_400 !== '') activeElement.setAttribute('data-sm-t-400', s_400);else activeElement.removeAttribute('data-sm-t-400');
99396
+ if (s_500 !== '') activeElement.setAttribute('data-sm-t-500', s_500);else activeElement.removeAttribute('data-sm-t-500');
99397
+ if (s_600 !== '') activeElement.setAttribute('data-sm-t-600', s_600);else activeElement.removeAttribute('data-sm-t-600');
99398
+ if (s_700 !== '') activeElement.setAttribute('data-sm-t-700', s_700);else activeElement.removeAttribute('data-sm-t-700');
99399
+ if (s_800 !== '') activeElement.setAttribute('data-sm-t-800', s_800);else activeElement.removeAttribute('data-sm-t-800');
99400
+ if (s_900 !== '') activeElement.setAttribute('data-sm-t-900', s_900);else activeElement.removeAttribute('data-sm-t-900');
99401
+ if (s_1000 !== '') activeElement.setAttribute('data-sm-t-1000', s_1000);else activeElement.removeAttribute('data-sm-t-1000');
99402
+ if (s_1100 !== '') activeElement.setAttribute('data-sm-t-1100', s_1100);else activeElement.removeAttribute('data-sm-t-1100');
99403
+ if (s_1200 !== '') activeElement.setAttribute('data-sm-t-1200', s_1200);else activeElement.removeAttribute('data-sm-t-1200');
99404
+ if (s_1300 !== '') activeElement.setAttribute('data-sm-t-1300', s_1300);else activeElement.removeAttribute('data-sm-t-1300');
99405
+ if (s_1400 !== '') activeElement.setAttribute('data-sm-t-1400', s_1400);else activeElement.removeAttribute('data-sm-t-1400');
99406
+ if (s_1500 !== '') activeElement.setAttribute('data-sm-t-1500', s_1500);else activeElement.removeAttribute('data-sm-t-1500');
99407
+ if (s_1600 !== '') activeElement.setAttribute('data-sm-t-1600', s_1600);else activeElement.removeAttribute('data-sm-t-1600');
99408
+ if (s_1700 !== '') activeElement.setAttribute('data-sm-t-1700', s_1700);else activeElement.removeAttribute('data-sm-t-1700');
99409
+ if (s_1800 !== '') activeElement.setAttribute('data-sm-t-1800', s_1800);else activeElement.removeAttribute('data-sm-t-1800');
99410
+ if (s_1900 !== '') activeElement.setAttribute('data-sm-t-1900', s_1900);else activeElement.removeAttribute('data-sm-t-1900');
99411
+ if (s_2000 !== '') activeElement.setAttribute('data-sm-t-2000', s_2000);else activeElement.removeAttribute('data-sm-t-2000');
99412
+ if (s_2100 !== '') activeElement.setAttribute('data-sm-t-2100', s_2100);else activeElement.removeAttribute('data-sm-t-2100');
99413
+ if (s_2200 !== '') activeElement.setAttribute('data-sm-t-2200', s_2200);else activeElement.removeAttribute('data-sm-t-2200');
99414
+ if (s_2300 !== '') activeElement.setAttribute('data-sm-t-2300', s_2300);else activeElement.removeAttribute('data-sm-t-2300');
99415
+ if (s_2400 !== '') activeElement.setAttribute('data-sm-t-2400', s_2400);else activeElement.removeAttribute('data-sm-t-2400');
99416
+ if (s_2500 !== '') activeElement.setAttribute('data-sm-t-2500', s_2500);else activeElement.removeAttribute('data-sm-t-2500');
99417
+ if (s_2600 !== '') activeElement.setAttribute('data-sm-t-2600', s_2600);else activeElement.removeAttribute('data-sm-t-2600');
99418
+ if (s_2700 !== '') activeElement.setAttribute('data-sm-t-2700', s_2700);else activeElement.removeAttribute('data-sm-t-2700');
99419
+ if (s_2800 !== '') activeElement.setAttribute('data-sm-t-2800', s_2800);else activeElement.removeAttribute('data-sm-t-2800');
99420
+ } else {
99421
+ // >1280
99422
+ if (s !== '') activeElement.setAttribute('data-t', s);else activeElement.removeAttribute('data-t');
99423
+ if (s_100 !== '') activeElement.setAttribute('data-t-100', s_100);else activeElement.removeAttribute('data-t-100');
99424
+ if (s_200 !== '') activeElement.setAttribute('data-t-200', s_200);else activeElement.removeAttribute('data-t-200');
99425
+ if (s_300 !== '') activeElement.setAttribute('data-t-300', s_300);else activeElement.removeAttribute('data-t-300');
99426
+ if (s_400 !== '') activeElement.setAttribute('data-t-400', s_400);else activeElement.removeAttribute('data-t-400');
99427
+ if (s_500 !== '') activeElement.setAttribute('data-t-500', s_500);else activeElement.removeAttribute('data-t-500');
99428
+ if (s_600 !== '') activeElement.setAttribute('data-t-600', s_600);else activeElement.removeAttribute('data-t-600');
99429
+ if (s_700 !== '') activeElement.setAttribute('data-t-700', s_700);else activeElement.removeAttribute('data-t-700');
99430
+ if (s_800 !== '') activeElement.setAttribute('data-t-800', s_800);else activeElement.removeAttribute('data-t-800');
99431
+ if (s_900 !== '') activeElement.setAttribute('data-t-900', s_900);else activeElement.removeAttribute('data-t-900');
99432
+ if (s_1000 !== '') activeElement.setAttribute('data-t-1000', s_1000);else activeElement.removeAttribute('data-t-1000');
99433
+ if (s_1100 !== '') activeElement.setAttribute('data-t-1100', s_1100);else activeElement.removeAttribute('data-t-1100');
99434
+ if (s_1200 !== '') activeElement.setAttribute('data-t-1200', s_1200);else activeElement.removeAttribute('data-t-1200');
99435
+ if (s_1300 !== '') activeElement.setAttribute('data-t-1300', s_1300);else activeElement.removeAttribute('data-t-1300');
99436
+ if (s_1400 !== '') activeElement.setAttribute('data-t-1400', s_1400);else activeElement.removeAttribute('data-t-1400');
99437
+ if (s_1500 !== '') activeElement.setAttribute('data-t-1500', s_1500);else activeElement.removeAttribute('data-t-1500');
99438
+ if (s_1600 !== '') activeElement.setAttribute('data-t-1600', s_1600);else activeElement.removeAttribute('data-t-1600');
99439
+ if (s_1700 !== '') activeElement.setAttribute('data-t-1700', s_1700);else activeElement.removeAttribute('data-t-1700');
99440
+ if (s_1800 !== '') activeElement.setAttribute('data-t-1800', s_1800);else activeElement.removeAttribute('data-t-1800');
99441
+ if (s_1900 !== '') activeElement.setAttribute('data-t-1900', s_1900);else activeElement.removeAttribute('data-t-1900');
99442
+ if (s_2000 !== '') activeElement.setAttribute('data-t-2000', s_2000);else activeElement.removeAttribute('data-t-2000');
99443
+ if (s_2100 !== '') activeElement.setAttribute('data-t-2100', s_2100);else activeElement.removeAttribute('data-t-2100');
99444
+ if (s_2200 !== '') activeElement.setAttribute('data-t-2200', s_2200);else activeElement.removeAttribute('data-t-2200');
99445
+ if (s_2300 !== '') activeElement.setAttribute('data-t-2300', s_2300);else activeElement.removeAttribute('data-t-2300');
99446
+ if (s_2400 !== '') activeElement.setAttribute('data-t-2400', s_2400);else activeElement.removeAttribute('data-t-2400');
99447
+ if (s_2500 !== '') activeElement.setAttribute('data-t-2500', s_2500);else activeElement.removeAttribute('data-t-2500');
99448
+ if (s_2600 !== '') activeElement.setAttribute('data-t-2600', s_2600);else activeElement.removeAttribute('data-t-2600');
99449
+ if (s_2700 !== '') activeElement.setAttribute('data-t-2700', s_2700);else activeElement.removeAttribute('data-t-2700');
99450
+ if (s_2800 !== '') activeElement.setAttribute('data-t-2800', s_2800);else activeElement.removeAttribute('data-t-2800');
99451
+ }
99452
+
99453
+ activeElement.style.transform = '';
99454
+ activeElement.style.transition = '';
99455
+ activeElement.style.opacity = '';
99456
+ const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
99457
+
99458
+ if (btnDisableSmoothAnim.classList.contains('on')) {
99459
+ activeElement.setAttribute('data-smooth-scrolling', 'off');
99460
+ } else {
99461
+ activeElement.removeAttribute('data-smooth-scrolling');
99462
+ }
99463
+
99464
+ const btnHiddenOnStart = this.modalTimeline.querySelector('.cmd-hidden-onstart');
99465
+
99466
+ if (btnHiddenOnStart.classList.contains('on')) {
99467
+ activeElement.setAttribute('data-hidden-onstart', '');
99468
+ } else {
99469
+ activeElement.removeAttribute('data-hidden-onstart');
99470
+ }
99471
+
99472
+ if (this.builder.win.skrollrr) {
99473
+ this.builder.win.skrollrr.refresh();
99474
+ } //Trigger Change event
99475
+
99476
+
99477
+ this.builder.settings.onChange();
99478
+ }
99479
+
99480
+ cleanup(activeElement) {
99481
+ let device = this.getDevice();
99482
+
99483
+ if (device === 'md') {
99484
+ // 970-1280
99485
+ activeElement.removeAttribute('data-md-t');
99486
+ activeElement.removeAttribute('data-md-t-100');
99487
+ activeElement.removeAttribute('data-md-t-200');
99488
+ activeElement.removeAttribute('data-md-t-300');
99489
+ activeElement.removeAttribute('data-md-t-400');
99490
+ activeElement.removeAttribute('data-md-t-500');
99491
+ activeElement.removeAttribute('data-md-t-600');
99492
+ activeElement.removeAttribute('data-md-t-700');
99493
+ activeElement.removeAttribute('data-md-t-800');
99494
+ activeElement.removeAttribute('data-md-t-900');
99495
+ activeElement.removeAttribute('data-md-t-1000');
99496
+ activeElement.removeAttribute('data-md-t-1100');
99497
+ activeElement.removeAttribute('data-md-t-1200');
99498
+ activeElement.removeAttribute('data-md-t-1300');
99499
+ activeElement.removeAttribute('data-md-t-1400');
99500
+ activeElement.removeAttribute('data-md-t-1500');
99501
+ activeElement.removeAttribute('data-md-t-1600');
99502
+ activeElement.removeAttribute('data-md-t-1700');
99503
+ activeElement.removeAttribute('data-md-t-1800');
99504
+ activeElement.removeAttribute('data-md-t-1900');
99505
+ activeElement.removeAttribute('data-md-t-2000');
99506
+ activeElement.removeAttribute('data-md-t-2100');
99507
+ activeElement.removeAttribute('data-md-t-2200');
99508
+ activeElement.removeAttribute('data-md-t-2300');
99509
+ activeElement.removeAttribute('data-md-t-2400');
99510
+ activeElement.removeAttribute('data-md-t-2500');
99511
+ activeElement.removeAttribute('data-md-t-2600');
99512
+ activeElement.removeAttribute('data-md-t-2700');
99513
+ activeElement.removeAttribute('data-md-t-2800');
99514
+ } else if (device === 'sm') {
99515
+ // <970
99516
+ activeElement.removeAttribute('data-sm-t');
99517
+ activeElement.removeAttribute('data-sm-t-100');
99518
+ activeElement.removeAttribute('data-sm-t-200');
99519
+ activeElement.removeAttribute('data-sm-t-300');
99520
+ activeElement.removeAttribute('data-sm-t-400');
99521
+ activeElement.removeAttribute('data-sm-t-500');
99522
+ activeElement.removeAttribute('data-sm-t-600');
99523
+ activeElement.removeAttribute('data-sm-t-700');
99524
+ activeElement.removeAttribute('data-sm-t-800');
99525
+ activeElement.removeAttribute('data-sm-t-900');
99526
+ activeElement.removeAttribute('data-sm-t-1000');
99527
+ activeElement.removeAttribute('data-sm-t-1100');
99528
+ activeElement.removeAttribute('data-sm-t-1200');
99529
+ activeElement.removeAttribute('data-sm-t-1300');
99530
+ activeElement.removeAttribute('data-sm-t-1400');
99531
+ activeElement.removeAttribute('data-sm-t-1500');
99532
+ activeElement.removeAttribute('data-sm-t-1600');
99533
+ activeElement.removeAttribute('data-sm-t-1700');
99534
+ activeElement.removeAttribute('data-sm-t-1800');
99535
+ activeElement.removeAttribute('data-sm-t-1900');
99536
+ activeElement.removeAttribute('data-sm-t-2000');
99537
+ activeElement.removeAttribute('data-sm-t-2100');
99538
+ activeElement.removeAttribute('data-sm-t-2200');
99539
+ activeElement.removeAttribute('data-sm-t-2300');
99540
+ activeElement.removeAttribute('data-sm-t-2400');
99541
+ activeElement.removeAttribute('data-sm-t-2500');
99542
+ activeElement.removeAttribute('data-sm-t-2600');
99543
+ activeElement.removeAttribute('data-sm-t-2700');
99544
+ activeElement.removeAttribute('data-sm-t-2800');
99545
+ } else {
99546
+ // >1280
99547
+ activeElement.removeAttribute('data-t');
99548
+ activeElement.removeAttribute('data-t-100');
99549
+ activeElement.removeAttribute('data-t-200');
99550
+ activeElement.removeAttribute('data-t-300');
99551
+ activeElement.removeAttribute('data-t-400');
99552
+ activeElement.removeAttribute('data-t-500');
99553
+ activeElement.removeAttribute('data-t-600');
99554
+ activeElement.removeAttribute('data-t-700');
99555
+ activeElement.removeAttribute('data-t-800');
99556
+ activeElement.removeAttribute('data-t-900');
99557
+ activeElement.removeAttribute('data-t-1000');
99558
+ activeElement.removeAttribute('data-t-1100');
99559
+ activeElement.removeAttribute('data-t-1200');
99560
+ activeElement.removeAttribute('data-t-1300');
99561
+ activeElement.removeAttribute('data-t-1400');
99562
+ activeElement.removeAttribute('data-t-1500');
99563
+ activeElement.removeAttribute('data-t-1600');
99564
+ activeElement.removeAttribute('data-t-1700');
99565
+ activeElement.removeAttribute('data-t-1800');
99566
+ activeElement.removeAttribute('data-t-1900');
99567
+ activeElement.removeAttribute('data-t-2000');
99568
+ activeElement.removeAttribute('data-t-2100');
99569
+ activeElement.removeAttribute('data-t-2200');
99570
+ activeElement.removeAttribute('data-t-2300');
99571
+ activeElement.removeAttribute('data-t-2400');
99572
+ activeElement.removeAttribute('data-t-2500');
99573
+ activeElement.removeAttribute('data-t-2600');
99574
+ activeElement.removeAttribute('data-t-2700');
99575
+ activeElement.removeAttribute('data-t-2800');
99576
+ }
99577
+ }
99578
+
99579
+ getDevice() {
99580
+ const btnDevice = this.modalTimeline.querySelector('.input-device.on');
99581
+ let device = btnDevice.getAttribute('data-value');
99582
+ return device;
99583
+ }
99584
+
99585
+ getTarget() {
99586
+ let inpTarget = this.modalTimeline.querySelector('.input-target');
99587
+ let target = inpTarget.value;
99588
+ let activeElement;
99589
+
99590
+ if (target === 'element') {
99591
+ let reCheck = this.readTarget();
99592
+
99593
+ if (reCheck) {
99594
+ if (reCheck.name === 'element') activeElement = this.builder.editor.activeElement;
99595
+ if (reCheck.name === 'inspectedElement') activeElement = this.builder.editor.inspectedElement;else activeElement = this.builder.editor.activeElement;
99596
+ } else {
99597
+ activeElement = this.builder.editor.activeElement;
99598
+ }
99599
+ }
99600
+
99601
+ if (target === 'column') {
99602
+ activeElement = this.builder.editor.activeCol;
99603
+ }
99604
+
99605
+ if (target === 'row') {
99606
+ let activeCol = this.builder.editor.activeCol;
99607
+ if (activeCol) activeElement = activeCol.parentNode;
99608
+ }
99609
+
99610
+ if (target === 'container') {
99611
+ let activeCol = this.builder.editor.activeCol;
99612
+ if (activeCol) activeElement = activeCol.parentNode.parentNode;
99613
+ }
99614
+
99615
+ if (target === 'overlay') {
99616
+ let overlay;
99617
+ const box = this.builder.doc.querySelector('.box-select');
99618
+ if (box) overlay = box.querySelector('.is-overlay');
99619
+ if (overlay) activeElement = overlay;
99620
+ }
99621
+
99622
+ if (target === 'bg') {
99623
+ let overlayBg;
99624
+ const box = this.builder.doc.querySelector('.box-select');
99625
+ if (box) overlayBg = box.querySelector('.is-overlay-bg');
99626
+ if (overlayBg) activeElement = overlayBg;
99627
+ }
99628
+
99629
+ if (target === 'box') {
99630
+ const box = this.builder.doc.querySelector('.box-select');
99631
+ if (box) activeElement = box;
99632
+ }
99633
+
99634
+ if (target === 'section') {
99635
+ const section = this.builder.doc.querySelector('.section-select');
99636
+ if (section) activeElement = section;
99637
+ }
99638
+
99639
+ return {
99640
+ 'element': activeElement ? activeElement : false,
99641
+ 'name': target ? target : false
99642
+ };
99643
+ }
99644
+
99645
+ readTarget(s) {
99646
+ if (!s) {
99647
+ // element (inspectedElement first)
99648
+ let activeElement = this.builder.editor.inspectedElement;
99649
+
99650
+ if (!activeElement) {
99651
+ return this.readTarget('bg');
99652
+ }
99653
+
99654
+ if (activeElement.hasAttribute('data-t') || activeElement.hasAttribute('data-t-100') || activeElement.hasAttribute('data-t-200') || activeElement.hasAttribute('data-t-300') || activeElement.hasAttribute('data-t-400') || activeElement.hasAttribute('data-t-500') || activeElement.hasAttribute('data-t-600') || activeElement.hasAttribute('data-t-700') || activeElement.hasAttribute('data-t-800') || activeElement.hasAttribute('data-t-900') || activeElement.hasAttribute('data-t-1000') || activeElement.hasAttribute('data-t-1100') || activeElement.hasAttribute('data-t-1200') || activeElement.hasAttribute('data-t-1300') || activeElement.hasAttribute('data-t-1400') || activeElement.hasAttribute('data-t-1500') || activeElement.hasAttribute('data-t-1600') || activeElement.hasAttribute('data-t-1700') || activeElement.hasAttribute('data-t-1800') || activeElement.hasAttribute('data-t-1900') || activeElement.hasAttribute('data-t-2000') || activeElement.hasAttribute('data-t-2100') || activeElement.hasAttribute('data-t-2200') || activeElement.hasAttribute('data-t-2300') || activeElement.hasAttribute('data-t-2400') || activeElement.hasAttribute('data-t-2500') || activeElement.hasAttribute('data-t-2600') || activeElement.hasAttribute('data-t-2700') || activeElement.hasAttribute('data-t-2800')) {
99655
+ return {
99656
+ 'element': activeElement,
99657
+ 'name': 'inspectedElement'
99658
+ };
99659
+ } else {
99660
+ return this.readTarget('element');
99661
+ }
99662
+ } else {
99663
+ let activeElement;
99664
+
99665
+ if (s === 'element') {
99666
+ activeElement = this.builder.editor.activeElement;
99667
+ }
99668
+
99669
+ if (s === 'column') {
99670
+ activeElement = this.builder.editor.activeCol;
99671
+ }
99672
+
99673
+ if (s === 'row') {
99674
+ if (this.builder.editor.activeCol) activeElement = this.builder.editor.activeCol.parentNode;
99675
+ }
99676
+
99677
+ if (s === 'container') {
99678
+ if (this.builder.editor.activeCol) activeElement = this.builder.editor.activeCol.parentNode.parentNode;
99679
+ }
99680
+
99681
+ if (s === 'bg') {
99682
+ let overlayBg;
99683
+ const box = this.builder.doc.querySelector('.box-select');
99684
+ if (box) overlayBg = box.querySelector('.is-overlay-bg');
99685
+ if (overlayBg) activeElement = overlayBg;
99686
+ }
99687
+
99688
+ if (s === 'overlay') {
99689
+ let overlay;
99690
+ const box = this.builder.doc.querySelector('.box-select');
99691
+ if (box) overlay = box.querySelector('.is-overlay');
99692
+ if (overlay) activeElement = overlay;
99693
+ }
99694
+
99695
+ if (s === 'box') {
99696
+ const box = this.builder.doc.querySelector('.box-select');
99697
+ if (box) activeElement = box;
99698
+ }
99699
+
99700
+ if (s === 'section') {
99701
+ const section = this.builder.doc.querySelector('.section-select');
99702
+ if (section) activeElement = section;
99703
+ }
99704
+
99705
+ if (!activeElement) {
99706
+ if (s === 'element') return this.readTarget('column');
99707
+ if (s === 'column') return this.readTarget('row');
99708
+ if (s === 'row') return this.readTarget('container');
99709
+ if (s === 'container') return this.readTarget('bg');
99710
+ if (s === 'bg') return this.readTarget('overlay');
99711
+ if (s === 'overlay') return this.readTarget('box');
99712
+ if (s === 'box') return this.readTarget('section');
99713
+ if (s === 'section') return false;
99714
+ }
99715
+
99716
+ if (activeElement.hasAttribute('data-t') || activeElement.hasAttribute('data-t-100') || activeElement.hasAttribute('data-t-200') || activeElement.hasAttribute('data-t-300') || activeElement.hasAttribute('data-t-400') || activeElement.hasAttribute('data-t-500') || activeElement.hasAttribute('data-t-600') || activeElement.hasAttribute('data-t-700') || activeElement.hasAttribute('data-t-800') || activeElement.hasAttribute('data-t-900') || activeElement.hasAttribute('data-t-1000') || activeElement.hasAttribute('data-t-1100') || activeElement.hasAttribute('data-t-1200') || activeElement.hasAttribute('data-t-1300') || activeElement.hasAttribute('data-t-1400') || activeElement.hasAttribute('data-t-1500') || activeElement.hasAttribute('data-t-1600') || activeElement.hasAttribute('data-t-1700') || activeElement.hasAttribute('data-t-1800') || activeElement.hasAttribute('data-t-1900') || activeElement.hasAttribute('data-t-2000') || activeElement.hasAttribute('data-t-2100') || activeElement.hasAttribute('data-t-2200') || activeElement.hasAttribute('data-t-2300') || activeElement.hasAttribute('data-t-2400') || activeElement.hasAttribute('data-t-2500') || activeElement.hasAttribute('data-t-2600') || activeElement.hasAttribute('data-t-2700') || activeElement.hasAttribute('data-t-2800')) {
99717
+ return {
99718
+ 'element': activeElement,
99719
+ 'name': s
99720
+ };
99721
+ } else {
99722
+ if (s === 'element') return this.readTarget('column');
99723
+ if (s === 'column') return this.readTarget('row');
99724
+ if (s === 'row') return this.readTarget('container');
99725
+ if (s === 'container') return this.readTarget('bg');
99726
+ if (s === 'bg') return this.readTarget('overlay');
99727
+ if (s === 'overlay') return this.readTarget('box');
99728
+ if (s === 'box') return this.readTarget('section');
99729
+ if (s === 'section') return false;
99730
+ }
99731
+ }
99732
+ }
99733
+
99734
+ getTransform(element, css) {
99735
+ let tX, tY, sc, rt;
99736
+ let arrTransform = this.parseComplexStyleProperty(css);
99737
+ if (arrTransform.translateX) tX = arrTransform.translateX[0];
99738
+ if (arrTransform.translateY) tY = arrTransform.translateY[0];
99739
+ if (arrTransform.scale) sc = arrTransform.scale[0];
99740
+ if (arrTransform.rotate) rt = arrTransform.rotate[0];
99741
+ let opacity = element.style.opacity;
99742
+ return {
99743
+ translateX: tX ? tX : false,
99744
+ translateY: tY ? tY : false,
99745
+ scale: sc ? sc : false,
99746
+ rotate: rt ? rt.replace('deg', '') : false,
99747
+ opacity: opacity ? opacity : false
99748
+ };
99749
+ }
99750
+
99751
+ parseComplexStyleProperty(str) {
99752
+ var regex = /(\w+)\((.+?)\)/g,
99753
+ transform = {},
99754
+ match;
99755
+
99756
+ while (match = regex.exec(str)) // eslint-disable-line
99757
+ transform[match[1]] = transform[match[1]] ? transform[match[1]].concat([match[2]]) : [match[2]];
99758
+
99759
+ return transform;
99760
+ }
99761
+
99762
+ edit() {
99763
+ this.builder.wrapperEl.classList.add('hard-select');
99764
+ if (this.builder.activeBox) this.builder.activeBox.classList.add('box-select');
99765
+ if (this.builder.activeSection) this.builder.activeSection.classList.add('section-select'); // Close all opened sidebar
99766
+
99767
+ this.builder.sidebar.closeSidebar();
99768
+ this.modalAnimateScroll.classList.remove('active');
99769
+ this.modalTimeline.classList.add('active'); // this.clickContent();
99770
+ // clean UI for selection only
99771
+
99772
+ this.builder.doc.body.classList.add('selection-only');
99773
+ document.body.classList.add('selection-only');
99774
+ const modalEditBox = this.builderStuff.querySelector('.editbox');
99775
+ modalEditBox.style.display = '';
99776
+ const modalEditSection = this.builderStuff.querySelector('.editsection');
99777
+ modalEditSection.style.display = '';
99778
+ }
99779
+
99780
+ close() {
99781
+ this.modalTimeline.classList.remove('active'); // clean UI for selection only
99782
+
99783
+ this.builder.doc.body.classList.remove('selection-only');
99784
+ document.body.classList.remove('selection-only');
99785
+ }
99786
+
99787
+ }
99788
+
97770
99789
  const dom = new Dom$1();
97771
99790
 
97772
99791
  class ContentBox {
@@ -100421,6 +102440,7 @@ class ContentBox {
100421
102440
 
100422
102441
  this.sidebar = new SideBar(this);
100423
102442
  this.animateScroll = new AnimateScroll(this);
102443
+ this.timeline = new Timeline(this);
100424
102444
 
100425
102445
  if (!window.data_basic) {
100426
102446
  dom.addExternalScripts([this.snippetUrl], () => {
@@ -102535,6 +104555,10 @@ class ContentBox {
102535
104555
  this.animateScroll.edit();
102536
104556
  }
102537
104557
 
104558
+ openTimelinePanel() {
104559
+ this.timeline.edit();
104560
+ }
104561
+
102538
104562
  destroy() {
102539
104563
  this.doc.removeEventListener('click', this.doDocumentClick, false);
102540
104564
  if (this.iframe) document.removeEventListener('click', this.doDocumentClick, false);