Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 215a6f1

Browse files
radiolipsradiolips
committed
Merge commit '8a554b37c5dea0036d695596ef68985120d9b83d'
2 parents 6122ca4 + 8a554b3 commit 215a6f1

24 files changed

+494
-113
lines changed

‎Gruntfile.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ module.exports = function(grunt) {
3737
copy: {
3838
dist: {
3939
files: {
40-
'dist/gridstack.js': ['src/gridstack.js']
40+
'dist/gridstack.js': ['src/gridstack.js'],
41+
'dist/gridstack.jQueryUI.js': ['src/gridstack.jQueryUI.js'],
4142
}
4243
}
4344
},
@@ -50,7 +51,9 @@ module.exports = function(grunt) {
5051
},
5152
dist: {
5253
files: {
53-
'dist/gridstack.min.js': ['src/gridstack.js']
54+
'dist/gridstack.min.js': ['src/gridstack.js'],
55+
'dist/gridstack.jQueryUI.min.js': ['src/gridstack.jQueryUI.js'],
56+
'dist/gridstack.all.js': ['src/gridstack.js', 'src/gridstack.jQueryUI.js']
5457
}
5558
}
5659
},

‎README.md

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,10 @@ Join gridstack.js on Slack: https://gridstackjs.troolee.com
2323
- [Demo](#demo)
2424
- [Usage](#usage)
2525
- [Requirements](#requirements)
26+
- [Using gridstack.js with jQuery UI](#using-gridstackjs-with-jquery-ui)
2627
- [Install](#install)
2728
- [Basic usage](#basic-usage)
29+
- [Migrating to v0.3.0](#migrating-to-v030)
2830
- [Migrating to v0.2.5](#migrating-to-v025)
2931
- [API Documentation](#api-documentation)
3032
- [Questions and Answers](#questions-and-answers)
@@ -45,7 +47,7 @@ Join gridstack.js on Slack: https://gridstackjs.troolee.com
4547
- [Using AniJS](#using-anijs)
4648
- [The Team](#the-team)
4749
- [Changes](#changes)
48-
- [v0.2.7-dev (Development Version)](#v027-dev-development-version)
50+
- [v0.3.0-dev (Development Version)](#v030-dev-development-version)
4951
- [v0.2.6 (2016-08-17)](#v026-2016-08-17)
5052
- [v0.2.5 (2016-03-02)](#v025-2016-03-02)
5153
- [v0.2.4 (2016-02-15)](#v024-2016-02-15)
@@ -72,13 +74,22 @@ Usage
7274

7375
* [lodash.js](https://lodash.com) (>= 3.5.0, full build)
7476
* [jQuery](http://jquery.com) (>= 3.1.0)
75-
* [jQuery UI](http://jqueryui.com) (>= 1.12.0). Minimum required components: Core, Widget, Mouse, Draggable, Resizable
76-
* (Optional) [jquery-ui-touch-punch](https://github.com/furf/jquery-ui-touch-punch) for touch-based devices support
7777

7878
Note: You can still use [underscore.js](http://underscorejs.org) (>= 1.7.0) instead of lodash.js
7979

80+
#### Using gridstack.js with jQuery UI
81+
82+
* [jQuery UI](http://jqueryui.com) (>= 1.12.0). Minimum required components: Core, Widget, Mouse, Draggable, Resizable
83+
* (Optional) [jquery-ui-touch-punch](https://github.com/furf/jquery-ui-touch-punch) for touch-based devices support
84+
8085
## Install
8186

87+
```html
88+
<link rel="stylesheet" href="gridstack.css" />
89+
<script src="gridstack.js"></script>
90+
<script src="gridstack.jQueryUI.js"></script>
91+
```
92+
8293
* Using CDN:
8394

8495
```html
@@ -129,6 +140,25 @@ $(function () {
129140
</script>
130141
```
131142

143+
## Migrating to v0.3.0
144+
145+
As of v0.3.0, gridstack introduces a new plugin system. The drag'n'drop functionality has been modified to take advantage of this system. Because of this, and to avoid dependency on core code from jQuery UI, the plugin was functionality was moved to a separate file.
146+
147+
To ensure gridstack continues to work, either include the additional `gridstack.jQueryUI.js` file into your HTML or use `gridstack.all.js`:
148+
149+
```html
150+
<script src="gridstack.js"></script>
151+
<script src="gridstack.jQueryUI.js"></script>
152+
```
153+
154+
or
155+
156+
```html
157+
<script src="gridstack.all.js"></script>
158+
```
159+
160+
We're working on implementing support for other drag'n'drop libraries through the new plugin system.
161+
132162
## Migrating to v0.2.5
133163

134164
As of v0.2.5 all methods and parameters are in camel case to respect [JavaScript Style Guide and Coding Conventions](http://www.w3schools.com/js/js_conventions.asp).
@@ -477,12 +507,13 @@ for help.
477507
Changes
478508
=======
479509

480-
#### v0.2.7-dev (Development Version)
510+
#### v0.3.0-dev (Development Version)
481511

482512
- add oneColumnModeClass option to grid.
483513
- remove 768px CSS styles, moved to grid-stack-one-column-mode class.
484514
- add max-width override on grid-stck-one-column-mode ([#462](https://github.com/troolee/gridstack.js/issues/462)).
485515
- add internal function`isNodeChangedPosition`, minor optimization to move/drag.
516+
- drag'n'drop plugin system. Move jQuery UI dependencies to separate plugin file.
486517

487518
#### v0.2.6 (2016-08-17)
488519

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "gridstack",
3-
"version": "0.2.7-dev",
3+
"version": "0.3.0-dev",
44
"homepage": "https://github.com/troolee/gridstack.js",
55
"authors": [
66
"Pavel Reznikov <[email protected]>"

‎demo/anijs.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
2121
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
2222
<script src="../dist/gridstack.js"></script>
23+
<script src="../dist/gridstack.jQueryUI.js"></script>
2324

2425
<style type="text/css">
2526
.grid-stack {

‎demo/float.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
1919
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
2020
<script src="../dist/gridstack.js"></script>
21+
<script src="../dist/gridstack.jQueryUI.js"></script>
2122

2223
<style type="text/css">
2324
.grid-stack {

‎demo/knockout.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
2121
<script src="../dist/gridstack.js"></script>
22+
<script src="../dist/gridstack.jQueryUI.js"></script>
2223

2324
<style type="text/css">
2425
.grid-stack {

‎demo/knockout2.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
2121
<script src="../dist/gridstack.js"></script>
22+
<script src="../dist/gridstack.jQueryUI.js"></script>
2223

2324
<style type="text/css">
2425
.grid-stack {

‎demo/nested.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
1919
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
2020
<script src="../dist/gridstack.js"></script>
21+
<script src="../dist/gridstack.jQueryUI.js"></script>
2122

2223
<style type="text/css">
2324
.grid-stack {

‎demo/responsive.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
2121
<script src="../dist/gridstack.js"></script>
22+
<script src="../dist/gridstack.jQueryUI.js"></script>
2223

2324
<style type="text/css">
2425
.grid-stack {

‎demo/rtl.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
2121
<script src="../dist/gridstack.js"></script>
22+
<script src="../dist/gridstack.jQueryUI.js"></script>
2223

2324
<style type="text/css">
2425
.grid-stack {

‎demo/serialization.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
1919
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
2020
<script src="../dist/gridstack.js"></script>
21+
<script src="../dist/gridstack.jQueryUI.js"></script>
2122

2223
<style type="text/css">
2324
.grid-stack {

‎demo/two.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
2020
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
2121
<script src="../dist/gridstack.js"></script>
22+
<script src="../dist/gridstack.jQueryUI.js"></script>
2223

2324
<style type="text/css">
2425
#grid1 {

‎dist/gridstack.all.js

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

‎dist/gridstack.jQueryUI.js

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/**
2+
* gridstack.js 0.3.0-dev
3+
* http://troolee.github.io/gridstack.js/
4+
* (c) 2014-2016 Pavel Reznikov, Dylan Weiss
5+
* gridstack.js may be freely distributed under the MIT license.
6+
* @preserve
7+
*/
8+
(function(factory) {
9+
if (typeof define === 'function' && define.amd) {
10+
define(['jquery', 'lodash', 'gridstack', 'jquery-ui/data', 'jquery-ui/disable-selection', 'jquery-ui/focusable',
11+
'jquery-ui/form', 'jquery-ui/ie', 'jquery-ui/keycode', 'jquery-ui/labels', 'jquery-ui/jquery-1-7',
12+
'jquery-ui/plugin', 'jquery-ui/safe-active-element', 'jquery-ui/safe-blur', 'jquery-ui/scroll-parent',
13+
'jquery-ui/tabbable', 'jquery-ui/unique-id', 'jquery-ui/version', 'jquery-ui/widget',
14+
'jquery-ui/widgets/mouse', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable',
15+
'jquery-ui/widgets/resizable'], factory);
16+
} else if (typeof exports !== 'undefined') {
17+
try { jQuery = require('jquery'); } catch (e) {}
18+
try { _ = require('lodash'); } catch (e) {}
19+
try { GridStackUI = require('gridstack'); } catch (e) {}
20+
factory(jQuery, _, GridStackUI);
21+
} else {
22+
factory(jQuery, _, GridStackUI);
23+
}
24+
})(function($, _, GridStackUI) {
25+
26+
var scope = window;
27+
28+
/**
29+
* @class JQueryUIGridStackDragDropPlugin
30+
* jQuery UI implementation of drag'n'drop gridstack plugin.
31+
*/
32+
function JQueryUIGridStackDragDropPlugin(grid) {
33+
GridStackUI.GridStackDragDropPlugin.call(this, grid);
34+
}
35+
36+
GridStackUI.GridStackDragDropPlugin.registerPlugin(JQueryUIGridStackDragDropPlugin);
37+
38+
JQueryUIGridStackDragDropPlugin.prototype = Object.create(GridStackUI.GridStackDragDropPlugin.prototype);
39+
JQueryUIGridStackDragDropPlugin.prototype.constructor = JQueryUIGridStackDragDropPlugin;
40+
41+
JQueryUIGridStackDragDropPlugin.prototype.resizable = function(el, opts) {
42+
el = $(el);
43+
if (opts === 'disable' || opts === 'enable') {
44+
el.resizable(opts);
45+
} else if (opts === 'option') {
46+
var key = arguments[2];
47+
var value = arguments[3];
48+
el.resizable(opts, key, value);
49+
} else {
50+
el.resizable(_.extend({}, this.grid.opts.resizable, {
51+
start: opts.start || function() {},
52+
stop: opts.stop || function() {},
53+
resize: opts.resize || function() {}
54+
}));
55+
}
56+
return this;
57+
};
58+
59+
JQueryUIGridStackDragDropPlugin.prototype.draggable = function(el, opts) {
60+
el = $(el);
61+
if (opts === 'disable' || opts === 'enable') {
62+
el.draggable(opts);
63+
} else {
64+
el.draggable(_.extend({}, this.grid.opts.draggable, {
65+
containment: this.grid.opts.isNested ? this.grid.container.parent() : null,
66+
start: opts.start || function() {},
67+
stop: opts.stop || function() {},
68+
drag: opts.drag || function() {}
69+
}));
70+
}
71+
return this;
72+
};
73+
74+
JQueryUIGridStackDragDropPlugin.prototype.droppable = function(el, opts) {
75+
el = $(el);
76+
if (opts === 'disable' || opts === 'enable') {
77+
el.droppable(opts);
78+
} else {
79+
el.droppable({
80+
accept: opts.accept
81+
});
82+
}
83+
return this;
84+
};
85+
86+
JQueryUIGridStackDragDropPlugin.prototype.isDroppable = function(el, opts) {
87+
el = $(el);
88+
return Boolean(el.data('droppable'));
89+
};
90+
91+
JQueryUIGridStackDragDropPlugin.prototype.on = function(el, eventName, callback) {
92+
$(el).on(eventName, callback);
93+
return this;
94+
};
95+
96+
return JQueryUIGridStackDragDropPlugin;
97+
});

‎dist/gridstack.jQueryUI.min.js

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

0 commit comments

Comments
 (0)