gridstack-8.x-2.5/js/gridstack.native.js

/**
 * @file
 * Provides utilities for native browser CSS Grid layout.
 */

(function (Drupal, _, _db) {

  'use strict';

  Drupal.gridstack = Drupal.gridstack || {};

  /**
   * Intersection Observer API public methods for Drupal blocks.
   *
   * @namespace
   */
  Drupal.gridstack.native = _db.extend({}, Drupal.gridstack.fe || {}, {
    fixAspectRatio: function () {
      var me = this;
      var ok = me.cellHeight >= me.options.cellHeight && me.cellHeight < (me.options.cellHeight * 2);

      if (me.isEnabled()) {
        me.cellHeight = ok ? me.cellHeight : me.options.cellHeight;
        me.$el.style.gridAutoRows = me.cellHeight + 'px';
      }
    },

    postUpdateGrid: function () {
      var me = this;

      if (me.isEnabled()) {
        me.$el.style.gap = me.options.verticalMargin > 0 ? me.options.verticalMargin / 2 : 0;

        // As usual, IE is always a PITA. Give em some love.
        var fr = [];
        _.each(_.range(0, me.column, 1), function () {
          fr.push(['1fr']);
        });

        // -ms-grid-columns: 1fr 1fr 1fr 1fr;
        // grid-template-columns: repeat(4, 1fr);
        me.$el.style.msGridColumns = fr.join(' ');
        me.$el.style.gridTemplateColumns = 'repeat(' + me.column + ', 1fr)';
      }

      if (!_.isNull(me.$sizer) && !_.isNull(me.$sizer.parentNode)) {
        me.$sizer.parentNode.removeChild(me.$sizer);
      }
    },

    updateAttribute: function (box, item) {
      box.setAttribute('data-gs-width', item[2]);
      box.setAttribute('data-gs-height', item[3]);
    }

  });

  /**
   * GridStack utility functions.
   *
   * @param {HTMLElement} elm
   *   The GridStack HTML element.
   */
  function doGridStackNative(elm) {
    var me = Drupal.gridstack.native;

    me.init(elm);
    me.buildOut();
    me.cleanUp();
    elm.classList.add('gridstack--native--on');
  }

  /**
   * Attaches behavior to HTML element identified by .gridstack--native.
   *
   * @type {Drupal~behavior}
   */
  Drupal.behaviors.gridStackNative = {
    attach: function (context) {
      if ('length' in context) {
        context = context[0];
      }

      var elms = context.querySelectorAll('.gridstack--native:not(.gridstack--native--on)');
      if (elms.length > 0) {
        _db.once(_db.forEach(elms, doGridStackNative, context));
      }
    }
  };

})(Drupal, _, dBlazy);