[TASK] Remove the loadEmpty option and create the lightbox when add…

…ing an item
deoostfrees · Jul 10, 2024 · 98e41b5 · 98e41b5
1 parent e703293
commit 98e41b5
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -209,10 +209,6 @@ The following options are available:
 
 ```js
 {
-  // Load the lightbox empty if no elements are available
-  // (e.g. when elements are loaded via Ajax)
-  loadEmpty: false,
-
   // Selector for elements that trigger Parvus
   selector: '.lightbox',
 

diff --git a/dist/js/parvus.esm.js b/dist/js/parvus.esm.js
@@ -117,7 +117,6 @@ function Parvus(userOptions) {
   const mergeOptions = userOptions => {
     // Default options
     const DEFAULT_OPTIONS = {
-      loadEmpty: false,
       selector: '.lightbox',
       gallerySelector: null,
       captions: true,
@@ -189,8 +188,9 @@ function Parvus(userOptions) {
    * @param {HTMLElement} el - The element to be added
    */
   const add = el => {
+    // Check if the lightbox already exists
     if (!lightbox) {
-      return;
+      createLightbox();
     }
     if (!(el.tagName === 'A' && el.hasAttribute('href') || el.tagName === 'BUTTON' && el.hasAttribute('data-target'))) {
       throw new Error('Use a link with the \'href\' attribute or a button with the \'data-target\' attribute. Both attributes must contain a path to the image file.');
@@ -1395,17 +1395,7 @@ function Parvus(userOptions) {
   const init = () => {
     // Merge user options into defaults
     config = mergeOptions(userOptions);
-
-    // Check if the lightbox should be loaded empty or if there are elements for the lightbox.
-    if (!config.loadEmpty && !document.querySelectorAll(config.selector).length) {
-      return;
-    }
     reducedMotionCheck();
-
-    // Check if the lightbox already exists
-    if (!lightbox) {
-      createLightbox();
-    }
     if (config.gallerySelector !== null) {
       // Get a list of all `gallerySelector` elements within the document
       const GALLERY_ELS = document.querySelectorAll(config.gallerySelector);

diff --git a/dist/js/parvus.esm.min.js b/dist/js/parvus.esm.min.js
diff --git a/dist/js/parvus.js b/dist/js/parvus.js
@@ -123,7 +123,6 @@
     const mergeOptions = userOptions => {
       // Default options
       const DEFAULT_OPTIONS = {
-        loadEmpty: false,
         selector: '.lightbox',
         gallerySelector: null,
         captions: true,
@@ -195,8 +194,9 @@
      * @param {HTMLElement} el - The element to be added
      */
     const add = el => {
+      // Check if the lightbox already exists
       if (!lightbox) {
-        return;
+        createLightbox();
       }
       if (!(el.tagName === 'A' && el.hasAttribute('href') || el.tagName === 'BUTTON' && el.hasAttribute('data-target'))) {
         throw new Error('Use a link with the \'href\' attribute or a button with the \'data-target\' attribute. Both attributes must contain a path to the image file.');
@@ -1401,17 +1401,7 @@
     const init = () => {
       // Merge user options into defaults
       config = mergeOptions(userOptions);
-
-      // Check if the lightbox should be loaded empty or if there are elements for the lightbox.
-      if (!config.loadEmpty && !document.querySelectorAll(config.selector).length) {
-        return;
-      }
       reducedMotionCheck();
-
-      // Check if the lightbox already exists
-      if (!lightbox) {
-        createLightbox();
-      }
       if (config.gallerySelector !== null) {
         // Get a list of all `gallerySelector` elements within the document
         const GALLERY_ELS = document.querySelectorAll(config.gallerySelector);

diff --git a/dist/js/parvus.min.js b/dist/js/parvus.min.js
diff --git a/src/js/parvus.js b/src/js/parvus.js
@@ -53,7 +53,6 @@ export default function Parvus (userOptions) {
   const mergeOptions = (userOptions) => {
     // Default options
     const DEFAULT_OPTIONS = {
-      loadEmpty: false,
       selector: '.lightbox',
       gallerySelector: null,
       captions: true,
@@ -131,8 +130,9 @@ export default function Parvus (userOptions) {
    * @param {HTMLElement} el - The element to be added
    */
   const add = (el) => {
+    // Check if the lightbox already exists
     if (!lightbox) {
-      return
+      createLightbox()
     }
 
     if (!((el.tagName === 'A' && el.hasAttribute('href')) || (el.tagName === 'BUTTON' && el.hasAttribute('data-target')))) {
@@ -1459,18 +1459,8 @@ export default function Parvus (userOptions) {
     // Merge user options into defaults
     config = mergeOptions(userOptions)
 
-    // Check if the lightbox should be loaded empty or if there are elements for the lightbox.
-    if (!config.loadEmpty && !document.querySelectorAll(config.selector).length) {
-      return
-    }
-
     reducedMotionCheck()
 
-    // Check if the lightbox already exists
-    if (!lightbox) {
-      createLightbox()
-    }
-
     if (config.gallerySelector !== null) {
       // Get a list of all `gallerySelector` elements within the document
       const GALLERY_ELS = document.querySelectorAll(config.gallerySelector)

diff --git a/test/test.js b/test/test.js
@@ -36,25 +36,25 @@ setTimeout(() => {
  * Events
  *
  */
-prvs.on('open', function (event) {
+prvs.on('open', (event) => {
   console.log(`
     Opened by: ${event.detail.source}
     at index: ${prvs.currentIndex()},
     selected slide: ${prvs.currentIndex() + 1}
   `)
 })
 
-prvs.on('select', function () {
+prvs.on('select', () => {
   console.log(`
     Selected index: ${prvs.currentIndex()},
     selected slide: ${prvs.currentIndex() + 1}
   `)
 })
 
-prvs.on('close', function () {
+prvs.on('close', () => {
   console.log('Closed')
 })
 
-prvs.on('destroy', function () {
+prvs.on('destroy', () => {
   console.log('Destroyed')
 })