From af92722bcb949c88c132230e4e62b1a92832cdc0 Mon Sep 17 00:00:00 2001 From: Zacaria Date: Wed, 25 May 2016 17:01:38 +0200 Subject: [PATCH 1/8] implement min/max and width/height of gs-items --- src/gridstackitem.directive.js | 160 ++++++++++++++++++++------------- 1 file changed, 100 insertions(+), 60 deletions(-) diff --git a/src/gridstackitem.directive.js b/src/gridstackitem.directive.js index f10314c..24370dc 100644 --- a/src/gridstackitem.directive.js +++ b/src/gridstackitem.directive.js @@ -1,63 +1,103 @@ (function() { - 'use strict'; - - var app = angular.module('gridstack-angular'); - - /** @ngInject */ - app.directive('gridstackItem', ['$timeout', function($timeout) { - - return { - restrict: "A", - controller: 'GridstackController', - require: '^gridstack', - scope: { - gridstackItem: '=', - onItemAdded: '&', - onItemRemoved: '&', - gsItemX: '=', - gsItemY: '=', - gsItemWidth: '=', - gsItemHeight: '=', - gsItemAutopos: '=' - }, - link: function (scope, element, attrs, controller) { - - $(element).attr('data-gs-x', scope.gsItemX); - $(element).attr('data-gs-y', scope.gsItemY); - $(element).attr('data-gs-width', scope.gsItemWidth); - $(element).attr('data-gs-height', scope.gsItemHeight); - $(element).attr('data-gs-auto-position', scope.gsItemAutopos); - var widget = controller.addItem(element); - var item = element.data('_gridstack_node'); - $timeout(function() { - scope.onItemAdded({item: item}); - }); - - scope.$watch(function(){ return $(element).attr('data-gs-x'); }, function(val) { - scope.gsItemX = val; - }); - - scope.$watch(function(){ return $(element).attr('data-gs-y'); }, function(val) { - scope.gsItemY = val; - }); - - scope.$watch(function(){ return $(element).attr('data-gs-width'); }, function(val) { - scope.gsItemWidth = val; - }); - - scope.$watch(function(){ return $(element).attr('data-gs-height'); }, function(val) { - scope.gsItemHeight = val; - }); - - element.bind('$destroy', function() { - var item = element.data('_gridstack_node'); - scope.onItemRemoved({item: item}); - controller.removeItem(element); - }); - - } - - }; + 'use strict'; + + var app = angular.module('gridstack-angular'); + + /** @ngInject */ + app.directive('gridstackItem', ['$timeout', function($timeout) { + + return { + restrict: "A", + controller: 'GridstackController', + require: '^gridstack', + scope: { + gridstackItem: '=', + onItemAdded: '&', + onItemRemoved: '&', + gsItemX: '=', + gsItemY: '=', + gsItemWidth: '=', + gsItemHeight: '=', + gsItemMinWidth: '=', + gsItemMinHeight: '=', + gsItemMaxWidth: '=', + gsItemMaxHeight: '=', + gsItemAutopos: '=' + }, + link: function(scope, element, attrs, controller) { + + $(element).attr('data-gs-x', scope.gsItemX); + $(element).attr('data-gs-y', scope.gsItemY); + $(element).attr('data-gs-width', scope.gsItemWidth); + $(element).attr('data-gs-height', scope.gsItemHeight); + $(element).attr('data-gs-min-width', scope.gsItemMinWidth); + $(element).attr('data-gs-min-height', scope.gsItemMinHeight); + $(element).attr('data-gs-max-width', scope.gsItemMaxWidth); + $(element).attr('data-gs-max-height', scope.gsItemMaxHeight); + $(element).attr('data-gs-auto-position', scope.gsItemAutopos); + var widget = controller.addItem(element); + var item = element.data('_gridstack_node'); + $timeout(function() { + scope.onItemAdded({ item: item }); + }); + + scope.$watch(function() { + return $(element).attr('data-gs-x'); + }, function(val) { + scope.gsItemX = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-y'); + }, function(val) { + scope.gsItemY = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-width'); + }, function(val) { + scope.gsItemWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-height'); + }, function(val) { + scope.gsItemHeight = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-min-width'); + }, function(val) { + scope.gsItemMinWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-min-height'); + }, function(val) { + scope.gsItemMinHeight = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-max-width'); + }, function(val) { + scope.gsItemMaxWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-max-height'); + }, function(val) { + scope.gsItemMaxHeight = val; + }); + + element.bind('$destroy', function() { + var item = element.data('_gridstack_node'); + scope.onItemRemoved({ item: item }); + controller.removeItem(element); + }); + + } + + }; }]); -})(); \ No newline at end of file +})(); From df2bc9d807dc389b2f3f5929d8c2ea378099af98 Mon Sep 17 00:00:00 2001 From: Zacaria Date: Wed, 25 May 2016 17:02:27 +0200 Subject: [PATCH 2/8] update demo with min/max and with/height of gs-items --- demo/index.html | 246 ++++++++++++++++++++++++++++-------------------- 1 file changed, 143 insertions(+), 103 deletions(-) diff --git a/demo/index.html b/demo/index.html index cd9ae43..df816dc 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,112 +1,152 @@ - - - - - - - gridstack-angular demo - - - - - - - - -
-

gridstack-angular demo

-

{{widgets}}

-
- Add Widget -
-
-
-
-
-
+ + + + + + + gridstack-angular demo + + + + + + + + +
+

gridstack-angular demo

+

{{widgets}}

+ +
+
+
+
+
remove
+
-
- - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + From 8d7491ecec2faf75565be007ff623a77c711bd11 Mon Sep 17 00:00:00 2001 From: Zacaria Date: Thu, 26 May 2016 10:52:41 +0200 Subject: [PATCH 3/8] [ UPDATE ] : dist files --- dist/gridstack-angular.js | 310 +++++++++++++++++++--------------- dist/gridstack-angular.min.js | 4 +- 2 files changed, 171 insertions(+), 143 deletions(-) diff --git a/dist/gridstack-angular.js b/dist/gridstack-angular.js index 25ab1a4..46afaa0 100644 --- a/dist/gridstack-angular.js +++ b/dist/gridstack-angular.js @@ -6,156 +6,186 @@ * @license MIT */ (function() { - 'use strict'; + 'use strict'; - angular.module('gridstack-angular', []); + angular.module('gridstack-angular', []); - var app = angular.module('gridstack-angular'); + var app = angular.module('gridstack-angular'); - /** @ngInject */ - app.controller('GridstackController', ['$scope', function($scope) { + /** @ngInject */ + app.controller('GridstackController', ['$scope', function($scope) { - var gridstack = null; + var gridstack = null; - this.init = function(element, options) { - gridstack = element.gridstack(options).data('gridstack'); - return gridstack; - }; + this.init = function(element, options) { + gridstack = element.gridstack(options).data('gridstack'); + return gridstack; + }; - this.removeItem = function(element) { - if(gridstack) { - return gridstack.removeWidget(element, false); - } - return null; - }; + this.removeItem = function(element) { + if (gridstack) { + return gridstack.removeWidget(element, false); + } + return null; + }; - this.addItem = function(element) { - if(gridstack) { - gridstack.makeWidget(element); - return element; - } - return null; - }; + this.addItem = function(element) { + if (gridstack) { + gridstack.makeWidget(element); + return element; + } + return null; + }; }]); -})(); -(function() { - 'use strict'; - - var app = angular.module('gridstack-angular'); - - /** @ngInject */ - app.directive('gridstack', ['$timeout', function($timeout) { - - return { - restrict: "A", - controller: 'GridstackController', - scope: { - onChange: '&', - onDragStart: '&', - onDragStop: '&', - onResizeStart: '&', - onResizeStop: '&', - options: '=' - }, - link: function (scope, element, attrs, controller, ngModel) { - - controller.init(element, scope.options); - - element.on('change', function (e, items) { - $timeout(function() { - scope.$apply(); - scope.onChange({event: e, items: items}); - }); - }); - - element.on('dragstart', function(e, ui) { - scope.onDragStart({event: e, ui: ui}); - }); - - element.on('dragstop', function(e, ui) { - $timeout(function() { - scope.$apply(); - scope.onDragStop({event: e, ui: ui}); - }); - }); - - element.on('resizestart', function(e, ui) { - scope.onResizeStart({event: e, ui: ui}); - }); - - element.on('resizestop', function(e, ui) { - $timeout(function() { - scope.$apply(); - scope.onResizeStop({event: e, ui: ui}); - }); - }); - - } - }; + + /** @ngInject */ + app.directive('gridstack', ['$timeout', function($timeout) { + + return { + restrict: "A", + controller: 'GridstackController', + scope: { + onChange: '&', + onDragStart: '&', + onDragStop: '&', + onResizeStart: '&', + onResizeStop: '&', + options: '=' + }, + link: function(scope, element, attrs, controller, ngModel) { + + controller.init(element, scope.options); + + element.on('change', function(e, items) { + $timeout(function() { + scope.$apply(); + scope.onChange({ event: e, items: items }); + }); + }); + + element.on('dragstart', function(e, ui) { + scope.onDragStart({ event: e, ui: ui }); + }); + + element.on('dragstop', function(e, ui) { + $timeout(function() { + scope.$apply(); + scope.onDragStop({ event: e, ui: ui }); + }); + }); + + element.on('resizestart', function(e, ui) { + scope.onResizeStart({ event: e, ui: ui }); + }); + + element.on('resizestop', function(e, ui) { + $timeout(function() { + scope.$apply(); + scope.onResizeStop({ event: e, ui: ui }); + }); + }); + + } + }; }]); -})(); -(function() { - 'use strict'; - - var app = angular.module('gridstack-angular'); - - /** @ngInject */ - app.directive('gridstackItem', ['$timeout', function($timeout) { - - return { - restrict: "A", - controller: 'GridstackController', - require: '^gridstack', - scope: { - gridstackItem: '=', - onItemAdded: '&', - onItemRemoved: '&', - gsItemX: '=', - gsItemY: '=', - gsItemWidth: '=', - gsItemHeight: '=', - gsItemAutopos: '=' - }, - link: function (scope, element, attrs, controller) { - - $(element).attr('data-gs-x', scope.gsItemX); - $(element).attr('data-gs-y', scope.gsItemY); - $(element).attr('data-gs-width', scope.gsItemWidth); - $(element).attr('data-gs-height', scope.gsItemHeight); - $(element).attr('data-gs-auto-position', scope.gsItemAutopos); - var widget = controller.addItem(element); - var item = element.data('_gridstack_node'); - $timeout(function() { - scope.onItemAdded({item: item}); - }); - - scope.$watch(function(){ return $(element).attr('data-gs-x'); }, function(val) { - scope.gsItemX = val; - }); - - scope.$watch(function(){ return $(element).attr('data-gs-y'); }, function(val) { - scope.gsItemY = val; - }); - - scope.$watch(function(){ return $(element).attr('data-gs-width'); }, function(val) { - scope.gsItemWidth = val; - }); - - scope.$watch(function(){ return $(element).attr('data-gs-height'); }, function(val) { - scope.gsItemHeight = val; - }); - - element.bind('$destroy', function() { - var item = element.data('_gridstack_node'); - scope.onItemRemoved({item: item}); - controller.removeItem(element); - }); - - } - - }; + + /** @ngInject */ + app.directive('gridstackItem', ['$timeout', function($timeout) { + + return { + restrict: "A", + controller: 'GridstackController', + require: '^gridstack', + scope: { + gridstackItem: '=', + onItemAdded: '&', + onItemRemoved: '&', + gsItemX: '=', + gsItemY: '=', + gsItemWidth: '=', + gsItemHeight: '=', + gsItemMinWidth: '=', + gsItemMinHeight: '=', + gsItemMaxWidth: '=', + gsItemMaxHeight: '=', + gsItemAutopos: '=' + }, + link: function(scope, element, attrs, controller) { + + $(element).attr('data-gs-x', scope.gsItemX); + $(element).attr('data-gs-y', scope.gsItemY); + $(element).attr('data-gs-width', scope.gsItemWidth); + $(element).attr('data-gs-height', scope.gsItemHeight); + $(element).attr('data-gs-min-width', scope.gsItemMinWidth); + $(element).attr('data-gs-min-height', scope.gsItemMinHeight); + $(element).attr('data-gs-max-width', scope.gsItemMaxWidth); + $(element).attr('data-gs-max-height', scope.gsItemMaxHeight); + $(element).attr('data-gs-auto-position', scope.gsItemAutopos); + var widget = controller.addItem(element); + var item = element.data('_gridstack_node'); + $timeout(function() { + scope.onItemAdded({ item: item }); + }); + + scope.$watch(function() { + return $(element).attr('data-gs-x'); + }, function(val) { + scope.gsItemX = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-y'); + }, function(val) { + scope.gsItemY = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-width'); + }, function(val) { + scope.gsItemWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-height'); + }, function(val) { + scope.gsItemHeight = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-min-width'); + }, function(val) { + scope.gsItemMinWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-min-height'); + }, function(val) { + scope.gsItemMinHeight = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-max-width'); + }, function(val) { + scope.gsItemMaxWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-max-height'); + }, function(val) { + scope.gsItemMaxHeight = val; + }); + + element.bind('$destroy', function() { + var item = element.data('_gridstack_node'); + scope.onItemRemoved({ item: item }); + controller.removeItem(element); + }); + + } + + }; }]); -})(); \ No newline at end of file +})(); diff --git a/dist/gridstack-angular.min.js b/dist/gridstack-angular.min.js index d929fce..1010eda 100644 --- a/dist/gridstack-angular.min.js +++ b/dist/gridstack-angular.min.js @@ -5,6 +5,4 @@ * @link https://github.com/kdietrich/gridstack-angular#readme * @license MIT */ -!function(){"use strict";angular.module("gridstack-angular",[]);var t=angular.module("gridstack-angular");t.controller("GridstackController",["$scope",function(t){var r=null;this.init=function(t,n){return r=t.gridstack(n).data("gridstack")},this.removeItem=function(t){return r?r.removeWidget(t,!1):null},this.addItem=function(t){return r?(r.makeWidget(t),t):null}}])}(); -!function(){"use strict";var n=angular.module("gridstack-angular");n.directive("gridstack",["$timeout",function(n){return{restrict:"A",controller:"GridstackController",scope:{onChange:"&",onDragStart:"&",onDragStop:"&",onResizeStart:"&",onResizeStop:"&",options:"="},link:function(t,o,e,i,r){i.init(o,t.options),o.on("change",function(o,e){n(function(){t.$apply(),t.onChange({event:o,items:e})})}),o.on("dragstart",function(n,o){t.onDragStart({event:n,ui:o})}),o.on("dragstop",function(o,e){n(function(){t.$apply(),t.onDragStop({event:o,ui:e})})}),o.on("resizestart",function(n,o){t.onResizeStart({event:n,ui:o})}),o.on("resizestop",function(o,e){n(function(){t.$apply(),t.onResizeStop({event:o,ui:e})})})}}}])}(); -!function(){"use strict";var t=angular.module("gridstack-angular");t.directive("gridstackItem",["$timeout",function(t){return{restrict:"A",controller:"GridstackController",require:"^gridstack",scope:{gridstackItem:"=",onItemAdded:"&",onItemRemoved:"&",gsItemX:"=",gsItemY:"=",gsItemWidth:"=",gsItemHeight:"=",gsItemAutopos:"="},link:function(e,a,n,r){$(a).attr("data-gs-x",e.gsItemX),$(a).attr("data-gs-y",e.gsItemY),$(a).attr("data-gs-width",e.gsItemWidth),$(a).attr("data-gs-height",e.gsItemHeight),$(a).attr("data-gs-auto-position",e.gsItemAutopos);var i=(r.addItem(a),a.data("_gridstack_node"));t(function(){e.onItemAdded({item:i})}),e.$watch(function(){return $(a).attr("data-gs-x")},function(t){e.gsItemX=t}),e.$watch(function(){return $(a).attr("data-gs-y")},function(t){e.gsItemY=t}),e.$watch(function(){return $(a).attr("data-gs-width")},function(t){e.gsItemWidth=t}),e.$watch(function(){return $(a).attr("data-gs-height")},function(t){e.gsItemHeight=t}),a.bind("$destroy",function(){var t=a.data("_gridstack_node");e.onItemRemoved({item:t}),r.removeItem(a)})}}}])}(); \ No newline at end of file +!function(){"use strict";angular.module("gridstack-angular",[]);var t=angular.module("gridstack-angular");t.controller("GridstackController",["$scope",function(t){var n=null;this.init=function(t,e){return n=t.gridstack(e).data("gridstack")},this.removeItem=function(t){return n?n.removeWidget(t,!1):null},this.addItem=function(t){return n?(n.makeWidget(t),t):null}}]),t.directive("gridstack",["$timeout",function(t){return{restrict:"A",controller:"GridstackController",scope:{onChange:"&",onDragStart:"&",onDragStop:"&",onResizeStart:"&",onResizeStop:"&",options:"="},link:function(n,e,i,a,r){a.init(e,n.options),e.on("change",function(e,i){t(function(){n.$apply(),n.onChange({event:e,items:i})})}),e.on("dragstart",function(t,e){n.onDragStart({event:t,ui:e})}),e.on("dragstop",function(e,i){t(function(){n.$apply(),n.onDragStop({event:e,ui:i})})}),e.on("resizestart",function(t,e){n.onResizeStart({event:t,ui:e})}),e.on("resizestop",function(e,i){t(function(){n.$apply(),n.onResizeStop({event:e,ui:i})})})}}}]),t.directive("gridstackItem",["$timeout",function(t){return{restrict:"A",controller:"GridstackController",require:"^gridstack",scope:{gridstackItem:"=",onItemAdded:"&",onItemRemoved:"&",gsItemX:"=",gsItemY:"=",gsItemWidth:"=",gsItemHeight:"=",gsItemMinWidth:"=",gsItemMinHeight:"=",gsItemMaxWidth:"=",gsItemMaxHeight:"=",gsItemAutopos:"="},link:function(n,e,i,a){$(e).attr("data-gs-x",n.gsItemX),$(e).attr("data-gs-y",n.gsItemY),$(e).attr("data-gs-width",n.gsItemWidth),$(e).attr("data-gs-height",n.gsItemHeight),$(e).attr("data-gs-min-width",n.gsItemMinWidth),$(e).attr("data-gs-min-height",n.gsItemMinHeight),$(e).attr("data-gs-max-width",n.gsItemMaxWidth),$(e).attr("data-gs-max-height",n.gsItemMaxHeight),$(e).attr("data-gs-auto-position",n.gsItemAutopos);var r=(a.addItem(e),e.data("_gridstack_node"));t(function(){n.onItemAdded({item:r})}),n.$watch(function(){return $(e).attr("data-gs-x")},function(t){n.gsItemX=t}),n.$watch(function(){return $(e).attr("data-gs-y")},function(t){n.gsItemY=t}),n.$watch(function(){return $(e).attr("data-gs-width")},function(t){n.gsItemWidth=t}),n.$watch(function(){return $(e).attr("data-gs-height")},function(t){n.gsItemHeight=t}),n.$watch(function(){return $(e).attr("data-gs-min-width")},function(t){n.gsItemMinWidth=t}),n.$watch(function(){return $(e).attr("data-gs-min-height")},function(t){n.gsItemMinHeight=t}),n.$watch(function(){return $(e).attr("data-gs-max-width")},function(t){n.gsItemMaxWidth=t}),n.$watch(function(){return $(e).attr("data-gs-max-height")},function(t){n.gsItemMaxHeight=t}),e.bind("$destroy",function(){var t=e.data("_gridstack_node");n.onItemRemoved({item:t}),a.removeItem(e)})}}}])}(); From 69e6ec8b2c689bb6dcd53e1af976f885543a966f Mon Sep 17 00:00:00 2001 From: Zacaria Date: Fri, 27 May 2016 13:59:49 +0200 Subject: [PATCH 4/8] [ FIX ] : indentation --- dist/gridstack-angular.js | 334 ++++++++++++++++----------------- src/gridstackitem.directive.js | 198 +++++++++---------- 2 files changed, 266 insertions(+), 266 deletions(-) diff --git a/dist/gridstack-angular.js b/dist/gridstack-angular.js index 46afaa0..d015266 100644 --- a/dist/gridstack-angular.js +++ b/dist/gridstack-angular.js @@ -6,186 +6,186 @@ * @license MIT */ (function() { - 'use strict'; + 'use strict'; - angular.module('gridstack-angular', []); + angular.module('gridstack-angular', []); - var app = angular.module('gridstack-angular'); + var app = angular.module('gridstack-angular'); - /** @ngInject */ - app.controller('GridstackController', ['$scope', function($scope) { + /** @ngInject */ + app.controller('GridstackController', ['$scope', function($scope) { - var gridstack = null; + var gridstack = null; - this.init = function(element, options) { - gridstack = element.gridstack(options).data('gridstack'); - return gridstack; - }; + this.init = function(element, options) { + gridstack = element.gridstack(options).data('gridstack'); + return gridstack; + }; - this.removeItem = function(element) { - if (gridstack) { - return gridstack.removeWidget(element, false); - } - return null; - }; + this.removeItem = function(element) { + if (gridstack) { + return gridstack.removeWidget(element, false); + } + return null; + }; - this.addItem = function(element) { - if (gridstack) { - gridstack.makeWidget(element); - return element; - } - return null; - }; + this.addItem = function(element) { + if (gridstack) { + gridstack.makeWidget(element); + return element; + } + return null; + }; }]); - /** @ngInject */ - app.directive('gridstack', ['$timeout', function($timeout) { - - return { - restrict: "A", - controller: 'GridstackController', - scope: { - onChange: '&', - onDragStart: '&', - onDragStop: '&', - onResizeStart: '&', - onResizeStop: '&', - options: '=' - }, - link: function(scope, element, attrs, controller, ngModel) { - - controller.init(element, scope.options); - - element.on('change', function(e, items) { - $timeout(function() { - scope.$apply(); - scope.onChange({ event: e, items: items }); - }); - }); - - element.on('dragstart', function(e, ui) { - scope.onDragStart({ event: e, ui: ui }); - }); - - element.on('dragstop', function(e, ui) { - $timeout(function() { - scope.$apply(); - scope.onDragStop({ event: e, ui: ui }); - }); - }); - - element.on('resizestart', function(e, ui) { - scope.onResizeStart({ event: e, ui: ui }); - }); - - element.on('resizestop', function(e, ui) { - $timeout(function() { - scope.$apply(); - scope.onResizeStop({ event: e, ui: ui }); - }); - }); - - } - }; + /** @ngInject */ + app.directive('gridstack', ['$timeout', function($timeout) { + + return { + restrict: "A", + controller: 'GridstackController', + scope: { + onChange: '&', + onDragStart: '&', + onDragStop: '&', + onResizeStart: '&', + onResizeStop: '&', + options: '=' + }, + link: function(scope, element, attrs, controller, ngModel) { + + controller.init(element, scope.options); + + element.on('change', function(e, items) { + $timeout(function() { + scope.$apply(); + scope.onChange({ event: e, items: items }); + }); + }); + + element.on('dragstart', function(e, ui) { + scope.onDragStart({ event: e, ui: ui }); + }); + + element.on('dragstop', function(e, ui) { + $timeout(function() { + scope.$apply(); + scope.onDragStop({ event: e, ui: ui }); + }); + }); + + element.on('resizestart', function(e, ui) { + scope.onResizeStart({ event: e, ui: ui }); + }); + + element.on('resizestop', function(e, ui) { + $timeout(function() { + scope.$apply(); + scope.onResizeStop({ event: e, ui: ui }); + }); + }); + + } + }; }]); - /** @ngInject */ - app.directive('gridstackItem', ['$timeout', function($timeout) { - - return { - restrict: "A", - controller: 'GridstackController', - require: '^gridstack', - scope: { - gridstackItem: '=', - onItemAdded: '&', - onItemRemoved: '&', - gsItemX: '=', - gsItemY: '=', - gsItemWidth: '=', - gsItemHeight: '=', - gsItemMinWidth: '=', - gsItemMinHeight: '=', - gsItemMaxWidth: '=', - gsItemMaxHeight: '=', - gsItemAutopos: '=' - }, - link: function(scope, element, attrs, controller) { - - $(element).attr('data-gs-x', scope.gsItemX); - $(element).attr('data-gs-y', scope.gsItemY); - $(element).attr('data-gs-width', scope.gsItemWidth); - $(element).attr('data-gs-height', scope.gsItemHeight); - $(element).attr('data-gs-min-width', scope.gsItemMinWidth); - $(element).attr('data-gs-min-height', scope.gsItemMinHeight); - $(element).attr('data-gs-max-width', scope.gsItemMaxWidth); - $(element).attr('data-gs-max-height', scope.gsItemMaxHeight); - $(element).attr('data-gs-auto-position', scope.gsItemAutopos); - var widget = controller.addItem(element); - var item = element.data('_gridstack_node'); - $timeout(function() { - scope.onItemAdded({ item: item }); - }); - - scope.$watch(function() { - return $(element).attr('data-gs-x'); - }, function(val) { - scope.gsItemX = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-y'); - }, function(val) { - scope.gsItemY = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-width'); - }, function(val) { - scope.gsItemWidth = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-height'); - }, function(val) { - scope.gsItemHeight = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-min-width'); - }, function(val) { - scope.gsItemMinWidth = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-min-height'); - }, function(val) { - scope.gsItemMinHeight = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-max-width'); - }, function(val) { - scope.gsItemMaxWidth = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-max-height'); - }, function(val) { - scope.gsItemMaxHeight = val; - }); - - element.bind('$destroy', function() { - var item = element.data('_gridstack_node'); - scope.onItemRemoved({ item: item }); - controller.removeItem(element); - }); - - } - - }; + /** @ngInject */ + app.directive('gridstackItem', ['$timeout', function($timeout) { + + return { + restrict: "A", + controller: 'GridstackController', + require: '^gridstack', + scope: { + gridstackItem: '=', + onItemAdded: '&', + onItemRemoved: '&', + gsItemX: '=', + gsItemY: '=', + gsItemWidth: '=', + gsItemHeight: '=', + gsItemMinWidth: '=', + gsItemMinHeight: '=', + gsItemMaxWidth: '=', + gsItemMaxHeight: '=', + gsItemAutopos: '=' + }, + link: function(scope, element, attrs, controller) { + + $(element).attr('data-gs-x', scope.gsItemX); + $(element).attr('data-gs-y', scope.gsItemY); + $(element).attr('data-gs-width', scope.gsItemWidth); + $(element).attr('data-gs-height', scope.gsItemHeight); + $(element).attr('data-gs-min-width', scope.gsItemMinWidth); + $(element).attr('data-gs-min-height', scope.gsItemMinHeight); + $(element).attr('data-gs-max-width', scope.gsItemMaxWidth); + $(element).attr('data-gs-max-height', scope.gsItemMaxHeight); + $(element).attr('data-gs-auto-position', scope.gsItemAutopos); + var widget = controller.addItem(element); + var item = element.data('_gridstack_node'); + $timeout(function() { + scope.onItemAdded({ item: item }); + }); + + scope.$watch(function() { + return $(element).attr('data-gs-x'); + }, function(val) { + scope.gsItemX = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-y'); + }, function(val) { + scope.gsItemY = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-width'); + }, function(val) { + scope.gsItemWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-height'); + }, function(val) { + scope.gsItemHeight = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-min-width'); + }, function(val) { + scope.gsItemMinWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-min-height'); + }, function(val) { + scope.gsItemMinHeight = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-max-width'); + }, function(val) { + scope.gsItemMaxWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-max-height'); + }, function(val) { + scope.gsItemMaxHeight = val; + }); + + element.bind('$destroy', function() { + var item = element.data('_gridstack_node'); + scope.onItemRemoved({ item: item }); + controller.removeItem(element); + }); + + } + + }; }]); })(); diff --git a/src/gridstackitem.directive.js b/src/gridstackitem.directive.js index 24370dc..c13ee3f 100644 --- a/src/gridstackitem.directive.js +++ b/src/gridstackitem.directive.js @@ -1,103 +1,103 @@ (function() { - 'use strict'; - - var app = angular.module('gridstack-angular'); - - /** @ngInject */ - app.directive('gridstackItem', ['$timeout', function($timeout) { - - return { - restrict: "A", - controller: 'GridstackController', - require: '^gridstack', - scope: { - gridstackItem: '=', - onItemAdded: '&', - onItemRemoved: '&', - gsItemX: '=', - gsItemY: '=', - gsItemWidth: '=', - gsItemHeight: '=', - gsItemMinWidth: '=', - gsItemMinHeight: '=', - gsItemMaxWidth: '=', - gsItemMaxHeight: '=', - gsItemAutopos: '=' - }, - link: function(scope, element, attrs, controller) { - - $(element).attr('data-gs-x', scope.gsItemX); - $(element).attr('data-gs-y', scope.gsItemY); - $(element).attr('data-gs-width', scope.gsItemWidth); - $(element).attr('data-gs-height', scope.gsItemHeight); - $(element).attr('data-gs-min-width', scope.gsItemMinWidth); - $(element).attr('data-gs-min-height', scope.gsItemMinHeight); - $(element).attr('data-gs-max-width', scope.gsItemMaxWidth); - $(element).attr('data-gs-max-height', scope.gsItemMaxHeight); - $(element).attr('data-gs-auto-position', scope.gsItemAutopos); - var widget = controller.addItem(element); - var item = element.data('_gridstack_node'); - $timeout(function() { - scope.onItemAdded({ item: item }); - }); - - scope.$watch(function() { - return $(element).attr('data-gs-x'); - }, function(val) { - scope.gsItemX = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-y'); - }, function(val) { - scope.gsItemY = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-width'); - }, function(val) { - scope.gsItemWidth = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-height'); - }, function(val) { - scope.gsItemHeight = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-min-width'); - }, function(val) { - scope.gsItemMinWidth = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-min-height'); - }, function(val) { - scope.gsItemMinHeight = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-max-width'); - }, function(val) { - scope.gsItemMaxWidth = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-max-height'); - }, function(val) { - scope.gsItemMaxHeight = val; - }); - - element.bind('$destroy', function() { - var item = element.data('_gridstack_node'); - scope.onItemRemoved({ item: item }); - controller.removeItem(element); - }); - - } - - }; + 'use strict'; + + var app = angular.module('gridstack-angular'); + + /** @ngInject */ + app.directive('gridstackItem', ['$timeout', function($timeout) { + + return { + restrict: "A", + controller: 'GridstackController', + require: '^gridstack', + scope: { + gridstackItem: '=', + onItemAdded: '&', + onItemRemoved: '&', + gsItemX: '=', + gsItemY: '=', + gsItemWidth: '=', + gsItemHeight: '=', + gsItemMinWidth: '=', + gsItemMinHeight: '=', + gsItemMaxWidth: '=', + gsItemMaxHeight: '=', + gsItemAutopos: '=' + }, + link: function(scope, element, attrs, controller) { + + $(element).attr('data-gs-x', scope.gsItemX); + $(element).attr('data-gs-y', scope.gsItemY); + $(element).attr('data-gs-width', scope.gsItemWidth); + $(element).attr('data-gs-height', scope.gsItemHeight); + $(element).attr('data-gs-min-width', scope.gsItemMinWidth); + $(element).attr('data-gs-min-height', scope.gsItemMinHeight); + $(element).attr('data-gs-max-width', scope.gsItemMaxWidth); + $(element).attr('data-gs-max-height', scope.gsItemMaxHeight); + $(element).attr('data-gs-auto-position', scope.gsItemAutopos); + var widget = controller.addItem(element); + var item = element.data('_gridstack_node'); + $timeout(function() { + scope.onItemAdded({ item: item }); + }); + + scope.$watch(function() { + return $(element).attr('data-gs-x'); + }, function(val) { + scope.gsItemX = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-y'); + }, function(val) { + scope.gsItemY = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-width'); + }, function(val) { + scope.gsItemWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-height'); + }, function(val) { + scope.gsItemHeight = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-min-width'); + }, function(val) { + scope.gsItemMinWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-min-height'); + }, function(val) { + scope.gsItemMinHeight = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-max-width'); + }, function(val) { + scope.gsItemMaxWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-max-height'); + }, function(val) { + scope.gsItemMaxHeight = val; + }); + + element.bind('$destroy', function() { + var item = element.data('_gridstack_node'); + scope.onItemRemoved({ item: item }); + controller.removeItem(element); + }); + + } + + }; }]); })(); From 0a407c7b1fb66ea4a7bbe36646b5ca02fd12d714 Mon Sep 17 00:00:00 2001 From: Zacaria Date: Fri, 27 May 2016 14:01:25 +0200 Subject: [PATCH 5/8] [ FIX ] : indentation#2 --- dist/gridstack-angular.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/gridstack-angular.js b/dist/gridstack-angular.js index d015266..c770a85 100644 --- a/dist/gridstack-angular.js +++ b/dist/gridstack-angular.js @@ -23,14 +23,14 @@ }; this.removeItem = function(element) { - if (gridstack) { + if(gridstack) { return gridstack.removeWidget(element, false); } return null; }; this.addItem = function(element) { - if (gridstack) { + if(gridstack) { gridstack.makeWidget(element); return element; } From 0495f6b6df888003750f4637e639e49e3ac4cc89 Mon Sep 17 00:00:00 2001 From: Zacaria Date: Mon, 13 Jun 2016 16:53:01 +0200 Subject: [PATCH 6/8] [ ADD ] : gulpfile --- .gitignore | 1 - gulpfile.js | 21 +++++++++++++++++++++ package.json | 3 ++- 3 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 gulpfile.js diff --git a/.gitignore b/.gitignore index f36f94e..f2c2257 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ node_modules /bower_components .bowerrc -gulpfile.js \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..0a9d22e --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,21 @@ +var gulp = require('gulp') +var concat = require('gulp-concat'); +var uglify = require('gulp-uglify'); +var rename = require('gulp-rename'); + +gulp.task('concatJs', function() { + return gulp.src('./src/*.js') + .pipe(concat('gridstack-angular.js')) + .pipe(gulp.dest('./dist/')); +}); + +gulp.task('compress',['concatJs'],function() { + return gulp.src('dist/gridstack-angular.js') + .pipe(uglify()) + .pipe(rename({ + suffix: '.min' + })) + .pipe(gulp.dest('./dist/')); +}); + +gulp.task('default', ['compress']); diff --git a/package.json b/package.json index 0097a08..b12e346 100644 --- a/package.json +++ b/package.json @@ -8,10 +8,11 @@ }, "devDependencies": { "gulp": "~3.9.0", - "gulp-header": "~1.7.1", "gulp-clean": "~0.3.1", "gulp-concat": "~2.6.0", + "gulp-header": "^1.7.1", "gulp-jshint": "~1.11.2", + "gulp-rename": "^1.2.2", "gulp-uglify": "~1.4.2" }, "author": "Kevin Dietrich", From c12ed85d7a0c8c97e055a76c2ead2bd2862dd099 Mon Sep 17 00:00:00 2001 From: Zacaria Date: Mon, 13 Jun 2016 16:54:39 +0200 Subject: [PATCH 7/8] [ UPDATE ] : restore gridstack exposition by directive --- dist/gridstack-angular.js | 227 +++++++++++++++++---------------- dist/gridstack-angular.min.js | 9 +- src/gridstack.controller.js | 2 +- src/gridstack.directive.js | 2 +- src/gridstackitem.directive.js | 198 ++++++++++++++-------------- 5 files changed, 219 insertions(+), 219 deletions(-) diff --git a/dist/gridstack-angular.js b/dist/gridstack-angular.js index c770a85..2b6cb79 100644 --- a/dist/gridstack-angular.js +++ b/dist/gridstack-angular.js @@ -1,10 +1,3 @@ -/** - * gridstack-angular - Angular Gridstack.js directive - * @version v0.5.0-dev - * @author Kevin Dietrich - * @link https://github.com/kdietrich/gridstack-angular#readme - * @license MIT - */ (function() { 'use strict'; @@ -38,6 +31,12 @@ }; }]); +})(); + +(function() { + 'use strict'; + + var app = angular.module('gridstack-angular'); /** @ngInject */ app.directive('gridstack', ['$timeout', function($timeout) { @@ -51,38 +50,40 @@ onDragStop: '&', onResizeStart: '&', onResizeStop: '&', + gridstackHandler: '=', options: '=' }, - link: function(scope, element, attrs, controller, ngModel) { + link: function (scope, element, attrs, controller, ngModel) { - controller.init(element, scope.options); + var gridstack = controller.init(element, scope.options); + scope.gridstackHandler = gridstack; - element.on('change', function(e, items) { + element.on('change', function (e, items) { $timeout(function() { scope.$apply(); - scope.onChange({ event: e, items: items }); + scope.onChange({event: e, items: items}); }); }); element.on('dragstart', function(e, ui) { - scope.onDragStart({ event: e, ui: ui }); + scope.onDragStart({event: e, ui: ui}); }); element.on('dragstop', function(e, ui) { $timeout(function() { scope.$apply(); - scope.onDragStop({ event: e, ui: ui }); + scope.onDragStop({event: e, ui: ui}); }); }); element.on('resizestart', function(e, ui) { - scope.onResizeStart({ event: e, ui: ui }); + scope.onResizeStart({event: e, ui: ui}); }); element.on('resizestop', function(e, ui) { $timeout(function() { scope.$apply(); - scope.onResizeStop({ event: e, ui: ui }); + scope.onResizeStop({event: e, ui: ui}); }); }); @@ -90,102 +91,108 @@ }; }]); +})(); - /** @ngInject */ - app.directive('gridstackItem', ['$timeout', function($timeout) { - - return { - restrict: "A", - controller: 'GridstackController', - require: '^gridstack', - scope: { - gridstackItem: '=', - onItemAdded: '&', - onItemRemoved: '&', - gsItemX: '=', - gsItemY: '=', - gsItemWidth: '=', - gsItemHeight: '=', - gsItemMinWidth: '=', - gsItemMinHeight: '=', - gsItemMaxWidth: '=', - gsItemMaxHeight: '=', - gsItemAutopos: '=' - }, - link: function(scope, element, attrs, controller) { - - $(element).attr('data-gs-x', scope.gsItemX); - $(element).attr('data-gs-y', scope.gsItemY); - $(element).attr('data-gs-width', scope.gsItemWidth); - $(element).attr('data-gs-height', scope.gsItemHeight); - $(element).attr('data-gs-min-width', scope.gsItemMinWidth); - $(element).attr('data-gs-min-height', scope.gsItemMinHeight); - $(element).attr('data-gs-max-width', scope.gsItemMaxWidth); - $(element).attr('data-gs-max-height', scope.gsItemMaxHeight); - $(element).attr('data-gs-auto-position', scope.gsItemAutopos); - var widget = controller.addItem(element); - var item = element.data('_gridstack_node'); - $timeout(function() { - scope.onItemAdded({ item: item }); - }); - - scope.$watch(function() { - return $(element).attr('data-gs-x'); - }, function(val) { - scope.gsItemX = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-y'); - }, function(val) { - scope.gsItemY = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-width'); - }, function(val) { - scope.gsItemWidth = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-height'); - }, function(val) { - scope.gsItemHeight = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-min-width'); - }, function(val) { - scope.gsItemMinWidth = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-min-height'); - }, function(val) { - scope.gsItemMinHeight = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-max-width'); - }, function(val) { - scope.gsItemMaxWidth = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-max-height'); - }, function(val) { - scope.gsItemMaxHeight = val; - }); - - element.bind('$destroy', function() { - var item = element.data('_gridstack_node'); - scope.onItemRemoved({ item: item }); - controller.removeItem(element); - }); - - } - - }; +(function() { + 'use strict'; + + var app = angular.module('gridstack-angular'); + + /** @ngInject */ + app.directive('gridstackItem', ['$timeout', function($timeout) { + + return { + restrict: "A", + controller: 'GridstackController', + require: '^gridstack', + scope: { + gridstackItem: '=', + onItemAdded: '&', + onItemRemoved: '&', + gsItemX: '=', + gsItemY: '=', + gsItemWidth: '=', + gsItemHeight: '=', + gsItemMinWidth: '=', + gsItemMinHeight: '=', + gsItemMaxWidth: '=', + gsItemMaxHeight: '=', + gsItemAutopos: '=' + }, + link: function(scope, element, attrs, controller) { + + $(element).attr('data-gs-x', scope.gsItemX); + $(element).attr('data-gs-y', scope.gsItemY); + $(element).attr('data-gs-width', scope.gsItemWidth); + $(element).attr('data-gs-height', scope.gsItemHeight); + $(element).attr('data-gs-min-width', scope.gsItemMinWidth); + $(element).attr('data-gs-min-height', scope.gsItemMinHeight); + $(element).attr('data-gs-max-width', scope.gsItemMaxWidth); + $(element).attr('data-gs-max-height', scope.gsItemMaxHeight); + $(element).attr('data-gs-auto-position', scope.gsItemAutopos); + var widget = controller.addItem(element); + var item = element.data('_gridstack_node'); + $timeout(function() { + scope.onItemAdded({ item: item }); + }); + + scope.$watch(function() { + return $(element).attr('data-gs-x'); + }, function(val) { + scope.gsItemX = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-y'); + }, function(val) { + scope.gsItemY = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-width'); + }, function(val) { + scope.gsItemWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-height'); + }, function(val) { + scope.gsItemHeight = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-min-width'); + }, function(val) { + scope.gsItemMinWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-min-height'); + }, function(val) { + scope.gsItemMinHeight = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-max-width'); + }, function(val) { + scope.gsItemMaxWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-max-height'); + }, function(val) { + scope.gsItemMaxHeight = val; + }); + + element.bind('$destroy', function() { + var item = element.data('_gridstack_node'); + scope.onItemRemoved({ item: item }); + controller.removeItem(element); + }); + + } + + }; }]); })(); diff --git a/dist/gridstack-angular.min.js b/dist/gridstack-angular.min.js index 1010eda..beead9a 100644 --- a/dist/gridstack-angular.min.js +++ b/dist/gridstack-angular.min.js @@ -1,8 +1 @@ -/** - * gridstack-angular - Angular Gridstack.js directive - * @version v0.5.0-dev - * @author Kevin Dietrich - * @link https://github.com/kdietrich/gridstack-angular#readme - * @license MIT - */ -!function(){"use strict";angular.module("gridstack-angular",[]);var t=angular.module("gridstack-angular");t.controller("GridstackController",["$scope",function(t){var n=null;this.init=function(t,e){return n=t.gridstack(e).data("gridstack")},this.removeItem=function(t){return n?n.removeWidget(t,!1):null},this.addItem=function(t){return n?(n.makeWidget(t),t):null}}]),t.directive("gridstack",["$timeout",function(t){return{restrict:"A",controller:"GridstackController",scope:{onChange:"&",onDragStart:"&",onDragStop:"&",onResizeStart:"&",onResizeStop:"&",options:"="},link:function(n,e,i,a,r){a.init(e,n.options),e.on("change",function(e,i){t(function(){n.$apply(),n.onChange({event:e,items:i})})}),e.on("dragstart",function(t,e){n.onDragStart({event:t,ui:e})}),e.on("dragstop",function(e,i){t(function(){n.$apply(),n.onDragStop({event:e,ui:i})})}),e.on("resizestart",function(t,e){n.onResizeStart({event:t,ui:e})}),e.on("resizestop",function(e,i){t(function(){n.$apply(),n.onResizeStop({event:e,ui:i})})})}}}]),t.directive("gridstackItem",["$timeout",function(t){return{restrict:"A",controller:"GridstackController",require:"^gridstack",scope:{gridstackItem:"=",onItemAdded:"&",onItemRemoved:"&",gsItemX:"=",gsItemY:"=",gsItemWidth:"=",gsItemHeight:"=",gsItemMinWidth:"=",gsItemMinHeight:"=",gsItemMaxWidth:"=",gsItemMaxHeight:"=",gsItemAutopos:"="},link:function(n,e,i,a){$(e).attr("data-gs-x",n.gsItemX),$(e).attr("data-gs-y",n.gsItemY),$(e).attr("data-gs-width",n.gsItemWidth),$(e).attr("data-gs-height",n.gsItemHeight),$(e).attr("data-gs-min-width",n.gsItemMinWidth),$(e).attr("data-gs-min-height",n.gsItemMinHeight),$(e).attr("data-gs-max-width",n.gsItemMaxWidth),$(e).attr("data-gs-max-height",n.gsItemMaxHeight),$(e).attr("data-gs-auto-position",n.gsItemAutopos);var r=(a.addItem(e),e.data("_gridstack_node"));t(function(){n.onItemAdded({item:r})}),n.$watch(function(){return $(e).attr("data-gs-x")},function(t){n.gsItemX=t}),n.$watch(function(){return $(e).attr("data-gs-y")},function(t){n.gsItemY=t}),n.$watch(function(){return $(e).attr("data-gs-width")},function(t){n.gsItemWidth=t}),n.$watch(function(){return $(e).attr("data-gs-height")},function(t){n.gsItemHeight=t}),n.$watch(function(){return $(e).attr("data-gs-min-width")},function(t){n.gsItemMinWidth=t}),n.$watch(function(){return $(e).attr("data-gs-min-height")},function(t){n.gsItemMinHeight=t}),n.$watch(function(){return $(e).attr("data-gs-max-width")},function(t){n.gsItemMaxWidth=t}),n.$watch(function(){return $(e).attr("data-gs-max-height")},function(t){n.gsItemMaxHeight=t}),e.bind("$destroy",function(){var t=e.data("_gridstack_node");n.onItemRemoved({item:t}),a.removeItem(e)})}}}])}(); +!function(){"use strict";angular.module("gridstack-angular",[]);var t=angular.module("gridstack-angular");t.controller("GridstackController",["$scope",function(t){var n=null;this.init=function(t,a){return n=t.gridstack(a).data("gridstack")},this.removeItem=function(t){return n?n.removeWidget(t,!1):null},this.addItem=function(t){return n?(n.makeWidget(t),t):null}}])}(),function(){"use strict";var t=angular.module("gridstack-angular");t.directive("gridstack",["$timeout",function(t){return{restrict:"A",controller:"GridstackController",scope:{onChange:"&",onDragStart:"&",onDragStop:"&",onResizeStart:"&",onResizeStop:"&",gridstackHandler:"=",options:"="},link:function(n,a,e,i,r){var o=i.init(a,n.options);n.gridstackHandler=o,a.on("change",function(a,e){t(function(){n.$apply(),n.onChange({event:a,items:e})})}),a.on("dragstart",function(t,a){n.onDragStart({event:t,ui:a})}),a.on("dragstop",function(a,e){t(function(){n.$apply(),n.onDragStop({event:a,ui:e})})}),a.on("resizestart",function(t,a){n.onResizeStart({event:t,ui:a})}),a.on("resizestop",function(a,e){t(function(){n.$apply(),n.onResizeStop({event:a,ui:e})})})}}}])}(),function(){"use strict";var t=angular.module("gridstack-angular");t.directive("gridstackItem",["$timeout",function(t){return{restrict:"A",controller:"GridstackController",require:"^gridstack",scope:{gridstackItem:"=",onItemAdded:"&",onItemRemoved:"&",gsItemX:"=",gsItemY:"=",gsItemWidth:"=",gsItemHeight:"=",gsItemMinWidth:"=",gsItemMinHeight:"=",gsItemMaxWidth:"=",gsItemMaxHeight:"=",gsItemAutopos:"="},link:function(n,a,e,i){$(a).attr("data-gs-x",n.gsItemX),$(a).attr("data-gs-y",n.gsItemY),$(a).attr("data-gs-width",n.gsItemWidth),$(a).attr("data-gs-height",n.gsItemHeight),$(a).attr("data-gs-min-width",n.gsItemMinWidth),$(a).attr("data-gs-min-height",n.gsItemMinHeight),$(a).attr("data-gs-max-width",n.gsItemMaxWidth),$(a).attr("data-gs-max-height",n.gsItemMaxHeight),$(a).attr("data-gs-auto-position",n.gsItemAutopos);var r=(i.addItem(a),a.data("_gridstack_node"));t(function(){n.onItemAdded({item:r})}),n.$watch(function(){return $(a).attr("data-gs-x")},function(t){n.gsItemX=t}),n.$watch(function(){return $(a).attr("data-gs-y")},function(t){n.gsItemY=t}),n.$watch(function(){return $(a).attr("data-gs-width")},function(t){n.gsItemWidth=t}),n.$watch(function(){return $(a).attr("data-gs-height")},function(t){n.gsItemHeight=t}),n.$watch(function(){return $(a).attr("data-gs-min-width")},function(t){n.gsItemMinWidth=t}),n.$watch(function(){return $(a).attr("data-gs-min-height")},function(t){n.gsItemMinHeight=t}),n.$watch(function(){return $(a).attr("data-gs-max-width")},function(t){n.gsItemMaxWidth=t}),n.$watch(function(){return $(a).attr("data-gs-max-height")},function(t){n.gsItemMaxHeight=t}),a.bind("$destroy",function(){var t=a.data("_gridstack_node");n.onItemRemoved({item:t}),i.removeItem(a)})}}}])}(); \ No newline at end of file diff --git a/src/gridstack.controller.js b/src/gridstack.controller.js index 138cd9d..043a79b 100644 --- a/src/gridstack.controller.js +++ b/src/gridstack.controller.js @@ -31,4 +31,4 @@ }; }]); -})(); \ No newline at end of file +})(); diff --git a/src/gridstack.directive.js b/src/gridstack.directive.js index 5d841eb..a88d7ba 100644 --- a/src/gridstack.directive.js +++ b/src/gridstack.directive.js @@ -22,7 +22,7 @@ var gridstack = controller.init(element, scope.options); scope.gridstackHandler = gridstack; - + element.on('change', function (e, items) { $timeout(function() { scope.$apply(); diff --git a/src/gridstackitem.directive.js b/src/gridstackitem.directive.js index c13ee3f..24370dc 100644 --- a/src/gridstackitem.directive.js +++ b/src/gridstackitem.directive.js @@ -1,103 +1,103 @@ (function() { - 'use strict'; - - var app = angular.module('gridstack-angular'); - - /** @ngInject */ - app.directive('gridstackItem', ['$timeout', function($timeout) { - - return { - restrict: "A", - controller: 'GridstackController', - require: '^gridstack', - scope: { - gridstackItem: '=', - onItemAdded: '&', - onItemRemoved: '&', - gsItemX: '=', - gsItemY: '=', - gsItemWidth: '=', - gsItemHeight: '=', - gsItemMinWidth: '=', - gsItemMinHeight: '=', - gsItemMaxWidth: '=', - gsItemMaxHeight: '=', - gsItemAutopos: '=' - }, - link: function(scope, element, attrs, controller) { - - $(element).attr('data-gs-x', scope.gsItemX); - $(element).attr('data-gs-y', scope.gsItemY); - $(element).attr('data-gs-width', scope.gsItemWidth); - $(element).attr('data-gs-height', scope.gsItemHeight); - $(element).attr('data-gs-min-width', scope.gsItemMinWidth); - $(element).attr('data-gs-min-height', scope.gsItemMinHeight); - $(element).attr('data-gs-max-width', scope.gsItemMaxWidth); - $(element).attr('data-gs-max-height', scope.gsItemMaxHeight); - $(element).attr('data-gs-auto-position', scope.gsItemAutopos); - var widget = controller.addItem(element); - var item = element.data('_gridstack_node'); - $timeout(function() { - scope.onItemAdded({ item: item }); - }); - - scope.$watch(function() { - return $(element).attr('data-gs-x'); - }, function(val) { - scope.gsItemX = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-y'); - }, function(val) { - scope.gsItemY = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-width'); - }, function(val) { - scope.gsItemWidth = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-height'); - }, function(val) { - scope.gsItemHeight = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-min-width'); - }, function(val) { - scope.gsItemMinWidth = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-min-height'); - }, function(val) { - scope.gsItemMinHeight = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-max-width'); - }, function(val) { - scope.gsItemMaxWidth = val; - }); - - scope.$watch(function() { - return $(element).attr('data-gs-max-height'); - }, function(val) { - scope.gsItemMaxHeight = val; - }); - - element.bind('$destroy', function() { - var item = element.data('_gridstack_node'); - scope.onItemRemoved({ item: item }); - controller.removeItem(element); - }); - - } - - }; + 'use strict'; + + var app = angular.module('gridstack-angular'); + + /** @ngInject */ + app.directive('gridstackItem', ['$timeout', function($timeout) { + + return { + restrict: "A", + controller: 'GridstackController', + require: '^gridstack', + scope: { + gridstackItem: '=', + onItemAdded: '&', + onItemRemoved: '&', + gsItemX: '=', + gsItemY: '=', + gsItemWidth: '=', + gsItemHeight: '=', + gsItemMinWidth: '=', + gsItemMinHeight: '=', + gsItemMaxWidth: '=', + gsItemMaxHeight: '=', + gsItemAutopos: '=' + }, + link: function(scope, element, attrs, controller) { + + $(element).attr('data-gs-x', scope.gsItemX); + $(element).attr('data-gs-y', scope.gsItemY); + $(element).attr('data-gs-width', scope.gsItemWidth); + $(element).attr('data-gs-height', scope.gsItemHeight); + $(element).attr('data-gs-min-width', scope.gsItemMinWidth); + $(element).attr('data-gs-min-height', scope.gsItemMinHeight); + $(element).attr('data-gs-max-width', scope.gsItemMaxWidth); + $(element).attr('data-gs-max-height', scope.gsItemMaxHeight); + $(element).attr('data-gs-auto-position', scope.gsItemAutopos); + var widget = controller.addItem(element); + var item = element.data('_gridstack_node'); + $timeout(function() { + scope.onItemAdded({ item: item }); + }); + + scope.$watch(function() { + return $(element).attr('data-gs-x'); + }, function(val) { + scope.gsItemX = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-y'); + }, function(val) { + scope.gsItemY = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-width'); + }, function(val) { + scope.gsItemWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-height'); + }, function(val) { + scope.gsItemHeight = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-min-width'); + }, function(val) { + scope.gsItemMinWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-min-height'); + }, function(val) { + scope.gsItemMinHeight = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-max-width'); + }, function(val) { + scope.gsItemMaxWidth = val; + }); + + scope.$watch(function() { + return $(element).attr('data-gs-max-height'); + }, function(val) { + scope.gsItemMaxHeight = val; + }); + + element.bind('$destroy', function() { + var item = element.data('_gridstack_node'); + scope.onItemRemoved({ item: item }); + controller.removeItem(element); + }); + + } + + }; }]); })(); From adbbe64f90689f4504e9f3e625cbbdd6e26ffcdf Mon Sep 17 00:00:00 2001 From: Zacaria Date: Mon, 13 Jun 2016 16:56:00 +0200 Subject: [PATCH 8/8] [ UPDATE ] : demo --- demo/index.html | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/demo/index.html b/demo/index.html index df816dc..eaa0da6 100644 --- a/demo/index.html +++ b/demo/index.html @@ -30,11 +30,12 @@

gridstack-angular demo

{{widgets}}


-
+
gridstack-angular demo