[Summary view] [Print] [Text view]

   1  /**
   2   * @copyright  (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
   3   * @license    GNU General Public License version 2 or later; see LICENSE.txt
   4   */
   5  
   6  /**
   7   * Debounce
   8   * https://gist.github.com/nmsdvid/8807205
   9   *
  10   * @param { function } callback  The callback function to be executed
  11   * @param { int }  time      The time to wait before firing the callback
  12   * @param { int }  interval  The interval
  13   */
  14  // eslint-disable-next-line no-param-reassign, no-return-assign, default-param-last
  15  const debounce = (callback, time = 250, interval) => (...args) => clearTimeout(interval, interval = setTimeout(callback, time, ...args));
  16  
  17  ((window, document, Joomla) => {
  18    Joomla.unpublishModule = element => {
  19      // Get variables
  20      const baseUrl = 'index.php?option=com_modules&task=modules.unpublish&format=json';
  21      const id = element.getAttribute('data-module-id');
  22      Joomla.request({
  23        url: `$baseUrl}&cid=$id}`,
  24        method: 'POST',
  25        headers: {
  26          'Content-Type': 'application/json'
  27        },
  28        onSuccess: () => {
  29          const wrapper = element.closest('.module-wrapper');
  30          wrapper.parentNode.removeChild(wrapper);
  31          Joomla.renderMessages({
  32            message: [Joomla.Text._('COM_CPANEL_UNPUBLISH_MODULE_SUCCESS')]
  33          });
  34        },
  35        onError: () => {
  36          Joomla.renderMessages({
  37            error: [Joomla.Text._('COM_CPANEL_UNPUBLISH_MODULE_ERROR')]
  38          });
  39        }
  40      });
  41    };
  42  
  43    const onBoot = () => {
  44      const cpanelModules = document.getElementById('content');
  45  
  46      if (cpanelModules) {
  47        const links = [].slice.call(cpanelModules.querySelectorAll('.unpublish-module'));
  48        links.forEach(link => {
  49          link.addEventListener('click', ({
  50            target
  51          }) => Joomla.unpublishModule(target));
  52        });
  53      } // Cleanup
  54  
  55  
  56      document.removeEventListener('DOMContentLoaded', onBoot);
  57    }; // Initialise
  58  
  59  
  60    document.addEventListener('DOMContentLoaded', onBoot); // Masonry layout for cpanel cards
  61  
  62    const MasonryLayout = {
  63      $gridBox: null,
  64      gridAutoRows: 0,
  65      gridRowGap: 10,
  66  
  67      // Calculate "grid-row-end" property
  68      resizeGridItem($cell, rowHeight, rowGap) {
  69        const $content = $cell.querySelector('.card');
  70  
  71        if ($content) {
  72          const contentHeight = $content.getBoundingClientRect().height + rowGap;
  73          const rowSpan = Math.ceil(contentHeight / (rowHeight + rowGap));
  74          $cell.style.gridRowEnd = `span $rowSpan}`;
  75        }
  76      },
  77  
  78      // Check a size of every cell in the grid
  79      resizeAllGridItems() {
  80        const $gridCells = [].slice.call(this.$gridBox.children);
  81        $gridCells.forEach($cell => {
  82          this.resizeGridItem($cell, this.gridAutoRows, this.gridRowGap);
  83        });
  84      },
  85  
  86      initialise() {
  87        this.$gridBox = document.querySelector('#cpanel-modules .card-columns');
  88        const gridStyle = window.getComputedStyle(this.$gridBox);
  89        this.gridAutoRows = parseInt(gridStyle.getPropertyValue('grid-auto-rows'), 10) || this.gridAutoRows;
  90        this.gridRowGap = parseInt(gridStyle.getPropertyValue('grid-row-gap'), 10) || this.gridRowGap;
  91        this.resizeAllGridItems(); // Recheck the layout after all content (fonts and images) is loaded.
  92  
  93        window.addEventListener('load', () => this.resizeAllGridItems()); // Recheck the layout when the menu is toggled
  94  
  95        window.addEventListener('joomla:menu-toggle', () => {
  96          // 300ms is animation time, need to wait for the animation to end
  97          setTimeout(() => this.resizeAllGridItems(), 330);
  98        }); // Watch on window resize
  99  
 100        window.addEventListener('resize', debounce(() => this.resizeAllGridItems(), 50));
 101      }
 102  
 103    }; // Initialise Masonry layout at the very beginning, to avoid jumping.
 104    // We can do this because the script is deferred.
 105  
 106    MasonryLayout.initialise();
 107  })(window, document, window.Joomla);