@dotdev/limelight - npm Package Compare versions

Comparing version 2.1.29 to 2.2.0

lib/limelight.js

@@ -13,3 +13,3 @@ "use strict";
 Limelight
-version v2.1.27
+version v2.2.0
 Author: George Butter
@@ -179,8 +179,28 @@ https://github.com/ButsAndCats/limelight
 Limelight.prototype.buildEventListeners = function bindLimelightEventListeners() {
-  var allTriggers = document.querySelectorAll("[data-trigger][data-target=\"".concat(this.target, "\"]"));
+  function on(eventName, selector, fn) {
+    document.addEventListener(eventName, function (event) {
+      var possibleTargets = document.querySelectorAll(selector);
+      var target = event.target;
 
+      for (var i = 0, l = possibleTargets.length; i < l; i++) {
+        var el = target;
+        var p = possibleTargets[i];
+
+        while (el && el !== document) {
+          if (el === p) {
+            event.preventDefault();
+            event.elem = p;
+            return fn.call(p, event);
+          }
+
+          el = el.parentNode;
+        }
+      }
+    });
+  }
+
   var clickFunction = function (event) {
     event.preventDefault();
     event.stopPropagation();
-    this.triggerElement = event.currentTarget;
+    this.triggerElement = event.elem;
     var target = this.triggerElement.dataset.target;
@@ -193,14 +213,12 @@ this.eventHandler(event, target);
     event.stopPropagation();
-    var target = event.currentTarget.dataset.target;
+    var target = event.elem.dataset.target;
     this.eventHandler(event, target, 'show');
   }.bind(this);
 
-  for (var trigger = 0; trigger < allTriggers.length; trigger += 1) {
-    if (this.settings.click) {
-      allTriggers[trigger].addEventListener('click', clickFunction);
-    }
+  if (this.settings.click) {
+    on('click', "[data-trigger][data-target=\"".concat(this.target, "\"]"), clickFunction);
+  }
 
-    if (this.settings.hover) {
-      allTriggers[trigger].addEventListener('mouseenter', hoverFunction);
-    }
+  if (this.settings.hover) {
+    on('mouseenter', "[data-trigger][data-target=\"".concat(this.target, "\"]"), hoverFunction);
   } // If the element is intialized visible then create an event listener for closing
@@ -207,0 +225,0 @@

limelight.js

@@ -1,14 +0,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /* ===================================================================================== @preserve =
 
 Limelight
-version v2.1.28
+version v2.2.0
 Author: George Butter
@@ -22,4 +13,4 @@ https://github.com/ButsAndCats/limelight
 */
-var Limelight = function LimelightVisibilityManager(target, config) {
-  var settings = config || {}; // The default configuration
+const Limelight = function LimelightVisibilityManager (target, config) {
+  const settings = config || {} // The default configuration
 
@@ -41,3 +32,3 @@ /*
 
-  var defaultSettings = {
+  const defaultSettings = {
     visibleClass: 'visible',
@@ -61,67 +52,64 @@ bodyClass: null,
 
-  };
-  this.settings = _extends(defaultSettings, settings); // Update current popup config
+  }
+  this.settings = Object.assign(defaultSettings, settings) // Update current popup config
 
-  this.visible = this.settings.visible; // The Dom element of the popup
+  this.visible = this.settings.visible // The Dom element of the popup
 
-  this.element = document.querySelector(target);
+  this.element = document.querySelector(target)
 
   if (!this.element) {
-    return;
+    return
   }
 
-  this.outerElement = this.element.querySelector(this.settings.outerSelector);
-  this.closeElements = this.element.querySelectorAll('[data-close]');
-  this.target = target;
+  this.outerElement = this.element.querySelector(this.settings.outerSelector)
+  this.closeElements = this.element.querySelectorAll('[data-close]')
+  this.target = target
 
   if (this.settings.slide) {
     if (this.settings.slideChild) {
-      this.slideElement = this.element.querySelector(this.settings.slideChild);
+      this.slideElement = this.element.querySelector(this.settings.slideChild)
     } else {
-      this.slideElement = this.element;
+      this.slideElement = this.element
     }
 
-    var defaultDisplay = this.slideElement.style.display;
-    this.slideElement.style.display = 'block';
-    this.maxHeight = this.slideElement.offsetHeight;
-    this.slideElement.style.display = defaultDisplay;
-    this.height = this.slideElement.offsetHeight;
-    this.counter = this.height;
+    const defaultDisplay = this.slideElement.style.display
+    this.slideElement.style.display = 'block'
+    this.maxHeight = this.slideElement.offsetHeight
+    this.slideElement.style.display = defaultDisplay
+    this.height = this.slideElement.offsetHeight
+    this.counter = this.height
   } // Bind this into all of our prototype functions
 
+  this.show = this.show.bind(this)
+  this.hide = this.hide.bind(this)
+  this.toggle = this.toggle.bind(this)
+  this.detach = this.detach.bind(this)
+  this.slideDown = this.slideDown.bind(this)
+  this.slideUp = this.slideUp.bind(this)
+  this.buildEventListeners = this.buildEventListeners.bind(this)
+  this.eventHandler = this.eventHandler.bind(this) // If detach is set to true move the popup to the end of the popup
 
-  this.show = this.show.bind(this);
-  this.hide = this.hide.bind(this);
-  this.toggle = this.toggle.bind(this);
-  this.detach = this.detach.bind(this);
-  this.slideDown = this.slideDown.bind(this);
-  this.slideUp = this.slideUp.bind(this);
-  this.buildEventListeners = this.buildEventListeners.bind(this);
-  this.eventHandler = this.eventHandler.bind(this); // If detach is set to true move the popup to the end of the popup
-
   if (this.settings.detach) {
-    document.addEventListener('DOMContentLoaded', this.detach);
+    document.addEventListener('DOMContentLoaded', this.detach)
   } // Create a list of all of the currently active elements so that we can access them globally
 
+  Limelight.elements[target] = this
+  window.Limelight = Limelight || {}
+  window.Limelight.elements[target] = this
+  this.buildEventListeners()
+} // Create an empty object to store all of the elements in.
 
-  Limelight.elements[target] = this;
-  window.Limelight = Limelight || {};
-  window.Limelight.elements[target] = this;
-  this.buildEventListeners();
-}; // Create an empty object to store all of the elements in.
+Limelight.elements = Limelight.elements || {} // Prevent default if the element is a link and return the selector of the popup element
 
+Limelight.getTarget = function getTheLimelightElementRelatedToTheTarget (event) {
+  const element = event.currentTarget
 
-Limelight.elements = Limelight.elements || {}; // Prevent default if the element is a link and return the selector of the popup element
-
-Limelight.getTarget = function getTheLimelightElementRelatedToTheTarget(event) {
-  var element = event.currentTarget;
-
   if (element.tagName === 'A') {
-    event.preventDefault();
+    event.preventDefault()
   }
 
-  var selector = element.dataset.target;
-  var target = selector || null;
-  return target;
-};
+  const selector = element.dataset.target
+  const target = selector || null
+  return target
+}
 /*
@@ -132,20 +120,19 @@ If the element does not exist then it is being fired directly from a data attribute.
 
+Limelight.prototype.eventHandler = function hideOrShowTheElement (event, target, method) {
+  let element = Limelight.elements[target]
 
-Limelight.prototype.eventHandler = function hideOrShowTheElement(event, target, method) {
-  var element = Limelight.elements[target];
-
   if (!element) {
-    element = new Limelight(target);
+    element = new Limelight(target)
   }
 
   if (method === 'hide') {
-    return element.hide();
+    return element.hide()
   }
 
   if (method === 'show') {
-    return element.show();
+    return element.show()
   }
 
-  return element.toggle();
-};
+  return element.toggle()
+}
 /*
@@ -155,12 +142,11 @@ When clicking on a close button or out element
 
+Limelight.closeEvent = function handleAnElementBeingClosed (event) {
+  const target = Limelight.getTarget(event)
 
-Limelight.closeEvent = function handleAnElementBeingClosed(event) {
-  var target = Limelight.getTarget(event);
-
   if (target) {
-    this.eventHandler(event, target, 'hide');
+    this.eventHandler(event, target, 'hide')
   } else {
-    this.hide();
+    this.hide()
   }
-};
+}
 /*
@@ -170,9 +156,8 @@ On key up event check if the user has pressed escape
 
-
-Limelight.escEvent = function onKeyUpEscape(event) {
+Limelight.escEvent = function onKeyUpEscape (event) {
   if (event.keyCode === 27) {
-    this.element.removeEventListener('keyup', Limelight.escEvent);
-    this.hide();
+    this.element.removeEventListener('keyup', Limelight.escEvent)
+    this.hide()
   }
-};
+}
 /*
@@ -182,39 +167,57 @@ Build the event listeners
 
+Limelight.prototype.buildEventListeners = function bindLimelightEventListeners () {
+  function on(eventName, selector, fn) {
+    document.addEventListener(eventName, function (event) {
+      var possibleTargets = document.querySelectorAll(selector);
+      var target = event.target;
+      for (var i = 0, l = possibleTargets.length; i < l; i++) {
+        var el = target;
+        var p = possibleTargets[i];
 
-Limelight.prototype.buildEventListeners = function bindLimelightEventListeners() {
-  var allTriggers = document.querySelectorAll("[data-trigger][data-target=\"".concat(this.target, "\"]"));
+        while (el && el !== document) {
+          if (el === p) {
+            event.preventDefault();
+            event.elem = p;
+            return fn.call(p, event);
+          }
 
-  var clickFunction = function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.triggerElement = event.currentTarget;
-    var target = this.triggerElement.dataset.target;
-    this.eventHandler(event, target);
-  }.bind(this);
+          el = el.parentNode;
+        }
+      }
+    });
+  }
+  
 
-  var hoverFunction = function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    var target = event.currentTarget.dataset.target;
-    this.eventHandler(event, target, 'show');
-  }.bind(this);
+  const clickFunction = function (event) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.triggerElement = event.elem
+    const target = this.triggerElement.dataset.target
+    this.eventHandler(event, target)
+  }.bind(this)
 
-  for (var trigger = 0; trigger < allTriggers.length; trigger += 1) {
+  const hoverFunction = function (event) {
+    event.preventDefault()
+    event.stopPropagation()
+    const target = event.elem.dataset.target
+    this.eventHandler(event, target, 'show')
+  }.bind(this)
+  
+  
     if (this.settings.click) {
-      allTriggers[trigger].addEventListener('click', clickFunction);
+      on('click', `[data-trigger][data-target="${this.target}"]`, clickFunction);
     }
 
     if (this.settings.hover) {
-      allTriggers[trigger].addEventListener('mouseenter', hoverFunction);
+      on('mouseenter', `[data-trigger][data-target="${this.target}"]`, hoverFunction);
     }
-  } // If the element is intialized visible then create an event listener for closing
-
-
+  
+  // If the element is intialized visible then create an event listener for closing
   if (this.closeElements && this.settings.visible) {
     // When someone clicks the [data-close] button then we should close the modal
-    for (var elem = 0; elem < this.closeElements.length; elem += 1) {
-      this.closeElements[elem].addEventListener('click', Limelight.closeEvent.bind(this));
+    for (let elem = 0; elem < this.closeElements.length; elem += 1) {
+      this.closeElements[elem].addEventListener('click', Limelight.closeEvent.bind(this))
     }
   }
-};
+}
 /*
@@ -224,10 +227,9 @@ Add a class to a given element
 
+Limelight.addClass = function addAClassToAGivenElement (element, className) {
+  const el = element
 
-Limelight.addClass = function addAClassToAGivenElement(element, className) {
-  var el = element;
-
   if (el.classList) {
-    el.classList.add(className);
+    el.classList.add(className)
   }
-};
+}
 /*
@@ -237,10 +239,9 @@ Remove a class from a given element
 
+Limelight.removeClass = function removeAClassFromAGivenElement (element, className) {
+  const el = element
 
-Limelight.removeClass = function removeAClassFromAGivenElement(element, className) {
-  var el = element;
-
   if (el.classList) {
-    el.classList.remove(className);
+    el.classList.remove(className)
   }
-};
+}
 /*
@@ -250,4 +251,3 @@ Show the popup element
 
-
-Limelight.prototype.show = function showTheElement() {
+Limelight.prototype.show = function showTheElement () {
   // Check if the element is visible or not.
@@ -257,36 +257,30 @@ if (!this.visible || !this.element.classList.contains(this.settings.visibleClass)) {
     if (this.settings.beforeShowCallback && typeof this.settings.beforeShowCallback === 'function') {
-      this.settings.beforeShowCallback(this, Limelight.elements);
+      this.settings.beforeShowCallback(this, Limelight.elements)
     } // Add the class to the trigger button if one is defined.
 
-
     if (this.settings.triggerClass) {
-      var triggerElements = document.querySelectorAll("[data-trigger][data-target=\"".concat(this.target, "\"]"));
-
-      for (var elem = 0; elem < triggerElements.length; elem += 1) {
-        var element = triggerElements[elem];
-        Limelight.addClass(element, this.settings.triggerClass);
+      const triggerElements = document.querySelectorAll(`[data-trigger][data-target="${this.target}"]`)
+      for (let elem = 0; elem < triggerElements.length; elem += 1) {
+        const element = triggerElements[elem]
+        Limelight.addClass(element, this.settings.triggerClass)
       }
     } // If slide is set to true slide the element down.
 
-
     if (this.settings.slide) {
-      this.slideDown(this.settings.slideDuration);
+      this.slideDown(this.settings.slideDuration)
     } // Add the visible class to the popup
 
+    Limelight.addClass(this.element, this.settings.visibleClass) // Add the body class to the body
 
-    Limelight.addClass(this.element, this.settings.visibleClass); // Add the body class to the body
-
     if (this.settings.bodyClass) {
-      Limelight.addClass(document.body, this.settings.bodyClass);
+      Limelight.addClass(document.body, this.settings.bodyClass)
     } // Define that this element is visible
 
+    this.visible = true // Focus on an input field once the modal has opened
+    const focusEl = document.querySelector(`${this.target} ${this.settings.autoFocusSelector}`)
 
-    this.visible = true; // Focus on an input field once the modal has opened
-
-    var focusEl = document.querySelector("".concat(this.target, " ").concat(this.settings.autoFocusSelector));
-
     if (focusEl) {
       setTimeout(function () {
-        focusEl.focus();
-      }, 300);
+        focusEl.focus()
+      }, 300)
     }
@@ -296,4 +290,4 @@
       // When someone clicks the [data-close] button then we should close the modal
-      for (var _elem = 0; _elem < this.closeElements.length; _elem += 1) {
-        this.closeElements[_elem].addEventListener('click', Limelight.closeEvent.bind(this));
+      for (let elem = 0; elem < this.closeElements.length; elem += 1) {
+        this.closeElements[elem].addEventListener('click', Limelight.closeEvent.bind(this))
       }
@@ -304,73 +298,69 @@ }
       // When someone clicks on the inner class hide the popup
-      this.outerElement.addEventListener('click', Limelight.closeEvent.bind(this));
+      this.outerElement.addEventListener('click', Limelight.closeEvent.bind(this))
     } // When someone presses esc hide the popup and unbind the event listener
 
+    this.element.addEventListener('keyup', Limelight.escEvent.bind(this)) // Fire the success callback
 
-    this.element.addEventListener('keyup', Limelight.escEvent.bind(this)); // Fire the success callback
-
     if (this.settings.showCallback && typeof this.settings.showCallback === 'function') {
-      this.settings.showCallback(this, Limelight.elements);
+      this.settings.showCallback(this, Limelight.elements)
     }
   } else if (this.settings.error && typeof this.settings.error === 'function') {
-    this.settings.error('Limelight: Error this element is already visible', this);
+    this.settings.error('Limelight: Error this element is already visible', this)
   } // Return this so that we can chain functions together
 
+  return this
+}
 
-  return this;
-};
+Limelight.prototype.slideDown = function slideDown () {
+  const el = this.slideElement
 
-Limelight.prototype.slideDown = function slideDown() {
-  var el = this.slideElement;
-
   if (this.settings.visible) {
-    el.style.height = null;
+    el.style.height = null
   } else {
-    var height = "".concat(el.scrollHeight, "px");
-    el.style.height = height;
+    const height = `${el.scrollHeight}px`
+    el.style.height = height
   }
-};
+}
 
-Limelight.prototype.slideUp = function slideUp() {
-  var el = this.slideElement;
+Limelight.prototype.slideUp = function slideUp () {
+  const el = this.slideElement
 
   if (this.settings.visible) {
-    el.style.height = 0;
+    el.style.height = 0
   } else {
-    el.style.height = null;
+    el.style.height = null
   }
-};
+}
 
-Limelight.prototype.hide = function hideTheElement() {
+Limelight.prototype.hide = function hideTheElement () {
   if (this.visible || this.element.classList.contains(this.settings.visibleClass)) {
     // Fire the before hide callback
     if (this.settings.beforeHideCallback && typeof this.settings.beforeHideCallback === 'function') {
-      this.settings.beforeHideCallback(this, Limelight.elements);
+      this.settings.beforeHideCallback(this, Limelight.elements)
     }
 
-    this.visible = false;
+    this.visible = false
 
     if (this.settings.bodyClass) {
-      Limelight.removeClass(document.body, this.settings.bodyClass);
+      Limelight.removeClass(document.body, this.settings.bodyClass)
     }
 
-    Limelight.removeClass(this.element, this.settings.visibleClass);
+    Limelight.removeClass(this.element, this.settings.visibleClass)
 
     if (this.settings.slide) {
-      this.slideUp(this.settings.slideDuration);
+      this.slideUp(this.settings.slideDuration)
     }
 
     if (this.settings.triggerClass) {
-      var triggerElements = document.querySelectorAll("[data-trigger][data-target=\"".concat(this.target, "\"]"));
-
-      for (var elem = 0; elem < triggerElements.length; elem += 1) {
-        var element = triggerElements[elem];
-        Limelight.removeClass(element, this.settings.triggerClass);
+      const triggerElements = document.querySelectorAll(`[data-trigger][data-target="${this.target}"]`)
+      for (let elem = 0; elem < triggerElements.length; elem += 1) {
+        const element = triggerElements[elem]
+        Limelight.removeClass(element, this.settings.triggerClass)
       }
     } // If slide is set to true slide the element down.
 
-
     if (this.closeElements) {
       // When someone clicks the [data-close] button then we should close the modal
-      for (var _elem2 = 0; _elem2 < this.closeElements.length; _elem2 += 1) {
-        this.closeElements[_elem2].addEventListener('click', Limelight.closeEvent.bind(this));
+      for (let elem = 0; elem < this.closeElements.length; elem += 1) {
+        this.closeElements[elem].addEventListener('click', Limelight.closeEvent.bind(this))
       }
@@ -381,15 +371,14 @@ }
       // When someone clicks on the inner class hide the popup
-      this.outerElement.removeEventListener('click', Limelight.closeEvent.bind(this));
+      this.outerElement.removeEventListener('click', Limelight.closeEvent.bind(this))
     } // Fire the success callback
 
-
     if (this.settings.hideCallback && typeof this.settings.hideCallback === 'function') {
-      this.settings.hideCallback(this, Limelight.elements);
+      this.settings.hideCallback(this, Limelight.elements)
     }
   } else if (this.settings.error && typeof this.settings.error === 'function') {
-    this.settings.error('Limelight: Error this element is already hidden', this);
+    this.settings.error('Limelight: Error this element is already hidden', this)
   }
 
-  return this;
-};
+  return this
+}
 /*
@@ -399,12 +388,11 @@ Show if hidden, hide if shown.
 
-
-Limelight.prototype.toggle = function toggleLimelightVisibility() {
+Limelight.prototype.toggle = function toggleLimelightVisibility () {
   if (this.visible) {
-    this.hide();
+    this.hide()
   } else {
-    this.show();
+    this.show()
   }
 
-  return this;
-};
+  return this
+}
 /*
@@ -414,9 +402,7 @@ Move the element to the end of the body, sometime useful for popups.
 
+Limelight.prototype.detach = function moveTheElementToTheEndOfTheBody () {
+  document.body.appendChild(this.element)
+  return this
+}
 
-Limelight.prototype.detach = function moveTheElementToTheEndOfTheBody() {
-  document.body.appendChild(this.element);
-  return this;
-};
-
-var _default = Limelight;
-exports.default = _default;
+export default Limelight

package.json

@@ -56,3 +56,3 @@ {
   },
-  "version": "2.1.29"
+  "version": "2.2.0"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38980

increased by0.55%

Lines of code

799

increased by2.96%

No dependency changes