gridstack-8.x-2.5/js/admin/gridstack.admin.backbone.view.js

/**
 * @file
 * Provides GridStack admin UI utilities using backbone.
 */

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

  'use strict';

  Drupal.gridstack = Drupal.gridstack || {};
  _.each(['base', 'models', 'views'], function (key) {
    Drupal.gridstack[key] = Drupal.gridstack[key] || {};
  });

  /**
   * The GridStack box item View.
   */
  Drupal.gridstack.views.Box = Backbone.View.extend({
    model: Drupal.gridstack.models.Box,
    // @todo template: _.template(Drupal.theme('gridStackBox')),
    className: 'gridstack__box box box--root grid-stack-item',
    tagName: 'div',
    attributes: {},

    events: {
      change: 'render'
    },

    initialize: function () {
      var me = this;
      me.listenTo(me.model, 'change', me.render);
    },

    render: function () {
      var me = this;
      var box = me.model;
      var data = _.extend(box.attributes, box.changedAttributes());
      var $box = me.$el;

      // ALternatively move it into template.
      // me.$el.html(me.template(me.model.attributes));
      me.isNested = box.collection && box.collection.length ? box.collection._isNested : false;

      if (!$('> .box__content', $box).length) {
        $box.append(Drupal.theme('gridStackContent', {
          isNested: me.isNested,
          type: 'root'
        }));
      }

      _.each(['id', 'index'], function (key) {
        if (!_.isUndefined(data[key])) {
          var id = key === 'id' ? 'bid' : key;
          $box.attr('data-gs-' + id, data[key]);
        }
      });

      // No need to re-do GridStack engine here on.
      if (!_.isNull(data.image_style) && !_.isUndefined(data.image_style)) {
        $box.attr('data-image-style', data.image_style);
      }

      $('.btn', $box).attr('data-gs-bid', data.id);

      // Nested boxes are not models, provides context to its model via box ID.
      if ($('.gridstack--nested', $box).length) {
        $('.gridstack--nested', $box).attr('data-gs-bid', data.id);
      }

      Drupal.gridstack.base.updateBoxDimensions($box, data);
      me.trigger('gridstack:view:render');
      return me;
    }
  });

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