maintenance-1.0.0-beta1/js/maintenance-form.js

/**
 * @file
 * Defines JavaScript behaviors for the maintenance module.
 */

(function ($, window, Drupal, once) {
  "use strict";

  const breakpoint = 1024;
  const storageMobile = 'Drupal.maintenance.sidebarExpanded.mobile';
  const storageDesktop = 'Drupal.maintenance.sidebarExpanded.desktop';

  /**
   * Provide the summary information for the bootstrap settings vertical tabs.
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *   Attaches the behavior for the bootstrap settings summaries.
   */
  Drupal.behaviors.maintenanceSettingsSummary = {
    attach() {
      // The drupalSetSummary method required for this behavior is not available
      // on the maintenance settings page, so we need to make sure this
      // behavior is processed only if drupalSetSummary is defined.
      if (typeof $.fn.drupalSetSummary === 'undefined') {
        return;
      }

      // Get library type if existing.
      const library = $(once('check-edit-library', '#edit-library')).length > 0 ? $('#edit-library').val() : 'bootstrap';

      $(once('maintenance-request-ip', '[data-drupal-selector="edit-request-ip"]'),
      ).drupalSetSummary((context) => {
        const $ips = $(context).find(
          'textarea[name="ips"]',
        );
        if (!$ips.length || !$ips[0].value) {
          return Drupal.t('Not restricted');
        }

        return Drupal.t('Restricted to certain ips');
      });

      $(once('maintenance-request-path', '[data-drupal-selector="edit-request-path"]'),
      ).drupalSetSummary((context) => {
        const $pages = $(context).find(
          'textarea[name="routes"]',
        );
        if (!$pages.length || !$pages[0].value) {
          return Drupal.t('Not restricted');
        }

        return Drupal.t('Restricted to certain pages');
      });

      $(once('maintenance-request-string', '[data-drupal-selector="edit-request-string"]'),
      ).drupalSetSummary((context) => {
        const $queries = $(context).find(
          'input[name="queries"]',
        );
        if (!$queries.length || !$queries[0].value) {
          return Drupal.t('Not restricted');
        }

        return Drupal.t('Restricted to !string', { '!string': $queries[0].value });
      });
    },
  };

  Drupal.behaviors.maintenanceSidebar = {
    attach: function attach(context) {
      once('maintenanceHelpBlock', '.region-help .block-help', context).forEach(block => {
        const blockHelp = context.querySelector('.block-help');
        const newParent = context.querySelector('.region-help__items__inner');

        if (newParent && newParent.querySelectorAll('.block-help').length === 0) {
          newParent.appendChild(blockHelp);
        }
      });

      once('maintenanceForm', '#block-gin-content form.system-site-maintenance-mode', context).forEach(form => {
        const sticky = context.querySelector('.maintenance-sticky');
        const newParent = context.querySelector('.region-sticky__items__inner');

        if (newParent && newParent.querySelectorAll('.maintenance-sticky').length === 0) {
          newParent.appendChild(sticky);

          // Attach form elements to the main form
          const actionButtons = newParent.querySelectorAll('button, input, select, textarea');

          if (actionButtons.length > 0) {
            actionButtons.forEach((el) => {
              el.setAttribute('form', form.getAttribute('id'));
              el.setAttribute('id', el.getAttribute('id') + '--maintenance-mode');
            });
          }
        }
      });

      Drupal.maintenanceSidebar.init(context);
    },
  };

  Drupal.maintenanceSidebar = {
    init: function (context) {
      once('maintenanceSidebarInit', '#maintenance-sidebar', context).forEach(() => {

        // If a variable does not exist, create it,
        // default being to show sidebar.
        if (!localStorage.getItem(storageDesktop)) {
          localStorage.setItem(storageDesktop, 'true');
        }

        // Set mobile initial to false.
        if (window.innerWidth >= breakpoint) {
          if (localStorage.getItem(storageDesktop) === 'true') {
            this.showSidebar();
          }
          else {
            this.collapseSidebar();
          }
        }

        // Show navigation with shortcut:
        // OPTION + S (Mac) / ALT + S (Windows)
        document.addEventListener('keydown', e => {
          if (e.altKey === true && e.code === 'KeyS') {
            this.toggleSidebar();
          }
        });

        window.onresize = Drupal.debounce(this.handleResize, 150);
      });

      // Toolbar toggle
      once('maintenanceSidebarToggle', '.meta-sidebar__trigger', context).forEach(el => el.addEventListener('click', e => {
        e.preventDefault();
        this.removeInlineStyles();
        this.toggleSidebar();
      }));

      // Toolbar close
      once('maintenanceSidebarClose', '.meta-sidebar__close, .meta-sidebar__overlay', context).forEach(el => el.addEventListener('click', e => {
        e.preventDefault();
        this.removeInlineStyles();
        this.collapseSidebar();
      }));
    },

    toggleSidebar: () => {
      // Set active state.
      if (document.querySelector('.meta-sidebar__trigger').classList.contains('is-active')) {
        Drupal.maintenanceSidebar.collapseSidebar();
      }
      else {
        Drupal.maintenanceSidebar.showSidebar();
      }
    },

    showSidebar: () => {
      const chooseStorage = window.innerWidth < breakpoint ? storageMobile : storageDesktop;
      const showLabel = Drupal.t('Hide sidebar panel');
      const sidebarTrigger = document.querySelector('.meta-sidebar__trigger');

      sidebarTrigger.setAttribute('title', showLabel);
      sidebarTrigger.querySelector('span').innerHTML = showLabel;
      sidebarTrigger.setAttribute('aria-expanded', 'true');
      sidebarTrigger.classList.add('is-active');

      document.body.setAttribute('data-meta-sidebar', 'open');

      // Expose to localStorage.
      localStorage.setItem(chooseStorage, 'true');
    },

    collapseSidebar: () => {
      const chooseStorage = window.innerWidth < breakpoint ? storageMobile : storageDesktop;
      const hideLabel = Drupal.t('Show sidebar panel');
      const sidebarTrigger = document.querySelector('.meta-sidebar__trigger');

      sidebarTrigger.setAttribute('title', hideLabel);
      sidebarTrigger.querySelector('span').innerHTML = hideLabel;
      sidebarTrigger.setAttribute('aria-expanded', 'false');
      sidebarTrigger.classList.remove('is-active');

      document.body.setAttribute('data-meta-sidebar', 'closed');

      // Expose to localStorage.
      localStorage.setItem(chooseStorage, 'false');
    },

    handleResize: () => {
      Drupal.maintenanceSidebar.removeInlineStyles();

      // If small viewport, always collapse sidebar.
      if (window.innerWidth < breakpoint) {
        Drupal.maintenanceSidebar.collapseSidebar();
      } else {
        // If large viewport, show sidebar if it was open before.
        if (localStorage.getItem(storageDesktop) === 'true') {
          Drupal.maintenanceSidebar.showSidebar();
        } else {
          Drupal.maintenanceSidebar.collapseSidebar();
        }
      }
    },

    removeInlineStyles: () => {
      // Remove init styles.
      const elementToRemove = document.querySelector('.gin-sidebar-inline-styles');
      if (elementToRemove) {
        elementToRemove.parentNode.removeChild(elementToRemove);
      }
    },

  };
})(jQuery, window, Drupal, once);