Refactor component

GrapesJS · Aug 27, 2022 · f40352f · f40352f
1 parent 629c702
commit f40352f
Showing 1 changed file with 132 additions and 4 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
 import type grapesjs from 'grapesjs';
-import loadComponents from './components';
+// import loadComponents from './components';
 
 export type PluginOptions = {
   /**
@@ -112,10 +112,11 @@ const plugin: grapesjs.Plugin<PluginOptions> = (editor, opts = {}) => {
   const { block } = options;
   const id = options.id!;
   const label = options.label!;
+  const pfx = options.classPrefix!;
 
   // Create block
   if (block) {
-    editor.BlockManager.add(id, {
+    editor.Blocks.add(id, {
       media: `<svg viewBox="0 0 24 24">
         <path fill="currentColor" d="M12 20C16.4 20 20 16.4 20 12S16.4 4 12 4 4 7.6 4 12 7.6 20 12 20M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M17 11.5V13H11V7H12.5V11.5H17Z" />
       </svg>`,
@@ -125,7 +126,134 @@ const plugin: grapesjs.Plugin<PluginOptions> = (editor, opts = {}) => {
       content: { type: id },
       ...block
     });
-  }
+  };
+
+  const coundownScript = function(props: any) {
+    const startfrom: string = props.startfrom;
+    const endTxt: string = props.endText;
+    // @ts-ignore
+    const el: HTMLElement & { gjs_countdown_interval: NodeJS.Timer } = 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.gjs_countdown_interval;
+    oldInterval && clearInterval(oldInterval);
+
+    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.gjs_countdown_interval);
+        endTextEl.innerHTML = endTxt;
+        countdownEl.style.display = 'none';
+        endTextEl.style.display = '';
+      }
+    };
+
+    if (countDownDate) {
+      el.gjs_countdown_interval = setInterval(moveTimer, 1000);
+      endTextEl.style.display = 'none';
+      countdownEl.style.display = '';
+      moveTimer();
+    } else {
+      setTimer(0, 0, 0, 0);
+    }
+  };
+
+  // Create component
+  editor.Components.addType(id, {
+    model: {
+      defaults: {
+        startfrom: options.startTime,
+        endText: options.endText,
+        droppable: false,
+        script: coundownScript,
+        'script-props': ['startfrom', 'endText'],
+        traits: [{
+          label: 'Start',
+          name: 'startfrom',
+          changeProp: true,
+          type: options.dateInputType,
+        },{
+          label: 'End text',
+          name: 'endText',
+          changeProp: true,
+        }],
+        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>
+        `,
+      },
+    },
+    view: {
+      init() {
+        // this.listenTo(this.model, 'change:startfrom change:endText', this.updateScript);
+        const comps = this.model.get('components');
+
+        // // Add a basic countdown template if it's not yet initialized
+        // if (comps && !comps?.length) {
+        //   comps.reset();
+        //   comps.add(`
+        //     <span data-js="countdown" class="${pfx}-cont">
+        //       <div class="${pfx}-block">
+        //         <div data-js="countdown-day" class="${pfx}-digit"></div>
+        //         <div class="${pfx}-label">${c.labelDays}</div>
+        //       </div>
+        //       <div class="${pfx}-block">
+        //         <div data-js="countdown-hour" class="${pfx}-digit"></div>
+        //         <div class="${pfx}-label">${c.labelHours}</div>
+        //       </div>
+        //       <div class="${pfx}-block">
+        //         <div data-js="countdown-minute" class="${pfx}-digit"></div>
+        //         <div class="${pfx}-label">${c.labelMinutes}</div>
+        //       </div>
+        //       <div class="${pfx}-block">
+        //         <div data-js="countdown-second" class="${pfx}-digit"></div>
+        //         <div class="${pfx}-label">${c.labelSeconds}</div>
+        //       </div>
+        //     </span>
+        //     <span data-js="countdown-endtext" class="${pfx}-endtext"></span>
+        //   `);
+        // }
+
+      }
+    },
+  });
 
   /**
 const pfx = c.countdownClsPfx;
@@ -157,7 +285,7 @@ const pfx = c.countdownClsPfx;
    */
 
   // Add components
-  loadComponents(editor, options);
+  // loadComponents(editor, options);
 };
 
 export default plugin;