Update pages.html

pages.html

@@ -789,117 +789,78 @@ editor.Blocks.add('video-player-settings-block', {
 
 
 
+editor.Components.addType(id, {
+  model: {
+    defaults: {
+      startfrom: options.startTime,
+      classes: [pfx],
+      endText: options.endText,
+      blockId: '', // Добавьте поле для ID блока
+      droppable: false,
+      script: coundownScript,
+      'script-props': ['startfrom', 'endText', 'blockId'], // Добавьте blockId в скрипт-пропсы
+      traits: [{
+        label: 'Start',
+        name: 'startfrom',
+        changeProp: true,
+        type: options.dateInputType,
+      },{
+        label: 'End text',
+        name: 'endText',
+        changeProp: true,
+      },{
+        label: 'Block ID to Hide',
+        name: 'blockId',
+        changeProp: true,
+      }],
+      // @ts-ignore
+      components: `
+        <span data-js="countdown" class="${pfx}-cont">
+          <div class="${pfx}-block">
+            <div data-js="countdown-day" class="${pfx}-digit"></div>
+            <div class="${pfx}-label">${options.labelDays}</div>
+          </div>
+          <div class="${pfx}-block">
+            <div data-js="countdown-hour" class="${pfx}-digit"></div>
+            <div class="${pfx}-label">${options.labelHours}</div>
+          </div>
+          <div class="${pfx}-block">
+            <div data-js="countdown-minute" class="${pfx}-digit"></div>
+            <div class="${pfx}-label">${options.labelMinutes}</div>
+          </div>
+          <div class="${pfx}-block">
+            <div data-js="countdown-second" class="${pfx}-digit"></div>
+            <div class="${pfx}-label">${options.labelSeconds}</div>
+          </div>
+        </span>
+        <span data-js="countdown-endtext" class="${pfx}-endtext"></span>
+      `,
+      styles: (style || `
+        .${pfx} {
+          text-align: center;
+        }
 
+        .${pfx}-block {
+          display: inline-block;
+          margin: 0 10px;
+          padding: 10px;
+        }
 
+        .${pfx}-digit {
+          font-size: 5rem;
+        }
 
-editor.BlockManager.add('custom-countdown', {
-  label: 'Custom Countdown',
-  content: `
-    <style>
-    .countdown {
-      text-align: center;
-    }
-    .countdown-block {
-      display: inline-block;
-      margin: 0 10px;
-      padding: 10px;
-    }
-    .countdown-digit {
-      font-size: 5rem;
-    }
-    .countdown-endtext {
-      font-size: 5rem;
-    }
-    .countdown-cont {
-      display: inline-block;
-    }
-    </style>
-
-    <div id="ivtk" class="countdown">
-      <span data-js="countdown" class="countdown-cont">
-        <div class="countdown-block">
-          <div data-js="countdown-day" class="countdown-digit">00</div>
-          <div class="countdown-label">days</div>
-        </div>
-        <div class="countdown-block">
-          <div data-js="countdown-hour" class="countdown-digit">00</div>
-          <div class="countdown-label">hours</div>
-        </div>
-        <div class="countdown-block">
-          <div data-js="countdown-minute" class="countdown-digit">00</div>
-          <div class="countdown-label">minutes</div>
-        </div>
-        <div class="countdown-block">
-          <div data-js="countdown-second" class="countdown-digit">00</div>
-          <div class="countdown-label">seconds</div>
-        </div>
-      </span>
-      <span data-js="countdown-endtext" class="countdown-endtext"></span>
-    </div>
-  `,
-  attributes: {
-    class: 'fa fa-clock-o'
-  }
-});
-
-// Добавляем компонент custom-countdown
-editor.Components.addType('custom-countdown', {
-  model: {
-    defaults: {
-      traits: [
-        {
-          type: 'text', // Заменен тип 'date' на 'text'
-          name: 'startfrom',
-          label: 'End Date (YYYY-MM-DD)',
-          placeholder: 'YYYY-MM-DD', // Добавлено пояснение
-          changeProp: true
-        },
-        {
-          type: 'text',
-          name: 'blockId',
-          label: 'Block ID to Hide',
-          changeProp: true
+        .${pfx}-endtext {
+          font-size: 5rem;
         }
-      ],
-      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);
-      }
-    }
-  }
-});
 
-// Добавляем блок custom-countdown в редактор
-editor.BlockManager.add('custom-countdown', {
-  label: 'Custom Countdown',
-  content: {
-    type: 'custom-countdown',
-    startfrom: '',
-    blockId: ''
+        .${pfx}-cont {
+          display: inline-block;
+        }
+      `) + (options.styleAdditional),
+      ...props,
+    },
   },
-  attributes: {
-    class: 'fa fa-clock-o'
-  }
 });
 
 
@@ -931,7 +892,73 @@ editor.CssComposer.addRules(`
   }
 `);
 
+const coundownScript = function(props: Record<string, any>) {
+  const startfrom: string = props.startfrom;
+  const endTxt: string = props.endText;
+  const blockId: string = props.blockId; // Получите ID блока для скрытия
+  // @ts-ignore
+  const el: TElement = this;
+  const countDownDate = new Date(startfrom).getTime();
+  const countdownEl = el.querySelector('[data-js=countdown]') as HTMLElement;
+  const endTextEl = el.querySelector('[data-js=countdown-endtext]') as HTMLElement;
+  const dayEl = el.querySelector('[data-js=countdown-day]')!;
+  const hourEl = el.querySelector('[data-js=countdown-hour]')!;
+  const minuteEl = el.querySelector('[data-js=countdown-minute]')!;
+  const secondEl = el.querySelector('[data-js=countdown-second]')!;
+  const oldInterval = el.__gjsCountdownInterval;
+  oldInterval && clearInterval(oldInterval);
+
+  const connected: TElement[] = window.__gjsCountdownIntervals || [];
+  const toClean: TElement[] = [];
+  connected.forEach((item: TElement) => {
+    if (!item.isConnected) {
+      clearInterval(item.__gjsCountdownInterval);
+      toClean.push(item);
+    }
+  });
+  connected.indexOf(el) < 0 && connected.push(el);
+  window.__gjsCountdownIntervals = connected.filter(item => toClean.indexOf(item) < 0);
+
+  const setTimer = function (days: number, hours: number, minutes: number, seconds: number) {
+    dayEl.innerHTML = `${days < 10 ? '0' + days : days}`;
+    hourEl.innerHTML = `${hours < 10 ? '0' + hours : hours}`;
+    minuteEl.innerHTML = `${minutes < 10 ? '0' + minutes : minutes}`;
+    secondEl.innerHTML = `${seconds < 10 ? '0' + seconds : seconds}`;
+  }
 
+  const moveTimer = function() {
+    const now = new Date().getTime();
+    const distance = countDownDate - now;
+    const days = Math.floor(distance / 86400000);
+    const hours = Math.floor((distance % 86400000) / 3600000);
+    const minutes = Math.floor((distance % 3600000) / 60000);
+    const seconds = Math.floor((distance % 60000) / 1000);
+
+    setTimer(days, hours, minutes, seconds);
+
+    if (distance < 0) {
+      clearInterval(el.__gjsCountdownInterval);
+      endTextEl.innerHTML = endTxt;
+      countdownEl.style.display = 'none';
+      endTextEl.style.display = '';
+      if (blockId) {
+        const blockToHide = document.getElementById(blockId);
+        if (blockToHide) {
+          blockToHide.style.display = 'none';
+        }
+      }
+    }
+  };
+
+  if (countDownDate) {
+    el.__gjsCountdownInterval = setInterval(moveTimer, 1000);
+    endTextEl.style.display = 'none';
+    countdownEl.style.display = '';
+    moveTimer();
+  } else {
+    setTimer(0, 0, 0, 0);
+  }
+};
 
 
 </script>