auto-generate css rules for width and y
This commit is contained in:
Pavel Reznikov
parent
39270ff092
commit
f0557970fc
2 changed files with 34 additions and 44 deletions
|
|
@ -88,48 +88,6 @@
|
|||
.grid-stack-item[data-gs-x="2"] { left: 16.66666667% }
|
||||
.grid-stack-item[data-gs-x="1"] { left: 8.33333333% }
|
||||
|
||||
.grid-stack-item[data-gs-height="1"] { height: 60px; }
|
||||
.grid-stack-item[data-gs-height="2"] { height: 140px; }
|
||||
.grid-stack-item[data-gs-height="3"] { height: 220px; }
|
||||
.grid-stack-item[data-gs-height="4"] { height: 300px; }
|
||||
.grid-stack-item[data-gs-height="5"] { height: 380px; }
|
||||
.grid-stack-item[data-gs-height="6"] { height: 460px; }
|
||||
.grid-stack-item[data-gs-height="7"] { height: 540px; }
|
||||
.grid-stack-item[data-gs-height="8"] { height: 620px; }
|
||||
.grid-stack-item[data-gs-height="9"] { height: 700px; }
|
||||
.grid-stack-item[data-gs-height="10"] { height: 780px; }
|
||||
.grid-stack-item[data-gs-height="11"] { height: 860px; }
|
||||
.grid-stack-item[data-gs-height="12"] { height: 940px; }
|
||||
.grid-stack-item[data-gs-height="13"] { height: 1020px; }
|
||||
.grid-stack-item[data-gs-height="14"] { height: 1100px; }
|
||||
.grid-stack-item[data-gs-height="15"] { height: 1180px; }
|
||||
.grid-stack-item[data-gs-height="16"] { height: 1260px; }
|
||||
.grid-stack-item[data-gs-height="17"] { height: 1340px; }
|
||||
.grid-stack-item[data-gs-height="18"] { height: 1420px; }
|
||||
.grid-stack-item[data-gs-height="19"] { height: 1500px; }
|
||||
.grid-stack-item[data-gs-height="20"] { height: 1580px; }
|
||||
|
||||
.grid-stack-item[data-gs-y="0"] { top: 0 }
|
||||
.grid-stack-item[data-gs-y="1"] { top: 80px; }
|
||||
.grid-stack-item[data-gs-y="2"] { top: 160px; }
|
||||
.grid-stack-item[data-gs-y="3"] { top: 240px; }
|
||||
.grid-stack-item[data-gs-y="4"] { top: 320px; }
|
||||
.grid-stack-item[data-gs-y="5"] { top: 400px; }
|
||||
.grid-stack-item[data-gs-y="6"] { top: 480px; }
|
||||
.grid-stack-item[data-gs-y="7"] { top: 560px; }
|
||||
.grid-stack-item[data-gs-y="8"] { top: 640px; }
|
||||
.grid-stack-item[data-gs-y="9"] { top: 720px; }
|
||||
.grid-stack-item[data-gs-y="10"] { top: 800px; }
|
||||
.grid-stack-item[data-gs-y="11"] { top: 880px; }
|
||||
.grid-stack-item[data-gs-y="12"] { top: 960px; }
|
||||
.grid-stack-item[data-gs-y="13"] { top: 1040px; }
|
||||
.grid-stack-item[data-gs-y="14"] { top: 1120px; }
|
||||
.grid-stack-item[data-gs-y="15"] { top: 1200px; }
|
||||
.grid-stack-item[data-gs-y="16"] { top: 1280px; }
|
||||
.grid-stack-item[data-gs-y="17"] { top: 1360px; }
|
||||
.grid-stack-item[data-gs-y="18"] { top: 1440px; }
|
||||
.grid-stack-item[data-gs-y="19"] { top: 1520px; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid-stack-item {
|
||||
position: relative !important;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,20 @@
|
|||
width = width || _.chain(nodes).map(function (node) { return node.x + node.width; }).max().value();
|
||||
dir = dir != -1 ? 1 : -1;
|
||||
return _.sortBy(nodes, function (n) { return dir * (n.x + n.y * width); });
|
||||
},
|
||||
|
||||
create_stylesheet: function () {
|
||||
var style = document.createElement("style");
|
||||
|
||||
// style.setAttribute("media", "screen")
|
||||
// style.setAttribute("media", "only screen and (max-width : 1024px)")
|
||||
|
||||
// WebKit hack :(
|
||||
style.appendChild(document.createTextNode(""));
|
||||
|
||||
document.head.appendChild(style);
|
||||
|
||||
return style.sheet;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -249,10 +263,16 @@
|
|||
vertical_margin: 20,
|
||||
auto: true,
|
||||
min_width: 768,
|
||||
float: false
|
||||
float: false,
|
||||
_class: 'grid-stack-' + (Math.random() * 10000).toFixed(0)
|
||||
});
|
||||
|
||||
this.container.addClass(this.opts._class);
|
||||
this._styles = Utils.create_stylesheet();
|
||||
this._styles._max = 0;
|
||||
|
||||
this.grid = new GridStackEngine(this.opts.width, function (nodes) {
|
||||
var max_height = 0;
|
||||
_.each(nodes, function (n) {
|
||||
if (n._id == null) {
|
||||
n.el.remove();
|
||||
|
|
@ -263,8 +283,20 @@
|
|||
.attr('data-gs-y', n.y)
|
||||
.attr('data-gs-width', n.width)
|
||||
.attr('data-gs-height', n.height);
|
||||
max_height = Math.max(max_height, n.y + n.height);
|
||||
}
|
||||
});
|
||||
max_height += 10;
|
||||
if (max_height > self._styles._max) {
|
||||
for (var i = self._styles._max; i < max_height; ++i) {
|
||||
var css;
|
||||
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; }';
|
||||
self._styles.insertRule(css);
|
||||
css = '.' + self.opts._class + ' .' + self.opts.item_class + '[data-gs-y="' + (i) + '"] { top: ' + (self.opts.cell_height * i + self.opts.vertical_margin * i) + 'px; }';
|
||||
self._styles.insertRule(css);
|
||||
}
|
||||
self._styles._max = max_height;
|
||||
}
|
||||
}, this.opts.float);
|
||||
|
||||
if (this.opts.auto) {
|
||||
|
|
@ -335,7 +367,7 @@
|
|||
height: el.attr('data-gs-height'),
|
||||
max_width: el.attr('data-gs-max-width'),
|
||||
min_width: el.attr('data-gs-min-width'),
|
||||
max_height: el.attr('data-gs-max-height'),
|
||||
max_height: el.attr('data-gs-max-height') || 100,
|
||||
min_height: el.attr('data-gs-min-height'),
|
||||
auto_position: el.attr('data-gs-auto-position'),
|
||||
no_resize: el.attr('data-gs-no-resize'),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue