@@ -364,14 +364,16 @@ export class GridStack {
364364 this . _isAutoCellHeight = ( opts . cellHeight === 'auto' ) ;
365365 if ( this . _isAutoCellHeight || opts . cellHeight === 'initial' ) {
366366 // make the cell content square initially (will use resize/column event to keep it square)
367- this . cellHeight ( undefined , false ) ;
367+ this . cellHeight ( undefined ) ;
368368 } else {
369369 // append unit if any are set
370370 if ( typeof opts . cellHeight == 'number' && opts . cellHeightUnit && opts . cellHeightUnit !== gridDefaults . cellHeightUnit ) {
371371 opts . cellHeight = opts . cellHeight + opts . cellHeightUnit ;
372372 delete opts . cellHeightUnit ;
373373 }
374- this . cellHeight ( opts . cellHeight , false ) ;
374+ const val = opts . cellHeight ;
375+ delete opts . cellHeight ; // force initial cellHeight() call to set the value
376+ this . cellHeight ( val ) ;
375377 }
376378
377379 // see if we need to adjust auto-hide
@@ -400,13 +402,10 @@ export class GridStack {
400402 this . _writePosAttr ( el , n ) ;
401403 }
402404 } ) ;
403- this . _updateStyles ( ) ;
405+ this . _updateContainerHeight ( ) ;
404406 }
405407 } ) ;
406408
407- // create initial global styles BEFORE loading children so resizeToContent margin can be calculated correctly
408- this . _updateStyles ( ) ;
409-
410409 if ( opts . auto ) {
411410 this . batchUpdate ( ) ; // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...
412411 this . engine . _loading = true ; // loading collision check
@@ -422,7 +421,6 @@ export class GridStack {
422421 if ( children . length ) this . load ( children ) ; // don't load empty
423422 }
424423
425- // if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB
426424 this . setAnimation ( ) ;
427425
428426 // dynamic grids require pausing during drag to detect over to nest vs push
@@ -851,17 +849,16 @@ export class GridStack {
851849 *
852850 * @param val the cell height. If not passed (undefined), cells content will be made square (match width minus margin),
853851 * if pass 0 the CSS will be generated by the application instead.
854- * @param update (Optional) if false, styles will not be updated
855852 *
856853 * @example
857854 * grid.cellHeight(100); // same as 100px
858855 * grid.cellHeight('70px');
859856 * grid.cellHeight(grid.cellWidth() * 1.2);
860857 */
861- public cellHeight ( val ?: numberOrString , update = true ) : GridStack {
858+ public cellHeight ( val ?: numberOrString ) : GridStack {
862859
863860 // if not called internally, check if we're changing mode
864- if ( update && val !== undefined ) {
861+ if ( val !== undefined ) {
865862 if ( this . _isAutoCellHeight !== ( val === 'auto' ) ) {
866863 this . _isAutoCellHeight = ( val === 'auto' ) ;
867864 this . _updateResizeEvent ( ) ;
@@ -883,11 +880,11 @@ export class GridStack {
883880 this . opts . cellHeightUnit = data . unit ;
884881 this . opts . cellHeight = data . h ;
885882
883+ // finally update var and container
884+ this . el . style . setProperty ( '--gs-cell-height' , `${ this . opts . cellHeight } ${ this . opts . cellHeightUnit } ) ;
885+ this . _updateContainerHeight ( ) ;
886886 this . resizeToContentCheck ( ) ;
887887
888- if ( update ) {
889- this . _updateStyles ( ) ;
890- }
891888 return this ;
892889 }
893890
@@ -1305,7 +1302,7 @@ export class GridStack {
13051302 const opts = this . opts ;
13061303 if ( o . acceptWidgets !== undefined ) this . _setupAcceptWidget ( ) ;
13071304 if ( o . animate !== undefined ) this . setAnimation ( ) ;
1308- if ( o . cellHeight ) { this . cellHeight ( o . cellHeight , true ) ; delete o . cellHeight ; }
1305+ if ( o . cellHeight ) { this . cellHeight ( o . cellHeight ) ; delete o . cellHeight ; }
13091306 if ( o . class && o . class !== opts . class ) { if ( opts . class ) this . el . classList . remove ( opts . class ) ; this . el . classList . add ( o . class ) ; }
13101307 if ( typeof ( o . column ) === 'number' && ! o . columnOpts ) { this . column ( o . column ) ; delete o . column ; } // responsive column take over actual count
13111308 if ( o . margin !== undefined ) this . margin ( o . margin ) ;
@@ -1360,7 +1357,7 @@ export class GridStack {
13601357 // restore any sub-grid back
13611358 if ( n . subGrid ?. el ) {
13621359 itemContent . appendChild ( n . subGrid . el ) ;
1363- n . subGrid . _updateStyles ( ) ;
1360+ n . subGrid . _updateContainerHeight ( ) ;
13641361 }
13651362 }
13661363 delete w . content ;
@@ -1508,7 +1505,7 @@ export class GridStack {
15081505 */
15091506 public margin ( value : numberOrString ) : GridStack {
15101507 const isMultiValue = ( typeof value === 'string' && value . split ( ' ' ) . length > 1 ) ;
1511- // check if we can skip re-creating our CSS file ... won't check if multi values (too much hassle)
1508+ // check if we can skip... won't check if multi values (too much hassle)
15121509 if ( ! isMultiValue ) {
15131510 const data = Utils . parseHeight ( value ) ;
15141511 if ( this . opts . marginUnit === data . unit && this . opts . margin === data . h ) return ;
@@ -1518,8 +1515,6 @@ export class GridStack {
15181515 this . opts . marginTop = this . opts . marginBottom = this . opts . marginLeft = this . opts . marginRight = undefined ;
15191516 this . _initMargin ( ) ;
15201517
1521- this . _updateStyles ( ) ;
1522-
15231518 return this ;
15241519 }
15251520
@@ -1598,34 +1593,6 @@ export class GridStack {
15981593 return this ;
15991594 }
16001595
1601- private setVar ( el : HTMLElement , varName : string , varValue : string ) {
1602- el . style . setProperty ( varName , varValue ) ;
1603- }
1604-
1605- /**
1606- * Updates the CSS variables (used in CSS and inline style) for row based layout and initial margin setting,
1607- * Variables are scoped in DOM so they works for nested grids as well
1608- * @internal
1609- */
1610- protected _updateStyles ( ) : GridStack {
1611- this . _updateContainerHeight ( ) ;
1612-
1613- // if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ??
1614- if ( this . opts . cellHeight === 0 ) {
1615- return this ;
1616- }
1617-
1618- // Set CSS var of cell height
1619- this . setVar ( this . el , "--gs-cell-height" , `${ this . opts . cellHeight } ${ this . opts . cellHeightUnit } ) ;
1620- // content margins
1621- this . setVar ( this . el , "--gs-item-margin-top" , `${ this . opts . marginTop } ${ this . opts . marginUnit } ) ;
1622- this . setVar ( this . el , "--gs-item-margin-bottom" , `${ this . opts . marginBottom } ${ this . opts . marginUnit } ) ;
1623- this . setVar ( this . el , "--gs-item-margin-right" , `${ this . opts . marginRight } ${ this . opts . marginUnit } ) ;
1624- this . setVar ( this . el , "--gs-item-margin-left" , `${ this . opts . marginLeft } ${ this . opts . marginUnit } ) ;
1625-
1626- return this ;
1627- }
1628-
16291596 /** @internal */
16301597 protected _updateContainerHeight ( ) : GridStack {
16311598 if ( ! this . engine || this . engine . batchMode ) return this ;
@@ -1880,7 +1847,6 @@ export class GridStack {
18801847
18811848 /** @internal initialize margin top/bottom/left/right and units */
18821849 protected _initMargin ( ) : GridStack {
1883-
18841850 let data : HeightData ;
18851851 let margin = 0 ;
18861852
@@ -1904,41 +1870,28 @@ export class GridStack {
19041870 }
19051871
19061872 // see if top/bottom/left/right need to be set as well
1907- if ( this . opts . marginTop === undefined ) {
1908- this . opts . marginTop = margin ;
1909- } else {
1910- data = Utils . parseHeight ( this . opts . marginTop ) ;
1911- this . opts . marginTop = data . h ;
1912- delete this . opts . margin ;
1913- }
1914-
1915- if ( this . opts . marginBottom === undefined ) {
1916- this . opts . marginBottom = margin ;
1917- } else {
1918- data = Utils . parseHeight ( this . opts . marginBottom ) ;
1919- this . opts . marginBottom = data . h ;
1920- delete this . opts . margin ;
1921- }
1922-
1923- if ( this . opts . marginRight === undefined ) {
1924- this . opts . marginRight = margin ;
1925- } else {
1926- data = Utils . parseHeight ( this . opts . marginRight ) ;
1927- this . opts . marginRight = data . h ;
1928- delete this . opts . margin ;
1929- }
1930-
1931- if ( this . opts . marginLeft === undefined ) {
1932- this . opts . marginLeft = margin ;
1933- } else {
1934- data = Utils . parseHeight ( this . opts . marginLeft ) ;
1935- this . opts . marginLeft = data . h ;
1936- delete this . opts . margin ;
1937- }
1873+ const keys = [ 'marginTop' , 'marginRight' , 'marginBottom' , 'marginLeft' ] ;
1874+ keys . forEach ( k => {
1875+ if ( this . opts [ k ] === undefined ) {
1876+ this . opts [ k ] = margin ;
1877+ } else {
1878+ data = Utils . parseHeight ( this . opts [ k ] ) ;
1879+ this . opts [ k ] = data . h ;
1880+ delete this . opts . margin ;
1881+ }
1882+ } ) ;
19381883 this . opts . marginUnit = data . unit ; // in case side were spelled out, use those units instead...
19391884 if ( this . opts . marginTop === this . opts . marginBottom && this . opts . marginLeft === this . opts . marginRight && this . opts . marginTop === this . opts . marginRight ) {
19401885 this . opts . margin = this . opts . marginTop ; // makes it easier to check for no-ops in setMargin()
19411886 }
1887+
1888+ // finally Update the CSS margin variables (inside the cell height) */
1889+ const style = this . el . style ;
1890+ style . setProperty ( '--gs-item-margin-top' , `${ this . opts . marginTop } ${ this . opts . marginUnit } ) ;
1891+ style . setProperty ( '--gs-item-margin-bottom' , `${ this . opts . marginBottom } ${ this . opts . marginUnit } ) ;
1892+ style . setProperty ( '--gs-item-margin-right' , `${ this . opts . marginRight } ${ this . opts . marginUnit } ) ;
1893+ style . setProperty ( '--gs-item-margin-left' , `${ this . opts . marginLeft } ${ this . opts . marginUnit } ) ;
1894+
19421895 return this ;
19431896 }
19441897
@@ -2355,7 +2308,6 @@ export class GridStack {
23552308 this . resizeToContentCheck ( false , node ) ;
23562309 if ( subGrid ) {
23572310 subGrid . parentGridNode = node ;
2358- subGrid . _updateStyles ( ) ; // re-create sub-grid styles now that we've moved
23592311 }
23602312 this . _updateContainerHeight ( ) ;
23612313 }
0 commit comments