@innovastudio/contentbox 1.4.51 → 1.4.54

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