migrate from 4.3.0

tiberiuzuld · Dec 17, 2017 · 26df744 · 26df744
1 parent a0e6db6
commit 26df744
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 62 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@ angular-gridster2
 # Angularjs 1.x version [Demo](http://tiberiuzuld.github.io/angular-gridster2/angularjs)
 
 ### Angular 5.x library is [master branch](https://github.com/tiberiuzuld/angular-gridster2/tree/master) 
-### Angular 4.x library is [4.x branch](https://github.com/tiberiuzuld/angular-gridster2/tree/4.x) (no longer maintained)
+### Angular 4.x library is [4.x branch](https://github.com/tiberiuzuld/angular-gridster2/tree/4.x)
 ### Angular 2.x library is [2.4.x branch](https://github.com/tiberiuzuld/angular-gridster2/tree/2.4.x) (no longer maintained)
 ### AngularJS >=1.5.x library is [1.x branch](https://github.com/tiberiuzuld/angular-gridster2/tree/1.x)
 
@@ -98,7 +98,7 @@ var GridsterConfigService = {
   // Arguments: gridsterItem, gridsterItemComponent
   itemResizeCallback: undefined,  // callback to call for each item when width/height changes.
   // Arguments: gridsterItem, gridsterItemComponent
-  itemInitCallback: undefined,  // callback to call for each item when is initialized.
+  itemInitCallback: undefined,  // callback to call for each item when is initialized and has size > 0.
   // Arguments: gridsterItem, gridsterItemComponent
   itemRemovedCallback: undefined,  // callback to call for each item when is removed.
     // Arguments: gridsterItem, gridsterItemComponent
@@ -146,9 +146,10 @@ var GridsterConfigService = {
   disablePushOnResize: false, // disable push on resize
   pushDirections: {north: true, east: true, south: true, west: true}, // control the directions items are pushed
   pushResizeItems: false, // on resize of item will shrink adjacent items
-    displayGrid: 'onDrag&Resize', // display background grid of rows and columns. Options: 'always' | 'onDrag&Resize' | 'none'
+  displayGrid: 'onDrag&Resize', // display background grid of rows and columns. Options: 'always' | 'onDrag&Resize' | 'none'
   disableWindowResize: false, // disable the window on resize listener. This will stop grid to recalculate on window resize.
-  disableWarnings: false // disable console log warnings about misplacement of grid items
+  disableWarnings: false, // disable console log warnings about misplacement of grid items
+  scrollToNewItems: false // scroll to new items placed in a scrollable view
 };
 ```
 
@@ -180,7 +181,7 @@ export interface GridsterItem {
   y?: number; // y position if missing will auto position
   rows?: number; // number of rows if missing will use grid option defaultItemRows
   cols?: number; // number of columns if missing will use grid option defaultItemCols
-  initCallback?: Function; // initialization callback. Argument: GridsterItem, GridsterItemComponent
+  initCallback?: Function; // initialization callback and has size > 0. Argument: GridsterItem, GridsterItemComponent
   dragEnabled?: boolean; // override grid option draggable.enabled
   resizeEnabled?: boolean; // override grid option resizable.enabled
   compactEnabled?: boolean; // disable compact

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-gridster2",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "main": "index.js",
   "dependencies": {
     "angular": ">=1.6.0"

diff --git a/src/app/main.component.js b/src/app/main.component.js
@@ -69,7 +69,8 @@
         pushResizeItems: false,
         displayGrid: 'onDrag&Resize',
         disableWindowResize: false,
-        disableWarnings: false
+        disableWarnings: false,
+        scrollToNewItems: false
       };
 
       this.dashboard = [

diff --git a/src/app/main.html b/src/app/main.html
@@ -117,6 +117,14 @@
       Disable window resize
     </md-checkbox>
   </div>
+  <div class="layout-row layout-align-start-center flex">
+    <md-checkbox ng-model="main.options.scrollToNewItems" ng-change="main.changedOptions()" class="flex">
+      Scroll to new items
+    </md-checkbox>
+    <md-checkbox ng-model="main.options.disableWarnings" ng-change="main.changedOptions()" class="flex">
+      Disable console warnings
+    </md-checkbox>
+  </div>
   <label class="md-headline">Item Settings</label>
   <div class="layout-row layout-align-start-center flex">
     <md-input-container class="flex">

diff --git a/src/gridster2/gridster.component.js b/src/gridster2/gridster.component.js
@@ -21,7 +21,6 @@
     vm.mobile = false;
     vm.columns = 0;
     vm.rows = 0;
-    vm.windowResize = angular.noop;
     vm.gridLines = undefined;
     vm.dragInProgress = false;
 
@@ -33,18 +32,6 @@
     vm.grid = [];
     vm.curColWidth = 0;
     vm.curRowHeight = 0;
-    vm.$options.draggable.stop = undefined;
-    vm.$options.draggable.start = undefined;
-    vm.$options.resizable.stop = undefined;
-    vm.$options.resizable.start = undefined;
-    vm.$options.itemChangeCallback = undefined;
-    vm.$options.itemResizeCallback = undefined;
-    vm.$options.itemInitCallback = undefined;
-    vm.$options.itemRemovedCallback = undefined;
-    vm.$options.emptyCellClickCallback = undefined;
-    vm.$options.emptyCellContextMenuCallback = undefined;
-    vm.$options.emptyCellDropCallback = undefined;
-    vm.$options.emptyCellDragCallback = undefined;
 
     vm.checkCollisionTwoItems = function checkCollisionTwoItems(item, item2) {
       return item.x < item2.x + item2.cols
@@ -132,6 +119,7 @@
       delete vm.emptyCell;
       vm.compact.destroy();
       delete vm.compact;
+      delete vm.movingItem;
     };
 
     vm.onResize = function onResize() {
@@ -199,11 +187,11 @@
 
       vm.setGridDimensions();
       if (vm.$options.outerMargin) {
-        vm.curColWidth = Math.floor((vm.curWidth - vm.$options.margin) / vm.columns);
-        vm.curRowHeight = Math.floor((vm.curHeight - vm.$options.margin) / vm.rows);
+        vm.curColWidth = (vm.curWidth - vm.$options.margin) / vm.columns;
+        vm.curRowHeight = (vm.curHeight - vm.$options.margin) / vm.rows;
       } else {
-        vm.curColWidth = Math.floor((vm.curWidth + vm.$options.margin) / vm.columns);
-        vm.curRowHeight = Math.floor((vm.curHeight + vm.$options.margin) / vm.rows);
+        vm.curColWidth = (vm.curWidth + vm.$options.margin) / vm.columns;
+        vm.curRowHeight = (vm.curHeight + vm.$options.margin) / vm.rows;
       }
       var addClass;
       var removeClass1;
@@ -290,19 +278,13 @@
       }
       vm.grid.push(itemComponent);
       vm.calculateLayoutDebounce();
-      if (itemComponent.$item.initCallback) {
-        itemComponent.$item.initCallback(itemComponent.item, itemComponent);
-      }
-      if (vm.$options.itemInitCallback) {
-        vm.$options.itemInitCallback(itemComponent.item, itemComponent);
-      }
     };
 
     vm.removeItem = function removeItem(itemComponent) {
       vm.grid.splice(vm.grid.indexOf(itemComponent), 1);
       vm.calculateLayoutDebounce();
-      if (vm.$options.itemRemovedCallback) {
-        vm.$options.itemRemovedCallback(itemComponent.item, itemComponent);
+      if (vm.options.itemRemovedCallback) {
+        vm.options.itemRemovedCallback(itemComponent.item, itemComponent);
       }
     };
 

diff --git a/src/gridster2/gridsterConfig.constant.js b/src/gridster2/gridsterConfig.constant.js
@@ -86,6 +86,7 @@
     pushResizeItems: false, // on resize of item will shrink adjacent items
     displayGrid: 'onDrag&Resize', // display background grid of rows and columns
     disableWindowResize: false, // disable the window on resize listener. This will stop grid to recalculate on window resize.
-    disableWarnings: false // disable console log warnings about misplacement of grid items
+    disableWarnings: false, // disable console log warnings about misplacement of grid items
+    scrollToNewItems: false // scroll to new items placed in a scrollable view
   });
 })();
diff --git a/src/gridster2/gridsterDraggable.service.js b/src/gridster2/gridsterDraggable.service.js
@@ -55,8 +55,8 @@
             return;
         }
 
-        if (vm.gridster.$options.draggable.start) {
-          vm.gridster.$options.draggable.start(vm.gridsterItem.item, vm.gridsterItem, e);
+        if (vm.gridster.options.draggable && vm.gridster.options.draggable.start) {
+          vm.gridster.options.draggable.start(vm.gridsterItem.item, vm.gridsterItem, e);
         }
 
         e.stopPropagation();
@@ -125,8 +125,8 @@
         vm.gridster.gridLines.updateGrid();
         vm.gridster.gridLines.updateGrid(false);
         vm.path = [];
-        if (vm.gridster.$options.draggable.stop) {
-          var promise = vm.gridster.$options.draggable.stop(vm.gridsterItem.item, vm.gridsterItem, e);
+        if (vm.gridster.options.draggable && vm.gridster.options.draggable.stop) {
+          var promise = vm.gridster.options.draggable.stop(vm.gridsterItem.item, vm.gridsterItem, e);
           if (promise && promise.then) {
             promise.then(vm.makeDrag.bind(vm), vm.cancelDrag.bind(vm));
           } else {

diff --git a/src/gridster2/gridsterEmptyCell.service.js b/src/gridster2/gridsterEmptyCell.service.js
@@ -14,7 +14,7 @@
       };
 
       vm.updateOptions = function () {
-        if (gridster.$options.enableEmptyCellClick && !vm.emptyCellClick && gridster.$options.emptyCellClickCallback) {
+        if (gridster.$options.enableEmptyCellClick && !vm.emptyCellClick && gridster.options.emptyCellClickCallback) {
           vm.emptyCellClick = true;
           gridster.el.addEventListener('click', vm.emptyCellClickCb);
           gridster.el.addEventListener('touchend', vm.emptyCellClickCb);
@@ -24,14 +24,14 @@
           gridster.el.removeEventListener('touchend', vm.emptyCellClickCb);
         }
         if (gridster.$options.enableEmptyCellContextMenu && !vm.emptyCellContextMenu &&
-          gridster.$options.emptyCellContextMenuCallback) {
+          gridster.options.emptyCellContextMenuCallback) {
           vm.emptyCellContextMenu = true;
           gridster.el.addEventListener('contextmenu', vm.emptyCellContextMenuCb);
         } else if (!gridster.$options.enableEmptyCellContextMenu && vm.emptyCellContextMenu) {
           vm.emptyCellContextMenu = false;
           gridster.el.removeEventListener('contextmenu', vm.emptyCellContextMenuCb);
         }
-        if (gridster.$options.enableEmptyCellDrop && !vm.emptyCellDrop && gridster.$options.emptyCellDropCallback) {
+        if (gridster.$options.enableEmptyCellDrop && !vm.emptyCellDrop && gridster.options.emptyCellDropCallback) {
           vm.emptyCellDrop = true;
           gridster.el.addEventListener('drop', vm.emptyCellDragDrop);
           gridster.el.addEventListener('dragover', vm.emptyCellDragOver);
@@ -40,7 +40,7 @@
           gridster.el.removeEventListener('drop', vm.emptyCellDragDrop);
           gridster.el.removeEventListener('dragover', vm.emptyCellDragOver);
         }
-        if (gridster.$options.enableEmptyCellDrag && !vm.emptyCellDrag && gridster.$options.emptyCellDragCallback) {
+        if (gridster.$options.enableEmptyCellDrag && !vm.emptyCellDrag && gridster.options.emptyCellDragCallback) {
           vm.emptyCellDrag = true;
           gridster.el.addEventListener('mousedown', vm.emptyCellMouseDown);
           gridster.el.addEventListener('touchstart', vm.emptyCellMouseDown);
@@ -58,7 +58,7 @@
         if (!item) {
           return;
         }
-        gridster.$options.emptyCellClickCallback(e, item);
+        gridster.options.emptyCellClickCallback(e, item);
       };
 
       vm.emptyCellContextMenuCb = function (e) {
@@ -71,15 +71,15 @@
         if (!item) {
           return;
         }
-        gridster.$options.emptyCellContextMenuCallback(e, item);
+        gridster.options.emptyCellContextMenuCallback(e, item);
       };
 
       vm.emptyCellDragDrop = function (e) {
         var item = vm.getValidItemFromEvent(e);
         if (!item) {
           return;
         }
-        gridster.$options.emptyCellDropCallback(e, item);
+        gridster.options.emptyCellDropCallback(e, item);
       };
 
       vm.emptyCellDragOver = function (e) {
@@ -132,7 +132,7 @@
         if (item) {
           gridster.movingItem = item;
         }
-        gridster.$options.emptyCellDragCallback(e, gridster.movingItem);
+        gridster.options.emptyCellDragCallback(e, gridster.movingItem);
         setTimeout(function () {
           gridster.movingItem = null;
           gridster.previewStyle();

diff --git a/src/gridster2/gridsterItem.component.js b/src/gridster2/gridsterItem.component.js
@@ -22,7 +22,6 @@
       rows: undefined,
       x: undefined,
       y: undefined,
-      initCallback: undefined,
       dragEnabled: undefined,
       resizeEnabled: undefined,
       compactEnabled: undefined,
@@ -45,6 +44,7 @@
     vm.width = 0;
     vm.height = 0;
     vm.itemMargin = 0;
+    vm.init = false;
 
     vm.$onInit = function () {
       vm.drag = new GridsterDraggable(vm, vm.gridster);
@@ -59,11 +59,12 @@
 
     vm.$onDestroy = function () {
       vm.gridster.removeItem(vm);
-      delete vm.$item.initCallback;
       vm.drag.destroy();
       delete vm.drag;
       vm.resize.destroy();
       delete vm.resize;
+      delete vm.el;
+      delete vm.nativeEl;
     };
 
     vm.setSize = function (noCheck) {
@@ -87,7 +88,7 @@
         vm.height = vm.$item.rows * vm.gridster.curRowHeight - vm.gridster.$options.margin;
       }
       if (!noCheck && vm.top === vm.itemTop && vm.left === vm.itemLeft &&
-          vm.width === vm.itemWidth && vm.height === vm.itemHeight) {
+        vm.width === vm.itemWidth && vm.height === vm.itemHeight) {
         return;
       }
       if (vm.gridster.$options.outerMargin) {
@@ -102,10 +103,22 @@
       $element.css('width', vm.width + 'px');
       $element.css('height', vm.height + 'px');
       $element.css('margin', vm.itemMargin + 'px');
+      if (!vm.init && vm.width > 0 && vm.height) {
+        vm.init = true;
+        if (vm.item.initCallback) {
+          vm.item.initCallback(vm.item, vm);
+        }
+        if (vm.gridster.options.itemInitCallback) {
+          vm.gridster.options.itemInitCallback(vm.item, vm);
+        }
+        if (vm.gridster.$options.scrollToNewItems) {
+          vm.nativeEl.scrollIntoView(false);
+        }
+      }
       if (vm.width !== vm.itemWidth || vm.height !== vm.itemHeight) {
         $scope.$broadcast('gridster-item-resize', vm.item);
-        if (vm.gridster.$options.itemResizeCallback) {
-          vm.gridster.$options.itemResizeCallback(vm.item, vm);
+        if (vm.gridster.options.itemResizeCallback) {
+          vm.gridster.options.itemResizeCallback(vm.item, vm);
         }
       }
       vm.itemTop = vm.top;
@@ -116,14 +129,14 @@
 
     vm.itemChanged = function () {
       $scope.$broadcast('gridster-item-change', vm.item);
-      if (vm.gridster.$options.itemChangeCallback) {
-        vm.gridster.$options.itemChangeCallback(vm.item, vm);
+      if (vm.gridster.options.itemChangeCallback) {
+        vm.gridster.options.itemChangeCallback(vm.item, vm);
       }
     };
 
     vm.checkItemChanges = function (newValue, oldValue) {
       if (newValue.rows === oldValue.rows && newValue.cols === oldValue.cols && newValue.x === oldValue.x &&
-          newValue.y === oldValue.y) {
+        newValue.y === oldValue.y) {
         return;
       }
       if (vm.gridster.checkCollision(vm.$item)) {
@@ -143,12 +156,12 @@
 
     vm.canBeDragged = function canBeDragged() {
       return !vm.gridster.mobile &&
-             (vm.$item.dragEnabled === undefined ? vm.gridster.$options.draggable.enabled : vm.$item.dragEnabled);
+        (vm.$item.dragEnabled === undefined ? vm.gridster.$options.draggable.enabled : vm.$item.dragEnabled);
     };
 
     vm.canBeResized = function canBeResized() {
       return !vm.gridster.mobile &&
-             (vm.$item.resizeEnabled === undefined ? vm.gridster.$options.resizable.enabled : vm.$item.resizeEnabled);
+        (vm.$item.resizeEnabled === undefined ? vm.gridster.$options.resizable.enabled : vm.$item.resizeEnabled);
     }
   }
 })();
diff --git a/src/gridster2/gridsterPreview.component.js b/src/gridster2/gridsterPreview.component.js
@@ -2,14 +2,14 @@
   'use strict';
 
   angular.module('angular-gridster2').component('gridsterPreview', {
-    controller: GridsterGridController,
+    controller: GridsterPreviewController,
     require: {
       gridster: '^^gridster'
     }
   });
 
   /** @ngInject */
-  function GridsterGridController($element) {
+  function GridsterPreviewController($element) {
     var vm = this;
 
     vm.$onInit = function () {

diff --git a/src/gridster2/gridsterResizable.service.js b/src/gridster2/gridsterResizable.service.js
@@ -62,8 +62,8 @@
             // right or middle mouse button
             return;
         }
-        if (vm.gridster.$options.resizable.start) {
-          vm.gridster.$options.resizable.start(vm.gridsterItem.item, vm.gridsterItem, e);
+        if (vm.gridster.options.resizable && vm.gridster.options.resizable.start) {
+          vm.gridster.options.resizable.start(vm.gridsterItem.item, vm.gridsterItem, e);
         }
         e.stopPropagation();
         e.preventDefault();
@@ -160,8 +160,8 @@
         vm.gridsterItem.el.removeClass('gridster-item-resizing');
         vm.gridster.dragInProgress = false;
         vm.gridster.gridLines.updateGrid();
-        if (vm.gridster.$options.resizable.stop) {
-          var promise = vm.gridster.$options.resizable.stop(vm.gridsterItem.item, vm.gridsterItem, e);
+        if (vm.gridster.options.resizable && vm.gridster.options.resizable.stop) {
+          var promise = vm.gridster.options.resizable.stop(vm.gridsterItem.item, vm.gridsterItem, e);
           if (promise && promise.then) {
             promise.then(vm.makeResize.bind(vm), vm.cancelResize.bind(vm));
           } else {