jquery-shinybox - npm Package Compare versions

Comparing version 4.0.1 to 5.0.0

bower.json

 {
   "name": "shinybox",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "main": "source/jquery.shinybox.js"
 }

package.json

 {
   "name": "jquery-shinybox",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

source/jquery.shinybox.js

@@ -6,3 +6,3 @@ /*---------------------------------------------------------------------------------------------
 @github       http://github.com/One-com/shinybox
-@version      4.0.1
+@version      5.0.0
 @license      MIT License
@@ -54,16 +54,10 @@
             useCSS: true,
-            useSVG: true,
-
-            removeBarsOnMobile: false,
+            noTitleCaptionBox: false,
             hideCloseButtonOnMobile: false,
             loopAtEnd: false,
+            showNavigationsOnMobile: false,
 
             initialIndexOnArray: 0,
-            hideBarsDelay: 3000,
             sort: null,
 
-            closePlacement: 'bottom',
-            captionPlacement: 'top',
-            navigationPlacement: 'bottom',
-
             videoMaxWidth: 1140,
@@ -141,3 +135,4 @@ autoplayVideos: false,
                             href: $slideElement.attr('href') || null,
-                            title: $slideElement.attr('title') || null
+                            title: $slideElement.attr('title') || null,
+                            caption: $slideElement.attr('caption') || null
                         };
@@ -159,3 +154,3 @@ });
                     self.destroy();
-                    $selectedElements = $(selector);
+                    $selectedElements = element;
                     if (settings.sort) {
@@ -189,3 +184,11 @@ $selectedElements.sort(settings.sort);
             this.closeButton = $('<a class="shinybox-close" />');
-            this.caption = $('<div class="shinybox-caption" />');
+            this.captionBox = $('<div class="shinybox-caption captionTitle"></div>');
+            
+            this.caption = $('<p class="caption"></p>');
+            this.title = $('<p class="title"></p>');
+            
+            this.captionBox.append(this.title, this.caption);
+
+            this.navigationContainer = $('<div class="navigationContainer"></div>')
+
             this.slider = $('<div class="shinybox-slider"></div>');
@@ -195,32 +198,20 @@
             this.nextButton = $('<a class="shinybox-next" />');
-            this.navigationButtons = this.prevButton.add(this.nextButton);
+            this.navigationContainer.append(this.prevButton, this.nextButton);
 
-            this.topBar = $('<div class="shinybox-top" />');
-            this.bottomBar = $('<div class="shinybox-bottom" />');
-            this.bars = this.topBar.add(this.bottomBar);
+            this.overlay.append(this.slider, this.closeButton, this.captionBox, this.navigationContainer);
 
-            var bars = {
-                top: [],
-                bottom: []
-            };
+            if (isMobile) {
+                this.overlay.addClass("mobile-view");
+            }
+            
+            if (this.settings.noTitleCaptionBox) {
+                this.overlay.addClass("noTitleCaptionBox");
+            }
 
-            bars[this.settings.closePlacement].push(this.closeButton);
-            if(this.settings.captionPlacement === this.settings.navigationPlacement) {
-                bars[this.settings.captionPlacement].push(this.prevButton, this.caption, this.nextButton);
-            } else {
-                bars[this.settings.captionPlacement].push(this.caption);
-                bars[this.settings.navigationPlacement].push(this.prevButton, this.nextButton);
+            if (!this.settings.showNavigationsOnMobile) {
+                this.navigationContainer.addClass("hideMe");
             }
 
-            this.topBar.append(bars.top);
-            this.bottomBar.append(bars.bottom);
-            this.overlay.append(this.slider, this.topBar, this.bottomBar);
             $body.append(this.overlay);
 
-            if (supportSVG && this.settings.useSVG === true) {
-                this.navigationButtons.add(this.closeButton).css({
-                    'background-image': this.closeButton.css('background-image').replace('png', 'svg')
-                });
-            }
-
             this.slides.forEach(function () {
@@ -233,14 +224,2 @@ this.slider.append('<div class="slide"></div>');
 
-            if(this.topBar.is(':empty')) {
-                this.topBar.remove();
-            }
-            if(this.bottomBar.is(':empty')) {
-                this.bottomBar.remove();
-            }
-            if (isMobile && this.settings.removeBarsOnMobile) {
-                this.bars.remove();
-            } else {
-                this.setupBarAnimations();
-            }
-
             this.setupButtonNavigation();
@@ -265,126 +244,9 @@ this.setupGestureNavigation();
             this.overlay.css(dimensions);
-            if (this.settings.hideBarsDelay === 0) {
-                this.slider.css({
-                    top: '50px',
-                    height: (dimensions.height - 100) + 'px'
-                });
-            } else {
-                this.slider.css({
-                    top: 0,
-                    height: '100%'
-                });
-            }
         };
 
-        /**
-         * Animate navigation and top bars
-         */
-        UI.prototype.setupBarAnimations = function () {
-            var self = this;
-            this.showBars();
-            this.hideBarsAfterDelay();
 
-            this.slider.click(function (e) {
-                self.toggleBars();
-            });
-
-            this.bottomBar.hover(
-                function () {
-                    self.showBars();
-                    self.bars.addClass('force-visible-bars');
-                    self.cancelDelayedHideBars();
-                },
-                function () {
-                    self.bars.removeClass('force-visible-bars');
-                    self.hideBarsAfterDelay();
-                }
-            );
-        };
-
-        /**
-         * Show navigation and title bars
-         */
-        UI.prototype.showBars = function () {
-            var self = this;
-            if (this.doCssTrans()) {
-                this.bars.addClass('visible-bars');
-            } else {
-                this.topBar.animate({
-                    top: 0
-                }, 500);
-                this.bottomBar.animate({
-                    bottom: 0
-                }, 500);
-
-                setTimeout(function () {
-                    self.bars.addClass('visible-bars');
-                }, 1000);
-            }
-        };
-
-        /**
-         * Hide navigation and title bars
-         */
-        UI.prototype.hideBars = function () {
-            var self = this;
-            if (this.doCssTrans()) {
-                this.bars.removeClass('visible-bars');
-            } else {
-                this.topBar.animate({
-                    top: '-50px'
-                }, 500);
-                this.bottomBar.animate({
-                    bottom: '-50px'
-                }, 500);
-
-                setTimeout(function () {
-                    self.bars.removeClass('visible-bars');
-                }, 1000);
-            }
-        };
-
-        /**
-         * Toggle navigation and title bars
-         */
-        UI.prototype.toggleBars = function () {
-            if (!this.bars.hasClass('visible-bars')) {
-                this.showBars();
-                this.hideBarsAfterDelay();
-            } else {
-                this.cancelDelayedHideBars();
-                this.hideBars();
-            }
-        };
-
-        /**
-         * Set timer to hide the action bars
-         */
-        UI.prototype.hideBarsAfterDelay = function () {
-            var self = this;
-            if (this.settings.hideBarsDelay > 0) {
-                this.cancelDelayedHideBars();
-                this.timeout = window.setTimeout(
-                    function () {
-                        self.hideBars();
-                    },
-                    this.settings.hideBarsDelay
-                );
-            }
-        };
-
-        /**
-         * Clear timer to hide the action bars
-         */
-        UI.prototype.cancelDelayedHideBars = function () {
-            window.clearTimeout(this.timeout);
-            this.timeout = null;
-        };
-
-        /**
-         * Navigation events : go to next slide, go to prevous slide and close
-         */
         UI.prototype.setupButtonNavigation = function () {
             var self = this;
             if (this.slides.length < 2) {
-                this.navigationButtons.hide();
+                this.navigationContainer.hide();
             } else {
@@ -395,3 +257,2 @@ this.prevButton.on('click touchend', function (e) {
                     self.getPrev();
-                    self.hideBarsAfterDelay();
                 });
@@ -402,3 +263,2 @@ this.nextButton.on('click touchend', function (e) {
                     self.getNext();
-                    self.hideBarsAfterDelay();
                 });
@@ -439,3 +299,3 @@ }
             var endCoords = {};
-
+            
             var touchMoveEventHandler = function (e) {
@@ -445,2 +305,3 @@ e.preventDefault();
                 endCoords = e.originalEvent.targetTouches[0];
+                
 
@@ -479,2 +340,4 @@ if (!hSwipe) {
 
+            
+            var touchPoints = null;
             this.overlay.on('touchstart', function (e) {
@@ -490,2 +353,3 @@ if(e.originalEvent.touches && e.originalEvent.touches.length > 1) {
                 endCoords = e.originalEvent.targetTouches[0];
+                touchPoints = e.originalEvent.targetTouches;
                 startCoords.pageX = e.originalEvent.targetTouches[0].pageX;
@@ -511,2 +375,3 @@ startCoords.pageY = e.originalEvent.targetTouches[0].pageY;
                 hDistance = endCoords.pageX - startCoords.pageX;
+                var hasOneTouchPoint = touchPoints.length === 1;
 
@@ -516,3 +381,3 @@ if (vSwipe) {
                     vSwipe = false;
-                    if (Math.abs(vDistance) >= 2 * vSwipMinDistance && Math.abs(vDistance) > Math.abs(vDistanceLast)) {
+                    if (Math.abs(vDistance) >= 2 * vSwipMinDistance && Math.abs(vDistance) > Math.abs(vDistanceLast) && hasOneTouchPoint) {
                         var vOffset = vDistance > 0 ? self.slider.height() : -self.slider.height();
@@ -533,12 +398,9 @@ self.slider.animate({
                     hSwipe = false;
-                    if( hDistance >= hSwipMinDistance && hDistance >= hDistanceLast) {
+                    if( hDistance >= hSwipMinDistance && hDistance >= hDistanceLast && hasOneTouchPoint) {
                         // swipeLeft
                         self.getPrev();
-                    } else if ( hDistance <= -hSwipMinDistance && hDistance <= hDistanceLast) {
+                    } else if ( hDistance <= -hSwipMinDistance && hDistance <= hDistanceLast && hasOneTouchPoint) {
                         // swipeRight
                         self.getNext();
                     }
-                } else {
-                    // tap
-                    self.toggleBars();
                 }
@@ -640,3 +502,4 @@
             if(!this.settings.loopAtEnd) {
-                this.navigationButtons.removeClass('disabled');
+                this.prevButton.removeClass('disabled');
+                this.nextButton.removeClass('disabled');
                 if (index === 0) {
@@ -659,3 +522,10 @@ this.prevButton.addClass('disabled');
             var title = this.slides[index].title;
-            this.caption.text(title || '');
+            var caption = this.slides[index].caption;
+            if (!title && !caption) {
+                this.captionBox.addClass("noTitleCaption");
+            } else {
+                this.captionBox.removeClass("noTitleCaption");
+            }
+            this.caption.text(caption || '');
+            this.title.text(title || '');
         };
@@ -662,0 +532,0 @@

New alerts

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

Worsened metrics

Total package byte prevSize

187755

-1.45%

Number of package files

18

-5.26%

Lines of code

1640

-6.5%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes