Fix gridstack js version 1.2

pandora_console/include/javascript/gridstack.jQueryUI.js

@@ -1,86 +1,64 @@
+/** gridstack.js 1.2.1 - JQuery UI Drag&Drop plugin @preserve */
 /**
- * gridstack.js 0.3.0
+ * https://gridstackjs.com/
- * http://troolee.github.io/gridstack.js/
+ * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
- * (c) 2014-2016 Pavel Reznikov, Dylan Weiss
  * gridstack.js may be freely distributed under the MIT license.
- * @preserve
  */
 (function(factory) {
   if (typeof define === "function" && define.amd) {
-    define([
+    define(["jquery", "gridstack", "exports"], factory);
-      "jquery",
-      "lodash",
-      "gridstack",
-      "jquery-ui/data",
-      "jquery-ui/disable-selection",
-      "jquery-ui/focusable",
-      "jquery-ui/form",
-      "jquery-ui/ie",
-      "jquery-ui/keycode",
-      "jquery-ui/labels",
-      "jquery-ui/jquery-1-7",
-      "jquery-ui/plugin",
-      "jquery-ui/safe-active-element",
-      "jquery-ui/safe-blur",
-      "jquery-ui/scroll-parent",
-      "jquery-ui/tabbable",
-      "jquery-ui/unique-id",
-      "jquery-ui/version",
-      "jquery-ui/widget",
-      "jquery-ui/widgets/mouse",
-      "jquery-ui/widgets/draggable",
-      "jquery-ui/widgets/droppable",
-      "jquery-ui/widgets/resizable"
-    ], factory);
   } else if (typeof exports !== "undefined") {
     try {
       jQuery = require("jquery");
     } catch (e) {}
     try {
-      _ = require("lodash");
+      gridstack = require("gridstack");
     } catch (e) {}
-    try {
+    factory(jQuery, gridstack.GridStack, exports);
-      GridStackUI = require("gridstack");
-    } catch (e) {}
-    factory(jQuery, _, GridStackUI);
   } else {
-    factory(jQuery, _, GridStackUI);
+    factory(jQuery, GridStack, window);
   }
-})(function($, _, GridStackUI) {
+})(function($, GridStack, scope) {
-  var scope = window;
-
   /**
    * @class JQueryUIGridStackDragDropPlugin
    * jQuery UI implementation of drag'n'drop gridstack plugin.
    */
   function JQueryUIGridStackDragDropPlugin(grid) {
-    GridStackUI.GridStackDragDropPlugin.call(this, grid);
+    GridStack.DragDropPlugin.call(this, grid);
   }
 
-  GridStackUI.GridStackDragDropPlugin.registerPlugin(
+  GridStack.DragDropPlugin.registerPlugin(JQueryUIGridStackDragDropPlugin);
-    JQueryUIGridStackDragDropPlugin
-  );
 
   JQueryUIGridStackDragDropPlugin.prototype = Object.create(
-    GridStackUI.GridStackDragDropPlugin.prototype
+    GridStack.DragDropPlugin.prototype
   );
   JQueryUIGridStackDragDropPlugin.prototype.constructor = JQueryUIGridStackDragDropPlugin;
 
   JQueryUIGridStackDragDropPlugin.prototype.resizable = function(el, opts) {
     el = $(el);
-    if (opts === "disable" || opts === "enable") {
+    if (opts === "disable" || opts === "enable" || opts === "destroy") {
       el.resizable(opts);
     } else if (opts === "option") {
       var key = arguments[2];
       var value = arguments[3];
       el.resizable(opts, key, value);
     } else {
+      var handles = el.data("gs-resize-handles")
+        ? el.data("gs-resize-handles")
+        : this.grid.opts.resizable.handles;
       el.resizable(
-        _.extend({}, this.grid.opts.resizable, {
+        $.extend(
-          start: opts.start || function() {},
+          {},
-          stop: opts.stop || function() {},
+          this.grid.opts.resizable,
-          resize: opts.resize || function() {}
+          {
-        })
+            handles: handles
+          },
+          {
+            start: opts.start || function() {},
+            stop: opts.stop || function() {},
+            resize: opts.resize || function() {}
+          }
+        )
       );
     }
     return this;
@@ -88,14 +66,15 @@
 
   JQueryUIGridStackDragDropPlugin.prototype.draggable = function(el, opts) {
     el = $(el);
-    if (opts === "disable" || opts === "enable") {
+    if (opts === "disable" || opts === "enable" || opts === "destroy") {
       el.draggable(opts);
     } else {
       el.draggable(
-        _.extend({}, this.grid.opts.draggable, {
+        $.extend({}, this.grid.opts.draggable, {
-          containment: this.grid.opts.isNested
+          containment:
-            ? this.grid.container.parent()
+            this.grid.opts.isNested && !this.grid.opts.dragOut
-            : null,
+              ? this.grid.$el.parent()
+              : this.grid.opts.draggable.containment || null,
           start: opts.start || function() {},
           stop: opts.stop || function() {},
           drag: opts.drag || function() {}
@@ -107,13 +86,7 @@
 
   JQueryUIGridStackDragDropPlugin.prototype.droppable = function(el, opts) {
     el = $(el);
-    if (opts === "disable" || opts === "enable") {
+    el.droppable(opts);
-      el.droppable(opts);
-    } else {
-      el.droppable({
-        accept: opts.accept
-      });
-    }
     return this;
   };
 
@@ -131,5 +104,7 @@
     return this;
   };
 
+  scope.JQueryUIGridStackDragDropPlugin = JQueryUIGridStackDragDropPlugin;
+
   return JQueryUIGridStackDragDropPlugin;
 });

pandora_console/include/javascript/pandora_dashboards.js

@@ -1,4 +1,4 @@
-/* globals $ load_modal TreeController, forced_title_callback, createVisualConsole, tinyMCE*/
+/* globals $, GridStack, load_modal, TreeController, forced_title_callback, createVisualConsole, tinyMCE*/
 // eslint-disable-next-line no-unused-vars
 function show_option_dialog(settings) {
   load_modal({
@@ -56,8 +56,7 @@ function showGroup() {
 
 // eslint-disable-next-line no-unused-vars
 function initialiceLayout(data) {
-  var $grid = $(".grid-stack");
+  var grid = GridStack.init({
-  $grid.gridstack({
     float: true,
     column: 12,
     alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
@@ -71,9 +70,7 @@ function initialiceLayout(data) {
     draggable: false
   });
 
-  var grid = $grid.data("gridstack");
+  var positionGrid = 0; //grid[0].getBoundingClientRect();
-
-  var positionGrid = $grid[0].getBoundingClientRect();
   // var gridHeight = positionGrid.height;
   var gridWidth = positionGrid.width;
 
@@ -198,8 +195,8 @@ function initialiceLayout(data) {
         addSpinner(element);
 
         // Width and height.
-        var newWidth = elem.attr("data-gs-width");
+        var newWidth = $(elem).attr("data-gs-width");
-        var newHeight = elem.attr("data-gs-height");
+        var newHeight = $(elem).attr("data-gs-height");
 
         $.ajax({
           method: "post",
@@ -237,7 +234,7 @@ function initialiceLayout(data) {
               var parentElement = $("#widget-" + id).parent();
               grid.enableMove(parentElement, true);
               grid.enableResize(parentElement, true);
-              grid.grid.float = false;
+              grid.float(false);
             }
           },
           error: function(error) {
@@ -451,7 +448,7 @@ function initialiceLayout(data) {
     if ($("#checkbox-edit-mode").is(":checked")) {
       grid.movable(".grid-stack-item", true);
       grid.resizable(".grid-stack-item", true);
-      grid.grid.float = false;
+      grid.float(false);
       $(".header-options").show();
       $(".add-widget").show();
       $(".new-widget-message").hide();
@@ -460,7 +457,7 @@ function initialiceLayout(data) {
     } else {
       grid.movable(".grid-stack-item", false);
       grid.resizable(".grid-stack-item", false);
-      grid.grid.float = true;
+      grid.float(true);
       $(".header-options").hide();
       $(".add-widget").hide();
       $(".new-widget-message").show();

pandora_console/views/dashboard/layout.php

@@ -35,7 +35,8 @@
 
 // Js Files.
 \ui_require_javascript_file('underscore-min');
-\ui_require_javascript_file('gridstack.all');
+\ui_require_javascript_file('gridstack');
+\ui_require_javascript_file('gridstack.jQueryUI');
 \ui_require_javascript_file('pandora_dashboards');
 \ui_require_jquery_file('countdown');