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

Skip to content

Commit 73d33fa

Browse files
trooleetroolee
committed
update with the last ver
1 parent e84a222 commit 73d33fa

File tree

6 files changed

+141
-28
lines changed

6 files changed

+141
-28
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
node_modules
2+
bower_components
3+
coverage

‎demo/anijs.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<!--[if lt IE 9]>
5+
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
6+
<![endif]-->
7+
8+
<meta charset="utf-8" />
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1" />
11+
<title>AniJS demo</title>
12+
13+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
14+
<link rel="stylesheet" href="../dist/gridstack.css"/>
15+
<link rel="stylesheet" href="//anijs.github.io/lib/anicollection/anicollection.css" />
16+
17+
18+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
19+
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
20+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
21+
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
22+
<script src="../dist/gridstack.js"></script>
23+
24+
<style type="text/css">
25+
.grid-stack {
26+
background: lightgoldenrodyellow;
27+
}
28+
29+
.grid-stack-item-content {
30+
color: #2c3e50;
31+
text-align: center;
32+
background-color: #18bc9c;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<div class="container-fluid">
38+
<h1>AniJS demo</h1>
39+
40+
<div>
41+
<a class="btn btn-default" id="add-widget" href="#">Add Widget</a>
42+
</div>
43+
44+
<div>
45+
<h4 data-anijs="if: added, do: swing animated, on: $gridstack">Widget added</h4>
46+
</div>
47+
48+
<br/>
49+
50+
<div class="grid-stack">
51+
</div>
52+
</div>
53+
54+
<script src="//cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs.js"></script>
55+
<script type="text/javascript">
56+
$(function () {
57+
$('.grid-stack').gridstack();
58+
var self = this;
59+
this.grid = $('.grid-stack').data('gridstack');
60+
AniJS.run();
61+
self.gridstackNotifier = AniJS.getNotifier('gridstack');
62+
$('.grid-stack').on('added', function(event, items) {
63+
self.gridstackNotifier.dispatchEvent('added');
64+
});
65+
$('#add-widget').click(function() {
66+
addNewWidget();
67+
});
68+
69+
function addNewWidget() {
70+
var grid = $('.grid-stack').data('gridstack');
71+
grid.addWidget($('<div class="grid-stack-item-content"></div>'), 0, 0, Math.floor(1 + 3 * Math.random()), Math.floor(1 + 3 * Math.random()), true);
72+
}
73+
});
74+
</script>
75+
</body>
76+
</html>

‎demo/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
<li><a href="rtl.html">RTL demo</a></li>
1414
<li><a href="serialization.html">Serialization demo</a></li>
1515
<li><a href="two.html">Two grids demo</a></li>
16+
<li><a href="responsive.html">Resize grid (responsive) demo</a></li>
17+
<li><a href="anijs.html">AniJS demo</a></li>
1618
</ul>
1719
</body>
1820
</html>

‎dist/gridstack.js

Lines changed: 55 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
createStylesheet: function(id) {
5151
var style = document.createElement('style');
5252
style.setAttribute('type', 'text/css');
53-
style.setAttribute('data-gs-id', id);
53+
style.setAttribute('data-gs-style-id', id);
5454
if (style.styleSheet) {
5555
style.styleSheet.cssText = '';
5656
} else {
@@ -61,7 +61,7 @@
6161
},
6262

6363
removeStylesheet: function(id) {
64-
$('STYLE[data-gs-id=' + id + ']').remove();
64+
$('STYLE[data-gs-style-id=' + id + ']').remove();
6565
},
6666

6767
insertCSSRule: function(sheet, selector, rules, index) {
@@ -87,11 +87,6 @@
8787
return n != this.node && Utils.isIntercepted(n, this.nn);
8888
},
8989

90-
_didCollideFloat: function(bn) {
91-
return this.n != bn &&
92-
Utils.isIntercepted({x: this.n.x, y: this.newY, width: this.n.width, height: this.n.height}, bn);
93-
},
94-
9590
_didCollide: function(bn) {
9691
return Utils.isIntercepted({x: this.n.x, y: this.newY, width: this.n.width, height: this.n.height}, bn);
9792
},
@@ -108,7 +103,7 @@
108103
if (!match) {
109104
throw new Error('Invalid height');
110105
}
111-
heightUnit = match[2];
106+
heightUnit = match[2] || 'px';
112107
height = parseFloat(match[1]);
113108
}
114109
return {height: height, unit: heightUnit};
@@ -137,6 +132,9 @@
137132

138133
this._updateCounter = 0;
139134
this._float = this.float;
135+
136+
this._addedNodes = [];
137+
this._removedNodes = [];
140138
};
141139

142140
GridStackEngine.prototype.batchUpdate = function() {
@@ -182,7 +180,7 @@
182180
var collisionNode = _.find(this.nodes, _.bind(function(n) {
183181
return Utils.isIntercepted(n, nn);
184182
}, this));
185-
return collisionNode === null;
183+
return collisionNode === null || typeof collisionNode === 'undefined';
186184
};
187185

188186
GridStackEngine.prototype._sortNodes = function(dir) {
@@ -282,7 +280,7 @@
282280
if (this._updateCounter) {
283281
return;
284282
}
285-
var deletedNodes = Array.prototype.slice.call(arguments, 1).concat(this.getDirtyNodes());
283+
var deletedNodes = Array.prototype.slice.call(arguments, 0);
286284
deletedNodes = deletedNodes.concat(this.getDirtyNodes());
287285
this.onchange(deletedNodes);
288286
};
@@ -298,7 +296,7 @@
298296
return _.filter(this.nodes, function(n) { return n._dirty; });
299297
};
300298

301-
GridStackEngine.prototype.addNode = function(node) {
299+
GridStackEngine.prototype.addNode = function(node, triggerAddEvent) {
302300
node = this._prepareNode(node);
303301

304302
if (typeof node.maxWidth != 'undefined') { node.width = Math.min(node.width, node.maxWidth); }
@@ -327,6 +325,9 @@
327325
}
328326

329327
this.nodes.push(node);
328+
if (typeof triggerAddEvent != 'undefined' && triggerAddEvent) {
329+
this._addedNodes.push(_.clone(node));
330+
}
330331

331332
this._fixCollisions(node);
332333
this._packNodes();
@@ -335,6 +336,7 @@
335336
};
336337

337338
GridStackEngine.prototype.removeNode = function(node) {
339+
this._removedNodes.push(_.clone(node));
338340
node._id = null;
339341
this.nodes = _.without(this.nodes, node);
340342
this._packNodes();
@@ -679,9 +681,23 @@
679681
}
680682
};
681683

684+
GridStack.prototype._triggerAddEvent = function() {
685+
if (this.grid._addedNodes && this.grid._addedNodes.length > 0) {
686+
this.container.trigger('added', [_.map(this.grid._addedNodes, _.clone)]);
687+
this.grid._addedNodes = [];
688+
}
689+
};
690+
691+
GridStack.prototype._triggerRemoveEvent = function() {
692+
if (this.grid._removedNodes && this.grid._removedNodes.length > 0) {
693+
this.container.trigger('removed', [_.map(this.grid._removedNodes, _.clone)]);
694+
this.grid._removedNodes = [];
695+
}
696+
};
697+
682698
GridStack.prototype._initStyles = function() {
683699
if (this._stylesId) {
684-
$('[data-gs-id="' + this._stylesId + '"]').remove();
700+
Utils.removeStylesheet(this._stylesId);
685701
}
686702
this._stylesId = 'gridstack-style-' + (Math.random() * 100000).toFixed();
687703
this._styles = Utils.createStylesheet(this._stylesId);
@@ -783,7 +799,8 @@
783799
this.opts.minWidth;
784800
};
785801

786-
GridStack.prototype._prepareElement = function(el) {
802+
GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
803+
triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false;
787804
var self = this;
788805
el = $(el);
789806

@@ -801,8 +818,9 @@
801818
noResize: Utils.toBool(el.attr('data-gs-no-resize')),
802819
noMove: Utils.toBool(el.attr('data-gs-no-move')),
803820
locked: Utils.toBool(el.attr('data-gs-locked')),
804-
el: el
805-
});
821+
el: el,
822+
id: el.attr('data-gs-id')
823+
}, triggerAddEvent);
806824
el.data('_gridstack_node', node);
807825

808826
var cellWidth;
@@ -985,15 +1003,22 @@
9851003
}
9861004
};
9871005

988-
GridStack.prototype.addWidget = function(el, x, y, width, height, autoPosition) {
1006+
GridStack.prototype.addWidget = function(el, x, y, width, height, autoPosition, minWidth, maxWidth,
1007+
minHeight, maxHeight, id) {
9891008
el = $(el);
9901009
if (typeof x != 'undefined') { el.attr('data-gs-x', x); }
9911010
if (typeof y != 'undefined') { el.attr('data-gs-y', y); }
9921011
if (typeof width != 'undefined') { el.attr('data-gs-width', width); }
9931012
if (typeof height != 'undefined') { el.attr('data-gs-height', height); }
9941013
if (typeof autoPosition != 'undefined') { el.attr('data-gs-auto-position', autoPosition ? 'yes' : null); }
1014+
if (typeof minWidth != 'undefined') { el.attr('data-gs-min-width', minWidth); }
1015+
if (typeof maxWidth != 'undefined') { el.attr('data-gs-max-width', maxWidth); }
1016+
if (typeof minHeight != 'undefined') { el.attr('data-gs-min-height', minHeight); }
1017+
if (typeof maxHeight != 'undefined') { el.attr('data-gs-max-height', maxHeight); }
1018+
if (typeof id != 'undefined') { el.attr('data-gs-id', id); }
9951019
this.container.append(el);
996-
this._prepareElement(el);
1020+
this._prepareElement(el, true);
1021+
this._triggerAddEvent();
9971022
this._updateContainerHeight();
9981023
this._triggerChangeEvent(true);
9991024

@@ -1002,7 +1027,8 @@
10021027

10031028
GridStack.prototype.makeWidget = function(el) {
10041029
el = $(el);
1005-
this._prepareElement(el);
1030+
this._prepareElement(el, true);
1031+
this._triggerAddEvent();
10061032
this._updateContainerHeight();
10071033
this._triggerChangeEvent(true);
10081034

@@ -1031,6 +1057,7 @@
10311057
el.remove();
10321058
}
10331059
this._triggerChangeEvent(true);
1060+
this._triggerRemoveEvent();
10341061
};
10351062

10361063
GridStack.prototype.removeAll = function(detachNode) {
@@ -1041,10 +1068,14 @@
10411068
this._updateContainerHeight();
10421069
};
10431070

1044-
GridStack.prototype.destroy = function() {
1071+
GridStack.prototype.destroy = function(detachGrid) {
10451072
$(window).off('resize', this.onResizeHandler);
10461073
this.disable();
1047-
this.container.remove();
1074+
if (typeof detachGrid != 'undefined' && !detachGrid) {
1075+
this.removeAll(true);
1076+
} else {
1077+
this.container.remove();
1078+
}
10481079
Utils.removeStylesheet(this._stylesId);
10491080
if (this.grid) {
10501081
this.grid = null;
@@ -1296,8 +1327,9 @@
12961327
return Math.ceil(o.outerWidth() / o.attr('data-gs-width'));
12971328
};
12981329

1299-
GridStack.prototype.getCellFromPixel = function(position) {
1300-
var containerPos = this.container.position();
1330+
GridStack.prototype.getCellFromPixel = function(position, useOffset) {
1331+
var containerPos = (typeof useOffset != 'undefined' && useOffset) ?
1332+
this.container.offset() : this.container.position();
13011333
var relativeLeft = position.left - containerPos.left;
13021334
var relativeTop = position.top - containerPos.top;
13031335

@@ -1438,6 +1470,7 @@
14381470
scope.GridStackUI = GridStack;
14391471

14401472
scope.GridStackUI.Utils = Utils;
1473+
scope.GridStackUI.Engine = GridStackEngine;
14411474

14421475
$.fn.gridstack = function(opts) {
14431476
return this.each(function() {

0 commit comments

Comments
 (0)