Automatically handle image state sync per default

[nomego]

We are currently using multiple instances of this component but they should share external window (when used).

We should introduce a behavior where we observe isAttached along with isVisible and call syncImageState() whenever any of them changes into a state where both are true:

Pseudo-code:

static get properties() {
  isVisible: {
    type: Boolean,
    readOnly: true
  },
  manualImageStateSync: {
    type: Boolean,
    value: false
  }
  ...
}

static get observers() {
  return [
    'autoSyncImageState(isAttached, isVisible, manualImageStateSync)'
  ];
}

...

_onResize(event) {
  this._setIsVisible(Boolean(this.offsetWidth || this.offsetHeight));
  ...
}

autoSyncImageState(isAttached, isVisible, manualImageStateSync) {
  if (isAttached && isVisible && !manualImageStateSync) {
    this.syncImageState();
  }
}

[cristinecula]

@nomego the problem is that we don't have a reliable way of knowing when the element becomes invisible again. This is a problem when you navigate forwards through the queue and the go backwards. The isVisible prop will remain true and the image viewer will not update.

[nomego]

This is true. Would it make sense for cosmoz-tabs to fire an iron-resize on the just-hidden tab?

[cristinecula]

If we use ResizeObserver we can reliable detect when the element becomes visible.