Visionneuse : ajustements (#734)

assets/js/theme/design-system/Popup.js

@@ -40,9 +40,8 @@ window.osuny.Popup.prototype = {
         }.bind(this));
     },
 
-    toggle (open, triggerElement) {
-        var classAction,
-            closeEvent = new Event('extendable-close');
+    toggle: function (open, triggerElement) {
+        var classAction;
         this.state.opened = typeof open !== 'undefined' ? open : !this.state.opened;
         classAction = this.state.opened ? 'add' : 'remove';
 
@@ -52,10 +51,7 @@ window.osuny.Popup.prototype = {
         this.element.classList[classAction](CLASSES.popupIsOpened);
 
         if (!this.state.opened) {
-            // Close extendables boxes
-            this.extendables.forEach(function (extendable) {
-                extendable.dispatchEvent(closeEvent);
-            });
+            this.closeExtendables();
         }
 
         this.updateDocumentAccessibility();
@@ -71,6 +67,14 @@ window.osuny.Popup.prototype = {
         }
     },
 
+    closeExtendables: function () {
+        // Close extendables boxes
+        var closeEvent = new Event('extendable-close');
+        this.extendables.forEach(function (extendable) {
+            extendable.dispatchEvent(closeEvent);
+        });
+    },
+
     updateDocumentAccessibility: function () {
         var bodyChildren = document.body.children,
             action = this.state.opened ? 'setAttribute' : 'removeAttribute';

assets/js/theme/design-system/lightbox.js

@@ -103,6 +103,7 @@ window.osuny.Lightbox.prototype._clear = function () {
 
     setButtonEnability(this.contentElements.previousButton, false);
     setButtonEnability(this.contentElements.nextButton, false);
+    this.closeExtendables();
 };
 
 window.osuny.Lightbox.prototype._update = function (data) {

assets/sass/_theme/components/lightbox.sass

@@ -16,11 +16,13 @@
         display: flex
         height: 100%
         width: 100%
+        pointer-events: none
         img
             display: block
             margin: auto
             max-height: 100%
             outline-color: $lightbox-focus-outline-color
+            pointer-events: auto
     &-controls
         bottom: $spacing-2
         display: flex
@@ -46,9 +48,13 @@
             &.lightbox-button-credit
                 &::before
                     content: '©' / ''
+                &:disabled
+                    display: none
             &.lightbox-button-information
                 &::before
                     content: 'i' / ''
+                &:disabled
+                    display: none
             &.lightbox-button-close
                 @include icon(close-line, before)
             &[aria-expanded='true']