Skip to content

Commit 0c58315

Browse files
adumesnyadumesny
authored
Merge pull request #1395 from adumesny/develop
fix to animate
2 parents 5c421b7 + 3c63efb commit 0c58315

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
@@ -38,7 +38,8 @@ export interface CellPosition {
3838
}
3939

4040
interface GridCSSStyleSheet extends CSSStyleSheet {
41-
_max?: number; // internal tracker of the max # of rows we created
41+
_id?: string; // random id we will use to style us
42+
_max?: number; // internal tracker of the max # of rows we created\
4243
}
4344

4445
/**
@@ -132,8 +133,6 @@ export class GridStack {
132133
/** @internal */
133134
private _prevColumn: number;
134135
/** @internal */
135-
private _stylesId: string;
136-
/** @internal */
137136
private _gsEventHandler = {};
138137
/** @internal */
139138
private _styles: GridCSSStyleSheet;
@@ -186,7 +185,7 @@ export class GridStack {
186185
float: false,
187186
staticGrid: false,
188187
_class: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0),
189-
animate: Utils.toBool(el.getAttribute('data-gs-animate')) || false,
188+
animate: true,
190189
alwaysShowResizeHandle: false,
191190
resizable: {
192191
autoHide: !(opts.alwaysShowResizeHandle || false),
@@ -217,6 +216,9 @@ export class GridStack {
217216
disableOneColumnMode: false,
218217
oneColumnModeDomSort: false
219218
};
219+
if (el.getAttribute('data-gs-animate')) {
220+
defaults.animate = Utils.toBool(el.getAttribute('data-gs-animate'))
221+
}
220222

221223
this.opts = Utils.defaults(opts, defaults);
222224
this.initMargin();
@@ -254,8 +256,7 @@ export class GridStack {
254256
this.el.classList.add(this.opts._class);
255257

256258
this._setStaticClass();
257-
258-
this._initStyles();
259+
this._updateStyles();
259260

260261
this.engine = new GridStackEngine(this.opts.column, (cbNodes, removeDOM = true) => {
261262
let maxHeight = 0;
@@ -268,7 +269,7 @@ export class GridStack {
268269
this._writeAttrs(el, n.x, n.y, n.width, n.height);
269270
}
270271
});
271-
this._updateStyles(maxHeight + 10);
272+
this._updateStyles(false, maxHeight); // false = don't recreate, just append if need be
272273
},
273274
this.opts.float,
274275
this.opts.maxRow);
@@ -446,7 +447,7 @@ export class GridStack {
446447
this.opts.cellHeight = data.height;
447448

448449
if (update) {
449-
this._updateStyles();
450+
this._updateStyles(true); // true = force re-create
450451
}
451452
this._resizeNestedGrids(this.el);
452453
return this;
@@ -546,7 +547,7 @@ export class GridStack {
546547
} else {
547548
this.el.parentNode.removeChild(this.el);
548549
}
549-
Utils.removeStylesheet(this._stylesId);
550+
this._removeStylesheet();
550551
delete this.engine;
551552
return this;
552553
}
@@ -997,7 +998,7 @@ export class GridStack {
997998
this.opts.marginLeft =
998999
this.opts.marginRight =
9991000
this.opts.margin = data.height;
1000-
this._updateStyles();
1001+
this._updateStyles(true); // true = force re-create
10011002

10021003
return this;
10031004
}
@@ -1070,43 +1071,43 @@ export class GridStack {
10701071
return this;
10711072
}
10721073

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

1088-
/** @internal updated the CSS styles for row based layout and initial margin setting */
1089-
private _updateStyles(maxHeight?: number): GridStack {
1090-
if (!this._styles) {
1091-
return this;
1092-
}
1093-
if (maxHeight === undefined) {
1094-
maxHeight = this._styles._max;
1084+
/** @internal updated/create the CSS styles for row based layout and initial margin setting */
1085+
private _updateStyles(forceUpdate = false, maxHeight?: number): GridStack {
1086+
// call to delete existing one if we change cellHeight / margin
1087+
if (forceUpdate) {
1088+
this._removeStylesheet();
10951089
}
1096-
this._initStyles();
1090+
10971091
this._updateContainerHeight();
1098-
if (!this.opts.cellHeight) { // The rest will be handled by CSS
1099-
return this;
1100-
}
1101-
if (this._styles._max !== 0 && maxHeight <= this._styles._max) { // Keep it increasing
1092+
if (!this.opts.cellHeight) { // The rest will be handled by CSS TODO: I don't understand this usage
11021093
return this;
11031094
}
1095+
11041096
let cellHeight = this.opts.cellHeight as number;
11051097
let cellHeightUnit = this.opts.cellHeightUnit;
11061098
let prefix = `.${this.opts._class} > .${this.opts.itemClass}`;
11071099

1108-
// these are done once only
1109-
if (this._styles._max === 0) {
1100+
// create one as needed
1101+
if (!this._styles) {
1102+
let id = 'gridstack-style-' + (Math.random() * 100000).toFixed();
1103+
// insert style to parent (instead of 'head' by default) to support WebComponent
1104+
let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;
1105+
this._styles = Utils.createStylesheet(id, styleLocation);
1106+
if (!this._styles) { return this; }
1107+
this._styles._id = id;
1108+
this._styles._max = 0;
1109+
1110+
// these are done once only
11101111
Utils.addCSSRule(this._styles, prefix, `min-height: ${cellHeight}${cellHeightUnit}`);
11111112
// content margins
11121113
let top: string = this.opts.marginTop + this.opts.marginUnit;
@@ -1126,6 +1127,8 @@ export class GridStack {
11261127
Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-sw`, `left: ${left}; bottom: ${bottom}`);
11271128
}
11281129

1130+
// now update the height specific fields
1131+
maxHeight = maxHeight || this._styles._max;
11291132
if (maxHeight > this._styles._max) {
11301133
let getHeight = (rows: number): string => (cellHeight * rows) + cellHeightUnit;
11311134
for (let i = this._styles._max + 1; i <= maxHeight; i++) { // start at 1
@@ -1142,7 +1145,7 @@ export class GridStack {
11421145

11431146
/** @internal */
11441147
private _updateContainerHeight(): GridStack {
1145-
if (this.engine.batchMode) { return this; }
1148+
if (!this.engine || this.engine.batchMode) { return this; }
11461149
let row = this.getRow(); // checks for minRow already
11471150
// check for css min height
11481151
let cssMinHeight = parseInt(getComputedStyle(this.el)['min-height']);

0 commit comments

Comments
 (0)