pandorafms/pandora_console/include/javascript/gridstack.js

/**
 * gridstack.js 1.2.1
 * https://gridstackjs.com/
 * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
 * gridstack.js may be freely distributed under the MIT license.
 * @preserve
 */
(function(factory) {
  if (typeof define === "function" && define.amd) {
    define(["jquery", "exports"], factory);
  } else if (typeof exports !== "undefined") {
    var jQueryModule;

    try {
      jQueryModule = require("jquery");
    } catch (e) {}

    factory(jQueryModule || window.jQuery, exports);
  } else {
    factory(window.jQuery, window);
  }
})(function($, scope) {
  // checks for obsolete method names
  var obsolete = function(f, oldName, newName, rev) {
    var wrapper = function() {
      console.warn(
        "gridstack.js: Function `" +
          oldName +
          "` is deprecated in " +
          rev +
          " and has been replaced " +
          "with `" +
          newName +
          "`. It will be **completely** removed in v1.0"
      );
      return f.apply(this, arguments);
    };
    wrapper.prototype = f.prototype;

    return wrapper;
  };

  // checks for obsolete grid options (can be used for any fields, but msg is about options)
  var obsoleteOpts = function(opts, oldName, newName, rev) {
    if (opts[oldName] !== undefined) {
      opts[newName] = opts[oldName];
      console.warn(
        "gridstack.js: Option `" +
          oldName +
          "` is deprecated in " +
          rev +
          " and has been replaced with `" +
          newName +
          "`. It will be **completely** removed in v1.0"
      );
    }
  };

  // checks for obsolete grid options which are gone
  var obsoleteOptsDel = function(opts, oldName, rev, info) {
    if (opts[oldName] !== undefined) {
      console.warn(
        "gridstack.js: Option `" + oldName + "` is deprecated in " + rev + info
      );
    }
  };

  // checks for obsolete Jquery element attributes
  var obsoleteAttr = function(el, oldName, newName, rev) {
    var oldAttr = el.attr(oldName);
    if (oldAttr !== undefined) {
      el.attr(newName, oldAttr);
      console.warn(
        "gridstack.js: attribute `" +
          oldName +
          "`=" +
          oldAttr +
          " is deprecated on this object in " +
          rev +
          " and has been replaced with `" +
          newName +
          "`. It will be **completely** removed in v1.0"
      );
    }
  };

  var Utils = {
    isIntercepted: function(a, b) {
      return !(
        a.x + a.width <= b.x ||
        b.x + b.width <= a.x ||
        a.y + a.height <= b.y ||
        b.y + b.height <= a.y
      );
    },

    sort: function(nodes, dir, column) {
      if (!column) {
        var widths = nodes.map(function(node) {
          return node.x + node.width;
        });
        column = Math.max.apply(Math, widths);
      }

      if (dir === -1)
        return Utils.sortBy(nodes, function(n) {
          return -(n.x + n.y * column);
        });
      else
        return Utils.sortBy(nodes, function(n) {
          return n.x + n.y * column;
        });
    },

    createStylesheet: function(id, parent) {
      var style = document.createElement("style");
      style.setAttribute("type", "text/css");
      style.setAttribute("data-gs-style-id", id);
      if (style.styleSheet) {
        style.styleSheet.cssText = "";
      } else {
        style.appendChild(document.createTextNode(""));
      }
      if (!parent) {
        parent = document.getElementsByTagName("head")[0];
      } // default to head
      parent.insertBefore(style, parent.firstChild);
      return style.sheet;
    },

    removeStylesheet: function(id) {
      $("STYLE[data-gs-style-id=" + id + "]").remove();
    },

    insertCSSRule: function(sheet, selector, rules, index) {
      if (typeof sheet.insertRule === "function") {
        sheet.insertRule(selector + "{" + rules + "}", index);
      } else if (typeof sheet.addRule === "function") {
        sheet.addRule(selector, rules, index);
      }
    },

    toBool: function(v) {
      if (typeof v === "boolean") {
        return v;
      }
      if (typeof v === "string") {
        v = v.toLowerCase();
        return !(v === "" || v === "no" || v === "false" || v === "0");
      }
      return Boolean(v);
    },

    _collisionNodeCheck: function(n) {
      return n !== this.node && Utils.isIntercepted(n, this.nn);
    },

    _didCollide: function(bn) {
      return Utils.isIntercepted(
        {
          x: this.n.x,
          y: this.newY,
          width: this.n.width,
          height: this.n.height
        },
        bn
      );
    },

    _isAddNodeIntercepted: function(n) {
      return Utils.isIntercepted(
        {
          x: this.x,
          y: this.y,
          width: this.node.width,
          height: this.node.height
        },
        n
      );
    },

    parseHeight: function(val) {
      var height = val;
      var heightUnit = "px";
      if (height && typeof height === "string") {
        var match = height.match(
          /^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw|%)?$/
        );
        if (!match) {
          throw new Error("Invalid height");
        }
        heightUnit = match[2] || "px";
        height = parseFloat(match[1]);
      }
      return { height: height, unit: heightUnit };
    },

    without: function(array, item) {
      var index = array.indexOf(item);

      if (index !== -1) {
        array = array.slice(0);
        array.splice(index, 1);
      }

      return array;
    },

    sortBy: function(array, getter) {
      return array.slice(0).sort(function(left, right) {
        var valueLeft = getter(left);
        var valueRight = getter(right);

        if (valueRight === valueLeft) {
          return 0;
        }

        return valueLeft > valueRight ? 1 : -1;
      });
    },

    defaults: function(target) {
      var sources = Array.prototype.slice.call(arguments, 1);

      sources.forEach(function(source) {
        for (var prop in source) {
          if (
            Object.prototype.hasOwnProperty.call(source, prop) &&
            (!Object.prototype.hasOwnProperty.call(target, prop) ||
              target[prop] === undefined)
          ) {
            target[prop] = source[prop];
          }
        }
      });

      return target;
    },

    clone: function(target) {
      return $.extend({}, target);
    },

    throttle: function(callback, delay) {
      var isWaiting = false;

      return function() {
        if (!isWaiting) {
          callback.apply(this, arguments);
          isWaiting = true;
          setTimeout(function() {
            isWaiting = false;
          }, delay);
        }
      };
    },

    removePositioningStyles: function(el) {
      var style = el[0].style;
      if (style.position) {
        style.removeProperty("position");
      }
      if (style.left) {
        style.removeProperty("left");
      }
      if (style.top) {
        style.removeProperty("top");
      }
      if (style.width) {
        style.removeProperty("width");
      }
      if (style.height) {
        style.removeProperty("height");
      }
    },
    getScrollParent: function(el) {
      var returnEl;
      if (el === null) {
        returnEl = null;
      } else if (el.scrollHeight > el.clientHeight) {
        returnEl = el;
      } else {
        returnEl = Utils.getScrollParent(el.parentNode);
      }
      return returnEl;
    },
    updateScrollPosition: function(el, ui, distance) {
      // is widget in view?
      var rect = el.getBoundingClientRect();
      var innerHeightOrClientHeight =
        window.innerHeight || document.documentElement.clientHeight;
      if (rect.top < 0 || rect.bottom > innerHeightOrClientHeight) {
        // set scrollTop of first parent that scrolls
        // if parent is larger than el, set as low as possible
        // to get entire widget on screen
        var offsetDiffDown = rect.bottom - innerHeightOrClientHeight;
        var offsetDiffUp = rect.top;
        var scrollEl = Utils.getScrollParent(el);
        if (scrollEl !== null) {
          var prevScroll = scrollEl.scrollTop;
          if (rect.top < 0 && distance < 0) {
            // moving up
            if (el.offsetHeight > innerHeightOrClientHeight) {
              scrollEl.scrollTop += distance;
            } else {
              scrollEl.scrollTop +=
                Math.abs(offsetDiffUp) > Math.abs(distance)
                  ? distance
                  : offsetDiffUp;
            }
          } else if (distance > 0) {
            // moving down
            if (el.offsetHeight > innerHeightOrClientHeight) {
              scrollEl.scrollTop += distance;
            } else {
              scrollEl.scrollTop +=
                offsetDiffDown > distance ? distance : offsetDiffDown;
            }
          }
          // move widget y by amount scrolled
          ui.position.top += scrollEl.scrollTop - prevScroll;
        }
      }
    }
  };

  /**
   * @class GridStackDragDropPlugin
   * Base class for drag'n'drop plugin.
   */
  function GridStackDragDropPlugin(grid) {
    this.grid = grid;
  }

  GridStackDragDropPlugin.registeredPlugins = [];

  GridStackDragDropPlugin.registerPlugin = function(pluginClass) {
    GridStackDragDropPlugin.registeredPlugins.push(pluginClass);
  };

  GridStackDragDropPlugin.prototype.resizable = function(el, opts) {
    return this;
  };

  GridStackDragDropPlugin.prototype.draggable = function(el, opts) {
    return this;
  };

  GridStackDragDropPlugin.prototype.droppable = function(el, opts) {
    return this;
  };

  GridStackDragDropPlugin.prototype.isDroppable = function(el) {
    return false;
  };

  GridStackDragDropPlugin.prototype.on = function(el, eventName, callback) {
    return this;
  };

  var idSeq = 0;

  var GridStackEngine = function(column, onchange, float, maxRow, items) {
    this.column = column || 12;
    this.float = float || false;
    this.maxRow = maxRow || 0;

    this.nodes = items || [];
    this.onchange = onchange || function() {};

    this._addedNodes = [];
    this._removedNodes = [];
    this._batchMode = false;
  };

  GridStackEngine.prototype.batchUpdate = function() {
    if (this._batchMode) return;
    this._batchMode = true;
    this._prevFloat = this.float;
    this.float = true; // let things go anywhere for now... commit() will restore and possibly reposition
  };

  GridStackEngine.prototype.commit = function() {
    if (!this._batchMode) return;
    this._batchMode = false;
    this.float = this._prevFloat;
    delete this._prevFloat;
    this._packNodes();
    this._notify();
  };

  // For Meteor support: https://github.com/gridstack/gridstack.js/pull/272
  GridStackEngine.prototype.getNodeDataByDOMEl = function(el) {
    return this.nodes.find(function(node) {
      return el === node.el;
    });
  };

  GridStackEngine.prototype._fixCollisions = function(node) {
    var self = this;
    this._sortNodes(-1);

    var nn = node;
    var hasLocked = Boolean(
      this.nodes.find(function(n) {
        return n.locked;
      })
    );
    if (!this.float && !hasLocked) {
      nn = { x: 0, y: node.y, width: this.column, height: node.height };
    }
    while (true) {
      var collisionNode = this.nodes.find(Utils._collisionNodeCheck, {
        node: node,
        nn: nn
      });
      if (!collisionNode) {
        return;
      }
      var moved;
      if (collisionNode.locked) {
        // if colliding with a locked item, move ourself instead
        moved = this.moveNode(
          node,
          node.x,
          collisionNode.y + collisionNode.height,
          node.width,
          node.height,
          true
        );
      } else {
        moved = this.moveNode(
          collisionNode,
          collisionNode.x,
          node.y + node.height,
          collisionNode.width,
          collisionNode.height,
          true
        );
      }
      if (!moved) {
        return;
      } // break inf loop if we couldn't move after all (ex: maxRow, fixed)
    }
  };

  GridStackEngine.prototype.isAreaEmpty = function(x, y, width, height) {
    var nn = { x: x || 0, y: y || 0, width: width || 1, height: height || 1 };
    var collisionNode = this.nodes.find(function(n) {
      return Utils.isIntercepted(n, nn);
    });
    return !collisionNode;
  };

  GridStackEngine.prototype._sortNodes = function(dir) {
    this.nodes = Utils.sort(this.nodes, dir, this.column);
  };

  GridStackEngine.prototype._packNodes = function() {
    this._sortNodes();

    if (this.float) {
      this.nodes.forEach(function(n, i) {
        if (n._updating || n._packY === undefined || n.y === n._packY) {
          return;
        }

        var newY = n.y;
        while (newY >= n._packY) {
          var collisionNode = this.nodes
            .slice(0, i)
            .find(Utils._didCollide, { n: n, newY: newY });

          if (!collisionNode) {
            n._dirty = true;
            n.y = newY;
          }
          --newY;
        }
      }, this);
    } else {
      this.nodes.forEach(function(n, i) {
        if (n.locked) {
          return;
        }
        while (n.y > 0) {
          var newY = n.y - 1;
          var canBeMoved = i === 0;

          if (i > 0) {
            var collisionNode = this.nodes
              .slice(0, i)
              .find(Utils._didCollide, { n: n, newY: newY });
            canBeMoved = collisionNode === undefined;
          }

          if (!canBeMoved) {
            break;
          }
          // Note: must be dirty (from last position) for GridStack::OnChange CB to update positions
          // and move items back. The user 'change' CB should detect changes from the original
          // starting position instead.
          n._dirty = n.y !== newY;
          n.y = newY;
        }
      }, this);
    }
  };

  GridStackEngine.prototype._prepareNode = function(node, resizing) {
    node = node || {};
    // if we're missing position, have the grid position us automatically (before we set them to 0,0)
    if (
      node.x === undefined ||
      node.y === undefined ||
      node.x === null ||
      node.y === null
    ) {
      node.autoPosition = true;
    }

    // assign defaults for missing required fields
    var defaults = { width: 1, height: 1, x: 0, y: 0 };
    node = Utils.defaults(node, defaults);

    // convert any strings over
    node.x = parseInt(node.x);
    node.y = parseInt(node.y);
    node.width = parseInt(node.width);
    node.height = parseInt(node.height);
    node.autoPosition = node.autoPosition || false;
    node.noResize = node.noResize || false;
    node.noMove = node.noMove || false;

    // check for NaN (in case messed up strings were passed. can't do parseInt() || defaults.x above as 0 is valid #)
    if (Number.isNaN(node.x)) {
      node.x = defaults.x;
      node.autoPosition = true;
    }
    if (Number.isNaN(node.y)) {
      node.y = defaults.y;
      node.autoPosition = true;
    }
    if (Number.isNaN(node.width)) {
      node.width = defaults.width;
    }
    if (Number.isNaN(node.height)) {
      node.height = defaults.height;
    }

    if (node.maxWidth !== undefined) {
      node.width = Math.min(node.width, node.maxWidth);
    }
    if (node.maxHeight !== undefined) {
      node.height = Math.min(node.height, node.maxHeight);
    }
    if (node.minWidth !== undefined) {
      node.width = Math.max(node.width, node.minWidth);
    }
    if (node.minHeight !== undefined) {
      node.height = Math.max(node.height, node.minHeight);
    }

    if (node.width > this.column) {
      node.width = this.column;
    } else if (node.width < 1) {
      node.width = 1;
    }
    if (this.maxRow && node.height > this.maxRow) {
      node.height = this.maxRow;
    } else if (node.height < 1) {
      node.height = 1;
    }

    if (node.x < 0) {
      node.x = 0;
    }
    if (node.y < 0) {
      node.y = 0;
    }

    if (node.x + node.width > this.column) {
      if (resizing) {
        node.width = this.column - node.x;
      } else {
        node.x = this.column - node.width;
      }
    }
    if (this.maxRow && node.y + node.height > this.maxRow) {
      if (resizing) {
        node.height = this.maxRow - node.y;
      } else {
        node.y = this.maxRow - node.height;
      }
    }

    return node;
  };

  GridStackEngine.prototype._notify = function() {
    if (this._batchMode) {
      return;
    }
    var args = Array.prototype.slice.call(arguments, 0);
    args[0] =
      args[0] === undefined ? [] : Array.isArray(args[0]) ? args[0] : [args[0]];
    args[1] = args[1] === undefined ? true : args[1];
    var dirtyNodes = args[0].concat(this.getDirtyNodes());
    this.onchange(dirtyNodes, args[1]);
  };

  GridStackEngine.prototype.cleanNodes = function() {
    if (this._batchMode) {
      return;
    }
    this.nodes.forEach(function(n) {
      delete n._dirty;
    });
  };

  GridStackEngine.prototype.getDirtyNodes = function(verify) {
    // compare original X,Y,W,H (or entire node?) instead as _dirty can be a temporary state
    if (verify) {
      var dirtNodes = [];
      this.nodes.forEach(function(n) {
        if (n._dirty) {
          if (
            n.y === n._origY &&
            n.x === n._origX &&
            n.width === n._origW &&
            n.height === n._origH
          ) {
            delete n._dirty;
          } else {
            dirtNodes.push(n);
          }
        }
      });
      return dirtNodes;
    }

    return this.nodes.filter(function(n) {
      return n._dirty;
    });
  };

  GridStackEngine.prototype.addNode = function(node, triggerAddEvent) {
    node = this._prepareNode(node);

    node._id = node._id || ++idSeq;

    if (node.autoPosition) {
      this._sortNodes();

      for (var i = 0; ; ++i) {
        var x = i % this.column;
        var y = Math.floor(i / this.column);
        if (x + node.width > this.column) {
          continue;
        }
        if (
          !this.nodes.find(Utils._isAddNodeIntercepted, {
            x: x,
            y: y,
            node: node
          })
        ) {
          node.x = x;
          node.y = y;
          delete node.autoPosition; // found our slot
          break;
        }
      }
    }

    this.nodes.push(node);
    if (triggerAddEvent) {
      this._addedNodes.push(node);
    }

    this._fixCollisions(node);
    this._packNodes();
    this._notify();
    return node;
  };

  GridStackEngine.prototype.removeNode = function(node, detachNode) {
    detachNode = detachNode === undefined ? true : detachNode;
    this._removedNodes.push(node);
    node._id = null; // hint that node is being removed
    this.nodes = Utils.without(this.nodes, node);
    this._packNodes();
    this._notify(node, detachNode);
  };

  GridStackEngine.prototype.removeAll = function(detachNode) {
    delete this._layouts;
    if (this.nodes.length === 0) {
      return;
    }
    detachNode = detachNode === undefined ? true : detachNode;
    this.nodes.forEach(function(n) {
      n._id = null;
    }); // hint that node is being removed
    this._removedNodes = this.nodes;
    this.nodes = [];
    this._notify(this._removedNodes, detachNode);
  };

  GridStackEngine.prototype.canMoveNode = function(node, x, y, width, height) {
    if (!this.isNodeChangedPosition(node, x, y, width, height)) {
      return false;
    }
    var hasLocked = Boolean(
      this.nodes.find(function(n) {
        return n.locked;
      })
    );

    if (!this.maxRow && !hasLocked) {
      return true;
    }

    var clonedNode;
    var clone = new GridStackEngine(
      this.column,
      null,
      this.float,
      0,
      this.nodes.map(function(n) {
        if (n === node) {
          clonedNode = $.extend({}, n);
          return clonedNode;
        }
        return $.extend({}, n);
      })
    );

    if (!clonedNode) {
      return true;
    }

    clone.moveNode(clonedNode, x, y, width, height);

    var res = true;

    if (hasLocked) {
      res &= !Boolean(
        clone.nodes.find(function(n) {
          return n !== clonedNode && Boolean(n.locked) && Boolean(n._dirty);
        })
      );
    }
    if (this.maxRow) {
      res &= clone.getRow() <= this.maxRow;
    }

    return res;
  };

  GridStackEngine.prototype.canBePlacedWithRespectToHeight = function(node) {
    if (!this.maxRow) {
      return true;
    }

    var clone = new GridStackEngine(
      this.column,
      null,
      this.float,
      0,
      this.nodes.map(function(n) {
        return $.extend({}, n);
      })
    );
    clone.addNode(node);
    return clone.getRow() <= this.maxRow;
  };

  GridStackEngine.prototype.isNodeChangedPosition = function(
    node,
    x,
    y,
    width,
    height
  ) {
    if (typeof x !== "number") {
      x = node.x;
    }
    if (typeof y !== "number") {
      y = node.y;
    }
    if (typeof width !== "number") {
      width = node.width;
    }
    if (typeof height !== "number") {
      height = node.height;
    }

    if (node.maxWidth !== undefined) {
      width = Math.min(width, node.maxWidth);
    }
    if (node.maxHeight !== undefined) {
      height = Math.min(height, node.maxHeight);
    }
    if (node.minWidth !== undefined) {
      width = Math.max(width, node.minWidth);
    }
    if (node.minHeight !== undefined) {
      height = Math.max(height, node.minHeight);
    }

    if (
      node.x === x &&
      node.y === y &&
      node.width === width &&
      node.height === height
    ) {
      return false;
    }
    return true;
  };

  GridStackEngine.prototype.moveNode = function(
    node,
    x,
    y,
    width,
    height,
    noPack
  ) {
    if (node.locked) {
      return null;
    }
    if (typeof x !== "number") {
      x = node.x;
    }
    if (typeof y !== "number") {
      y = node.y;
    }
    if (typeof width !== "number") {
      width = node.width;
    }
    if (typeof height !== "number") {
      height = node.height;
    }

    // constrain the passed in values and check if we're still changing our node
    var resizing = node.width !== width || node.height !== height;
    var nn = {
      x: x,
      y: y,
      width: width,
      height: height,
      maxWidth: node.maxWidth,
      maxHeight: node.maxHeight,
      minWidth: node.minWidth,
      minHeight: node.minHeight
    };
    nn = this._prepareNode(nn, resizing);
    if (
      node.x === nn.x &&
      node.y === nn.y &&
      node.width === nn.width &&
      node.height === nn.height
    ) {
      return null;
    }

    node._dirty = true;

    node.x = node.lastTriedX = nn.x;
    node.y = node.lastTriedY = nn.y;
    node.width = node.lastTriedWidth = nn.width;
    node.height = node.lastTriedHeight = nn.height;

    this._fixCollisions(node);
    if (!noPack) {
      this._packNodes();
      this._notify();
    }
    return node;
  };

  GridStackEngine.prototype.getRow = function() {
    return this.nodes.reduce(function(memo, n) {
      return Math.max(memo, n.y + n.height);
    }, 0);
  };

  GridStackEngine.prototype.beginUpdate = function(node) {
    if (node._updating) return;
    node._updating = true;
    this.nodes.forEach(function(n) {
      n._packY = n.y;
    });
  };

  GridStackEngine.prototype.endUpdate = function() {
    var n = this.nodes.find(function(n) {
      return n._updating;
    });
    if (n) {
      n._updating = false;
      this.nodes.forEach(function(n) {
        delete n._packY;
      });
    }
  };

  /**
   * Construct a grid item from the given element and options
   * @param {GridStackElement} el
   * @param {GridstackOptions} opts
   */
  var GridStack = function(el, opts) {
    var self = this;
    var oneColumnMode, _prevColumn, isAutoCellHeight;

    opts = opts || {};

    this.$el = $(el); // TODO: legacy code
    this.el = this.$el.get(0); // exposed HTML element to the user

    obsoleteOpts(opts, "width", "column", "v0.5.3");
    obsoleteOpts(opts, "height", "maxRow", "v0.5.3");
    obsoleteOptsDel(
      opts,
      "oneColumnModeClass",
      "v0.6.3",
      ". Use class `.grid-stack-1` instead"
    );

    // container attributes
    obsoleteAttr(this.$el, "data-gs-width", "data-gs-column", "v0.5.3");
    obsoleteAttr(this.$el, "data-gs-height", "data-gs-max-row", "v0.5.3");
    obsoleteAttr(
      this.$el,
      "data-gs-current-height",
      "data-gs-current-row",
      "v1.0.0"
    );

    opts.itemClass = opts.itemClass || "grid-stack-item";
    var isNested = this.$el.closest("." + opts.itemClass).length > 0;

    // if row property exists, replace minRow and maxRow instead
    if (opts.row) {
      opts.minRow = opts.maxRow = opts.row;
      delete opts.row;
    }
    var rowAttr = parseInt(this.$el.attr("data-gs-row"));

    // elements attributes override any passed options (like CSS style) - merge the two together
    this.opts = Utils.defaults(opts, {
      column: parseInt(this.$el.attr("data-gs-column")) || 12,
      minRow: rowAttr
        ? rowAttr
        : parseInt(this.$el.attr("data-gs-min-row")) || 0,
      maxRow: rowAttr
        ? rowAttr
        : parseInt(this.$el.attr("data-gs-max-row")) || 0,
      itemClass: "grid-stack-item",
      placeholderClass: "grid-stack-placeholder",
      placeholderText: "",
      handle: ".grid-stack-item-content",
      handleClass: null,
      styleInHead: false,
      cellHeight: 60,
      verticalMargin: 20,
      auto: true,
      minWidth: 768,
      float: false,
      staticGrid: false,
      _class: "grid-stack-instance-" + (Math.random() * 10000).toFixed(0),
      animate: Boolean(this.$el.attr("data-gs-animate")) || false,
      alwaysShowResizeHandle: opts.alwaysShowResizeHandle || false,
      resizable: Utils.defaults(opts.resizable || {}, {
        autoHide: !(opts.alwaysShowResizeHandle || false),
        handles: "se"
      }),
      draggable: Utils.defaults(opts.draggable || {}, {
        handle:
          (opts.handleClass
            ? "." + opts.handleClass
            : opts.handle
            ? opts.handle
            : "") || ".grid-stack-item-content",
        scroll: false,
        appendTo: "body"
      }),
      disableDrag: opts.disableDrag || false,
      disableResize: opts.disableResize || false,
      rtl: "auto",
      removable: false,
      removableOptions: Utils.defaults(opts.removableOptions || {}, {
        accept: "." + opts.itemClass
      }),
      removeTimeout: 2000,
      verticalMarginUnit: "px",
      cellHeightUnit: "px",
      disableOneColumnMode: opts.disableOneColumnMode || false,
      oneColumnModeDomSort: opts.oneColumnModeDomSort,
      ddPlugin: null
    });

    if (this.opts.ddPlugin === false) {
      this.opts.ddPlugin = GridStackDragDropPlugin;
    } else if (this.opts.ddPlugin === null) {
      this.opts.ddPlugin =
        GridStackDragDropPlugin.registeredPlugins[0] || GridStackDragDropPlugin;
    }

    this.dd = new this.opts.ddPlugin(this);

    if (this.opts.rtl === "auto") {
      this.opts.rtl = this.$el.css("direction") === "rtl";
    }

    if (this.opts.rtl) {
      this.$el.addClass("grid-stack-rtl");
    }

    this.opts.isNested = isNested;

    isAutoCellHeight = this.opts.cellHeight === "auto";
    if (isAutoCellHeight) {
      // make the cell square initially
      self.cellHeight(self.cellWidth(), true);
    } else {
      this.cellHeight(this.opts.cellHeight, true);
    }
    this.verticalMargin(this.opts.verticalMargin, true);

    this.$el.addClass(this.opts._class);

    this._setStaticClass();

    if (isNested) {
      this.$el.addClass("grid-stack-nested");
    }

    this._initStyles();

    this.engine = new GridStackEngine(
      this.opts.column,
      function(nodes, detachNode) {
        detachNode = detachNode === undefined ? true : detachNode;
        var maxHeight = 0;
        this.nodes.forEach(function(n) {
          maxHeight = Math.max(maxHeight, n.y + n.height);
        });
        nodes.forEach(function(n) {
          if (detachNode && n._id === null) {
            if (n.el) {
              $(n.el).remove();
            }
          } else {
            $(n.el)
              .attr("data-gs-x", n.x)
              .attr("data-gs-y", n.y)
              .attr("data-gs-width", n.width)
              .attr("data-gs-height", n.height);
          }
        });
        self._updateStyles(maxHeight + 10);
      },
      this.opts.float,
      this.opts.maxRow
    );

    if (this.opts.auto) {
      var elements = [];
      var _this = this;
      this.$el
        .children(
          "." +
            this.opts.itemClass +
            ":not(." +
            this.opts.placeholderClass +
            ")"
        )
        .each(function(index, el) {
          el = $(el);
          var x = parseInt(el.attr("data-gs-x"));
          var y = parseInt(el.attr("data-gs-y"));
          elements.push({
            el: el.get(0),
            // if x,y are missing (autoPosition) add them to end of list - but keep their respective DOM order
            i:
              (Number.isNaN(x) ? 1000 : x) +
              (Number.isNaN(y) ? 1000 : y) * _this.opts.column
          });
        });
      Utils.sortBy(elements, function(x) {
        return x.i;
      }).forEach(function(item) {
        this._prepareElement(item.el);
      }, this);
    }
    this.engine._saveInitial(); // initial start of items

    this.setAnimation(this.opts.animate);

    this.placeholder = $(
      '<div class="' +
        this.opts.placeholderClass +
        " " +
        this.opts.itemClass +
        '">' +
        '<div class="placeholder-content">' +
        this.opts.placeholderText +
        "</div></div>"
    ).hide();

    this._updateContainerHeight();

    this._updateHeightsOnResize = Utils.throttle(function() {
      self.cellHeight(self.cellWidth(), false);
    }, 100);

    /**
     * called when we are being resized - check if the one Column Mode needs to be turned on/off
     * and remember the prev columns we used.
     */
    this.onResizeHandler = function() {
      if (isAutoCellHeight) {
        self._updateHeightsOnResize();
      }

      if (
        !self.opts.disableOneColumnMode &&
        (window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth) <= self.opts.minWidth
      ) {
        if (self.oneColumnMode) {
          return;
        }
        self.oneColumnMode = true;
        self.column(1);
      } else {
        if (!self.oneColumnMode) {
          return;
        }
        self.oneColumnMode = false;
        self.column(self._prevColumn);
      }
    };

    $(window).resize(this.onResizeHandler);
    this.onResizeHandler();

    if (!self.opts.staticGrid && typeof self.opts.removable === "string") {
      var trashZone = $(self.opts.removable);
      if (!this.dd.isDroppable(trashZone)) {
        this.dd.droppable(trashZone, self.opts.removableOptions);
      }
      this.dd
        .on(trashZone, "dropover", function(event, ui) {
          var el = $(ui.draggable);
          var node = el.data("_gridstack_node");
          if (!node || node._grid !== self) {
            return;
          }
          el.data("inTrashZone", true);
          self._setupRemovingTimeout(el);
        })
        .on(trashZone, "dropout", function(event, ui) {
          var el = $(ui.draggable);
          var node = el.data("_gridstack_node");
          if (!node || node._grid !== self) {
            return;
          }
          el.data("inTrashZone", false);
          self._clearRemovingTimeout(el);
        });
    }

    if (!self.opts.staticGrid && self.opts.acceptWidgets) {
      var draggingElement = null;

      var onDrag = function(event, ui) {
        var el = draggingElement;
        var node = el.data("_gridstack_node");
        var pos = self.getCellFromPixel(
          { left: event.pageX, top: event.pageY },
          true
        );
        var x = Math.max(0, pos.x);
        var y = Math.max(0, pos.y);
        if (!node._added) {
          node._added = true;

          node.el = el.get(0);
          node.autoPosition = true;
          node.x = x;
          node.y = y;
          self.engine.cleanNodes();
          self.engine.beginUpdate(node);
          self.engine.addNode(node);

          self.$el.append(self.placeholder);
          self.placeholder
            .attr("data-gs-x", node.x)
            .attr("data-gs-y", node.y)
            .attr("data-gs-width", node.width)
            .attr("data-gs-height", node.height)
            .show();
          node.el = self.placeholder.get(0);
          node._beforeDragX = node.x;
          node._beforeDragY = node.y;

          self._updateContainerHeight();
        }
        if (!self.engine.canMoveNode(node, x, y)) {
          return;
        }
        self.engine.moveNode(node, x, y);
        self._updateContainerHeight();
      };

      this.dd
        .droppable(self.$el, {
          accept: function(el) {
            el = $(el);
            var node = el.data("_gridstack_node");
            if (node && node._grid === self) {
              return false;
            }
            return el.is(
              self.opts.acceptWidgets === true
                ? ".grid-stack-item"
                : self.opts.acceptWidgets
            );
          }
        })
        .on(self.$el, "dropover", function(event, ui) {
          var el = $(ui.draggable);
          var width, height;

          // see if we already have a node with widget/height and check for attributes
          var origNode = el.data("_gridstack_node");
          if (!origNode || !origNode.width || !origNode.height) {
            var w = parseInt(el.attr("data-gs-width"));
            if (w > 0) {
              origNode = origNode || {};
              origNode.width = w;
            }
            var h = parseInt(el.attr("data-gs-height"));
            if (h > 0) {
              origNode = origNode || {};
              origNode.height = h;
            }
          }

          // if not calculate the grid size based on element outer size
          // height: Each row is cellHeight + verticalMargin, until last one which has no margin below
          var cellWidth = self.cellWidth();
          var cellHeight = self.cellHeight();
          var verticalMargin = self.opts.verticalMargin;
          width =
            origNode && origNode.width
              ? origNode.width
              : Math.ceil(el.outerWidth() / cellWidth);
          height =
            origNode && origNode.height
              ? origNode.height
              : Math.round(
                  (el.outerHeight() + verticalMargin) /
                    (cellHeight + verticalMargin)
                );

          draggingElement = el;

          var node = self.engine._prepareNode({
            width: width,
            height: height,
            _added: false,
            _temporary: true
          });
          node.isOutOfGrid = true;
          el.data("_gridstack_node", node);
          el.data("_gridstack_node_orig", origNode);

          el.on("drag", onDrag);
          return false; // prevent parent from receiving msg (which may be grid as well)
        })
        .on(self.$el, "dropout", function(event, ui) {
          // jquery-ui bug. Must verify widget is being dropped out
          // check node variable that gets set when widget is out of grid
          var el = $(ui.draggable);
          if (!el.data("_gridstack_node")) {
            return;
          }
          var node = el.data("_gridstack_node");
          if (!node.isOutOfGrid) {
            return;
          }
          el.unbind("drag", onDrag);
          node.el = null;
          self.engine.removeNode(node);
          self.placeholder.detach();
          self._updateContainerHeight();
          el.data("_gridstack_node", el.data("_gridstack_node_orig"));
          return false; // prevent parent from receiving msg (which may be grid as well)
        })
        .on(self.$el, "drop", function(event, ui) {
          self.placeholder.detach();

          var node = $(ui.draggable).data("_gridstack_node");
          node.isOutOfGrid = false;
          node._grid = self;
          var el = $(ui.draggable).clone(false);
          el.data("_gridstack_node", node);
          var originalNode = $(ui.draggable).data("_gridstack_node_orig");
          if (originalNode !== undefined && originalNode._grid !== undefined) {
            originalNode._grid._triggerRemoveEvent();
          }
          $(ui.helper).remove();
          node.el = el.get(0);
          self.placeholder.hide();
          Utils.removePositioningStyles(el);
          el.find("div.ui-resizable-handle").remove();

          el.attr("data-gs-x", node.x)
            .attr("data-gs-y", node.y)
            .attr("data-gs-width", node.width)
            .attr("data-gs-height", node.height)
            .addClass(self.opts.itemClass)
            .enableSelection()
            .removeData("draggable")
            .removeClass(
              "ui-draggable ui-draggable-dragging ui-draggable-disabled"
            )
            .unbind("drag", onDrag);
          self.$el.append(el);
          self._prepareElementsByNode(el, node);
          self._updateContainerHeight();
          self.engine._addedNodes.push(node);
          self._triggerAddEvent();
          self._triggerChangeEvent();

          self.engine.endUpdate();
          $(ui.draggable).unbind("drag", onDrag);
          $(ui.draggable).removeData("_gridstack_node");
          $(ui.draggable).removeData("_gridstack_node_orig");
          self.$el.trigger("dropped", [originalNode, node]);
          return false; // prevent parent from receiving msg (which may be grid as well)
        });
    }
  };

  GridStack.prototype._triggerChangeEvent = function(/*forceTrigger*/) {
    if (this.engine._batchMode) {
      return;
    }
    var elements = this.engine.getDirtyNodes(true); // verify they really changed
    if (elements && elements.length) {
      this.engine._layoutsNodesChange(elements);
      this._triggerEvent("change", elements);
    }
    this.engine._saveInitial(); // we called, now reset initial values & dirty flags
  };

  GridStack.prototype._triggerAddEvent = function() {
    if (this.engine._batchMode) {
      return;
    }
    if (this.engine._addedNodes && this.engine._addedNodes.length > 0) {
      this.engine._layoutsNodesChange(this.engine._addedNodes);
      // prevent added nodes from also triggering 'change' event (which is called next)
      this.engine._addedNodes.forEach(function(n) {
        delete n._dirty;
      });
      this._triggerEvent("added", this.engine._addedNodes);
      this.engine._addedNodes = [];
    }
  };

  GridStack.prototype._triggerRemoveEvent = function() {
    if (this.engine._batchMode) {
      return;
    }
    if (this.engine._removedNodes && this.engine._removedNodes.length > 0) {
      this._triggerEvent("removed", this.engine._removedNodes);
      this.engine._removedNodes = [];
    }
  };

  GridStack.prototype._triggerEvent = function(name, data) {
    var event = new CustomEvent(name, { detail: data });
    this.el.dispatchEvent(event);
  };

  GridStack.prototype._initStyles = function() {
    if (this._stylesId) {
      Utils.removeStylesheet(this._stylesId);
    }
    this._stylesId = "gridstack-style-" + (Math.random() * 100000).toFixed();
    var styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
    // if styleInHead === false insert style to parent to support WebComponent
    this._styles = Utils.createStylesheet(this._stylesId, styleLocation);
    if (this._styles !== null) {
      this._styles._max = 0;
    }
  };

  GridStack.prototype._updateStyles = function(maxHeight) {
    if (this._styles === null || this._styles === undefined) {
      return;
    }

    var prefix = "." + this.opts._class + " ." + this.opts.itemClass;
    var self = this;
    var getHeight;

    if (maxHeight === undefined) {
      maxHeight = this._styles._max;
    }

    this._initStyles();
    this._updateContainerHeight();
    if (!this.opts.cellHeight) {
      // The rest will be handled by CSS
      return;
    }
    if (this._styles._max !== 0 && maxHeight <= this._styles._max) {
      // Keep this._styles._max increasing
      return;
    }

    if (
      !this.opts.verticalMargin ||
      this.opts.cellHeightUnit === this.opts.verticalMarginUnit
    ) {
      getHeight = function(nbRows, nbMargins) {
        return (
          self.opts.cellHeight * nbRows +
          self.opts.verticalMargin * nbMargins +
          self.opts.cellHeightUnit
        );
      };
    } else {
      getHeight = function(nbRows, nbMargins) {
        if (!nbRows || !nbMargins) {
          return (
            self.opts.cellHeight * nbRows +
            self.opts.verticalMargin * nbMargins +
            self.opts.cellHeightUnit
          );
        }
        return (
          "calc(" +
          (self.opts.cellHeight * nbRows + self.opts.cellHeightUnit) +
          " + " +
          (self.opts.verticalMargin * nbMargins +
            self.opts.verticalMarginUnit) +
          ")"
        );
      };
    }

    if (this._styles._max === 0) {
      Utils.insertCSSRule(
        this._styles,
        prefix,
        "min-height: " + getHeight(1, 0) + ";",
        0
      );
    }

    if (maxHeight > this._styles._max) {
      for (var i = this._styles._max; i < maxHeight; ++i) {
        Utils.insertCSSRule(
          this._styles,
          prefix + '[data-gs-height="' + (i + 1) + '"]',
          "height: " + getHeight(i + 1, i) + ";",
          i
        );
        Utils.insertCSSRule(
          this._styles,
          prefix + '[data-gs-min-height="' + (i + 1) + '"]',
          "min-height: " + getHeight(i + 1, i) + ";",
          i
        );
        Utils.insertCSSRule(
          this._styles,
          prefix + '[data-gs-max-height="' + (i + 1) + '"]',
          "max-height: " + getHeight(i + 1, i) + ";",
          i
        );
        Utils.insertCSSRule(
          this._styles,
          prefix + '[data-gs-y="' + i + '"]',
          "top: " + getHeight(i, i) + ";",
          i
        );
      }
      this._styles._max = maxHeight;
    }
  };

  GridStack.prototype._updateContainerHeight = function() {
    if (this.engine._batchMode) {
      return;
    }
    var row = this.engine.getRow();
    if (row < this.opts.minRow) {
      row = this.opts.minRow;
    }
    // check for css min height. Each row is cellHeight + verticalMargin, until last one which has no margin below
    var cssMinHeight = parseInt(this.$el.css("min-height"));
    if (cssMinHeight > 0) {
      var verticalMargin = this.opts.verticalMargin;
      var minRow = Math.round(
        (cssMinHeight + verticalMargin) / (this.cellHeight() + verticalMargin)
      );
      if (row < minRow) {
        row = minRow;
      }
    }
    this.$el.attr("data-gs-current-row", row);
    if (!this.opts.cellHeight) {
      return;
    }
    if (!this.opts.verticalMargin) {
      this.$el.css(
        "height",
        row * this.opts.cellHeight + this.opts.cellHeightUnit
      );
    } else if (this.opts.cellHeightUnit === this.opts.verticalMarginUnit) {
      this.$el.css(
        "height",
        row * (this.opts.cellHeight + this.opts.verticalMargin) -
          this.opts.verticalMargin +
          this.opts.cellHeightUnit
      );
    } else {
      this.$el.css(
        "height",
        "calc(" +
          (row * this.opts.cellHeight + this.opts.cellHeightUnit) +
          " + " +
          (row * (this.opts.verticalMargin - 1) +
            this.opts.verticalMarginUnit) +
          ")"
      );
    }
  };

  GridStack.prototype._setupRemovingTimeout = function(el) {
    var self = this;
    var node = $(el).data("_gridstack_node");

    if (node._removeTimeout || !self.opts.removable) {
      return;
    }
    node._removeTimeout = setTimeout(function() {
      el.addClass("grid-stack-item-removing");
      node._isAboutToRemove = true;
    }, self.opts.removeTimeout);
  };

  GridStack.prototype._clearRemovingTimeout = function(el) {
    var node = $(el).data("_gridstack_node");

    if (!node._removeTimeout) {
      return;
    }
    clearTimeout(node._removeTimeout);
    node._removeTimeout = null;
    el.removeClass("grid-stack-item-removing");
    node._isAboutToRemove = false;
  };

  GridStack.prototype._prepareElementsByNode = function(el, node) {
    var self = this;

    var cellWidth;
    var cellFullHeight; // internal cellHeight + v-margin

    var dragOrResize = function(event, ui) {
      var x = Math.round(ui.position.left / cellWidth);
      var y = Math.floor(
        (ui.position.top + cellFullHeight / 2) / cellFullHeight
      );
      var width;
      var height;

      if (event.type === "drag") {
        var distance = ui.position.top - node._prevYPix;
        node._prevYPix = ui.position.top;
        Utils.updateScrollPosition(el[0], ui, distance);
        if (
          el.data("inTrashZone") ||
          x < 0 ||
          x >= self.engine.column ||
          y < 0 ||
          (!self.engine.float && y > self.engine.getRow())
        ) {
          if (!node._temporaryRemoved) {
            if (self.opts.removable === true) {
              self._setupRemovingTimeout(el);
            }

            x = node._beforeDragX;
            y = node._beforeDragY;

            self.placeholder.detach();
            self.placeholder.hide();
            self.engine.removeNode(node);
            self._updateContainerHeight();

            node._temporaryRemoved = true;
          } else {
            return;
          }
        } else {
          self._clearRemovingTimeout(el);

          if (node._temporaryRemoved) {
            self.engine.addNode(node);
            self.placeholder
              .attr("data-gs-x", x)
              .attr("data-gs-y", y)
              .attr("data-gs-width", width)
              .attr("data-gs-height", height)
              .show();
            self.$el.append(self.placeholder);
            node.el = self.placeholder.get(0);
            node._temporaryRemoved = false;
          }
        }
      } else if (event.type === "resize") {
        if (x < 0) return;
        width = Math.round(ui.size.width / cellWidth);
        height = Math.round(
          (ui.size.height + self.verticalMargin()) / cellFullHeight
        );
      }
      // width and height are undefined if not resizing
      var lastTriedWidth = width !== undefined ? width : node.lastTriedWidth;
      var lastTriedHeight =
        height !== undefined ? height : node.lastTriedHeight;
      if (
        !self.engine.canMoveNode(node, x, y, width, height) ||
        (node.lastTriedX === x &&
          node.lastTriedY === y &&
          node.lastTriedWidth === lastTriedWidth &&
          node.lastTriedHeight === lastTriedHeight)
      ) {
        return;
      }
      node.lastTriedX = x;
      node.lastTriedY = y;
      node.lastTriedWidth = width;
      node.lastTriedHeight = height;
      self.engine.moveNode(node, x, y, width, height);
      self._updateContainerHeight();

      if (event.type === "resize") {
        $(event.target).trigger("gsresize", node);
      }
    };

    var onStartMoving = function(event, ui) {
      self.$el.append(self.placeholder);
      var o = $(this);
      self.engine.cleanNodes();
      self.engine.beginUpdate(node);
      cellWidth = self.cellWidth();
      var strictCellHeight = self.cellHeight(); // heigh without v-margin
      // compute height with v-margin (Note: we add 1 margin as last row is missing it)
      cellFullHeight =
        (self.$el.height() + self.verticalMargin()) /
        parseInt(self.$el.attr("data-gs-current-row"));
      self.placeholder
        .attr("data-gs-x", o.attr("data-gs-x"))
        .attr("data-gs-y", o.attr("data-gs-y"))
        .attr("data-gs-width", o.attr("data-gs-width"))
        .attr("data-gs-height", o.attr("data-gs-height"))
        .show();
      node.el = self.placeholder.get(0);
      node._beforeDragX = node.x;
      node._beforeDragY = node.y;
      node._prevYPix = ui.position.top;
      var minHeight = node.minHeight || 1;
      var verticalMargin = self.opts.verticalMargin;

      // mineHeight - Each row is cellHeight + verticalMargin, until last one which has no margin below
      self.dd.resizable(
        el,
        "option",
        "minWidth",
        cellWidth * (node.minWidth || 1)
      );
      self.dd.resizable(
        el,
        "option",
        "minHeight",
        strictCellHeight * minHeight + (minHeight - 1) * verticalMargin
      );

      if (event.type === "resizestart") {
        o.find(".grid-stack-item").trigger("resizestart");
      }
    };

    var onEndMoving = function(event, ui) {
      var o = $(this);
      if (!o.data("_gridstack_node")) {
        return;
      }

      // var forceNotify = false; what is the point of calling 'change' event with no data, when the 'removed' event is already called ?
      self.placeholder.detach();
      node.el = o.get(0);
      self.placeholder.hide();

      if (node._isAboutToRemove) {
        // forceNotify = true;
        var gridToNotify = el.data("_gridstack_node")._grid;
        gridToNotify._triggerRemoveEvent();
        el.removeData("_gridstack_node");
        el.remove();
      } else {
        self._clearRemovingTimeout(el);
        if (!node._temporaryRemoved) {
          Utils.removePositioningStyles(o);
          o.attr("data-gs-x", node.x)
            .attr("data-gs-y", node.y)
            .attr("data-gs-width", node.width)
            .attr("data-gs-height", node.height);
        } else {
          Utils.removePositioningStyles(o);
          o.attr("data-gs-x", node._beforeDragX)
            .attr("data-gs-y", node._beforeDragY)
            .attr("data-gs-width", node.width)
            .attr("data-gs-height", node.height);
          node.x = node._beforeDragX;
          node.y = node._beforeDragY;
          node._temporaryRemoved = false;
          self.engine.addNode(node);
        }
      }
      self._updateContainerHeight();
      self._triggerChangeEvent(/*forceNotify*/);

      self.engine.endUpdate();

      var nestedGrids = o.find(".grid-stack");
      if (nestedGrids.length && event.type === "resizestop") {
        nestedGrids.each(function(index, el) {
          el.gridstack.onResizeHandler();
        });
        o.find(".grid-stack-item").trigger("resizestop");
        o.find(".grid-stack-item").trigger("gsresizestop");
      }
      if (event.type === "resizestop") {
        self.$el.trigger("gsresizestop", o);
      }
    };

    this.dd
      .draggable(el, {
        start: onStartMoving,
        stop: onEndMoving,
        drag: dragOrResize
      })
      .resizable(el, {
        start: onStartMoving,
        stop: onEndMoving,
        resize: dragOrResize
      });

    if (node.noMove || this.opts.disableDrag || this.opts.staticGrid) {
      this.dd.draggable(el, "disable");
    }

    if (node.noResize || this.opts.disableResize || this.opts.staticGrid) {
      this.dd.resizable(el, "disable");
    }

    this._writeAttr(el, node);
  };

  GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
    triggerAddEvent = triggerAddEvent !== undefined ? triggerAddEvent : false;
    var self = this;
    el = $(el);

    el.addClass(this.opts.itemClass);
    var node = this._readAttr(el, { el: el.get(0), _grid: self });
    node = self.engine.addNode(node, triggerAddEvent);
    el.data("_gridstack_node", node);

    this._prepareElementsByNode(el, node);
  };

  /** call to write any default attributes back to element */
  GridStack.prototype._writeAttr = function(el, node) {
    if (!node) {
      return;
    }
    el = $(el);
    // Note: passing null removes the attr in jquery
    if (node.x !== undefined) {
      el.attr("data-gs-x", node.x);
    }
    if (node.y !== undefined) {
      el.attr("data-gs-y", node.y);
    }
    if (node.width !== undefined) {
      el.attr("data-gs-width", node.width);
    }
    if (node.height !== undefined) {
      el.attr("data-gs-height", node.height);
    }
    if (node.autoPosition !== undefined) {
      el.attr("data-gs-auto-position", node.autoPosition ? true : null);
    }
    if (node.minWidth !== undefined) {
      el.attr("data-gs-min-width", node.minWidth);
    }
    if (node.maxWidth !== undefined) {
      el.attr("data-gs-max-width", node.maxWidth);
    }
    if (node.minHeight !== undefined) {
      el.attr("data-gs-min-height", node.minHeight);
    }
    if (node.maxHeight !== undefined) {
      el.attr("data-gs-max-height", node.maxHeight);
    }
    if (node.noResize !== undefined) {
      el.attr("data-gs-no-resize", node.noResize ? true : null);
    }
    if (node.noMove !== undefined) {
      el.attr("data-gs-no-move", node.noMove ? true : null);
    }
    if (node.locked !== undefined) {
      el.attr("data-gs-locked", node.locked ? true : null);
    }
    if (node.resizeHandles !== undefined) {
      el.attr("data-gs-resize-handles", node.resizeHandles);
    }
    if (node.id !== undefined) {
      el.attr("data-gs-id", node.id);
    }
  };

  /** call to read any default attributes back to element */
  GridStack.prototype._readAttr = function(el, node) {
    el = $(el);
    node = node || {};
    node.x = el.attr("data-gs-x");
    node.y = el.attr("data-gs-y");
    node.width = el.attr("data-gs-width");
    node.height = el.attr("data-gs-height");
    node.autoPosition = Utils.toBool(el.attr("data-gs-auto-position"));
    node.maxWidth = el.attr("data-gs-max-width");
    node.minWidth = el.attr("data-gs-min-width");
    node.maxHeight = el.attr("data-gs-max-height");
    node.minHeight = el.attr("data-gs-min-height");
    node.noResize = Utils.toBool(el.attr("data-gs-no-resize"));
    node.noMove = Utils.toBool(el.attr("data-gs-no-move"));
    node.locked = Utils.toBool(el.attr("data-gs-locked"));
    node.resizeHandles = el.attr("data-gs-resize-handles");
    node.id = el.attr("data-gs-id");
    return node;
  };

  GridStack.prototype.setAnimation = function(enable) {
    if (enable) {
      this.$el.addClass("grid-stack-animate");
    } else {
      this.$el.removeClass("grid-stack-animate");
    }
  };

  GridStack.prototype.addWidget = function(
    el,
    opt,
    y,
    width,
    height,
    autoPosition,
    minWidth,
    maxWidth,
    minHeight,
    maxHeight,
    id
  ) {
    // new way of calling with an object - make sure all items have been properly initialized
    if (opt === undefined || typeof opt === "object") {
      // Tempting to initialize the passed in opt with default and valid values, but this break knockout demos
      // as the actual value are filled in when _prepareElement() calls el.attr('data-gs-xyz) before adding the node.
      // opt = this.engine._prepareNode(opt);
    } else {
      // old legacy way of calling with items spelled out - call us back with single object instead (so we can properly initialized values)
      return this.addWidget(el, {
        x: opt,
        y: y,
        width: width,
        height: height,
        autoPosition: autoPosition,
        minWidth: minWidth,
        maxWidth: maxWidth,
        minHeight: minHeight,
        maxHeight: maxHeight,
        id: id
      });
    }

    el = $(el);
    if (opt) {
      // see knockout above
      // make sure we load any DOM attributes that are not specified in passed in options (which override)
      var domAttr = this._readAttr(el);
      Utils.defaults(opt, domAttr);
      this.engine._prepareNode(opt);
    }
    this._writeAttr(el, opt);
    this.$el.append(el);
    return this.makeWidget(el);
  };

  GridStack.prototype.makeWidget = function(el) {
    el = $(el);
    this._prepareElement(el, true);
    this._updateContainerHeight();
    this._triggerAddEvent();
    this._triggerChangeEvent(true); // trigger any other changes

    return el.get(0);
  };

  GridStack.prototype.willItFit = function(x, y, width, height, autoPosition) {
    var node = {
      x: x,
      y: y,
      width: width,
      height: height,
      autoPosition: autoPosition
    };
    return this.engine.canBePlacedWithRespectToHeight(node);
  };

  GridStack.prototype.removeWidget = function(el, detachNode) {
    el = $(el);
    var node = el.data("_gridstack_node");
    // For Meteor support: https://github.com/gridstack/gridstack.js/pull/272
    if (!node) {
      node = this.engine.getNodeDataByDOMEl(el.get(0));
    }
    if (!node || node.el.parentElement !== this.el) return; // not our child!
    // remove our DOM data (circular link) and drag&drop permanently
    el.removeData("_gridstack_node");
    this.dd.draggable(el, "destroy").resizable(el, "destroy");

    this.engine.removeNode(node, detachNode);
    this._triggerRemoveEvent();
    this._triggerChangeEvent(true); // trigger any other changes
  };

  GridStack.prototype.removeAll = function(detachNode) {
    // always remove our DOM data (circular link) before list gets emptied and drag&drop permanently
    this.engine.nodes.forEach(function(node) {
      var el = $(node.el);
      el.removeData("_gridstack_node");
      this.dd.draggable(el, "destroy").resizable(el, "destroy");
    }, this);

    this.engine.removeAll(detachNode);
    this._triggerRemoveEvent();
  };

  GridStack.prototype.destroy = function(detachGrid) {
    $(window).off("resize", this.onResizeHandler);
    if (detachGrid === false) {
      this.removeAll(false);
      this.$el.removeClass(this.opts._class);
      delete this.$el.get(0).gridstack;
    } else {
      this.$el.remove();
    }
    Utils.removeStylesheet(this._stylesId);
    if (this.engine) {
      this.engine = null;
    }
  };

  GridStack.prototype.resizable = function(el, val) {
    var self = this;
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (!node) {
        return;
      }
      node.noResize = !(val || false);
      if (node.noResize) {
        self.dd.resizable(el, "disable");
      } else {
        self.dd.resizable(el, "enable");
      }
    });
    return this;
  };

  GridStack.prototype.movable = function(el, val) {
    var self = this;
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (!node) {
        return;
      }
      node.noMove = !(val || false);
      if (node.noMove) {
        self.dd.draggable(el, "disable");
        el.removeClass("ui-draggable-handle");
      } else {
        self.dd.draggable(el, "enable");
        el.addClass("ui-draggable-handle");
      }
    });
    return this;
  };

  GridStack.prototype.enableMove = function(doEnable, includeNewWidgets) {
    this.movable(this.$el.children("." + this.opts.itemClass), doEnable);
    if (includeNewWidgets) {
      this.opts.disableDrag = !doEnable;
    }
  };

  GridStack.prototype.enableResize = function(doEnable, includeNewWidgets) {
    this.resizable(this.$el.children("." + this.opts.itemClass), doEnable);
    if (includeNewWidgets) {
      this.opts.disableResize = !doEnable;
    }
  };

  GridStack.prototype.disable = function() {
    this.movable(this.$el.children("." + this.opts.itemClass), false);
    this.resizable(this.$el.children("." + this.opts.itemClass), false);
    this.$el.trigger("disable");
  };

  GridStack.prototype.enable = function() {
    this.movable(this.$el.children("." + this.opts.itemClass), true);
    this.resizable(this.$el.children("." + this.opts.itemClass), true);
    this.$el.trigger("enable");
  };

  GridStack.prototype.locked = function(el, val) {
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (!node) {
        return;
      }
      node.locked = val || false;
      el.attr("data-gs-locked", node.locked ? "yes" : null);
    });
    return this;
  };

  GridStack.prototype.maxHeight = function(el, val) {
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (!node) {
        return;
      }
      if (!isNaN(val)) {
        node.maxHeight = val || false;
        el.attr("data-gs-max-height", val);
      }
    });
    return this;
  };

  GridStack.prototype.minHeight = function(el, val) {
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (!node) {
        return;
      }
      if (!isNaN(val)) {
        node.minHeight = val || false;
        el.attr("data-gs-min-height", val);
      }
    });
    return this;
  };

  GridStack.prototype.maxWidth = function(el, val) {
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (!node) {
        return;
      }
      if (!isNaN(val)) {
        node.maxWidth = val || false;
        el.attr("data-gs-max-width", val);
      }
    });
    return this;
  };

  GridStack.prototype.minWidth = function(el, val) {
    el = $(el);
    el.each(function(index, el) {
      el = $(el);
      var node = el.data("_gridstack_node");
      if (!node) {
        return;
      }
      if (!isNaN(val)) {
        node.minWidth = val || false;
        el.attr("data-gs-min-width", val);
      }
    });
    return this;
  };

  GridStack.prototype._updateElement = function(el, callback) {
    el = $(el).first();
    var node = el.data("_gridstack_node");
    if (!node) {
      return;
    }
    var self = this;

    self.engine.cleanNodes();
    self.engine.beginUpdate(node);

    callback.call(this, el, node);

    self._updateContainerHeight();
    self._triggerChangeEvent();

    self.engine.endUpdate();
  };

  GridStack.prototype.resize = function(el, width, height) {
    this._updateElement(el, function(el, node) {
      width = width !== null && width !== undefined ? width : node.width;
      height = height !== null && height !== undefined ? height : node.height;

      this.engine.moveNode(node, node.x, node.y, width, height);
    });
  };

  GridStack.prototype.move = function(el, x, y) {
    this._updateElement(el, function(el, node) {
      x = x !== null && x !== undefined ? x : node.x;
      y = y !== null && y !== undefined ? y : node.y;

      this.engine.moveNode(node, x, y, node.width, node.height);
    });
  };

  GridStack.prototype.update = function(el, x, y, width, height) {
    this._updateElement(el, function(el, node) {
      x = x !== null && x !== undefined ? x : node.x;
      y = y !== null && y !== undefined ? y : node.y;
      width = width !== null && width !== undefined ? width : node.width;
      height = height !== null && height !== undefined ? height : node.height;

      this.engine.moveNode(node, x, y, width, height);
    });
  };

  /**
   * relayout grid items to reclaim any empty space
   */
  GridStack.prototype.compact = function() {
    if (this.engine.nodes.length === 0) {
      return;
    }
    this.batchUpdate();
    this.engine._sortNodes();
    var nodes = this.engine.nodes;
    this.engine.nodes = []; // pretend we have no nodes to conflict layout to start with...
    nodes.forEach(function(node) {
      if (!node.noMove && !node.locked) {
        node.autoPosition = true;
      }
      this.engine.addNode(node, false); // 'false' for add event trigger
      node._dirty = true; // force attr update
    }, this);
    this.commit();
  };

  GridStack.prototype.verticalMargin = function(val, noUpdate) {
    if (val === undefined) {
      return this.opts.verticalMargin;
    }

    var heightData = Utils.parseHeight(val);

    if (
      this.opts.verticalMarginUnit === heightData.unit &&
      this.opts.maxRow === heightData.height
    ) {
      return;
    }
    this.opts.verticalMarginUnit = heightData.unit;
    this.opts.verticalMargin = heightData.height;

    if (!noUpdate) {
      this._updateStyles();
    }
  };

  /** set/get the current cell height value */
  GridStack.prototype.cellHeight = function(val, noUpdate) {
    // getter - returns the opts stored height else compute it...
    if (val === undefined) {
      if (this.opts.cellHeight && this.opts.cellHeight !== "auto") {
        return this.opts.cellHeight;
      }
      // compute the height taking margin into account (each row has margin other than last one)
      var o = this.$el.children("." + this.opts.itemClass).first();
      var height = o.attr("data-gs-height");
      var verticalMargin = this.opts.verticalMargin;
      return Math.round(
        (o.outerHeight() - (height - 1) * verticalMargin) / height
      );
    }

    // setter - updates the cellHeight value if they changed
    var heightData = Utils.parseHeight(val);
    if (
      this.opts.cellHeightUnit === heightData.unit &&
      this.opts.cellHeight === heightData.height
    ) {
      return;
    }
    this.opts.cellHeightUnit = heightData.unit;
    this.opts.cellHeight = heightData.height;

    if (!noUpdate) {
      this._updateStyles();
    }
  };

  GridStack.prototype.cellWidth = function() {
    // TODO: take margin into account ($horizontal_padding in .scss) to make cellHeight='auto' square ? (see 810-many-columns.html)
    return Math.round(this.$el.outerWidth() / this.opts.column);
  };

  GridStack.prototype.getCellFromPixel = function(position, useOffset) {
    var containerPos =
      useOffset !== undefined && useOffset
        ? this.$el.offset()
        : this.$el.position();
    var relativeLeft = position.left - containerPos.left;
    var relativeTop = position.top - containerPos.top;

    var columnWidth = Math.floor(this.$el.width() / this.opts.column);
    var rowHeight = Math.floor(
      this.$el.height() / parseInt(this.$el.attr("data-gs-current-row"))
    );

    return {
      x: Math.floor(relativeLeft / columnWidth),
      y: Math.floor(relativeTop / rowHeight)
    };
  };

  GridStack.prototype.batchUpdate = function() {
    this.engine.batchUpdate();
  };

  GridStack.prototype.commit = function() {
    this.engine.commit();
    this._triggerRemoveEvent();
    this._triggerAddEvent();
    this._triggerChangeEvent();
  };

  GridStack.prototype.isAreaEmpty = function(x, y, width, height) {
    return this.engine.isAreaEmpty(x, y, width, height);
  };

  GridStack.prototype.setStatic = function(staticValue) {
    this.opts.staticGrid = staticValue === true;
    this.enableMove(!staticValue);
    this.enableResize(!staticValue);
    this._setStaticClass();
  };

  GridStack.prototype._setStaticClass = function() {
    var staticClassName = "grid-stack-static";

    if (this.opts.staticGrid === true) {
      this.$el.addClass(staticClassName);
    } else {
      this.$el.removeClass(staticClassName);
    }
  };

  /** called whenever a node is added or moved - updates the cached layouts */
  GridStackEngine.prototype._layoutsNodesChange = function(nodes) {
    if (!this._layouts || this._ignoreLayoutsNodeChange) return;
    // remove smaller layouts - we will re-generate those on the fly... larger ones need to update
    this._layouts.forEach(function(layout, column) {
      if (!layout || column === this.column) return;
      if (column < this.column) {
        this._layouts[column] = undefined;
      } else {
        // we save the original x,y,w (h isn't cached) to see what actually changed to propagate better.
        // Note: we don't need to check against out of bound scaling/moving as that will be done when using those cache values.
        nodes.forEach(function(node) {
          var n = layout.find(function(l) {
            return l._id === node._id;
          });
          if (!n) return; // no cache for new nodes. Will use those values.
          var ratio = column / this.column;
          // Y changed, push down same amount
          // TODO: detect doing item 'swaps' will help instead of move (especially in 1 column mode)
          if (node.y !== node._origY) {
            n.y += node.y - node._origY;
          }
          // X changed, scale from new position
          if (node.x !== node._origX) {
            n.x = Math.round(node.x * ratio);
          }
          // width changed, scale from new width
          if (node.width !== node._origW) {
            n.width = Math.round(node.width * ratio);
          }
          // ...height always carries over from cache
        }, this);
      }
    }, this);
  };

  /**
   * Called to scale the widget width & position up/down based on the column change.
   * Note we store previous layouts (especially original ones) to make it possible to go
   * from say 12 -> 1 -> 12 and get back to where we were.
   *
   * oldColumn: previous number of columns
   * column:    new column number
   * nodes?:    different sorted list (ex: DOM order) instead of current list
   */
  GridStackEngine.prototype._updateNodeWidths = function(
    oldColumn,
    column,
    nodes
  ) {
    if (!this.nodes.length || oldColumn === column) {
      return;
    }

    // cache the current layout in case they want to go back (like 12 -> 1 -> 12) as it requires original data
    var copy = [this.nodes.length];
    this.nodes.forEach(function(n, i) {
      copy[i] = { x: n.x, y: n.y, width: n.width, _id: n._id };
    }); // only thing we change is x,y,w and id to find it back
    this._layouts = this._layouts || []; // use array to find larger quick
    this._layouts[oldColumn] = copy;

    // if we're going to 1 column and using DOM order rather than default sorting, then generate that layout
    if (column === 1 && nodes && nodes.length) {
      var top = 0;
      nodes.forEach(function(n) {
        n.x = 0;
        n.width = 1;
        n.y = Math.max(n.y, top);
        top = n.y + n.height;
      });
    } else {
      nodes = Utils.sort(this.nodes, -1, oldColumn); // current column reverse sorting so we can insert last to front (limit collision)
    }

    // see if we have cached previous layout.
    var cacheNodes = this._layouts[column] || [];
    // if not AND we are going up in size start with the largest layout as down-scaling is more accurate
    var lastIndex = this._layouts.length - 1;
    if (cacheNodes.length === 0 && column > oldColumn && column < lastIndex) {
      cacheNodes = this._layouts[lastIndex] || [];
      if (cacheNodes.length) {
        // pretend we came from that larger column by assigning those values as starting point
        oldColumn = lastIndex;
        cacheNodes.forEach(function(cacheNode) {
          var j = nodes.findIndex(function(n) {
            return n && n._id === cacheNode._id;
          });
          if (j !== -1) {
            // still current, use cache info positions
            nodes[j].x = cacheNode.x;
            nodes[j].y = cacheNode.y;
            nodes[j].width = cacheNode.width;
          }
        });
        cacheNodes = []; // we still don't have new column cached data... will generate from larger one.
      }
    }

    // if we found cache re-use those nodes that are still current
    var newNodes = [];
    cacheNodes.forEach(function(cacheNode) {
      var j = nodes.findIndex(function(n) {
        return n && n._id === cacheNode._id;
      });
      if (j !== -1) {
        // still current, use cache info positions
        nodes[j].x = cacheNode.x;
        nodes[j].y = cacheNode.y;
        nodes[j].width = cacheNode.width;
        newNodes.push(nodes[j]);
        nodes[j] = null; // erase it so we know what's left
      }
    });
    // ...and add any extra non-cached ones
    var ratio = column / oldColumn;
    nodes.forEach(function(node) {
      if (!node) return;
      node.x = column === 1 ? 0 : Math.round(node.x * ratio);
      node.width =
        column === 1 || oldColumn === 1
          ? 1
          : Math.round(node.width * ratio) || 1;
      newNodes.push(node);
    });

    // finally relayout them in reverse order (to get correct placement)
    newNodes = Utils.sort(newNodes, -1, column);
    this._ignoreLayoutsNodeChange = true;
    this.batchUpdate();
    this.nodes = []; // pretend we have no nodes to start with (we use same structures) to simplify layout
    newNodes.forEach(function(node) {
      this.addNode(node, false); // 'false' for add event trigger
      node._dirty = true; // force attr update
    }, this);
    this.commit();
    delete this._ignoreLayoutsNodeChange;
  };

  /** called to save initial position/size */
  GridStackEngine.prototype._saveInitial = function() {
    this.nodes.forEach(function(n) {
      n._origX = n.x;
      n._origY = n.y;
      n._origW = n.width;
      n._origH = n.height;
      delete n._dirty;
    });
  };

  /**
   * set/get number of columns in the grid. Will attempt to update existing widgets
   * to conform to new number of columns. Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11],
   * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
   * @param column - Integer > 0 (default 12).
   * @param doNotPropagate if true existing widgets will not be updated (optional)
   */
  GridStack.prototype.column = function(column, doNotPropagate) {
    // getter - returns the opts stored mode
    if (column === undefined) {
      return this.opts.column;
    }
    // setter
    if (this.opts.column === column) {
      return;
    }
    var oldColumn = this.opts.column;

    // if we go into 1 column mode (which happens if we're sized less than minWidth unless disableOneColumnMode is on)
    // then remember the original columns so we can restore.
    if (column === 1) {
      this._prevColumn = oldColumn;
    } else {
      delete this._prevColumn;
    }

    this.$el.removeClass("grid-stack-" + oldColumn);
    this.$el.addClass("grid-stack-" + column);
    this.opts.column = this.engine.column = column;

    if (doNotPropagate === true) {
      return;
    }

    // update the items now - see if the dom order nodes should be passed instead (else default to current list)
    var domNodes;
    if (this.opts.oneColumnModeDomSort && column === 1) {
      domNodes = [];
      this.$el.children("." + this.opts.itemClass).each(function(index, el) {
        var node = $(el).data("_gridstack_node");
        if (node) {
          domNodes.push(node);
        }
      });
      if (!domNodes.length) {
        domNodes = undefined;
      }
    }
    this.engine._updateNodeWidths(oldColumn, column, domNodes);

    // and trigger our event last...
    this.engine._ignoreLayoutsNodeChange = true;
    this._triggerChangeEvent();
    delete this.engine._ignoreLayoutsNodeChange;
  };

  GridStack.prototype.float = function(val) {
    // getter - returns the opts stored mode
    if (val === undefined) {
      return this.opts.float || false;
    }
    // setter - updates the mode and relayout if gravity is back on
    if (this.opts.float === val) {
      return;
    }
    this.opts.float = this.engine.float = val || false;
    if (!val) {
      this.engine._packNodes();
      this.engine._notify();
      this._triggerChangeEvent();
    }
  };

  GridStack.prototype.getRow = function() {
    return this.engine.getRow();
  };

  /** Event handler that extracts our CustomEvent data out automatically for receiving custom
   * notifications (see doc for supported events)
   */
  GridStack.prototype.on = function(eventName, callback) {
    // check for array of names being passed instead
    if (eventName.indexOf(" ") !== -1) {
      var names = eventName.split(" ");
      names.forEach(function(name) {
        this.on(name, callback);
      }, this);
      return;
    }

    if (
      eventName === "change" ||
      eventName === "added" ||
      eventName === "removed"
    ) {
      // native CustomEvent handlers - cash the generic handlers so we can remove
      this._gsEventHandler = this._gsEventHandler || {};
      this._gsEventHandler[eventName] = function(event) {
        callback(event, event.detail);
      };
      this.el.addEventListener(eventName, this._gsEventHandler[eventName]);
    } else {
      // still JQuery events
      this.$el.on(eventName, callback);
    }
  };

  /** unsubscribe from the 'on' event */
  GridStack.prototype.off = function(eventName) {
    // check for array of names being passed instead
    if (eventName.indexOf(" ") !== -1) {
      var names = eventName.split(" ");
      names.forEach(function(name) {
        this.off(name, callback);
      }, this);
      return;
    }

    if (
      eventName === "change" ||
      eventName === "added" ||
      eventName === "removed"
    ) {
      // remove native CustomEvent handlers
      if (this._gsEventHandler && this._gsEventHandler[eventName]) {
        this.el.removeEventListener(eventName, this._gsEventHandler[eventName]);
        delete this._gsEventHandler[eventName];
      }
    } else {
      // still JQuery events
      this.$el.off(eventName);
    }
  };

  // legacy method renames
  GridStack.prototype.setGridWidth = obsolete(
    GridStack.prototype.column,
    "setGridWidth",
    "column",
    "v0.5.3"
  );
  GridStack.prototype.setColumn = obsolete(
    GridStack.prototype.column,
    "setColumn",
    "column",
    "v0.6.4"
  );
  GridStackEngine.prototype.getGridHeight = obsolete(
    GridStackEngine.prototype.getRow,
    "getGridHeight",
    "getRow",
    "v1.0.0"
  );

  scope.GridStack = GridStack;
  scope.GridStack.Utils = Utils;
  scope.GridStack.Engine = GridStackEngine;
  scope.GridStack.DragDropPlugin = GridStackDragDropPlugin;

  /**
   * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
   * simply return the existing instance (ignore any passed options).
   */
  GridStack.init = function(opts, elOrString) {
    if (!elOrString) {
      elOrString = ".grid-stack";
    }
    var el = $(elOrString).get(0);
    if (!el) return;
    if (!el.gridstack) {
      el.gridstack = new GridStack(el, Utils.clone(opts));
    }
    return el.gridstack;
  };

  /**
   * Will initialize a list of elements (given a selector) and return an array of grids.
   */
  GridStack.initAll = function(opts, selector) {
    if (!selector) {
      selector = ".grid-stack";
    }
    var grids = [];
    $(selector).each(function(index, el) {
      if (!el.gridstack) {
        el.gridstack = new GridStack(el, Utils.clone(opts));
      }
      grids.push(el.gridstack);
    });
    return grids;
  };

  return scope.GridStack;
});