Reuse data-* actions inside toolbar

src/Fancybox/Fancybox.js

@@ -503,8 +503,31 @@ class Fancybox extends Base {
       return;
     }
 
+    let eventTarget = event.target;
+
+    if (eventTarget.matches("[data-fancybox-close]")) {
+      event.preventDefault();
+      Fancybox.close(false);
+
+      return;
+    }
+
+    if (eventTarget.matches("[data-fancybox-next]")) {
+      event.preventDefault();
+      Fancybox.next();
+
+      return;
+    }
+
+    if (eventTarget.matches("[data-fancybox-prev]")) {
+      event.preventDefault();
+      Fancybox.prev();
+
+      return;
+    }
+
     // Skip if clicked inside content area
-    if (event.target.closest(".fancybox__content")) {
+    if (eventTarget.closest(".fancybox__content")) {
       return;
     }
 
@@ -1215,24 +1238,6 @@ class Fancybox extends Base {
 
     let eventTarget = event.target;
 
-    if (eventTarget.matches("[data-fancybox-close]")) {
-      Fancybox.close(false);
-
-      return;
-    }
-
-    if (eventTarget.matches("[data-fancybox-next]")) {
-      Fancybox.next();
-
-      return;
-    }
-
-    if (eventTarget.matches("[data-fancybox-prev]")) {
-      Fancybox.prev();
-
-      return;
-    }
-
     // Support `trigger` element, e.g., start fancybox from different DOM element, for example,
     // to have one preview image for hidden image gallery
     let triggerGroupName;

src/Fancybox/plugins/Toolbar/Toolbar.js

@@ -35,22 +35,14 @@ const defaults = {
       class: "fancybox__button--prev",
       label: "PREV",
       html: '<svg viewBox="0 0 24 24"><path d="M15 4l-8 8 8 8"/></svg>',
-      click: function (event) {
+      attr: { "data-fancybox-prev": "" },
-        event.preventDefault();
-
-        this.fancybox.prev();
-      },
     },
     next: {
       type: "button",
       class: "fancybox__button--next",
       label: "NEXT",
       html: '<svg viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>',
-      click: function (event) {
+      attr: { "data-fancybox-next": "" },
-        event.preventDefault();
-
-        this.fancybox.next();
-      },
     },
     fullscreen: {
       type: "button",
@@ -129,12 +121,7 @@ const defaults = {
       class: "fancybox__button--close",
       html: '<svg viewBox="0 0 24 24"><path d="M20 20L4 4m16 0L4 20"></path></svg>',
       tabindex: 0,
-      click: function (event) {
+      attr: { "data-fancybox-close": "" },
-        event.stopPropagation();
-        event.preventDefault();
-
-        this.fancybox.close();
-      },
     },
   },
 };
@@ -211,6 +198,7 @@ export class Toolbar {
   }
 
   onPrepare() {
+    const fancybox = this.fancybox;
     // Skip if disabled
     if (this.state !== "init") {
       return;
@@ -220,16 +208,16 @@ export class Toolbar {
 
     this.update();
 
-    this.Slideshow = new Slideshow(this.fancybox);
+    this.Slideshow = new Slideshow(fancybox);
 
-    if (!this.fancybox.Carousel.prevPage) {
+    if (!fancybox.Carousel.prevPage) {
-      if (this.fancybox.option("slideshow.autoStart")) {
+      if (fancybox.option("slideshow.autoStart")) {
         this.Slideshow.activate();
       }
 
-      if (this.fancybox.option("fullscreen.autoStart") && !Fullscreen.element()) {
+      if (fancybox.option("fullscreen.autoStart") && !Fullscreen.element()) {
         try {
-          Fullscreen.activate(this.fancybox.$container);
+          Fullscreen.activate(fancybox.$container);
         } catch (error) {}
       }
     }
@@ -240,14 +228,14 @@ export class Toolbar {
   }
 
   onSettle() {
-    if (this.Slideshow && this.Slideshow.isActive()) {
+    const fancybox = this.fancybox;
-      if (
+    const slideshow = this.Slideshow;
-        this.fancybox.getSlide().index === this.fancybox.Carousel.slides.length - 1 &&
+
-        !this.fancybox.option("infinite")
+    if (slideshow && slideshow.isActive()) {
-      ) {
+      if (fancybox.getSlide().index === fancybox.Carousel.slides.length - 1 && !fancybox.option("infinite")) {
-        this.Slideshow.deactivate();
+        slideshow.deactivate();
-      } else if (this.fancybox.getSlide().state === "done") {
+      } else if (fancybox.getSlide().state === "done") {
-        this.Slideshow.setTimer();
+        slideshow.setTimer();
       }
     }
   }
@@ -261,14 +249,16 @@ export class Toolbar {
   }
 
   onDone(fancybox, slide) {
+    const slideshow = this.Slideshow;
+
     if (slide.index === fancybox.getSlide().index) {
       this.update();
 
-      if (this.Slideshow && this.Slideshow.isActive()) {
+      if (slideshow && slideshow.isActive()) {
-        if (!this.fancybox.option("infinite") && slide.index === this.fancybox.Carousel.slides.length - 1) {
+        if (!fancybox.option("infinite") && slide.index === fancybox.Carousel.slides.length - 1) {
-          this.Slideshow.deactivate();
+          slideshow.deactivate();
         } else {
-          this.Slideshow.setTimer();
+          slideshow.setTimer();
         }
       }
     }
@@ -323,6 +313,10 @@ export class Toolbar {
       $el.classList.add(...obj.class.split(" "));
     }
 
+    for (let prop in obj.attr) {
+      $el.setAttribute(prop, obj[prop]);
+    }
+
     if (obj.label) {
       $el.setAttribute("title", this.fancybox.localize(`{{${obj.label}}}`));
     }