From 561b60f37a68500522595fc118429af79e979344 Mon Sep 17 00:00:00 2001 From: Buck Ryan Date: Mon, 10 Nov 2014 11:07:19 -0500 Subject: [PATCH 01/11] call draggable.stop whether item moved or not --- src/angular-gridster.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/angular-gridster.js b/src/angular-gridster.js index ff71f7b0..ceac619b 100644 --- a/src/angular-gridster.js +++ b/src/angular-gridster.js @@ -928,11 +928,8 @@ item.setSizeY(item.sizeY > gridster.maxRows ? gridster.maxRows : item.sizeY); item.setSizeX(item.sizeX > gridster.columns ? gridster.columns : item.sizeX); - var itemMoved = (originalCol !== item.col || originalRow !== item.row); - scope.$apply(function() { - // callback only if item really changed position - if (itemMoved && gridster.draggable && gridster.draggable.stop) { + if (gridster.draggable && gridster.draggable.stop) { gridster.draggable.stop(event, $el, itemOptions); } }); From 7aa79f817f62c6123ffc34c58811299c4a5c9293 Mon Sep 17 00:00:00 2001 From: Buck Ryan Date: Mon, 10 Nov 2014 11:07:42 -0500 Subject: [PATCH 02/11] call resizable.stop whether the item was resized or not --- src/angular-gridster.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/angular-gridster.js b/src/angular-gridster.js index ceac619b..acadfc7a 100644 --- a/src/angular-gridster.js +++ b/src/angular-gridster.js @@ -1174,11 +1174,8 @@ item.setSizeY(item.sizeY); item.setSizeX(item.sizeX > gridster.columns ? gridster.columns : item.sizeX); - var itemResized = (originalWidth !== item.sizeX || originalHeight !== item.sizeY); - scope.$apply(function() { - // callback only if item really changed size - if (itemResized && gridster.resizable && gridster.resizable.stop) { + if (gridster.resizable && gridster.resizable.stop) { gridster.resizable.stop(e, $el, itemOptions); // options is the item model } }); From 7b3aead2fc2b31750721adeead0a8389c2a06e8d Mon Sep 17 00:00:00 2001 From: Buck Ryan Date: Tue, 11 Nov 2014 11:56:06 -0500 Subject: [PATCH 03/11] provide functions for calculating an element's width and height --- src/angular-gridster.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/angular-gridster.js b/src/angular-gridster.js index acadfc7a..e2b1dffe 100644 --- a/src/angular-gridster.js +++ b/src/angular-gridster.js @@ -752,6 +752,14 @@ } }; + this.calculateElementHeight = function() { + return (this.sizeY * this.gridster.curRowHeight - this.gridster.margins[0]); + } + + this.calculateElementWidth = function() { + return (this.sizeX * this.gridster.curColWidth - this.gridster.margins[1]); + } + /** * Sets an elements height */ @@ -759,7 +767,7 @@ if (this.gridster.isMobile && !this.gridster.saveGridItemCalculatedHeightInMobile) { this.$element.css('height', ''); } else { - this.$element.css('height', (this.sizeY * this.gridster.curRowHeight - this.gridster.margins[0]) + 'px'); + this.$element.css('height', this.calculateElementHeight() + 'px'); } }; @@ -770,7 +778,7 @@ if (this.gridster.isMobile) { this.$element.css('width', ''); } else { - this.$element.css('width', (this.sizeX * this.gridster.curColWidth - this.gridster.margins[1]) + 'px'); + this.$element.css('width', this.calculateElementWidth() + 'px'); } }; }) From ca16af381ea265f4508ef46f7414af347ec43f38 Mon Sep 17 00:00:00 2001 From: Buck Ryan Date: Mon, 8 Dec 2014 12:01:34 -0500 Subject: [PATCH 04/11] Fixes the bias towards getting larger when resizing. Passing 'true' to the pixelsToRows and pixelsToColumns functions causes these functions to use Math.ceil to calculate how many rows or columns the item should occupy. This biases towards getting larger and makes resizing experience undesired. Similarly, 'false' to these functions uses Math.floor. This isn't as important for us since we do not allow resize handles on the left side of charts, but if we did the user would have similarly poor experiences. This also has the effect of fixing a bug when resizing off the grid. Before, if you resized an item all the way to the right of the grid, the item would move to the left and push other items down. Now, you cannot resize past the edge of the grid. --- src/angular-gridster.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/angular-gridster.js b/src/angular-gridster.js index e2b1dffe..4711dfa3 100644 --- a/src/angular-gridster.js +++ b/src/angular-gridster.js @@ -1157,10 +1157,10 @@ oldSizeX = item.sizeX, oldSizeY = item.sizeY, hasCallback = gridster.resizable && gridster.resizable.resize; - item.row = gridster.pixelsToRows(elmY, false); - item.col = gridster.pixelsToColumns(elmX, false); - item.sizeX = gridster.pixelsToColumns(elmW, true); - item.sizeY = gridster.pixelsToRows(elmH, true); + item.row = gridster.pixelsToRows(elmY); + item.col = gridster.pixelsToColumns(elmX); + item.sizeX = gridster.pixelsToColumns(elmW); + item.sizeY = gridster.pixelsToRows(elmH); if ( hasCallback || item.row !== oldRow || item.col !== oldCol || item.sizeX !== oldSizeX || item.sizeY !== oldSizeY From 35db03511ead61ce970a997b945d8a9e68a74178 Mon Sep 17 00:00:00 2001 From: Buck Ryan Date: Wed, 14 Jan 2015 09:44:26 -0500 Subject: [PATCH 05/11] Update README.md --- README.md | 261 +++--------------------------------------------------- 1 file changed, 12 insertions(+), 249 deletions(-) diff --git a/README.md b/README.md index 5a7c58c4..5cbd02be 100644 --- a/README.md +++ b/README.md @@ -1,253 +1,16 @@ -angular-gridster -================ -[![Build Status](https://travis-ci.org/ManifestWebDesign/angular-gridster.svg)](https://travis-ci.org/ManifestWebDesign/angular-gridster) +RJMetrics fork of angular gridster +================================== -An implementation of gridster-like widgets for Angular JS. This is not a wrapper on the original gridster jQuery plugin (http://gridster.net/). It is instead completely rewritten as Angular directives. Rewriting allowed for some additional features and better use of Angular data binding. Even more importantly, the original plugin had unpredictable behavior and crashed when wrapped with an Angular directive in my initial tests. +The main project can be found +[here](https://github.com/ManifestWebDesign/angular-gridster). -##Demo +This repo adds patches to version `0.10.7` of angular gridster. -See Live Demo +Notes +===== -##Usage - -Here is an example of the default usage: -```HTML -
-
    -
  • -
-
-``` -Which expects a scope setup like the following: -``` JavaScript - // IMPORTANT: Items should be placed in the grid in the order in which they should appear. - // In most cases the sorting should be by row ASC, col ASC - - // these map directly to gridsterItem directive options - $scope.standardItems = [ - { sizeX: 2, sizeY: 1, row: 0, col: 0 }, - { sizeX: 2, sizeY: 2, row: 0, col: 2 }, - { sizeX: 1, sizeY: 1, row: 0, col: 4 }, - { sizeX: 1, sizeY: 1, row: 0, col: 5 }, - { sizeX: 2, sizeY: 1, row: 1, col: 0 }, - { sizeX: 1, sizeY: 1, row: 1, col: 4 }, - { sizeX: 1, sizeY: 2, row: 1, col: 5 }, - { sizeX: 1, sizeY: 1, row: 2, col: 0 }, - { sizeX: 2, sizeY: 1, row: 2, col: 1 }, - { sizeX: 1, sizeY: 1, row: 2, col: 3 }, - { sizeX: 1, sizeY: 1, row: 2, col: 4 } - ]; -``` -Alternatively, you can use the html attributes, similar to the original gridster plugin, but with two-way data binding: -```HTML -
-
    -
  • -
-
-``` -or: -```HTML -
-
    -
  • -
-
-``` -This allows the items to provide their own structure for row, col, and size: -```JavaScript - $scope.customItems = [ - { size: { x: 2, y: 1 }, position: [0, 0] }, - { size: { x: 2, y: 2 }, position: [0, 2] }, - { size: { x: 1, y: 1 }, position: [0, 4] }, - { size: { x: 1, y: 1 }, position: [0, 5] }, - { size: { x: 2, y: 1 }, position: [1, 0] }, - { size: { x: 1, y: 1 }, position: [1, 4] }, - { size: { x: 1, y: 2 }, position: [1, 5] }, - { size: { x: 1, y: 1 }, position: [2, 0] }, - { size: { x: 2, y: 1 }, position: [2, 1] }, - { size: { x: 1, y: 1 }, position: [2, 3] }, - { size: { x: 1, y: 1 }, position: [2, 4] } - ]; -``` -Instead of using attributes for row, col, and size, you can also just use a mapping object for the gridster-item directive: -```HTML -
-
    -
  • -
-
-``` -This expects a scope similar to the previous example, but with customItemMap also defined in the scope: -```JavaScript - // maps the item from customItems in the scope to the gridsterItem options - $scope.customItemMap = { - sizeX: 'item.size.x', - sizeY: 'item.size.y', - row: 'item.position[0]', - col: 'item.position[1]' - }; -``` -The gridsterItem directive can be configured like this: -```HTML -
-
    -
  • -
-
-``` - -## Configuration - -#### Via Scope -Simply pass your desired options to the gridster directive - -```JavaScript - $scope.gridsterOpts = { - columns: 6, // the width of the grid, in columns - pushing: true, // whether to push other items out of the way on move or resize - floating: true, // whether to automatically float items up so they stack (you can temporarily disable if you are adding unsorted items with ng-repeat) - width: 'auto', // can be an integer or 'auto'. 'auto' scales gridster to be the full width of its containing element - colWidth: 'auto', // can be an integer or 'auto'. 'auto' uses the pixel width of the element divided by 'columns' - rowHeight: 'match', // can be an integer or 'match'. Match uses the colWidth, giving you square widgets. - margins: [10, 10], // the pixel distance between each widget - outerMargin: true, // whether margins apply to outer edges of the grid - isMobile: false, // stacks the grid items if true - mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items - mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint - minColumns: 1, // the minimum columns the grid must have - minRows: 2, // the minimum height of the grid, in rows - maxRows: 100, - defaultSizeX: 2, // the default width of a gridster item, if not specifed - defaultSizeY: 1, // the default height of a gridster item, if not specified - resizable: { - enabled: true, - handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'], - start: function(event, $element, widget) {}, // optional callback fired when resize is started, - resize: function(event, $element, widget) {}, // optional callback fired when item is resized, - stop: function(event, $element, widget) {} // optional callback fired when item is finished resizing - }, - draggable: { - enabled: true, // whether dragging items is supported - handle: '.my-class', // optional selector for resize handle - start: function(event, $element, widget) {}, // optional callback fired when drag is started, - drag: function(event, $element, widget) {}, // optional callback fired when item is moved, - stop: function(event, $element, widget) {} // optional callback fired when item is finished dragging - } - }; -``` - - -#### Via Constant -You can also override the default configuration site wide by modifying the ```gridsterConfig``` constant - -```js - angular.module('yourApp').run(['gridsterConfig', function(gridsterConfig) { - gridsterConfig.width = 1000; - }]); -``` - -##Watching gridster element size changes - -When the window or gridster element are resized, all the gridster item elements are resized accordingly and this event is broadcast: - -```JavaScript -$scope.$broadcast('gridster-resized', [width, height]); -``` - -It can be handled like this: - -```JavaScript -$scope.$on('gridster-resized', function(newSizes){ - var newWidth = sizes[0]; - var newHeight = sizes[1]; -}); -``` - -##Watching item changes of size and position - -The typical Angular way would be to do a $scope.$watch on your item or items in the scope. Example: - -```JavaScript -// two objects, converted to gridster items in the view via ng-repeat -$scope.items = [{},{}]; - -$scope.$watch('items', function(items){ - // one of the items changed -}, true); -``` - -or - -```JavaScript -$scope.$watch('items[0]', function(){ - // item0 changed -}, true); -``` - -or - -```JavaScript -$scope.$watch('items[0].sizeX', function(){ - // item0 sizeX changed -}, true); -``` - -The third argument, true, is to make the watch based on the value of the object, rather than just matching the reference to the object. - - -##Note -This directive/plugin does not generate style tags, like the jQuery plugin. It also uses standard camalCase for variables and object properties, while the original plugin used lower\_case\_with_underscores. These options have not and may never be implemented: - -* widget_class - not necessary since directives already whatever classes and attributes you want to add -* widget_margins - replaced by 'margins' -* widget\_base\_dimensions - replaced by 'defaultSizeX' and 'defaultSizeY' -* min_cols - currently, only 'columns' is used to defined the maximum width -* max_cols - currently, only 'columns' is used to defined the maximum width -* min_rows - replaced by 'minRows' -* max_rows - replaced by 'maxRows' -* max\_size\_x -* max\_size\_y -* extra_cols -* extra_rows -* autogenerate_stylesheet -* avoid\_overlapped\_widgets -* resize.axes -* resize.handle_class - replaced by 'resize.handle', which doesn't need to be a class -* resize.handle\_append\_to -* resize.max_size -* collision.on\_overlap\_start -* collision.on_overlap -* collision.on\_overlap\_stop - -##Installation - -```bash - bower install angular-gridster -``` - -Then, import the following in your HTML alongside `angular`: -```html - - -``` - -##Contributing - -####Install project dependencies -```bash - npm install - bower install -``` - -####Style Guide -Please respect the formatting specified in .editorconfig - -####Grunt Tasks -```grunt default``` Runs jshint & compiles project - -```grunt dev``` Opens demo page, starts karma test runner, runs unit tests on src & test folder changes - -```grunt e2e``` Watch src folder and run e2e tests on changes - -```grunt test``` Runs the unit & e2e tests +Commit +https://github.com/RJMetrics/angular-gridster/commit/7b3aead2fc2b31750721adeead0a8389c2a06e8d +adds functions to calculate each item's width and height. The +main angular gridster has merged similar functionality in +[this pull request](https://github.com/ManifestWebDesign/angular-gridster/pull/165). From 8b683559e8ab50680f5af496c05b2a2c1530d7bf Mon Sep 17 00:00:00 2001 From: Matthew Bilyeu Date: Mon, 28 Mar 2016 16:02:50 -0400 Subject: [PATCH 06/11] Controllers return themselves --- src/angular-gridster.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/angular-gridster.js b/src/angular-gridster.js index 4711dfa3..bd794f9f 100644 --- a/src/angular-gridster.js +++ b/src/angular-gridster.js @@ -442,6 +442,7 @@ return Math.round(pixels / this.curColWidth); }; + return this; } ]) @@ -781,6 +782,8 @@ this.$element.css('width', this.calculateElementWidth() + 'px'); } }; + + return this; }) .factory('GridsterDraggable', ['$document', '$timeout', '$window', From e2849ff30f8df8c9cb8e4e17fd4457bfd306c986 Mon Sep 17 00:00:00 2001 From: Yiannis Nicolaou Date: Thu, 20 Apr 2017 17:30:39 -0400 Subject: [PATCH 07/11] remove unnecessary functions --- src/angular-gridster.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/angular-gridster.js b/src/angular-gridster.js index 647af66c..c840f5bb 100755 --- a/src/angular-gridster.js +++ b/src/angular-gridster.js @@ -1014,14 +1014,6 @@ } }; - this.calculateElementHeight = function() { - return (this.sizeY * this.gridster.curRowHeight - this.gridster.margins[0]); - } - - this.calculateElementWidth = function() { - return (this.sizeX * this.gridster.curColWidth - this.gridster.margins[1]); - } - /** * Sets an elements height */ @@ -1029,7 +1021,7 @@ if (this.gridster.isMobile && !this.gridster.saveGridItemCalculatedHeightInMobile) { this.$element.css('height', ''); } else { - this.$element.css('height', this.calculateElementHeight() + 'px'); + this.$element.css('height', (this.sizeY * this.gridster.curRowHeight - this.gridster.margins[0]) + 'px'); } }; @@ -1040,7 +1032,7 @@ if (this.gridster.isMobile) { this.$element.css('width', ''); } else { - this.$element.css('width', this.calculateElementWidth() + 'px'); + this.$element.css('width', (this.sizeX * this.gridster.curColWidth - this.gridster.margins[1]) + 'px'); } }; From 700356d8286c575d3f4e8cd1b008e1862ee88ca5 Mon Sep 17 00:00:00 2001 From: Yiannis Nicolaou Date: Thu, 20 Apr 2017 18:17:04 -0400 Subject: [PATCH 08/11] fix return --- src/angular-gridster.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/angular-gridster.js b/src/angular-gridster.js index c840f5bb..804e4835 100755 --- a/src/angular-gridster.js +++ b/src/angular-gridster.js @@ -1036,9 +1036,6 @@ } }; - return this; - }) - /** * Gets an element's width */ @@ -1053,6 +1050,7 @@ return (this.sizeY * this.gridster.curRowHeight - this.gridster.margins[0]); }; + return this; }) .factory('GridsterTouch', [function() { From 9a21a3eb206ba6400f5c289096877649cb6733cb Mon Sep 17 00:00:00 2001 From: Yiannis Nicolaou Date: Thu, 20 Apr 2017 22:05:09 -0400 Subject: [PATCH 09/11] apply fix on resize --- src/angular-gridster.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/angular-gridster.js b/src/angular-gridster.js index 804e4835..da6ca950 100755 --- a/src/angular-gridster.js +++ b/src/angular-gridster.js @@ -1747,25 +1747,25 @@ var col = item.col; // only change column if grabbing left edge if (['w', 'nw', 'sw'].indexOf(handleClass) !== -1) { - col = gridster.pixelsToColumns(elmX, false); + col = gridster.pixelsToColumns(elmX); } var row = item.row; // only change row if grabbing top edge if (['n', 'ne', 'nw'].indexOf(handleClass) !== -1) { - row = gridster.pixelsToRows(elmY, false); + row = gridster.pixelsToRows(elmY); } var sizeX = item.sizeX; // only change row if grabbing left or right edge if (['n', 's'].indexOf(handleClass) === -1) { - sizeX = gridster.pixelsToColumns(elmW, true); + sizeX = gridster.pixelsToColumns(elmW); } var sizeY = item.sizeY; // only change row if grabbing top or bottom edge if (['e', 'w'].indexOf(handleClass) === -1) { - sizeY = gridster.pixelsToRows(elmH, true); + sizeY = gridster.pixelsToRows(elmH); } From d77812294eeacd98f8d3910198b2b59a018de46a Mon Sep 17 00:00:00 2001 From: Yiannis Nicolaou Date: Thu, 20 Apr 2017 22:08:47 -0400 Subject: [PATCH 10/11] bring back calculateElement functions --- src/angular-gridster.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/angular-gridster.js b/src/angular-gridster.js index da6ca950..1f49f8f8 100755 --- a/src/angular-gridster.js +++ b/src/angular-gridster.js @@ -1014,6 +1014,14 @@ } }; + this.calculateElementHeight = function() { + return (this.sizeY * this.gridster.curRowHeight - this.gridster.margins[0]); + } + + this.calculateElementWidth = function() { + return (this.sizeX * this.gridster.curColWidth - this.gridster.margins[1]); + } + /** * Sets an elements height */ @@ -1021,7 +1029,7 @@ if (this.gridster.isMobile && !this.gridster.saveGridItemCalculatedHeightInMobile) { this.$element.css('height', ''); } else { - this.$element.css('height', (this.sizeY * this.gridster.curRowHeight - this.gridster.margins[0]) + 'px'); + this.$element.css('height', this.calculateElementHeight() + 'px'); } }; @@ -1032,7 +1040,7 @@ if (this.gridster.isMobile) { this.$element.css('width', ''); } else { - this.$element.css('width', (this.sizeX * this.gridster.curColWidth - this.gridster.margins[1]) + 'px'); + this.$element.css('width', this.calculateElementWidth() + 'px'); } }; From 8f6cf74abddc905c77bd9c4b94c72f80001c951c Mon Sep 17 00:00:00 2001 From: Yiannis Nicolaou Date: Fri, 21 Apr 2017 00:46:10 -0400 Subject: [PATCH 11/11] also check parent element when checking against inputTags --- src/angular-gridster.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/angular-gridster.js b/src/angular-gridster.js index 1f49f8f8..92b3fd54 100755 --- a/src/angular-gridster.js +++ b/src/angular-gridster.js @@ -1510,7 +1510,8 @@ } function mouseDown(e) { - if (inputTags.indexOf(e.target.nodeName.toLowerCase()) !== -1) { + if (inputTags.indexOf(e.target.nodeName.toLowerCase()) !== -1 || + inputTags.indexOf(e.target.parentNode.nodeName.toLowerCase()) !== -1) { return false; }