From 6674a4f203d6fd21edde39387c86521f06536856 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 12:43:38 +0100 Subject: [PATCH 01/23] Linting CSS --- static/css/base.css | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index ed32ea4..2fa0038 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -56,7 +56,7 @@ 0. CSS Reset & Normalize =========================================== */ -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, bbbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0 } +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0 } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; @@ -181,9 +181,14 @@ hr { text-align: center; margin: 3.2rem auto; } -h2 + hr, h3 + hr {margin-bottom: 4.8rem; + +h2 + hr, +h3 + hr { + margin-bottom: 4.8rem; } -p + hr {margin-bottom: 4rem; + +p + hr { + margin-bottom: 4rem; } /* @@ -205,7 +210,7 @@ i { font-style: italic; } -bbbr, +abbr, acronym { cursor: help; } @@ -238,7 +243,6 @@ img { } img:hover { - filter: alpha(opacity=9000); opacity: 0.90; filter: alpha(opacity=90); } From f6ccd391588bd4400a989498e669a4857b49145d Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 12:43:59 +0100 Subject: [PATCH 02/23] Changing scrollable container To avoid elastic scroll on OSX --- static/css/base.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/static/css/base.css b/static/css/base.css index 2fa0038..224b1c9 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -302,8 +302,19 @@ dd { 1. Base --> Baseline: 8px = .8rem =========================================== */ +html, body { + width: 100%; + height: 100%; + overflow: hidden; +} + + +#webslides { + height: 100vh; overflow-x: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; } /* == Prototype faster - Vertical rhythm == */ From 33b1f3ad7ae5f016ed072d062254ad31f4949b7e Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 12:44:16 +0100 Subject: [PATCH 03/23] Scrollable container is now defined --- src/js/utils/scroll-to.js | 42 ++++++--------------------------------- 1 file changed, 6 insertions(+), 36 deletions(-) diff --git a/src/js/utils/scroll-to.js b/src/js/utils/scroll-to.js index edec499..41fdbe2 100644 --- a/src/js/utils/scroll-to.js +++ b/src/js/utils/scroll-to.js @@ -1,33 +1,6 @@ import Easings from './easing'; -let SCROLLABLE_CONTAINER = getScrollableContainer(); - -/** - * Returns the correct DOM element to be used for scrolling the - * page, due to Firefox not scrolling on document.body. - * @return {Element} Scrollable Element. - */ -function getScrollableContainer() { - if (SCROLLABLE_CONTAINER) { - return SCROLLABLE_CONTAINER; - } - - const documentElement = window.document.documentElement; - let scrollableContainer; - - documentElement.scrollTop = 1; - - if (documentElement.scrollTop === 1) { - documentElement.scrollTop = 0; - scrollableContainer = documentElement; - } else { - scrollableContainer = document.body; - } - - SCROLLABLE_CONTAINER = scrollableContainer; - - return scrollableContainer; -} +let SCROLLABLE_CONTAINER = document.getElementById('webslides'); /** * Smoothly scrolls to a given Y position using Easing.Swing. It'll run a @@ -36,14 +9,13 @@ function getScrollableContainer() { * @param {number} duration Duration of the animation. 500ms by default. * @param {function} cb Callback function to call upon completion. */ -function scrollTo(y, duration = 500, cb = () => {}) { - const scrollableContainer = getScrollableContainer(); - const delta = y - scrollableContainer.scrollTop; - const startLocation = scrollableContainer.scrollTop; +export default function scrollTo(y, duration = 500, cb = () => {}) { + const delta = y - SCROLLABLE_CONTAINER.scrollTop; + const startLocation = SCROLLABLE_CONTAINER.scrollTop; const increment = 16; if (!duration) { - scrollableContainer.scrollTop = y; + SCROLLABLE_CONTAINER.scrollTop = y; cb(); return; } @@ -58,7 +30,7 @@ function scrollTo(y, duration = 500, cb = () => {}) { delta, duration); - scrollableContainer.scrollTop = Math.floor(startLocation + + SCROLLABLE_CONTAINER.scrollTop = Math.floor(startLocation + (easingP * delta)); if (elapsedTime < duration) { @@ -70,5 +42,3 @@ function scrollTo(y, duration = 500, cb = () => {}) { animateScroll(0); } - -export default { getScrollableContainer, scrollTo }; From 521d708c22d59761d5651aa612b2bf0d59d84c8b Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 12:44:29 +0100 Subject: [PATCH 04/23] No need for this anymore --- src/js/utils/dom.js | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js index b620fdb..b5e20b0 100644 --- a/src/js/utils/dom.js +++ b/src/js/utils/dom.js @@ -42,22 +42,6 @@ export default class DOM { el.style.display = ''; } - /** - * Locks the scroll on the document by setting the HTML to have a hidden - * overflow. - */ - static lockScroll() { - document.documentElement.style.overflow = 'hidden'; - } - - /** - * Unlocks the scroll on the document by setting the HTML to have an auto - * overflow. - */ - static unlockScroll() { - document.documentElement.style.overflow = 'auto'; - } - /** * Fires a custom event on the given target. * @param {Element} target The target of the event. From b7503b1e9e8d944b1693f133562f28418ef431fc Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 12:44:47 +0100 Subject: [PATCH 05/23] Using the scrollable container --- src/js/plugins/scroll.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js index caa6ee2..2f3f17f 100644 --- a/src/js/plugins/scroll.js +++ b/src/js/plugins/scroll.js @@ -14,7 +14,7 @@ export default class Scroll { */ this.ws_ = wsInstance; - this.scrollContainer_ = ScrollHelper.getScrollableContainer(); + this.scrollContainer_ = wsInstance.el; this.isGoingUp_ = false; if (this.ws_.isVertical) { From 83f111094779624f039d1f545b2fd68c60faedcf Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 12:45:14 +0100 Subject: [PATCH 06/23] Preventing default if moving to avoid stutter --- src/js/plugins/scroll.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js index 2f3f17f..cc17e37 100644 --- a/src/js/plugins/scroll.js +++ b/src/js/plugins/scroll.js @@ -31,6 +31,7 @@ export default class Scroll { */ onMouseWheel_(event) { if (this.ws_.isMoving) { + event.preventDefault(); return; } From 4379122d1db8336aa238a9648894d29db7040e28 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 12:45:26 +0100 Subject: [PATCH 07/23] Updating references --- src/js/modules/webslides.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/js/modules/webslides.js b/src/js/modules/webslides.js index 139b303..988e6f2 100644 --- a/src/js/modules/webslides.js +++ b/src/js/modules/webslides.js @@ -1,7 +1,7 @@ import Plugins from '../plugins/plugins'; import Slide from './slide'; import DOM from '../utils/dom'; -import ScrollHelper from '../utils/scroll-to'; +import scrollTo from '../utils/scroll-to'; const CLASSES = { VERTICAL: 'vertical' @@ -186,29 +186,27 @@ export default class WebSlides { * @param {Function} callback Callback to be called upon finishing. This is an * async function so it'll happen once the scroll animation finishes. * @private - * @see DOM.lockScroll - * @see DOM.unlockScroll - * @see ScrollHelper.scrollTo + * @see scrollTo */ scrollTransitionToSlide_(isMovingForward, nextSlide, callback) { - DOM.lockScroll(); + this.el.style.overflow = 'none'; if (!isMovingForward) { nextSlide.moveBeforeFirst(); nextSlide.show(); - ScrollHelper.scrollTo(this.currentSlide_.el.offsetTop, 0); + scrollTo(this.currentSlide_.el.offsetTop, 0); } else { nextSlide.show(); } - ScrollHelper.scrollTo(nextSlide.el.offsetTop, 500, () => { + scrollTo(nextSlide.el.offsetTop, 500, () => { this.currentSlide_.hide(); if (isMovingForward) { this.currentSlide_.moveAfterLast(); } - DOM.unlockScroll(); + this.el.style.overflow = 'auto'; setTimeout(() => { callback.call(this, nextSlide); }, 150); }); } @@ -222,7 +220,7 @@ export default class WebSlides { * @private */ transitionToSlide_(isMovingForward, nextSlide, callback) { - ScrollHelper.scrollTo(0, 0); + scrollTo(0, 0); if (!isMovingForward) { nextSlide.moveBeforeFirst(); From 5a262f5460fa951c1e71d4265265f22551d79127 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 12:50:19 +0100 Subject: [PATCH 08/23] Avoiding scroll transition on mobile --- src/js/plugins/scroll.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js index cc17e37..16b986e 100644 --- a/src/js/plugins/scroll.js +++ b/src/js/plugins/scroll.js @@ -1,4 +1,4 @@ -import ScrollHelper from '../utils/scroll-to'; +import MobileDetector from '../utils/mobile-detector'; const MIN_WHEEL_DELTA = 40; @@ -17,7 +17,7 @@ export default class Scroll { this.scrollContainer_ = wsInstance.el; this.isGoingUp_ = false; - if (this.ws_.isVertical) { + if (this.ws_.isVertical && !MobileDetector.isAny()) { this.scrollContainer_.addEventListener( 'wheel', this.onMouseWheel_.bind(this)); } From 62c6aba4786cf8e0400e8cf62abc3cee1861af01 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 12:50:30 +0100 Subject: [PATCH 09/23] Disting --- static/js/webslides.js | 336 ++++++++++++++++--------------------- static/js/webslides.min.js | 2 +- 2 files changed, 149 insertions(+), 189 deletions(-) diff --git a/static/js/webslides.js b/static/js/webslides.js index 633ebb9..91b1062 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -136,28 +136,6 @@ var DOM = function () { el.style.display = ''; } - /** - * Locks the scroll on the document by setting the HTML to have a hidden - * overflow. - */ - - }, { - key: 'lockScroll', - value: function lockScroll() { - document.documentElement.style.overflow = 'hidden'; - } - - /** - * Unlocks the scroll on the document by setting the HTML to have an auto - * overflow. - */ - - }, { - key: 'unlockScroll', - value: function unlockScroll() { - document.documentElement.style.overflow = 'auto'; - } - /** * Fires a custom event on the given target. * @param {Element} target The target of the event. @@ -177,6 +155,18 @@ var DOM = function () { target.dispatchEvent(event); } + + /** + * Converts an iterable to an array. + * @param {*} iterable Element to convert to array + * @return {Array} the element casted to an array. + */ + + }, { + key: 'toArray', + value: function toArray(iterable) { + return [].slice.call(iterable); + } }]); return DOM; @@ -205,80 +195,99 @@ var Keys = { /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(13); +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -var SCROLLABLE_CONTAINER = getScrollableContainer(); +var UA = window.navigator.userAgent; -/** - * Returns the correct DOM element to be used for scrolling the - * page, due to Firefox not scrolling on document.body. - * @return {Element} Scrollable Element. - */ -function getScrollableContainer() { - if (SCROLLABLE_CONTAINER) { - return SCROLLABLE_CONTAINER; +var MobileDetector = function () { + function MobileDetector() { + _classCallCheck(this, MobileDetector); } - var documentElement = window.document.documentElement; - var scrollableContainer = void 0; + _createClass(MobileDetector, null, [{ + key: "isAndroid", - documentElement.scrollTop = 1; - - if (documentElement.scrollTop === 1) { - documentElement.scrollTop = 0; - scrollableContainer = documentElement; - } else { - scrollableContainer = document.body; - } - - SCROLLABLE_CONTAINER = scrollableContainer; - - return scrollableContainer; -} - -/** - * Smoothly scrolls to a given Y position using Easing.Swing. It'll run a - * callback upon finishing. - * @param {number} y Offset of the page to scroll to. - * @param {number} duration Duration of the animation. 500ms by default. - * @param {function} cb Callback function to call upon completion. - */ -function scrollTo(y) { - var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500; - var cb = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {}; - - var scrollableContainer = getScrollableContainer(); - var delta = y - scrollableContainer.scrollTop; - var startLocation = scrollableContainer.scrollTop; - var increment = 16; - - if (!duration) { - scrollableContainer.scrollTop = y; - cb(); - return; - } - - var animateScroll = function animateScroll(elapsedTime) { - elapsedTime += increment; - var percent = Math.min(1, elapsedTime / duration); - var easingP = __WEBPACK_IMPORTED_MODULE_0__easing__["a" /* default */].swing(percent, elapsedTime * percent, y, delta, duration); - - scrollableContainer.scrollTop = Math.floor(startLocation + easingP * delta); - - if (elapsedTime < duration) { - setTimeout(function () { - return animateScroll(elapsedTime); - }, increment); - } else { - cb(); + /** + * Whether the device is Android or not. + * @return {Boolean} + */ + value: function isAndroid() { + return !!UA.match(/Android/i); } - }; - animateScroll(0); -} + /** + * Whether the device is BlackBerry or not. + * @return {Boolean} + */ -/* harmony default export */ __webpack_exports__["a"] = { getScrollableContainer: getScrollableContainer, scrollTo: scrollTo }; + }, { + key: "isBlackBerry", + value: function isBlackBerry() { + return !!UA.match(/BlackBerry/i); + } + + /** + * Whether the device is iOS or not. + * @return {Boolean} + */ + + }, { + key: "isiOS", + value: function isiOS() { + return !!UA.match(/iPhone/i); + } + + /** + * Whether the device is Opera or not. + * @return {Boolean} + */ + + }, { + key: "isOpera", + value: function isOpera() { + return !!UA.match(/Opera Mini/i); + } + + /** + * Whether the device is Windows or not. + * @return {Boolean} + */ + + }, { + key: "isWindows", + value: function isWindows() { + return !!UA.match(/IEMobile/i); + } + + /** + * Whether the device is Windows Phone or not. + * @return {Boolean} + */ + + }, { + key: "isWindowsPhone", + value: function isWindowsPhone() { + return !!UA.match(/Windows Phone/i); + } + + /** + * Whether the device is any mobile device or not. + * @return {Boolean} + */ + + }, { + key: "isAny", + value: function isAny() { + return MobileDetector.isAndroid() || MobileDetector.isBlackBerry() || MobileDetector.isiOS() || MobileDetector.isOpera() || MobileDetector.isWindows() || MobileDetector.isWindowsPhone(); + } + }]); + + return MobileDetector; +}(); + +/* harmony default export */ __webpack_exports__["a"] = MobileDetector; /***/ }), /* 3 */ @@ -288,7 +297,7 @@ function scrollTo(y) { /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(9); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__slide__ = __webpack_require__(4); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_dom__ = __webpack_require__(0); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(2); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(14); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -455,7 +464,7 @@ var WebSlides = function () { }, { key: 'grabSlides_', value: function grabSlides_() { - this.slides = Array.from(this.el.childNodes).map(function (slide, i) { + this.slides = __WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].toArray(this.el.childNodes).map(function (slide, i) { return new __WEBPACK_IMPORTED_MODULE_1__slide__["a" /* default */](slide, i); }); @@ -503,9 +512,7 @@ var WebSlides = function () { * @param {Function} callback Callback to be called upon finishing. This is an * async function so it'll happen once the scroll animation finishes. * @private - * @see DOM.lockScroll - * @see DOM.unlockScroll - * @see ScrollHelper.scrollTo + * @see scrollTo */ }, { @@ -513,24 +520,24 @@ var WebSlides = function () { value: function scrollTransitionToSlide_(isMovingForward, nextSlide, callback) { var _this2 = this; - __WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].lockScroll(); + this.el.style.overflow = 'none'; if (!isMovingForward) { nextSlide.moveBeforeFirst(); nextSlide.show(); - __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */].scrollTo(this.currentSlide_.el.offsetTop, 0); + __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */])(this.currentSlide_.el.offsetTop, 0); } else { nextSlide.show(); } - __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */].scrollTo(nextSlide.el.offsetTop, 500, function () { + __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */])(nextSlide.el.offsetTop, 500, function () { _this2.currentSlide_.hide(); if (isMovingForward) { _this2.currentSlide_.moveAfterLast(); } - __WEBPACK_IMPORTED_MODULE_2__utils_dom__["a" /* default */].unlockScroll(); + _this2.el.style.overflow = 'auto'; setTimeout(function () { callback.call(_this2, nextSlide); }, 150); @@ -549,7 +556,7 @@ var WebSlides = function () { }, { key: 'transitionToSlide_', value: function transitionToSlide_(isMovingForward, nextSlide, callback) { - __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */].scrollTo(0, 0); + __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__["a" /* default */])(0, 0); if (!isMovingForward) { nextSlide.moveBeforeFirst(); @@ -689,7 +696,7 @@ var WebSlides = function () { value: function play(time) { time = time || this.autoslide_; - if (!this.interval_ && Number.isInteger(time) && time > 0) { + if (!this.interval_ && typeof time === 'number' && time > 0) { this.interval_ = setInterval(this.goNext.bind(this), time); } } @@ -968,7 +975,7 @@ var Hash = function () { slide = parseInt(results[1], 10); } - if (!Number.isInteger(slide) || slide < 0 || !Array.isArray(results)) { + if (typeof slide !== 'number' || slide < 0 || !Array.isArray(results)) { slide = null; } else { slide--; // Convert to 0 index @@ -1254,7 +1261,7 @@ var Navigation = function () { /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_scroll_to__ = __webpack_require__(2); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(2); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -1277,10 +1284,10 @@ var Scroll = function () { */ this.ws_ = wsInstance; - this.scrollContainer_ = __WEBPACK_IMPORTED_MODULE_0__utils_scroll_to__["a" /* default */].getScrollableContainer(); + this.scrollContainer_ = wsInstance.el; this.isGoingUp_ = false; - if (this.ws_.isVertical) { + if (this.ws_.isVertical && !__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) { this.scrollContainer_.addEventListener('wheel', this.onMouseWheel_.bind(this)); } } @@ -1297,6 +1304,7 @@ var Scroll = function () { key: 'onMouseWheel_', value: function onMouseWheel_(event) { if (this.ws_.isMoving) { + event.preventDefault(); return; } @@ -1327,7 +1335,7 @@ var Scroll = function () { /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(14); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(2); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -1575,99 +1583,51 @@ function linear(p) { /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(13); +/* harmony export (immutable) */ __webpack_exports__["a"] = scrollTo; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -var UA = window.navigator.userAgent; +var SCROLLABLE_CONTAINER = document.getElementById('webslides'); -var MobileDetector = function () { - function MobileDetector() { - _classCallCheck(this, MobileDetector); +/** + * Smoothly scrolls to a given Y position using Easing.Swing. It'll run a + * callback upon finishing. + * @param {number} y Offset of the page to scroll to. + * @param {number} duration Duration of the animation. 500ms by default. + * @param {function} cb Callback function to call upon completion. + */ +function scrollTo(y) { + var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500; + var cb = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {}; + + var delta = y - SCROLLABLE_CONTAINER.scrollTop; + var startLocation = SCROLLABLE_CONTAINER.scrollTop; + var increment = 16; + + if (!duration) { + SCROLLABLE_CONTAINER.scrollTop = y; + cb(); + return; } - _createClass(MobileDetector, null, [{ - key: "isAndroid", + var animateScroll = function animateScroll(elapsedTime) { + elapsedTime += increment; + var percent = Math.min(1, elapsedTime / duration); + var easingP = __WEBPACK_IMPORTED_MODULE_0__easing__["a" /* default */].swing(percent, elapsedTime * percent, y, delta, duration); - /** - * Whether the device is Android or not. - * @return {Boolean} - */ - value: function isAndroid() { - return !!UA.match(/Android/i); + SCROLLABLE_CONTAINER.scrollTop = Math.floor(startLocation + easingP * delta); + + if (elapsedTime < duration) { + setTimeout(function () { + return animateScroll(elapsedTime); + }, increment); + } else { + cb(); } + }; - /** - * Whether the device is BlackBerry or not. - * @return {Boolean} - */ - - }, { - key: "isBlackBerry", - value: function isBlackBerry() { - return !!UA.match(/BlackBerry/i); - } - - /** - * Whether the device is iOS or not. - * @return {Boolean} - */ - - }, { - key: "isiOS", - value: function isiOS() { - return !!UA.match(/iPhone/i); - } - - /** - * Whether the device is Opera or not. - * @return {Boolean} - */ - - }, { - key: "isOpera", - value: function isOpera() { - return !!UA.match(/Opera Mini/i); - } - - /** - * Whether the device is Windows or not. - * @return {Boolean} - */ - - }, { - key: "isWindows", - value: function isWindows() { - return !!UA.match(/IEMobile/i); - } - - /** - * Whether the device is Windows Phone or not. - * @return {Boolean} - */ - - }, { - key: "isWindowsPhone", - value: function isWindowsPhone() { - return !!UA.match(/Windows Phone/i); - } - - /** - * Whether the device is any mobile device or not. - * @return {Boolean} - */ - - }, { - key: "isAny", - value: function isAny() { - return MobileDetector.isAndroid() || MobileDetector.isBlackBerry() || MobileDetector.isiOS() || MobileDetector.isOpera() || MobileDetector.isWindows() || MobileDetector.isWindowsPhone(); - } - }]); - - return MobileDetector; -}(); - -/* harmony default export */ __webpack_exports__["a"] = MobileDetector; + animateScroll(0); +} /***/ }), /* 15 */ diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 004faaf..f089973 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1 +1 @@ -!function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/static/js/",t(t.s=15)}([function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(12),o=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=document.createElement(e);return i.id=t,n&&(i.textContent=n),i}},{key:"hide",value:function(e){e.style.display="none"}},{key:"show",value:function(e){e.style.display=""}},{key:"lockScroll",value:function(){document.documentElement.style.overflow="hidden"}},{key:"unlockScroll",value:function(){document.documentElement.style.overflow="auto"}},{key:"fireEvent",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=new r.a(t,{detail:n});e.dispatchEvent(i)}}]),e}();t.a=a},function(e,t,n){"use strict";var i={ENTER:13,SPACE:32,LEFT:37,UP:38,RIGHT:39,DOWN:40};t.a=i},function(e,t,n){"use strict";function i(){if(a)return a;var e=window.document.documentElement,t=void 0;return e.scrollTop=1,1===e.scrollTop?(e.scrollTop=0,t=e):t=document.body,a=t,t}function r(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},r=i(),a=e-r.scrollTop,s=r.scrollTop,l=16;if(!t)return r.scrollTop=e,void n();var u=function i(u){u+=l;var c=Math.min(1,u/t),h=o.a.swing(c,u*c,e,a,t);r.scrollTop=Math.floor(s+h*a),u0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,r=void 0!==n&&n;if(i(this,e),this.el=document.getElementById("webslides"),this.isMoving=!1,this.slides=null,this.currentSlideI_=-1,this.currentSlide_=null,this.maxSlide_=0,this.isVertical=this.el.classList.contains(u.VERTICAL),this.plugins={},this.interval_=null,this.autoslide_=r,!this.el)throw new Error("Couldn't find the webslides container!");this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.play(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var n=e[t];o.a.isCandidate(n)||this.el.removeChild(n)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var n=c[t];e.plugins[t]=new n(e)})}},{key:"onInit_",value:function(){a.a.fireEvent(this.el,"ws:init")}},{key:"grabSlides_",value:function(){this.slides=Array.from(this.el.childNodes).map(function(e,t){return new o.a(e,t)}),this.maxSlide_=this.slides.length}},{key:"goToSlide",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isValidIndexSlide_(e)&&!this.isMoving){this.isMoving=!0;var n=!1;null!==t?n=t:this.currentSlideI_>=0&&(n=e>this.currentSlideI_);var i=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(n,i,this.onSlideChange_):this.scrollTransitionToSlide_(n,i,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var i=this;a.a.lockScroll(),e?t.show():(t.moveBeforeFirst(),t.show(),s.a.scrollTo(this.currentSlide_.el.offsetTop,0)),s.a.scrollTo(t.el.offsetTop,500,function(){i.currentSlide_.hide(),e&&i.currentSlide_.moveAfterLast(),a.a.unlockScroll(),setTimeout(function(){n.call(i,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){s.a.scrollTo(0,0),e||t.moveBeforeFirst(),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),n.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_=e,this.currentSlideI_=e.i,this.isMoving=!1,a.a.fireEvent(this.el,"ws:slide-change",{slides:this.maxSlide_,currentSlide0:this.currentSlideI_,currentSlide:this.currentSlideI_+1})}},{key:"goNext",value:function(){var e=this.currentSlideI_+1;e>=this.maxSlide_&&(e=0),this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;e<0&&(e=this.maxSlide_-1),this.goToSlide(e,!1)}},{key:"isValidIndexSlide_",value:function(e){return e>=0&&e=this.maxSlide_)&&(e=0),0!==e)for(var t=0;t0&&(this.interval_=setInterval(this.goNext.bind(this),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}],[{key:"registerPlugin",value:function(e,t){c[e]=t}}]),e}();t.a=h},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(0),o=function(){function e(e,t){for(var n=0;n=a&&(this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=s},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(14),o=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-s?this.ws_.goPrev():e>s&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t=void 0,n=void 0,i={pageX:0,pageY:0};return"undefined"!=typeof e.changedTouches?i=e.changedTouches[0]:"undefined"!=typeof e.originalEvent&&"undefined"!=typeof e.originalEvent.changedTouches&&(i=e.originalEvent.changedTouches[0]),t=e.offsetX||e.layerX||i.pageX,n=e.offsetY||e.layerY||i.pageY,{x:t,y:n}}}]),e}();t.a=l},function(e,t,n){"use strict";function i(){try{var e=new r("t",{detail:{a:"b"}});return"t"===e.type&&"b"===e.detail.a}catch(e){}return!1}var r=window.CustomEvent,o=function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n},a=i()?r:o;t.a=a},function(e,t,n){"use strict";function i(e){return.5-Math.cos(e*Math.PI)/2}function r(e){return e}t.a={swing:i,linear:r}},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=document.createElement(e);return i.id=t,n&&(i.textContent=n),i}},{key:"hide",value:function(e){e.style.display="none"}},{key:"show",value:function(e){e.style.display=""}},{key:"fireEvent",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=new r.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}}]),e}();t.a=a},function(e,t,n){"use strict";var i={ENTER:13,SPACE:32,LEFT:37,UP:38,RIGHT:39,DOWN:40};t.a=i},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,r=void 0!==n&&n;if(i(this,e),this.el=document.getElementById("webslides"),this.isMoving=!1,this.slides=null,this.currentSlideI_=-1,this.currentSlide_=null,this.maxSlide_=0,this.isVertical=this.el.classList.contains(l.VERTICAL),this.plugins={},this.interval_=null,this.autoslide_=r,!this.el)throw new Error("Couldn't find the webslides container!");this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.play(),this.onInit_()}return u(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var n=e[t];o.a.isCandidate(n)||this.el.removeChild(n)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var n=c[t];e.plugins[t]=new n(e)})}},{key:"onInit_",value:function(){a.a.fireEvent(this.el,"ws:init")}},{key:"grabSlides_",value:function(){this.slides=a.a.toArray(this.el.childNodes).map(function(e,t){return new o.a(e,t)}),this.maxSlide_=this.slides.length}},{key:"goToSlide",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isValidIndexSlide_(e)&&!this.isMoving){this.isMoving=!0;var n=!1;null!==t?n=t:this.currentSlideI_>=0&&(n=e>this.currentSlideI_);var i=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(n,i,this.onSlideChange_):this.scrollTransitionToSlide_(n,i,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,i){var r=this;this.el.style.overflow="none",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(s.a)(this.currentSlide_.el.offsetTop,0)),n.i(s.a)(t.el.offsetTop,500,function(){r.currentSlide_.hide(),e&&r.currentSlide_.moveAfterLast(),r.el.style.overflow="auto",setTimeout(function(){i.call(r,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){n.i(s.a)(0,0),e||t.moveBeforeFirst(),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_=e,this.currentSlideI_=e.i,this.isMoving=!1,a.a.fireEvent(this.el,"ws:slide-change",{slides:this.maxSlide_,currentSlide0:this.currentSlideI_,currentSlide:this.currentSlideI_+1})}},{key:"goNext",value:function(){var e=this.currentSlideI_+1;e>=this.maxSlide_&&(e=0),this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;e<0&&(e=this.maxSlide_-1),this.goToSlide(e,!1)}},{key:"isValidIndexSlide_",value:function(e){return e>=0&&e=this.maxSlide_)&&(e=0),0!==e)for(var t=0;t0&&(this.interval_=setInterval(this.goNext.bind(this),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}],[{key:"registerPlugin",value:function(e,t){c[e]=t}}]),e}();t.a=h},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(0),o=function(){function e(e,t){for(var n=0;n=a&&(this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}]),e}();t.a=s},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(2),o=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-s?this.ws_.goPrev():e>s&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t=void 0,n=void 0,i={pageX:0,pageY:0};return"undefined"!=typeof e.changedTouches?i=e.changedTouches[0]:"undefined"!=typeof e.originalEvent&&"undefined"!=typeof e.originalEvent.changedTouches&&(i=e.originalEvent.changedTouches[0]),t=e.offsetX||e.layerX||i.pageX,n=e.offsetY||e.layerY||i.pageY,{x:t,y:n}}}]),e}();t.a=u},function(e,t,n){"use strict";function i(){try{var e=new r("t",{detail:{a:"b"}});return"t"===e.type&&"b"===e.detail.a}catch(e){}return!1}var r=window.CustomEvent,o=function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n},a=i()?r:o;t.a=a},function(e,t,n){"use strict";function i(e){return.5-Math.cos(e*Math.PI)/2}function r(e){return e}t.a={swing:i,linear:r}},function(e,t,n){"use strict";function i(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-o.scrollTop,a=o.scrollTop,s=16;if(!t)return o.scrollTop=e,void n();var u=function u(l){l+=s;var c=Math.min(1,l/t),h=r.a.swing(c,l*c,e,i,t);o.scrollTop=Math.floor(a+h*i),l Date: Mon, 27 Feb 2017 19:58:42 +0100 Subject: [PATCH 10/23] Adding new features --- src/js/modules/webslides.js | 13 +++++++++++-- src/js/plugins/click-nav.js | 38 +++++++++++++++++++++++++++++++++++++ src/js/plugins/plugins.js | 2 ++ src/js/plugins/scroll.js | 37 ++++++++++++++++++++++++++++++------ 4 files changed, 82 insertions(+), 8 deletions(-) create mode 100644 src/js/plugins/click-nav.js diff --git a/src/js/modules/webslides.js b/src/js/modules/webslides.js index 988e6f2..eb05041 100644 --- a/src/js/modules/webslides.js +++ b/src/js/modules/webslides.js @@ -9,6 +9,7 @@ const CLASSES = { // Default plugins const PLUGINS = { + 'clickNav': Plugins.ClickNav, 'grid': Plugins.Grid, 'hash': Plugins.Hash, 'keyboard': Plugins.Keyboard, @@ -21,10 +22,12 @@ export default class WebSlides { /** * Options for WebSlides * @param {number|boolean} autoslide Is false by default. If a number is - * provided, it will autoslide every given milliseconds. + * @param {boolean} changeOnClick Is false by default. If true, it will allow + * clicking on any place to change the slide. */ constructor({ - autoslide = false + autoslide = false, + changeOnClick = false } = {}) { /** * WebSlide element. @@ -82,6 +85,12 @@ export default class WebSlides { * @private */ this.autoslide_ = autoslide; + /** + * Whether navigation should initiate on click + * @type {boolean} + * @private + */ + this.changeOnClick_ = changeOnClick; if (!this.el) { throw new Error('Couldn\'t find the webslides container!'); diff --git a/src/js/plugins/click-nav.js b/src/js/plugins/click-nav.js new file mode 100644 index 0000000..e3ec506 --- /dev/null +++ b/src/js/plugins/click-nav.js @@ -0,0 +1,38 @@ +const CLICKABLE_ELS = [ + 'INPUT', + 'SELECT', + 'BUTTON', + 'A', + 'TEXTAREA' +]; + +export default class ClickNav { + /** + * ClickNav plugin that allows to click on the page to get to the next slide. + * @param {WebSlides} wsInstance The WebSlides instance + */ + constructor(wsInstance) { + /** + * @type {WebSlides} + * @private + */ + this.ws_ = wsInstance; + + if (wsInstance.changeOnClick) { + this.ws_.el.addEventListener('click', this.onClick_.bind(this)); + } + } + + /** + * Reacts to the click event. It will go to the next slide unless the element + * has a data-prevent-nav attribute or is on the list of CLICKABLE_ELS. + * @param {MouseEvent} event The click event. + * @private + */ + onClick_(event) { + if (CLICKABLE_ELS.indexOf(event.target.tagName) < 0 && + typeof event.target.dataset.preventNav === 'undefined') { + this.ws_.goNext(); + } + } +} diff --git a/src/js/plugins/plugins.js b/src/js/plugins/plugins.js index 4e7d6e2..6b35620 100644 --- a/src/js/plugins/plugins.js +++ b/src/js/plugins/plugins.js @@ -1,3 +1,4 @@ +import ClickNav from './click-nav'; import Grid from './grid'; import Hash from './hash'; import Keyboard from './keyboard'; @@ -6,6 +7,7 @@ import Scroll from './scroll'; import Touch from './touch'; export default { + ClickNav, Grid, Hash, Keyboard, diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js index 16b986e..611ab90 100644 --- a/src/js/plugins/scroll.js +++ b/src/js/plugins/scroll.js @@ -16,13 +16,29 @@ export default class Scroll { this.scrollContainer_ = wsInstance.el; this.isGoingUp_ = false; + this.isGoingLeft_ = false; + this.timeout_ = null; - if (this.ws_.isVertical && !MobileDetector.isAny()) { + if (!MobileDetector.isAny()) { this.scrollContainer_.addEventListener( 'wheel', this.onMouseWheel_.bind(this)); + + if (!wsInstance.isVertical) { + wsInstance.el.addEventListener( + 'ws:slide-change', this.onSlideChange_.bind(this)); + } } } + /** + * When the slides change, set an inner timeout to avoid prematurely + * changing to the next slide again. + * @private + */ + onSlideChange_() { + this.timeout_ = setTimeout(() => { this.timeout_ = null; }, 400); + } + /** * Reacts to the wheel event. Detects whether is going up or down and decides * if it needs to move the slide based on the amount of delta. @@ -30,16 +46,25 @@ export default class Scroll { * @private */ onMouseWheel_(event) { - if (this.ws_.isMoving) { + if (this.ws_.isMoving || this.timeout_) { event.preventDefault(); return; } - const { deltaY: wheelDelta } = event; - this.isGoingUp_ = wheelDelta < 0; + const { deltaY: wheelDeltaY, deltaX: wheelDeltaX } = event; + this.isGoingUp_ = wheelDeltaY < 0; + this.isGoingLeft_ = wheelDeltaX < 0; - if (Math.abs(wheelDelta) >= MIN_WHEEL_DELTA) { - if (this.isGoingUp_) { + if (!this.ws_.isVertical) { + // If we're mainly moving horizontally, prevent default + if (Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY)) { + event.preventDefault(); + } + } + + if (Math.abs(wheelDeltaY) >= MIN_WHEEL_DELTA || + Math.abs(wheelDeltaX) >= MIN_WHEEL_DELTA) { + if (this.isGoingUp_ || this.isGoingLeft_) { this.ws_.goPrev(); } else { this.ws_.goNext(); From 32ff8afa883e4edd3a1eb0e8edd5209930630104 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 20:10:26 +0100 Subject: [PATCH 11/23] Disting --- static/js/webslides.js | 197 +++++++++++++++++++++++++++++-------- static/js/webslides.min.js | 2 +- 2 files changed, 159 insertions(+), 40 deletions(-) diff --git a/static/js/webslides.js b/static/js/webslides.js index 91b1062..6be1c82 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -63,7 +63,7 @@ /******/ __webpack_require__.p = "/static/js/"; /******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 15); +/******/ return __webpack_require__(__webpack_require__.s = 16); /******/ }) /************************************************************************/ /******/ ([ @@ -71,7 +71,7 @@ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(12); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(13); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -294,10 +294,10 @@ var MobileDetector = function () { /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(9); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(10); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__slide__ = __webpack_require__(4); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_dom__ = __webpack_require__(0); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(14); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(15); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -313,6 +313,7 @@ var CLASSES = { // Default plugins var PLUGINS = { + 'clickNav': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].ClickNav, 'grid': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Grid, 'hash': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Hash, 'keyboard': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Keyboard, @@ -325,12 +326,15 @@ var WebSlides = function () { /** * Options for WebSlides * @param {number|boolean} autoslide Is false by default. If a number is - * provided, it will autoslide every given milliseconds. + * @param {boolean} changeOnClick Is false by default. If true, it will allow + * clicking on any place to change the slide. */ function WebSlides() { var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, _ref$autoslide = _ref.autoslide, - autoslide = _ref$autoslide === undefined ? false : _ref$autoslide; + autoslide = _ref$autoslide === undefined ? false : _ref$autoslide, + _ref$changeOnClick = _ref.changeOnClick, + changeOnClick = _ref$changeOnClick === undefined ? false : _ref$changeOnClick; _classCallCheck(this, WebSlides); @@ -390,6 +394,12 @@ var WebSlides = function () { * @private */ this.autoslide_ = autoslide; + /** + * Whether navigation should initiate on click or not. + * @type {boolean} + * @private + */ + this.changeOnClick_ = changeOnClick; if (!this.el) { throw new Error('Couldn\'t find the webslides container!'); @@ -846,6 +856,58 @@ var Slide = function () { /* 5 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { +"use strict"; +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +var CLICKABLE_ELS = ['INPUT', 'SELECT', 'BUTTON', 'A', 'TEXTAREA']; + +var ClickNav = function () { + /** + * ClickNav plugin that allows to click on the page to get to the next slide. + * @param {WebSlides} wsInstance The WebSlides instance + */ + function ClickNav(wsInstance) { + _classCallCheck(this, ClickNav); + + /** + * @type {WebSlides} + * @private + */ + this.ws_ = wsInstance; + + if (wsInstance.changeOnClick_) { + this.ws_.el.addEventListener('click', this.onClick_.bind(this)); + } + } + + /** + * Reacts to the click event. It will go to the next slide unless the element + * has a data-prevent-nav attribute or is on the list of CLICKABLE_ELS. + * @param {MouseEvent} event The click event. + * @private + */ + + + _createClass(ClickNav, [{ + key: 'onClick_', + value: function onClick_(event) { + if (CLICKABLE_ELS.indexOf(event.target.tagName) < 0 && typeof event.target.dataset.preventNav === 'undefined') { + this.ws_.goNext(); + } + } + }]); + + return ClickNav; +}(); + +/* harmony default export */ __webpack_exports__["a"] = ClickNav; + +/***/ }), +/* 6 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + "use strict"; /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_keys__ = __webpack_require__(1); var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); @@ -907,7 +969,7 @@ var Grid = function () { /* harmony default export */ __webpack_exports__["a"] = Grid; /***/ }), -/* 6 */ +/* 7 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; @@ -1007,7 +1069,7 @@ var Hash = function () { /* harmony default export */ __webpack_exports__["a"] = Hash; /***/ }), -/* 7 */ +/* 8 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; @@ -1078,7 +1140,7 @@ var Keyboard = function () { /* harmony default export */ __webpack_exports__["a"] = Keyboard; /***/ }), -/* 8 */ +/* 9 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; @@ -1230,16 +1292,18 @@ var Navigation = function () { /* harmony default export */ __webpack_exports__["a"] = Navigation; /***/ }), -/* 9 */ +/* 10 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__grid__ = __webpack_require__(5); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__hash__ = __webpack_require__(6); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__keyboard__ = __webpack_require__(7); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__navigation__ = __webpack_require__(8); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__scroll__ = __webpack_require__(10); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__touch__ = __webpack_require__(11); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__click_nav__ = __webpack_require__(5); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__grid__ = __webpack_require__(6); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__hash__ = __webpack_require__(7); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__keyboard__ = __webpack_require__(8); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__navigation__ = __webpack_require__(9); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__scroll__ = __webpack_require__(11); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__touch__ = __webpack_require__(12); + @@ -1248,16 +1312,17 @@ var Navigation = function () { /* harmony default export */ __webpack_exports__["a"] = { - Grid: __WEBPACK_IMPORTED_MODULE_0__grid__["a" /* default */], - Hash: __WEBPACK_IMPORTED_MODULE_1__hash__["a" /* default */], - Keyboard: __WEBPACK_IMPORTED_MODULE_2__keyboard__["a" /* default */], - Navigation: __WEBPACK_IMPORTED_MODULE_3__navigation__["a" /* default */], - Scroll: __WEBPACK_IMPORTED_MODULE_4__scroll__["a" /* default */], - Touch: __WEBPACK_IMPORTED_MODULE_5__touch__["a" /* default */] + ClickNav: __WEBPACK_IMPORTED_MODULE_0__click_nav__["a" /* default */], + Grid: __WEBPACK_IMPORTED_MODULE_1__grid__["a" /* default */], + Hash: __WEBPACK_IMPORTED_MODULE_2__hash__["a" /* default */], + Keyboard: __WEBPACK_IMPORTED_MODULE_3__keyboard__["a" /* default */], + Navigation: __WEBPACK_IMPORTED_MODULE_4__navigation__["a" /* default */], + Scroll: __WEBPACK_IMPORTED_MODULE_5__scroll__["a" /* default */], + Touch: __WEBPACK_IMPORTED_MODULE_6__touch__["a" /* default */] }; /***/ }), -/* 10 */ +/* 11 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; @@ -1283,37 +1348,91 @@ var Scroll = function () { * @private */ this.ws_ = wsInstance; - + /** + * Where the scroll is going to happen. The WebSlides element. + * @type {Element} + * @private + */ this.scrollContainer_ = wsInstance.el; + /** + * Whether movement is happening up or down. + * @type {boolean} + * @private + */ this.isGoingUp_ = false; + /** + * Whether movement is happening left or right. + * @type {boolean} + * @private + */ + this.isGoingLeft_ = false; + /** + * Timeout id holder. + * @type {?number} + * @private + */ + this.timeout_ = null; - if (this.ws_.isVertical && !__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) { + if (!__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) { this.scrollContainer_.addEventListener('wheel', this.onMouseWheel_.bind(this)); + + if (!wsInstance.isVertical) { + wsInstance.el.addEventListener('ws:slide-change', this.onSlideChange_.bind(this)); + } } } /** - * Reacts to the wheel event. Detects whether is going up or down and decides - * if it needs to move the slide based on the amount of delta. - * @param {WheelEvent} event The Wheel Event. + * When the slides change, set an inner timeout to avoid prematurely + * changing to the next slide again. * @private */ _createClass(Scroll, [{ + key: 'onSlideChange_', + value: function onSlideChange_() { + var _this = this; + + this.timeout_ = setTimeout(function () { + _this.timeout_ = null; + }, 400); + } + + /** + * Reacts to the wheel event. Detects whether is going up or down and decides + * if it needs to move the slide based on the amount of delta. + * @param {WheelEvent} event The Wheel Event. + * @private + */ + + }, { key: 'onMouseWheel_', value: function onMouseWheel_(event) { - if (this.ws_.isMoving) { + if (this.ws_.isMoving || this.timeout_) { event.preventDefault(); return; } - var wheelDelta = event.deltaY; + var wheelDeltaY = event.deltaY, + wheelDeltaX = event.deltaX; - this.isGoingUp_ = wheelDelta < 0; + this.isGoingUp_ = wheelDeltaY < 0; + this.isGoingLeft_ = wheelDeltaX < 0; - if (Math.abs(wheelDelta) >= MIN_WHEEL_DELTA) { - if (this.isGoingUp_) { + // If we're mainly moving horizontally, prevent default + if (Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY)) { + if (!this.ws_.isVertical) { + event.preventDefault(); + } else { + // If we're moving horizontally but this is vertical, return to avoid + // unwanted navigation. + return; + } + } + + if (Math.abs(wheelDeltaY) >= MIN_WHEEL_DELTA || Math.abs(wheelDeltaX) >= MIN_WHEEL_DELTA) { + if (this.isGoingUp_ || this.isGoingLeft_) { this.ws_.goPrev(); } else { this.ws_.goNext(); @@ -1331,7 +1450,7 @@ var Scroll = function () { ; /***/ }), -/* 11 */ +/* 12 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; @@ -1511,7 +1630,7 @@ var Touch = function () { ; /***/ }), -/* 12 */ +/* 13 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; @@ -1554,7 +1673,7 @@ var WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent; /* harmony default export */ __webpack_exports__["a"] = WSCustomEvent; /***/ }), -/* 13 */ +/* 14 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; @@ -1579,11 +1698,11 @@ function linear(p) { /* harmony default export */ __webpack_exports__["a"] = { swing: swing, linear: linear }; /***/ }), -/* 14 */ +/* 15 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(13); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(14); /* harmony export (immutable) */ __webpack_exports__["a"] = scrollTo; @@ -1630,7 +1749,7 @@ function scrollTo(y) { } /***/ }), -/* 15 */ +/* 16 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index f089973..01e13bc 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1 +1 @@ -!function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/static/js/",t(t.s=15)}([function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(12),o=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=document.createElement(e);return i.id=t,n&&(i.textContent=n),i}},{key:"hide",value:function(e){e.style.display="none"}},{key:"show",value:function(e){e.style.display=""}},{key:"fireEvent",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=new r.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}}]),e}();t.a=a},function(e,t,n){"use strict";var i={ENTER:13,SPACE:32,LEFT:37,UP:38,RIGHT:39,DOWN:40};t.a=i},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,r=void 0!==n&&n;if(i(this,e),this.el=document.getElementById("webslides"),this.isMoving=!1,this.slides=null,this.currentSlideI_=-1,this.currentSlide_=null,this.maxSlide_=0,this.isVertical=this.el.classList.contains(l.VERTICAL),this.plugins={},this.interval_=null,this.autoslide_=r,!this.el)throw new Error("Couldn't find the webslides container!");this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.play(),this.onInit_()}return u(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var n=e[t];o.a.isCandidate(n)||this.el.removeChild(n)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var n=c[t];e.plugins[t]=new n(e)})}},{key:"onInit_",value:function(){a.a.fireEvent(this.el,"ws:init")}},{key:"grabSlides_",value:function(){this.slides=a.a.toArray(this.el.childNodes).map(function(e,t){return new o.a(e,t)}),this.maxSlide_=this.slides.length}},{key:"goToSlide",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isValidIndexSlide_(e)&&!this.isMoving){this.isMoving=!0;var n=!1;null!==t?n=t:this.currentSlideI_>=0&&(n=e>this.currentSlideI_);var i=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(n,i,this.onSlideChange_):this.scrollTransitionToSlide_(n,i,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,i){var r=this;this.el.style.overflow="none",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(s.a)(this.currentSlide_.el.offsetTop,0)),n.i(s.a)(t.el.offsetTop,500,function(){r.currentSlide_.hide(),e&&r.currentSlide_.moveAfterLast(),r.el.style.overflow="auto",setTimeout(function(){i.call(r,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){n.i(s.a)(0,0),e||t.moveBeforeFirst(),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_=e,this.currentSlideI_=e.i,this.isMoving=!1,a.a.fireEvent(this.el,"ws:slide-change",{slides:this.maxSlide_,currentSlide0:this.currentSlideI_,currentSlide:this.currentSlideI_+1})}},{key:"goNext",value:function(){var e=this.currentSlideI_+1;e>=this.maxSlide_&&(e=0),this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;e<0&&(e=this.maxSlide_-1),this.goToSlide(e,!1)}},{key:"isValidIndexSlide_",value:function(e){return e>=0&&e=this.maxSlide_)&&(e=0),0!==e)for(var t=0;t0&&(this.interval_=setInterval(this.goNext.bind(this),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}],[{key:"registerPlugin",value:function(e,t){c[e]=t}}]),e}();t.a=h},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(0),o=function(){function e(e,t){for(var n=0;n=a&&(this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}]),e}();t.a=s},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(2),o=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-s?this.ws_.goPrev():e>s&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t=void 0,n=void 0,i={pageX:0,pageY:0};return"undefined"!=typeof e.changedTouches?i=e.changedTouches[0]:"undefined"!=typeof e.originalEvent&&"undefined"!=typeof e.originalEvent.changedTouches&&(i=e.originalEvent.changedTouches[0]),t=e.offsetX||e.layerX||i.pageX,n=e.offsetY||e.layerY||i.pageY,{x:t,y:n}}}]),e}();t.a=u},function(e,t,n){"use strict";function i(){try{var e=new r("t",{detail:{a:"b"}});return"t"===e.type&&"b"===e.detail.a}catch(e){}return!1}var r=window.CustomEvent,o=function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n},a=i()?r:o;t.a=a},function(e,t,n){"use strict";function i(e){return.5-Math.cos(e*Math.PI)/2}function r(e){return e}t.a={swing:i,linear:r}},function(e,t,n){"use strict";function i(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-o.scrollTop,a=o.scrollTop,s=16;if(!t)return o.scrollTop=e,void n();var u=function u(l){l+=s;var c=Math.min(1,l/t),h=r.a.swing(c,l*c,e,i,t);o.scrollTop=Math.floor(a+h*i),l1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=document.createElement(e);return i.id=t,n&&(i.textContent=n),i}},{key:"hide",value:function(e){e.style.display="none"}},{key:"show",value:function(e){e.style.display=""}},{key:"fireEvent",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=new r.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}}]),e}();t.a=o},function(e,t,n){"use strict";var i={ENTER:13,SPACE:32,LEFT:37,UP:38,RIGHT:39,DOWN:40};t.a=i},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,r=void 0!==n&&n,a=t.changeOnClick,o=void 0!==a&&a;if(i(this,e),this.el=document.getElementById("webslides"),this.isMoving=!1,this.slides=null,this.currentSlideI_=-1,this.currentSlide_=null,this.maxSlide_=0,this.isVertical=this.el.classList.contains(l.VERTICAL),this.plugins={},this.interval_=null,this.autoslide_=r,this.changeOnClick_=o,!this.el)throw new Error("Couldn't find the webslides container!");this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.play(),this.onInit_()}return u(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var n=e[t];a.a.isCandidate(n)||this.el.removeChild(n)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var n=c[t];e.plugins[t]=new n(e)})}},{key:"onInit_",value:function(){o.a.fireEvent(this.el,"ws:init")}},{key:"grabSlides_",value:function(){this.slides=o.a.toArray(this.el.childNodes).map(function(e,t){return new a.a(e,t)}),this.maxSlide_=this.slides.length}},{key:"goToSlide",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isValidIndexSlide_(e)&&!this.isMoving){this.isMoving=!0;var n=!1;null!==t?n=t:this.currentSlideI_>=0&&(n=e>this.currentSlideI_);var i=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(n,i,this.onSlideChange_):this.scrollTransitionToSlide_(n,i,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,i){var r=this;this.el.style.overflow="none",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(s.a)(this.currentSlide_.el.offsetTop,0)),n.i(s.a)(t.el.offsetTop,500,function(){r.currentSlide_.hide(),e&&r.currentSlide_.moveAfterLast(),r.el.style.overflow="auto",setTimeout(function(){i.call(r,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){n.i(s.a)(0,0),e||t.moveBeforeFirst(),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_=e,this.currentSlideI_=e.i,this.isMoving=!1,o.a.fireEvent(this.el,"ws:slide-change",{slides:this.maxSlide_,currentSlide0:this.currentSlideI_,currentSlide:this.currentSlideI_+1})}},{key:"goNext",value:function(){var e=this.currentSlideI_+1;e>=this.maxSlide_&&(e=0),this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;e<0&&(e=this.maxSlide_-1),this.goToSlide(e,!1)}},{key:"isValidIndexSlide_",value:function(e){return e>=0&&e=this.maxSlide_)&&(e=0),0!==e)for(var t=0;t0&&(this.interval_=setInterval(this.goNext.bind(this),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}],[{key:"registerPlugin",value:function(e,t){c[e]=t}}]),e}();t.a=h},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(0),a=function(){function e(e,t){for(var n=0;nMath.abs(t)){if(this.ws_.isVertical)return;e.preventDefault()}(Math.abs(t)>=o||Math.abs(n)>=o)&&(this.isGoingUp_||this.isGoingLeft_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}]),e}();t.a=s},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(2),a=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-s?this.ws_.goPrev():e>s&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t=void 0,n=void 0,i={pageX:0,pageY:0};return"undefined"!=typeof e.changedTouches?i=e.changedTouches[0]:"undefined"!=typeof e.originalEvent&&"undefined"!=typeof e.originalEvent.changedTouches&&(i=e.originalEvent.changedTouches[0]),t=e.offsetX||e.layerX||i.pageX,n=e.offsetY||e.layerY||i.pageY,{x:t,y:n}}}]),e}();t.a=u},function(e,t,n){"use strict";function i(){try{var e=new r("t",{detail:{a:"b"}});return"t"===e.type&&"b"===e.detail.a}catch(e){}return!1}var r=window.CustomEvent,a=function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n},o=i()?r:a;t.a=o},function(e,t,n){"use strict";function i(e){return.5-Math.cos(e*Math.PI)/2}function r(e){return e}t.a={swing:i,linear:r}},function(e,t,n){"use strict";function i(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,o=a.scrollTop,s=16;if(!t)return a.scrollTop=e,void n();var u=function u(l){l+=s;var c=Math.min(1,l/t),h=r.a.swing(c,l*c,e,i,t);a.scrollTop=Math.floor(o+h*i),l Date: Mon, 27 Feb 2017 20:14:18 +0100 Subject: [PATCH 12/23] Adding option --- src/js/plugins/click-nav.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/plugins/click-nav.js b/src/js/plugins/click-nav.js index e3ec506..86829b4 100644 --- a/src/js/plugins/click-nav.js +++ b/src/js/plugins/click-nav.js @@ -1,6 +1,7 @@ const CLICKABLE_ELS = [ 'INPUT', 'SELECT', + 'OPTION', 'BUTTON', 'A', 'TEXTAREA' From b04f15f696a992800a193ceddc111fb06d723da5 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 20:14:24 +0100 Subject: [PATCH 13/23] Adding more docs --- src/js/plugins/scroll.js | 31 +++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js index 611ab90..dc59c7a 100644 --- a/src/js/plugins/scroll.js +++ b/src/js/plugins/scroll.js @@ -13,10 +13,29 @@ export default class Scroll { * @private */ this.ws_ = wsInstance; - + /** + * Where the scroll is going to happen. The WebSlides element. + * @type {Element} + * @private + */ this.scrollContainer_ = wsInstance.el; + /** + * Whether movement is happening up or down. + * @type {boolean} + * @private + */ this.isGoingUp_ = false; + /** + * Whether movement is happening left or right. + * @type {boolean} + * @private + */ this.isGoingLeft_ = false; + /** + * Timeout id holder. + * @type {?number} + * @private + */ this.timeout_ = null; if (!MobileDetector.isAny()) { @@ -55,10 +74,14 @@ export default class Scroll { this.isGoingUp_ = wheelDeltaY < 0; this.isGoingLeft_ = wheelDeltaX < 0; - if (!this.ws_.isVertical) { - // If we're mainly moving horizontally, prevent default - if (Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY)) { + // If we're mainly moving horizontally, prevent default + if (Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY)) { + if (!this.ws_.isVertical) { event.preventDefault(); + } else { + // If we're moving horizontally but this is vertical, return to avoid + // unwanted navigation. + return; } } From e50193ebb1dd77fdccb83db6a37edbe1bb4f487d Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 20:14:35 +0100 Subject: [PATCH 14/23] Normalising var --- src/js/modules/webslides.js | 2 +- src/js/plugins/click-nav.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/modules/webslides.js b/src/js/modules/webslides.js index eb05041..d4fc5aa 100644 --- a/src/js/modules/webslides.js +++ b/src/js/modules/webslides.js @@ -86,7 +86,7 @@ export default class WebSlides { */ this.autoslide_ = autoslide; /** - * Whether navigation should initiate on click + * Whether navigation should initiate on click or not. * @type {boolean} * @private */ diff --git a/src/js/plugins/click-nav.js b/src/js/plugins/click-nav.js index 86829b4..6acf8de 100644 --- a/src/js/plugins/click-nav.js +++ b/src/js/plugins/click-nav.js @@ -19,7 +19,7 @@ export default class ClickNav { */ this.ws_ = wsInstance; - if (wsInstance.changeOnClick) { + if (wsInstance.changeOnClick_) { this.ws_.el.addEventListener('click', this.onClick_.bind(this)); } } From bc64fcef7ef45894d11b3d73ecb5eb3e411130e9 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 20:14:41 +0100 Subject: [PATCH 15/23] Adding more docs --- docs/click-to-nav.md | 16 ++++++++++++++++ docs/technical.md | 1 + 2 files changed, 17 insertions(+) create mode 100644 docs/click-to-nav.md diff --git a/docs/click-to-nav.md b/docs/click-to-nav.md new file mode 100644 index 0000000..4f459ec --- /dev/null +++ b/docs/click-to-nav.md @@ -0,0 +1,16 @@ +## Click To Nav plugin + +This plugin is included by default but disabled. In order to enable it, the option `changeOnClick` must be passed as +`true`. + +```javascript +const ws = new WebSlides({ changeOnClick: true }); +``` + +This will make every click to navigate to the next slide except for clicks that happens on the following elements: + +* `input`. +* `select` or `option`. +* `button`. +* `a`. +* Any element with the attribute `data-prevent-nav`. diff --git a/docs/technical.md b/docs/technical.md index edde70b..85f5e3b 100644 --- a/docs/technical.md +++ b/docs/technical.md @@ -24,6 +24,7 @@ WebSlides constructor accepts an object with options. | Param | Type | Default | Description | |-----------|----------------|-----------|-------------------------------------------------------------------------------| | `autoslide` | `number` or `boolean` | `false` | Amount of milliseconds to wait to go to next slide automatically. | +| `changeOnClick` | `boolean` | `false` | If true, clicking on the page will go to the next slide unless it's a clickable element. See [ClickToNav docs](./click-to-nav.md) for more info. | ```javascript From 2e6471e2eec606b72f0a9e19796346579a2b80f5 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 20:16:26 +0100 Subject: [PATCH 16/23] Increasing timeout --- src/js/plugins/scroll.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js index dc59c7a..678cf46 100644 --- a/src/js/plugins/scroll.js +++ b/src/js/plugins/scroll.js @@ -55,7 +55,7 @@ export default class Scroll { * @private */ onSlideChange_() { - this.timeout_ = setTimeout(() => { this.timeout_ = null; }, 400); + this.timeout_ = setTimeout(() => { this.timeout_ = null; }, 500); } /** From 14e1b5b7b8f060f40e26c339bc19a8e24fb7cd4a Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 20:16:37 +0100 Subject: [PATCH 17/23] Disting --- static/js/webslides.js | 4 ++-- static/js/webslides.min.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/static/js/webslides.js b/static/js/webslides.js index 6be1c82..d5525f9 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -861,7 +861,7 @@ var _createClass = function () { function defineProperties(target, props) { for function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -var CLICKABLE_ELS = ['INPUT', 'SELECT', 'BUTTON', 'A', 'TEXTAREA']; +var CLICKABLE_ELS = ['INPUT', 'SELECT', 'OPTION', 'BUTTON', 'A', 'TEXTAREA']; var ClickNav = function () { /** @@ -1396,7 +1396,7 @@ var Scroll = function () { this.timeout_ = setTimeout(function () { _this.timeout_ = null; - }, 400); + }, 500); } /** diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 01e13bc..35162e1 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1 +1 @@ -!function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/static/js/",t(t.s=16)}([function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(13),a=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=document.createElement(e);return i.id=t,n&&(i.textContent=n),i}},{key:"hide",value:function(e){e.style.display="none"}},{key:"show",value:function(e){e.style.display=""}},{key:"fireEvent",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=new r.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}}]),e}();t.a=o},function(e,t,n){"use strict";var i={ENTER:13,SPACE:32,LEFT:37,UP:38,RIGHT:39,DOWN:40};t.a=i},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,r=void 0!==n&&n,a=t.changeOnClick,o=void 0!==a&&a;if(i(this,e),this.el=document.getElementById("webslides"),this.isMoving=!1,this.slides=null,this.currentSlideI_=-1,this.currentSlide_=null,this.maxSlide_=0,this.isVertical=this.el.classList.contains(l.VERTICAL),this.plugins={},this.interval_=null,this.autoslide_=r,this.changeOnClick_=o,!this.el)throw new Error("Couldn't find the webslides container!");this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.play(),this.onInit_()}return u(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var n=e[t];a.a.isCandidate(n)||this.el.removeChild(n)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var n=c[t];e.plugins[t]=new n(e)})}},{key:"onInit_",value:function(){o.a.fireEvent(this.el,"ws:init")}},{key:"grabSlides_",value:function(){this.slides=o.a.toArray(this.el.childNodes).map(function(e,t){return new a.a(e,t)}),this.maxSlide_=this.slides.length}},{key:"goToSlide",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isValidIndexSlide_(e)&&!this.isMoving){this.isMoving=!0;var n=!1;null!==t?n=t:this.currentSlideI_>=0&&(n=e>this.currentSlideI_);var i=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(n,i,this.onSlideChange_):this.scrollTransitionToSlide_(n,i,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,i){var r=this;this.el.style.overflow="none",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(s.a)(this.currentSlide_.el.offsetTop,0)),n.i(s.a)(t.el.offsetTop,500,function(){r.currentSlide_.hide(),e&&r.currentSlide_.moveAfterLast(),r.el.style.overflow="auto",setTimeout(function(){i.call(r,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){n.i(s.a)(0,0),e||t.moveBeforeFirst(),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_=e,this.currentSlideI_=e.i,this.isMoving=!1,o.a.fireEvent(this.el,"ws:slide-change",{slides:this.maxSlide_,currentSlide0:this.currentSlideI_,currentSlide:this.currentSlideI_+1})}},{key:"goNext",value:function(){var e=this.currentSlideI_+1;e>=this.maxSlide_&&(e=0),this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;e<0&&(e=this.maxSlide_-1),this.goToSlide(e,!1)}},{key:"isValidIndexSlide_",value:function(e){return e>=0&&e=this.maxSlide_)&&(e=0),0!==e)for(var t=0;t0&&(this.interval_=setInterval(this.goNext.bind(this),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}],[{key:"registerPlugin",value:function(e,t){c[e]=t}}]),e}();t.a=h},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(0),a=function(){function e(e,t){for(var n=0;nMath.abs(t)){if(this.ws_.isVertical)return;e.preventDefault()}(Math.abs(t)>=o||Math.abs(n)>=o)&&(this.isGoingUp_||this.isGoingLeft_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}]),e}();t.a=s},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(2),a=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-s?this.ws_.goPrev():e>s&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t=void 0,n=void 0,i={pageX:0,pageY:0};return"undefined"!=typeof e.changedTouches?i=e.changedTouches[0]:"undefined"!=typeof e.originalEvent&&"undefined"!=typeof e.originalEvent.changedTouches&&(i=e.originalEvent.changedTouches[0]),t=e.offsetX||e.layerX||i.pageX,n=e.offsetY||e.layerY||i.pageY,{x:t,y:n}}}]),e}();t.a=u},function(e,t,n){"use strict";function i(){try{var e=new r("t",{detail:{a:"b"}});return"t"===e.type&&"b"===e.detail.a}catch(e){}return!1}var r=window.CustomEvent,a=function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n},o=i()?r:a;t.a=o},function(e,t,n){"use strict";function i(e){return.5-Math.cos(e*Math.PI)/2}function r(e){return e}t.a={swing:i,linear:r}},function(e,t,n){"use strict";function i(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,o=a.scrollTop,s=16;if(!t)return a.scrollTop=e,void n();var u=function u(l){l+=s;var c=Math.min(1,l/t),h=r.a.swing(c,l*c,e,i,t);a.scrollTop=Math.floor(o+h*i),l1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=document.createElement(e);return i.id=t,n&&(i.textContent=n),i}},{key:"hide",value:function(e){e.style.display="none"}},{key:"show",value:function(e){e.style.display=""}},{key:"fireEvent",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=new r.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}}]),e}();t.a=o},function(e,t,n){"use strict";var i={ENTER:13,SPACE:32,LEFT:37,UP:38,RIGHT:39,DOWN:40};t.a=i},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,r=void 0!==n&&n,a=t.changeOnClick,o=void 0!==a&&a;if(i(this,e),this.el=document.getElementById("webslides"),this.isMoving=!1,this.slides=null,this.currentSlideI_=-1,this.currentSlide_=null,this.maxSlide_=0,this.isVertical=this.el.classList.contains(l.VERTICAL),this.plugins={},this.interval_=null,this.autoslide_=r,this.changeOnClick_=o,!this.el)throw new Error("Couldn't find the webslides container!");this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.play(),this.onInit_()}return u(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var n=e[t];a.a.isCandidate(n)||this.el.removeChild(n)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var n=c[t];e.plugins[t]=new n(e)})}},{key:"onInit_",value:function(){o.a.fireEvent(this.el,"ws:init")}},{key:"grabSlides_",value:function(){this.slides=o.a.toArray(this.el.childNodes).map(function(e,t){return new a.a(e,t)}),this.maxSlide_=this.slides.length}},{key:"goToSlide",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isValidIndexSlide_(e)&&!this.isMoving){this.isMoving=!0;var n=!1;null!==t?n=t:this.currentSlideI_>=0&&(n=e>this.currentSlideI_);var i=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(n,i,this.onSlideChange_):this.scrollTransitionToSlide_(n,i,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,i){var r=this;this.el.style.overflow="none",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(s.a)(this.currentSlide_.el.offsetTop,0)),n.i(s.a)(t.el.offsetTop,500,function(){r.currentSlide_.hide(),e&&r.currentSlide_.moveAfterLast(),r.el.style.overflow="auto",setTimeout(function(){i.call(r,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){n.i(s.a)(0,0),e||t.moveBeforeFirst(),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_=e,this.currentSlideI_=e.i,this.isMoving=!1,o.a.fireEvent(this.el,"ws:slide-change",{slides:this.maxSlide_,currentSlide0:this.currentSlideI_,currentSlide:this.currentSlideI_+1})}},{key:"goNext",value:function(){var e=this.currentSlideI_+1;e>=this.maxSlide_&&(e=0),this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;e<0&&(e=this.maxSlide_-1),this.goToSlide(e,!1)}},{key:"isValidIndexSlide_",value:function(e){return e>=0&&e=this.maxSlide_)&&(e=0),0!==e)for(var t=0;t0&&(this.interval_=setInterval(this.goNext.bind(this),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}],[{key:"registerPlugin",value:function(e,t){c[e]=t}}]),e}();t.a=h},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(0),a=function(){function e(e,t){for(var n=0;nMath.abs(t)){if(this.ws_.isVertical)return;e.preventDefault()}(Math.abs(t)>=o||Math.abs(n)>=o)&&(this.isGoingUp_||this.isGoingLeft_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}]),e}();t.a=s},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(2),a=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-s?this.ws_.goPrev():e>s&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t=void 0,n=void 0,i={pageX:0,pageY:0};return"undefined"!=typeof e.changedTouches?i=e.changedTouches[0]:"undefined"!=typeof e.originalEvent&&"undefined"!=typeof e.originalEvent.changedTouches&&(i=e.originalEvent.changedTouches[0]),t=e.offsetX||e.layerX||i.pageX,n=e.offsetY||e.layerY||i.pageY,{x:t,y:n}}}]),e}();t.a=u},function(e,t,n){"use strict";function i(){try{var e=new r("t",{detail:{a:"b"}});return"t"===e.type&&"b"===e.detail.a}catch(e){}return!1}var r=window.CustomEvent,a=function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n},o=i()?r:a;t.a=o},function(e,t,n){"use strict";function i(e){return.5-Math.cos(e*Math.PI)/2}function r(e){return e}t.a={swing:i,linear:r}},function(e,t,n){"use strict";function i(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,o=a.scrollTop,s=16;if(!t)return a.scrollTop=e,void n();var u=function u(l){l+=s;var c=Math.min(1,l/t),h=r.a.swing(c,l*c,e,i,t);a.scrollTop=Math.floor(o+h*i),l Date: Mon, 27 Feb 2017 20:24:56 +0100 Subject: [PATCH 18/23] Fixing issue with scrolling --- src/js/plugins/scroll.js | 8 +++++--- static/js/webslides.js | 7 ++++--- static/js/webslides.min.js | 2 +- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js index 678cf46..d543f26 100644 --- a/src/js/plugins/scroll.js +++ b/src/js/plugins/scroll.js @@ -55,7 +55,7 @@ export default class Scroll { * @private */ onSlideChange_() { - this.timeout_ = setTimeout(() => { this.timeout_ = null; }, 500); + this.timeout_ = setTimeout(() => { this.timeout_ = null; }, 450); } /** @@ -71,12 +71,13 @@ export default class Scroll { } const { deltaY: wheelDeltaY, deltaX: wheelDeltaX } = event; + const isVertical = this.ws_.isVertical; this.isGoingUp_ = wheelDeltaY < 0; this.isGoingLeft_ = wheelDeltaX < 0; // If we're mainly moving horizontally, prevent default if (Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY)) { - if (!this.ws_.isVertical) { + if (!isVertical) { event.preventDefault(); } else { // If we're moving horizontally but this is vertical, return to avoid @@ -87,7 +88,8 @@ export default class Scroll { if (Math.abs(wheelDeltaY) >= MIN_WHEEL_DELTA || Math.abs(wheelDeltaX) >= MIN_WHEEL_DELTA) { - if (this.isGoingUp_ || this.isGoingLeft_) { + if (isVertical && this.isGoingUp_ || + !isVertical && this.isGoingLeft_) { this.ws_.goPrev(); } else { this.ws_.goNext(); diff --git a/static/js/webslides.js b/static/js/webslides.js index d5525f9..6a61439 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1396,7 +1396,7 @@ var Scroll = function () { this.timeout_ = setTimeout(function () { _this.timeout_ = null; - }, 500); + }, 450); } /** @@ -1417,12 +1417,13 @@ var Scroll = function () { var wheelDeltaY = event.deltaY, wheelDeltaX = event.deltaX; + var isVertical = this.ws_.isVertical; this.isGoingUp_ = wheelDeltaY < 0; this.isGoingLeft_ = wheelDeltaX < 0; // If we're mainly moving horizontally, prevent default if (Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY)) { - if (!this.ws_.isVertical) { + if (!isVertical) { event.preventDefault(); } else { // If we're moving horizontally but this is vertical, return to avoid @@ -1432,7 +1433,7 @@ var Scroll = function () { } if (Math.abs(wheelDeltaY) >= MIN_WHEEL_DELTA || Math.abs(wheelDeltaX) >= MIN_WHEEL_DELTA) { - if (this.isGoingUp_ || this.isGoingLeft_) { + if (isVertical && this.isGoingUp_ || !isVertical && this.isGoingLeft_) { this.ws_.goPrev(); } else { this.ws_.goNext(); diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 35162e1..6b819e9 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1 +1 @@ -!function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/static/js/",t(t.s=16)}([function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(13),a=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=document.createElement(e);return i.id=t,n&&(i.textContent=n),i}},{key:"hide",value:function(e){e.style.display="none"}},{key:"show",value:function(e){e.style.display=""}},{key:"fireEvent",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=new r.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}}]),e}();t.a=o},function(e,t,n){"use strict";var i={ENTER:13,SPACE:32,LEFT:37,UP:38,RIGHT:39,DOWN:40};t.a=i},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,r=void 0!==n&&n,a=t.changeOnClick,o=void 0!==a&&a;if(i(this,e),this.el=document.getElementById("webslides"),this.isMoving=!1,this.slides=null,this.currentSlideI_=-1,this.currentSlide_=null,this.maxSlide_=0,this.isVertical=this.el.classList.contains(l.VERTICAL),this.plugins={},this.interval_=null,this.autoslide_=r,this.changeOnClick_=o,!this.el)throw new Error("Couldn't find the webslides container!");this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.play(),this.onInit_()}return u(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var n=e[t];a.a.isCandidate(n)||this.el.removeChild(n)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var n=c[t];e.plugins[t]=new n(e)})}},{key:"onInit_",value:function(){o.a.fireEvent(this.el,"ws:init")}},{key:"grabSlides_",value:function(){this.slides=o.a.toArray(this.el.childNodes).map(function(e,t){return new a.a(e,t)}),this.maxSlide_=this.slides.length}},{key:"goToSlide",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isValidIndexSlide_(e)&&!this.isMoving){this.isMoving=!0;var n=!1;null!==t?n=t:this.currentSlideI_>=0&&(n=e>this.currentSlideI_);var i=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(n,i,this.onSlideChange_):this.scrollTransitionToSlide_(n,i,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,i){var r=this;this.el.style.overflow="none",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(s.a)(this.currentSlide_.el.offsetTop,0)),n.i(s.a)(t.el.offsetTop,500,function(){r.currentSlide_.hide(),e&&r.currentSlide_.moveAfterLast(),r.el.style.overflow="auto",setTimeout(function(){i.call(r,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){n.i(s.a)(0,0),e||t.moveBeforeFirst(),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_=e,this.currentSlideI_=e.i,this.isMoving=!1,o.a.fireEvent(this.el,"ws:slide-change",{slides:this.maxSlide_,currentSlide0:this.currentSlideI_,currentSlide:this.currentSlideI_+1})}},{key:"goNext",value:function(){var e=this.currentSlideI_+1;e>=this.maxSlide_&&(e=0),this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;e<0&&(e=this.maxSlide_-1),this.goToSlide(e,!1)}},{key:"isValidIndexSlide_",value:function(e){return e>=0&&e=this.maxSlide_)&&(e=0),0!==e)for(var t=0;t0&&(this.interval_=setInterval(this.goNext.bind(this),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}],[{key:"registerPlugin",value:function(e,t){c[e]=t}}]),e}();t.a=h},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(0),a=function(){function e(e,t){for(var n=0;nMath.abs(t)){if(this.ws_.isVertical)return;e.preventDefault()}(Math.abs(t)>=o||Math.abs(n)>=o)&&(this.isGoingUp_||this.isGoingLeft_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}]),e}();t.a=s},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(2),a=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-s?this.ws_.goPrev():e>s&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t=void 0,n=void 0,i={pageX:0,pageY:0};return"undefined"!=typeof e.changedTouches?i=e.changedTouches[0]:"undefined"!=typeof e.originalEvent&&"undefined"!=typeof e.originalEvent.changedTouches&&(i=e.originalEvent.changedTouches[0]),t=e.offsetX||e.layerX||i.pageX,n=e.offsetY||e.layerY||i.pageY,{x:t,y:n}}}]),e}();t.a=u},function(e,t,n){"use strict";function i(){try{var e=new r("t",{detail:{a:"b"}});return"t"===e.type&&"b"===e.detail.a}catch(e){}return!1}var r=window.CustomEvent,a=function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n},o=i()?r:a;t.a=o},function(e,t,n){"use strict";function i(e){return.5-Math.cos(e*Math.PI)/2}function r(e){return e}t.a={swing:i,linear:r}},function(e,t,n){"use strict";function i(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,o=a.scrollTop,s=16;if(!t)return a.scrollTop=e,void n();var u=function u(l){l+=s;var c=Math.min(1,l/t),h=r.a.swing(c,l*c,e,i,t);a.scrollTop=Math.floor(o+h*i),l1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=document.createElement(e);return i.id=t,n&&(i.textContent=n),i}},{key:"hide",value:function(e){e.style.display="none"}},{key:"show",value:function(e){e.style.display=""}},{key:"fireEvent",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=new r.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}}]),e}();t.a=o},function(e,t,n){"use strict";var i={ENTER:13,SPACE:32,LEFT:37,UP:38,RIGHT:39,DOWN:40};t.a=i},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,r=void 0!==n&&n,a=t.changeOnClick,o=void 0!==a&&a;if(i(this,e),this.el=document.getElementById("webslides"),this.isMoving=!1,this.slides=null,this.currentSlideI_=-1,this.currentSlide_=null,this.maxSlide_=0,this.isVertical=this.el.classList.contains(l.VERTICAL),this.plugins={},this.interval_=null,this.autoslide_=r,this.changeOnClick_=o,!this.el)throw new Error("Couldn't find the webslides container!");this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.play(),this.onInit_()}return u(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var n=e[t];a.a.isCandidate(n)||this.el.removeChild(n)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var n=c[t];e.plugins[t]=new n(e)})}},{key:"onInit_",value:function(){o.a.fireEvent(this.el,"ws:init")}},{key:"grabSlides_",value:function(){this.slides=o.a.toArray(this.el.childNodes).map(function(e,t){return new a.a(e,t)}),this.maxSlide_=this.slides.length}},{key:"goToSlide",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isValidIndexSlide_(e)&&!this.isMoving){this.isMoving=!0;var n=!1;null!==t?n=t:this.currentSlideI_>=0&&(n=e>this.currentSlideI_);var i=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(n,i,this.onSlideChange_):this.scrollTransitionToSlide_(n,i,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,i){var r=this;this.el.style.overflow="none",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(s.a)(this.currentSlide_.el.offsetTop,0)),n.i(s.a)(t.el.offsetTop,500,function(){r.currentSlide_.hide(),e&&r.currentSlide_.moveAfterLast(),r.el.style.overflow="auto",setTimeout(function(){i.call(r,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){n.i(s.a)(0,0),e||t.moveBeforeFirst(),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_=e,this.currentSlideI_=e.i,this.isMoving=!1,o.a.fireEvent(this.el,"ws:slide-change",{slides:this.maxSlide_,currentSlide0:this.currentSlideI_,currentSlide:this.currentSlideI_+1})}},{key:"goNext",value:function(){var e=this.currentSlideI_+1;e>=this.maxSlide_&&(e=0),this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;e<0&&(e=this.maxSlide_-1),this.goToSlide(e,!1)}},{key:"isValidIndexSlide_",value:function(e){return e>=0&&e=this.maxSlide_)&&(e=0),0!==e)for(var t=0;t0&&(this.interval_=setInterval(this.goNext.bind(this),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}],[{key:"registerPlugin",value:function(e,t){c[e]=t}}]),e}();t.a=h},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(0),a=function(){function e(e,t){for(var n=0;nMath.abs(t)){if(i)return;e.preventDefault()}(Math.abs(t)>=o||Math.abs(n)>=o)&&(i&&this.isGoingUp_||!i&&this.isGoingLeft_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}]),e}();t.a=s},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var r=n(2),a=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-s?this.ws_.goPrev():e>s&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t=void 0,n=void 0,i={pageX:0,pageY:0};return"undefined"!=typeof e.changedTouches?i=e.changedTouches[0]:"undefined"!=typeof e.originalEvent&&"undefined"!=typeof e.originalEvent.changedTouches&&(i=e.originalEvent.changedTouches[0]),t=e.offsetX||e.layerX||i.pageX,n=e.offsetY||e.layerY||i.pageY,{x:t,y:n}}}]),e}();t.a=u},function(e,t,n){"use strict";function i(){try{var e=new r("t",{detail:{a:"b"}});return"t"===e.type&&"b"===e.detail.a}catch(e){}return!1}var r=window.CustomEvent,a=function(e,t){var n=document.createEvent("CustomEvent");return t?n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail):n.initCustomEvent(e,!1,!1,void 0),n},o=i()?r:a;t.a=o},function(e,t,n){"use strict";function i(e){return.5-Math.cos(e*Math.PI)/2}function r(e){return e}t.a={swing:i,linear:r}},function(e,t,n){"use strict";function i(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,o=a.scrollTop,s=16;if(!t)return a.scrollTop=e,void n();var u=function u(l){l+=s;var c=Math.min(1,l/t),h=r.a.swing(c,l*c,e,i,t);a.scrollTop=Math.floor(o+h*i),l Date: Mon, 27 Feb 2017 20:40:39 +0100 Subject: [PATCH 19/23] Disable elastic scrolling/bounce, hide scrollbar --- static/css/base.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index 224b1c9..3f59465 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -302,6 +302,8 @@ dd { 1. Base --> Baseline: 8px = .8rem =========================================== */ +/* -- Disable elastic scrolling/bounce -- */ + html, body { width: 100%; @@ -309,15 +311,22 @@ body { overflow: hidden; } - #webslides { height: 100vh; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } +/* -- Hide scrollbar, but still being able to scroll -- */ -/* == Prototype faster - Vertical rhythm == */ +#webslides { + -ms-overflow-style: none; /* IE 10+ */ +} +#webslides::-webkit-scrollbar { + display: none; /* Safari and Chrome */ +} + +/* -- Prototype faster - Vertical rhythm -- */ body.baseline { background: url(../images/baseline.png) left top .8rem/.8rem; From 508cdafea5bdf0d7094a7f3fe6ccdca43cab1b79 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 22:15:28 +0100 Subject: [PATCH 20/23] Fixing scroll bug --- src/js/plugins/scroll.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js index d543f26..ff2018b 100644 --- a/src/js/plugins/scroll.js +++ b/src/js/plugins/scroll.js @@ -72,11 +72,13 @@ export default class Scroll { const { deltaY: wheelDeltaY, deltaX: wheelDeltaX } = event; const isVertical = this.ws_.isVertical; + const isHorizontalMovement = Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY); this.isGoingUp_ = wheelDeltaY < 0; this.isGoingLeft_ = wheelDeltaX < 0; + // If we're mainly moving horizontally, prevent default - if (Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY)) { + if (isHorizontalMovement) { if (!isVertical) { event.preventDefault(); } else { @@ -88,8 +90,8 @@ export default class Scroll { if (Math.abs(wheelDeltaY) >= MIN_WHEEL_DELTA || Math.abs(wheelDeltaX) >= MIN_WHEEL_DELTA) { - if (isVertical && this.isGoingUp_ || - !isVertical && this.isGoingLeft_) { + if ((isHorizontalMovement && this.isGoingLeft_) || + (!isHorizontalMovement && this.isGoingUp_)) { this.ws_.goPrev(); } else { this.ws_.goNext(); From e65826dbb6a058017a7b7a21c21017c1b0b91abb Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 22:26:49 +0100 Subject: [PATCH 21/23] Updating the CHANGELOG --- CHANGELOG.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c9390f..51c5fed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,22 @@ +# 1.1.0 + +## Bugfixes + +- Fixed a bug which caused Chrome on OSX to stutter a lot on vertical transitioning due to elastic scroll bounce. +- [#28] Fixed scroll on Firefox. +- [#38] Fixed a bug in Safari which lead to unexpected behaviour using any form of movements. +- [#10] Fixed animation flash on Safari. + +## New Features + +- Adding option to click to go to the next slide. Read more [here](https://github.com/jlantunez/webslides/blob/master/docs/click-to-nav.md). +- [#1] Improved sliding with mouse scroll and touchpad. It's now possible to use scroll to move an horizontal presentation. +It's also possible to scroll horizontally on horizontal presentations to move forward/backwards the presentation. + +## Regression + +- Introduced a minor bug on iOS Safari which leads to the bottom part of the page not being visible on the first scroll. This is likely a browser bug but it has been unearthed in this version due to a much needed improvement on scrolling behaviour bugs. We're trying to investigate a bit more and will provide a fix ASAP. + # 1.0.0 (2017-02-23) This release is a special one since it sets up in the path of a better development environment. Although it's far from From 91c00a2fe3aa8f611be264a61d70423f0d13962f Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Mon, 27 Feb 2017 22:28:30 +0100 Subject: [PATCH 22/23] Linking to issues --- CHANGELOG.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 51c5fed..abf9d7d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,14 +3,14 @@ ## Bugfixes - Fixed a bug which caused Chrome on OSX to stutter a lot on vertical transitioning due to elastic scroll bounce. -- [#28] Fixed scroll on Firefox. -- [#38] Fixed a bug in Safari which lead to unexpected behaviour using any form of movements. -- [#10] Fixed animation flash on Safari. +- [[#28](https://github.com/jlantunez/webslides/issues/28)] Fixed scroll on Firefox. +- [[#38](https://github.com/jlantunez/webslides/issues/38)] Fixed a bug in Safari which lead to unexpected behaviour using any form of movements. +- [[#10](https://github.com/jlantunez/webslides/issues/10)] Fixed animation flash on Safari. ## New Features -- Adding option to click to go to the next slide. Read more [here](https://github.com/jlantunez/webslides/blob/master/docs/click-to-nav.md). -- [#1] Improved sliding with mouse scroll and touchpad. It's now possible to use scroll to move an horizontal presentation. +- [[#1](https://github.com/jlantunez/webslides/issues/1)] Adding option to click to go to the next slide. Read more [here](https://github.com/jlantunez/webslides/blob/master/docs/click-to-nav.md). +- [[#1](https://github.com/jlantunez/webslides/issues/1)] Improved sliding with mouse scroll and touchpad. It's now possible to use scroll to move an horizontal presentation. It's also possible to scroll horizontally on horizontal presentations to move forward/backwards the presentation. ## Regression From 78b6e74b828f69ea6b552f23358e5f4720ca31e1 Mon Sep 17 00:00:00 2001 From: Antonio Laguna Date: Tue, 28 Feb 2017 08:16:06 +0100 Subject: [PATCH 23/23] Adding contributors --- package.json | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 28c3a04..2fa1010 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,16 @@ "presentation", "css" ], - "author": "Jose Luís Antúnez", + "author": "Jose Luís Antúnez ", + "contributors": [ + { + "name": "Luís Sacristán" + }, + { + "name": "Antonio Laguna", + "email": "a.laguna@funcion13.com" + } + ], "license": "MIT", "bugs": { "url": "https://github.com/jlantunez/webslides/issues"