@innovastudio/contentbox 1.4.58 → 1.4.59

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.4.58",
+  "version": "1.4.59",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [

package/public/contentbox/contentbox.esm.js

@@ -11358,6 +11358,8 @@ class EditBox {
       btn.addEventListener('click', () => {
         let activeBox = this.builder.activeBox;
         let boxCentered = activeBox.querySelector('.is-box-centered');
+        if (!boxCentered) boxCentered = activeBox; // for simplified flex section .is-section > .is-container
+
         this.builder.editor.saveForUndo();
         let s = btn.getAttribute('data-value');
 
@@ -13178,6 +13180,7 @@ class EditBox {
   boxTextOpacity(s) {
     let activeBox = this.builder.activeBox;
     let cb = activeBox.querySelector('.is-box-centered');
+    if (!cb) cb = activeBox; // for simplified flex section
 
     if (s === '+') {
       if (dom$j.hasClass(cb, 'is-opacity-20')) {
@@ -97877,7 +97880,7 @@ class Timeline {
                 font-weight: 300 !important;
                 padding: 0 !important;
                 width: 36px !important;
-                height: 30px !important;
+                height: 29px !important;
                 text-align: center !important;
                 letter-spacing: 0px !important;
             }
@@ -98391,7 +98394,7 @@ class Timeline {
                             </td>
                         </tr>
                     </table>
-                    <div class="flex-wrap" style="padding: 0 15px 15px;box-sizing: border-box;width: 100%;justify-content: space-between;">
+                    <div class="flex-wrap" style="padding: 3px 15px 15px;box-sizing: border-box;width: 100%;justify-content: space-between;">
 
                         <div class="flex-wrap">
                             <div class="flex-wrap" style="margin-right:15px">
@@ -98406,7 +98409,7 @@ class Timeline {
                                     <option value="section">${out('Section')}</option>
                                 </select>
                             </div>
-                            <div class="flex-wrap" style="margin-right:30px">
+                            <div class="flex-wrap" style="margin-right:20px">
                                 <button title="${out('Desktop')}" class="input-device on" data-value="" style="width:40px;height:34px;">
                                     <svg class="is-icon-flex" style="width:18px;height:18px"><use xlink:href="#icon-device-desktop"></use></svg>
                                 </button>
@@ -98435,26 +98438,45 @@ class Timeline {
                                 </div>
                                 <label for="chkPinOverlap" style="margin:0;display:flex;margin-left:15px">
                                     <input id="chkPinOverlap" type="checkbox" style="margin:-1px 6px 0 0"> 
-                                    <span>${out('Overlap')}</span>.
+                                    <span>${out('Overlap')}</span>
                                 </label>
                                 <label for="chkPinDesktopOnly" style="margin:0;display:flex;margin-left:15px">
                                     <input id="chkPinDesktopOnly" type="checkbox" style="margin:-1px 6px 0 0"> 
-                                    <span>${out('Widescreen')}</span>.
+                                    <span>${out('Widescreen')}</span>
                                 </label>
                             </div>
-
                         </div>
                         
                         <div class="flex-wrap" style="">
 
-                            <div class="flex-wrap" style="margin-right:20px">
+                            <div class="flex-wrap" style="flex-direction:column;margin-right:15px">
+                                <div style="font-size:10px;margin-top:-10px;margin-bottom:2px"><span>${out('Origin')}</span>:</div>
+                                <div>
+                                    <div class="flex-wrap">
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="left top" title="${out('Top Left')}" type="button" style=""><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="center top" title="${out('Top Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="right top" title="${out('Top Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></button>
+                                    </div>
+                                    <div class="flex-wrap">
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="left center" title="${out('Center Left')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-left"></use></svg></button>
+                                        <button class="cmd-anim-origin on" style="width:25px;height:19px;" data-value="center" title="${out('Center')}" type="button"><svg class="is-icon-flex" style="width:6px;height:6px;"><use xlink:href="#ion-android-contract"></use></svg></button>
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="right center" title="${out('Center Right')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-right"></use></svg></button>
+                                    </div>
+                                    <div class="flex-wrap">
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="left bottom" title="${out('Bottom Left')}" type="button" style=";"><svg class="is-icon-flex" style="transform: rotate(45deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="center bottom" title="${out('Bottom Center')}" type="button"><svg class="is-icon-flex" style=""><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                                        <button class="cmd-anim-origin" style="width:25px;height:19px;" data-value="right bottom" title="${out('Bottom Right')}" type="button"><svg class="is-icon-flex" style="transform: rotate(315deg);"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="flex-wrap" style="margin-right:10px">
                                 <button title="${out('Disable Easing')}" class="cmd-disable-smoothanim" style="padding-left:15px;padding-right: 15px;">${out('Disable Easing')}</button>
                                 <button title="${out('Hidden on Start')}" class="cmd-hidden-onstart" style="padding-left:15px;padding-right: 15px;">${out('Hidden on Start')}</button>
                             </div>
 
                             <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;">
                                 <svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg>
-                                <span style="margin-left:7px">${out('Clear All')}</span>
                             </button>
                         </div>
 
@@ -98650,6 +98672,8 @@ class Timeline {
         btn.classList.add('on');
       } else {
         section.classList.remove('section-pin');
+        section.classList.remove('pin-space-lg');
+        section.classList.remove('pin-space-xl');
         divPinSpacing.style.display = 'none';
       } //Trigger Change event
 
@@ -98712,6 +98736,19 @@ class Timeline {
         this.builder.onChange();
       });
     });
+    const btnAnimOrigins = modalTimeline.querySelectorAll('.cmd-anim-origin');
+    btnAnimOrigins.forEach(btn => {
+      btn.addEventListener('click', () => {
+        let elms = modalTimeline.querySelectorAll('.cmd-anim-origin');
+        elms.forEach(elm => {
+          elm.classList.remove('on');
+        });
+        btn.classList.add('on');
+        this.applyTimeline(); //Trigger Change event
+
+        this.builder.onChange();
+      });
+    });
     const btnDisableSmoothAnim = modalTimeline.querySelector('.cmd-disable-smoothanim');
     btnDisableSmoothAnim.addEventListener('click', () => {
       if (btnDisableSmoothAnim.classList.contains('on')) {
@@ -98954,19 +98991,11 @@ class Timeline {
     this.inpOpacity_2500.value = '';
     this.inpOpacity_2600.value = '';
     this.inpOpacity_2700.value = '';
-    this.inpOpacity_2800.value = '';
-    const chkPinSection = this.modalTimeline.querySelector('#chkPinSection2');
-    chkPinSection.checked = false;
-    const divPinSpacing = this.modalTimeline.querySelector('.div-pin-spacing');
-    divPinSpacing.style.display = 'none';
-    const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
-    btnDisableSmoothAnim.classList.remove('on');
-    const btnHiddenOnStart = this.modalTimeline.querySelector('.cmd-hidden-onstart');
-    btnHiddenOnStart.classList.remove('on');
-  }
+    this.inpOpacity_2800.value = ''; // const chkPinSection = this.modalTimeline.querySelector('#chkPinSection2');
+    // chkPinSection.checked = false;
+    // const divPinSpacing = this.modalTimeline.querySelector('.div-pin-spacing');
+    // divPinSpacing.style.display = 'none';
 
-  read() {
-    this.clearSettings();
     const activeSection = this.builder.activeSection;
 
     if (activeSection) {
@@ -99019,10 +99048,39 @@ class Timeline {
       }
     }
 
+    const btnAnimOrigins = this.modalTimeline.querySelectorAll('.cmd-anim-origin');
+    btnAnimOrigins.forEach(btn => {
+      if (btn.getAttribute('data-value') === 'center') {
+        btn.classList.add('on');
+      } else {
+        btn.classList.remove('on');
+      }
+    });
+    const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
+    btnDisableSmoothAnim.classList.remove('on');
+    const btnHiddenOnStart = this.modalTimeline.querySelector('.cmd-hidden-onstart');
+    btnHiddenOnStart.classList.remove('on');
+  }
+
+  read() {
+    this.clearSettings();
     let activeElement;
     let target = this.getTarget();
     activeElement = target.element;
     if (!activeElement) return;
+
+    if (activeElement.style.transformOrigin) {
+      let origin = activeElement.style.transformOrigin;
+      const btnAnimOrigins = this.modalTimeline.querySelectorAll('.cmd-anim-origin');
+      btnAnimOrigins.forEach(btn => {
+        if (origin === btn.getAttribute('data-value')) {
+          btn.classList.add('on');
+        } else {
+          btn.classList.remove('on');
+        }
+      });
+    }
+
     const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
 
     if (activeElement.hasAttribute('data-smooth-scrolling')) {
@@ -99609,6 +99667,13 @@ class Timeline {
     /* /mark device */
 
 
+    const btnAnimOrigin = this.modalTimeline.querySelector('.cmd-anim-origin.on');
+
+    if (btnAnimOrigin) {
+      let origin = btnAnimOrigin.getAttribute('data-value');
+      activeElement.style.transformOrigin = origin;
+    }
+
     const btnDisableSmoothAnim = this.modalTimeline.querySelector('.cmd-disable-smoothanim');
 
     if (btnDisableSmoothAnim.classList.contains('on')) {
@@ -104645,13 +104710,26 @@ class ContentBox {
       wrapper.style.opacity = '0';
     }
 
-    if (!this.editor) {
+    let waitSlider = false;
+
+    if (this.settings.slider === 'glide' || this.settings.slider === 'all') {
+      if (typeof this.win.Glide !== 'undefined') {
+        if (new this.win.Glide().mount) ; else {
+          waitSlider = true; // console.log('not ready');
+        }
+      } else {
+        waitSlider = true; // console.log('not loaded');
+      }
+    }
+
+    if (!this.editor || waitSlider) {
       // Wait for the ContentBuilder init complete
       setTimeout(() => {
         this.loadHtml(html);
       }, 100);
       return;
-    } // Render html content
+    } // console.log((new this.win.Glide).mount);
+    // Render html content
 
 
     let range = document.createRange();