diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 14eafbf9d..42b8ee5f0 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -28,7 +28,8 @@ Change log ## v0.6.0-dev (upcoming changes) -- TBD +- one column mode (<768px by default) now simply calls `setColumn(1)` and remembers prev columns (so we can restore). This gives +us full resize/re-order of items capabilities rathern than a locked CSS only layout (see prev rev changes). ## v0.6.0 (2019-12-24) diff --git a/src/gridstack.d.ts b/src/gridstack.d.ts index bbeeb24d0..e298b5f8f 100644 --- a/src/gridstack.d.ts +++ b/src/gridstack.d.ts @@ -484,7 +484,7 @@ interface GridstackOptions { itemClass ? : string; /** - * minimal width. If window width is less, grid will be shown in one - column mode (default?: 768) + * minimal width. If window width is less, grid will be shown in one column mode (default?: 768) */ minWidth ? : number; diff --git a/src/gridstack.js b/src/gridstack.js index 6a5e895c1..abf8cb50e 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -666,7 +666,7 @@ var GridStack = function(el, opts) { var self = this; - var oneColumnMode, isAutoCellHeight; + var _prevColumn, isAutoCellHeight; opts = opts || {}; @@ -814,52 +814,27 @@ 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._isOneColumnMode() && !self.opts.disableOneColumnMode) { - if (oneColumnMode) { - return; - } - self.container.addClass(self.opts.oneColumnModeClass); - oneColumnMode = true; - - self.grid._sortNodes(); - self.grid.nodes.forEach(function(node) { - self.container.append(node.el); + var oneColumnWidth = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= self.opts.minWidth; - if (self.opts.staticGrid) { - return; - } - self.dd.draggable(node.el, 'disable'); - self.dd.resizable(node.el, 'disable'); + if (oneColumnWidth && !self.opts.disableOneColumnMode) { + if (self._prevColumn || self.opts.staticGrid) { return; } - node.el.trigger('resize'); - }); + self.container.addClass(self.opts.oneColumnModeClass); // TODO: legacy do people still depend on style being there ? + self.setColumn(1); } else { - if (!oneColumnMode) { - return; - } + if (!self._prevColumn || self.opts.staticGrid) { return; } self.container.removeClass(self.opts.oneColumnModeClass); - oneColumnMode = false; - - if (self.opts.staticGrid) { - return; - } - - self.grid.nodes.forEach(function(node) { - if (!node.noMove && !self.opts.disableDrag) { - self.dd.draggable(node.el, 'enable'); - } - if (!node.noResize && !self.opts.disableResize) { - self.dd.resizable(node.el, 'enable'); - } - - node.el.trigger('resize'); - }); + self.setColumn(self._prevColumn); } }; @@ -1170,11 +1145,6 @@ } }; - GridStack.prototype._isOneColumnMode = function() { - return (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= - this.opts.minWidth; - }; - GridStack.prototype._setupRemovingTimeout = function(el) { var self = this; var node = $(el).data('_gridstack_node'); @@ -1383,13 +1353,11 @@ resize: dragOrResize }); - if (node.noMove || (this._isOneColumnMode() && !self.opts.disableOneColumnMode) || this.opts.disableDrag || - this.opts.staticGrid) { + if (node.noMove || this.opts.disableDrag || this.opts.staticGrid) { this.dd.draggable(el, 'disable'); } - if (node.noResize || (this._isOneColumnMode() && !self.opts.disableOneColumnMode) || this.opts.disableResize || - this.opts.staticGrid) { + if (node.noResize || this.opts.disableResize || this.opts.staticGrid) { this.dd.resizable(el, 'disable'); } @@ -1546,7 +1514,7 @@ var node = el.data('_gridstack_node'); if (!node) { return; } node.noResize = !(val || false); - if (node.noResize || (self._isOneColumnMode() && !self.opts.disableOneColumnMode)) { + if (node.noResize) { self.dd.resizable(el, 'disable'); } else { self.dd.resizable(el, 'enable'); @@ -1563,7 +1531,7 @@ var node = el.data('_gridstack_node'); if (!node) { return; } node.noMove = !(val || false); - if (node.noMove || (self._isOneColumnMode() && !self.opts.disableOneColumnMode)) { + if (node.noMove) { self.dd.draggable(el, 'disable'); el.removeClass('ui-draggable-handle'); } else { @@ -1931,6 +1899,14 @@ 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.container.removeClass('grid-stack-' + oldColumn); this.container.addClass('grid-stack-' + column); this.opts.column = this.grid.column = column; diff --git a/src/gridstack.scss b/src/gridstack.scss index ebf6d5796..a56d2c4c6 100644 --- a/src/gridstack.scss +++ b/src/gridstack.scss @@ -129,18 +129,4 @@ $animation_speed: .3s !default; &.grid-stack-animate .grid-stack-item.grid-stack-placeholder{ @include vendor(transition, left .0s, top .0s, height .0s, width .0s); } - - &.grid-stack-one-column-mode { - height: auto !important; - &> .grid-stack-item { - position: relative !important; - width: auto !important; - left: 0 !important; - top: auto !important; - margin-bottom: $vertical_padding; - max-width: none !important; - - &> .ui-resizable-handle { display: none; } - } - } }