Skip to content

Commit cc284c7

Browse files
trooleetroolee
committed
update docs
1 parent 1cce0bd commit cc284c7

File tree

4 files changed

+145
-59
lines changed

4 files changed

+145
-59
lines changed

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ Join gridstack.js on Slack: https://gridstackjs.troolee.com
7171
- [IE8 support](#ie8-support)
7272
- [Nested grids](#nested-grids)
7373
- [Changes](#changes)
74+
- [v0.2.5-dev (Development version)](#v025-dev-development-version)
7475
- [v0.2.4 (2016-02-15)](#v024-2016-02-15)
7576
- [v0.2.3 (2015-06-23)](#v023-2015-06-23)
7677
- [v0.2.2 (2014-12-23)](#v022-2014-12-23)
@@ -778,6 +779,10 @@ See example: [Nested grid demo](http://troolee.github.io/gridstack.js/demo/neste
778779
Changes
779780
=======
780781

782+
#### v0.2.5-dev (Development version)
783+
784+
- `cell_height` and `vertical_margin` can now be string (e.g. '3em', '20px')
785+
781786
#### v0.2.4 (2016-02-15)
782787

783788
- fix closure compiler/linter warnings

‎dist/gridstack.js‎

Lines changed: 138 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -426,6 +426,9 @@
426426
});
427427
this.opts.is_nested = is_nested;
428428

429+
this.cell_height(this.opts.cell_height, true);
430+
this.vertical_margin(this.opts.vertical_margin, true);
431+
429432
this.container.addClass(this.opts._class);
430433

431434
this._set_static_class();
@@ -475,9 +478,7 @@
475478
'<div class="' + this.opts.placeholder_class + ' ' + this.opts.item_class + '">' +
476479
'<div class="placeholder-content">' + this.opts.placeholder_text + '</div></div>').hide();
477480

478-
this.container.height(
479-
this.grid.get_grid_height() * (this.opts.cell_height + this.opts.vertical_margin) -
480-
this.opts.vertical_margin);
481+
this._update_container_height();
481482

482483
this.on_resize_handler = function() {
483484
if (self._is_one_column_mode()) {
@@ -542,6 +543,9 @@
542543
};
543544

544545
GridStack.prototype._init_styles = function() {
546+
if (!this.opts.cell_height) { //that will be handled by CSS
547+
return ;
548+
}
545549
if (this._styles_id) {
546550
$('[data-gs-id="' + this._styles_id + '"]').remove();
547551
}
@@ -556,38 +560,61 @@
556560
return;
557561
}
558562

559-
var prefix = '.' + this.opts._class + ' .' + this.opts.item_class;
563+
var prefix = '.' + this.opts._class + ' .' + this.opts.item_class,
564+
self = this,
565+
get_height
566+
;
560567

561568
if (typeof max_height == 'undefined') {
562569
max_height = this._styles._max;
563570
this._init_styles();
564571
this._update_container_height();
565572
}
566573

574+
if (!this.opts.cell_height) { //the rest will be handled by CSS
575+
return ;
576+
}
577+
if (this._styles._max !== 0 && max_height <= this._styles._max) {
578+
return ;
579+
}
580+
581+
if (!this.opts.vertical_margin || this.opts.cell_height_unit === this.opts.vertical_margin_unit) {
582+
get_height = function (nbRows, nbMargins) {
583+
return (self.opts.cell_height * nbRows + self.opts.vertical_margin * nbMargins) + self.opts.cell_height_unit;
584+
}
585+
} else {
586+
get_height = function (nbRows, nbMargins) {
587+
if (!nbRows || !nbMargins) {
588+
return (self.opts.cell_height * nbRows + self.opts.vertical_margin * nbMargins) + self.opts.cell_height_unit;
589+
}
590+
return 'calc(' + ((self.opts.cell_height * nbRows) + self.opts.cell_height_unit) + ' + ' + ((self.opts.vertical_margin * nbMargins) + self.opts.vertical_margin_unit) + ')';
591+
}
592+
}
593+
567594
if (this._styles._max == 0) {
568-
Utils.insert_css_rule(this._styles, prefix, 'min-height: ' + (this.opts.cell_height) + 'px;', 0);
595+
Utils.insert_css_rule(this._styles, prefix, 'min-height: ' + get_height(1, 0) + ';', 0);
569596
}
570597

571598
if (max_height > this._styles._max) {
572599
for (var i = this._styles._max; i < max_height; ++i) {
573600
Utils.insert_css_rule(this._styles,
574601
prefix + '[data-gs-height="' + (i + 1) + '"]',
575-
'height: ' + (this.opts.cell_height * (i + 1) + this.opts.vertical_margin * i) + 'px;',
602+
'height: ' + get_height(i + 1, i) + ';',
576603
i
577604
);
578605
Utils.insert_css_rule(this._styles,
579606
prefix + '[data-gs-min-height="' + (i + 1) + '"]',
580-
'min-height: ' + (this.opts.cell_height * (i + 1) + this.opts.vertical_margin * i) + 'px;',
607+
'min-height: ' + get_height(i + 1, i) + ';',
581608
i
582609
);
583610
Utils.insert_css_rule(this._styles,
584611
prefix + '[data-gs-max-height="' + (i + 1) + '"]',
585-
'max-height: ' + (this.opts.cell_height * (i + 1) + this.opts.vertical_margin * i) + 'px;',
612+
'max-height: ' + get_height(i + 1, i) + ';',
586613
i
587614
);
588615
Utils.insert_css_rule(this._styles,
589616
prefix + '[data-gs-y="' + i + '"]',
590-
'top: ' + (this.opts.cell_height * i + this.opts.vertical_margin * i) + 'px;',
617+
'top: ' + get_height(i, i) + ';',
591618
i
592619
);
593620
}
@@ -599,9 +626,18 @@
599626
if (this.grid._update_counter) {
600627
return;
601628
}
602-
this.container.height(
603-
this.grid.get_grid_height() * (this.opts.cell_height + this.opts.vertical_margin) -
604-
this.opts.vertical_margin);
629+
var height = this.grid.get_grid_height();
630+
this.container.attr('data-gs-current-height', height);
631+
if (!this.opts.cell_height) {
632+
return ;
633+
}
634+
if (!this.opts.vertical_margin) {
635+
this.container.css('height', (height * (this.opts.cell_height)) + this.opts.cell_height_unit);
636+
} else if (this.opts.cell_height_unit === this.opts.vertical_margin_unit) {
637+
this.container.css('height', (height * (this.opts.cell_height + this.opts.vertical_margin) - this.opts.vertical_margin) + this.opts.cell_height_unit);
638+
} else {
639+
this.container.css('height', 'calc(' + ((height * (this.opts.cell_height)) + this.opts.cell_height_unit) + ' + ' + ((height * (this.opts.vertical_margin - 1)) + this.opts.vertical_margin_unit) + ')');
640+
}
605641
};
606642

607643
GridStack.prototype._is_one_column_mode = function() {
@@ -659,8 +695,9 @@
659695
var o = $(this);
660696
self.grid.clean_nodes();
661697
self.grid.begin_update(node);
662-
cell_width = o.outerWidth() / o.attr('data-gs-width');
663-
cell_height = self.opts.cell_height + self.opts.vertical_margin;
698+
cell_width = Math.ceil(o.outerWidth() / o.attr('data-gs-width'));
699+
var strict_cell_height = Math.ceil(o.outerHeight() / o.attr('data-gs-height'));
700+
cell_height = self.container.height() / parseInt(self.container.attr('data-gs-current-height'));
664701
self.placeholder
665702
.attr('data-gs-x', o.attr('data-gs-x'))
666703
.attr('data-gs-y', o.attr('data-gs-y'))
@@ -669,8 +706,8 @@
669706
.show();
670707
node.el = self.placeholder;
671708

672-
el.resizable('option', 'minWidth', Math.round(cell_width * (node.min_width || 1)));
673-
el.resizable('option', 'minHeight', self.opts.cell_height * (node.min_height || 1));
709+
el.resizable('option', 'minWidth', cell_width * (node.min_width || 1));
710+
el.resizable('option', 'minHeight', strict_cell_height * (node.min_height || 1));
674711

675712
if (event.type == 'resizestart') {
676713
o.find('.grid-stack-item').trigger('resizestart');
@@ -864,39 +901,39 @@
864901
return this;
865902
};
866903

867-
GridStack.prototype.min_height = function (el, val) {
868-
el = $(el);
869-
el.each(function (index, el) {
870-
el = $(el);
871-
var node = el.data('_gridstack_node');
872-
if (typeof node == 'undefined' || node == null) {
873-
return;
874-
}
875-
876-
if(!isNaN(val)){
877-
node.min_height = (val || false);
878-
el.attr('data-gs-min-height', val);
879-
}
880-
});
881-
return this;
882-
};
883-
884-
GridStack.prototype.min_width = function (el, val) {
885-
el = $(el);
886-
el.each(function (index, el) {
887-
el = $(el);
888-
var node = el.data('_gridstack_node');
889-
if (typeof node == 'undefined' || node == null) {
890-
return;
891-
}
892-
893-
if(!isNaN(val)){
894-
node.min_width = (val || false);
895-
el.attr('data-gs-min-width', val);
896-
}
897-
});
898-
return this;
899-
};
904+
GridStack.prototype.min_height = function (el, val) {
905+
el = $(el);
906+
el.each(function (index, el) {
907+
el = $(el);
908+
var node = el.data('_gridstack_node');
909+
if (typeof node == 'undefined' || node == null) {
910+
return;
911+
}
912+
913+
if(!isNaN(val)){
914+
node.min_height = (val || false);
915+
el.attr('data-gs-min-height', val);
916+
}
917+
});
918+
return this;
919+
};
920+
921+
GridStack.prototype.min_width = function (el, val) {
922+
el = $(el);
923+
el.each(function (index, el) {
924+
el = $(el);
925+
var node = el.data('_gridstack_node');
926+
if (typeof node == 'undefined' || node == null) {
927+
return;
928+
}
929+
930+
if(!isNaN(val)){
931+
node.min_width = (val || false);
932+
el.attr('data-gs-min-width', val);
933+
}
934+
});
935+
return this;
936+
};
900937

901938
GridStack.prototype._update_element = function(el, callback) {
902939
el = $(el).first();
@@ -947,15 +984,59 @@
947984
});
948985
};
949986

950-
GridStack.prototype.cell_height = function(val) {
987+
function parseHeight(val) {
988+
var height = val;
989+
var height_unit = 'px';
990+
if (height && _.isString(height)) {
991+
var match = height.match(/^([0-9]+)(px|em|rem)?$/);
992+
if (!match) {
993+
throw new Error('Invalid height');
994+
}
995+
height_unit = match[2];
996+
height = parseInt(match[1]);
997+
}
998+
return {height: height, unit: height_unit};
999+
}
1000+
1001+
GridStack.prototype.vertical_margin = function (val, noUpdate) {
9511002
if (typeof val == 'undefined') {
952-
return this.opts.cell_height;
1003+
return this.opts.vertical_margin;
1004+
}
1005+
1006+
var heightData = parseHeight(val);
1007+
1008+
if (this.opts.vertical_margin_unit === heightData.unit && this.opts.height === heightData.height) {
1009+
return ;
1010+
}
1011+
this.opts.vertical_margin_unit = heightData.unit;
1012+
this.opts.vertical_margin = heightData.height;
1013+
1014+
if (!noUpdate) {
1015+
this._update_styles();
1016+
}
1017+
};
1018+
1019+
GridStack.prototype.cell_height = function (val, noUpdate) {
1020+
if (typeof val == 'undefined') {
1021+
if (this.opts.cell_height) {
1022+
return this.opts.cell_height;
1023+
} else {
1024+
var o = this.container.children('.' + this.opts.item_class).first();
1025+
return Math.ceil(o.outerHeight() / o.attr('data-gs-height'));
1026+
}
1027+
}
1028+
1029+
var heightData = parseHeight(val);
1030+
1031+
if (this.opts.cell_height_unit === heightData.height_unit && this.opts.height === heightData.height) {
1032+
return ;
1033+
}
1034+
this.opts.cell_height_unit = heightData.unit;
1035+
this.opts.cell_height = heightData.height;
1036+
1037+
if (!noUpdate) {
1038+
this._update_styles();
9531039
}
954-
val = parseInt(val);
955-
if (val == this.opts.cell_height)
956-
return;
957-
this.opts.cell_height = val || this.opts.cell_height;
958-
this._update_styles();
9591040
};
9601041

9611042
GridStack.prototype.cell_width = function() {
@@ -969,7 +1050,7 @@
9691050
var relativeTop = position.top - containerPos.top;
9701051

9711052
var column_width = Math.floor(this.container.width() / this.opts.width);
972-
var row_height = this.opts.cell_height + this.opts.vertical_margin;
1053+
var row_height = Math.floor(this.container.height() / parseInt(this.container.attr('data-gs-current-height')));
9731054

9741055
return {x: Math.floor(relativeLeft / column_width), y: Math.floor(relativeTop / row_height)};
9751056
};

0 commit comments

Comments
 (0)