jquery-popup-overlay - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

index.js

@@ -0,1 +1,2 @@
+/* eslint-disable */
 if (!jQuery) {
@@ -2,0 +3,0 @@ console.log('jquery.popupoverlay - jQuery not defined.');

jquery.popupoverlay.js

 /*!
  * jQuery Popup Overlay
  *
- * @version 2.0.0
  * @requires jQuery v1.7.1+
  * @link http://vast-engineering.github.com/jquery-popup-overlay/
  */
-;(function ($) {
+;(function ($) { /* eslint-disable-line */
 
@@ -21,3 +20,4 @@ var $window = $(window);
     var opentimer;
-    var iOS = /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
+    var iOS = /(iPad|iPhone|iPod)/.test(navigator.userAgent);
+    var android = /(android)/i.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]";
@@ -50,3 +50,2 @@
             var options = $el.data('popupoptions');
-            var css;
 
@@ -60,13 +59,2 @@ bodymarginright = parseInt($body.css('margin-right'), 10);
 
-            if (options.type == 'tooltip') {
-                options.background = false;
-                options.scrolllock = false;
-            }
-
-            if (options.backgroundactive) {
-                options.background = false;
-                options.blur = false;
-                options.scrolllock = false;
-            }
-
             if (options.scrolllock) {
@@ -130,7 +118,10 @@ // Calculate the browser's scrollbar width dynamically
             if (iOS) {
-                $wrapper.css('cursor', 'pointer');
+                $background = $('#' + el.id + '_background');
+                $background.css('cursor', 'pointer');
+                $(options.pagecontainer).css('cursor', 'pointer');
             }
 
-            if (options.type == 'overlay') {
+            if (options.type == 'overlay' && !options.absolute) {
                 $wrapper.css('overflow','auto');
+                $wrapper[0].style.WebkitOverflowScrolling = 'touch'; // for smooth scrolling in overflow:auto divs in iOS
             }
@@ -141,2 +132,3 @@
                 visibility: 'hidden',
+                'pointer-events': 'auto', // reset pointer events back to default for a child element
                 display: 'inline-block'
@@ -168,3 +160,3 @@ });
 
-                css = {
+                $wrapper.css({
                     position: 'fixed',
@@ -176,12 +168,4 @@ width: '100%',
                     textAlign: 'center'
-                };
+                });
 
-                if(options.backgroundactive){
-                    css.position = 'absolute';
-                    css.height = '0';
-                    css.overflow = 'visible';
-                }
-
-                $wrapper.css(css);
-
                 // CSS vertical align helper
@@ -220,3 +204,3 @@ $wrapper.append('<div class="popup_align" />');
                 // Handler: mouseenter, focusin
-                $(openelement).on('mouseenter', function (event) {
+                $(openelement).on('mouseenter', function () {
                     methods.show(el, $(this).data('popup-ordinal'));
@@ -226,3 +210,3 @@ });
                 // Handler: mouseleave, focusout
-                $(openelement).on('mouseleave', function (event) {
+                $(openelement).on('mouseleave', function () {
                     methods.hide(el);
@@ -234,3 +218,3 @@ });
                 // Handler: Show popup when clicked on `open` element
-                $(document).on('click', openelement, function (event) {
+                $(document).on('click.jqp', openelement, function (event) {
                     event.preventDefault();
@@ -250,5 +234,5 @@
             if (options.detach) {
-                $el.hide().detach();
+                $el.detach();
             } else {
-                $wrapper.hide();
+                $el.hide();
             }
@@ -278,2 +262,3 @@ },
             var $background = $('#' + el.id + '_background');
+            var mustLock = false;
 
@@ -335,5 +320,17 @@ // `beforeopen` callback event
             } else {
-                $wrapper.show();
+                $el.show();
             }
 
+            if (!options.background) {
+                $wrapper.css({ 'pointer-events': 'none' });
+
+                // Android doesn't want to scroll the popup wrapper (i.e. to react to a swipe event) if it has a combination of
+                // `options.background` set to false, `pointer-events:none` and `position:fixed` on a popup wrapper, plus
+                // `overflow:visible` on body. If a scrollbar appears on the popup wrapper (i.e.popup is not fully in viewport),
+                // we locking the scrolling of background content regardless of custom options.
+                if (android && !options.absolute && !options.scrolllock && !isInViewport(el)) {
+                    mustLock = true;
+                }
+            }
+
             opentimer = setTimeout(function() {
@@ -350,3 +347,3 @@ $wrapper.css({
             // Disable background layer scrolling when popup is opened
-            if (options.scrolllock) {
+            if (options.scrolllock || mustLock) {
                 $body.css('overflow', 'hidden');
@@ -358,15 +355,2 @@ if ($body.height() > $window.height()) {
 
-            if(options.backgroundactive){
-                //calculates the vertical align
-                $el.css({
-                    top:(
-                        $window.height() - (
-                            $el.get(0).offsetHeight +
-                            parseInt($el.css('margin-top'), 10) +
-                            parseInt($el.css('margin-bottom'), 10)
-                        )
-                    )/2 +'px'
-                });
-            }
-
             $el.css({
@@ -521,9 +505,9 @@ 'visibility': 'visible',
             if (transitionsupport && $el.css('transition-duration') !== '0s') {
-                $el.one('transitionend', function(e) {
+                $el.one('transitionend', function() {
 
                     if (!($el.data('popup-visible'))) {
                         if (options.detach) {
-                            $el.hide().detach();
+                            $el.detach();
                         } else {
-                            $wrapper.hide();
+                            $el.hide();
                         }
@@ -550,5 +534,5 @@ }
                 if (options.detach) {
-                    $el.hide().detach();
+                    $el.detach();
                 } else {
-                    $wrapper.hide();
+                    $el.hide();
                 }
@@ -604,3 +588,2 @@
             var $wrapper = $('#' + el.id + '_wrapper');
-            var $background = $('#' + el.id + '_background');
 
@@ -611,2 +594,3 @@ ordinal = ordinal || 0;
             if (options.type == 'tooltip') {
+                // TODO: this static assignments should probably be moved to init method
                 $wrapper.css({
@@ -625,3 +609,3 @@ 'position': 'absolute'
 
-                var linkOffset = $tooltipanchor.offset();
+                var linkOffset = $tooltipanchor.offset() || { left: 0, top: 0 };
 
@@ -632,3 +616,3 @@ // Horizontal position for tooltip
                 } else if (options.horizontal == 'leftedge') {
-                    $wrapper.css('left', linkOffset.left + $tooltipanchor.outerWidth() - $tooltipanchor.outerWidth() +  options.offsetleft);
+                    $wrapper.css('left', linkOffset.left +  options.offsetleft);
                 } else if (options.horizontal == 'left') {
@@ -657,2 +641,3 @@ $wrapper.css('right', $window.width() - linkOffset.left  - options.offsetleft);
             } else if (options.type == 'overlay') {
+                // TODO all static assignments in this block should probably be moved to init method
 
@@ -672,2 +657,9 @@ // Horizontal position for overlay
                 }
+
+                if (options.absolute) {
+                    $wrapper.css({
+                        position: 'absolute',
+                        top: window.scrollY
+                    });
+                }
             }
@@ -717,2 +709,17 @@ },
 
+    /**
+     * Check if element is fully in viewport
+     *
+     * @param {object} el - popup instance DOM node
+     */
+    var isInViewport = function (el) {
+        var bounding = el.getBoundingClientRect();
+        return (
+            bounding.top >= 0 &&
+            bounding.left >= 0 &&
+            bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+    };
+
     // Hide popup if ESC key is pressed
@@ -817,5 +824,11 @@ $(document).on('keydown', function (event) {
             var $el = $(this);
+            var newDefaults = $.extend(true, {}, $.fn.popup.defaults);
 
+            // Set defaults for tooltips dynamically instead of implicitly, so they can be overriden with custom options.
+            if (customoptions && customoptions.type === 'tooltip') {
+                newDefaults.background = false;
+            }
+
             if (typeof customoptions === 'object') {  // e.g. $('#popup').popup({'color':'blue'})
-                var opt = $.extend({}, $.fn.popup.defaults, $el.data('popupoptions'), customoptions);
+                var opt = $.extend({}, newDefaults, $el.data('popupoptions'), customoptions);
                 $el.data('popupoptions', opt);
@@ -828,3 +841,3 @@ options = $el.data('popupoptions');
                 if (!($el.data('popupoptions'))) {
-                    $el.data('popupoptions', $.fn.popup.defaults);
+                    $el.data('popupoptions', newDefaults);
                     options = $el.data('popupoptions');
@@ -837,3 +850,3 @@ }
                 if (!($el.data('popupoptions'))) {
-                    $el.data('popupoptions', $.fn.popup.defaults);
+                    $el.data('popupoptions', newDefaults);
                     options = $el.data('popupoptions');
@@ -849,7 +862,20 @@ }
 
+    // destroy all popups
+    $.fn.popup.destroyall = function () {
+        // TODO: create tests to check if we can use `hide` method (perhaps we'll need to remove transitions)
+        // or we need another way of removing the data when destroying.
+        for(var i=0; i < visiblePopupsArray.length; i++) {
+            $('#' + visiblePopupsArray[i]).popup('hide');
+        }
+        $('.popup_wrapper').remove();
+        $('.popup_background').remove();
+        // visiblePopupsArray = []; // TODO: check if we need this for SPA and popups with fadeOut animation and scrolllock
+        $(document).off('click.jqp');
+    };
+
     $.fn.popup.defaults = {
         type: 'overlay',
+        absolute: false,
         autoopen: false,
         background: true,
-        backgroundactive: false,
         color: 'black',
@@ -885,2 +911,2 @@ opacity: '0.5',
 
-})(jQuery);
+})(jQuery); /* eslint-disable-line */

package.json

 {
   "name": "jquery-popup-overlay",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Lightweight modal popup overlay for jquery",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "start": "http-server -c-1",
+    "start:ci": "http-server -c-1 --silent",
+    "dev": "npm start -- -o",
+    "test": "start-server-and-test start http://localhost:8080 test:cypress",
+    "test:cypress": "cypress run",
+    "test:watch": "npm start & cypress open",
+    "lint": "eslint . *.js"
   },
+  "pre-commit": [
+    "lint",
+    "test"
+  ],
   "repository": {
@@ -20,3 +30,9 @@ "type": "git",
   "author": "Vast",
-  "license": "MIT"
+  "license": "MIT",
+  "devDependencies": {
+    "cypress": "^3.1.2",
+    "eslint": "^5.9.0",
+    "http-server": "^0.11.1",
+    "start-server-and-test": "^1.0.1"
+  }
 }

README.md

@@ -5,2 +5,9 @@ # jQuery Popup Overlay
 
+[![NPM version](https://img.shields.io/npm/v/jquery-popup-overlay.svg?style=flat)](https://www.npmjs.com/package/jquery-popup-overlay)
+[![NPM dependencies](https://img.shields.io/david/vast-engineering/jquery-popup-overlay.svg?style=flat)](https://david-dm.org/vast-engineering/jquery-popup-overlay)
+[![NPM dev dependencies](https://img.shields.io/david/dev/vast-engineering/jquery-popup-overlay.svg?style=flat)](https://david-dm.org/vast-engineering/jquery-popup-overlay?type=dev)
+<!-- [![NPM dev dependencies](https://david-dm.org/vast-engineering/jquery-popup-overlay/dev-status.svg)](https://www.npmjs.com/package/jquery-popup-overlay) -->
+<!-- [![Downloads](https://img.shields.io/npm/dw/jquery-popup-overlay.svg?style=flat)](https://www.npmjs.com/package/jquery-popup-overlay) -->
+<!-- [![GitHub stars](https://img.shields.io/github/stars/vast-engineering/jquery-popup-overlay.svg?label=Stars&style=flat)](https://github.com/vast-engineering/jquery-popup-overlay) -->
+
 ## Documentation & demo
@@ -10,2 +17,10 @@ [Documentation & demo](http://vast-engineering.github.io/jquery-popup-overlay/)
 ## License
-Released under the [MIT license](http://www.opensource.org/licenses/MIT).
+Released under the [MIT license](http://www.opensource.org/licenses/MIT).
+
+
+<!-- [![build status][travis-image]][travis-url] -->
+<!-- [![Build status][appveyor-image]][appveyor-url] -->
+<!-- [travis-image]: https://img.shields.io/travis/jquery-popup-overlay/jquery-popup-overlay/gh-pages.svg?style=flat -->
+<!-- [travis-url]: https://travis-ci.org/jquery-popup-overlay/jquery-popup-overlay -->
+<!-- [appveyor-image]: https://ci.appveyor.com/api/projects/status/iwxmiobcvbw3b0av/branch/gh-pages?svg=true -->
+<!-- [appveyor-url]: https://ci.appveyor.com/project/jquery-popup-overlay/jquery-popup-overlay/branch/gh-pages -->

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

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

118064

increased by59.15%

Number of package files

15

increased by150%

Lines of code

1394

increased by88.89%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

25

increased by177.78%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

4

increased byInfinity%

No dependency changes