diff --git a/README.md b/README.md
index 9b607e65..552decf2 100644
--- 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
index 3c60a6c1..843f5ab8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "angular-gridster2",
- "version": "1.18.0",
+ "version": "1.19.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index de2d774e..6d235aa9 100644
--- 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
index a24a837a..66ba6a36 100644
--- 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
index 9ae60269..e47682bf 100644
--- a/src/app/main.html
+++ b/src/app/main.html
@@ -117,6 +117,14 @@
Disable window resize
+
+
+ Scroll to new items
+
+
+ Disable console warnings
+
+
diff --git a/src/gridster2/gridster.component.js b/src/gridster2/gridster.component.js
index 0116efae..bfbcb5d6 100644
--- 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
index 5038c40d..25fccc37 100644
--- 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
index cb517498..b4981290 100644
--- 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
index 02b4a870..3e5ad623 100644
--- 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,7 +71,7 @@
if (!item) {
return;
}
- gridster.$options.emptyCellContextMenuCallback(e, item);
+ gridster.options.emptyCellContextMenuCallback(e, item);
};
vm.emptyCellDragDrop = function (e) {
@@ -79,7 +79,7 @@
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
index 9f726872..9bc08fb7 100644
--- 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
index 9eefa529..fa62696c 100644
--- 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
index d31a4659..98bd0ebc 100644
--- 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 {