Render Component with JavaScript.

2023-06-21 21:45:34 +03:00
parent 378038b244
commit 98d0720bc0
14 changed files with 10364 additions and 128 deletions
@@ -4,9 +4,7 @@

 <body class="{{#if iframeMode}}body--iframe{{/if}}">

-<main>
-  {{> (include_block_template) }}
-</main>
+<div id="hbs-container"></div>

 {{> (include_partial "layouts/partials/scripts") }}

@@ -4,11 +4,9 @@

 <body class="{{#if iframeMode}}body--iframe{{/if}}">

-<main>
-  <div class="container">
-    {{> (include_block_template) }}
-  </div>
-</main>
+<div class="container">
+  <div id="hbs-container"></div>
+</div>

 {{> (include_partial "layouts/partials/scripts") }}

@@ -1,3 +1,5 @@
+<script src="/socket.io/socket.io.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
 <script src="/scripts/dist/frame-index.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 <script src="https://unpkg.com/swiper@8.4.5/swiper-bundle.min.js"></script>{{#if config.jsUrl }}
@@ -1 +1,157 @@
-window.initBlock=function(e="",n="",o){document.querySelectorAll(n).forEach((e=>o(e)))},function(){let e;function n(n){const o=document.querySelector("body > main").scrollHeight;if(e===o)return;e=o,window.parent.postMessage("resize:"+JSON.stringify({height:e}),"*")}n(),new ResizeObserver(n).observe(document.body)}();
+window.initBlock = initBlock;
+
+let template;
+let data = {};
+let reload;
+
+// Blocks Initialization.
+function initBlock(blockName = '', selector = '', cb) {
+  reload = function () {
+    document.querySelectorAll(selector).forEach((el) => cb(el));
+  };
+
+  reload();
+}
+
+// Scrollbars / Frame resizes notifications.
+(function () {
+  let height;
+
+  handleHeightChange(); // Initial frame's height setup.
+  setupResizeListener(); // Listen to frame's height changes.
+
+  ///
+
+  function setupResizeListener() {
+    const resizeObserver = new ResizeObserver(handleHeightChange);
+    resizeObserver.observe(document.body);
+  }
+
+  function handleHeightChange() {
+    const updatedHeight = getCurrentHeight();
+
+    if (height === updatedHeight) {
+      return;
+    }
+
+    const RESIZE_CODE = 'resize:';
+    height = updatedHeight;
+    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');
+  }
+
+  function getCurrentHeight() {
+    return document.querySelector('#hbs-container').scrollHeight;
+  }
+})();
+
+// Data Updates Listeners.
+(function () {
+  loadDataOptions();
+  listenToDataOptionsUpdates();
+
+  function listenToDataOptionsUpdates() {
+    window.addEventListener('message', function (event) {
+      const message = event.data;
+      const prefix = 'dataUpdate:';
+
+      if (typeof message !== "string" || !message.startsWith(prefix)) {
+        return;
+      }
+
+      try {
+        data = JSON.parse(message.substring(prefix.length));
+        updateBlock({data});
+      } catch (e) {
+        console.log('Error parsing incoming data.', e);
+      }
+    });
+  }
+
+  function getQueryParams() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const params = {};
+
+    for (const [key, value] of urlParams) {
+      params[key] = value;
+    }
+
+    return params;
+  }
+
+  function loadDataOptions() {
+    const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});
+    fetch(`/data?${queryParameters}`)
+      .then((response) => response.json())
+      .then((response) => {
+        data = response.data; // Update state.
+        updateBlock({data});
+      });
+  }
+})();
+
+// Listen to Template updates.
+(function () {
+  initSocket();
+
+  function initSocket() {
+    const socket = window.io.connect();
+
+    socket.on('error', function (err) {
+      console.log(err);
+    });
+
+    // socket.on('connect', function () {
+    //   console.log('user connected', socket.id)
+    // });
+
+    socket.on('templateUpdate', function (args) {
+      updateBlock({template: args.template});
+    });
+  }
+})();
+
+function updateBlock(args = {}) {
+  if (args.template) {
+    template = args.template; // Update state.
+  }
+
+  if (args.data) {
+    data = args.data; // Update state.
+  }
+
+  if (!template) {
+    return;
+  }
+
+  renderBlock(template, data || {}, document.getElementById("hbs-container"));
+}
+
+function renderBlock(templateHbs, jsonData, target) {
+  const template = Handlebars.compile(templateHbs);
+
+  /**
+   * Handlebars Helpers
+   */
+  Handlebars.registerHelper('esc_attr', function (attr) {
+    return attr;
+  });
+
+  Handlebars.registerHelper('esc_url', function (attr) {
+    return attr;
+  });
+
+  Handlebars.registerHelper('esc_html', function (attr) {
+    return attr;
+  });
+
+  Handlebars.registerHelper('base_url', function () {
+    return '/';
+  });
+
+  target.innerHTML = template(jsonData);
+
+  if (reload) {
+    reload();
+  }
+}
+//# sourceMappingURL=frame-index.min.js.map
@@ -2,9 +2,17 @@

 window.initBlock = initBlock;

+let template;
+let data = {};
+let reload;
+
 // Blocks Initialization.
 function initBlock(blockName = '', selector = '', cb) {
-  document.querySelectorAll(selector).forEach((el) => cb(el));
+  reload = function () {
+    document.querySelectorAll(selector).forEach((el) => cb(el));
+  }
+
+  reload();
 }

 // Scrollbars / Frame resizes notifications.
@@ -22,7 +30,7 @@ function initBlock(blockName = '', selector = '', cb) {
    resizeObserver.observe(document.body);
  }

-  function handleHeightChange(entries) {
+  function handleHeightChange() {
    const updatedHeight = getCurrentHeight();

    if (debug) {
@@ -43,6 +51,117 @@ function initBlock(blockName = '', selector = '', cb) {
  }

  function getCurrentHeight() {
-    return document.querySelector('body > main').scrollHeight;
+    return document.querySelector('#hbs-container').scrollHeight;
  }
 })();
+
+// Data Updates Listeners.
+(function () {
+  loadDataOptions();
+  listenToDataOptionsUpdates();
+
+  function listenToDataOptionsUpdates() {
+    window.addEventListener('message', function (event) {
+      const message = event.data;
+      const prefix = 'dataUpdate:';
+
+      if (typeof message !== "string" || !message.startsWith(prefix)) {
+        return;
+      }
+
+      try {
+        data = JSON.parse(message.substring(prefix.length));
+        updateBlock({data});
+      } catch (e) {
+        console.log('Error parsing incoming data.', e);
+      }
+    });
+  }
+
+  function getQueryParams() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const params = {};
+
+    for (const [key, value] of urlParams) {
+      params[key] = value;
+    }
+
+    return params;
+  }
+
+  function loadDataOptions() {
+    const queryParameters = new URLSearchParams({name: getQueryParams().data || 'default'});
+    fetch(`/data?${queryParameters}`)
+      .then((response) => response.json())
+      .then((response) => {
+        data = response.data; // Update state.
+        updateBlock({data});
+      })
+  }
+})();
+
+// Listen to Template updates.
+(function () {
+  initSocket();
+
+  function initSocket() {
+    const socket = window.io.connect();
+
+    socket.on('error', function (err) {
+      console.log(err);
+    });
+
+    // socket.on('connect', function () {
+    //   console.log('user connected', socket.id)
+    // });
+
+    socket.on('templateUpdate', function (args) {
+      updateBlock({template: args.template});
+    });
+  }
+})();
+
+function updateBlock(args = {}) {
+  if (args.template) {
+    template = args.template; // Update state.
+  }
+
+  if (args.data) {
+    data = args.data; // Update state.
+  }
+
+  if (!template) {
+    return;
+  }
+
+  renderBlock(template, data || {}, document.getElementById("hbs-container"));
+}
+
+function renderBlock(templateHbs, jsonData, target) {
+  const template = Handlebars.compile(templateHbs);
+
+  /**
+   * Handlebars Helpers
+   */
+  Handlebars.registerHelper('esc_attr', function (attr) {
+    return attr;
+  });
+
+  Handlebars.registerHelper('esc_url', function (attr) {
+    return attr;
+  });
+
+  Handlebars.registerHelper('esc_html', function (attr) {
+    return attr;
+  });
+
+  Handlebars.registerHelper('base_url', function () {
+    return '/';
+  });
+
+  target.innerHTML = template(jsonData);
+
+  if (reload) {
+    reload();
+  }
+}
@@ -20,8 +20,7 @@ function DataOptions(props = {}) {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  useEffect(async () => {
-    const data = await fetchDataOptions(state.dataName);
-    updateState(data);
+    await syncDataOptions(state.dataName);
  }, []);

  const handleCloseSidebarEscEvent = useCallback((e) => {
@@ -98,15 +97,7 @@ function DataOptions(props = {}) {

  async function changeDataOption(e) {
    const dataName = e.target.value;
-
-    const previewFrameUrl = new URL(window.devTool.previewFrameUrl);
-    previewFrameUrl.searchParams.set('data', dataName);
-    previewFrameUrl.searchParams.set('iframe', 'true');
-
-    props.rootAttributes.previewFrame.src = previewFrameUrl.href;
-
-    const dataOption = await fetchDataOptions(dataName);
-    updateState(Object.assign({}, dataOption, {dataName}));
+    await syncDataOptions(dataName);
  }

  async function fetchDataOptions(name = 'default') {
@@ -138,6 +129,19 @@ function DataOptions(props = {}) {

    setPreviewOption(getDesignPreviewImage(state.dataName, state.designPreview));
  }
+
+  async function syncDataOptions(dataName) {
+    const dataOptions = await fetchDataOptions(dataName);
+    updateIframe(dataOptions);
+
+    const newState = Object.assign({}, dataOptions, {dataName});
+    updateState(newState);
+  }
+
+  function updateIframe(dataOptions) {
+    const previewIframe = props.rootAttributes.previewFrame;
+    previewIframe.contentWindow.postMessage('dataUpdate:' + JSON.stringify(dataOptions.data || {}), '*');
+  }
 }

 function copyToClipboard(e, context) {
@@ -4,11 +4,11 @@

 <body class="{{#if iframeMode}}body--iframe{{/if}}">

-<main>
+<div>
  <section class="fullscreen_layout"></section>
-  {{> (include_block_template) }}
+  <div id="hbs-container"></div>
  <section class="fullscreen_layout"></section>
-</main>
+</div>

 {{> (include_partial "layouts/partials/scripts") }}