From 38e027ab32d7e54efffcfbff1fb48bf8d54a8fe0 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <adumesny@vmware.com>
Date: Thu, 14 Nov 2019 08:42:11 -0800
Subject: [PATCH 1/3] code cleanup

* changed all == to ===, != to !== (no unwanted side affect)
---
 src/gridstack.js | 144 +++++++++++++++++++++++------------------------
 1 file changed, 72 insertions(+), 72 deletions(-)

diff --git a/src/gridstack.js b/src/gridstack.js
index 0de044bd8..521ed0034 100644
--- a/src/gridstack.js
+++ b/src/gridstack.js
@@ -46,7 +46,7 @@
         width = Math.max.apply(Math, widths);
       }
 
-      dir = dir != -1 ? 1 : -1;
+      dir = dir !== -1 ? 1 : -1;
       return Utils.sortBy(nodes, function(n) { return dir * (n.x + n.y * width); });
     },
 
@@ -76,18 +76,18 @@
     },
 
     toBool: function(v) {
-      if (typeof v == 'boolean') {
+      if (typeof v === 'boolean') {
         return v;
       }
-      if (typeof v == 'string') {
+      if (typeof v === 'string') {
         v = v.toLowerCase();
-        return !(v === '' || v == 'no' || v == 'false' || v == '0');
+        return !(v === '' || v === 'no' || v === 'false' || v === '0');
       }
       return Boolean(v);
     },
 
     _collisionNodeCheck: function(n) {
-      return n != this.node && Utils.isIntercepted(n, this.nn);
+      return n !== this.node && Utils.isIntercepted(n, this.nn);
     },
 
     _didCollide: function(bn) {
@@ -186,7 +186,7 @@
     },
     getScrollParent: function(el) {
       var returnEl;
-      if (el == null) {
+      if (el === null) {
         returnEl = null;
       } else if (el.scrollHeight > el.clientHeight) {
         returnEl = el;
@@ -208,7 +208,7 @@
         var offsetDiffDown = rect.bottom - innerHeightOrClientHeight;
         var offsetDiffUp = rect.top;
         var scrollEl = Utils.getScrollParent(el);
-        if (scrollEl != null) {
+        if (scrollEl !== null) {
           var prevScroll = scrollEl.scrollTop;
           if (rect.top < 0 && distance < 0) {
             // moving up
@@ -324,7 +324,7 @@
     }
     while (true) {
       var collisionNode = this.nodes.find(Utils._collisionNodeCheck, {node: node, nn: nn});
-      if (typeof collisionNode == 'undefined') {
+      if (typeof collisionNode === 'undefined') {
         return;
       }
       this.moveNode(collisionNode, collisionNode.x, node.y + node.height,
@@ -349,7 +349,7 @@
 
     if (this.float) {
       this.nodes.forEach(function(n, i) {
-        if (n._updating || typeof n._origY == 'undefined' || n.y == n._origY) {
+        if (n._updating || typeof n._origY === 'undefined' || n.y === n._origY) {
           return;
         }
 
@@ -379,13 +379,13 @@
             var collisionNode = this.nodes
               .slice(0, i)
               .find(Utils._didCollide, {n: n, newY: newY});
-            canBeMoved = typeof collisionNode == 'undefined';
+            canBeMoved = typeof collisionNode === 'undefined';
           }
 
           if (!canBeMoved) {
             break;
           }
-          n._dirty = n.y != newY;
+          n._dirty = n.y !== newY;
           n.y = newY;
         }
       }, this);
@@ -462,10 +462,10 @@
   GridStackEngine.prototype.addNode = function(node, triggerAddEvent) {
     node = this._prepareNode(node);
 
-    if (typeof node.maxWidth != 'undefined') { node.width = Math.min(node.width, node.maxWidth); }
-    if (typeof node.maxHeight != 'undefined') { node.height = Math.min(node.height, node.maxHeight); }
-    if (typeof node.minWidth != 'undefined') { node.width = Math.max(node.width, node.minWidth); }
-    if (typeof node.minHeight != 'undefined') { node.height = Math.max(node.height, node.minHeight); }
+    if (typeof node.maxWidth !== 'undefined') { node.width = Math.min(node.width, node.maxWidth); }
+    if (typeof node.maxHeight !== 'undefined') { node.height = Math.min(node.height, node.maxHeight); }
+    if (typeof node.minWidth !== 'undefined') { node.width = Math.max(node.width, node.minWidth); }
+    if (typeof node.minHeight !== 'undefined') { node.height = Math.max(node.height, node.minHeight); }
 
     node._id = ++idSeq;
     node._dirty = true;
@@ -488,7 +488,7 @@
     }
 
     this.nodes.push(node);
-    if (typeof triggerAddEvent != 'undefined' && triggerAddEvent) {
+    if (typeof triggerAddEvent !== 'undefined' && triggerAddEvent) {
       this._addedNodes.push(Utils.clone(node));
     }
 
@@ -524,7 +524,7 @@
       this.float,
       0,
       this.nodes.map(function(n) {
-        if (n == node) {
+        if (n === node) {
           clonedNode = $.extend({}, n);
           return clonedNode;
         }
@@ -541,7 +541,7 @@
 
     if (hasLocked) {
       res &= !Boolean(clone.nodes.find(function(n) {
-        return n != clonedNode && Boolean(n.locked) && Boolean(n._dirty);
+        return n !== clonedNode && Boolean(n.locked) && Boolean(n._dirty);
       }));
     }
     if (this.height) {
@@ -567,17 +567,17 @@
   };
 
   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 (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 (typeof node.maxWidth != 'undefined') { width = Math.min(width, node.maxWidth); }
-    if (typeof node.maxHeight != 'undefined') { height = Math.min(height, node.maxHeight); }
-    if (typeof node.minWidth != 'undefined') { width = Math.max(width, node.minWidth); }
-    if (typeof node.minHeight != 'undefined') { height = Math.max(height, node.minHeight); }
+    if (typeof node.maxWidth !== 'undefined') { width = Math.min(width, node.maxWidth); }
+    if (typeof node.maxHeight !== 'undefined') { height = Math.min(height, node.maxHeight); }
+    if (typeof node.minWidth !== 'undefined') { width = Math.max(width, node.minWidth); }
+    if (typeof node.minHeight !== 'undefined') { height = Math.max(height, node.minHeight); }
 
-    if (node.x == x && node.y == y && node.width == width && node.height == height) {
+    if (node.x === x && node.y === y && node.width === width && node.height === height) {
       return false;
     }
     return true;
@@ -587,21 +587,21 @@
     if (!this.isNodeChangedPosition(node, x, y, width, height)) {
       return node;
     }
-    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 (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 (typeof node.maxWidth != 'undefined') { width = Math.min(width, node.maxWidth); }
-    if (typeof node.maxHeight != 'undefined') { height = Math.min(height, node.maxHeight); }
-    if (typeof node.minWidth != 'undefined') { width = Math.max(width, node.minWidth); }
-    if (typeof node.minHeight != 'undefined') { height = Math.max(height, node.minHeight); }
+    if (typeof node.maxWidth !== 'undefined') { width = Math.min(width, node.maxWidth); }
+    if (typeof node.maxHeight !== 'undefined') { height = Math.min(height, node.maxHeight); }
+    if (typeof node.minWidth !== 'undefined') { width = Math.max(width, node.minWidth); }
+    if (typeof node.minHeight !== 'undefined') { height = Math.max(height, node.minHeight); }
 
-    if (node.x == x && node.y == y && node.width == width && node.height == height) {
+    if (node.x === x && node.y === y && node.width === width && node.height === height) {
       return node;
     }
 
-    var resizing = node.width != width;
+    var resizing = node.width !== width;
     node._dirty = true;
 
     node.x = x;
@@ -1084,7 +1084,7 @@
     var self = this;
     var getHeight;
 
-    if (typeof maxHeight == 'undefined') {
+    if (typeof maxHeight === 'undefined') {
       maxHeight = this._styles._max;
     }
     this._initStyles();
@@ -1214,12 +1214,12 @@
       var width;
       var height;
 
-      if (event.type != 'drag') {
+      if (event.type !== 'drag') {
         width = Math.round(ui.size.width / cellWidth);
         height = Math.round(ui.size.height / cellHeight);
       }
 
-      if (event.type == 'drag') {
+      if (event.type === 'drag') {
         var distance = ui.position.top - node._prevYPix;
         node._prevYPix = ui.position.top;
         Utils.updateScrollPosition(el[0], ui, distance);
@@ -1258,7 +1258,7 @@
             node._temporaryRemoved = false;
           }
         }
-      } else if (event.type == 'resize')  {
+      } else if (event.type === 'resize')  {
         if (x < 0) {
           return;
         }
@@ -1278,7 +1278,7 @@
       self.grid.moveNode(node, x, y, width, height);
       self._updateContainerHeight();
 
-      if (event.type == 'resize')  {
+      if (event.type === 'resize')  {
         $(event.target).trigger('gsresize', node);
       }
     };
@@ -1311,7 +1311,7 @@
       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') {
+      if (event.type === 'resizestart') {
         o.find('.grid-stack-item').trigger('resizestart');
       }
     };
@@ -1361,14 +1361,14 @@
       self.grid.endUpdate();
 
       var nestedGrids = o.find('.grid-stack');
-      if (nestedGrids.length && event.type == 'resizestop') {
+      if (nestedGrids.length && event.type === 'resizestop') {
         nestedGrids.each(function(index, el) {
           $(el).data('gridstack').onResizeHandler();
         });
         o.find('.grid-stack-item').trigger('resizestop');
         o.find('.grid-stack-item').trigger('gsresizestop');
       }
-      if (event.type == 'resizestop') {
+      if (event.type === 'resizestop') {
         self.container.trigger('gsresizestop', o);
       }
     };
@@ -1399,7 +1399,7 @@
   };
 
   GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
-    triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false;
+    triggerAddEvent = typeof triggerAddEvent !== 'undefined' ? triggerAddEvent : false;
     var self = this;
     el = $(el);
 
@@ -1444,16 +1444,16 @@
 
     el = $(el);
     // Note: passing null removes the attr in jquery
-    if (typeof x != 'undefined') { el.attr('data-gs-x', x); }
-    if (typeof y != 'undefined') { el.attr('data-gs-y', y); }
-    if (typeof width != 'undefined') { el.attr('data-gs-width', width); }
-    if (typeof height != 'undefined') { el.attr('data-gs-height', height); }
-    if (typeof autoPosition != 'undefined') { el.attr('data-gs-auto-position', autoPosition ? 'yes' : null); }
-    if (typeof minWidth != 'undefined') { el.attr('data-gs-min-width', minWidth); }
-    if (typeof maxWidth != 'undefined') { el.attr('data-gs-max-width', maxWidth); }
-    if (typeof minHeight != 'undefined') { el.attr('data-gs-min-height', minHeight); }
-    if (typeof maxHeight != 'undefined') { el.attr('data-gs-max-height', maxHeight); }
-    if (typeof id != 'undefined') { el.attr('data-gs-id', id); }
+    if (typeof x !== 'undefined') { el.attr('data-gs-x', x); }
+    if (typeof y !== 'undefined') { el.attr('data-gs-y', y); }
+    if (typeof width !== 'undefined') { el.attr('data-gs-width', width); }
+    if (typeof height !== 'undefined') { el.attr('data-gs-height', height); }
+    if (typeof autoPosition !== 'undefined') { el.attr('data-gs-auto-position', autoPosition ? 'yes' : null); }
+    if (typeof minWidth !== 'undefined') { el.attr('data-gs-min-width', minWidth); }
+    if (typeof maxWidth !== 'undefined') { el.attr('data-gs-max-width', maxWidth); }
+    if (typeof minHeight !== 'undefined') { el.attr('data-gs-min-height', minHeight); }
+    if (typeof maxHeight !== 'undefined') { el.attr('data-gs-max-height', maxHeight); }
+    if (typeof id !== 'undefined') { el.attr('data-gs-id', id); }
     this.container.append(el);
     this._prepareElement(el, true);
     this._triggerAddEvent();
@@ -1509,7 +1509,7 @@
   GridStack.prototype.destroy = function(detachGrid) {
     $(window).off('resize', this.onResizeHandler);
     this.disable();
-    if (typeof detachGrid != 'undefined' && !detachGrid) {
+    if (typeof detachGrid !== 'undefined' && !detachGrid) {
       this.removeAll(false);
       this.container.removeData('gridstack');
     } else {
@@ -1527,7 +1527,7 @@
     el.each(function(index, el) {
       el = $(el);
       var node = el.data('_gridstack_node');
-      if (typeof node == 'undefined' || node === null) {
+      if (typeof node === 'undefined' || node === null) {
         return;
       }
 
@@ -1547,7 +1547,7 @@
     el.each(function(index, el) {
       el = $(el);
       var node = el.data('_gridstack_node');
-      if (typeof node == 'undefined' || node === null) {
+      if (typeof node === 'undefined' || node === null) {
         return;
       }
 
@@ -1594,7 +1594,7 @@
     el.each(function(index, el) {
       el = $(el);
       var node = el.data('_gridstack_node');
-      if (typeof node == 'undefined' || node === null) {
+      if (typeof node === 'undefined' || node === null) {
         return;
       }
 
@@ -1675,7 +1675,7 @@
   GridStack.prototype._updateElement = function(el, callback) {
     el = $(el).first();
     var node = el.data('_gridstack_node');
-    if (typeof node == 'undefined' || node === null) {
+    if (typeof node === 'undefined' || node === null) {
       return;
     }
 
@@ -1694,8 +1694,8 @@
 
   GridStack.prototype.resize = function(el, width, height) {
     this._updateElement(el, function(el, node) {
-      width = (width !== null && typeof width != 'undefined') ? width : node.width;
-      height = (height !== null && typeof height != 'undefined') ? height : node.height;
+      width = (width !== null && typeof width !== 'undefined') ? width : node.width;
+      height = (height !== null && typeof height !== 'undefined') ? height : node.height;
 
       this.grid.moveNode(node, node.x, node.y, width, height);
     });
@@ -1703,8 +1703,8 @@
 
   GridStack.prototype.move = function(el, x, y) {
     this._updateElement(el, function(el, node) {
-      x = (x !== null && typeof x != 'undefined') ? x : node.x;
-      y = (y !== null && typeof y != 'undefined') ? y : node.y;
+      x = (x !== null && typeof x !== 'undefined') ? x : node.x;
+      y = (y !== null && typeof y !== 'undefined') ? y : node.y;
 
       this.grid.moveNode(node, x, y, node.width, node.height);
     });
@@ -1712,17 +1712,17 @@
 
   GridStack.prototype.update = function(el, x, y, width, height) {
     this._updateElement(el, function(el, node) {
-      x = (x !== null && typeof x != 'undefined') ? x : node.x;
-      y = (y !== null && typeof y != 'undefined') ? y : node.y;
-      width = (width !== null && typeof width != 'undefined') ? width : node.width;
-      height = (height !== null && typeof height != 'undefined') ? height : node.height;
+      x = (x !== null && typeof x !== 'undefined') ? x : node.x;
+      y = (y !== null && typeof y !== 'undefined') ? y : node.y;
+      width = (width !== null && typeof width !== 'undefined') ? width : node.width;
+      height = (height !== null && typeof height !== 'undefined') ? height : node.height;
 
       this.grid.moveNode(node, x, y, width, height);
     });
   };
 
   GridStack.prototype.verticalMargin = function(val, noUpdate) {
-    if (typeof val == 'undefined') {
+    if (typeof val === 'undefined') {
       return this.opts.verticalMargin;
     }
 
@@ -1742,7 +1742,7 @@
   /** set/get the current cell height value */
   GridStack.prototype.cellHeight = function(val, noUpdate) {
     // getter - returns the opts stored height else compute it...
-    if (typeof val == 'undefined') {
+    if (typeof val === 'undefined') {
       if (this.opts.cellHeight && this.opts.cellHeight !== 'auto') {
         return this.opts.cellHeight;
       }
@@ -1771,7 +1771,7 @@
   };
 
   GridStack.prototype.getCellFromPixel = function(position, useOffset) {
-    var containerPos = (typeof useOffset != 'undefined' && useOffset) ?
+    var containerPos = (typeof useOffset !== 'undefined' && useOffset) ?
       this.container.offset() : this.container.position();
     var relativeLeft = position.left - containerPos.left;
     var relativeTop = position.top - containerPos.top;

From f4f494fccdf1a6c827724b4afa51533d629aaf94 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <adumesny@vmware.com>
Date: Thu, 14 Nov 2019 10:52:55 -0800
Subject: [PATCH 2/3] changed (typeof foo !== 'undefined') to (foo !==
 underfine)

* shorten the test cases for all but first 2 instances than check for global vars
* in some browser this can be a lot faster too (80% on Edge)
https://jsperf.com/type-of-undefined-vs-undefined/30
* shorter notation. in some case just if (foo) as we should check for null as well
(if there are not 0 number cases)

ran all tests and demos. no issues.
---
 src/gridstack.js | 166 ++++++++++++++++++++---------------------------
 1 file changed, 69 insertions(+), 97 deletions(-)

diff --git a/src/gridstack.js b/src/gridstack.js
index 521ed0034..7ddea5dc7 100644
--- a/src/gridstack.js
+++ b/src/gridstack.js
@@ -324,9 +324,7 @@
     }
     while (true) {
       var collisionNode = this.nodes.find(Utils._collisionNodeCheck, {node: node, nn: nn});
-      if (typeof collisionNode === 'undefined') {
-        return;
-      }
+      if (!collisionNode) { return; }
       this.moveNode(collisionNode, collisionNode.x, node.y + node.height,
         collisionNode.width, collisionNode.height, true);
     }
@@ -337,7 +335,7 @@
     var collisionNode = this.nodes.find(function(n) {
       return Utils.isIntercepted(n, nn);
     });
-    return collisionNode === null || typeof collisionNode === 'undefined';
+    return !collisionNode;
   };
 
   GridStackEngine.prototype._sortNodes = function(dir) {
@@ -349,7 +347,7 @@
 
     if (this.float) {
       this.nodes.forEach(function(n, i) {
-        if (n._updating || typeof n._origY === 'undefined' || n.y === n._origY) {
+        if (n._updating || n._origY === undefined || n.y === n._origY) {
           return;
         }
 
@@ -379,7 +377,7 @@
             var collisionNode = this.nodes
               .slice(0, i)
               .find(Utils._didCollide, {n: n, newY: newY});
-            canBeMoved = typeof collisionNode === 'undefined';
+            canBeMoved = collisionNode === undefined;
           }
 
           if (!canBeMoved) {
@@ -439,8 +437,8 @@
 
   GridStackEngine.prototype._notify = function() {
     var args = Array.prototype.slice.call(arguments, 0);
-    args[0] = typeof args[0] === 'undefined' ? [] : [args[0]];
-    args[1] = typeof args[1] === 'undefined' ? true : args[1];
+    args[0] = args[0] === undefined ? [] : [args[0]];
+    args[1] = args[1] === undefined ? true : args[1];
     if (this._updateCounter) {
       return;
     }
@@ -462,10 +460,10 @@
   GridStackEngine.prototype.addNode = function(node, triggerAddEvent) {
     node = this._prepareNode(node);
 
-    if (typeof node.maxWidth !== 'undefined') { node.width = Math.min(node.width, node.maxWidth); }
-    if (typeof node.maxHeight !== 'undefined') { node.height = Math.min(node.height, node.maxHeight); }
-    if (typeof node.minWidth !== 'undefined') { node.width = Math.max(node.width, node.minWidth); }
-    if (typeof node.minHeight !== 'undefined') { node.height = Math.max(node.height, node.minHeight); }
+    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); }
 
     node._id = ++idSeq;
     node._dirty = true;
@@ -488,7 +486,7 @@
     }
 
     this.nodes.push(node);
-    if (typeof triggerAddEvent !== 'undefined' && triggerAddEvent) {
+    if (triggerAddEvent) {
       this._addedNodes.push(Utils.clone(node));
     }
 
@@ -499,7 +497,7 @@
   };
 
   GridStackEngine.prototype.removeNode = function(node, detachNode) {
-    detachNode = typeof detachNode === 'undefined' ? true : detachNode;
+    detachNode = detachNode === undefined ? true : detachNode;
     this._removedNodes.push(Utils.clone(node));
     node._id = null;
     this.nodes = Utils.without(this.nodes, node);
@@ -531,9 +529,7 @@
         return $.extend({}, n);
       }));
 
-    if (typeof clonedNode === 'undefined') {
-      return true;
-    }
+    if (!clonedNode) {  return true;}
 
     clone.moveNode(clonedNode, x, y, width, height);
 
@@ -572,10 +568,10 @@
     if (typeof width !== 'number') { width = node.width; }
     if (typeof height !== 'number') { height = node.height; }
 
-    if (typeof node.maxWidth !== 'undefined') { width = Math.min(width, node.maxWidth); }
-    if (typeof node.maxHeight !== 'undefined') { height = Math.min(height, node.maxHeight); }
-    if (typeof node.minWidth !== 'undefined') { width = Math.max(width, node.minWidth); }
-    if (typeof node.minHeight !== 'undefined') { height = Math.max(height, node.minHeight); }
+    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;
@@ -592,10 +588,10 @@
     if (typeof width !== 'number') { width = node.width; }
     if (typeof height !== 'number') { height = node.height; }
 
-    if (typeof node.maxWidth !== 'undefined') { width = Math.min(width, node.maxWidth); }
-    if (typeof node.maxHeight !== 'undefined') { height = Math.min(height, node.maxHeight); }
-    if (typeof node.minWidth !== 'undefined') { width = Math.max(width, node.minWidth); }
-    if (typeof node.minHeight !== 'undefined') { height = Math.max(height, node.minHeight); }
+    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 node;
@@ -654,43 +650,43 @@
     this.container = $(el);
 
     /*eslint-disable camelcase */
-    if (typeof opts.handle_class !== 'undefined') {
+    if (opts.handle_class !== undefined) {
       opts.handleClass = opts.handle_class;
       obsoleteOpts('handle_class', 'handleClass');
     }
-    if (typeof opts.item_class !== 'undefined') {
+    if (opts.item_class !== undefined) {
       opts.itemClass = opts.item_class;
       obsoleteOpts('item_class', 'itemClass');
     }
-    if (typeof opts.placeholder_class !== 'undefined') {
+    if (opts.placeholder_class !== undefined) {
       opts.placeholderClass = opts.placeholder_class;
       obsoleteOpts('placeholder_class', 'placeholderClass');
     }
-    if (typeof opts.placeholder_text !== 'undefined') {
+    if (opts.placeholder_text !== undefined) {
       opts.placeholderText = opts.placeholder_text;
       obsoleteOpts('placeholder_text', 'placeholderText');
     }
-    if (typeof opts.cell_height !== 'undefined') {
+    if (opts.cell_height !== undefined) {
       opts.cellHeight = opts.cell_height;
       obsoleteOpts('cell_height', 'cellHeight');
     }
-    if (typeof opts.vertical_margin !== 'undefined') {
+    if (opts.vertical_margin !== undefined) {
       opts.verticalMargin = opts.vertical_margin;
       obsoleteOpts('vertical_margin', 'verticalMargin');
     }
-    if (typeof opts.min_width !== 'undefined') {
+    if (opts.min_width !== undefined) {
       opts.minWidth = opts.min_width;
       obsoleteOpts('min_width', 'minWidth');
     }
-    if (typeof opts.static_grid !== 'undefined') {
+    if (opts.static_grid !== undefined) {
       opts.staticGrid = opts.static_grid;
       obsoleteOpts('static_grid', 'staticGrid');
     }
-    if (typeof opts.is_nested !== 'undefined') {
+    if (opts.is_nested !== undefined) {
       opts.isNested = opts.is_nested;
       obsoleteOpts('is_nested', 'isNested');
     }
-    if (typeof opts.always_show_resize_handle !== 'undefined') {
+    if (opts.always_show_resize_handle !== undefined) {
       opts.alwaysShowResizeHandle = opts.always_show_resize_handle;
       obsoleteOpts('always_show_resize_handle', 'alwaysShowResizeHandle');
     }
@@ -779,7 +775,7 @@
     this._initStyles();
 
     this.grid = new GridStackEngine(this.opts.width, function(nodes, detachNode) {
-      detachNode = typeof detachNode === 'undefined' ? true : detachNode;
+      detachNode = detachNode === undefined ? true : detachNode;
       var maxHeight = 0;
       this.nodes.forEach(function(n) {
         maxHeight = Math.max(maxHeight, n.y + n.height);
@@ -1000,7 +996,7 @@
           var el = $(ui.draggable).clone(false);
           el.data('_gridstack_node', node);
           var originalNode = $(ui.draggable).data('_gridstack_node_orig');
-          if (typeof originalNode !== 'undefined' && typeof originalNode._grid !== 'undefined') {
+          if (originalNode !== undefined && originalNode._grid !== undefined) {
             originalNode._grid._triggerRemoveEvent();
           }
           $(ui.helper).remove();
@@ -1076,7 +1072,7 @@
   };
 
   GridStack.prototype._updateStyles = function(maxHeight) {
-    if (this._styles === null || typeof this._styles === 'undefined') {
+    if (this._styles === null || this._styles === undefined) {
       return;
     }
 
@@ -1084,7 +1080,7 @@
     var self = this;
     var getHeight;
 
-    if (typeof maxHeight === 'undefined') {
+    if (maxHeight === undefined) {
       maxHeight = this._styles._max;
     }
     this._initStyles();
@@ -1264,8 +1260,8 @@
         }
       }
       // width and height are undefined if not resizing
-      var lastTriedWidth = typeof width !== 'undefined' ? width : node.lastTriedWidth;
-      var lastTriedHeight = typeof height !== 'undefined' ? height : node.lastTriedHeight;
+      var lastTriedWidth = width !== undefined ? width : node.lastTriedWidth;
+      var lastTriedHeight = height !== undefined ? height : node.lastTriedHeight;
       if (!self.grid.canMoveNode(node, x, y, width, height) ||
         (node.lastTriedX === x && node.lastTriedY === y &&
         node.lastTriedWidth === lastTriedWidth && node.lastTriedHeight === lastTriedHeight)) {
@@ -1399,7 +1395,7 @@
   };
 
   GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
-    triggerAddEvent = typeof triggerAddEvent !== 'undefined' ? triggerAddEvent : false;
+    triggerAddEvent = triggerAddEvent !== undefined ? triggerAddEvent : false;
     var self = this;
     el = $(el);
 
@@ -1444,16 +1440,16 @@
 
     el = $(el);
     // Note: passing null removes the attr in jquery
-    if (typeof x !== 'undefined') { el.attr('data-gs-x', x); }
-    if (typeof y !== 'undefined') { el.attr('data-gs-y', y); }
-    if (typeof width !== 'undefined') { el.attr('data-gs-width', width); }
-    if (typeof height !== 'undefined') { el.attr('data-gs-height', height); }
-    if (typeof autoPosition !== 'undefined') { el.attr('data-gs-auto-position', autoPosition ? 'yes' : null); }
-    if (typeof minWidth !== 'undefined') { el.attr('data-gs-min-width', minWidth); }
-    if (typeof maxWidth !== 'undefined') { el.attr('data-gs-max-width', maxWidth); }
-    if (typeof minHeight !== 'undefined') { el.attr('data-gs-min-height', minHeight); }
-    if (typeof maxHeight !== 'undefined') { el.attr('data-gs-max-height', maxHeight); }
-    if (typeof id !== 'undefined') { el.attr('data-gs-id', id); }
+    if (x !== undefined) { el.attr('data-gs-x', x); }
+    if (y !== undefined) { el.attr('data-gs-y', y); }
+    if (width !== undefined) { el.attr('data-gs-width', width); }
+    if (height !== undefined) { el.attr('data-gs-height', height); }
+    if (autoPosition !== undefined) { el.attr('data-gs-auto-position', autoPosition ? 'yes' : null); }
+    if (minWidth !== undefined) { el.attr('data-gs-min-width', minWidth); }
+    if (maxWidth !== undefined) { el.attr('data-gs-max-width', maxWidth); }
+    if (minHeight !== undefined) { el.attr('data-gs-min-height', minHeight); }
+    if (maxHeight !== undefined) { el.attr('data-gs-max-height', maxHeight); }
+    if (id !== undefined) { el.attr('data-gs-id', id); }
     this.container.append(el);
     this._prepareElement(el, true);
     this._triggerAddEvent();
@@ -1479,7 +1475,7 @@
   };
 
   GridStack.prototype.removeWidget = function(el, detachNode) {
-    detachNode = typeof detachNode === 'undefined' ? true : detachNode;
+    detachNode = detachNode === undefined ? true : detachNode;
     el = $(el);
     var node = el.data('_gridstack_node');
 
@@ -1509,7 +1505,7 @@
   GridStack.prototype.destroy = function(detachGrid) {
     $(window).off('resize', this.onResizeHandler);
     this.disable();
-    if (typeof detachGrid !== 'undefined' && !detachGrid) {
+    if (detachGrid !== undefined && !detachGrid) {
       this.removeAll(false);
       this.container.removeData('gridstack');
     } else {
@@ -1527,10 +1523,7 @@
     el.each(function(index, el) {
       el = $(el);
       var node = el.data('_gridstack_node');
-      if (typeof node === 'undefined' || node === null) {
-        return;
-      }
-
+      if (!node) { return; }
       node.noResize = !(val || false);
       if (node.noResize || (self._isOneColumnMode() && !self.opts.disableOneColumnMode)) {
         self.dd.resizable(el, 'disable');
@@ -1547,10 +1540,7 @@
     el.each(function(index, el) {
       el = $(el);
       var node = el.data('_gridstack_node');
-      if (typeof node === 'undefined' || node === null) {
-        return;
-      }
-
+      if (!node) { return; }
       node.noMove = !(val || false);
       if (node.noMove || (self._isOneColumnMode() && !self.opts.disableOneColumnMode)) {
         self.dd.draggable(el, 'disable');
@@ -1594,10 +1584,7 @@
     el.each(function(index, el) {
       el = $(el);
       var node = el.data('_gridstack_node');
-      if (typeof node === 'undefined' || node === null) {
-        return;
-      }
-
+      if (!node) { return; }
       node.locked = (val || false);
       el.attr('data-gs-locked', node.locked ? 'yes' : null);
     });
@@ -1609,10 +1596,7 @@
     el.each(function(index, el) {
       el = $(el);
       var node = el.data('_gridstack_node');
-      if (typeof node === 'undefined' || node === null) {
-        return;
-      }
-
+      if (!node) { return; }
       if (!isNaN(val)) {
         node.maxHeight = (val || false);
         el.attr('data-gs-max-height', val);
@@ -1626,10 +1610,7 @@
     el.each(function(index, el) {
       el = $(el);
       var node = el.data('_gridstack_node');
-      if (typeof node === 'undefined' || node === null) {
-        return;
-      }
-
+      if (!node) { return; }
       if (!isNaN(val)) {
         node.minHeight = (val || false);
         el.attr('data-gs-min-height', val);
@@ -1643,10 +1624,7 @@
     el.each(function(index, el) {
       el = $(el);
       var node = el.data('_gridstack_node');
-      if (typeof node === 'undefined' || node === null) {
-        return;
-      }
-
+      if (!node) { return; }
       if (!isNaN(val)) {
         node.maxWidth = (val || false);
         el.attr('data-gs-max-width', val);
@@ -1660,10 +1638,7 @@
     el.each(function(index, el) {
       el = $(el);
       var node = el.data('_gridstack_node');
-      if (typeof node === 'undefined' || node === null) {
-        return;
-      }
-
+      if (!node) { return; }
       if (!isNaN(val)) {
         node.minWidth = (val || false);
         el.attr('data-gs-min-width', val);
@@ -1675,10 +1650,7 @@
   GridStack.prototype._updateElement = function(el, callback) {
     el = $(el).first();
     var node = el.data('_gridstack_node');
-    if (typeof node === 'undefined' || node === null) {
-      return;
-    }
-
+    if (!node) { return; }
     var self = this;
 
     self.grid.cleanNodes();
@@ -1694,8 +1666,8 @@
 
   GridStack.prototype.resize = function(el, width, height) {
     this._updateElement(el, function(el, node) {
-      width = (width !== null && typeof width !== 'undefined') ? width : node.width;
-      height = (height !== null && typeof height !== 'undefined') ? height : node.height;
+      width = (width !== null && width !== undefined) ? width : node.width;
+      height = (height !== null && height !== undefined) ? height : node.height;
 
       this.grid.moveNode(node, node.x, node.y, width, height);
     });
@@ -1703,8 +1675,8 @@
 
   GridStack.prototype.move = function(el, x, y) {
     this._updateElement(el, function(el, node) {
-      x = (x !== null && typeof x !== 'undefined') ? x : node.x;
-      y = (y !== null && typeof y !== 'undefined') ? y : node.y;
+      x = (x !== null && x !== undefined) ? x : node.x;
+      y = (y !== null && y !== undefined) ? y : node.y;
 
       this.grid.moveNode(node, x, y, node.width, node.height);
     });
@@ -1712,17 +1684,17 @@
 
   GridStack.prototype.update = function(el, x, y, width, height) {
     this._updateElement(el, function(el, node) {
-      x = (x !== null && typeof x !== 'undefined') ? x : node.x;
-      y = (y !== null && typeof y !== 'undefined') ? y : node.y;
-      width = (width !== null && typeof width !== 'undefined') ? width : node.width;
-      height = (height !== null && typeof height !== 'undefined') ? height : node.height;
+      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.grid.moveNode(node, x, y, width, height);
     });
   };
 
   GridStack.prototype.verticalMargin = function(val, noUpdate) {
-    if (typeof val === 'undefined') {
+    if (val === undefined) {
       return this.opts.verticalMargin;
     }
 
@@ -1742,7 +1714,7 @@
   /** set/get the current cell height value */
   GridStack.prototype.cellHeight = function(val, noUpdate) {
     // getter - returns the opts stored height else compute it...
-    if (typeof val === 'undefined') {
+    if (val === undefined) {
       if (this.opts.cellHeight && this.opts.cellHeight !== 'auto') {
         return this.opts.cellHeight;
       }
@@ -1771,7 +1743,7 @@
   };
 
   GridStack.prototype.getCellFromPixel = function(position, useOffset) {
-    var containerPos = (typeof useOffset !== 'undefined' && useOffset) ?
+    var containerPos = (useOffset !== undefined && useOffset) ?
       this.container.offset() : this.container.position();
     var relativeLeft = position.left - containerPos.left;
     var relativeTop = position.top - containerPos.top;

From af5cb5f886260b18639dc426e6ea1ac94b7cda3b Mon Sep 17 00:00:00 2001
From: Alain Dumesny <adumesny@vmware.com>
Date: Thu, 14 Nov 2019 10:53:47 -0800
Subject: [PATCH 3/3] fix demos to have regular buttons latest bootstrap maks
 them flat (no border)

---
 demo/anijs.html         | 17 ++++-------------
 demo/float.html         | 14 ++++----------
 demo/serialization.html | 18 +++++-------------
 3 files changed, 13 insertions(+), 36 deletions(-)

diff --git a/demo/anijs.html b/demo/anijs.html
index 32a1aadae..57823ff9a 100644
--- a/demo/anijs.html
+++ b/demo/anijs.html
@@ -37,19 +37,10 @@
 <body>
   <div class="container-fluid">
     <h1>AniJS demo</h1>
-
-    <div>
-      <a class="btn btn-default" id="add-widget" href="#">Add Widget</a>
-    </div>
-
-    <div>
-      <h4>Widget added</h4>
-    </div>
-
-    <br/>
-
-    <div class="grid-stack">
-    </div>
+    <button id="add-widget" href="#">Add Widget</button>
+    <h4>Widget added</h4>
+    <br>
+    <div class="grid-stack"></div>
   </div>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs.js"></script>
diff --git a/demo/float.html b/demo/float.html
index 8bec1960d..eab9902e4 100644
--- a/demo/float.html
+++ b/demo/float.html
@@ -35,15 +35,9 @@
 <body>
   <div class="container-fluid">
     <h1>Float grid demo</h1>
-
-    <div>
-      <a class="btn btn-default" id="add-new-widget" href="#">Add Widget</a>
-    </div>
-
-    <br/>
-
-    <div class="grid-stack">
-    </div>
+    <button id="add-widget" href="#">Add Widget</button>
+    <br><br>
+    <div class="grid-stack"></div>
   </div>
 
 
@@ -79,7 +73,7 @@ <h1>Float grid demo</h1>
           return false;
         }.bind(this);
 
-        $('#add-new-widget').click(this.addNewWidget);
+        $('#add-widget').click(this.addNewWidget);
       };
     });
   </script>
diff --git a/demo/serialization.html b/demo/serialization.html
index 7548ad40d..7f9be56ac 100644
--- a/demo/serialization.html
+++ b/demo/serialization.html
@@ -35,20 +35,12 @@
 <body>
     <div class="container-fluid">
         <h1>Serialization demo</h1>
-
-        <div>
-            <a class="btn btn-default" id="save-grid" href="#">Save Grid</a>
-            <a class="btn btn-default" id="load-grid" href="#">Load Grid</a>
-            <a class="btn btn-default" id="clear-grid" href="#">Clear Grid</a>
-        </div>
-
-        <br/>
-
-        <div class="grid-stack">
-        </div>
-
+        <button id="save-grid" href="#">Save Grid</button>
+        <button id="load-grid" href="#">Load Grid</button>
+        <button id="clear-grid" href="#">Clear Grid</button>
+        <br/><br/>
+        <div class="grid-stack"></div>
         <hr/>
-
         <textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>
     </div>