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/demo/index.html b/demo/index.html index cd9ae43..eaa0da6 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,112 +1,170 @@ - - - - - - - gridstack-angular demo - - - - - - - - -
-

gridstack-angular demo

-

{{widgets}}

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

gridstack-angular demo

+

{{widgets}}

+ +
+
+
+
+
remove
+
-
- - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + diff --git a/dist/gridstack-angular.js b/dist/gridstack-angular.js index 25ab1a4..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'; @@ -39,6 +32,7 @@ }]); })(); + (function() { 'use strict'; @@ -56,11 +50,13 @@ onDragStop: '&', onResizeStart: '&', onResizeStop: '&', + gridstackHandler: '=', options: '=' }, 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) { $timeout(function() { @@ -96,66 +92,107 @@ }]); })(); -(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); - }); - - } - - }; +(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); + }); + + } + + }; }]); -})(); \ No newline at end of file +})(); diff --git a/dist/gridstack-angular.min.js b/dist/gridstack-angular.min.js index d929fce..beead9a 100644 --- a/dist/gridstack-angular.min.js +++ b/dist/gridstack-angular.min.js @@ -1,10 +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 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,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/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", 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 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 +})();