mini-lightbox - npm Package Compare versions

Comparing version 2.0.4 to 3.0.0

dist/mini-lightbox.min.js

 "use strict";
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _typeof2 = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
-!function (e) {
-  if ("object" == (typeof exports === "undefined" ? "undefined" : _typeof(exports)) && "undefined" != typeof module) module.exports = e();else if ("function" == typeof define && define.amd) define([], e);else {
+function _classCallCheck(e, t) {
+  if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
+}var _createClass = function () {
+  function e(e, t) {
+    for (var n = 0; n < t.length; n++) {
+      var o = t[n];o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, o.key, o);
+    }
+  }return function (t, n, o) {
+    return n && e(t.prototype, n), o && e(t, o), t;
+  };
+}(),
+    _typeof = "function" == typeof Symbol && "symbol" == _typeof2(Symbol.iterator) ? function (e) {
+  return typeof e === "undefined" ? "undefined" : _typeof2(e);
+} : function (e) {
+  return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e === "undefined" ? "undefined" : _typeof2(e);
+};!function (e) {
+  if ("object" === ("undefined" == typeof exports ? "undefined" : _typeof(exports)) && "undefined" != typeof module) module.exports = e();else if ("function" == typeof define && define.amd) define([], e);else {
     var t;t = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : this, t.MiniLightbox = e();
@@ -11,56 +26,93 @@ }
   return function e(t, n, o) {
-    function i(l, d) {
-      if (!n[l]) {
-        if (!t[l]) {
-          var c = "function" == typeof require && require;if (!d && c) return c(l, !0);if (r) return r(l, !0);var f = new Error("Cannot find module '" + l + "'");throw f.code = "MODULE_NOT_FOUND", f;
-        }var u = n[l] = { exports: {} };t[l][0].call(u.exports, function (e) {
-          var n = t[l][1][e];return i(n ? n : e);
-        }, u, u.exports, e, t, n, o);
-      }return n[l].exports;
-    }for (var r = "function" == typeof require && require, l = 0; l < o.length; l++) {
-      i(o[l]);
-    }return i;
-  }({ 1: [function (e, t, n) {
-      (function (e) {
-        function n(e, t) {
-          for (var n = document.querySelectorAll(e), o = 0; o < n.length; o++) {
-            if (n[o] === t) return !0;
-          }return !1;
-        }function o(e) {
-          var t,
-              r = e.selector || e,
-              l = document.querySelectorAll(r),
-              d = function d(e) {
-            var t,
-                n,
-                r = this.id,
-                l = i[r];r || this.setAttribute("id", r = "ml_" + Math.random().toString(36)), l ? o.open(r) : (t = document.createElement("div"), t.setAttribute("class", "ml_box"), n = document.createElement("img"), n.setAttribute("src", this.getAttribute("data-image-opened") || this.src), t.appendChild(n), t.addEventListener("click", function () {
-              o.close(r);
-            }), i[r] = { el: this, box: t, img: n, opened: !1 }, document.body.appendChild(t), o.open(r)), e.preventDefault();
-          };for (t = 0; t < l.length; ++t) {
-            new Image(l[t].getAttribute("data-image-opened"));
-          }if (e.delegation) return document.querySelector(e.delegation).addEventListener("click", function (o) {
-            for (var i = o.target, r = [i]; i;) {
-              r.push(i = i.parentNode);
-            }for (t = 0; t < r.length; ++t) {
-              var l = r[t];if (n(e.selector, l) && (i = l)) break;
-            }i && "IMG" === i.tagName && !i.parentNode.classList.contains("ml_box") && d.call(i, o);
-          });for (t = 0; t < l.length; ++t) {
-            !function (e) {
-              e.addEventListener("click", d);
-            }(l[t]);
-          }
-        }var i;e.addEventListener && (e.addEventListener("scroll", function () {
-          o.close();
-        }), e.addEventListener("keydown", function (e) {
-          27 === e.which && o.close();
-        })), o.close = function (e) {
-          if (e) i[e].opened && (i[e].opened = !1, ("function" != typeof o.customClose || o.customClose.call(i[e]) !== !1) && (i[e].box.style.display = "none"));else for (var t = Object.keys(i), n = 0; n < t.length; ++n) {
-            o.close(t[n]);
-          }
-        }, o.open = function (e) {
-          i[e].opened || (i[e].opened = !0, ("function" != typeof o.customOpen || o.customOpen.call(i[e]) !== !1) && (i[e].box.style.display = "block"));
-        }, i = o._cache = {}, t.exports = o;
+    function r(f, u) {
+      if (!n[f]) {
+        if (!t[f]) {
+          var c = "function" == typeof require && require;if (!u && c) return c(f, !0);if (i) return i(f, !0);var l = new Error("Cannot find module '" + f + "'");throw l.code = "MODULE_NOT_FOUND", l;
+        }var a = n[f] = { exports: {} };t[f][0].call(a.exports, function (e) {
+          var n = t[f][1][e];return r(n ? n : e);
+        }, a, a.exports, e, t, n, o);
+      }return n[f].exports;
+    }for (var i = "function" == typeof require && require, f = 0; f < o.length; f++) {
+      r(o[f]);
+    }return r;
+  }({ 1: [function (e, t) {
+      (function (n) {
+        var o = e("elly"),
+            r = e("idy"),
+            i = e("iterate-object"),
+            f = function () {
+          function e(t) {
+            _classCallCheck(this, e);var n = t.selector || t,
+                f = o.$$(n),
+                c = function c(t) {
+              var n = this.id;n || this.setAttribute("id", n = "ml_" + r());var i = null;if (u[n]) i = e.open(n);else {
+                var f = o("<div>", { "class": "ml_box" });f.style.display = "none";var c = o("<img>", { src: this.getAttribute("data-image-opened") || this.src });f.appendChild(c), f.addEventListener("click", function () {
+                  i = e.close(n);
+                }), u[n] = { el: this, box: f, img: c, opened: !1 }, document.body.appendChild(f), i = e.open(n);
+              }i !== !0 && t.preventDefault();
+            };if (f.forEach(function (e) {
+              return new Image(e.getAttribute("data-image-opened"));
+            }), t.delegation) {
+              var l = function () {
+                var e = function e(_e, t) {
+                  for (var n = o.$$(_e), r = 0; r < n.length; r++) {
+                    if (n[r] === t) return !0;
+                  }return !1;
+                };return { v: o(t.delegation).addEventListener("click", function (n) {
+                    for (var o = n.target, r = [o]; o;) {
+                      r.push(o = o.parentNode);
+                    }for (var i = 0; i < r.length; ++i) {
+                      var f = r[i];if (e(t.selector, f) && (o = f)) break;
+                    }o && "IMG" === o.tagName && !o.parentNode.classList.contains("ml_box") && c.call(o, n);
+                  }) };
+              }();if ("object" === ("undefined" == typeof l ? "undefined" : _typeof(l))) return l.v;
+            }i(f, function (e) {
+              return e.addEventListener("click", c);
+            });
+          }return _createClass(e, null, [{ key: "close", value: function value(t) {
+              if (!t) return void i(u, function (t) {
+                return e.close(t);
+              });var n = "string" == typeof t ? u[t] : t;if (n.opened) {
+                if ("function" == typeof e.customClose && e.customClose(n) === !1) return !0;n.opened = !1, n.box.style.display = "none";
+              }
+            } }, { key: "open", value: function value(t) {
+              var n = u[t];if (!n.opened) {
+                if ("function" == typeof e.customOpen && e.customOpen(n) === !1) return !0;n.opened = !0, n.box.style.display = "block";
+              }
+            } }]), e;
+        }(),
+            u = f._cache = {};n.addEventListener && (n.addEventListener("scroll", function () {
+          f.close();
+        }), n.addEventListener("keydown", function (e) {
+          27 === e.which && f.close();
+        })), t.exports = f;
       }).call(this, "undefined" != typeof global ? global : "undefined" != typeof self ? self : "undefined" != typeof window ? window : {});
+    }, { elly: 2, idy: 3, "iterate-object": 4 }], 2: [function (e, t) {
+      function n(e, t) {
+        return "string" == typeof e ? "<" === e.charAt(0) ? (e = document.createElement(e.slice(1, -1)), o(t || {}, function (t, n) {
+          switch (n) {case "text":
+              return void (e.textContent = t);case "html":
+              return void (e.innerHTML = t);}e.setAttribute(n, t);
+        }), e) : (t = t || document, t.querySelector(e)) : e;
+      }var o = e("iterate-object"),
+          r = e("sliced");n.$$ = function (e, t) {
+        return t = t || document, r(t.querySelectorAll(e));
+      }, t.exports = n;
+    }, { "iterate-object": 4, sliced: 5 }], 3: [function (e, t) {
+      function n(e) {
+        return e = e || 10, Math.random().toString(35).substr(2, e);
+      }t.exports = n;
+    }, {}], 4: [function (e, t) {
+      function n(e, t) {
+        var n = 0,
+            o = [];if (Array.isArray(e)) for (; n < e.length && t(e[n], n, e) !== !1; ++n) {} else if ("object" === ("undefined" == typeof e ? "undefined" : _typeof(e)) && null !== e) for (o = Object.keys(e); n < o.length && t(e[o[n]], o[n], e) !== !1; ++n) {}
+      }t.exports = n;
+    }, {}], 5: [function (e, t) {
+      t.exports = function (e, t, n) {
+        var o = [],
+            r = e.length;if (0 === r) return o;var i = 0 > t ? Math.max(0, t + r) : t || 0;for (void 0 !== n && (r = 0 > n ? n + r : n); r-- > i;) {
+          o[r - i] = e[r];
+        }return o;
+      };
     }, {}] }, {}, [1])(1);
 });

lib/index.js

 "use strict";
 
-var cache;
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
-if (global.addEventListener) {
-    global.addEventListener("scroll", function () {
-        MiniLightbox.close();
-    });
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-    global.addEventListener("keydown", function (e) {
-        if (e.which !== 27) {
-            return;
-        }
-        MiniLightbox.close();
-    });
-}
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function matchesSelector(selector, element) {
-    var all = document.querySelectorAll(selector);
-    for (var i = 0; i < all.length; i++) {
-        if (all[i] === element) {
-            return true;
-        }
-    }
-    return false;
-}
+var $ = require("elly"),
+    idy = require("idy"),
+    forEach = require("iterate-object");
 
-/**
- * MiniLightbox
- *
- * Initializes the lightbox according to the options.
- *
- * **Callbacks**:
- *
- * The following methods can be used to modify the default behavior:
- *
- *  - `Minilightbox.customOpen` (Function): If it's a function, it will be
- *    called then the lightbox is opened. If it returns `false`, the default
- *    behavior will be prevented.
- *  - `Minilightbox.customClose` (Function): If it's a function, it will be
- *    called then the lightbox is closed. If it returns `false`, the default
- *    behavior will be prevented.
- *
- * @name MiniLightbox
- * @function
- * @param {Object} options An object containing the following fields:
- *
- *  - `selector` (String): The image query selector.
- *  - `delegation` (String): The image container where to handle the delegation.
- *
- */
-function MiniLightbox(options) {
-    var selector = options.selector || options,
-        elms = document.querySelectorAll(selector),
-        clickHandler = function clickHandler(e) {
-        var id = this.id,
-            fCache = cache[id],
-            box,
-            img;
+var MiniLightbox = function () {
 
-        if (!id) {
-            this.setAttribute("id", id = "ml_" + Math.random().toString(36));
-        }
+    /**
+     * MiniLightbox
+     *
+     * Initializes the lightbox according to the options.
+     *
+     * **Callbacks**:
+     *
+     * The following methods can be used to modify the default behavior:
+     *
+     *  - `Minilightbox.customOpen` (Function): If it's a function, it will be
+     *    called then the lightbox is opened. If it returns `false`, the default
+     *    behavior will be prevented.
+     *  - `Minilightbox.customClose` (Function): If it's a function, it will be
+     *    called then the lightbox is closed. If it returns `false`, the default
+     *    behavior will be prevented.
+     *
+     * @name MiniLightbox
+     * @function
+     * @param {Object} options An object containing the following fields:
+     *
+     *  - `selector` (String): The image query selector.
+     *  - `delegation` (String): The image container where to handle the delegation.
+     *
+     */
+    function MiniLightbox(options) {
+        _classCallCheck(this, MiniLightbox);
 
-        if (fCache) {
-            MiniLightbox.open(id);
-        } else {
-            box = document.createElement("div");
-            box.setAttribute("class", "ml_box");
-            img = document.createElement("img");
-            img.setAttribute("src", this.getAttribute("data-image-opened") || this.src);
-            box.appendChild(img);
+        var selector = options.selector || options,
+            elms = $.$$(selector),
+            clickHandler = function clickHandler(e) {
+            var id = this.id;
 
-            box.addEventListener("click", function () {
-                MiniLightbox.close(id);
-            });
+            if (!id) {
+                this.setAttribute("id", id = "ml_" + idy());
+            }
 
-            cache[id] = {
-                el: this,
-                box: box,
-                img: img,
-                opened: false
-            };
+            var preventPreventingDefault = null;
+            if (cache[id]) {
+                preventPreventingDefault = MiniLightbox.open(id);
+            } else {
+                var box = $("<div>", {
+                    "class": "ml_box"
+                });
+                box.style.display = "none";
 
-            document.body.appendChild(box);
-            MiniLightbox.open(id);
-        }
+                var img = $("<img>", {
+                    src: this.getAttribute("data-image-opened") || this.src
+                });
 
-        e.preventDefault();
-    },
-        i;
+                box.appendChild(img);
+                box.addEventListener("click", function () {
+                    preventPreventingDefault = MiniLightbox.close(id);
+                });
 
-    for (i = 0; i < elms.length; ++i) {
-        new Image(elms[i].getAttribute("data-image-opened"));
-    }
+                cache[id] = {
+                    el: this,
+                    box: box,
+                    img: img,
+                    opened: false
+                };
 
-    if (options.delegation) {
-        return document.querySelector(options.delegation).addEventListener("click", function (e) {
-            var el = e.target;
-            var parents = [el];
-            while (el) {
-                parents.push(el = el.parentNode);
+                document.body.appendChild(box);
+                preventPreventingDefault = MiniLightbox.open(id);
             }
-            for (i = 0; i < parents.length; ++i) {
-                var cPar = parents[i];
-                if (matchesSelector(options.selector, cPar) && (el = cPar)) {
-                    break;
-                }
+
+            if (preventPreventingDefault !== true) {
+                e.preventDefault();
             }
+        };
 
-            if (!el || el.tagName !== 'IMG' || el.parentNode.classList.contains("ml_box")) {
-                return;
-            }
-            clickHandler.call(el, e);
+        elms.forEach(function (c) {
+            return new Image(c.getAttribute("data-image-opened"));
         });
-    }
 
-    for (i = 0; i < elms.length; ++i) {
-        (function (cEl) {
-            cEl.addEventListener("click", clickHandler);
-        })(elms[i]);
-    }
-}
+        if (options.delegation) {
+            var _ret = function () {
+                var matchesSelector = function matchesSelector(selector, element) {
+                    var all = $.$$(selector);
+                    for (var i = 0; i < all.length; i++) {
+                        if (all[i] === element) {
+                            return true;
+                        }
+                    }
+                    return false;
+                };
 
-/**
- * close
- * Closes the lightboxes.
- *
- * @name close
- * @function
- * @param {String} id The lightbox id. If not provided, it will close all the opened lightboxes.
- */
-MiniLightbox.close = function (id) {
-    if (!id) {
-        var ids = Object.keys(cache);
-        for (var i = 0; i < ids.length; ++i) {
-            MiniLightbox.close(ids[i]);
+                return {
+                    v: $(options.delegation).addEventListener("click", function (e) {
+                        var el = e.target,
+                            parents = [el];
+
+                        while (el) {
+                            parents.push(el = el.parentNode);
+                        }
+
+                        for (var i = 0; i < parents.length; ++i) {
+                            var cPar = parents[i];
+                            if (matchesSelector(options.selector, cPar) && (el = cPar)) {
+                                break;
+                            }
+                        }
+
+                        if (!el || el.tagName !== 'IMG' || el.parentNode.classList.contains("ml_box")) {
+                            return;
+                        }
+                        clickHandler.call(el, e);
+                    })
+                };
+            }();
+
+            if ((typeof _ret === "undefined" ? "undefined" : _typeof(_ret)) === "object") return _ret.v;
         }
-        return;
-    }
-    if (!cache[id].opened) {
-        return;
-    }
-    cache[id].opened = false;
 
-    if (typeof MiniLightbox.customClose === "function" && MiniLightbox.customClose.call(cache[id]) === false) {
-        return;
+        forEach(elms, function (cEl) {
+            return cEl.addEventListener("click", clickHandler);
+        });
     }
 
-    cache[id].box.style.display = "none";
-};
+    /**
+     * close
+     * Closes the lightboxes.
+     *
+     * @name close
+     * @function
+     * @param {String} id The lightbox id. If not provided, it will close all the opened lightboxes.
+     */
 
-/**
- * open
- * Opens the lightbox. This is called internally.
- *
- * @name open
- * @function
- * @param {String} id The lightbox id.
- */
-MiniLightbox.open = function (id) {
-    if (cache[id].opened) {
-        return;
-    }
-    cache[id].opened = true;
-    if (typeof MiniLightbox.customOpen === "function" && MiniLightbox.customOpen.call(cache[id]) === false) {
-        return;
-    }
-    cache[id].box.style.display = "block";
-};
 
-cache = MiniLightbox._cache = {};
+    _createClass(MiniLightbox, null, [{
+        key: "close",
+        value: function close(id) {
 
+            if (!id) {
+                forEach(cache, function (id) {
+                    return MiniLightbox.close(id);
+                });
+                return;
+            }
+
+            var obj = typeof id === "string" ? cache[id] : id;
+
+            if (!obj.opened) {
+                return;
+            }
+
+            if (typeof MiniLightbox.customClose === "function" && MiniLightbox.customClose(obj) === false) {
+                return true;
+            }
+
+            obj.opened = false;
+            obj.box.style.display = "none";
+        }
+
+        /**
+         * open
+         * Opens the lightbox. This is called internally.
+         *
+         * @name open
+         * @function
+         * @param {String} id The lightbox id.
+         */
+
+    }, {
+        key: "open",
+        value: function open(id) {
+            var obj = cache[id];
+            if (obj.opened) {
+                return;
+            }
+            if (typeof MiniLightbox.customOpen === "function" && MiniLightbox.customOpen(obj) === false) {
+                return true;
+            }
+            obj.opened = true;
+            obj.box.style.display = "block";
+        }
+    }]);
+
+    return MiniLightbox;
+}();
+
+;
+
+var cache = MiniLightbox._cache = {};
+
+if (global.addEventListener) {
+    global.addEventListener("scroll", function () {
+        MiniLightbox.close();
+    });
+
+    global.addEventListener("keydown", function (e) {
+        if (e.which !== 27) {
+            return;
+        }
+        MiniLightbox.close();
+    });
+}
+
 module.exports = MiniLightbox;

package.json

 {
   "name": "mini-lightbox",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "description": "Minimalist image lightbox",
@@ -44,3 +44,3 @@ "main": "lib/index.js",
       "<script>",
-      "    MiniLightbox(\"#myImage\");",
+      "    new MiniLightbox(\"#myImage\");",
       "</script>",
@@ -85,3 +85,3 @@ "```",
       "```js",
-      "MiniLightbox({",
+      "new MiniLightbox({",
       "    selector: \".content img\"",
@@ -106,3 +106,8 @@ "    // the common container where the images are appended",
     "index.js"
-  ]
-}
+  ],
+  "dependencies": {
+    "elly": "^1.1.2",
+    "idy": "^1.2.5",
+    "iterate-object": "^1.3.2"
+  }
+}

README.md

@@ -18,3 +18,3 @@
 <script>
-    MiniLightbox("#myImage");
+    new MiniLightbox("#myImage");
 </script>
@@ -59,3 +59,3 @@ ```
 ```js
-MiniLightbox({
+new MiniLightbox({
     selector: ".content img"
@@ -138,5 +138,7 @@ // the common container where the images are appended
 
+
 [license]: http://showalicense.com/?fullname=Ionic%C4%83%20Biz%C4%83u%20%3Cbizauionica%40gmail.com%3E%20(http%3A%2F%2Fionicabizau.net)&year=2014#license-mit
+
 [website]: http://ionicabizau.net
 [contributing]: /CONTRIBUTING.md
 [docs]: /DOCUMENTATION.md

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

22405

increased by31.04%

Lines of code

288

increased by33.95%

Number of lines in readme file

142

increased by1.43%

Worsened metrics

Dependency count

3

increased byInfinity%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedelly@^1.1.2

• + Addedidy@^1.2.5

• + Addediterate-object@^1.3.2

• + Addedelly@1.1.11(transitive)

• + Addedidy@1.2.10(transitive)

• + Addediterate-object@1.3.4(transitive)

• + Addedsliced@1.0.1(transitive)