gridstack-8.x-2.5/js/admin/gridstack.admin.base.js

/**
 * @file
 * Provides GridStack admin base utilities.
 */

(function ($, Drupal, _, _db, window) {

  'use strict';

  var GRIDSTACK_DEFAULT_GRIDS = {
    x: 0,
    y: 0,
    width: 2,
    height: 2
  };

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

  /**
   * The GridStack admin base.
   */
  Drupal.gridstack.base = {
    config: {},
    options: {},
    // Beware to keep defaults, the library appears to hard-code it regardless
    // the options at some places like nested. Meaning customs are ignored.
    baseOptions: {
      itemClass: 'box',
      handle: '.box__content',
      alwaysShowResizeHandle: true,
      resizable: {
        handles: 'e, se, s, sw, w'
      },
      placeholderClass: 'gridstack__box--placeholder'
    },
    nestedOptions: {
      minWidth: 1,
      minHeight: 1,
      verticalMargin: 15,
      column: 12,
      disableOneColumnMode: true,
      // @todo bad acceptWidgets: '.is-box-nested',
      // @todo bad dragOut: true,
      isNested: true
    },

    getDefaultBox: function () {
      return GRIDSTACK_DEFAULT_GRIDS;
    },

    getModelId: function ($box) {
      $box = $box.length ? $box : $($box);
      if ($box.length) {
        // Nested boxes are not backbone model, looking for the box model ID.
        return $box.closest('.gridstack--nested').length ? $box.closest('.gridstack--nested').data('gsBid') : $box.data('gsBid');
      }
      return -1;
    },

    lastBoxIndex: 0,

    isValidNode: function (node) {
      return !_.isNull(node) && !_.isUndefined(node) && (!_.isUndefined(node.x) && !_.isUndefined(node.width));
    },

    node: function (node) {
      var me = this;
      var box = {};

      // @todo if (!me.isValidNode(node) && node.length) {
      // @todo   node = $(node).data('_gridstack_node');
      // @todo }
      if (me.isValidNode(node)) {
        box = {
          x: parseInt(node.x),
          y: parseInt(node.y),
          width: parseInt(node.width),
          height: parseInt(node.height)
        };

        if (!_.isEmpty(node.image_style)) {
          box.image_style = node.image_style;
        }
      }
      return box;
    },

    attributes: function (o) {
      o = o || {};

      var attributes = o;
      if (_.isUndefined(o.index)) {
        return attributes;
      }

      var index = o.index;
      attributes.id = index;

      if (!_.isUndefined(o.indexNested)) {
        var indexNested = o.indexNested;

        attributes.mid = attributes.id;
        attributes.mindex = index;

        attributes.id = index + '_' + indexNested;
        attributes.index = indexNested;
      }
      else {
        attributes.index = index;
      }

      return attributes;
    },

    updateBoxDimensions: function (box, node) {
      var $box = box.length ? box : $(box);

      node = node || $box.data('_gridstack_node');
      if (this.isValidNode(node)) {
        $box.attr('data-gs-dimension', node.width + 'x' + node.height);
      }
    },

    imageStyleOptions: function () {
      var img = $('#gridstack-image-style-template').html();
      var clone = $(img).clone().removeAttr('id');

      return clone[0].innerHTML;
    },

    oldData: function (el, isNested) {
      isNested = isNested === 'undefined' ? false : isNested;

      return el.data(isNested ? 'nestedGrids' : 'previewGrids') || [];
    },

    newData: function (el, isNested) {
      isNested = isNested === 'undefined' ? false : isNested;

      var me = this;
      var storage = el.data(isNested ? 'nestedStorage' : 'storage');
      var $storage = $('[data-drupal-selector="' + storage + '"]');
      var val = $storage.length ? $storage.val() : '';
      var newData = _.isEmpty(val) || val === '[]' ? '' : val;

      if (newData) {
        newData = _db.parse(newData) || [];
      }

      // Ensure data can be reverted since dataStored is changing on save.
      var data = newData || me.oldData(el, isNested) || [];

      // Might happen when all nodes are deleted, add one in the least on load.
      return data.length ? data : [GRIDSTACK_DEFAULT_GRIDS];
    }

  };

  /**
   * Theme function for a GridStack box.
   *
   * @param {Object} settings
   *   An object with the following keys: isNested, type.
   *
   * @return {HTMLElement}
   *   Returns a HTMLElement object.
   */
  Drupal.theme.gridStackBox = function (settings) {
    var type = settings.type || 'nested';
    var classes = 'gridstack__box box box--js grid-stack-item' + (type === 'nested' && settings.isNested ? ' box--nested is-box-nested' : '');
    var attributes = '';
    // @todo if (!_.isUndefined(settings.id)) {
    // @todo attributes += ' data-gs-bid="' + settings.id + '"';
    // @todo }
    var tpl = '';
    tpl += '<div class="' + classes + '"' + attributes + '>';
    tpl += Drupal.theme('gridStackContent', settings);
    tpl += '</div>';

    return tpl;
  };

  /**
   * Theme function for a GridStack box content.
   *
   * @param {Object} settings
   *   An object with the following keys: isNested, type.
   *
   * @return {HTMLElement}
   *   Returns a HTMLElement object.
   */
  Drupal.theme.gridStackContent = function (settings) {
    var type = settings.type || 'nested';
    var tpl = '';

    tpl += '<div class="box__content">';
    tpl += '<div class="btn-group btn-group--js">';
    tpl += '<button class="button btn btn--box btn--' + type + ' btn--remove" data-message="remove" data-type="' + type + '">&times;</button>';

    if (type === 'root') {
      if (settings.isNested) {
        tpl += '<button class="button btn btn--box btn--' + type + ' btn--add" data-message="add" data-type="' + type + '">+</button>';
      }
      else {
        tpl += '<select class="form-select form-select--image-style" data-imageid="" id="" />';
      }
    }

    tpl += '</div>';

    if (settings.isNested) {
      // @todo  adding grid-stack classes error el.gridstack.onResizeHandler();.
      tpl += '<div class="gridstack gridstack--ui gridstack--nested is-gs-enabled is-gs-layout"></div>';
    }

    tpl += '</div>';

    return tpl;
  };

})(jQuery, Drupal, _, dBlazy, this);