Update pages.html

pages.html

@@ -836,41 +836,9 @@ editor.BlockManager.add('custom-countdown', {
       </span>
       <span data-js="countdown-endtext" class="countdown-endtext"></span>
     </div>
-    <input type="text" id="blockIdInput" placeholder="Enter block ID to hide">
   `,
   attributes: {
     class: 'fa fa-clock-o'
-  },
-  script: function() {
-    const blockIdInput = document.getElementById('blockIdInput');
-    const props = {
-      "ivtk": {
-        "startfrom": "",
-        "endText": "EXPIRED",
-        "blockId": blockIdInput ? blockIdInput.value : "" // ID блока, который нужно закрыть
-      }
-    };
-
-    const ids = Object.keys(props).map(id => `#${id}`).join(',');
-    const els = document.querySelectorAll(ids);
-
-    for (let i = 0, len = els.length; i < len; i++) {
-      const el = els[i];
-      (function(n) {
-        const t = n.startfrom, e = n.endText, blockId = n.blockId, o = this, a = new Date(t).getTime(), c = o.querySelector('[data-js=countdown]'), d = o.querySelector('[data-js=countdown-endtext]'), s = o.querySelector('[data-js=countdown-day]'), l = o.querySelector('[data-js=countdown-hour]'), i = o.querySelector('[data-js=countdown-minute]'), r = o.querySelector('[data-js=countdown-second]'), u = o.__gjsCountdownInterval;
-        u && clearInterval(u);
-        const p = window.__gjsCountdownIntervals || [], v = [];
-        p.forEach(n => n.isConnected || (clearInterval(n.__gjsCountdownInterval), v.push(n))), p.indexOf(o) < 0 && p.push(o), window.__gjsCountdownIntervals = p.filter(n => v.indexOf(n) < 0);
-        const y = (n, t, e, o) => {
-          s.innerHTML = `${n < 10 ? '0' + n : n}`, l.innerHTML = `${t < 10 ? '0' + t : t}`, i.innerHTML = `${e < 10 ? '0' + e : e}`, r.innerHTML = `${o < 10 ? '0' + o : o}`;
-        };
-        const f = () => {
-          const n = (new Date).getTime(), t = a - n, s = Math.floor(t / 864e5), l = Math.floor(t % 864e5 / 36e5), i = Math.floor(t % 36e5 / 6e4), r = Math.floor(t % 6e4 / 1e3);
-          y(s, l, i, r), t < 0 && (clearInterval(o.__gjsCountdownInterval), d.innerHTML = e, c.style.display = 'none', d.style.display = '', blockId && (document.getElementById(blockId).style.display = 'none'));
-        };
-        a ? (o.__gjsCountdownInterval = setInterval(f, 1e3), d.style.display = 'none', c.style.display = '', f()) : y(0, 0, 0, 0);
-      }).bind(el)(props[el.id]);
-    }
   }
 });
 
@@ -900,6 +868,52 @@ editor.CssComposer.addRules(`
 `);
 
 
+ editor.Components.addType('custom-countdown', {
+  model: {
+    defaults: {
+      traits: [
+        {
+          type: 'date',
+          name: 'startfrom',
+          label: 'End Date',
+          changeProp: true
+        },
+        {
+          type: 'text',
+          name: 'blockId',
+          label: 'Block ID to Hide',
+          changeProp: true
+        }
+      ],
+      script: function() {
+        const startfrom = this.get('startfrom');
+        const blockId = this.get('blockId');
+        const o = this.view.el;
+        const a = new Date(startfrom).getTime();
+        const c = o.querySelector('[data-js=countdown]');
+        const d = o.querySelector('[data-js=countdown-endtext]');
+        const s = o.querySelector('[data-js=countdown-day]');
+        const l = o.querySelector('[data-js=countdown-hour]');
+        const i = o.querySelector('[data-js=countdown-minute]');
+        const r = o.querySelector('[data-js=countdown-second]');
+        const u = o.__gjsCountdownInterval;
+
+        u && clearInterval(u);
+        const p = window.__gjsCountdownIntervals || [], v = [];
+        p.forEach(n => n.isConnected || (clearInterval(n.__gjsCountdownInterval), v.push(n))), p.indexOf(o) < 0 && p.push(o), window.__gjsCountdownIntervals = p.filter(n => v.indexOf(n) < 0);
+        const y = (n, t, e, o) => {
+          s.innerHTML = `${n < 10 ? '0' + n : n}`, l.innerHTML = `${t < 10 ? '0' + t : t}`, i.innerHTML = `${e < 10 ? '0' + e : e}`, r.innerHTML = `${o < 10 ? '0' + o : o}`;
+        };
+        const f = () => {
+          const n = (new Date).getTime(), t = a - n, s = Math.floor(t / 864e5), l = Math.floor(t % 864e5 / 36e5), i = Math.floor(t % 36e5 / 6e4), r = Math.floor(t % 6e4 / 1e3);
+          y(s, l, i, r), t < 0 && (clearInterval(o.__gjsCountdownInterval), d.innerHTML = 'EXPIRED', c.style.display = 'none', d.style.display = '', blockId && (document.getElementById(blockId).style.display = 'none'));
+        };
+        a ? (o.__gjsCountdownInterval = setInterval(f, 1e3), d.style.display = 'none', c.style.display = '', f()) : y(0, 0, 0, 0);
+      }
+    }
+  }
+}); 
+
 </script>
 
 <script>