viewerjs 1.13.0 → 1.14.0

package/src/js/viewer.js

@@ -64,6 +64,7 @@ class Viewer {
     this.ownerDocument = element.ownerDocument || element.host.ownerDocument;
     this.options = assign({}, DEFAULTS, isPlainObject(options) && options);
     this.action = false;
+    this.actionEvent = null;
     this.fading = false;
     this.fulled = false;
     this.hiding = false;
@@ -185,8 +186,11 @@ class Viewer {
         }
       });
     } else {
-      addListener(element, EVENT_CLICK, (this.onElementClick = ({ target }) => {
+      addListener(element, EVENT_CLICK, (this.onElementClick = (event) => {
+        const { target } = event;
+
         if (target.localName === 'img' && (!isFunction(options.filter) || options.filter.call(this, target))) {
+          this.actionEvent = event;
           this.view(this.images.indexOf(target));
         }
       }));
@@ -197,6 +201,7 @@ class Viewer {
           event.preventDefault();
 
           if (!isFunction(options.filter) || options.filter.call(this, target)) {
+            this.actionEvent = event;
             this.view(this.images.indexOf(target));
           }
         }
@@ -243,6 +248,10 @@ class Viewer {
     addClass(title, !options.title ? CLASS_HIDE : getResponsiveClass(Array.isArray(options.title)
       ? options.title[0]
       : options.title));
+
+    if (options.title) {
+      title.removeAttribute('aria-hidden');
+    }
     const navbarOptions = isPlainObject(options.navbar) ? options.navbar : {};
     let navbarShow = options.navbar;
     const navbarSize = !isUndefined(navbarOptions.size) ? navbarOptions.size : options.navbar;
@@ -253,6 +262,10 @@ class Viewer {
 
     addClass(navbar, !navbarShow ? CLASS_HIDE : getResponsiveClass(navbarShow));
 
+    if (navbarShow) {
+      navbar.removeAttribute('aria-hidden');
+    }
+
     if (['small', 'medium', 'large'].indexOf(navbarSize) !== -1) {
       addClass(navbar, `${NAMESPACE}-${navbarSize}`);
     }
@@ -284,8 +297,16 @@ class Viewer {
       );
     }
 
+    if (options.navigation) {
+      navigation.removeAttribute('aria-hidden');
+    }
+
     toggleClass(button, CLASS_HIDE, !options.button);
 
+    if (options.button) {
+      button.removeAttribute('aria-hidden');
+    }
+
     if (options.keyboard) {
       button.setAttribute('tabindex', 0);
       forEach(navigation.querySelectorAll('[role="button"]'), (item) => {
@@ -319,6 +340,8 @@ class Viewer {
         addClass(toolbar, getResponsiveClass(options.toolbar));
       }
 
+      toolbar.removeAttribute('aria-hidden');
+
       forEach(custom ? options.toolbar : BUTTONS, (value, index) => {
         const deep = custom && isPlainObject(value);
         const name = custom ? hyphenate(index) : value;
@@ -370,6 +393,12 @@ class Viewer {
       addClass(toolbar, CLASS_HIDE);
     }
 
+    if (options.title || navbarShow || options.toolbar) {
+      this.footer.removeAttribute('aria-hidden');
+    } else {
+      addClass(this.footer, CLASS_HIDE);
+    }
+
     if (!options.rotatable) {
       const rotates = toolbar.querySelectorAll('li[class*="rotate"]');
 

package/types/index.d.ts

@@ -1,6 +1,7 @@
 declare namespace Viewer {
   export type Visibility = 0 | 1 | 2 | 3 | 4;
   export type ToolbarButtonSize = 'small' | 'medium' | 'large';
+  export type WheelModifierKey = 'ctrl' | 'shift' | 'alt' | 'meta' | (string & {});
   export type EventHandler<T extends Event = CustomEvent> = (event: T) => void;
   export type Filter = (this: Viewer, image: HTMLImageElement) => boolean;
   export type TitleRenderer = (this: Viewer, image: HTMLImageElement, imageData: Record<string, any>) => string;
@@ -88,6 +89,7 @@ declare namespace Viewer {
   export interface RotateEventData {
     degree: number;
     oldDegree: number;
+    originalEvent: Event | null;
   }
 
   export interface RotateEvent extends CustomEvent<RotateEventData> {}
@@ -99,12 +101,61 @@ declare namespace Viewer {
     scaleY: number;
     oldScaleX: number;
     oldScaleY: number;
+    originalEvent: Event | null;
   }
 
   export interface ScaleEvent extends CustomEvent<ScaleEventData> {}
 
   export interface ScaledEvent extends CustomEvent<ScaleEventData> {}
 
+  export interface ViewEventData {
+    image: HTMLImageElement;
+    index: number;
+    originalImage: HTMLImageElement;
+    originalEvent: Event | null;
+  }
+
+  export interface ViewEvent extends CustomEvent<ViewEventData> {}
+
+  export interface ViewedEvent extends CustomEvent<ViewEventData> {}
+
+  export interface ShowEventData {
+    originalEvent: Event | null;
+  }
+
+  export interface ShowEvent extends CustomEvent<ShowEventData> {}
+
+  export interface ShownEvent extends CustomEvent<ShowEventData> {}
+
+  export interface HideEventData {
+    originalEvent: Event | null;
+  }
+
+  export interface HideEvent extends CustomEvent<HideEventData> {}
+
+  export interface HiddenEvent extends CustomEvent<HideEventData> {}
+
+  export interface PlayEventData {
+    originalEvent: Event | null;
+  }
+
+  export interface PlayEvent extends CustomEvent<PlayEventData> {}
+
+  export interface PlayingEventData {
+    image: HTMLImageElement;
+    index: number;
+    originalImage: HTMLImageElement;
+    originalEvent: Event | null;
+  }
+
+  export interface PlayingEvent extends CustomEvent<PlayingEventData> {}
+
+  export interface StopEventData {
+    originalEvent: Event | null;
+  }
+
+  export interface StopEvent extends CustomEvent<StopEventData> {}
+
   export interface ZoomEventData {
     ratio: number;
     oldRatio: number;
@@ -123,8 +174,8 @@ declare namespace Viewer {
     filter?: Filter | null;
     fullscreen?: boolean | FullscreenOptions;
     focus?: boolean;
-    hidden?: EventHandler;
-    hide?: EventHandler;
+    hidden?: EventHandler<HiddenEvent>;
+    hide?: EventHandler<HideEvent>;
     inheritedAttributes?: string[];
     initialCoverage?: number;
     initialViewIndex?: number;
@@ -144,7 +195,8 @@ declare namespace Viewer {
     moved?: EventHandler<MovedEvent>;
     navbar?: NavbarOption;
     navigation?: boolean | Visibility | NavigationOptions;
-    play?: EventHandler;
+    play?: EventHandler<PlayEvent>;
+    playing?: EventHandler<PlayingEvent>;
     preload?: boolean;
     ready?: EventHandler;
     rotatable?: boolean;
@@ -155,24 +207,25 @@ declare namespace Viewer {
     scalable?: boolean;
     scale?: EventHandler<ScaleEvent>;
     scaled?: EventHandler<ScaledEvent>;
-    show?: EventHandler;
-    shown?: EventHandler;
+    show?: EventHandler<ShowEvent>;
+    shown?: EventHandler<ShownEvent>;
     slideOnTouch?: boolean;
-    stop?: EventHandler;
+    slideOnWheel?: boolean | WheelModifierKey;
+    stop?: EventHandler<StopEvent>;
     title?: boolean | Visibility | TitleRenderer | [Visibility, TitleRenderer] | null;
     toggleOnDblclick?: boolean;
     toolbar?: boolean | Visibility | ToolbarOptions;
     tooltip?: boolean;
     transition?: boolean | TransitionOptions;
     url?: string | ImageURLResolver;
-    view?: EventHandler;
-    viewed?: EventHandler;
+    view?: EventHandler<ViewEvent>;
+    viewed?: EventHandler<ViewedEvent>;
     zIndex?: number;
     zIndexInline?: number;
     zoom?: EventHandler<ZoomEvent>;
     zoomOnGesture?: boolean;
     zoomOnTouch?: boolean;
-    zoomOnWheel?: boolean;
+    zoomOnWheel?: boolean | WheelModifierKey;
     zoomRatio?: number;
     zoomable?: boolean;
     zoomed?: EventHandler<ZoomedEvent>;