Skip to content

Commit 731d5fa

Browse files
adumesnyadumesny
committed
v2: fix to animate
* fix for #937, thank you @marttop for proposing a fix * ended up re-writting the CSS creation routine and make it easier to maintain going forward. * we now only re-create stylesheet when margin or cellHeight (the only static items) change. Else we happen row based rules as the grids needs them (and only what it needs, not always +10)
1 parent 4cb974d commit 731d5fa

File tree

4 files changed

+41
-46
lines changed

4 files changed

+41
-46
lines changed

‎demo/float.html

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,6 @@
88

99
<link rel="stylesheet" href="demo.css"/>
1010
<script src="../dist/gridstack.all.js"></script>
11-
<!-- need umd vs commonjs ? but then GridStack not found...
12-
<script src="../dist/utils.js"></script>
13-
<script src="../dist/gridstack-engine.js"></script>
14-
<script src="../dist/gridstack.js"></script>
15-
<script src="../src/jq/jquery.js"></script>
16-
<script src="../src/jq/jquery-ui.js"></script>
17-
<script src="../dist/jq/gridstack-dd-jqueryui.js"></script>
18-
-->
1911

2012
</head>
2113
<body>

‎doc/CHANGES.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ Change log
4040

4141
## 2.0.1-dev
4242

43-
- TBD
43+
- fix `animate` to not re-create CSS style each time (should be faster too) and made it default now since so much nicer. pass `{animate: false}` grid options if you want instant again [937](https://github.com/gridstack/gridstack.js/issues/937)
4444

4545
## 2.0.1 (2020-09-26)
4646

‎doc/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ gridstack.js API
7474
* advance condition such as this mobile browser agent check:
7575
`alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent )`
7676
See [example](http://gridstack.github.io/gridstack.js/demo/advance.html)
77-
- `animate` - turns animation on (default: `false`)
77+
- `animate` - turns animation on to smooth transitions (default: `true`)
7878
- `auto` - if `false` gridstack will not initialize existing items (default: `true`)
7979
- `cellHeight` - one cell height (default: `auto`). Can be:
8080
* an integer (px)

‎src/gridstack.ts

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ export interface CellPosition {
4343
}
4444

4545
interface GridCSSStyleSheet extends CSSStyleSheet {
46-
_max?: number; // internal tracker of the max # of rows we created
46+
_id?: string; // random id we will use to style us
47+
_max?: number; // internal tracker of the max # of rows we created\
4748
}
4849

4950
/**
@@ -137,8 +138,6 @@ export class GridStack {
137138
/** @internal */
138139
private _prevColumn: number;
139140
/** @internal */
140-
private _stylesId: string;
141-
/** @internal */
142141
private _gsEventHandler = {};
143142
/** @internal */
144143
private _styles: GridCSSStyleSheet;
@@ -191,7 +190,7 @@ export class GridStack {
191190
float: false,
192191
staticGrid: false,
193192
_class: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0),
194-
animate: Utils.toBool(el.getAttribute('data-gs-animate')) || false,
193+
animate: true,
195194
alwaysShowResizeHandle: false,
196195
resizable: {
197196
autoHide: !(opts.alwaysShowResizeHandle || false),
@@ -222,6 +221,9 @@ export class GridStack {
222221
disableOneColumnMode: false,
223222
oneColumnModeDomSort: false
224223
};
224+
if (el.getAttribute('data-gs-animate')) {
225+
defaults.animate = Utils.toBool(el.getAttribute('data-gs-animate'))
226+
}
225227

226228
this.opts = Utils.defaults(opts, defaults);
227229
this.initMargin();
@@ -259,8 +261,7 @@ export class GridStack {
259261
this.el.classList.add(this.opts._class);
260262

261263
this._setStaticClass();
262-
263-
this._initStyles();
264+
this._updateStyles();
264265

265266
this.engine = new GridStackEngine(this.opts.column, (cbNodes, removeDOM = true) => {
266267
let maxHeight = 0;
@@ -273,7 +274,7 @@ export class GridStack {
273274
this._writeAttrs(el, n.x, n.y, n.width, n.height);
274275
}
275276
});
276-
this._updateStyles(maxHeight + 10);
277+
this._updateStyles(false, maxHeight); // false = don't recreate, just append if need be
277278
},
278279
this.opts.float,
279280
this.opts.maxRow);
@@ -451,7 +452,7 @@ export class GridStack {
451452
this.opts.cellHeight = data.height;
452453

453454
if (update) {
454-
this._updateStyles();
455+
this._updateStyles(true); // true = force re-create
455456
}
456457
this._resizeNestedGrids(this.el);
457458
return this;
@@ -551,7 +552,7 @@ export class GridStack {
551552
} else {
552553
this.el.parentNode.removeChild(this.el);
553554
}
554-
Utils.removeStylesheet(this._stylesId);
555+
this._removeStylesheet();
555556
delete this.engine;
556557
return this;
557558
}
@@ -1002,7 +1003,7 @@ export class GridStack {
10021003
this.opts.marginLeft =
10031004
this.opts.marginRight =
10041005
this.opts.margin = data.height;
1005-
this._updateStyles();
1006+
this._updateStyles(true); // true = force re-create
10061007

10071008
return this;
10081009
}
@@ -1075,43 +1076,43 @@ export class GridStack {
10751076
return this;
10761077
}
10771078

1078-
/** @internal */
1079-
private _initStyles(): GridStack {
1080-
if (this._stylesId) {
1081-
Utils.removeStylesheet(this._stylesId);
1082-
}
1083-
this._stylesId = 'gridstack-style-' + (Math.random() * 100000).toFixed();
1084-
// insert style to parent (instead of 'head' by default) to support WebComponent
1085-
let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
1086-
this._styles = Utils.createStylesheet(this._stylesId, styleLocation);
1087-
if (this._styles !== null) {
1088-
this._styles._max = 0;
1079+
/** @internal called to delete the current dynamic style sheet used for our layout */
1080+
private _removeStylesheet(): GridStack {
1081+
1082+
if (this._styles) {
1083+
Utils.removeStylesheet(this._styles._id);
1084+
delete this._styles;
10891085
}
10901086
return this;
10911087
}
10921088

1093-
/** @internal updated the CSS styles for row based layout and initial margin setting */
1094-
private _updateStyles(maxHeight?: number): GridStack {
1095-
if (!this._styles) {
1096-
return this;
1097-
}
1098-
if (maxHeight === undefined) {
1099-
maxHeight = this._styles._max;
1089+
/** @internal updated/create the CSS styles for row based layout and initial margin setting */
1090+
private _updateStyles(forceUpdate = false, maxHeight?: number): GridStack {
1091+
// call to delete existing one if we change cellHeight / margin
1092+
if (forceUpdate) {
1093+
this._removeStylesheet();
11001094
}
1101-
this._initStyles();
1095+
11021096
this._updateContainerHeight();
1103-
if (!this.opts.cellHeight) { // The rest will be handled by CSS
1104-
return this;
1105-
}
1106-
if (this._styles._max !== 0 && maxHeight <= this._styles._max) { // Keep it increasing
1097+
if (!this.opts.cellHeight) { // The rest will be handled by CSS TODO: I don't understand this usage
11071098
return this;
11081099
}
1100+
11091101
let cellHeight = this.opts.cellHeight as number;
11101102
let cellHeightUnit = this.opts.cellHeightUnit;
11111103
let prefix = `.${this.opts._class} > .${this.opts.itemClass}`;
11121104

1113-
// these are done once only
1114-
if (this._styles._max === 0) {
1105+
// create one as needed
1106+
if (!this._styles) {
1107+
let id = 'gridstack-style-' + (Math.random() * 100000).toFixed();
1108+
// insert style to parent (instead of 'head' by default) to support WebComponent
1109+
let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
1110+
this._styles = Utils.createStylesheet(id, styleLocation);
1111+
if (!this._styles) { return this; }
1112+
this._styles._id = id;
1113+
this._styles._max = 0;
1114+
1115+
// these are done once only
11151116
Utils.addCSSRule(this._styles, prefix, `min-height: ${cellHeight}${cellHeightUnit}`);
11161117
// content margins
11171118
let top: string = this.opts.marginTop + this.opts.marginUnit;
@@ -1131,6 +1132,8 @@ export class GridStack {
11311132
Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-sw`, `left: ${left}; bottom: ${bottom}`);
11321133
}
11331134

1135+
// now update the height specific fields
1136+
maxHeight = maxHeight || this._styles._max;
11341137
if (maxHeight > this._styles._max) {
11351138
let getHeight = (rows: number): string => (cellHeight * rows) + cellHeightUnit;
11361139
for (let i = this._styles._max + 1; i <= maxHeight; i++) { // start at 1
@@ -1147,7 +1150,7 @@ export class GridStack {
11471150

11481151
/** @internal */
11491152
private _updateContainerHeight(): GridStack {
1150-
if (this.engine.batchMode) { return this; }
1153+
if (!this.engine || this.engine.batchMode) { return this; }
11511154
let row = this.getRow(); // checks for minRow already
11521155
// check for css min height
11531156
let cssMinHeight = parseInt(getComputedStyle(this.el)['min-height']);

0 commit comments

Comments
 (0)