block-dev-tool/layouts/scripts/frame/frame.js

'use strict';

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;
  const debug = false;

  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 (debug) {
      console.log('Height Updates', 'Old vs New: ' + height, updatedHeight);
    }

    if (height === updatedHeight) {
      return;
    }

    const RESIZE_CODE = 'resize:';
    height = updatedHeight;
    window.parent.postMessage(RESIZE_CODE + JSON.stringify({height}), '*');

    if (debug) {
      console.log('Resize message sent: ', 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 '/';
  });

  let html;

  try {
    html = template(jsonData);
  } catch (e) {
    html = `<div style="max-width: 1280px; margin: 1rem auto;">
      <h1 style="all: unset; font-size: 1.5rem; font-weight: bold; display: block;">Syntax Error:</h1>
      <pre style="all: unset; padding: 10px 15px; background-color: #ffe6e6; border: 1px solid red; border-radius: 0.25rem; overflow: auto; display: block; white-space: pre;">${e.toString()}</pre>
    </div>`;
  }

  target.innerHTML = html;
  if (reload) {
    reload();
  }
}