gin_lp-1.0.x-dev/js/gin_lp_preview_regions.js

/* eslint-disable no-bitwise, no-nested-ternary, no-mutable-exports, comma-dangle, strict */

'use strict';

(($, Drupal, drupalSettings) => {

  Drupal.behaviors.glp_preview_regions = {
    attach: (context) => {
      if (document.getElementById('layout-builder-content-preview') === null) {
        return;
      }
      once('glp-preview-region', 'body').forEach(()=>{
        const toolbarPreviewRegion = document.getElementById('glp-toolbar-preview-regions');
        const toolbarPreviewContent = document.getElementById('glp-toolbar-preview-content');
        const formPreviewContent = document.getElementById('layout-builder-content-preview');
        const body = document.getElementsByTagName('body')[0];
        const contentPreviewId = formPreviewContent.dataset.contentPreviewId;
        const isContentPreview= JSON.parse(localStorage.getItem(contentPreviewId)) !== false;
        toolbarPreviewContent.checked = formPreviewContent.checked;
        toolbarPreviewRegion.checked = body.classList.contains('glp-preview-regions--enable');

        toolbarPreviewRegion.addEventListener('change',()=>{
          if(toolbarPreviewRegion.checked){
            document.querySelector('.layout__region-info').parentNode.classList.add('layout-builder__region');
            document.querySelector('body').classList.add('glp-preview-regions--enable');
          } else {
            body.classList.remove('glp-preview-regions--enable')
          }
        })
        toolbarPreviewContent.addEventListener('change',()=>{
          if (formPreviewContent.checked !== toolbarPreviewContent.checked) {
            formPreviewContent.click();
          }
        })
        formPreviewContent.addEventListener('change',()=>{
          if (formPreviewContent.checked !== toolbarPreviewContent.checked) {
            toolbarPreviewContent.click();
          }
        })

        // Initial state.
        // By default, the checkbox is checked, and it is JS that is unchecking
        // it.
        if (!isContentPreview) {
          toolbarPreviewContent.click();
        }
      });

    }
  };

})(jQuery, Drupal, drupalSettings);