Skip to content

Commit aa7d082

Browse files
danomaticdanomatic
committed
performance improvements, improve dragging, remove isolate scope and transclude, expose controllers to their scopes
1 parent cd48e44 commit aa7d082

8 files changed

Lines changed: 287 additions & 207 deletions

File tree

‎README.md‎

Lines changed: 121 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -12,91 +12,91 @@ See <a href="https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.
1212

1313
Here is an example of the default usage:
1414
```HTML
15-
<div gridster>
16-
<ul>
17-
<li gridster-item="item" ng-repeat="item in standardItems"></li>
18-
</ul>
19-
</div>
15+
<div gridster>
16+
<ul>
17+
<li gridster-item="item" ng-repeat="item in standardItems"></li>
18+
</ul>
19+
</div>
2020
```
2121
Which expects a scope setup like the following:
2222
``` JavaScript
23-
// IMPORTANT: Items should be placed in the grid in the order in which they should appear.
24-
// In most cases the sorting should be by row ASC, col ASC
25-
26-
// these map directly to gridsterItem directive options
27-
$scope.standardItems = [
28-
{ sizeX: 2, sizeY: 1, row: 0, col: 0 },
29-
{ sizeX: 2, sizeY: 2, row: 0, col: 2 },
30-
{ sizeX: 1, sizeY: 1, row: 0, col: 4 },
31-
{ sizeX: 1, sizeY: 1, row: 0, col: 5 },
32-
{ sizeX: 2, sizeY: 1, row: 1, col: 0 },
33-
{ sizeX: 1, sizeY: 1, row: 1, col: 4 },
34-
{ sizeX: 1, sizeY: 2, row: 1, col: 5 },
35-
{ sizeX: 1, sizeY: 1, row: 2, col: 0 },
36-
{ sizeX: 2, sizeY: 1, row: 2, col: 1 },
37-
{ sizeX: 1, sizeY: 1, row: 2, col: 3 },
38-
{ sizeX: 1, sizeY: 1, row: 2, col: 4 }
39-
];
23+
// IMPORTANT: Items should be placed in the grid in the order in which they should appear.
24+
// In most cases the sorting should be by row ASC, col ASC
25+
26+
// these map directly to gridsterItem directive options
27+
$scope.standardItems = [
28+
{ sizeX: 2, sizeY: 1, row: 0, col: 0 },
29+
{ sizeX: 2, sizeY: 2, row: 0, col: 2 },
30+
{ sizeX: 1, sizeY: 1, row: 0, col: 4 },
31+
{ sizeX: 1, sizeY: 1, row: 0, col: 5 },
32+
{ sizeX: 2, sizeY: 1, row: 1, col: 0 },
33+
{ sizeX: 1, sizeY: 1, row: 1, col: 4 },
34+
{ sizeX: 1, sizeY: 2, row: 1, col: 5 },
35+
{ sizeX: 1, sizeY: 1, row: 2, col: 0 },
36+
{ sizeX: 2, sizeY: 1, row: 2, col: 1 },
37+
{ sizeX: 1, sizeY: 1, row: 2, col: 3 },
38+
{ sizeX: 1, sizeY: 1, row: 2, col: 4 }
39+
];
4040
```
4141
Alternatively, you can use the html attributes, similar to the original gridster plugin, but with two-way data binding:
4242
```HTML
43-
<div gridster>
44-
<ul>
45-
<li gridster-item row="item.position[0]" col="item.position[1]" size-x="item.size.x" size-y="item.size.y" ng-repeat="item in customItems"></li>
46-
</ul>
47-
</div>
43+
<div gridster>
44+
<ul>
45+
<li gridster-item row="item.position[0]" col="item.position[1]" size-x="item.size.x" size-y="item.size.y" ng-repeat="item in customItems"></li>
46+
</ul>
47+
</div>
4848
```
4949
or:
5050
```HTML
51-
<div data-gridster>
52-
<ul>
53-
<li data-gridster-item data-row="item.position[0]" data-col="item.position[1]" data-sizex="item.size.x" data-sizey="item.size.y" ng-repeat="item in customItems"></li>
54-
</ul>
55-
</div>
51+
<div data-gridster>
52+
<ul>
53+
<li data-gridster-item data-row="item.position[0]" data-col="item.position[1]" data-sizex="item.size.x" data-sizey="item.size.y" ng-repeat="item in customItems"></li>
54+
</ul>
55+
</div>
5656
```
5757
This allows the items to provide their own structure for row, col, and size:
5858
```JavaScript
59-
$scope.customItems = [
60-
{ size: { x: 2, y: 1 }, position: [0, 0] },
61-
{ size: { x: 2, y: 2 }, position: [0, 2] },
62-
{ size: { x: 1, y: 1 }, position: [0, 4] },
63-
{ size: { x: 1, y: 1 }, position: [0, 5] },
64-
{ size: { x: 2, y: 1 }, position: [1, 0] },
65-
{ size: { x: 1, y: 1 }, position: [1, 4] },
66-
{ size: { x: 1, y: 2 }, position: [1, 5] },
67-
{ size: { x: 1, y: 1 }, position: [2, 0] },
68-
{ size: { x: 2, y: 1 }, position: [2, 1] },
69-
{ size: { x: 1, y: 1 }, position: [2, 3] },
70-
{ size: { x: 1, y: 1 }, position: [2, 4] }
71-
];
59+
$scope.customItems = [
60+
{ size: { x: 2, y: 1 }, position: [0, 0] },
61+
{ size: { x: 2, y: 2 }, position: [0, 2] },
62+
{ size: { x: 1, y: 1 }, position: [0, 4] },
63+
{ size: { x: 1, y: 1 }, position: [0, 5] },
64+
{ size: { x: 2, y: 1 }, position: [1, 0] },
65+
{ size: { x: 1, y: 1 }, position: [1, 4] },
66+
{ size: { x: 1, y: 2 }, position: [1, 5] },
67+
{ size: { x: 1, y: 1 }, position: [2, 0] },
68+
{ size: { x: 2, y: 1 }, position: [2, 1] },
69+
{ size: { x: 1, y: 1 }, position: [2, 3] },
70+
{ size: { x: 1, y: 1 }, position: [2, 4] }
71+
];
7272
```
7373
Instead of using attributes for row, col, and size, you can also just use a mapping object for the gridster-item directive:
7474
```HTML
75-
<div gridster="gridsterOpts">
76-
<ul>
77-
<li gridster-item="customItemMap" ng-repeat="item in customItems"></li>
78-
</ul>
79-
</div>
75+
<div gridster="gridsterOpts">
76+
<ul>
77+
<li gridster-item="customItemMap" ng-repeat="item in customItems"></li>
78+
</ul>
79+
</div>
8080
```
8181
This expects a scope similar to the previous example, but with customItemMap also defined in the scope:
8282
```JavaScript
83-
// maps the item from customItems in the scope to the gridsterItem options
84-
$scope.customItemMap = {
85-
sizeX: 'item.size.x',
86-
sizeY: 'item.size.y',
87-
row: 'item.position[0]',
88-
col: 'item.position[1]',
89-
minSizeY: 'item.minSizeY',
90-
maxSizeY: 'item.maxSizeY'
91-
};
83+
// maps the item from customItems in the scope to the gridsterItem options
84+
$scope.customItemMap = {
85+
sizeX: 'item.size.x',
86+
sizeY: 'item.size.y',
87+
row: 'item.position[0]',
88+
col: 'item.position[1]',
89+
minSizeY: 'item.minSizeY',
90+
maxSizeY: 'item.maxSizeY'
91+
};
9292
```
9393
The gridsterItem directive can be configured like this:
9494
```HTML
95-
<div gridster="gridsterOpts">
96-
<ul>
97-
<li gridster-item="item" ng-repeat="item in standardItems"></li>
98-
</ul>
99-
</div>
95+
<div gridster="gridsterOpts">
96+
<ul>
97+
<li gridster-item="item" ng-repeat="item in standardItems"></li>
98+
</ul>
99+
</div>
100100
```
101101

102102
## Configuration
@@ -105,55 +105,72 @@ The gridsterItem directive can be configured like this:
105105
Simply pass your desired options to the gridster directive
106106

107107
```JavaScript
108-
$scope.gridsterOpts = {
109-
columns: 6, // the width of the grid, in columns
110-
pushing: true, // whether to push other items out of the way on move or resize
111-
floating: true, // whether to automatically float items up so they stack (you can temporarily disable if you are adding unsorted items with ng-repeat)
112-
swapping: false, // whether or not to have items of the same size switch places instead of pushing down if they are the same size
113-
width: 'auto', // can be an integer or 'auto'. 'auto' scales gridster to be the full width of its containing element
114-
colWidth: 'auto', // can be an integer or 'auto'. 'auto' uses the pixel width of the element divided by 'columns'
115-
rowHeight: 'match', // can be an integer or 'match'. Match uses the colWidth, giving you square widgets.
116-
margins: [10, 10], // the pixel distance between each widget
117-
outerMargin: true, // whether margins apply to outer edges of the grid
118-
isMobile: false, // stacks the grid items if true
119-
mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
120-
mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
121-
minColumns: 1, // the minimum columns the grid must have
122-
minRows: 2, // the minimum height of the grid, in rows
123-
maxRows: 100,
124-
defaultSizeX: 2, // the default width of a gridster item, if not specifed
125-
defaultSizeY: 1, // the default height of a gridster item, if not specified
126-
minSizeX: 1, // minimum column width of an item
127-
maxSizeX: null, // maximum column width of an item
128-
minSizeY: 1, // minumum row height of an item
129-
maxSizeY: null, // maximum row height of an item
130-
resizable: {
131-
enabled: true,
132-
handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
133-
start: function(event, $element, widget) {}, // optional callback fired when resize is started,
134-
resize: function(event, $element, widget) {}, // optional callback fired when item is resized,
135-
stop: function(event, $element, widget) {} // optional callback fired when item is finished resizing
136-
},
137-
draggable: {
138-
enabled: true, // whether dragging items is supported
139-
handle: '.my-class', // optional selector for resize handle
140-
start: function(event, $element, widget) {}, // optional callback fired when drag is started,
141-
drag: function(event, $element, widget) {}, // optional callback fired when item is moved,
142-
stop: function(event, $element, widget) {} // optional callback fired when item is finished dragging
143-
}
144-
};
108+
$scope.gridsterOpts = {
109+
columns: 6, // the width of the grid, in columns
110+
pushing: true, // whether to push other items out of the way on move or resize
111+
floating: true, // whether to automatically float items up so they stack (you can temporarily disable if you are adding unsorted items with ng-repeat)
112+
swapping: false, // whether or not to have items of the same size switch places instead of pushing down if they are the same size
113+
width: 'auto', // can be an integer or 'auto'. 'auto' scales gridster to be the full width of its containing element
114+
colWidth: 'auto', // can be an integer or 'auto'. 'auto' uses the pixel width of the element divided by 'columns'
115+
rowHeight: 'match', // can be an integer or 'match'. Match uses the colWidth, giving you square widgets.
116+
margins: [10, 10], // the pixel distance between each widget
117+
outerMargin: true, // whether margins apply to outer edges of the grid
118+
isMobile: false, // stacks the grid items if true
119+
mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
120+
mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
121+
minColumns: 1, // the minimum columns the grid must have
122+
minRows: 2, // the minimum height of the grid, in rows
123+
maxRows: 100,
124+
defaultSizeX: 2, // the default width of a gridster item, if not specifed
125+
defaultSizeY: 1, // the default height of a gridster item, if not specified
126+
minSizeX: 1, // minimum column width of an item
127+
maxSizeX: null, // maximum column width of an item
128+
minSizeY: 1, // minumum row height of an item
129+
maxSizeY: null, // maximum row height of an item
130+
resizable: {
131+
enabled: true,
132+
handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
133+
start: function(event, $element, widget) {}, // optional callback fired when resize is started,
134+
resize: function(event, $element, widget) {}, // optional callback fired when item is resized,
135+
stop: function(event, $element, widget) {} // optional callback fired when item is finished resizing
136+
},
137+
draggable: {
138+
enabled: true, // whether dragging items is supported
139+
handle: '.my-class', // optional selector for resize handle
140+
start: function(event, $element, widget) {}, // optional callback fired when drag is started,
141+
drag: function(event, $element, widget) {}, // optional callback fired when item is moved,
142+
stop: function(event, $element, widget) {} // optional callback fired when item is finished dragging
143+
}
144+
};
145145
```
146146

147147

148148
#### Via Constant
149149
You can also override the default configuration site wide by modifying the ```gridsterConfig``` constant
150150

151151
```js
152-
angular.module('yourApp').run(['gridsterConfig', function(gridsterConfig) {
153-
gridsterConfig.width = 1000;
154-
}]);
152+
angular.module('yourApp').run(['gridsterConfig', function(gridsterConfig) {
153+
gridsterConfig.width = 1000;
154+
}]);
155155
```
156156

157+
## Controller Access
158+
159+
The gridster and gridsterItem directive controller objects can be accessed within their scopes as 'gridster' and 'gridsterItem'.
160+
161+
These controllers are internal APIs that are subject to change.
162+
163+
```html
164+
<div gridster="gridsterOpts">
165+
<ul>
166+
<li gridster-item="item" ng-repeat="item in standardItems">
167+
{{ gridsterItem.isMoving() }}
168+
</li>
169+
</ul>
170+
</div>
171+
```
172+
173+
157174
## Gridster Events
158175

159176
#### gridster-mobile-changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-gridster",
3-
"version": "0.12.0",
3+
"version": "0.13.0",
44
"main": ["src/angular-gridster.js", "dist/angular-gridster.min.css"],
55
"dependencies": {
66
"angular": ">= 1.2.0",

‎dist/angular-gridster.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/angular-gridster.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html>
33

44
<head>
@@ -12,7 +12,7 @@
1212
<link rel="stylesheet" href="dist/angular-gridster.min.css" />
1313
<link rel="stylesheet" href="demo/common/style.css" />
1414

15-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
15+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
1616
<script src="https://code.angularjs.org/1.2.15/angular-route.min.js"></script>
1717
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
1818

@@ -76,4 +76,4 @@
7676
</div>
7777
</body>
7878

79-
</html>
79+
</html>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-gridster",
3-
"version": "0.12.0",
3+
"version": "0.13.0",
44
"description": "This directive gives you gridster behavior",
55
"license": "MIT",
66
"homepage": "http://manifestwebdesign.github.io/angular-gridster",

0 commit comments

Comments
 (0)