deblan/gridstack.js
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge pull request #2 from troolee/master

Browse source 
Update from troolee
This commit is contained in:
cvillemure 2015-10-08 15:06:23 -04:00
commit c2b1dee5fa
7 changed files with 68 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

12
README.md
View file

@ -14,6 +14,7 @@ Inspired by [gridster.js](http://gridster.net). Built with love.
- [Demo](#demo)
- [Usage](#usage)
- [Requirements](#requirements)
- [Rails integration](#rails-integration)
- [Basic usage](#basic-usage)
- [Options](#options)
- [Grid attributes](#grid-attributes)
@ -45,11 +46,11 @@ Inspired by [gridster.js](http://gridster.net). Built with love.
- [remove_all()](#remove_all)
- [resize(el, width, height)](#resizeel-width-height)
- [resizable(el, val)](#resizableel-val)
- [set_static(val)](#set_staticstatic_value)
- [set_static(static_value)](#set_staticstatic_value)
- [update(el, x, y, width, height)](#updateel-x-y-width-height)
- [will_it_fit(x, y, width, height, auto_position)](#will_it_fitx-y-width-height-auto_position)
- [Utils](#utils)
- [GridStackUI.Utils.sort(nodes, dir, width)](#gridstackuiutilssortnodes-dir-width)
- [GridStackUI.Utils.sort(nodes[, dir[, width]])](#gridstackuiutilssortnodes-dir-width)
- [Touch devices support](#touch-devices-support)
- [Use with knockout.js](#use-with-knockoutjs)
- [Change grid width](#change-grid-width)
@ -91,6 +92,10 @@ Usage
Note: You can still use [underscore.js](http://underscorejs.org) (>= 1.7.0) instead of lodash.js
## Rails integration
For rails users, integration of gridstack.js and its dependencies can be done through [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails)
## Basic usage
```html
@ -127,6 +132,7 @@ $(function () {
- `cell_height` - one cell height (default: `60`)
- `draggable` - allows to override jQuery UI draggable options. (default: `{handle: '.grid-stack-item-content', scroll: true, appendTo: 'body'}`)
- `handle` - draggable handle selector (default: `'.grid-stack-item-content'`)
- `handle_class` - draggable handle class (e.g. `'grid-stack-item-content'`). If set `handle` is ignored (default: `null`)
- `height` - maximum rows amount. Default is `0` which means no maximum rows
- `float` - enable floating widgets (default: `false`) See [example](http://troolee.github.io/gridstack.js/demo/float.html)
- `item_class` - widget class (default: `'grid-stack-item'`)
@ -392,7 +398,7 @@ else {
## Utils
### GridStackUI.Utils.sort(nodes, dir, width)
### GridStackUI.Utils.sort(nodes[, dir[, width]])
Sorts array of nodes

2
bower.json
View file

@ -1,6 +1,6 @@
{
"name": "gridstack",
"version": "0.2.2",
"version": "0.2.3",
"homepage": "https://github.com/troolee/gridstack.js",
"authors": [
"Pavel Reznikov <pashka.reznikov@gmail.com>"

29
dist/gridstack.js vendored
View file

@ -383,6 +383,8 @@
var GridStack = function(el, opts) {
var self = this, one_column_mode;
opts = opts || {};
this.container = $(el);
opts.item_class = opts.item_class || 'grid-stack-item';
@ -394,6 +396,7 @@
item_class: 'grid-stack-item',
placeholder_class: 'grid-stack-placeholder',
handle: '.grid-stack-item-content',
handle_class: null,
cell_height: 60,
vertical_margin: 20,
auto: true,
@ -408,7 +411,7 @@
handles: 'se'
}),
draggable: _.defaults(opts.draggable || {}, {
handle: '.grid-stack-item-content',
handle: (opts.handle_class ? '.' + opts.handle_class : (opts.handle ? opts.handle : '')) || '.grid-stack-item-content',
scroll: false,
appendTo: 'body'
})
@ -416,6 +419,9 @@
this.opts.is_nested = is_nested;
this.container.addClass(this.opts._class);
this._set_static_class();
if (is_nested) {
this.container.addClass('grid-stack-nested');
}
@ -443,7 +449,7 @@
if (this.opts.auto) {
var elements = [];
var _this = this;
this.container.children('.' + this.opts.item_class).each(function(index, el) {
this.container.children('.' + this.opts.item_class + ':not(.' + this.opts.placeholder_class + ')').each(function(index, el) {
el = $(el);
elements.push({
el: el,
@ -511,7 +517,7 @@
$(window).resize(this.on_resize_handler);
this.on_resize_handler();
};
GridStack.prototype._trigger_change_event = function(forceTrigger) {
var elements = this.grid.get_dirty_nodes();
var hasChanges = false;
@ -755,7 +761,7 @@
this.container.remove();
Utils.remove_stylesheet(this._styles_id);
if (this.grid)
this.grid = null;
this.grid = null;
};
GridStack.prototype.resizable = function(el, val) {
@ -946,6 +952,21 @@
return this.grid.is_area_empty(x, y, width, height);
};
GridStack.prototype.set_static = function(static_value) {
this.opts.static_grid = (static_value === true);
this._set_static_class();
};
GridStack.prototype._set_static_class = function() {
var static_class_name = 'grid-stack-static';
if (this.opts.static_grid === true) {
this.container.addClass(static_class_name);
} else {
this.container.removeClass(static_class_name);
}
};
scope.GridStackUI = GridStack;
scope.GridStackUI.Utils = Utils;

2
dist/gridstack.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/gridstack.min.map vendored
View file

File diff suppressed because one or more lines are too long

23
package.json Normal file
View file

@ -0,0 +1,23 @@
{
"name": "gridstack",
"version": "0.2.3",
"description": "gridstack.js is a jQuery plugin for widget layout",
"main": "dist/gridstack.js",
"repository": {
"type": "git",
"url": "git+https://github.com/troolee/gridstack.js.git"
},
"keywords": [
"gridstack",
"grid",
"gridster",
"layout",
"jquery"
],
"author": "Pavel Reznikov <pashka.reznikov@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/troolee/gridstack.js/issues"
},
"homepage": "http://troolee.github.io/gridstack.js/"
}

13
src/gridstack.js
View file

@ -383,6 +383,8 @@
var GridStack = function(el, opts) {
var self = this, one_column_mode;
opts = opts || {};
this.container = $(el);
opts.item_class = opts.item_class || 'grid-stack-item';
@ -394,6 +396,7 @@
item_class: 'grid-stack-item',
placeholder_class: 'grid-stack-placeholder',
handle: '.grid-stack-item-content',
handle_class: null,
cell_height: 60,
vertical_margin: 20,
auto: true,
@ -408,7 +411,7 @@
handles: 'se'
}),
draggable: _.defaults(opts.draggable || {}, {
handle: '.grid-stack-item-content',
handle: (opts.handle_class ? '.' + opts.handle_class : (opts.handle ? opts.handle : '')) || '.grid-stack-item-content',
scroll: false,
appendTo: 'body'
})
@ -446,7 +449,7 @@
if (this.opts.auto) {
var elements = [];
var _this = this;
this.container.children('.' + this.opts.item_class).each(function(index, el) {
this.container.children('.' + this.opts.item_class + ':not(.' + this.opts.placeholder_class + ')').each(function(index, el) {
el = $(el);
elements.push({
el: el,
@ -514,7 +517,7 @@
$(window).resize(this.on_resize_handler);
this.on_resize_handler();
};
GridStack.prototype._trigger_change_event = function(forceTrigger) {
var elements = this.grid.get_dirty_nodes();
var hasChanges = false;
@ -758,7 +761,7 @@
this.container.remove();
Utils.remove_stylesheet(this._styles_id);
if (this.grid)
this.grid = null;
this.grid = null;
};
GridStack.prototype.resizable = function(el, val) {
@ -956,7 +959,7 @@
GridStack.prototype._set_static_class = function() {
var static_class_name = 'grid-stack-static';
if (this.opts.static_grid === true) {
this.container.addClass(static_class_name);
} else {