mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-17 10:30:51 +02:00
Code Issues Releases Wiki Activity

Merge pull request #45 from jlantunez/scroll-fix

Browse Source 
Adding a few changes
This commit is contained in:
Antonio Laguna
2017-02-28 11:09:08 +01:00
committed by GitHub
parent f80106a4ab 78b6e74b82
commit 12bac7afc5
13 changed files with 509 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
CHANGELOG.md
View File

@@ -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](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
- [[#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
- 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

16
docs/click-to-nav.md Normal file
View File

@@ -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`.

1
docs/technical.md
View File

@@ -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

11
package.json
View File

@@ -12,7 +12,16 @@
"presentation",
"css"
],
"author": "Jose Luís Antúnez",
"author": "Jose Luís Antúnez <jlantunez@gmail.com>",
"contributors": [
{
"name": "Luís Sacristán"
},
{
"name": "Antonio Laguna",
"email": "a.laguna@funcion13.com"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/jlantunez/webslides/issues"

29
src/js/modules/webslides.js
View File

@@ -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'
@@ -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 or not.
* @type {boolean}
* @private
*/
this.changeOnClick_ = changeOnClick;
if (!this.el) {
throw new Error('Couldn\'t find the webslides container!');
@@ -186,29 +195,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 +229,7 @@ export default class WebSlides {
* @private
*/
transitionToSlide_(isMovingForward, nextSlide, callback) {
ScrollHelper.scrollTo(0, 0);
scrollTo(0, 0);
if (!isMovingForward) {
nextSlide.moveBeforeFirst();

39
src/js/plugins/click-nav.js Normal file
View File

@@ -0,0 +1,39 @@
const CLICKABLE_ELS = [
'INPUT',
'SELECT',
'OPTION',
'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();
}
}
}

2
src/js/plugins/plugins.js
View File

@@ -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,

71
src/js/plugins/scroll.js
View File

@@ -1,4 +1,4 @@
import ScrollHelper from '../utils/scroll-to';
import MobileDetector from '../utils/mobile-detector';
const MIN_WHEEL_DELTA = 40;
@@ -13,16 +13,51 @@ export default class Scroll {
* @private
*/
this.ws_ = wsInstance;
this.scrollContainer_ = ScrollHelper.getScrollableContainer();
/**
* 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) {
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; }, 450);
}
/**
* 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,15 +65,33 @@ 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;
const isVertical = this.ws_.isVertical;
const isHorizontalMovement = Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY);
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 (isHorizontalMovement) {
if (!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 ((isHorizontalMovement && this.isGoingLeft_) ||
(!isHorizontalMovement && this.isGoingUp_)) {
this.ws_.goPrev();
} else {
this.ws_.goNext();

16
src/js/utils/dom.js
View File

@@ -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.

42
src/js/utils/scroll-to.js
View File

@@ -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 };

38
static/css/base.css
View File

@@ -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);
}
@@ -298,11 +302,31 @@ dd {
1. Base --> Baseline: 8px = .8rem
=========================================== */
/* -- Disable elastic scrolling/bounce -- */
html,
body {
overflow-x: hidden;
width: 100%;
height: 100%;
overflow: hidden;
}
/* == Prototype faster - Vertical rhythm == */
#webslides {
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
/* -- Hide scrollbar, but still being able to scroll -- */
#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;

528
static/js/webslides.js
View File

@@ -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"); } }
@@ -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,90 +195,109 @@ 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 */
/***/ (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__(2);
/* 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"); } }
@@ -304,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,
@@ -316,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);
@@ -381,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!');
@@ -455,7 +474,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 +522,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 +530,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 +566,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 +706,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);
}
}
@@ -839,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', 'OPTION', '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; }; }();
@@ -900,7 +969,7 @@ var Grid = function () {
/* harmony default export */ __webpack_exports__["a"] = Grid;
/***/ }),
/* 6 */
/* 7 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -968,7 +1037,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
@@ -1000,7 +1069,7 @@ var Hash = function () {
/* harmony default export */ __webpack_exports__["a"] = Hash;
/***/ }),
/* 7 */
/* 8 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -1071,7 +1140,7 @@ var Keyboard = function () {
/* harmony default export */ __webpack_exports__["a"] = Keyboard;
/***/ }),
/* 8 */
/* 9 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -1223,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);
@@ -1241,20 +1312,21 @@ 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";
/* 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"); } }
@@ -1276,36 +1348,92 @@ var Scroll = function () {
* @private
*/
this.ws_ = wsInstance;
this.scrollContainer_ = __WEBPACK_IMPORTED_MODULE_0__utils_scroll_to__["a" /* default */].getScrollableContainer();
/**
* 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) {
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;
}, 450);
}
/**
* 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;
var isVertical = this.ws_.isVertical;
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 (!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 (isVertical && this.isGoingUp_ || !isVertical && this.isGoingLeft_) {
this.ws_.goPrev();
} else {
this.ws_.goNext();
@@ -1323,11 +1451,11 @@ var Scroll = function () {
;
/***/ }),
/* 11 */
/* 12 */
/***/ (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"); } }
@@ -1503,7 +1631,7 @@ var Touch = function () {
;
/***/ }),
/* 12 */
/* 13 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -1546,7 +1674,7 @@ var WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent;
/* harmony default export */ __webpack_exports__["a"] = WSCustomEvent;
/***/ }),
/* 13 */
/* 14 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
@@ -1571,106 +1699,58 @@ function linear(p) {
/* harmony default export */ __webpack_exports__["a"] = { swing: swing, linear: linear };
/***/ }),
/* 14 */
/* 15 */
/***/ (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__(14);
/* 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 */
/* 16 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";

2
static/js/webslides.min.js vendored
View File

File diff suppressed because one or more lines are too long