Name: angular-gridster
Owner: looker
Description: An implementation of gridster-like widgets for Angular JS
Forked from: aminer-looker/angular-gridster
Created: 2016-11-01 20:29:36.0
Updated: 2016-11-01 20:29:37.0
Pushed: 2015-12-08 21:28:19.0
Homepage: http://manifestwebdesign.github.io/angular-gridster/
Size: 1054
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
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.
See Live Demo
wer install angular-gridster
Then, import the following in your HTML alongside jQuery and angular:
<link rel="stylesheet" href="bower_components/angular-gridster/dist/angular-gridster.min.css"/>
<script src="bower_components/javascript-detect-element-resize/jquery.resize.js"></script>
<script src="bower_components/angular-gridster/dist/angular-gridster.min.js"></script>
jquery.resize is a jQuery plugin needed to check for changes in the gridster size.
oad the gridster module
lar.module('myModule', ['gridster']);
Default usage:
gridster>
<ul>
<li gridster-item="item" ng-repeat="item in standardItems"></li>
</ul>
v>
Which expects a scope setup like the following:
MPORTANT: Items should be placed in the grid in the order in which they should appear.
n most cases the sorting should be by row ASC, col ASC
hese map directly to gridsterItem directive options
pe.standardItems = [
sizeX: 2, sizeY: 1, row: 0, col: 0 },
sizeX: 2, sizeY: 2, row: 0, col: 2 },
sizeX: 1, sizeY: 1, row: 0, col: 4 },
sizeX: 1, sizeY: 1, row: 0, col: 5 },
sizeX: 2, sizeY: 1, row: 1, col: 0 },
sizeX: 1, sizeY: 1, row: 1, col: 4 },
sizeX: 1, sizeY: 2, row: 1, col: 5 },
sizeX: 1, sizeY: 1, row: 2, col: 0 },
sizeX: 2, sizeY: 1, row: 2, col: 1 },
sizeX: 1, sizeY: 1, row: 2, col: 3 },
sizeX: 1, sizeY: 1, row: 2, col: 4 }
Alternatively, you can use the html attributes, similar to the original gridster plugin, but with two-way data binding:
gridster>
<ul>
<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>
</ul>
v>
or:
data-gridster>
<ul>
<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>
</ul>
v>
This allows the items to provide their own structure for row, col, and size:
pe.customItems = [
size: { x: 2, y: 1 }, position: [0, 0] },
size: { x: 2, y: 2 }, position: [0, 2] },
size: { x: 1, y: 1 }, position: [0, 4] },
size: { x: 1, y: 1 }, position: [0, 5] },
size: { x: 2, y: 1 }, position: [1, 0] },
size: { x: 1, y: 1 }, position: [1, 4] },
size: { x: 1, y: 2 }, position: [1, 5] },
size: { x: 1, y: 1 }, position: [2, 0] },
size: { x: 2, y: 1 }, position: [2, 1] },
size: { x: 1, y: 1 }, position: [2, 3] },
size: { x: 1, y: 1 }, position: [2, 4] }
Instead of using attributes for row, col, and size, you can also just use a mapping object for the gridster-item directive:
gridster="gridsterOpts">
<ul>
<li gridster-item="customItemMap" ng-repeat="item in customItems"></li>
</ul>
v>
This expects a scope similar to the previous example, but with customItemMap also defined in the scope:
aps the item from customItems in the scope to the gridsterItem options
pe.customItemMap = {
sizeX: 'item.size.x',
sizeY: 'item.size.y',
row: 'item.position[0]',
col: 'item.position[1]',
minSizeY: 'item.minSizeY',
maxSizeY: 'item.maxSizeY'
The gridsterItem directive can be configured like this:
gridster="gridsterOpts">
<ul>
<li gridster-item="item" ng-repeat="item in standardItems"></li>
</ul>
v>
Simply pass your desired options to the gridster directive
pe.gridsterOpts = {
columns: 6, // the width of the grid, in columns
pushing: true, // whether to push other items out of the way on move or resize
floating: true, // whether to automatically float items up so they stack (you can temporarily disable if you are adding unsorted items with ng-repeat)
swapping: false, // whether or not to have items of the same size switch places instead of pushing down if they are the same size
width: 'auto', // can be an integer or 'auto'. 'auto' scales gridster to be the full width of its containing element
colWidth: 'auto', // can be an integer or 'auto'. 'auto' uses the pixel width of the element divided by 'columns'
rowHeight: 'match', // can be an integer or 'match'. Match uses the colWidth, giving you square widgets.
margins: [10, 10], // the pixel distance between each widget
outerMargin: true, // whether margins apply to outer edges of the grid
isMobile: false, // stacks the grid items if true
mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
minColumns: 1, // the minimum columns the grid must have
minRows: 2, // the minimum height of the grid, in rows
maxRows: 100,
defaultSizeX: 2, // the default width of a gridster item, if not specifed
defaultSizeY: 1, // the default height of a gridster item, if not specified
minSizeX: 1, // minimum column width of an item
maxSizeX: null, // maximum column width of an item
minSizeY: 1, // minumum row height of an item
maxSizeY: null, // maximum row height of an item
resizable: {
enabled: true,
handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
start: function(event, $element, widget) {}, // optional callback fired when resize is started,
resize: function(event, $element, widget) {}, // optional callback fired when item is resized,
stop: function(event, $element, widget) {} // optional callback fired when item is finished resizing
},
draggable: {
enabled: true, // whether dragging items is supported
handle: '.my-class', // optional selector for resize handle
start: function(event, $element, widget) {}, // optional callback fired when drag is started,
drag: function(event, $element, widget) {}, // optional callback fired when item is moved,
stop: function(event, $element, widget) {} // optional callback fired when item is finished dragging
}
You can also override the default configuration site wide by modifying the `gridsterConfig` constant
lar.module('yourApp').run(['gridsterConfig', function(gridsterConfig) {
gridsterConfig.width = 1000;
The gridster and gridsterItem directive controller objects can be accessed within their scopes as 'gridster' and 'gridsterItem'.
These controllers are internal APIs that are subject to change.
gridster="gridsterOpts">
<ul>
<li gridster-item="item" ng-repeat="item in standardItems">
{{ gridsterItem.isMoving() }}
</li>
</ul>
v>
When the gridster goes in or out of mobile mode, a 'gridster-mobile-changed' event is broadcast on rootScope:
e.$on('gridster-mobile-changed', function(gridster) {
When the gridster draggable properties change, a 'gridster-draggable-changed' event is broadcast on rootScope:
e.$on('gridster-draggable-changed', function(gridster) {
When the gridster resizable properties change, a 'gridster-resizable-changed' event is broadcast on rootScope:
e.$on('gridster-resizable-changed', function(gridster) {
When the gridster element's size changes, a 'gridster-resized' event is broadcast on rootScope:
e.$on('gridster-resized', function(sizes, gridster) {
// sizes[0] = width
// sizes[1] = height
// gridster.
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:
e.$on('gridster-item-transition-end', function(item) {
// item.$element
// item.gridster
// item.row
// item.col
// item.sizeX
// item.sizeY
// item.minSizeX
// item.minSizeY
// item.maxSizeX
// item.maxSizeY
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:
e.$on('gridster-item-initialized', function(item) {
// item.$element
// item.gridster
// item.row
// item.col
// item.sizeX
// item.sizeY
// item.minSizeX
// item.minSizeY
// item.maxSizeX
// item.maxSizeY
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:
e.$on('gridster-item-resized', function(item) {
// item.$element
// item.gridster
// item.row
// item.col
// item.sizeX
// item.sizeY
// item.minSizeX
// item.minSizeY
// item.maxSizeX
// item.maxSizeY
The typical Angular way would be to do a $scope.$watch on your item or items in the scope. Example:
wo objects, converted to gridster items in the view via ng-repeat
pe.items = [{},{}];
pe.$watch('items', function(items){
/ one of the items changed
rue);
or
pe.$watch('items[0]', function(){
/ item0 changed
rue);
or
pe.$watch('items[0].sizeX', function(){
/ item0 sizeX changed
rue);
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.
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:
m install
wer install
Please respect the formatting specified in .editorconfig
runt e2e``` Watch src folder and run e2e tests on changes