Skip to content

Commit a9fa3ef

Browse files
ynicolaouynicolaou
authored
Merge pull request #3 from RJMetrics/upgrade/0.13.14
Upgrade/0.13.14
2 parents d0618b3 + 8f6cf74 commit a9fa3ef

File tree

2 files changed

+25
-370
lines changed

2 files changed

+25
-370
lines changed

‎README.md

+5-363
Original file line numberDiff line numberDiff line change
@@ -1,365 +1,7 @@
1-
angular-gridster
2-
================
3-
[![Build Status](https://travis-ci.org/ManifestWebDesign/angular-gridster.svg)](https://travis-ci.org/ManifestWebDesign/angular-gridster)
1+
RJMetrics fork of angular gridster
2+
==================================
43

5-
An implementation of gridster-like widgets for Angular JS. This is not a wrapper on the original gridster jQuery plugin (http://gridster.net/). It is instead completely rewritten as Angular directives. Rewriting allowed for some additional features and better use of Angular data binding. Even more importantly, the original plugin had unpredictable behavior and crashed when wrapped with an Angular directive in my initial tests.
4+
The main project can be found
5+
[here](https://github.com/ManifestWebDesign/angular-gridster).
66

7-
## Demo
8-
9-
See <a href="https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html">Live Demo</a>
10-
11-
## Installation
12-
13-
```bash
14-
bower install angular-gridster
15-
```
16-
17-
Then, import the following in your HTML alongside `jQuery` and `angular`:
18-
```html
19-
<link rel="stylesheet" href="bower_components/angular-gridster/dist/angular-gridster.min.css"/>
20-
<script src="bower_components/javascript-detect-element-resize/jquery.resize.js"></script>
21-
<script src="bower_components/angular-gridster/dist/angular-gridster.min.js"></script>
22-
```
23-
24-
`jquery.resize` is a jQuery plugin needed to check for changes in the gridster size.
25-
26-
## Usage
27-
28-
29-
```js
30-
31-
// load the gridster module
32-
angular.module('myModule', ['gridster']);
33-
34-
```
35-
36-
Default usage:
37-
```HTML
38-
<div gridster>
39-
<ul>
40-
<li gridster-item="item" ng-repeat="item in standardItems"></li>
41-
</ul>
42-
</div>
43-
```
44-
Which expects a scope setup like the following:
45-
``` JavaScript
46-
// IMPORTANT: Items should be placed in the grid in the order in which they should appear.
47-
// In most cases the sorting should be by row ASC, col ASC
48-
49-
// these map directly to gridsterItem directive options
50-
$scope.standardItems = [
51-
{ sizeX: 2, sizeY: 1, row: 0, col: 0 },
52-
{ sizeX: 2, sizeY: 2, row: 0, col: 2 },
53-
{ sizeX: 1, sizeY: 1, row: 0, col: 4 },
54-
{ sizeX: 1, sizeY: 1, row: 0, col: 5 },
55-
{ sizeX: 2, sizeY: 1, row: 1, col: 0 },
56-
{ sizeX: 1, sizeY: 1, row: 1, col: 4 },
57-
{ sizeX: 1, sizeY: 2, row: 1, col: 5 },
58-
{ sizeX: 1, sizeY: 1, row: 2, col: 0 },
59-
{ sizeX: 2, sizeY: 1, row: 2, col: 1 },
60-
{ sizeX: 1, sizeY: 1, row: 2, col: 3 },
61-
{ sizeX: 1, sizeY: 1, row: 2, col: 4 }
62-
];
63-
```
64-
Alternatively, you can use the html attributes, similar to the original gridster plugin, but with two-way data binding:
65-
```HTML
66-
<div gridster>
67-
<ul>
68-
<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>
69-
</ul>
70-
</div>
71-
```
72-
or:
73-
```HTML
74-
<div data-gridster>
75-
<ul>
76-
<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>
77-
</ul>
78-
</div>
79-
```
80-
This allows the items to provide their own structure for row, col, and size:
81-
```JavaScript
82-
$scope.customItems = [
83-
{ size: { x: 2, y: 1 }, position: [0, 0] },
84-
{ size: { x: 2, y: 2 }, position: [0, 2] },
85-
{ size: { x: 1, y: 1 }, position: [0, 4] },
86-
{ size: { x: 1, y: 1 }, position: [0, 5] },
87-
{ size: { x: 2, y: 1 }, position: [1, 0] },
88-
{ size: { x: 1, y: 1 }, position: [1, 4] },
89-
{ size: { x: 1, y: 2 }, position: [1, 5] },
90-
{ size: { x: 1, y: 1 }, position: [2, 0] },
91-
{ size: { x: 2, y: 1 }, position: [2, 1] },
92-
{ size: { x: 1, y: 1 }, position: [2, 3] },
93-
{ size: { x: 1, y: 1 }, position: [2, 4] }
94-
];
95-
```
96-
Instead of using attributes for row, col, and size, you can also just use a mapping object for the gridster-item directive:
97-
```HTML
98-
<div gridster="gridsterOpts">
99-
<ul>
100-
<li gridster-item="customItemMap" ng-repeat="item in customItems"></li>
101-
</ul>
102-
</div>
103-
```
104-
This expects a scope similar to the previous example, but with customItemMap also defined in the scope:
105-
```JavaScript
106-
// maps the item from customItems in the scope to the gridsterItem options
107-
$scope.customItemMap = {
108-
sizeX: 'item.size.x',
109-
sizeY: 'item.size.y',
110-
row: 'item.position[0]',
111-
col: 'item.position[1]',
112-
minSizeY: 'item.minSizeY',
113-
maxSizeY: 'item.maxSizeY'
114-
};
115-
```
116-
The gridsterItem directive can be configured like this:
117-
```HTML
118-
<div gridster="gridsterOpts">
119-
<ul>
120-
<li gridster-item="item" ng-repeat="item in standardItems"></li>
121-
</ul>
122-
</div>
123-
```
124-
125-
## Configuration
126-
127-
#### Via Scope
128-
Simply pass your desired options to the gridster directive
129-
130-
```JavaScript
131-
$scope.gridsterOpts = {
132-
columns: 6, // the width of the grid, in columns
133-
pushing: true, // whether to push other items out of the way on move or resize
134-
floating: true, // whether to automatically float items up so they stack (you can temporarily disable if you are adding unsorted items with ng-repeat)
135-
swapping: false, // whether or not to have items of the same size switch places instead of pushing down if they are the same size
136-
width: 'auto', // can be an integer or 'auto'. 'auto' scales gridster to be the full width of its containing element
137-
colWidth: 'auto', // can be an integer or 'auto'. 'auto' uses the pixel width of the element divided by 'columns'
138-
rowHeight: 'match', // can be an integer or 'match'. Match uses the colWidth, giving you square widgets.
139-
margins: [10, 10], // the pixel distance between each widget
140-
outerMargin: true, // whether margins apply to outer edges of the grid
141-
sparse: false, // "true" can increase performance of dragging and resizing for big grid (e.g. 20x50)
142-
isMobile: false, // stacks the grid items if true
143-
mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
144-
mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
145-
minColumns: 1, // the minimum columns the grid must have
146-
minRows: 2, // the minimum height of the grid, in rows
147-
maxRows: 100,
148-
defaultSizeX: 2, // the default width of a gridster item, if not specifed
149-
defaultSizeY: 1, // the default height of a gridster item, if not specified
150-
minSizeX: 1, // minimum column width of an item
151-
maxSizeX: null, // maximum column width of an item
152-
minSizeY: 1, // minumum row height of an item
153-
maxSizeY: null, // maximum row height of an item
154-
resizable: {
155-
enabled: true,
156-
handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
157-
start: function(event, $element, widget) {}, // optional callback fired when resize is started,
158-
resize: function(event, $element, widget) {}, // optional callback fired when item is resized,
159-
stop: function(event, $element, widget) {} // optional callback fired when item is finished resizing
160-
},
161-
draggable: {
162-
enabled: true, // whether dragging items is supported
163-
handle: '.my-class', // optional selector for drag handle
164-
start: function(event, $element, widget) {}, // optional callback fired when drag is started,
165-
drag: function(event, $element, widget) {}, // optional callback fired when item is moved,
166-
stop: function(event, $element, widget) {} // optional callback fired when item is finished dragging
167-
}
168-
};
169-
```
170-
171-
172-
#### Via Constant
173-
You can also override the default configuration site wide by modifying the ```gridsterConfig``` constant
174-
175-
```js
176-
angular.module('yourApp').run(['gridsterConfig', function(gridsterConfig) {
177-
gridsterConfig.width = 1000;
178-
}]);
179-
```
180-
181-
## Controller Access
182-
183-
The gridster and gridsterItem directive controller objects can be accessed within their scopes as 'gridster' and 'gridsterItem'.
184-
185-
These controllers are internal APIs that are subject to change.
186-
187-
```html
188-
<div gridster="gridsterOpts">
189-
<ul>
190-
<li gridster-item="item" ng-repeat="item in standardItems">
191-
{{ gridsterItem.isMoving() }}
192-
</li>
193-
</ul>
194-
</div>
195-
```
196-
197-
198-
## Gridster Events
199-
200-
#### gridster-mobile-changed
201-
When the gridster goes in or out of mobile mode, a 'gridster-mobile-changed' event is broadcast on rootScope:
202-
203-
```js
204-
scope.$on('gridster-mobile-changed', function(gridster) {
205-
})
206-
```
207-
208-
#### gridster-draggable-changed
209-
When the gridster draggable properties change, a 'gridster-draggable-changed' event is broadcast on rootScope:
210-
211-
```js
212-
scope.$on('gridster-draggable-changed', function(gridster) {
213-
})
214-
```
215-
216-
#### gridster-resizable-changed
217-
When the gridster resizable properties change, a 'gridster-resizable-changed' event is broadcast on rootScope:
218-
219-
```js
220-
scope.$on('gridster-resizable-changed', function(gridster) {
221-
})
222-
```
223-
224-
#### gridster-resized
225-
When the gridster element's size changes, a 'gridster-resized' event is broadcast on rootScope:
226-
227-
```js
228-
scope.$on('gridster-resized', function(sizes, gridster) {
229-
// sizes[0] = width
230-
// sizes[1] = height
231-
// gridster.
232-
})
233-
```
234-
235-
## Gridster Item Events
236-
237-
#### gridster-item-transition-end
238-
Gridster items have CSS transitions by default. Gridster items listen for css transition-end across different browsers and broadcast the event 'gridster-item-transition-end'. You can listen for it like this from within the gridster-item directive:
239-
240-
```js
241-
scope.$on('gridster-item-transition-end', function(item) {
242-
// item.$element
243-
// item.gridster
244-
// item.row
245-
// item.col
246-
// item.sizeX
247-
// item.sizeY
248-
// item.minSizeX
249-
// item.minSizeY
250-
// item.maxSizeX
251-
// item.maxSizeY
252-
})
253-
```
254-
255-
#### gridster-item-initialized
256-
After a gridster item's controller has finished with setup, it broadcasts an event 'gridster-item-initialized' on its own scope. You can listen for it like this from within the gridster-item directive:
257-
258-
```js
259-
scope.$on('gridster-item-initialized', function(item) {
260-
// item.$element
261-
// item.gridster
262-
// item.row
263-
// item.col
264-
// item.sizeX
265-
// item.sizeY
266-
// item.minSizeX
267-
// item.minSizeY
268-
// item.maxSizeX
269-
// item.maxSizeY
270-
})
271-
```
272-
273-
#### gridster-item-resized
274-
After a gridster item's size changes (rows or columns), it broadcasts an event 'gridster-item-resized' on its own scope. You can listen for it like this from within the gridster-item directive:
275-
276-
```js
277-
scope.$on('gridster-item-resized', function(item) {
278-
// item.$element
279-
// item.gridster
280-
// item.row
281-
// item.col
282-
// item.sizeX
283-
// item.sizeY
284-
// item.minSizeX
285-
// item.minSizeY
286-
// item.maxSizeX
287-
// item.maxSizeY
288-
})
289-
```
290-
291-
## Watching item changes of size and position
292-
293-
The typical Angular way would be to do a $scope.$watch on your item or items in the scope. Example:
294-
295-
```JavaScript
296-
// two objects, converted to gridster items in the view via ng-repeat
297-
$scope.items = [{},{}];
298-
299-
$scope.$watch('items', function(items){
300-
// one of the items changed
301-
}, true);
302-
```
303-
304-
or
305-
306-
```JavaScript
307-
$scope.$watch('items[0]', function(){
308-
// item0 changed
309-
}, true);
310-
```
311-
312-
or
313-
314-
```JavaScript
315-
$scope.$watch('items[0].sizeX', function(){
316-
// item0 sizeX changed
317-
}, true);
318-
```
319-
320-
The third argument, true, is to make the watch based on the value of the object, rather than just matching the reference to the object.
321-
322-
323-
## Note
324-
This directive/plugin does not generate style tags, like the jQuery plugin. It also uses standard camelCase for variables and object properties, while the original plugin used lower\_case\_with_underscores. These options have not and may never be implemented:
325-
326-
* widget_class - not necessary since directives already whatever classes and attributes you want to add
327-
* widget_margins - replaced by 'margins'
328-
* widget\_base\_dimensions - replaced by 'defaultSizeX' and 'defaultSizeY'
329-
* min_cols - currently, only 'columns' is used to defined the maximum width
330-
* max_cols - currently, only 'columns' is used to defined the maximum width
331-
* min_rows - replaced by 'minRows'
332-
* max_rows - replaced by 'maxRows'
333-
* max\_size\_x
334-
* max\_size\_y
335-
* extra_cols
336-
* extra_rows
337-
* autogenerate_stylesheet
338-
* avoid\_overlapped\_widgets
339-
* resize.axes
340-
* resize.handle_class - replaced by 'resize.handle', which doesn't need to be a class
341-
* resize.handle\_append\_to
342-
* resize.max_size
343-
* collision.on\_overlap\_start
344-
* collision.on_overlap
345-
* collision.on\_overlap\_stop
346-
347-
## Contributing
348-
349-
#### Install project dependencies
350-
```bash
351-
npm install
352-
bower install
353-
```
354-
355-
#### Style Guide
356-
Please respect the formatting specified in .editorconfig
357-
358-
#### Grunt Tasks
359-
```grunt default``` Runs jshint & compiles project
360-
361-
```grunt dev``` Opens demo page, starts karma test runner, runs unit tests on src & test folder changes
362-
363-
```grunt e2e``` Watch src folder and run e2e tests on changes
364-
365-
```grunt test``` Runs the unit & e2e tests
7+
This repo adds patches to version `0.13.14` of angular gridster.

0 commit comments

Comments
 (0)