swiper - npm Package Compare versions

Comparing version 3.3.1 to 3.4.0

bower.json

 {
-  "name": "Swiper",
+  "name": "swiper",
   "repository": {
@@ -8,3 +8,3 @@ "type": "git",
   "description": "Most modern mobile touch slider and framework with hardware accelerated transitions",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "author": "Vladimir Kharlampidi",
@@ -26,3 +26,2 @@ "homepage": "http://www.idangero.us/swiper/",
   "license": ["MIT"],
-  "dependencies": {},
   "ignore": [
@@ -37,2 +36,2 @@ ".*",
   ]
-}
+}

CHANGELOG.md

 # Change Log
 
+## Swiper 3.4.0 - Released on October 16, 2016
+  * **Custom build** available. Now you can create custom swiper build using the folowing modules: effects, lazy-load, scrollbar, controller, hashnav, history, keyboard, mousewheel, parallax, zoom, a11y. Using cli `gulp custom -zoom,effects,lazy-loading`
+  * New **zoom** functionality that enables double tap and pinch to zoom slide's inner image:
+    * Required slide layout for zoom:
+      ```
+      <div class="swiper-slide">
+        <div class="swiper-zoom-container">
+          <img src="path/to/image">
+        </div>
+      </div>
+      ```
+    * New zoom parameters:
+      * `zoom` - enable zoom functionality
+      * `zoomMax` - maximum image zoom multiplier, by default is `3`
+      * `zoomMin` - minimum image zoom multiplier, by default is `1`
+      * `zoomToggle` - enable/disable zoom-in by slide's double tap
+    * `zoomMax` can be also overridden for specific slide by using `data-swiper-zoom` attribute
+  * New `swiper.enableTouchControl()` and `swiper.disableTouchControl()` methods to enable disable touch control (it toggles `onlyExternal` parameter)
+  * New `swiper.realIndex` property in addition to `swiper.activeIndex` that returns index of active slide considering loop
+  * New **History API** with new `history` parameter. It uses history pushState to set active slide URL
+  * New `hashnavWatchState` parameter to navigate through slides (when hashnav is enabled) by browser history or by setting directly hash on document location
+  * New `replaceState` parameter that work in addition to hashnav or history to replace current url state with the new one instead of adding it to history
+  * New methods `s.unsetGrabCursor()` and `s.setGrabCursor()` to enable/disable grab cursor
+  * Draggable Scrollbar now works when `simulateTouch:false
`
+  * New `normalizeSlideIndex` parameter to improve work of controller (see #1766)
+  * `lazyLoadingInPrevNextAmount` now works with `slidesPerView: 'auto'`
+  * New `passiveListeners` parameter to use passive event listeners to improve scrolling performance on mobile devices. Enabled by default
+  * New `freeModeMomentumVelocityRatio` parameter to control moment velocity
+  * Now it is possible to specify autoplay delay for every (or specific) slides by using `data-swiper-autoplay` attribute on them
+  * Lazy loading now also respects `sizes` responsive images attribute
+  * Improved mousewheel cross browser behavior (see #1797)
+  * New `mousewheelEventsTarged` parameter (by default 'container') where you can specify mousewheel events target
+  * New `onScroll` event/callback that triggers when swiping/scrolling happens with mousewheel
+  * New `touchReleaseOnEdges` parameter to release touch events on slider edge position (beginning, end) and allow for further page scrolling
+  * Multirow (slidesPerColumn) support for vertical direction, which is in this case becomes multicolumn
+  * New "swiper-slide-duplicate-active", "swiper-slide-duplicate-next", "swiper-slide-duplicate-prev" classes that will be added in loop mode to the slides representing duplicated looped slides
+  * All css classes are now configurable via new parameters: lazyLoadingClass, notificationClass, containerModifierClass, paginationClickableClass, paginationModifierClass, lazyStatusLoadingClass, lazyStatusLoadedClass, lazyPreloaderClass, notificationClass, preloaderClass, zoomContainerClass, slideDuplicateActiveClass, slideDuplicateNextClass, slideDuplicatePrevClass
+
 ## Swiper 3.3.1 - Released on February 7, 2016
@@ -7,2 +45,3 @@ * New `uniqueNavElements` parameter. If enabled (by default) and navigation elements' parameters passed as the string (like `.pagination`) then Swiper will look for such elements through child elements first. Applies for pagination, prev/next buttons and scrollbar
   * New `.reLoop()` method, which combines `.destroyLoop()` + `.createLoop()` methods with additional positioning fixes. Useful to call after you have changed `slidesPerView` parameter, it will dynamically recreate duplicated slides required for loop
+  * New `.nextButton` and `.prevButton` properties with Dom7/jQuery element with next/prev button HTML element
   * Fixed not working mousewheel control in IE 11
@@ -9,0 +48,0 @@ * Fixed issue with lazy loading images not being recalculated after window resize

gulpfile.js

@@ -12,3 +12,3 @@ (function(){
         sourcemaps = require('gulp-sourcemaps'),
-        minifyCSS = require('gulp-minify-css'),
+        cleanCSS = require('gulp-clean-css'),
         tap = require('gulp-tap'),
@@ -26,2 +26,7 @@ concat = require('gulp-concat'),
             },
+            custom: {
+                root: 'custom/',
+                styles: 'custom/css/',
+                scripts: 'custom/js/'
+            },
             dist: {
@@ -52,5 +57,7 @@ root: 'dist/',
                 'src/js/hashnav.js',
+                'src/js/history.js',
                 'src/js/keyboard.js',
                 'src/js/mousewheel.js',
                 'src/js/parallax.js',
+                'src/js/zoom.js',
                 'src/js/plugins.js',
@@ -77,5 +84,7 @@ 'src/js/emitter.js',
                 'src/js/hashnav.js',
+                'src/js/history.js',
                 'src/js/keyboard.js',
                 'src/js/mousewheel.js',
                 'src/js/parallax.js',
+                'src/js/zoom.js',
                 'src/js/plugins.js',
@@ -101,5 +110,7 @@ 'src/js/emitter.js',
                 'src/js/hashnav.js',
+                'src/js/history.js',
                 'src/js/keyboard.js',
                 'src/js/mousewheel.js',
                 'src/js/parallax.js',
+                'src/js/zoom.js',
                 'src/js/plugins.js',
@@ -116,3 +127,3 @@ 'src/js/emitter.js',
             Framework7Files : [
-                'src/js/swiper-intro-f7.js',
+                'src/js/swiper-intro-swiper.js',
                 'src/js/core.js',
@@ -124,2 +135,3 @@ 'src/js/effects.js',
                 'src/js/parallax.js',
+                'src/js/zoom.js',
                 'src/js/plugins.js',
@@ -133,2 +145,3 @@ 'src/js/emitter.js',
             pkg: require('./bower.json'),
+            modules: require('./modules.json'),
             banner: [
@@ -150,2 +163,20 @@ '/**',
                 ''].join('\n'),
+            customBanner: [
+                '/**',
+                ' * Swiper <%= pkg.version %> - Custom Build',
+                ' * <%= pkg.description %>',
+                ' * ',
+                ' * Included modules: <%= modulesList %>',
+                ' * ',
+                ' * <%= pkg.homepage %>',
+                ' * ',
+                ' * Copyright <%= date.year %>, <%= pkg.author %>',
+                ' * The iDangero.us',
+                ' * http://www.idangero.us/',
+                ' * ',
+                ' * Licensed under <%= pkg.license.join(" & ") %>',
+                ' * ',
+                ' * Released on: <%= date.month %> <%= date.day %>, <%= date.year %>',
+                ' */',
+                ''].join('\n'),
             date: {
@@ -164,3 +195,3 @@ year: new Date().getFullYear(),
         }
-        if (filename === 'swiper-intro.js' || filename === 'swiper-intro-f7.js' || filename === 'swiper-outro.js' || filename === 'dom.js' || filename === 'get-dom-lib.js' || filename === 'get-jquery.js' || filename === 'dom-plugins.js' || filename === 'swiper-proto.js') addIndent = '    ';
+        if (filename === 'swiper-intro.js' || filename === 'swiper-intro-swiper.js' || filename === 'swiper-outro.js' || filename === 'dom.js' || filename === 'get-dom-lib.js' || filename === 'get-jquery.js' || filename === 'dom-plugins.js' || filename === 'swiper-proto.js') addIndent = '    ';
         if (minusIndent) {
@@ -191,3 +222,3 @@ addIndent = addIndent.substring(4);
 
-            
+
         gulp.src(swiper.jQueryFiles)
@@ -240,4 +271,5 @@ .pipe(tap(function (file, t){
                 paths.source.styles + 'effects.less',
+                paths.source.styles + 'zoom.less',
                 paths.source.styles + 'scrollbar.less',
-                paths.source.styles + 'preloader-f7.less',
+                paths.source.styles + 'preloader-f7.less'
             ])
@@ -289,3 +321,3 @@ .pipe(concat(swiper.filename + '.framework7.less'))
             .pipe(gulp.dest(paths.dist.styles))
-            .pipe(minifyCSS({
+            .pipe(cleanCSS({
                 advanced: false,
@@ -301,2 +333,85 @@ aggressiveMerging: false,
 
+    /* =================================
+    Custom Build
+    ================================= */
+    gulp.task('custom', function () {
+        var modules = process.argv.slice(3);
+        modules = modules.toString();
+        if (modules === '') {
+            modules = [];
+        }
+        else {
+            modules = modules.substring(1).replace(/ /g, '').replace(/,,/g, ',');
+            modules = modules.split(',');
+        }
+        var modulesJs = [], modulesLess = [];
+        var i, module;
+        modulesJs.push.apply(modulesJs, swiper.modules.core_intro.js);
+        modulesLess.push.apply(modulesLess, swiper.modules.core_intro.less);
+
+        for (i = 0; i < modules.length; i++) {
+            module = swiper.modules[modules[i]];
+            if (!(module)) continue;
+
+            if (module.dependencies && module.dependencies.length > 0) {
+                modules.push.apply(modules, module.dependencies);
+            }
+            if (module.js.length > 0) {
+                modulesJs.push.apply(modulesJs, module.js);
+            }
+            if (module.less && module.less.length > 0) {
+                modulesLess.push.apply(modulesLess, module.less);
+            }
+        }
+        modulesJs.push.apply(modulesJs, swiper.modules.core_outro.js);
+        modulesLess.push.apply(modulesLess, swiper.modules.core_outro.less);
+
+        // Unique
+        var customJsList = [];
+        var customLessList = [];
+        for (i = 0; i < modulesJs.length; i++) {
+            if (customJsList.indexOf(modulesJs[i]) < 0) customJsList.push(modulesJs[i]);
+        }
+        for (i = 0; i < modulesLess.length; i++) {
+            if (customLessList.indexOf(modulesLess[i]) < 0) customLessList.push(modulesLess[i]);
+        }
+
+        // JS
+        gulp.src(customJsList)
+            .pipe(tap(function (file, t){
+                addJSIndent (file, t);
+            }))
+            .pipe(concat(swiper.filename + '.custom.js'))
+            .pipe(header(swiper.customBanner, { pkg : swiper.pkg, date: swiper.date, modulesList: modules.join(',') } ))
+            .pipe(jshint())
+            .pipe(jshint.reporter(stylish))
+            .pipe(gulp.dest(paths.custom.scripts))
+
+            .pipe(uglify())
+            .pipe(header(swiper.customBanner, { pkg : swiper.pkg, date: swiper.date, modulesList: modules.join(',') }))
+            .pipe(rename(function(path) {
+                path.basename = path.basename + '.min';
+            }))
+            .pipe(gulp.dest(paths.custom.scripts));
+
+        // CSSes
+        gulp.src(customLessList)
+            .pipe(concat(swiper.filename + '.custom.less'))
+            .pipe(less({
+                paths: [ path.join(__dirname, 'less', 'includes') ]
+            }))
+            .pipe(header(swiper.customBanner, { pkg : swiper.pkg, date: swiper.date, modulesList: modules.join(',') } ))
+            .pipe(gulp.dest(paths.custom.styles))
+
+            .pipe(cleanCSS({
+                advanced: false,
+                aggressiveMerging: false
+            }))
+            .pipe(header(swiper.customBanner, { pkg : swiper.pkg, date: swiper.date, modulesList: modules.join(',') }))
+            .pipe(rename(function(path) {
+                path.basename = path.basename + '.min';
+            }))
+            .pipe(gulp.dest(paths.custom.styles));
+    });
+
     gulp.task('watch', function () {
@@ -322,2 +437,2 @@ gulp.watch(paths.source.scripts, [ 'scripts' ]);
     gulp.task('default', [ 'server' ]);
-})();
+})();

package.js

@@ -1,2 +0,2 @@
-var version = '3.3.1';
+var version = '3.4.0';
 
@@ -3,0 +3,0 @@ Package.describe({

package.json

 {
   "name": "swiper",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "Most modern mobile touch slider and framework with hardware accelerated transitions",
   "main": "dist/js/swiper.js",
+  "style": "dist/css/swiper.css",
   "files": ["dist", "src", "*.json", "*.js"],
@@ -22,21 +23,20 @@ "repository": {
   "devDependencies": {
-    "jshint": "~2.9.1",
-    "gulp": "~3.9.0",
-    "gulp-less": "~3.0.5",
-    "gulp-connect": "~2.3.1",
-    "gulp-open": "~1.0.0",
-    "gulp-uglify": "~1.5.1",
-    "gulp-sourcemaps": "~1.6.0",
-    "gulp-minify-css": "1.2.3",
-    "gulp-jshint": "~2.0.0",
+    "jshint": "~2.9.3",
+    "gulp": "~3.9.1",
+    "gulp-less": "~3.1.0",
+    "gulp-connect": "~5.0.0",
+    "gulp-open": "~2.0.0",
+    "gulp-uglify": "~2.0.0",
+    "gulp-sourcemaps": "~2.1.1",
+    "gulp-clean-css": "2.0.13",
+    "gulp-jshint": "~2.0.1",
     "gulp-concat": "~2.6.0",
     "gulp-rename": "~1.2.2",
-    "gulp-header": "~1.7.1",
+    "gulp-header": "~1.8.8",
     "gulp-tap": "~0.1.3",
-    "jshint-stylish": "~2.1.0"
+    "jshint-stylish": "~2.2.1"
   },
   "scripts": {
     "test": "gulp build"
-  },
-  "style": "dist/css/swiper.css"
-}
+  }
+}

README.md

@@ -1,2 +0,1 @@
-[![Join the chat at https://gitter.im/nolimits4web/Swiper](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/nolimits4web/Swiper?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Build Status](https://travis-ci.org/nolimits4web/Swiper.svg?branch=master)](https://travis-ci.org/nolimits4web/Swiper)
@@ -58,3 +57,3 @@ [![devDependency Status](https://david-dm.org/nolimits4web/swiper/dev-status.svg)](https://david-dm.org/nolimits4web/swiper#info=devDependencies)
 
-All changes should be commited to `src/` files. Swiper uses LESS for CSS compliations, and concatenated JS files (look at gulpfile.js for concat files order)
+All changes should be committed to `src/` files. Swiper uses LESS for CSS compliations, and concatenated JS files (look at gulpfile.js for concat files order)
 
@@ -67,2 +66,2 @@ Swiper 2.x.x
 * [Source Files](https://github.com/nolimits4web/Swiper/tree/Swiper2/src)
-* [API](https://github.com/nolimits4web/Swiper/blob/Swiper2/API.md)
+* [API](https://github.com/nolimits4web/Swiper/blob/Swiper2/API.md)

src/js/a11y.js

@@ -52,3 +52,3 @@ // Accessibility tools
 
-    liveRegion: $('<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>'),
+    liveRegion: $('<span class="' + s.params.notificationClass + '" aria-live="assertive" aria-atomic="true"></span>'),
 
@@ -55,0 +55,0 @@ notify: function (message) {

src/js/dom-plugins.js

@@ -57,2 +57,13 @@ /*===========================
     }
+    if (!('outerWidth' in domLib.fn)) {
+        domLib.fn.outerWidth = function (includeMargins) {
+            if (this.length > 0) {
+                if (includeMargins)
+                    return this[0].offsetWidth + parseFloat(this.css('margin-right')) + parseFloat(this.css('margin-left'));
+                else
+                    return this[0].offsetWidth;
+            }
+            else return null;
+        };
+    }
 }

src/js/hashnav.js

@@ -5,4 +5,25 @@ /*=========================
 s.hashnav = {
+    onHashCange: function (e, a) {
+        var newHash = document.location.hash.replace('#', '');
+        var activeSlideHash = s.slides.eq(s.activeIndex).attr('data-hash');
+        if (newHash !== activeSlideHash) {
+            s.slideTo(s.wrapper.children('.' + s.params.slideClass + '[data-hash="' + (newHash) + '"]').index());
+        }
+    },
+    attachEvents: function (detach) {
+        var action = detach ? 'off' : 'on';
+        $(window)[action]('hashchange', s.hashnav.onHashCange);
+    },
+    setHash: function () {
+        if (!s.hashnav.initialized || !s.params.hashnav) return;
+        if (s.params.replaceState && window.history && window.history.replaceState) {
+            window.history.replaceState(null, null, ('#' + s.slides.eq(s.activeIndex).attr('data-hash') || ''));
+        } else {
+            var slide = s.slides.eq(s.activeIndex);
+            var hash = slide.attr('data-hash') || slide.attr('data-history');
+            document.location.hash = hash || '';
+        }
+    },
     init: function () {
-        if (!s.params.hashnav) return;
+        if (!s.params.hashnav || s.params.history) return;
         s.hashnav.initialized = true;
@@ -14,3 +35,3 @@ var hash = document.location.hash.replace('#', '');
             var slide = s.slides.eq(i);
-            var slideHash = slide.attr('data-hash');
+            var slideHash = slide.attr('data-hash') || slide.attr('data-history');
             if (slideHash === hash && !slide.hasClass(s.params.slideDuplicateClass)) {
@@ -21,7 +42,7 @@ var index = slide.index();
         }
+        if (s.params.hashnavWatchState) s.hashnav.attachEvents();
     },
-    setHash: function () {
-        if (!s.hashnav.initialized || !s.params.hashnav) return;
-        document.location.hash = s.slides.eq(s.activeIndex).attr('data-hash') || '';
+    destroy: function () {
+        if (s.params.hashnavWatchState) s.hashnav.attachEvents(true);
     }
 };

src/js/init.js

@@ -39,2 +39,5 @@ /*=========================
     }
+    if (s.params.zoom && s.zoom) {
+        s.zoom.init();
+    }
     if (s.params.autoplay) {
@@ -49,2 +52,9 @@ s.startAutoplay();
     }
+    // Deprecated hashnavReplaceState changed to replaceState for use in hashnav and history
+    if (s.params.hashnavReplaceState) {
+        s.params.replaceState = s.params.hashnavReplaceState;
+    }
+    if (s.params.history) {
+        if (s.history) s.history.init();
+    }
     if (s.params.hashnav) {
@@ -120,2 +130,7 @@ if (s.hashnav) s.hashnav.init();
     s.disconnectObservers();
+
+    // Destroy zoom
+    if (s.params.zoom && s.zoom) {
+        s.zoom.destroy();
+    }
     // Disable keyboard/mousewheel
@@ -130,2 +145,9 @@ if (s.params.keyboardControl) {
     if (s.params.a11y && s.a11y) s.a11y.destroy();
+    // Delete history popstate
+    if (s.params.history && !s.params.replaceState) {
+        window.removeEventListener('popstate', s.history.setHistoryPopState);
+    }
+    if (s.params.hashnav && s.hashnav)  {
+        s.hashnav.destroy();
+    }
     // Destroy callback
@@ -132,0 +154,0 @@ s.emit('onDestroy');

src/js/keyboard.js

@@ -23,3 +23,3 @@ /*=========================
         //Check that swiper should be inside of visible area of window
-        if (s.container.parents('.swiper-slide').length > 0 && s.container.parents('.swiper-slide-active').length === 0) {
+        if (s.container.parents('.' + s.params.slideClass).length > 0 && s.container.parents('.' + s.params.slideActiveClass).length === 0) {
             return;
@@ -26,0 +26,0 @@ }

src/js/lazy-load.js

@@ -12,4 +12,4 @@ /*=========================
         var slide = s.slides.eq(index);
-        var img = slide.find('.swiper-lazy:not(.swiper-lazy-loaded):not(.swiper-lazy-loading)');
-        if (slide.hasClass('swiper-lazy') && !slide.hasClass('swiper-lazy-loaded') && !slide.hasClass('swiper-lazy-loading')) {
+        var img = slide.find('.' + s.params.lazyLoadingClass + ':not(.' + s.params.lazyStatusLoadedClass + '):not(.' + s.params.lazyStatusLoadingClass + ')');
+        if (slide.hasClass(s.params.lazyLoadingClass) && !slide.hasClass(s.params.lazyStatusLoadedClass) && !slide.hasClass(s.params.lazyStatusLoadingClass)) {
             img = img.add(slide[0]);
@@ -21,7 +21,8 @@ }
             var _img = $(this);
-            _img.addClass('swiper-lazy-loading');
+            _img.addClass(s.params.lazyStatusLoadingClass);
             var background = _img.attr('data-background');
             var src = _img.attr('data-src'),
-                srcset = _img.attr('data-srcset');
-            s.loadImage(_img[0], (src || background), srcset, false, function () {
+                srcset = _img.attr('data-srcset'),
+                sizes = _img.attr('data-sizes');
+            s.loadImage(_img[0], (src || background), srcset, sizes, false, function () {
                 if (background) {
@@ -36,2 +37,6 @@ _img.css('background-image', 'url("' + background + '")');
                     }
+                    if (sizes) {
+                        _img.attr('sizes', sizes);
+                        _img.removeAttr('data-sizes');
+                    }
                     if (src) {
@@ -44,4 +49,4 @@ _img.attr('src', src);
 
-                _img.addClass('swiper-lazy-loaded').removeClass('swiper-lazy-loading');
-                slide.find('.swiper-lazy-preloader, .preloader').remove();
+                _img.addClass(s.params.lazyStatusLoadedClass).removeClass(s.params.lazyStatusLoadingClass);
+                slide.find('.' + s.params.lazyPreloaderClass + ', .' + s.params.preloaderClass).remove();
                 if (s.params.loop && loadInDuplicate) {
@@ -67,2 +72,7 @@ var slideOriginalIndex = slide.attr('data-swiper-slide-index');
         var i;
+        var slidesPerView = s.params.slidesPerView;
+        if (slidesPerView === 'auto') {
+            slidesPerView = 0;
+        }
+        if (!s.lazy.initialImageLoaded) s.lazy.initialImageLoaded = true;
         if (s.params.watchSlidesVisibility) {
@@ -74,4 +84,4 @@ s.wrapper.children('.' + s.params.slideVisibleClass).each(function () {
         else {
-            if (s.params.slidesPerView > 1) {
-                for (i = s.activeIndex; i < s.activeIndex + s.params.slidesPerView ; i++) {
+            if (slidesPerView > 1) {
+                for (i = s.activeIndex; i < s.activeIndex + slidesPerView ; i++) {
                     if (s.slides[i]) s.lazy.loadImageInSlide(i);
@@ -85,9 +95,9 @@ }
         if (s.params.lazyLoadingInPrevNext) {
-            if (s.params.slidesPerView > 1 || (s.params.lazyLoadingInPrevNextAmount && s.params.lazyLoadingInPrevNextAmount > 1)) {
+            if (slidesPerView > 1 || (s.params.lazyLoadingInPrevNextAmount && s.params.lazyLoadingInPrevNextAmount > 1)) {
                 var amount = s.params.lazyLoadingInPrevNextAmount;
-                var spv = s.params.slidesPerView;
+                var spv = slidesPerView;
                 var maxIndex = Math.min(s.activeIndex + spv + Math.max(amount, spv), s.slides.length);
                 var minIndex = Math.max(s.activeIndex - Math.max(spv, amount), 0);
                 // Next Slides
-                for (i = s.activeIndex + s.params.slidesPerView; i < maxIndex; i++) {
+                for (i = s.activeIndex + slidesPerView; i < maxIndex; i++) {
                     if (s.slides[i]) s.lazy.loadImageInSlide(i);
@@ -94,0 +104,0 @@ }

src/js/mousewheel.js

@@ -9,60 +9,57 @@ /*=========================
 if (s.params.mousewheelControl) {
-    try {
-        new window.WheelEvent('wheel');
-        s.mousewheel.event = 'wheel';
-    } catch (e) {
-        if (window.WheelEvent || (s.container[0] && 'wheel' in s.container[0])) {
-            s.mousewheel.event = 'wheel';
-        }
+    /**
+     * The best combination if you prefer spinX + spinY normalization.  It favors
+     * the older DOMMouseScroll for Firefox, as FF does not include wheelDelta with
+     * 'wheel' event, making spin speed determination impossible.
+     */
+    s.mousewheel.event = (navigator.userAgent.indexOf('firefox') > -1) ?
+        'DOMMouseScroll' :
+        isEventSupported() ?
+            'wheel' : 'mousewheel';
+}
+
+function isEventSupported() {
+    var eventName = 'onwheel';
+    var isSupported = eventName in document;
+
+    if (!isSupported) {
+        var element = document.createElement('div');
+        element.setAttribute(eventName, 'return;');
+        isSupported = typeof element[eventName] === 'function';
     }
-    if (!s.mousewheel.event && window.WheelEvent) {
 
+    if (!isSupported &&
+        document.implementation &&
+        document.implementation.hasFeature &&
+            // always returns true in newer browsers as per the standard.
+            // @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
+        document.implementation.hasFeature('', '') !== true ) {
+        // This is the only way to test support for the `wheel` event in IE9+.
+        isSupported = document.implementation.hasFeature('Events.wheel', '3.0');
     }
-    if (!s.mousewheel.event && document.onmousewheel !== undefined) {
-        s.mousewheel.event = 'mousewheel';
-    }
-    if (!s.mousewheel.event) {
-        s.mousewheel.event = 'DOMMouseScroll';
-    }
+
+    return isSupported;
 }
+
 function handleMousewheel(e) {
     if (e.originalEvent) e = e.originalEvent; //jquery fix
-    var we = s.mousewheel.event;
     var delta = 0;
     var rtlFactor = s.rtl ? -1 : 1;
 
-    //WebKits
-    if (we === 'mousewheel') {
-        if (s.params.mousewheelForceToAxis) {
-            if (s.isHorizontal()) {
-                if (Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY)) delta = e.wheelDeltaX * rtlFactor;
-                else return;
-            }
-            else {
-                if (Math.abs(e.wheelDeltaY) > Math.abs(e.wheelDeltaX)) delta = e.wheelDeltaY;
-                else return;
-            }
+    var data = normalizeWheel( e );
+
+    if (s.params.mousewheelForceToAxis) {
+        if (s.isHorizontal()) {
+            if (Math.abs(data.pixelX) > Math.abs(data.pixelY)) delta = data.pixelX * rtlFactor;
+            else return;
         }
         else {
-            delta = Math.abs(e.wheelDeltaX) > Math.abs(e.wheelDeltaY) ? - e.wheelDeltaX * rtlFactor : - e.wheelDeltaY;
+            if (Math.abs(data.pixelY) > Math.abs(data.pixelX)) delta = data.pixelY;
+            else return;
         }
     }
-    //Old FireFox
-    else if (we === 'DOMMouseScroll') delta = -e.detail;
-    //New FireFox
-    else if (we === 'wheel') {
-        if (s.params.mousewheelForceToAxis) {
-            if (s.isHorizontal()) {
-                if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) delta = -e.deltaX * rtlFactor;
-                else return;
-            }
-            else {
-                if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) delta = -e.deltaY;
-                else return;
-            }
-        }
-        else {
-            delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? - e.deltaX * rtlFactor : - e.deltaY;
-        }
+    else {
+        delta = Math.abs(data.pixelX) > Math.abs(data.pixelY) ? - data.pixelX * rtlFactor : - data.pixelY;
     }
+
     if (delta === 0) return;
@@ -75,7 +72,13 @@
             if (delta < 0) {
-                if ((!s.isEnd || s.params.loop) && !s.animating) s.slideNext();
+                if ((!s.isEnd || s.params.loop) && !s.animating) {
+                    s.slideNext();
+                    s.emit('onScroll', s, e);
+                }
                 else if (s.params.mousewheelReleaseOnEdges) return true;
             }
             else {
-                if ((!s.isBeginning || s.params.loop) && !s.animating) s.slidePrev();
+                if ((!s.isBeginning || s.params.loop) && !s.animating) {
+                    s.slidePrev();
+                    s.emit('onScroll', s, e);
+                }
                 else if (s.params.mousewheelReleaseOnEdges) return true;
@@ -116,7 +119,11 @@ }
         }
+        // Emit event
+        s.emit('onScroll', s, e);
 
+        // Stop autoplay
+        if (s.params.autoplay && s.params.autoplayDisableOnInteraction) s.stopAutoplay();
+
         // Return page scroll on edge positions
         if (position === 0 || position === s.maxTranslate()) return;
     }
-    if (s.params.autoplay) s.stopAutoplay();
 
@@ -129,3 +136,7 @@ if (e.preventDefault) e.preventDefault();
     if (!s.mousewheel.event) return false;
-    s.container.off(s.mousewheel.event, handleMousewheel);
+    var target = s.container;
+    if (s.params.mousewheelEventsTarged !== 'container') {
+        target = $(s.params.mousewheelEventsTarged);
+    }
+    target.off(s.mousewheel.event, handleMousewheel);
     return true;
@@ -136,4 +147,173 @@ };
     if (!s.mousewheel.event) return false;
-    s.container.on(s.mousewheel.event, handleMousewheel);
+    var target = s.container;
+    if (s.params.mousewheelEventsTarged !== 'container') {
+        target = $(s.params.mousewheelEventsTarged);
+    }
+    target.on(s.mousewheel.event, handleMousewheel);
     return true;
 };
+
+/**
+ * Mouse wheel (and 2-finger trackpad) support on the web sucks.  It is
+ * complicated, thus this doc is long and (hopefully) detailed enough to answer
+ * your questions.
+ *
+ * If you need to react to the mouse wheel in a predictable way, this code is
+ * like your bestest friend. * hugs *
+ *
+ * As of today, there are 4 DOM event types you can listen to:
+ *
+ *   'wheel'                -- Chrome(31+), FF(17+), IE(9+)
+ *   'mousewheel'           -- Chrome, IE(6+), Opera, Safari
+ *   'MozMousePixelScroll'  -- FF(3.5 only!) (2010-2013) -- don't bother!
+ *   'DOMMouseScroll'       -- FF(0.9.7+) since 2003
+ *
+ * So what to do?  The is the best:
+ *
+ *   normalizeWheel.getEventType();
+ *
+ * In your event callback, use this code to get sane interpretation of the
+ * deltas.  This code will return an object with properties:
+ *
+ *   spinX   -- normalized spin speed (use for zoom) - x plane
+ *   spinY   -- " - y plane
+ *   pixelX  -- normalized distance (to pixels) - x plane
+ *   pixelY  -- " - y plane
+ *
+ * Wheel values are provided by the browser assuming you are using the wheel to
+ * scroll a web page by a number of lines or pixels (or pages).  Values can vary
+ * significantly on different platforms and browsers, forgetting that you can
+ * scroll at different speeds.  Some devices (like trackpads) emit more events
+ * at smaller increments with fine granularity, and some emit massive jumps with
+ * linear speed or acceleration.
+ *
+ * This code does its best to normalize the deltas for you:
+ *
+ *   - spin is trying to normalize how far the wheel was spun (or trackpad
+ *     dragged).  This is super useful for zoom support where you want to
+ *     throw away the chunky scroll steps on the PC and make those equal to
+ *     the slow and smooth tiny steps on the Mac. Key data: This code tries to
+ *     resolve a single slow step on a wheel to 1.
+ *
+ *   - pixel is normalizing the desired scroll delta in pixel units.  You'll
+ *     get the crazy differences between browsers, but at least it'll be in
+ *     pixels!
+ *
+ *   - positive value indicates scrolling DOWN/RIGHT, negative UP/LEFT.  This
+ *     should translate to positive value zooming IN, negative zooming OUT.
+ *     This matches the newer 'wheel' event.
+ *
+ * Why are there spinX, spinY (or pixels)?
+ *
+ *   - spinX is a 2-finger side drag on the trackpad, and a shift + wheel turn
+ *     with a mouse.  It results in side-scrolling in the browser by default.
+ *
+ *   - spinY is what you expect -- it's the classic axis of a mouse wheel.
+ *
+ *   - I dropped spinZ/pixelZ.  It is supported by the DOM 3 'wheel' event and
+ *     probably is by browsers in conjunction with fancy 3D controllers .. but
+ *     you know.
+ *
+ * Implementation info:
+ *
+ * Examples of 'wheel' event if you scroll slowly (down) by one step with an
+ * average mouse:
+ *
+ *   OS X + Chrome  (mouse)     -    4   pixel delta  (wheelDelta -120)
+ *   OS X + Safari  (mouse)     -  N/A   pixel delta  (wheelDelta  -12)
+ *   OS X + Firefox (mouse)     -    0.1 line  delta  (wheelDelta  N/A)
+ *   Win8 + Chrome  (mouse)     -  100   pixel delta  (wheelDelta -120)
+ *   Win8 + Firefox (mouse)     -    3   line  delta  (wheelDelta -120)
+ *
+ * On the trackpad:
+ *
+ *   OS X + Chrome  (trackpad)  -    2   pixel delta  (wheelDelta   -6)
+ *   OS X + Firefox (trackpad)  -    1   pixel delta  (wheelDelta  N/A)
+ *
+ * On other/older browsers.. it's more complicated as there can be multiple and
+ * also missing delta values.
+ *
+ * The 'wheel' event is more standard:
+ *
+ * http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents
+ *
+ * The basics is that it includes a unit, deltaMode (pixels, lines, pages), and
+ * deltaX, deltaY and deltaZ.  Some browsers provide other values to maintain
+ * backward compatibility with older events.  Those other values help us
+ * better normalize spin speed.  Example of what the browsers provide:
+ *
+ *                          | event.wheelDelta | event.detail
+ *        ------------------+------------------+--------------
+ *          Safari v5/OS X  |       -120       |       0
+ *          Safari v5/Win7  |       -120       |       0
+ *         Chrome v17/OS X  |       -120       |       0
+ *         Chrome v17/Win7  |       -120       |       0
+ *                IE9/Win7  |       -120       |   undefined
+ *         Firefox v4/OS X  |     undefined    |       1
+ *         Firefox v4/Win7  |     undefined    |       3
+ *
+ */
+function normalizeWheel( /*object*/ event ) /*object*/ {
+    // Reasonable defaults
+    var PIXEL_STEP = 10;
+    var LINE_HEIGHT = 40;
+    var PAGE_HEIGHT = 800;
+
+    var sX = 0, sY = 0,       // spinX, spinY
+        pX = 0, pY = 0;       // pixelX, pixelY
+
+    // Legacy
+    if( 'detail' in event ) {
+        sY = event.detail;
+    }
+    if( 'wheelDelta' in event ) {
+        sY = -event.wheelDelta / 120;
+    }
+    if( 'wheelDeltaY' in event ) {
+        sY = -event.wheelDeltaY / 120;
+    }
+    if( 'wheelDeltaX' in event ) {
+        sX = -event.wheelDeltaX / 120;
+    }
+
+    // side scrolling on FF with DOMMouseScroll
+    if( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) {
+        sX = sY;
+        sY = 0;
+    }
+
+    pX = sX * PIXEL_STEP;
+    pY = sY * PIXEL_STEP;
+
+    if( 'deltaY' in event ) {
+        pY = event.deltaY;
+    }
+    if( 'deltaX' in event ) {
+        pX = event.deltaX;
+    }
+
+    if( (pX || pY) && event.deltaMode ) {
+        if( event.deltaMode === 1 ) {          // delta in LINE units
+            pX *= LINE_HEIGHT;
+            pY *= LINE_HEIGHT;
+        } else {                             // delta in PAGE units
+            pX *= PAGE_HEIGHT;
+            pY *= PAGE_HEIGHT;
+        }
+    }
+
+    // Fall-back if spin cannot be determined
+    if( pX && !sX ) {
+        sX = (pX < 1) ? -1 : 1;
+    }
+    if( pY && !sY ) {
+        sY = (pY < 1) ? -1 : 1;
+    }
+
+    return {
+        spinX: sX,
+        spinY: sY,
+        pixelX: pX,
+        pixelY: pY
+    };
+}

src/js/scrollbar.js

@@ -71,8 +71,12 @@ /*=========================
     },
+    draggableEvents: (function () {
+        if ((s.params.simulateTouch === false && !s.support.touch)) return s.touchEventsDesktop;
+        else return s.touchEvents;
+    })(),
     enableDraggable: function () {
         var sb = s.scrollbar;
         var target = s.support.touch ? sb.track : document;
-        $(sb.track).on(s.touchEvents.start, sb.dragStart);
-        $(target).on(s.touchEvents.move, sb.dragMove);
-        $(target).on(s.touchEvents.end, sb.dragEnd);
+        $(sb.track).on(sb.draggableEvents.start, sb.dragStart);
+        $(target).on(sb.draggableEvents.move, sb.dragMove);
+        $(target).on(sb.draggableEvents.end, sb.dragEnd);
     },
@@ -82,5 +86,5 @@ disableDraggable: function () {
         var target = s.support.touch ? sb.track : document;
-        $(sb.track).off(s.touchEvents.start, sb.dragStart);
-        $(target).off(s.touchEvents.move, sb.dragMove);
-        $(target).off(s.touchEvents.end, sb.dragEnd);
+        $(sb.track).off(s.draggableEvents.start, sb.dragStart);
+        $(target).off(s.draggableEvents.move, sb.dragMove);
+        $(target).off(s.draggableEvents.end, sb.dragEnd);
     },
@@ -87,0 +91,0 @@ set: function () {

src/js/swiper-proto.js

@@ -18,3 +18,11 @@ /*==================================================
         ie: window.navigator.pointerEnabled || window.navigator.msPointerEnabled,
-        ieTouch: (window.navigator.msPointerEnabled && window.navigator.msMaxTouchPoints > 1) || (window.navigator.pointerEnabled && window.navigator.maxTouchPoints > 1)
+        ieTouch: (window.navigator.msPointerEnabled && window.navigator.msMaxTouchPoints > 1) || (window.navigator.pointerEnabled && window.navigator.maxTouchPoints > 1),
+        lteIE9: (function() {
+            // create temporary DIV
+            var div = document.createElement('div');
+            // add content to tmp DIV which is wrapped into the IE HTML conditional statement
+            div.innerHTML = '<!--[if lte IE 9]><i></i><![endif]-->';
+            // return true / false value based on what will browser render
+            return div.getElementsByTagName('i').length === 1;
+        })()
     },
@@ -58,2 +66,19 @@ /*==================================================
             return ('MutationObserver' in window || 'WebkitMutationObserver' in window);
+        })(),
+
+        passiveListener: (function () {
+            var supportsPassive = false;
+            try {
+                var opts = Object.defineProperty({}, 'passive', {
+                    get: function() {
+                        supportsPassive = true;
+                    }
+                });
+                window.addEventListener('testPassiveListener', null, opts);
+            } catch (e) {}
+            return supportsPassive;
+        })(),
+
+        gestures: (function () {
+            return 'ongesturestart' in window;
         })()
@@ -60,0 +85,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

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

2206023

increased by23.71%

Number of package files

58

increased by7.41%

Lines of code

20870

increased by20.96%

No dependency changes