From 1c04a89206220e5031d4fc6b8cf3f31b36fc6481 Mon Sep 17 00:00:00 2001 From: Pavel Reznikov Date: Fri, 27 Feb 2015 20:29:21 -0800 Subject: [PATCH] update gridstack.js --- gridstack.css | 83 ++++++++++++++++++++++++++++++++++++++++----------- gridstack.js | 32 +++++++++++--------- index.html | 5 +++- 3 files changed, 87 insertions(+), 33 deletions(-) diff --git a/gridstack.css b/gridstack.css index d451887..9cf660e 100644 --- a/gridstack.css +++ b/gridstack.css @@ -7,8 +7,8 @@ padding: 0; } -.grid-stack-item .grid-stack-item-content, -.grid-stack-item .placeholder-content { +.grid-stack-item > .grid-stack-item-content, +.grid-stack-item > .placeholder-content { margin: 0; position: absolute; top: 0; @@ -20,7 +20,7 @@ overflow: auto; } -.grid-stack-placeholder .placeholder-content { +.grid-stack-placeholder > .placeholder-content { border: 1px dashed lightgray; } @@ -29,26 +29,28 @@ z-index: 100; } -.grid-stack-item.ui-draggable-dragging .grid-stack-item-content, -.grid-stack-item.ui-resizable-resizing .grid-stack-item-content { +.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, +.grid-stack-item.ui-resizable-resizing > .grid-stack-item-content { box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2); opacity: 0.8; } -.grid-stack-item .ui-resizable-handle { - padding: 3px; - margin: 3px 0; - cursor: nwse-resize; +.grid-stack-item > .ui-resizable-handle { +} + +:root .grid-stack-item > .ui-resizable-handle { + filter: none; +} + +.grid-stack-item > .ui-resizable-se { + text-align: right; color: gray; - position: absolute; - bottom: 0; - right: 15px; - - font-size: 10px; + padding: 2px 3px 0 0; + margin: 0; display: inline-block; - font: normal normal normal 14px/1 FontAwesome; + font: normal normal normal 10px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; @@ -60,13 +62,58 @@ transform: rotate(90deg); } -:root .grid-stack-item .ui-resizable-handle { - filter: none; +/** Uncomment this to show bottom-left resize handle **/ +/* +.grid-stack-item > .ui-resizable-sw { + text-align: right; + color: gray; + + padding: 2px 3px 0 0; + margin: 0; + + display: inline-block; + font: normal normal normal 10px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } -.grid-stack-item .ui-resizable-handle::before { +.grid-stack-item .ui-resizable-sw::before { content: "\f065"; } +*/ + +.grid-stack-item > .ui-resizable-se::before { + content: "\f065"; +} + +.ui-resizable-handle { + position: absolute; + font-size: 0.1px; + display: block; + -ms-touch-action: none; + touch-action: none; +} + +.grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, +.grid-stack-item.ui-resizable-autohide > .ui-resizable-handle { + display: none; +} + +.grid-stack-item > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; left: 10px; top: 0; } +.grid-stack-item > .ui-resizable-n { cursor: n-resize; height: 10px; top: 0; left: 25px; right: 25px; } +.grid-stack-item > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; right: 10px; top: 0; } +.grid-stack-item > .ui-resizable-e { cursor: e-resize; width: 10px; right: 10px; top: 15px; bottom: 15px; } +.grid-stack-item > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px; right: 10px; bottom: 0; } +.grid-stack-item > .ui-resizable-s { cursor: s-resize; height: 10px; left: 25px; bottom: 0; right: 25px; } +.grid-stack-item > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; left: 10px; bottom: 0; } +.grid-stack-item > .ui-resizable-w { cursor: w-resize; width: 10px; left: 10px; top: 15px; bottom: 15px; } .grid-stack-item { min-width: 8.33333333% } diff --git a/gridstack.js b/gridstack.js index 3b5f477..5eb5924 100644 --- a/gridstack.js +++ b/gridstack.js @@ -354,7 +354,16 @@ float: false, _class: 'grid-stack-' + (Math.random() * 10000).toFixed(0), animate: Boolean(this.container.attr('data-gs-animate')) || false, - always_show_resize_handle: opts.always_show_resize_handle || false + always_show_resize_handle: opts.always_show_resize_handle || false, + resizable: _.defaults(opts.resizable || {}, { + autoHide: !(opts.always_show_resize_handle || false), + handles: 'se' + }), + draggable: _.defaults(opts.draggable || {}, { + handle: '.grid-stack-item-content', + scroll: true, + appendTo: 'body', + }) }); this.container.addClass(this.opts._class); @@ -551,11 +560,7 @@ self.grid.end_update(); }; - el.draggable({ - handle: this.opts.handle, - scroll: true, - appendTo: 'body', - + el.draggable(_.extend(this.opts.draggable, { start: on_start_moving, stop: on_end_moving, drag: function (event, ui) { @@ -567,24 +572,23 @@ self.grid.move_node(node, x, y); self._update_container_height(); } - }).resizable({ - autoHide: !this.opts.always_show_resize_handle, - handles: 'se', + })).resizable(_.extend(this.opts.resizable, { minHeight: this.opts.cell_height - 10, - minWidth: 70, start: on_start_moving, stop: on_end_moving, resize: function (event, ui) { - var width = Math.round(ui.size.width / cell_width), + var x = Math.round(ui.position.left / cell_width), + y = Math.floor((ui.position.top + cell_height/2) / cell_height), + width = Math.round(ui.size.width / cell_width), height = Math.round(ui.size.height / cell_height); - if (!self.grid.can_move_node(node, node.x, node.y, width, height)) { + if (!self.grid.can_move_node(node, x, y, width, height)) { return; } - self.grid.move_node(node, node.x, node.y, width, height); + self.grid.move_node(node, x, y, width, height); self._update_container_height(); } - }); + })); if (node.no_move || this._is_one_column_mode()) { el.draggable('disable'); diff --git a/index.html b/index.html index d23c543..16e67a1 100644 --- a/index.html +++ b/index.html @@ -206,7 +206,10 @@ $(function () { $(function () { $('.grid-stack').gridstack({ width: 12, - always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) + always_show_resize_handle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), + resizable: { + handles: 'e, se, s, sw, w' + } }); });