jquery-popup-overlay - npm Package Compare versions

Comparing version 1.7.4 to 2.0.0

bower.json

 {
   "name": "jquery-popup-overlay",
   "main": "index.js",
-  "version": "1.7.4",
+  "version": "2.0.0",
   "homepage": "https://github.com/vast-engineering/jquery-popup-overlay",
@@ -6,0 +6,0 @@ "authors": [

jquery.popupoverlay.js

 /*!
  * jQuery Popup Overlay
  *
- * @version 1.7.4
+ * @version 2.0.0
  * @requires jQuery v1.7.1+
@@ -18,6 +18,7 @@ * @link http://vast-engineering.github.com/jquery-popup-overlay/
     var closesuffix = '_close';
-    var stack = [];
+    var visiblePopupsArray = [];
     var transitionsupport = null;
     var opentimer;
     var iOS = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
+    var focusableElementsString = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]";
 
@@ -87,4 +88,30 @@ var methods = {
 
-            $body.prepend(el);
+            if ((options.background) && (!$('#' + el.id + '_background').length)) {
 
+                $body.append('<div id="' + el.id + '_background" class="popup_background"></div>');
+
+                var $background = $('#' + el.id + '_background');
+
+                $background.css({
+                    opacity: 0,
+                    visibility: 'hidden',
+                    backgroundColor: options.color,
+                    position: 'fixed',
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0
+                });
+
+                if (options.setzindex && !options.autozindex) {
+                    $background.css('z-index', '100000');
+                }
+
+                if (options.transition) {
+                    $background.css('transition', options.transition);
+                }
+            }
+
+            $body.append(el);
+
             $el.wrap('<div id="' + el.id + '_wrapper" class="popup_wrapper" />');
@@ -131,28 +158,2 @@
 
-            if ((options.background) && (!$('#' + el.id + '_background').length)) {
-
-                $body.prepend('<div id="' + el.id + '_background" class="popup_background"></div>');
-
-                var $background = $('#' + el.id + '_background');
-
-                $background.css({
-                    opacity: 0,
-                    visibility: 'hidden',
-                    backgroundColor: options.color,
-                    position: 'fixed',
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                    left: 0
-                });
-
-                if (options.setzindex && !options.autozindex) {
-                    $background.css('z-index', '100000');
-                }
-
-                if (options.transition) {
-                    $background.css('transition', options.transition);
-                }
-            }
-
             if (options.type == 'overlay') {
@@ -175,3 +176,3 @@ $el.css({
                 if(options.backgroundactive){
-                    css.position = 'relative';
+                    css.position = 'absolute';
                     css.height = '0';
@@ -238,2 +239,6 @@ css.overflow = 'visible';
 
+            if (options.closebutton) {
+                methods.addclosebutton(el);
+            }
+
             if (options.detach) {
@@ -274,5 +279,5 @@ $el.hide().detach();
 
-            // Add popup id to popup stack
+            // Add popup id to visiblePopupsArray
             setTimeout(function() {
-                stack.push(el.id);
+                visiblePopupsArray.push(el.id);
             }, 0);
@@ -334,3 +339,3 @@
                 $('html').addClass('popup_visible').addClass('popup_visible_' + el.id);
-                $el.addClass('popup_content_visible');
+                $wrapper.addClass('popup_wrapper_visible');
             }, 20); // 20ms required for opening animation to occur in FF
@@ -355,3 +360,3 @@
                         )
-                    )/2 +'px',
+                    )/2 +'px'
                 });
@@ -423,2 +428,9 @@ }
             }
+
+            // Handler: Reposition tooltip when window is resized
+            if (options.type == 'tooltip') {
+                $(window).on('resize.' + el.id, function () {
+                    methods.reposition(el, ordinal);
+                });
+            }
         },
@@ -429,5 +441,14 @@
          *
-         * @param {object} el - popup instance DOM node
+         * @param object el - popup instance DOM node
+         * @param boolean outerClick - click on the outer content below popup
          */
-        hide: function (el) {
+        hide: function (el, outerClick) {
+            // Get index of popup ID inside of visiblePopupsArray
+            var popupIdIndex = $.inArray(el.id, visiblePopupsArray);
+
+            // If popup is not opened, ignore the rest of the function
+            if (popupIdIndex === -1) {
+                return;
+            }
+
             if(opentimer) clearTimeout(opentimer);
@@ -443,4 +464,3 @@
 
-
-            if (stack.length === 1) {
+            if (visiblePopupsArray.length === 1) {
                 $('html').removeClass('popup_visible').removeClass('popup_visible_' + el.id);
@@ -453,11 +473,11 @@ } else {
 
-            // Remove last opened popup from the stack
-            stack.pop();
+            // Remove popup from the visiblePopupsArray
+            visiblePopupsArray.splice(popupIdIndex, 1);
 
-            if($('html').hasClass('popup_content_visible')) {
-                $el.removeClass('popup_content_visible');
+            if($wrapper.hasClass('popup_wrapper_visible')) {
+                $wrapper.removeClass('popup_wrapper_visible');
             }
 
-            if (options.keepfocus) {
-                // Focus back on saved element
+            // Focus back on saved element
+            if (options.keepfocus && !outerClick) {
                 setTimeout(function() {
@@ -508,5 +528,9 @@ if ($($el.data('focusedelementbeforepopup')).is(':visible')) {
 
-                    // Re-enable scrolling of background layer
+                    // Re-enable scrolling of background layer, if needed
                     if (options.scrolllock) {
                         setTimeout(function() {
+                            if ($.grep(visiblePopupsArray, function(eid) { return $("#"+eid).data('popupoptions').scrolllock }).length) {
+                                // Some "scolllock=true" popup is currently visible, leave scrolling disabled
+                                return;
+                            }
                             $body.css({
@@ -528,5 +552,9 @@ overflow: 'visible',
 
-                // Re-enable scrolling of background layer
+                // Re-enable scrolling of background layer, if needed
                 if (options.scrolllock) {
                     setTimeout(function() {
+                        if ($.grep(visiblePopupsArray, function(eid) { return $("#"+eid).data('popupoptions').scrolllock }).length) {
+                            // Some "scrolllock=true" popup is currently visible, leave scrolling disabled
+                            return;
+                        }
                         $body.css({
@@ -542,2 +570,5 @@ overflow: 'visible',
 
+            if (options.type == 'tooltip') {
+                $(window).off('resize.' + el.id);
+            }
         },
@@ -635,2 +666,22 @@
             }
+        },
+
+        /**
+         * Add-close-button method
+         *
+         * @param {object} el - popup instance DOM node
+         */
+        addclosebutton: function (el) {
+            var genericCloseButton;
+
+            if ($(el).data('popupoptions').closebuttonmarkup) {
+                genericCloseButton = $(options.closebuttonmarkup).addClass(el.id + '_close');
+            } else {
+                genericCloseButton = '<button class="popup_close ' + el.id + '_close" title="Close" aria-label="Close"><span aria-hidden="true">×</span></button>';
+            }
+
+            if ($(el).data('popup-initialized')){
+                $(el).append(genericCloseButton);
+            }
+
         }
@@ -649,4 +700,7 @@
         var options = $(el).data('popupoptions');
-        var openelement =  (options.openelement) ? options.openelement : ('.' + el.id + opensuffix);
-        var elementclicked = $(openelement + '[data-popup-ordinal="' + ordinal + '"]');
+        var openelement;
+        var elementclicked;
+        if (typeof options === 'undefined') return;
+        openelement =  options.openelement ? options.openelement : ('.' + el.id + opensuffix);
+        elementclicked = $(openelement + '[data-popup-ordinal="' + ordinal + '"]');
         if (typeof func == 'function') {
@@ -659,4 +713,4 @@ func.call($(el), el, elementclicked);
     $(document).on('keydown', function (event) {
-        if(stack.length) {
-            var elementId = stack[stack.length - 1];
+        if(visiblePopupsArray.length) {
+            var elementId = visiblePopupsArray[visiblePopupsArray.length - 1];
             var el = document.getElementById(elementId);
@@ -672,8 +726,8 @@
     $(document).on('click', function (event) {
-        if(stack.length) {
-            var elementId = stack[stack.length - 1];
+        if(visiblePopupsArray.length) {
+            var elementId = visiblePopupsArray[visiblePopupsArray.length - 1];
             var el = document.getElementById(elementId);
             var closeButton = ($(el).data('popupoptions').closeelement) ? $(el).data('popupoptions').closeelement : ('.' + el.id + closesuffix);
 
-            // Click on Close button
+            // If Close button clicked
             if ($(event.target).closest(closeButton).length) {
@@ -684,9 +738,16 @@ event.preventDefault();
 
-            // Click outside of popup
-            if ($(el).data('popupoptions').blur && !$(event.target).closest('#' + elementId).length && event.which !== 2) {
+            // If clicked outside of popup
+            if ($(el).data('popupoptions') && $(el).data('popupoptions').blur && !$(event.target).closest('#' + elementId).length && event.which !== 2 && $(event.target).is(':visible')) {
 
-                methods.hide(el);
+                if ($(el).data('popupoptions').background) {
+                    // If clicked on popup cover
+                    methods.hide(el);
 
-                if ($(el).data('popupoptions').type === 'overlay') {
-                    event.preventDefault(); // iOS will trigger click on the links below the overlay when clicked on the overlay if we don't prevent default action
+                    // Older iOS/Safari will trigger a click on the elements below the cover,
+                    // when tapping on the cover, so the default action needs to be prevented.
+                    event.preventDefault();
+
+                } else {
+                    // If clicked on outer content
+                    methods.hide(el, true);
                 }
@@ -698,11 +759,44 @@ }
     // Keep keyboard focus inside of popup
-    $(document).on('focusin', function(event) {
-        if(stack.length) {
-            var elementId = stack[stack.length - 1];
+    $(document).on('keydown', function(event) {
+        if(visiblePopupsArray.length && event.which == 9) {
+
+            // If tab or shift-tab pressed
+            var elementId = visiblePopupsArray[visiblePopupsArray.length - 1];
             var el = document.getElementById(elementId);
 
-            if ($(el).data('popupoptions').keepfocus) {
-                if (!el.contains(event.target)) {
-                    event.stopPropagation();
-                    el.focus();
+            // Get list of all children elements in given object
+            var popupItems = $(el).find('*');
+
+            // Get list of focusable items
+            var focusableItems = popupItems.filter(focusableElementsString).filter(':visible');
+
+            // Get currently focused item
+            var focusedItem = $(':focus');
+
+            // Get the number of focusable items
+            var numberOfFocusableItems = focusableItems.length;
+
+            // Get the index of the currently focused item
+            var focusedItemIndex = focusableItems.index(focusedItem);
+
+            // If popup doesn't contain focusable elements, focus popup itself
+            if (numberOfFocusableItems === 0) {
+                $(el).focus();
+                event.preventDefault();
+            } else {
+                if (event.shiftKey) {
+                    // Back tab
+                    // If focused on first item and user preses back-tab, go to the last focusable item
+                    if (focusedItemIndex === 0) {
+                        focusableItems.get(numberOfFocusableItems - 1).focus();
+                        event.preventDefault();
+                    }
+
+                } else {
+                    // Forward tab
+                    // If focused on the last item and user preses tab, go to the first focusable item
+                    if (focusedItemIndex == numberOfFocusableItems - 1) {
+                        focusableItems.get(0).focus();
+                        event.preventDefault();
+                    }
                 }
@@ -719,6 +813,6 @@ }
 
-            $el = $(this);
+            var $el = $(this);
 
             if (typeof customoptions === 'object') {  // e.g. $('#popup').popup({'color':'blue'})
-                var opt = $.extend({}, $.fn.popup.defaults, customoptions);
+                var opt = $.extend({}, $.fn.popup.defaults, $el.data('popupoptions'), customoptions);
                 $el.data('popupoptions', opt);
@@ -766,2 +860,4 @@ options = $el.data('popupoptions');
         scrolllock: false,
+        closebutton: false,
+        closebuttonmarkup: null,
         keepfocus: true,
@@ -768,0 +864,0 @@ focuselement: null,

package.json

 {
   "name": "jquery-popup-overlay",
-  "version": "1.7.4",
+  "version": "2.0.0",
   "description": "Lightweight modal popup overlay for jquery",
@@ -5,0 +5,0 @@ "main": "index.js",

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a 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

Improved metrics

Total package byte prevSize

74185

increased by27.81%

Lines of code

738

increased by12.33%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes