lightbox - npm Package Compare versions

Comparing version 0.0.0 to 0.1.0

assets/scripts/lightbox.js

@@ -1,169 +0,174 @@
-(function ($, window, document) {
+'use strict';
 
-    $(function () {
+var $         = window.jQuery ? window.jQuery : require('jquery'),
+    Mousetrap = require('mousetrap'),
+    transit   = require('jquery.transit');
 
-        var $body = $('body');
+// Fix compatibility with global $ and modular transit
+if (!$.fn.transition)
+    $.fn.transition = transit.fn.transition;
 
-        var $page = $body.children();
+var Lightbox = function (options) {
 
-        var localContent = {};
+    options = options || {};
 
-        $('[data-lightbox-path]').each(function () {
-            localContent[$(this).data('lightbox-path')] = $(this).html();
-            $(this).remove();
-        });
+    this.fd           = options.fd || 300;
+    this.base_url     = options.base_url || '';
+    this.localContent = options.localContent || {};
 
-        $body.append('<div id="lightbox-over"></div><div id="lightbox-inner"><div id="lightbox-content"></div></div><div id="lightbox-loader">Een ogenblik...</div>');
+    this.isDesktop     = $(window).width() > 767;
+    this.isVisible     = false;
+    this.lastScrollpos = 0;
 
-        var lightbox = {
-            fd:            300,
-            isDesktop:     $(window).width() > 767,
-            isVisible:     false,
-            $over:         $('#lightbox-over'),
-            $inner:        $('#lightbox-inner'),
-            $page:         $page,
-            lastScrollpos: 0,
-            $loader:       $('#lightbox-loader'),
-            $content:      $('#lightbox-content'),
-            base_url:      '',
-            show_content:  function (html) {
+    this.inline_transforms = require('./inline-transforms');
+};
 
-                this.$content.html(html);
+Lightbox.prototype = {
 
-                if (window['wpTheme'] !== undefined)
-                    wpTheme.applyPlaceholders();
+    /**
+     * Applies the provided transforms
+     *
+     * @param {Object} transforms
+     */
+    applyTransforms: function (transforms) {
+        $.each(transforms, function (key, value) {
+            if (this.inline_transforms.hasOwnProperty(key))
+                this.inline_transforms[key](this, value);
+        }.bind(this));
+    },
 
-                if (lightbox.isDesktop) {
-                    var match;
-                    var patt = /<!--\s*([a-z\-]+):\s*(.*?)\s*-->/mg;
-                    while ((match = patt.exec(html)) != null) {
-                        var key = match[1];
-                        var value = match[2];
-                        if (key === 'lightbox-content-width') {
-                            this.$inner.width(value);
-                            this.$inner.find('> div').innerWidth(value);
-                        }
-                        if (key === 'lightbox-custom-classes') {
-                            this.$inner.addClass(value);
-                        }
-                    }
-                    this.$inner.stop().css({
-                        'margin-top':  -this.$inner.outerHeight() / 2,
-                        'margin-left': -this.$inner.outerWidth() / 2,
-                        'top':         $(window).scrollTop() + $(window).height() / 2,
-                        display:       'block',
-                        opacity:       0,
-                        transform:     'scale(0.6) translate(0, 40px)'
-                    }).transition({
-                        opacity: 1,
-                        scale:   1,
-                        y:       0
-                    }, lightbox.fd);
-                }
-                else {
-                    lightbox.lastScrollpos = $(window).scrollTop();
-                    lightbox.$page.hide();
-                    this.$inner.show();
-                }
+    /**
+     * Performs the transformations as specified in the html content
+     *
+     * @param {string} html
+     */
+    do_inline_transforms: function (html) {
+        var match;
+        var patt       = /<!--\s*([a-z\-]+):\s*(.*?)\s*-->/mg;
+        var transforms = {};
+        while ((match = patt.exec(html)) !== null)
+            transforms[match[1]] = match[2];
+        this.applyTransforms(transforms);
+    },
 
-                fixScroll();
-                lightbox.isVisible = true;
-                $('body').addClass("lightbox-showing");
-                var lb = this;
+    /**
+     * Desktop-specific function to be executed when new content is to be shown
+     */
+    show_content_desktop: function () {
+        var $window = $(window);
+        this.$inner.stop().css({
+            'margin-top':  -this.$inner.outerHeight() / 2,
+            'margin-left': -this.$inner.outerWidth() / 2,
+            'top':         $window.scrollTop() + $window.height() / 2,
+            display:       'block',
+            opacity:       0,
+            transform:     'scale(0.6) translate(0, 40px)'
+        }).transition({
+            opacity: 1,
+            scale:   1,
+            y:       0
+        }, this.fd);
+    },
 
-                if (window.hasOwnProperty('Mousetrap')) {
-                    Mousetrap.bind(['esc'], function (e) {
-                        if (e.preventDefault)
-                            e.preventDefault();
-                        lb.close();
-                        Mousetrap.unbind(['esc']);
-                    });
-                }
-            },
-            start_loading: function () {
-                this.$inner.fadeOut();
-            },
-            load_content:  function (target) {
-                this.$over.stop().fadeIn(lightbox.fd);
-                var matches = /@(.*)/.exec(target);
-                if (matches !== null) {
-                    var localTarget = matches[1];
-                    if (localContent.hasOwnProperty(localTarget))
-                        lightbox.show_content(localContent[localTarget]);
-                } else {
-                    var content_url = this.base_url + target;
-                    $.ajax({
-                        url:      content_url,
-                        dataType: 'html',
-                        success:  function (data) {
-                            lightbox.show_content(data);
-                        }
-                    });
-                }
-            },
-            close:         function () {
-                this.$inner.fadeOut();
-                this.$over.fadeOut(lightbox.fd);
-                $('body').removeClass("lightbox-showing");
-                lightbox.isVisible = false;
-                if (!lightbox.isDesktop) {
-                    lightbox.$page.show();
-                    $(window).scrollTop(lightbox.lastScrollpos);
-                }
-            },
-            closePending:  function () {
-                this.$inner.fadeOut();
-            }
-        };
-        var fixScroll = function () {
-            if (lightbox.isVisible && lightbox.isDesktop) {
-                var st = $(window).scrollTop();
-                var lt = lightbox.$content.offset().top;
-                var lb = lt + lightbox.$content.height();
-                var minSt = Math.max(0, Math.min(lt - 50, lb + 50 - $(window).height()));
-                var maxSt = Math.max(minSt + 10, lb + 50 - $(window).height(), lt - 50);
-                if (st < minSt)
-                    $(window).scrollTop(minSt);
-                else if (st > maxSt)
-                    $(window).scrollTop(maxSt);
-            }
-        };
+    /**
+     * Mobile-specific function to be executed when new content is to be shown
+     */
+    show_content_mobile: function () {
+        this.lastScrollpos = $(window).scrollTop();
+        this.$page.hide();
+        this.$inner.show();
+    },
 
-        //$(window).scroll(function() {
-        //    fixScroll();
-        //});
+    /**
+     * Show given HTML content in the lightbox
+     *
+     * @param {string} html
+     */
+    show_content: function (html) {
+        this.$content.html(html);
+        this.$loader.hide();
+        this.do_inline_transforms(html);
+        if (this.isDesktop)
+            this.show_content_desktop();
+        else
+            this.show_content_mobile();
 
-        $(window).resize(function () {
-            lightbox.isDesktop = $(window).width() > 767;
+        this.fixScroll();
+        this.isVisible = true;
+        $('body').addClass("lightbox-showing");
+        var lb = this;
+
+        Mousetrap.bind(['esc'], function (e) {
+            if (e.preventDefault)
+                e.preventDefault();
+            lb.close();
+            Mousetrap.unbind(['esc']);
         });
+    },
 
-        $(document).on({
-            click: function (e) {
-                var $this = $(this);
-                var target = $this.attr('href');
-                if (target !== '') {
-                    e.preventDefault();
-                    lightbox.load_content(target);
-                }
-            }
-        }, 'a[target="lightbox"]');
+    /**
+     * Fix page scroll position. Experimental.
+     */
+    fixScroll: function () {
+        if (this.isVisible && this.isDesktop) {
+            var st    = $(window).scrollTop();
+            var lt    = this.$content.offset().top;
+            var lb    = lt + this.$content.height();
+            var minSt = Math.max(0, Math.min(lt - 50, lb + 50 - $(window).height()));
+            var maxSt = Math.max(minSt + 10, lb + 50 - $(window).height(), lt - 50);
+            if (st < minSt)
+                $(window).scrollTop(minSt);
+            else if (st > maxSt)
+                $(window).scrollTop(maxSt);
+        }
+    },
 
-        $(document).on({
-            click: function (e) {
-                if ($(e.target).attr('href') == '#')
-                    e.preventDefault();
-                lightbox.close();
-            }
-        }, '.action-lightbox-close');
+    /**
+     * Load the lightbox content based on the href or lightbox content identifier
+     *
+     * @param {string} target
+     * @param {Object} [ajaxOptions] Optional object containing additional objects to be passed to $.ajax
+     * @param {string} [loaderText] If set, the text will be displayed on screen while the content is being loaded
+     */
+    load_content: function (target, ajaxOptions, loaderText) {
+        if (loaderText) {
+            this.$loader.text(loaderText).show();
+        } else this.$loader.hide();
+        this.$over.stop().fadeIn(this.fd);
+        var matches = /@(.*)/.exec(target);
+        if (matches !== null && this.localContent.hasOwnProperty(matches[1]))
+            this.show_content(this.localContent[matches[1]]);
+        else
+            $.ajax($.extend(true, {}, {
+                url:      this.base_url + target,
+                headers:  {
+                    'is-lightbox-content': 'true'
+                },
+                dataType: 'html',
+                success:  this.show_content.bind(this)
+            }, ajaxOptions));
+    },
 
-        $(document).on({
-            click: function () {
-                lightbox.closePending();
-            }
-        }, '.action-lightbox-close-pending');
+    /**
+     * Close the lightbox
+     */
+    close: function () {
+        this.$inner.fadeOut();
+        this.$over.fadeOut(this.fd);
+        $('body').removeClass("this-showing");
+        this.isVisible = false;
+        if (!this.isDesktop) {
+            this.$page.show();
+            $(window).scrollTop(this.lastScrollpos);
+        }
+    },
 
-        window.lightbox = lightbox;
+    /**
+     * Hide the lightbox, without removing the "overlay". Use this in case the page is about to navigate away
+     */
+    closePending: function () {
+        this.$inner.fadeOut();
+    }
+};
 
-    });
-
-})(jQuery, window, document);
+module.exports = Lightbox;

package.json

 {
   "name":            "lightbox",
-  "version":         "0.0.0",
-  "description":     "Lightboxes, easy as pie",
+  "version":         "0.1.0",
+  "main":            "assets/scripts/main.js",
+  "description":     "Easy as <a href=\"/foo\" target=\"lightbox\">pie</a>",
   "keywords":        [
     "lightbox"
   ],
-  "repository":      "https://github.com/jmversteeg/jannielightbox",
+  "scripts":         {
+    "pretest": "jshint assets/scripts"
+  },
+  "repository":      "https://github.com/jmversteeg/lightbox",
   "author":          "jmversteeg",
   "license":         "MIT",
   "devDependencies": {
-    "jquery":         "^2.1.4",
-    "jquery.transit": "^0.9.12",
-    "mousetrap":      "^1.5.2"
+    "babelify":              "^7.2.0",
+    "bourbon":               "^4.2.6",
+    "browserify":            "^12.0.1",
+    "browserify-handlebars": "^1.0.0",
+    "chai":                  "^3.4.1",
+    "chai-as-promised":      "^5.1.0",
+    "coveralls":             "^2.11.6",
+    "gulp":                  "^3.9.0",
+    "gulp-autoprefixer":     "^3.1.0",
+    "gulp-concat":           "^2.6.0",
+    "gulp-if":               "^2.0.0",
+    "gulp-rename":           "^1.2.2",
+    "gulp-sass":             "^2.1.1",
+    "gulp-sourcemaps":       "^1.6.0",
+    "jquery":                "^2.1.4",
+    "jquery.transit":        "^0.9.12",
+    "mocha":                 "^2.3.4",
+    "mousetrap":             "^1.5.3",
+    "sinon":                 "^1.17.2",
+    "sinon-chai":            "^2.8.0",
+    "vinyl-buffer":          "^1.0.0",
+    "vinyl-source-stream":   "^1.1.0",
+    "yargs":                 "^3.31.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

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

402902

increased by3740.09%

Number of package files

19

increased by280%

Lines of code

10910

increased by7222.15%

Worsened metrics

Dev dependency count

23

increased by666.67%

Number of low supply chain risk alerts

3

increased by200%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes