muuri icon indicating copy to clipboard operation
muuri copied to clipboard

Display a grid item in full screen

Open glalloue opened this issue 4 months ago • 0 comments

I try to display one item on the grid in fullscreen by clicking on a button.

To do that i add css styles to the item that i want to open in fullscreen :

.fullscreen {
   z-index: 103 !important;
   width: 100% !important;
   height: 100% !important;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   overflow: auto !important;
   margin: 0 !important;
}

But, because of the "transform" style set by muuri, i cannot open it in fullscreen. So, i created 2 events in my code to disable "transform" style only when fullscreen mode is activated

  • Click on fullscreen button :
this._grid.getItems().forEach((item) => {
    const itemElem = item.getElement();
    if(itemElem.querySelector('#' + elemID)) {
      const transformValueBackup = itemElem.style.transform;
      itemElem.style.transform = 'unset !important';
      this._fullscreenOpenerItem = {
        item: itemElem,
        transformValue: transformValueBackup
      };
    }
  });
  • Click on button to close fullscreen :
if (!this.isEmpty(this._fullscreenOpenerItem)) {
    this._fullscreenOpenerItem.item.style.transform = this._fullscreenOpenerItem.transformValue;
}

But even with that, the fullscreen mode doesn't work. I think that Muuri takes it as a change in size and therefore restarts the calculation automatically and will set the "transform" again after my modification.

How can I force muuri not to restart the calculation in this specific case?

glalloue avatar Oct 01 '24 08:10 glalloue