@dotdev/limelight - npm Package Compare versions

Comparing version 2.1.27 to 2.1.28

CHANGELOG.md

@@ -0,1 +1,18 @@
+## [2.1.28](https://github.com/ButsAndCats/limelight/compare/2.1.27...2.1.28) (2018-10-16)
+
+
+### :package:
+
+* Rebuild ([f821015](https://github.com/ButsAndCats/limelight/commit/f821015))
+
+### :rotating_light:
+
+* Fixing errors ([90b9714](https://github.com/ButsAndCats/limelight/commit/90b9714))
+
+### :zap:
+
+* :sparkles: Convert back to ES6 toggle class on multiple triggers ([cce49ae](https://github.com/ButsAndCats/limelight/commit/cce49ae))
+
+
+
 ## [2.1.27](https://github.com/ButsAndCats/limelight/compare/2.1.26...2.1.27) (2018-10-15)
@@ -2,0 +19,0 @@

gulpfile.js

@@ -37,16 +37,16 @@
 // Converts source to ES5 and creates a minified version and builds to dist
-gulp.task('build', () => gulp.src(source)
-// First convert it to ecma2015
-  .pipe(babel({
-    presets: ['env']
-  }))
-// Add a non minified version to the dist
-// .pipe(gulp.dest(destination))
-  .pipe(minify())
-// If there is an error during minification this will pretty print to the console
-  .on('error', (err) => { gutil.log(gutil.colors.red('[Error]'), err.toString()) })
-// Then we can adjust the extension include min
-// .pipe(rename({ extname: '.min.js' }))
-// Then we output to the destination
-  .pipe(gulp.dest(destination)))
+// gulp.task('build', () => gulp.src(source)
+// // First convert it to ecma2015
+//   .pipe(babel({
+//     presets: ['env']
+//   }))
+// // Add a non minified version to the dist
+// // .pipe(gulp.dest(destination))
+//   .pipe(minify())
+// // If there is an error during minification this will pretty print to the console
+//   .on('error', (err) => { gutil.log(gutil.colors.red('[Error]'), err.toString()) })
+// // Then we can adjust the extension include min
+// // .pipe(rename({ extname: '.min.js' }))
+// // Then we output to the destination
+//   .pipe(gulp.dest(destination)))
 
@@ -53,0 +53,0 @@ // Add the new version to the changelog

lib/limelight.js

@@ -13,3 +13,3 @@ "use strict";
 Limelight
-version v2.1.21
+version v2.1.27
 Author: George Butter
@@ -70,4 +70,4 @@ https://github.com/ButsAndCats/limelight
 
-  this.outerElement = this.element.querySelector("".concat(this.settings.outerSelector));
-  this.closeElements = this.element.querySelectorAll("[data-close]");
+  this.outerElement = this.element.querySelector(this.settings.outerSelector);
+  this.closeElements = this.element.querySelectorAll('[data-close]');
   this.target = target;
@@ -251,4 +251,8 @@
     if (this.settings.triggerClass) {
-      var triggerElement = document.querySelector("[data-target=\"".concat(this.target, "\"]"));
-      Limelight.addClass(triggerElement, 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);
+      }
     } // If slide is set to true slide the element down.
@@ -281,4 +285,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 (var _elem = 0; _elem < this.closeElements.length; _elem += 1) {
+        this.closeElements[_elem].addEventListener('click', Limelight.closeEvent.bind(this));
       }
@@ -347,10 +351,15 @@ }
     if (this.settings.triggerClass) {
-      var triggerElement = document.querySelector("[data-target=\"".concat(this.target, "\"]"));
-      Limelight.removeClass(triggerElement, 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);
+      }
+    } // 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 elem = 0; elem < this.closeElements.length; elem += 1) {
-        this.closeElements[elem].addEventListener('click', Limelight.closeEvent.bind(this));
+      for (var _elem2 = 0; _elem2 < this.closeElements.length; _elem2 += 1) {
+        this.closeElements[_elem2].addEventListener('click', Limelight.closeEvent.bind(this));
       }
@@ -357,0 +366,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.22
+version v2.1.27
 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',
@@ -60,67 +51,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("".concat(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
+}
 /*
@@ -131,20 +119,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()
+}
 /*
@@ -154,12 +141,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()
   }
-};
+}
 /*
@@ -169,9 +155,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()
   }
-};
+}
 /*
@@ -181,37 +166,35 @@ Build the event listeners
 
+Limelight.prototype.buildEventListeners = function bindLimelightEventListeners () {
+  const allTriggers = document.querySelectorAll(`[data-trigger][data-target="${this.target}"]`)
 
-Limelight.prototype.buildEventListeners = function bindLimelightEventListeners() {
-  var allTriggers = document.querySelectorAll("[data-trigger][data-target=\"".concat(this.target, "\"]"));
+  const clickFunction = function (event) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.triggerElement = event.currentTarget
+    const target = this.triggerElement.dataset.target
+    this.eventHandler(event, target)
+  }.bind(this)
 
-  var clickFunction = function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.triggerElement = event.currentTarget;
-    var target = this.triggerElement.dataset.target;
-    this.eventHandler(event, target);
-  }.bind(this);
+  const hoverFunction = function (event) {
+    event.preventDefault()
+    event.stopPropagation()
+    const target = event.currentTarget.dataset.target
+    this.eventHandler(event, target, 'show')
+  }.bind(this)
 
-  var hoverFunction = function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    var target = event.currentTarget.dataset.target;
-    this.eventHandler(event, target, 'show');
-  }.bind(this);
+  for (let trigger = 0; trigger < allTriggers.length; trigger += 1) {
+    allTriggers[trigger].addEventListener('click', clickFunction)
 
-  for (var trigger = 0; trigger < allTriggers.length; trigger += 1) {
-    allTriggers[trigger].addEventListener('click', clickFunction);
-
     if (this.settings.hover) {
-      allTriggers[trigger].addEventListener('mouseenter', hoverFunction);
+      allTriggers[trigger].addEventListener('mouseenter', hoverFunction)
     }
   } // 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))
     }
   }
-};
+}
 /*
@@ -221,10 +204,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)
   }
-};
+}
 /*
@@ -234,10 +216,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)
   }
-};
+}
 /*
@@ -247,4 +228,3 @@ Show the popup element
 
-
-Limelight.prototype.show = function showTheElement() {
+Limelight.prototype.show = function showTheElement () {
   // Check if the element is visible or not.
@@ -254,32 +234,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 triggerElement = document.querySelector("[data-target=\"".concat(this.target, "\"]"));
-      Limelight.addClass(triggerElement, 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)
     }
@@ -289,4 +267,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))
       }
@@ -297,68 +275,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 triggerElement = document.querySelector("[data-target=\"".concat(this.target, "\"]"));
-      Limelight.removeClass(triggerElement, 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 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))
       }
@@ -369,15 +348,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
+}
 /*
@@ -387,12 +365,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
+}
 /*
@@ -402,9 +379,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.27"
+  "version": "2.1.28"
 }

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

37267

increased by1.44%

Lines of code

763

increased by0.66%

No dependency changes