@innovastudio/contentbox 1.6.20 → 1.6.21

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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@innovastudio/contentbox",
3
3
  "type": "module",
4
- "version": "1.6.20",
4
+ "version": "1.6.21",
5
5
  "description": "",
6
6
  "main": "public/contentbox/contentbox.esm.js",
7
7
  "files": [
@@ -103037,31 +103037,31 @@ class AnimateScroll {
103037
103037
  </tr>
103038
103038
  <tr>
103039
103039
  <td>
103040
- <input class="inp-simplescroll-x-start" id="{id}" placeholder="-100" type="text" />
103040
+ <input class="inp-simplescroll-x-start" id="__animscroll_1" placeholder="-100" type="text" />
103041
103041
  </td>
103042
103042
  <td>
103043
- <input class="inp-simplescroll-x-15" id="{id}" placeholder="" type="text" />
103043
+ <input class="inp-simplescroll-x-15" id="__animscroll_2" placeholder="" type="text" />
103044
103044
  </td>
103045
103045
  <td>
103046
- <input class="inp-simplescroll-x-25" id="{id}" placeholder="" type="text" />
103046
+ <input class="inp-simplescroll-x-25" id="__animscroll_3" placeholder="" type="text" />
103047
103047
  </td>
103048
103048
  <td>
103049
- <input class="inp-simplescroll-x-35" id="{id}" placeholder="" type="text" />
103049
+ <input class="inp-simplescroll-x-35" id="__animscroll_4" placeholder="" type="text" />
103050
103050
  </td>
103051
103051
  <td>
103052
- <input class="inp-simplescroll-x-50" id="{id}" placeholder="" type="text" />
103052
+ <input class="inp-simplescroll-x-50" id="__animscroll_5" placeholder="" type="text" />
103053
103053
  </td>
103054
103054
  <td>
103055
- <input class="inp-simplescroll-x-65" id="{id}" placeholder="" type="text" />
103055
+ <input class="inp-simplescroll-x-65" id="__animscroll_6" placeholder="" type="text" />
103056
103056
  </td>
103057
103057
  <td>
103058
- <input class="inp-simplescroll-x-75" id="{id}" placeholder="" type="text" />
103058
+ <input class="inp-simplescroll-x-75" id="__animscroll_7" placeholder="" type="text" />
103059
103059
  </td>
103060
103060
  <td>
103061
- <input class="inp-simplescroll-x-85" id="{id}" placeholder="" type="text" />
103061
+ <input class="inp-simplescroll-x-85" id="__animscroll_8" placeholder="" type="text" />
103062
103062
  </td>
103063
103063
  <td>
103064
- <input class="inp-simplescroll-x-end" id="{id}" placeholder="100" type="text" />
103064
+ <input class="inp-simplescroll-x-end" id="__animscroll_9" placeholder="100" type="text" />
103065
103065
  </td>
103066
103066
  </tr>
103067
103067
  <tr>
@@ -103081,31 +103081,31 @@ class AnimateScroll {
103081
103081
  </tr>
103082
103082
  <tr>
103083
103083
  <td>
103084
- <input class="inp-simplescroll-y-start" id="{id}" placeholder="100%" type="text" />
103084
+ <input class="inp-simplescroll-y-start" id="__animscroll_10" placeholder="100%" type="text" />
103085
103085
  </td>
103086
103086
  <td>
103087
- <input class="inp-simplescroll-y-15" id="{id}" placeholder="" type="text" />
103087
+ <input class="inp-simplescroll-y-15" id="__animscroll_11" placeholder="" type="text" />
103088
103088
  </td>
103089
103089
  <td>
103090
- <input class="inp-simplescroll-y-25" id="{id}" placeholder="" type="text" />
103090
+ <input class="inp-simplescroll-y-25" id="__animscroll_12" placeholder="" type="text" />
103091
103091
  </td>
103092
103092
  <td>
103093
- <input class="inp-simplescroll-y-35" id="{id}" placeholder="" type="text" />
103093
+ <input class="inp-simplescroll-y-35" id="__animscroll_13" placeholder="" type="text" />
103094
103094
  </td>
103095
103095
  <td>
103096
- <input class="inp-simplescroll-y-50" id="{id}" placeholder="" type="text" />
103096
+ <input class="inp-simplescroll-y-50" id="__animscroll_14" placeholder="" type="text" />
103097
103097
  </td>
103098
103098
  <td>
103099
- <input class="inp-simplescroll-y-65" id="{id}" placeholder="" type="text" />
103099
+ <input class="inp-simplescroll-y-65" id="__animscroll_15" placeholder="" type="text" />
103100
103100
  </td>
103101
103101
  <td>
103102
- <input class="inp-simplescroll-y-75" id="{id}" placeholder="" type="text" />
103102
+ <input class="inp-simplescroll-y-75" id="__animscroll_16" placeholder="" type="text" />
103103
103103
  </td>
103104
103104
  <td>
103105
- <input class="inp-simplescroll-y-85" id="{id}" placeholder="" type="text" />
103105
+ <input class="inp-simplescroll-y-85" id="__animscroll_17" placeholder="" type="text" />
103106
103106
  </td>
103107
103107
  <td>
103108
- <input class="inp-simplescroll-y-end" id="{id}" placeholder="-100%" type="text" />
103108
+ <input class="inp-simplescroll-y-end" id="__animscroll_18" placeholder="-100%" type="text" />
103109
103109
  </td>
103110
103110
  </tr>
103111
103111
  <tr>
@@ -103124,31 +103124,31 @@ class AnimateScroll {
103124
103124
  </tr>
103125
103125
  <tr>
103126
103126
  <td>
103127
- <input class="inp-simplescroll-scale-start" id="{id}" placeholder="0.8" type="text" />
103127
+ <input class="inp-simplescroll-scale-start" id="__animscroll_19" placeholder="0.8" type="text" />
103128
103128
  </td>
103129
103129
  <td>
103130
- <input class="inp-simplescroll-scale-15" id="{id}" placeholder="" type="text" />
103130
+ <input class="inp-simplescroll-scale-15" id="__animscroll_20" placeholder="" type="text" />
103131
103131
  </td>
103132
103132
  <td>
103133
- <input class="inp-simplescroll-scale-25" id="{id}" placeholder="" type="text" />
103133
+ <input class="inp-simplescroll-scale-25" id="__animscroll_21" placeholder="" type="text" />
103134
103134
  </td>
103135
103135
  <td>
103136
- <input class="inp-simplescroll-scale-35" id="{id}" placeholder="" type="text" />
103136
+ <input class="inp-simplescroll-scale-35" id="__animscroll_22" placeholder="" type="text" />
103137
103137
  </td>
103138
103138
  <td>
103139
- <input class="inp-simplescroll-scale-50" id="{id}" placeholder="" type="text" />
103139
+ <input class="inp-simplescroll-scale-50" id="__animscroll_23" placeholder="" type="text" />
103140
103140
  </td>
103141
103141
  <td>
103142
- <input class="inp-simplescroll-scale-65" id="{id}" placeholder="" type="text" />
103142
+ <input class="inp-simplescroll-scale-65" id="__animscroll_24" placeholder="" type="text" />
103143
103143
  </td>
103144
103144
  <td>
103145
- <input class="inp-simplescroll-scale-75" id="{id}" placeholder="" type="text" />
103145
+ <input class="inp-simplescroll-scale-75" id="__animscroll_25" placeholder="" type="text" />
103146
103146
  </td>
103147
103147
  <td>
103148
- <input class="inp-simplescroll-scale-85" id="{id}" placeholder="" type="text" />
103148
+ <input class="inp-simplescroll-scale-85" id="__animscroll_26" placeholder="" type="text" />
103149
103149
  </td>
103150
103150
  <td>
103151
- <input class="inp-simplescroll-scale-end" id="{id}" placeholder="1.2" type="text" />
103151
+ <input class="inp-simplescroll-scale-end" id="__animscroll_27" placeholder="1.2" type="text" />
103152
103152
  </td>
103153
103153
  </tr>
103154
103154
 
@@ -103168,31 +103168,31 @@ class AnimateScroll {
103168
103168
  </tr>
103169
103169
  <tr>
103170
103170
  <td>
103171
- <input class="inp-simplescroll-rotate-start" id="{id}" placeholder="-45" type="text" />
103171
+ <input class="inp-simplescroll-rotate-start" id="__animscroll_28" placeholder="-45" type="text" />
103172
103172
  </td>
103173
103173
  <td>
103174
- <input class="inp-simplescroll-rotate-15" id="{id}" placeholder="" type="text" />
103174
+ <input class="inp-simplescroll-rotate-15" id="__animscroll_29" placeholder="" type="text" />
103175
103175
  </td>
103176
103176
  <td>
103177
- <input class="inp-simplescroll-rotate-25" id="{id}" placeholder="" type="text" />
103177
+ <input class="inp-simplescroll-rotate-25" id="__animscroll_30" placeholder="" type="text" />
103178
103178
  </td>
103179
103179
  <td>
103180
- <input class="inp-simplescroll-rotate-35" id="{id}" placeholder="" type="text" />
103180
+ <input class="inp-simplescroll-rotate-35" id="__animscroll_31" placeholder="" type="text" />
103181
103181
  </td>
103182
103182
  <td>
103183
- <input class="inp-simplescroll-rotate-50" id="{id}" placeholder="" type="text" />
103183
+ <input class="inp-simplescroll-rotate-50" id="__animscroll_32" placeholder="" type="text" />
103184
103184
  </td>
103185
103185
  <td>
103186
- <input class="inp-simplescroll-rotate-65" id="{id}" placeholder="" type="text" />
103186
+ <input class="inp-simplescroll-rotate-65" id="__animscroll_33" placeholder="" type="text" />
103187
103187
  </td>
103188
103188
  <td>
103189
- <input class="inp-simplescroll-rotate-75" id="{id}" placeholder="" type="text" />
103189
+ <input class="inp-simplescroll-rotate-75" id="__animscroll_34" placeholder="" type="text" />
103190
103190
  </td>
103191
103191
  <td>
103192
- <input class="inp-simplescroll-rotate-85" id="{id}" placeholder="" type="text" />
103192
+ <input class="inp-simplescroll-rotate-85" id="__animscroll_35" placeholder="" type="text" />
103193
103193
  </td>
103194
103194
  <td>
103195
- <input class="inp-simplescroll-rotate-end" id="{id}" placeholder="45" type="text" />
103195
+ <input class="inp-simplescroll-rotate-end" id="__animscroll_36" placeholder="45" type="text" />
103196
103196
  </td>
103197
103197
  </tr>
103198
103198
 
@@ -103212,31 +103212,31 @@ class AnimateScroll {
103212
103212
  </tr>
103213
103213
  <tr>
103214
103214
  <td>
103215
- <input class="inp-simplescroll-opacity-start" id="{id}" placeholder="" type="text" />
103215
+ <input class="inp-simplescroll-opacity-start" id="__animscroll_38" placeholder="" type="text" />
103216
103216
  </td>
103217
103217
  <td>
103218
- <input class="inp-simplescroll-opacity-15" id="{id}" placeholder="" type="text" />
103218
+ <input class="inp-simplescroll-opacity-15" id="__animscroll_39" placeholder="" type="text" />
103219
103219
  </td>
103220
103220
  <td>
103221
- <input class="inp-simplescroll-opacity-25" id="{id}" placeholder="" type="text" />
103221
+ <input class="inp-simplescroll-opacity-25" id="__animscroll_40" placeholder="" type="text" />
103222
103222
  </td>
103223
103223
  <td>
103224
- <input class="inp-simplescroll-opacity-35" id="{id}" placeholder="" type="text" />
103224
+ <input class="inp-simplescroll-opacity-35" id="__animscroll_41" placeholder="" type="text" />
103225
103225
  </td>
103226
103226
  <td>
103227
- <input class="inp-simplescroll-opacity-50" id="{id}" placeholder="" type="text" />
103227
+ <input class="inp-simplescroll-opacity-50" id="__animscroll_42" placeholder="" type="text" />
103228
103228
  </td>
103229
103229
  <td>
103230
- <input class="inp-simplescroll-opacity-65" id="{id}" placeholder="" type="text" />
103230
+ <input class="inp-simplescroll-opacity-65" id="__animscroll_43" placeholder="" type="text" />
103231
103231
  </td>
103232
103232
  <td>
103233
- <input class="inp-simplescroll-opacity-75" id="{id}" placeholder="" type="text" />
103233
+ <input class="inp-simplescroll-opacity-75" id="__animscroll_44" placeholder="" type="text" />
103234
103234
  </td>
103235
103235
  <td>
103236
- <input class="inp-simplescroll-opacity-85" id="{id}" placeholder="" type="text" />
103236
+ <input class="inp-simplescroll-opacity-85" id="__animscroll_45" placeholder="" type="text" />
103237
103237
  </td>
103238
103238
  <td>
103239
- <input class="inp-simplescroll-opacity-end" id="{id}" placeholder="" type="text" />
103239
+ <input class="inp-simplescroll-opacity-end" id="__animscroll_46" placeholder="" type="text" />
103240
103240
  </td>
103241
103241
  </tr>
103242
103242
  </table>
@@ -103420,7 +103420,7 @@ class AnimateScroll {
103420
103420
  <div class="anim-label">
103421
103421
  <span>
103422
103422
  <span class="bold">${out('Slide Left')}</span>:
103423
- <input class="inp-slide-left" id="{id}" type="text" />
103423
+ <input class="inp-slide-left" id="__animscroll_47" type="text" />
103424
103424
  </span>
103425
103425
  <button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
103426
103426
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103437,7 +103437,7 @@ class AnimateScroll {
103437
103437
  <div class="anim-label">
103438
103438
  <span>
103439
103439
  <span class="bold">${out('Slide Right')}</span>:
103440
- <input class="inp-slide-right" id="{id}" type="text" />
103440
+ <input class="inp-slide-right" id="__animscroll_48" type="text" />
103441
103441
  </span>
103442
103442
  <button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
103443
103443
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103455,7 +103455,7 @@ class AnimateScroll {
103455
103455
  <div class="anim-label">
103456
103456
  <span>
103457
103457
  <span class="bold">${out('Slide Up')}</span>:
103458
- <input class="inp-slide-up" id="{id}" type="text" />
103458
+ <input class="inp-slide-up" id="__animscroll_49" type="text" />
103459
103459
  </span>
103460
103460
  <button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
103461
103461
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103472,7 +103472,7 @@ class AnimateScroll {
103472
103472
  <div class="anim-label">
103473
103473
  <span>
103474
103474
  <span class="bold">${out('Slide Down')}</span>:
103475
- <input class="inp-slide-down" id="{id}" type="text" />
103475
+ <input class="inp-slide-down" id="__animscroll_50" type="text" />
103476
103476
  </span>
103477
103477
  <button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
103478
103478
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103490,7 +103490,7 @@ class AnimateScroll {
103490
103490
  <div class="anim-label">
103491
103491
  <span>
103492
103492
  <span class="bold">${out('Scale')}</span>:
103493
- <input class="inp-scale" id="{id}" type="text" />
103493
+ <input class="inp-scale" id="__animscroll_51" type="text" />
103494
103494
  </span>
103495
103495
  <button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
103496
103496
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103509,7 +103509,7 @@ class AnimateScroll {
103509
103509
  <div class="anim-label">
103510
103510
  <span>
103511
103511
  <span class="bold">${out('Rotate Clockwise')}</span>:
103512
- <input class="inp-rotate-clockwise" id="{id}" type="text" />
103512
+ <input class="inp-rotate-clockwise" id="__animscroll_52" type="text" />
103513
103513
  </span>
103514
103514
  <button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
103515
103515
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103526,7 +103526,7 @@ class AnimateScroll {
103526
103526
  <div class="anim-label">
103527
103527
  <span>
103528
103528
  <span class="bold">${out('Rotate Counterclockwise')}</span>:
103529
- <input class="inp-rotate-counter" id="{id}" type="text" />
103529
+ <input class="inp-rotate-counter" id="__animscroll_53" type="text" />
103530
103530
  </span>
103531
103531
  <button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
103532
103532
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103568,7 +103568,7 @@ class AnimateScroll {
103568
103568
 
103569
103569
  <div class="anim-label">
103570
103570
  <span>
103571
- <span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" id="{id}" type="text" />
103571
+ <span class="bold">${out('Slide Left')}</span>: <input class="inp-slide-left" id="__animscroll_54" type="text" />
103572
103572
  </span>
103573
103573
  <button title="${out('Clear')}" class="cmd-clear-slide-left" style="background: none;margin-right:-12px">
103574
103574
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103585,7 +103585,7 @@ class AnimateScroll {
103585
103585
  <div class="anim-label">
103586
103586
  <span>
103587
103587
  <span class="bold">${out('Slide Right')}</span>:
103588
- <input class="inp-slide-right" id="{id}" type="text" />
103588
+ <input class="inp-slide-right" id="__animscroll_55" type="text" />
103589
103589
  </span>
103590
103590
  <button title="${out('Clear')}" class="cmd-clear-slide-right" style="background: none;margin-right:-12px">
103591
103591
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103603,7 +103603,7 @@ class AnimateScroll {
103603
103603
  <div class="anim-label">
103604
103604
  <span>
103605
103605
  <span class="bold">${out('Slide Up')}</span>:
103606
- <input class="inp-slide-up" id="{id}" type="text" />
103606
+ <input class="inp-slide-up" id="__animscroll_56" type="text" />
103607
103607
  </span>
103608
103608
  <button title="${out('Clear')}" class="cmd-clear-slide-up" style="background: none;margin-right:-12px">
103609
103609
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103620,7 +103620,7 @@ class AnimateScroll {
103620
103620
  <div class="anim-label">
103621
103621
  <span>
103622
103622
  <span class="bold">${out('Slide Down')}</span>:
103623
- <input class="inp-slide-down" id="{id}" type="text" />
103623
+ <input class="inp-slide-down" id="__animscroll_57" type="text" />
103624
103624
  </span>
103625
103625
  <button title="${out('Clear')}" class="cmd-clear-slide-down" style="background: none;margin-right:-12px">
103626
103626
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103638,7 +103638,7 @@ class AnimateScroll {
103638
103638
  <div class="anim-label">
103639
103639
  <span>
103640
103640
  <span class="bold">${out('Scale')}</span>:
103641
- <input class="inp-scale" id="{id}" type="text" />
103641
+ <input class="inp-scale" id="__animscroll_58" type="text" />
103642
103642
  </span>
103643
103643
  <button title="${out('Clear')}" class="cmd-clear-scale" style="background: none;margin-right:-12px">
103644
103644
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103656,7 +103656,7 @@ class AnimateScroll {
103656
103656
  <div class="anim-label">
103657
103657
  <span>
103658
103658
  <span class="bold">${out('Rotate Clockwise')}</span>:
103659
- <input class="inp-rotate-clockwise" id="{id}" type="text" />
103659
+ <input class="inp-rotate-clockwise" id="__animscroll_59" type="text" />
103660
103660
  </span>
103661
103661
  <button title="${out('Clear')}" class="cmd-clear-rotate-clockwise" style="background: none;margin-right:-12px">
103662
103662
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103673,7 +103673,7 @@ class AnimateScroll {
103673
103673
  <div class="anim-label">
103674
103674
  <span>
103675
103675
  <span class="bold">${out('Rotate Counterclockwise')}</span>:
103676
- <input class="inp-rotate-counter" id="{id}" type="text" />
103676
+ <input class="inp-rotate-counter" id="__animscroll_60" type="text" />
103677
103677
  </span>
103678
103678
  <button title="${out('Clear')}" class="cmd-clear-rotate-counter" style="background: none;margin-right:-12px">
103679
103679
  <svg class="is-icon-flex"><use xlink:href="#icon-eraser"></use></svg>
@@ -103757,7 +103757,7 @@ class AnimateScroll {
103757
103757
 
103758
103758
  <div class="flex-wrap" style="margin-top: 10px;">
103759
103759
  <label class="label-checkbox" for="chkPresetAnimOnce" style="margin:0;margin-right:15px;">
103760
- <input id="chkPresetAnimOnce" id="{id}" type="checkbox" />
103760
+ <input id="chkPresetAnimOnce" id="__animscroll_61" type="checkbox" />
103761
103761
  ${out('Animate Once')}
103762
103762
  </label>
103763
103763
 
@@ -103821,18 +103821,6 @@ class AnimateScroll {
103821
103821
 
103822
103822
  </div>
103823
103823
  `;
103824
- let n = 0;
103825
-
103826
- while (html.includes('{id}')) {
103827
- const uniqueId = this.builder.makeId();
103828
- html = html.replace('{id}', uniqueId);
103829
- n++;
103830
-
103831
- if (n > 70) {
103832
- break;
103833
- }
103834
- }
103835
-
103836
103824
  dom$2.appendHtml(builderStuff, html);
103837
103825
  const modalAnimateScroll = builderStuff.querySelector('.is-side.animatescroll');
103838
103826
  this.modalAnimateScroll = modalAnimateScroll;
@@ -108066,16 +108054,9 @@ class Timeline {
108066
108054
  </div>
108067
108055
  </div>
108068
108056
  `;
108069
- let n = 0;
108070
-
108071
- while (html.includes('{id}')) {
108072
- const uniqueId = this.builder.makeId();
108073
- html = html.replace('{id}', uniqueId);
108074
- n++;
108075
108057
 
108076
- if (n > 150) {
108077
- break;
108078
- }
108058
+ for (let i = 0; i < 170; i++) {
108059
+ html = html.replace('{id}', '__time_' + i);
108079
108060
  }
108080
108061
 
108081
108062
  dom$1.appendHtml(builderStuff, html);