haltu / muuri

Infinite responsive, sortable, filterable and draggable layouts
https://muuri.dev
MIT License
10.8k stars 643 forks source link

Display a grid item in full screen #571

Open glalloue opened 4 weeks ago

glalloue commented 4 weeks ago

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

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
      };
    }
  });
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?