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

Skip to content

Commit f055797

Browse files
trooleetroolee
committed
auto-generate css rules for width and y
1 parent 39270ff commit f055797

File tree

2 files changed

+34
-44
lines changed

2 files changed

+34
-44
lines changed

‎src/gridstack.css

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -88,48 +88,6 @@
8888
.grid-stack-item[data-gs-x="2"] { left: 16.66666667% }
8989
.grid-stack-item[data-gs-x="1"] { left: 8.33333333% }
9090

91-
.grid-stack-item[data-gs-height="1"] { height: 60px; }
92-
.grid-stack-item[data-gs-height="2"] { height: 140px; }
93-
.grid-stack-item[data-gs-height="3"] { height: 220px; }
94-
.grid-stack-item[data-gs-height="4"] { height: 300px; }
95-
.grid-stack-item[data-gs-height="5"] { height: 380px; }
96-
.grid-stack-item[data-gs-height="6"] { height: 460px; }
97-
.grid-stack-item[data-gs-height="7"] { height: 540px; }
98-
.grid-stack-item[data-gs-height="8"] { height: 620px; }
99-
.grid-stack-item[data-gs-height="9"] { height: 700px; }
100-
.grid-stack-item[data-gs-height="10"] { height: 780px; }
101-
.grid-stack-item[data-gs-height="11"] { height: 860px; }
102-
.grid-stack-item[data-gs-height="12"] { height: 940px; }
103-
.grid-stack-item[data-gs-height="13"] { height: 1020px; }
104-
.grid-stack-item[data-gs-height="14"] { height: 1100px; }
105-
.grid-stack-item[data-gs-height="15"] { height: 1180px; }
106-
.grid-stack-item[data-gs-height="16"] { height: 1260px; }
107-
.grid-stack-item[data-gs-height="17"] { height: 1340px; }
108-
.grid-stack-item[data-gs-height="18"] { height: 1420px; }
109-
.grid-stack-item[data-gs-height="19"] { height: 1500px; }
110-
.grid-stack-item[data-gs-height="20"] { height: 1580px; }
111-
112-
.grid-stack-item[data-gs-y="0"] { top: 0 }
113-
.grid-stack-item[data-gs-y="1"] { top: 80px; }
114-
.grid-stack-item[data-gs-y="2"] { top: 160px; }
115-
.grid-stack-item[data-gs-y="3"] { top: 240px; }
116-
.grid-stack-item[data-gs-y="4"] { top: 320px; }
117-
.grid-stack-item[data-gs-y="5"] { top: 400px; }
118-
.grid-stack-item[data-gs-y="6"] { top: 480px; }
119-
.grid-stack-item[data-gs-y="7"] { top: 560px; }
120-
.grid-stack-item[data-gs-y="8"] { top: 640px; }
121-
.grid-stack-item[data-gs-y="9"] { top: 720px; }
122-
.grid-stack-item[data-gs-y="10"] { top: 800px; }
123-
.grid-stack-item[data-gs-y="11"] { top: 880px; }
124-
.grid-stack-item[data-gs-y="12"] { top: 960px; }
125-
.grid-stack-item[data-gs-y="13"] { top: 1040px; }
126-
.grid-stack-item[data-gs-y="14"] { top: 1120px; }
127-
.grid-stack-item[data-gs-y="15"] { top: 1200px; }
128-
.grid-stack-item[data-gs-y="16"] { top: 1280px; }
129-
.grid-stack-item[data-gs-y="17"] { top: 1360px; }
130-
.grid-stack-item[data-gs-y="18"] { top: 1440px; }
131-
.grid-stack-item[data-gs-y="19"] { top: 1520px; }
132-
13391
@media (max-width: 768px) {
13492
.grid-stack-item {
13593
position: relative !important;

‎src/gridstack.js

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,20 @@
99
width = width || _.chain(nodes).map(function (node) { return node.x + node.width; }).max().value();
1010
dir = dir != -1 ? 1 : -1;
1111
return _.sortBy(nodes, function (n) { return dir * (n.x + n.y * width); });
12+
},
13+
14+
create_stylesheet: function () {
15+
var style = document.createElement("style");
16+
17+
// style.setAttribute("media", "screen")
18+
// style.setAttribute("media", "only screen and (max-width : 1024px)")
19+
20+
// WebKit hack :(
21+
style.appendChild(document.createTextNode(""));
22+
23+
document.head.appendChild(style);
24+
25+
return style.sheet;
1226
}
1327
};
1428

@@ -249,10 +263,16 @@
249263
vertical_margin: 20,
250264
auto: true,
251265
min_width: 768,
252-
float: false
266+
float: false,
267+
_class: 'grid-stack-' + (Math.random() * 10000).toFixed(0)
253268
});
254269

270+
this.container.addClass(this.opts._class);
271+
this._styles = Utils.create_stylesheet();
272+
this._styles._max = 0;
273+
255274
this.grid = new GridStackEngine(this.opts.width, function (nodes) {
275+
var max_height = 0;
256276
_.each(nodes, function (n) {
257277
if (n._id == null) {
258278
n.el.remove();
@@ -263,8 +283,20 @@
263283
.attr('data-gs-y', n.y)
264284
.attr('data-gs-width', n.width)
265285
.attr('data-gs-height', n.height);
286+
max_height = Math.max(max_height, n.y + n.height);
266287
}
267288
});
289+
max_height += 10;
290+
if (max_height > self._styles._max) {
291+
for (var i = self._styles._max; i < max_height; ++i) {
292+
var css;
293+
css = '.' + self.opts._class + ' .' + self.opts.item_class + '[data-gs-height="' + (i + 1) + '"] { height: ' + (self.opts.cell_height * (i + 1) + self.opts.vertical_margin * i) + 'px; }';
294+
self._styles.insertRule(css);
295+
css = '.' + self.opts._class + ' .' + self.opts.item_class + '[data-gs-y="' + (i) + '"] { top: ' + (self.opts.cell_height * i + self.opts.vertical_margin * i) + 'px; }';
296+
self._styles.insertRule(css);
297+
}
298+
self._styles._max = max_height;
299+
}
268300
}, this.opts.float);
269301

270302
if (this.opts.auto) {
@@ -335,7 +367,7 @@
335367
height: el.attr('data-gs-height'),
336368
max_width: el.attr('data-gs-max-width'),
337369
min_width: el.attr('data-gs-min-width'),
338-
max_height: el.attr('data-gs-max-height'),
370+
max_height: el.attr('data-gs-max-height') || 100,
339371
min_height: el.attr('data-gs-min-height'),
340372
auto_position: el.attr('data-gs-auto-position'),
341373
no_resize: el.attr('data-gs-no-resize'),

0 commit comments

Comments
 (0)