From 0768afe146e470a313b7b8180be8e7f3f7903087 Mon Sep 17 00:00:00 2001 From: Luis Date: Fri, 31 Mar 2017 18:15:35 +0200 Subject: [PATCH 01/20] First version zoom --- src/js/modules/webslides.js | 3 ++- src/js/plugins/plugins.js | 4 +++- src/js/utils/dom.js | 23 +++++++++++++++++++++++ src/js/utils/keys.js | 4 +++- 4 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/js/modules/webslides.js b/src/js/modules/webslides.js index 24b6cf8d..6f69d6a4 100644 --- a/src/js/modules/webslides.js +++ b/src/js/modules/webslides.js @@ -19,7 +19,8 @@ const PLUGINS = { 'scroll': Plugins.Scroll, 'touch': Plugins.Touch, 'video': Plugins.Video, - 'youtube': Plugins.YouTube + 'youtube': Plugins.YouTube, + 'zoom': Plugins.Zoom }; diff --git a/src/js/plugins/plugins.js b/src/js/plugins/plugins.js index 0f8a2342..038eb85c 100644 --- a/src/js/plugins/plugins.js +++ b/src/js/plugins/plugins.js @@ -8,6 +8,7 @@ import Scroll from './scroll'; import Touch from './touch'; import Video from './video'; import YouTube from './youtube'; +import Zoom from './zoom'; export default { AutoSlide, @@ -19,5 +20,6 @@ export default { Scroll, Touch, Video, - YouTube + YouTube, + Zoom }; diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js index 181ddf39..69c66d91 100644 --- a/src/js/utils/dom.js +++ b/src/js/utils/dom.js @@ -165,4 +165,27 @@ export default class DOM { return result; } + + /** + * Gets the integer value of a style property + * @param {string} prop CSS property value + * @return {integer} The property without the units + */ + static parseSize(prop) { + return Number( prop.replace( /[^\d\.]/g, '' ) ); + } + + /** + * Wraps a HTML structure arrond a element + * @param {Element} elem the element to be wrapped + * @param {string} tag the new element tag + * @return {Element} the new element + */ + static wrap(elem, tag) { + const wrap = document.createElement(tag); + elem.parentElement.insertBefore(wrap, elem); + wrap.appendChild(elem); + + return wrap; + } } diff --git a/src/js/utils/keys.js b/src/js/utils/keys.js index 2a6041f3..b0de0237 100644 --- a/src/js/utils/keys.js +++ b/src/js/utils/keys.js @@ -8,7 +8,9 @@ const Keys = { LEFT: 37, UP: 38, RIGHT: 39, - DOWN: 40 + DOWN: 40, + PLUS: [107, 171], + MINUS: [109, 173] }; export default Keys; From eed75b0eb2c7496425b8c1f4af67966a0c86ae1b Mon Sep 17 00:00:00 2001 From: Luis Date: Fri, 31 Mar 2017 18:16:03 +0200 Subject: [PATCH 02/20] First version zoom --- src/js/plugins/zoom.js | 96 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 src/js/plugins/zoom.js diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js new file mode 100644 index 00000000..aa34f0c5 --- /dev/null +++ b/src/js/plugins/zoom.js @@ -0,0 +1,96 @@ +import DOM from '../utils/dom'; +import Keys from '../utils/keys'; + + +const CLASSES = { + ZOOM: 'grid', + DIV: 'column', + WRAP: 'wrap-zoom' +}; + +/** + * Zoom plugin. + */ +export default class Zoom { + /** + * @param {WebSlides} wsInstance The WebSlides instance + * @constructor + */ + constructor(wsInstance) { + /** + * @type {WebSlides} + * @private + */ + this.ws_ = wsInstance; + + /** + * @type {boolean} + * @private + */ + this.isZoomed_ = false; + + document.addEventListener('keydown', this.onKeyDown.bind(this)); + } + + /** + * On key down handler. Will decide if Zoom in or out + * @param {Event} event Key down event + */ + onKeyDown( event ) { + if ( !this.isZoomed_ && Keys.MINUS.includes( event.which ) ) { + this.zoomIn(); + } else if ( this.isZoomed_ && Keys.PLUS.includes( event.which ) ) { + this.zoomOut(); + } + } + + /** + * Zoom In the slider, scales the slides and uses a grid layout to show them + */ + zoomIn() { + this.ws_.el.classList.add(CLASSES.ZOOM); + this.ws_.goToSlide(0); + + this.ws_.slides.forEach( elem => { + const wrap = DOM.wrap(elem.el, 'div'); + wrap.className = CLASSES.WRAP; + const div = DOM.wrap(wrap, 'div'); + div.className = CLASSES.DIV; + + const divCSS = window.getComputedStyle(div); + const marginW = DOM.parseSize(divCSS.paddingLeft) + + DOM.parseSize(divCSS.paddingRight); + const marginH = DOM.parseSize(divCSS.paddingTop) + + DOM.parseSize(divCSS.paddingBottom); + + elem.el.style.width = `${window.innerWidth - marginW * 4}px`; + elem.el.style.height = `${window.innerHeight - marginH * 4}px`; + + const slideCSS = window.getComputedStyle(elem.el); + wrap.style.height = `${DOM.parseSize(slideCSS.height) / 4}px`; + }); + + this.isZoomed_ = true; + } + + + /** + * Zoom Out the slider, remove scale from the slides + */ + zoomOut() { + this.ws_.el.classList.remove(CLASSES.ZOOM); + + this.ws_.slides.forEach( elem => { + const wrap = elem.el.parentElement; + const div = wrap.parentElement; + elem.parent.appendChild(elem.el); + wrap.remove(); + div.remove(); + elem.el.style.width = ''; + elem.el.style.height = ''; + }); + + this.isZoomed_ = false; + } + +} From 79ec99a2f7156701fa1febd6caf4d2ed6f635d63 Mon Sep 17 00:00:00 2001 From: Luis Date: Sat, 1 Apr 2017 14:40:22 +0200 Subject: [PATCH 03/20] New implementation: webslides clone --- .eslintrc | 2 - src/js/plugins/zoom.js | 69 +- src/js/utils/dom.js | 15 + static/js/webslides.js | 230 ++++- static/js/webslides.min.js | 4 +- tests/classes.html | 1940 ++++++++++++++++++++++++++++++++++++ tests/media.html | 722 ++++++++++++++ tests/test.css | 31 + tests/test.js | 36 + 9 files changed, 3011 insertions(+), 38 deletions(-) create mode 100644 tests/classes.html create mode 100644 tests/media.html create mode 100644 tests/test.css create mode 100644 tests/test.js diff --git a/.eslintrc b/.eslintrc index 13439632..39c58f07 100644 --- a/.eslintrc +++ b/.eslintrc @@ -128,5 +128,3 @@ "yield-star-spacing": [2, "after"] } } - - diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index aa34f0c5..ef76a4a1 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -1,5 +1,6 @@ import DOM from '../utils/dom'; import Keys from '../utils/keys'; +import Slide from '../modules/slide'; const CLASSES = { @@ -8,6 +9,8 @@ const CLASSES = { WRAP: 'wrap-zoom' }; +const ID = 'webslides-zoomed'; + /** * Zoom plugin. */ @@ -23,12 +26,19 @@ export default class Zoom { */ this.ws_ = wsInstance; + /** + * @type {WebSlides} + * @private + */ + this.zws_ = {}; + /** * @type {boolean} * @private */ this.isZoomed_ = false; + this.preBuildZoom_(); document.addEventListener('keydown', this.onKeyDown.bind(this)); } @@ -45,51 +55,66 @@ export default class Zoom { } /** - * Zoom In the slider, scales the slides and uses a grid layout to show them + * Prepare zoom structure, scales the slides and uses a grid layout + * to show them */ - zoomIn() { - this.ws_.el.classList.add(CLASSES.ZOOM); - this.ws_.goToSlide(0); - - this.ws_.slides.forEach( elem => { + preBuildZoom_() { + // Clone #webslides element + this.zws_.el = this.ws_.el.cloneNode(); + this.zws_.el.id = ID; + this.zws_.el.className = CLASSES.ZOOM; + // Clone the slides + this.zws_.slides = [].map.call(this.ws_.slides, + (slide, i) => { + const s_ = slide.el.cloneNode(true); + this.zws_.el.appendChild(s_); + return new Slide(s_, i); + }); + DOM.hide(this.zws_.el); + DOM.after(this.zws_.el, this.ws_.el); + + // Creates the container for each slide + this.zws_.slides.forEach( elem => { const wrap = DOM.wrap(elem.el, 'div'); wrap.className = CLASSES.WRAP; const div = DOM.wrap(wrap, 'div'); div.className = CLASSES.DIV; + // Calculates the margins in relation to window width const divCSS = window.getComputedStyle(div); const marginW = DOM.parseSize(divCSS.paddingLeft) + DOM.parseSize(divCSS.paddingRight); const marginH = DOM.parseSize(divCSS.paddingTop) + DOM.parseSize(divCSS.paddingBottom); - elem.el.style.width = `${window.innerWidth - marginW * 4}px`; - elem.el.style.height = `${window.innerHeight - marginH * 4}px`; + // Sets element size: window size - relative margins + const scale = divCSS.width.includes('%') ? + 100 / DOM.parseSize(divCSS.width) : + window.innerWidth / DOM.parseSize(divCSS.width); + elem.el.style.width = `${window.innerWidth - marginW * scale}px`; + elem.el.style.height = `${window.innerHeight - marginH * scale}px`; + // Because of flexbox, wrap height is required const slideCSS = window.getComputedStyle(elem.el); - wrap.style.height = `${DOM.parseSize(slideCSS.height) / 4}px`; + wrap.style.height = `${DOM.parseSize(slideCSS.height) / scale}px`; }); + } + /** + * Zoom In the slider, scales the slides and uses a grid layout to show them + */ + zoomIn() { + DOM.hide(this.ws_.el); + DOM.show(this.zws_.el); this.isZoomed_ = true; } - /** * Zoom Out the slider, remove scale from the slides */ zoomOut() { - this.ws_.el.classList.remove(CLASSES.ZOOM); - - this.ws_.slides.forEach( elem => { - const wrap = elem.el.parentElement; - const div = wrap.parentElement; - elem.parent.appendChild(elem.el); - wrap.remove(); - div.remove(); - elem.el.style.width = ''; - elem.el.style.height = ''; - }); - + DOM.hide(this.zws_.el); + DOM.show(this.ws_.el); this.isZoomed_ = false; } diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js index 69c66d91..ae3487fb 100644 --- a/src/js/utils/dom.js +++ b/src/js/utils/dom.js @@ -188,4 +188,19 @@ export default class DOM { return wrap; } + + /** + * Inserts and element after another element + * @param {Element} elem the element to be inserted + * @param {Element} target the element to be inserted after + */ + static after(elem, target) { + const parent = target.parentNode; + + if (parent.lastChild == target) { + parent.appendChild(elem); + } else { + parent.insertBefore(elem, target.nextSibling); + } + } } diff --git a/static/js/webslides.js b/static/js/webslides.js index 6c4ae097..46191ead 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-03-22 + * Date: 2017-04-01 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -79,7 +79,7 @@ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(17); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(18); 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"); } } @@ -284,6 +284,53 @@ var DOM = function () { return result; } + + /** + * Gets the integer value of a style property + * @param {string} prop CSS property value + * @return {integer} The property without the units + */ + + }, { + key: 'parseSize', + value: function parseSize(prop) { + return Number(prop.replace(/[^\d\.]/g, '')); + } + + /** + * Wraps a HTML structure arrond a element + * @param {Element} elem the element to be wrapped + * @param {string} tag the new element tag + * @return {Element} the new element + */ + + }, { + key: 'wrap', + value: function wrap(elem, tag) { + var wrap = document.createElement(tag); + elem.parentElement.insertBefore(wrap, elem); + wrap.appendChild(elem); + + return wrap; + } + + /** + * Inserts and element after another element + * @param {Element} elem the element to be inserted + * @param {Element} target the element to be inserted after + */ + + }, { + key: 'after', + value: function after(elem, target) { + var parent = target.parentNode; + + if (parent.lastChild == target) { + parent.appendChild(elem); + } else { + parent.insertBefore(elem, target.nextSibling); + } + } }]); return DOM; @@ -511,7 +558,9 @@ var Keys = { LEFT: 37, UP: 38, RIGHT: 39, - DOWN: 40 + DOWN: 40, + PLUS: [107, 171], + MINUS: [109, 173] }; /* harmony default export */ __webpack_exports__["a"] = (Keys); @@ -628,7 +677,7 @@ var MobileDetector = function () { /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__ = __webpack_require__(12); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__slide__ = __webpack_require__(1); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_dom__ = __webpack_require__(0); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(19); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_scroll_to__ = __webpack_require__(20); 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"); } } @@ -654,7 +703,8 @@ var PLUGINS = { 'scroll': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Scroll, 'touch': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Touch, 'video': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Video, - 'youtube': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].YouTube + 'youtube': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].YouTube, + 'zoom': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Zoom }; /** @@ -1696,6 +1746,8 @@ var Navigation = function () { /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__touch__ = __webpack_require__(14); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__video__ = __webpack_require__(15); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__youtube__ = __webpack_require__(16); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__zoom__ = __webpack_require__(17); + @@ -1717,7 +1769,8 @@ var Navigation = function () { Scroll: __WEBPACK_IMPORTED_MODULE_6__scroll__["a" /* default */], Touch: __WEBPACK_IMPORTED_MODULE_7__touch__["a" /* default */], Video: __WEBPACK_IMPORTED_MODULE_8__video__["a" /* default */], - YouTube: __WEBPACK_IMPORTED_MODULE_9__youtube__["a" /* default */] + YouTube: __WEBPACK_IMPORTED_MODULE_9__youtube__["a" /* default */], + Zoom: __WEBPACK_IMPORTED_MODULE_10__zoom__["a" /* default */] }); /***/ }), @@ -2172,7 +2225,7 @@ var Player = function () { } /** - * + * Plays the video. */ @@ -2192,13 +2245,15 @@ var Player = function () { } /** - * + * Pause playing the video if it's already playing. */ }, { key: 'pause', value: function pause() { - this.player.pauseVideo(); + if (this.player && this.player.pauseVideo && this.player.getPlayerState() === 1) { + this.player.pauseVideo(); + } } /** @@ -2330,6 +2385,157 @@ var YouTube = function () { /* 17 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { +"use strict"; +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_keys__ = __webpack_require__(2); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__modules_slide__ = __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; }; }(); + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + + + + +var CLASSES = { + ZOOM: 'grid', + DIV: 'column', + WRAP: 'wrap-zoom' +}; + +var ID = 'webslides-zoomed'; + +/** + * Zoom plugin. + */ + +var Zoom = function () { + /** + * @param {WebSlides} wsInstance The WebSlides instance + * @constructor + */ + function Zoom(wsInstance) { + _classCallCheck(this, Zoom); + + /** + * @type {WebSlides} + * @private + */ + this.ws_ = wsInstance; + + /** + * @type {WebSlides} + * @private + */ + this.zws_ = {}; + + /** + * @type {boolean} + * @private + */ + this.isZoomed_ = false; + + this.preBuildZoom_(); + document.addEventListener('keydown', this.onKeyDown.bind(this)); + } + + /** + * On key down handler. Will decide if Zoom in or out + * @param {Event} event Key down event + */ + + + _createClass(Zoom, [{ + key: 'onKeyDown', + value: function onKeyDown(event) { + if (!this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].MINUS.includes(event.which)) { + this.zoomIn(); + } else if (this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.includes(event.which)) { + this.zoomOut(); + } + } + + /** + * Prepare zoom structure, scales the slides and uses a grid layout + * to show them + */ + + }, { + key: 'preBuildZoom_', + value: function preBuildZoom_() { + var _this = this; + + // Clone #webslides element + this.zws_.el = this.ws_.el.cloneNode(); + this.zws_.el.id = ID; + this.zws_.el.className = CLASSES.ZOOM; + // Clone the slides + this.zws_.slides = [].map.call(this.ws_.slides, function (slide, i) { + var s_ = slide.el.cloneNode(true); + _this.zws_.el.appendChild(s_); + return new __WEBPACK_IMPORTED_MODULE_2__modules_slide__["a" /* default */](s_, i); + }); + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el); + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].after(this.zws_.el, this.ws_.el); + + // Creates the container for each slide + this.zws_.slides.forEach(function (elem) { + var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div'); + wrap.className = CLASSES.WRAP; + var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div'); + div.className = CLASSES.DIV; + + // Calculates the margins in relation to window width + var divCSS = window.getComputedStyle(div); + var marginW = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingLeft) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingRight); + var marginH = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingTop) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingBottom); + + // Sets element size: window size - relative margins + console.log(window.innerWidth, divCSS.width); + var scale = divCSS.width.includes('%') ? 100 / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width) : window.innerWidth / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width); + elem.el.style.width = window.innerWidth - marginW * scale + 'px'; + elem.el.style.height = window.innerHeight - marginH * scale + 'px'; + + // Because of flexbox, wrap height is required + var slideCSS = window.getComputedStyle(elem.el); + wrap.style.height = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(slideCSS.height) / scale + 'px'; + }); + } + + /** + * Zoom In the slider, scales the slides and uses a grid layout to show them + */ + + }, { + key: 'zoomIn', + value: function zoomIn() { + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.ws_.el); + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el); + this.isZoomed_ = true; + } + + /** + * Zoom Out the slider, remove scale from the slides + */ + + }, { + key: 'zoomOut', + value: function zoomOut() { + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el); + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.ws_.el); + this.isZoomed_ = false; + } + }]); + + return Zoom; +}(); + +/* harmony default export */ __webpack_exports__["a"] = (Zoom); + +/***/ }), +/* 18 */ +/***/ (function(module, __webpack_exports__, __webpack_require__) { + "use strict"; var NativeCustomEvent = window.CustomEvent; @@ -2375,7 +2581,7 @@ var WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent; /* harmony default export */ __webpack_exports__["a"] = (WSCustomEvent); /***/ }), -/* 18 */ +/* 19 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; @@ -2400,11 +2606,11 @@ function linear(p) { /* harmony default export */ __webpack_exports__["a"] = ({ swing: swing, linear: linear }); /***/ }), -/* 19 */ +/* 20 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(18); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(19); /* harmony export (immutable) */ __webpack_exports__["a"] = scrollTo; diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 6b0f1f6d..70edc04c 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,9 +1,9 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-03-22 + * Date: 2017-04-01 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};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=5)}([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 a=n(17),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:"once",value:function(e,t,n){var i=function i(a){a.target===e&&(e.removeEventListener(t,i),n(a))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(r)return r;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,a=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new a.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}}]),e}();t.a=l},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 a=n(0),o=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,a=void 0!==n&&n,o=t.changeOnClick,r=void 0!==o&&o,s=t.loop,l=void 0===s||s,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:a,changeOnClick:r,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),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(){this.initialised=!0,r.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=r.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.currentSlideI_!==e){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 a=this;this.el.style.overflow="hidden",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(){a.currentSlide_.hide(),e&&a.currentSlide_.moveAfterLast(),a.el.style.overflow="auto",setTimeout(function(){i.call(a,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var a=this;n.i(s.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(r.a.once(t.el,r.a.getAnimationEvent(),function(){t.el.classList.remove(o),i.call(a,t)}),t.el.classList.add(o)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,r.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=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 a=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}]),e}();t.a=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 a=n(3),o=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),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 a=n(0),o=n(1),r=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-o.scrollTop,r=o.scrollTop;if(!t)return o.scrollTop=e,void n();!function s(l){l+=16;var u=Math.min(1,l/t),c=a.a.swing(u,l*u,e,i,t);o.scrollTop=Math.floor(r+c*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:"once",value:function(e,t,n){var i=function i(a){a.target===e&&(e.removeEventListener(t,i),n(a))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(r)return r;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,a=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new a.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 a=n(0),o=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,a=void 0!==n&&n,o=t.changeOnClick,r=void 0!==o&&o,s=t.loop,l=void 0===s||s,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:a,changeOnClick:r,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),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(){this.initialised=!0,r.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=r.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.currentSlideI_!==e){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 a=this;this.el.style.overflow="hidden",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(){a.currentSlide_.hide(),e&&a.currentSlide_.moveAfterLast(),a.el.style.overflow="auto",setTimeout(function(){i.call(a,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var a=this;n.i(s.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(r.a.once(t.el,r.a.getAnimationEvent(),function(){t.el.classList.remove(o),i.call(a,t)}),t.el.classList.add(o)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,r.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=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 a=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}]),e}();t.a=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 a=n(3),o=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),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 a=n(0),o=n(1),r=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-o.scrollTop,r=o.scrollTop;if(!t)return o.scrollTop=e,void n();!function s(l){l+=16;var u=Math.min(1,l/t),c=a.a.swing(u,l*u,e,i,t);o.scrollTop=Math.floor(r+c*i),l + + + + + + + + + WebSlides Tutorial: Classes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ + + +
+ + +
+

WebSlides Tutorial

+

Classes

+

* * *

+

+ + + + + Free Download + +

+
+ +
+
+ +
+

WebSlides Classes

+

Friendly naming conventions.

+ +
+ +
+
+
+

+ + + + CSS Syntax +

+

WebSlides is so easy to understand and love. Baseline: 8.

+
+
    +
  • Typography: .text-landing, .text-subtitle, .text-data, .text-intro...
    • +
  • BG Colors: .bg-primary, .bg-blue,.bg-apple...
    • +
  • BG Images: .background, .background-center-bottom...
    • +
  • Cards: .card-60, .card-50, .card-40...
    • +
  • Sizes: .size-50, .size-40...
    • +
  • Flex Blocks: .flexblock.clients, .flexblock.gallery, .flexblock.metrics...
    • +
+
+ +
+
+ +
+
+
+

WebSlides is really easy

+

Each parent <section> in the #webslides element is an individual slide.

+

Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

+
+ +
+ 
<article id="webslides">
+  <!-- Slide 1 -->
+  <section>
+    <h1>Design for trust</h1>
+  </section>
+  <!-- Slide 2 -->
+  <section class="bg-primary">
+    <div class="wrap">
+      <h2>.wrap = container 1200px with fadein</h2>
+    </div>
+  </section>
+</article>
+
+
+ +
+ +
+

Vertical sliding? <article id="webslides" class="vertical">

+
+ +
+
+
+ +
+

Header (logo) .alignright

+
+
+
+

Simple CSS Alignments

+

Put content wherever you want.

+
+ +
+
+
+ iPhone +

img.alignleft

+

img.alignleft.size-50

+

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

+

Image size recommended:
800x600px / 600x450px.

+
+ +
+
+
+ iPhone +

img.alignright

+

img.alignright.size-50

+

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

+

Image size recommended:
800x600px / 600x450px.

+
+ +
+
+
+ iPhone +

img.aligncenter.size-40

+
+ +
+
+
+
+

1/9 left top

+

Put content wherever you want. Have less. Do more. Create beautiful solutions.

+

.slide-top and .content-left

+
+
+ +
+
+
+
+

2/9 center top

+

In a village of La Mancha, the name of which I have no desire to call to mind,

+

.slide-top and .content-center

+
+
+ +
+
+
+
+

3/9 right top

+

there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.

+

.slide-top and .content-right

+
+
+ +
+
+
+
+

4/9 left center

+

An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays,

+

.content-left

+
+
+ +
+
+
+
+

5/9 center

+

lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income.

+

.content-center

+
+
+ +
+
+
+
+

6/9 right center

+

he rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays,

+

.content-right

+
+
+ +
+
+
+
+

7/9 left bottom

+

while on week-days he made a brave figure in his best homespun.

+

.slide-bottom and .content-left

+
+
+ +
+
+
+
+

8/9 center bottom

+

He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place,

+

.slide-bottom and .content-center

+
+
+ +
+
+
+
+

9/9 right bottom

+

who used to saddle the hack as well as handle the bill-hook.

+

.slide-bottom and .content-right

+
+
+ +
+
+ +
+

.grid + .column

+

Basic Grid (auto-fill and equal height).

+
+
+
Why WebSlides?
+

There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.

+

* * *

+
+ +
+
WebSlides Files
+
+ +
+
How easy is WebSlides?
+

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

+

* * *

+
+ +
+ +
+ +
+
+ +
+

.grid.vertical-align + .column

+

Basic Grid (auto-fill and equal height).

+
+
+
Why WebSlides?
+

There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.

+

* * *

+
+ +
+
WebSlides Files
+
+ +
+
How easy is WebSlides?
+

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

+

* * *

+
+ +
+ +
+ +
+
+
+

.grid.sm (sidebar + main)

+
+
+
+

.column 1

+

Stendhal syndrome is a psychosomatic disorder that causes rapid heartbeat, dizziness, fainting, confusion and even hallucinations when an individual is exposed to an experience of great personal significance, particularly viewing art.

+
+
+

.column 2

+

The illness is named after the 19th-century French author Stendhal (pseudonym of Marie-Henri Beyle), who described his experience with the phenomenon during his 1817 visit to Florence in his book Naples and Florence: A Journey from Milan to Reggio.

+

When he visited the Basilica of Santa Croce, where Niccolò Machiavelli, Michelangelo and Galileo Galilei are buried, he saw Giotto's frescoes for the first time and was overcome with emotion.

+
+
+ +
+ +
+
+
+

.grid.ms (main + sidebar)

+
+
+
+

.column 1

+

Beauty is a characteristic of an animal, idea, object, person or place that provides a perceptual experience of pleasure or satisfaction. Beauty is studied as part of aesthetics, culture, social psychology and sociology.

+

An "ideal beauty" is an entity which is admired, or possesses features widely attributed to beauty in a particular culture, for perfection.

+
+
+

.column 2

+

The experience of "beauty" often involves an interpretation of some entity as being in balance and harmony with nature, which may lead to feelings of attraction and emotional well-being.

+
+
+ +
+ +
+
+
+

.grid.sms (sidebar + main + sidebar)

+
+
+
+

.column 1

+

Information architecture is considered to have been founded by Richard Saul Wurman.

+
+
+

.column 2

+

Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

+
+
+

.column 3

+

The difficulty in establishing a common definition for "information architecture" arises partly from the term's existence in multiple fields.

+
+
+ +
+ +
+
+
+
+
+ Big Ben, London +
+ + + + + David Dibert (Unsplash) + +
+
+ +
+

+ Discover London +

+

.card-50.bg-white

+
    +
  • + Density: 5,518/km2 +
    • +
  • Population: 8,673,713
    • +
  • Website: visitlondon.com
    • +
+

+ There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region. +

+
+ +
+ +
+ +
+
+
+
+
+

Unsplash +

+

.card-50.bg-white

+

Unsplash is a really cool resource. It is a collection of Creative Commons Zero licensed photos that are really great. +

+
    +
  • + Role: Frontend +
    • +
  • Client: Acme
    • +
  • Year: 2018
    • +
+
+ +
+ Apple Watch +
+ + + + + Crew (Unsplash) + +
+
+ +
+ +
+ +
+
+
+
+ Yosemite National Park +
+ + + + + Chad Madden (Unsplash) + +
+
+ +
+

+ What is inspiration? +

+

+ In Greek thought, inspiration meant that the poet or artist would go into ecstasy or furor poeticus, the divine frenzy or poetic madness. The Muses are the inspirational goddesses of literature, science, and the arts in Greek mythology. +

+
+ +
+ +
+
+

Backgrounds

+

<section class="bg-apple">

+
+
+
+

Corporate Backgrounds

+
    +
  • +

    .bg-primary

    + #44d +
    • +
  • +

    .bg-secondary

    + #67d +
    • +
  • +

    .bg-light

    + #edf2f7 +
    • +
  • +

    body

    + #f7f9fb +
    • +
+
+

General Colors

+
    +
  • +

    .bg-black

    + #111 +
    • +
  • +

    .bg-black-blue

    + #123 +
    • +
  • +

    .bg-gray

    + #d5d9e2 +
    • +
  • +

    .bg-white

    + #fff +
    • +
+
+ +
+
+
+
    +
  • +

    .bg-red

    + #c23 +
    • +
  • +

    .bg-green

    + #077 +
    • +
  • +

    .bg-blue

    + #346 +
    • +
  • +

    .bg-purple

    + #b6d +
    • +
+
+

Transparent Backgrounds

+
    +
  • +

    .bg-trans-dark

    + rgba(0,0,0 , 0.5) +
    • +
  • +

    .bg-trans-light

    + rgba(255,255,255 , 0.2) +
    • +
+
+ +
+
+
+

Gradients

+
    +
  • Horizontal .bg-gradient-h
    • +
  • Radial .bg-gradient-r
    • +
  • Vertical .bg-gradient-v
    • +
+
+ +
+
+ +
+

Horizontal Gradient

+

section.bg-gradient-h

+
+ +
+
+
+

Radial Gradient

+

section.bg-gradient-r

+
+ +
+
+ +
+

Vertical Gradient

+

section.bg-gradient-v

+
+ +
+
+
+

Background Videos

+ 
<video class="background-video" autoplay muted loop poster="image.jpg">
+  <source src="video.mp4" type="video/mp4">
+</video>
+

.background-video

+
+ +
+
+
+

.background-video

+

WebSlides is the easiest way to make HTML presentations. Inspire and engage.

+
+ +
+
+
+

BG Video with Overlay

+

section.bg-blue > .background-video.dark or .light

+
+ +
+
+
+
+

Fullscreen Background Images

+ 
<section>
+	<span class="background" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span>
+	<section>
+		<h1>Slide</h1>
+	</section>
+</section>
+

How to embed Unsplash photos?

+
+
+

16 Different Backgrounds

+
    +
  • .background (cover)
    • +
  • .background-top (cover)
    • +
  • .background-bottom (cover)
    • +
  • .background.light (opacity)
    • +
  • .background.dark (opacity)
    • +
  • .background-center
    • +
  • .background-center-top
    • +
  • .background-center-bottom
    • +
  • .background-left
    • +
  • .background-left-top
    • +
  • .background-left-bottom
    • +
  • .background-right
    • +
  • .background-right-top
    • +
  • .background-right-bottom
    • +
  • .background-anim (animated)
    • +
  • .background-video (fullscreen)
    • +
+
+
+ +
+
+ +
+
+

.background-(position)

+

.background-right-bottom

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+
+ +
+
+ + +
+

Iceland

+

section[class*="bg-"] > .background.dark

+
+
+
+ + +
+

Iceland

+

section[class*="bg-"] > .background.light

+
+
+
+ + +
+

.background.anim

+
+ +
+
+
+

Flexible blocks

+

ul.flexblock = Flexible blocks with auto-fill and equal height.

+
+
    +
  • +

    + + + + .flexblock li 1 +

    + Multipurpose: services, features, specs... +
    • +
  • +

    + + + + .flexblock li 2 +

    + Multipurpose: benefits, clients, work... +
    • +
  • +

    + + + + .flexblock li 3 +

    + Multipurpose: news, metrics, plans... +
    • +
+
+ +
+
+
+
+

Flexible Block = .flexblock

+

Auto-fill & Equal height columns:

+ 
<ul class="flexblock">
+  <li>
+    Item 1
+  </li>
+  <li>
+    Item 2
+  </li>
+  <li>
+    Item 3
+  </li>
+  <li>
+    Item 4
+  </li>
+</ul>
+
+
+

Block Link = .flexblock.blink

+

Make the whole block clickable:

+ 
<ul class="flexblock blink">
+  <li>
+    <a href="#">
+      Item 1
+    </a>
+  </li>
+  <li>
+    <a href="">
+      Item 2
+    </a>
+  </li>
+</ul>
+
+
+ +
+
+
+

ul.flexblock

+
    +
  • +

    + + + + Purpose +

    + Businesses that people love +
    • +
  • +

    + + + + Principles +

    + Ethics of openness and good taste +
    • +
  • +

    + + + + Process +

    + Useful → Easy → Fast → Beautiful +
    • +
+
+

ul.flexblock.blink

+ +
+ +
+
+
+

ul.flexblock.blink.border

+ +
+ +
+
+
+

Clients

+

ul.flexblock.clients

+ +
+ +
+
+
+

Clients

+

ul.flexblock.clients.border

+ +
+ +
+
+
+

ul.flexblock.features

+
    +
  • +
    +

    100% customizable

    + Well documented. +
    +
    • +
  • +
    + $48 +

    Extra virgin olive oil

    + The Spanish caviar. +
    +
    • +
  • +
    +

    + + + + Ultra-fast Wifi +

    + Simple file sharing. +
    +
    • +
+
+

ul.flexblock.features.blink

+ +
+ +
+
+
+

ul.flexblock.gallery

+ +
+ +
+
+
+

ul.flexblock.gallery + .overlay

+ +
+ +
+
+
+

ul.flexblock.metrics

+ +
    +
  • Founded + 2016 +
    • +
  • + + + + + + 24M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
  • + + + + + + 8 Offices +
    • +
  • + + + + + + 48 Employees +
    • +
  • + + + + + + Benefits: $2,4M +
    • +
  • + + + + + + Bank: $32M +
    • +
+
+ +
+
+
+

ul.flexblock.metrics.border

+ +
    +
  • Founded + 2016 +
    • +
  • + + + + + + 24M Subscribers +
    • +
  • + + + + + + Revenue: $16M +
    • +
  • + Monthly Growth + 64% +
    • +
  • + + + + + + 8 Offices +
    • +
  • + + + + + + 48 Employees +
    • +
  • + + + + + + Benefits: $2,4M +
    • +
  • + + + + + + Bank: $32M +
    • +
+
+ +
+
+
+

.flexblock.plans.blink

+

All content is for demo purposes only.

+ +
+ +
+
+
+ +
+ +
+
+
+
+

ul.flexblock.specs

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+ +
+ Pixel Phone +
+
+ +
+
+ +
+

.flexblock.reasons

+
+
+
    +
  • +

    Why WebSlides? Work better, faster.

    +

    Designers and marketers can now focus on the content. Simply choose a demo and customize it in minutes. Be memorable!

    +
    • +
  • +

    Good karma. Just the essentials and using lovely CSS.

    +

    WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

    +
    • +
+
+ +
+ +
+
+
+

ul.flexblock.steps

+
    + +
  • + + + + + +

    01. Passion

    +

    When you're really passionate about your job, you can change the world.

    +
    • +
  • +
    + + + + + +

    02. Purpose

    +

    Why does this business exist? How are you different? Why matters?

    +
    • +
  • +
    + + + + + +

    03. Principles

    +

    Leadership through usefulness, openness, empathy, and good taste.

    +
    • +
  • +
    + + + + + +

    04. Process

    +
      +
    • Useful
      • +
    • Easy
      • +
    • Fast
      • +
    • Beautiful
      • +
    +
    • +
+
+ +
+
+
+

ul.flexblock.activity

+ +
+ +
+
+
+
+
+

Ag

+
+ +
+

Roboto in Google Fonts.

+

The quick brown fox jumps over the lazy dog.

+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

1234567890(,.;:?!$&*)

+
+ +
+ +
+ +
+
+
+

Landings

+

.text-landing

+
+ +
+
+
+

Landings

+

Create a simple web presence.

+

.text-intro

+
+ +
+
+
+

Powered by #WebSlides .text-subtitle

+

Landings

+

Create a simple web presence.

+
+ +
+
+ +
+

Landings

+

.text-shadow

+
+ +
+
+

4,235,678

+

.text-data

+
+
+ +
+

Why WebSlides? .text-context

+

WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.

+
+ +
+
+
+

.text-cols (2 columns)

+
+

Why WebSlides? There are excellent presentation tools out there. WebSlides is about sharing content, essential features, and clean markup. Each parent <section> in the #webslides element is an individual slide.

+

WebSlides help you build a culture of innovation and excellence. When you're really passionate about your job, you can change the world. How to manage a design-driven organization? Leadership through usefulness, openness, empathy, and good taste.

+
+
    +
  • +
    + + + + Call us at 555.345.6789 +
    +
    • +
  • +
    + + + + @username +
    +
    • +
  • +
    + + + + Send us an email +
    +
    • +
+
+ +
+
+
+
+
+

+ A Phone by Google +

+

Pixel's camera lets you take brilliant photos in low light, bright light or any light.

+
    +
  • + + .text-label: + + Google (2016). +
    • +
  • + + Services: + + Industrial Design. +
    • +
  • + + Website: + + madeby.google.com/phone/ +
    • +
+
+ +
+
+ Pixel Phone +
+
+ +
+ +
+ +
+
+
+
+
+

Ag

+
+ +
+

Maitree in Google Fonts.

+

The quick brown fox jumps over the lazy dog.

+

ABCDEFGHIJKLMNOPQRSTUVWXYZ

+

abcdefghijklmnopqrstuvwxyz

+

1234567890(,.;:?!$&*)

+
+ +
+ +
+ +
+
+ +
+
+

WebSlides is incredibly easy and versatile.

+

.text-serif (Maitree)

+
+
+

Each parent <section> in the #webslides element is an individual slide.

+

Clean markup with popular naming conventions. Minimum effort. Just focus on your content.

+
+
+ +
+
+
+

What is Stendhal Syndrome?

+

Beauty overdose. .text-pull-right

+

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

+

Psychiatrists have long debated whether it really exists.

+

The syndrome is not only associated with viewing a beautiful place, but also good art.

+

The beauty of Italian art has a concentrated perfection and transcendent sensuality that is incredibly addictive.

+

* * *

+
+ +
+
+

One more thing...

+

.text-apple / .bg-apple

+
+
+
+ +
+ +
+
+ +
+

Start in seconds

+

Create your own presentation instantly.
120+ prebuilt slides ready to use.

+

+ + + + + Free Download + + + + + + + Pay what you want. + + +

+
+ +
+ +
+
+ + + + + + + + + + + diff --git a/tests/media.html b/tests/media.html new file mode 100644 index 00000000..151ee93d --- /dev/null +++ b/tests/media.html @@ -0,0 +1,722 @@ + + + + + + + + WebSlides Tutorial: Videos, Images, and Maps + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+ + + +
+ + +
+

WebSlides Tutorial

+

Media

+

* * *

+

+ + + + + Free Download + +

+
+ +
+
+
+

A quick reference guide for beginners

+

Videos, images, maps, and charts.

+ +
+ +
+
+ +
+

+ + + + Insert images wherever you want +

+

15 different positions.

+
+ +
+
+
+

15 Different Backgrounds

+
    +
  • .background (fullscreen)
    • +
  • .background-top (cover)
    • +
  • .background-bottom (cover)
    • +
  • .background.light (opacity)
    • +
  • .background.dark (opacity)
    • +
  • .background-center
    • +
  • .background-center-top
    • +
  • .background-center-bottom
    • +
  • .background-left
    • +
  • .background-left-top
    • +
  • .background-left-bottom
    • +
  • .background-right
    • +
  • .background-right-top
    • +
  • .background-right-bottom
    • +
  • .background-anim (animated)
    • +
+
+ +
+
+
+

+ + + + .background = Fullscreen Backgrounds +

+

How to embed Unsplash photos? →

+ 
<section>
+  <span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"></span>
+  <div class="wrap">
+    <h1>Slide</h1>
+  </div>
+</section>
+

+ + + + Position .background outside of .wrap container. +

+
+ +
+
+ +
+
+

.background-(position)

+

.background-right-bottom

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+
+ +
+
+ + +
+

.background.anim

+
+ +
+
+ +
+

Opacity

+

[class*="bg-"] > .background.light

+ 
<section class="bg-black">
+	<span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+	<div class="wrap">
+		<h1>Slide</h1>
+	</div>
+</section>
+
+
+
+ +
+

Opacity

+

[class*="bg-"] > .background.dark

+ 
<section class="bg-black">
+	<span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
+	<div class="wrap">
+		<h1>Slide</h1>
+	</div>
+</section>
+
+
+
+
+

Optional · 500+ icons

+

+ + + + + Font Awesome + + as SVG icons +

+ 
<svg class="fa-flag">
+	<use xlink:href="#fa-flag"></use>
+</svg>
+

How to change icons?

+
    +
  1. Go to fontastic.me.
    2. +
  2. Create a free account.
    3. +
  3. Select new icons.
    4. +
  4. Publish as SVG sprite.
    5. +
  5. Edit svg-icons.css and svg.icons.js.
    6. +
+
+ +
+
+
+

Transparent Logos

+

+ Change the color of a .svg/.png image using CSS. Images are property of their respective owners. +

+
+ +
+ +
+
+ +
+
+

An avatar is the graphical representation of the user or the user's alter ego or character. The word avatar originates in Hinduism.

+

Avatar @username, .avatar-56

+
+
+

img[class*="avatar-"] (80, 72, 64, 56, 48, and 40).

+
+ +
+
+
+
+
+

Devices

+
    +
  • +
    + + + +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    + + + +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    + + + +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+ +
+
+ iPhone +
+
+ +
+ +
+ +
+
+
+
+
+ Screenshot +
+
+ +
+

Screenshots

+

HTML/CSS Browser.

+ 
<figure class="browser">
+  <img alt="Screenshot" src="image.jpg">
+</figure>
+
+ +
+ +
+
+ +
+

+ Videos +

+
+ +
+
+
+

Background Videos

+ 
<video class="background-video" autoplay muted loop poster="image.jpg">
+  <source src="video.mp4" type="video/mp4">
+</video>
+

.background-video

+
+ +
+
+
+ +
+
+

Audio

+

Overlay: section.bg-red > .background-video.dark or .light

+
+ +
+
+
+ +
+ +
+

Muted

+

Overlay: section.bg-blue > .background-video.dark or .light

+
+ +
+
+
+
+

Responsive Videos

+

Just copy and paste the code from YouTube to your slide.

+ 
<div class="embed">
+ <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
+ </iframe>
+</div>
+

.embed (responsive)

+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+ +
+
+
+

Fullscreen YouTube Video

+ 
<section class="fullscreen">
+  <div class="embed">
+    <iframe src="https://www.youtube.com/embed/iY05U7GaU5I">
+    </iframe>
+  </div>
+</section>
+
+

.fullscreen > .embed (responsive)

+
+ +
+
+ +
+ +
+ +
+
+

+ +

+
+

+ + YouTube API

+

Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.

+ +

You should use a local or a remote server since the YouTube API doesn't seem to work nicely when using the file directly on the browser.

+
+ +
+
+
+

+ + YouTube API Parameters

+

Syntax: data-autoplay, data-loop, data-no-controls, data-mute.

+
+
+
+ 
<div class="embed">
+  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop>
+  </div>
+</div>
+

autoplay + loop

+
+ +
+ 
<div class="embed">
+  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls>
+  </div>
+</div>
+

autoplay + mute + no controls.

+
+ +
+ +
+ +
+
+
+
+

YouTube API

+

autoplay + loop

+ 
<div class="embed">
+  <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop>
+  </div>
+</div>
+
+ +
+ +
+
+
+ +
+ +
+ +
+
+
+

Let's make some magic with the YouTube API

+

How to make a fullscreen YouTube video? .fullscreen > .embed

+
+ 
<section class="fullscreen">
+  <div class="embed">
+    <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls</div>
+  </div>
+</section>
+
+

The video will automatically play when the slide is loaded.

+
+ +
+
+ +
+
+
+ +
+
+
+

Fullscreen YouTube video background

+

Overlaying a transparent background on an embedded Youtube video:

+
+ 
<section class="fullscreen bg-black">
+  <div class="embed dark">
+    <div data-youtube data-youtube-id="c9psfOxJysw" data-autoplay data-loop data-mute data-no-controls</div>
+  </div>
+</section>
+
+

.fullscreen[class*="bg-"] > .embed.dark or .light

+
+ +
+
+ +
+
+
+ +
+

Overlay

+

.fullscreen[class*="bg-"] > .embed.dark or .light

+
+ +
+
+ +
+

+ + + + Maps & Charts +

+
+ +
+
+
+

Status of Net Neutrality around the world.

+
+ +
+ +
+ +
+
+
+ +
+ +
+
+
+

Charts

+ +
+ +
Chart
+
+ +
+ +
+
+
+ + + + + + + + + + + diff --git a/tests/test.css b/tests/test.css new file mode 100644 index 00000000..c52ed916 --- /dev/null +++ b/tests/test.css @@ -0,0 +1,31 @@ + +#webslides-zoomed.grid { + background: #ccc; +} + +#webslides-zoomed.grid > .column { + position: relative; +} +#webslides-zoomed.grid > .column > .wrap-zoom { + position: relative; + background: #fff; +} + +#webslides-zoomed.grid > .column > .wrap-zoom > .slide { + transform: scale(0.25) translate(-150%, -150vh); + display: flex !important; + position: absolute; + top: 0; + left: 0; + clip: rect(0px auto auto 0); +} + + + + +.enorme { + position: absolute; + top: 0; + left: 0; + font-size: 500px; +} diff --git a/tests/test.js b/tests/test.js new file mode 100644 index 00000000..867a1b7e --- /dev/null +++ b/tests/test.js @@ -0,0 +1,36 @@ +window.addEventListener("load", () => { + var getValue = ( px ) => { + return new Number( px.replace( /[^\d\.]/g, '' ) ); + }; + + + var wrap = ( query, tag ) => { + // Now webslides is a grid + const ws = document.getElementById('webslides'); + ws.classList.add('grid'); + + document.querySelectorAll( query ).forEach( elem => { + const div = document.createElement( 'div' ); + div.className = 'column'; + elem.parentElement.insertBefore( div, elem ); + const wrap = document.createElement( 'div' ); + wrap.className = 'wrap-zoom'; + div.appendChild( wrap ); + wrap.appendChild( elem ); + + const divCSS = window.getComputedStyle( div ); + const divW = getValue( divCSS.width ); + const marginW = getValue( divCSS.paddingLeft ) + getValue( divCSS.paddingRight ); + const marginH = getValue( divCSS.paddingTop ) + getValue( divCSS.paddingBottom ); + +// div.style.height = divH + 'px'; + elem.style.width = ( window.innerWidth - marginW * 4 ) + 'px'; + elem.style.height = ( window.innerHeight - marginH * 4 ) + 'px'; + + const slideCSS = window.getComputedStyle( elem ); + wrap.style.height = ( getValue( slideCSS.height ) / 4 ) + 'px'; + }); + }; + + //wrap( '.slide', 'div' ); +}); From ebb5e9a4cd8bdd654541c8b6c117704f953a7ae9 Mon Sep 17 00:00:00 2001 From: Luis Date: Wed, 5 Apr 2017 19:13:38 +0200 Subject: [PATCH 04/20] Click on zoomed slide event handled --- .eslintrc | 2 +- src/js/plugins/keyboard.js | 2 +- src/js/plugins/scroll.js | 5 ++ src/js/plugins/touch.js | 13 +++++ src/js/plugins/zoom.js | 73 ++++++++++++++++------- src/js/utils/dom.js | 10 ++++ static/css/base.css | 36 +++++++++++- static/js/webslides.js | 115 ++++++++++++++++++++++++++++++------- static/js/webslides.min.js | 4 +- tests/test.css | 28 +++++---- 10 files changed, 227 insertions(+), 61 deletions(-) diff --git a/.eslintrc b/.eslintrc index 39c58f07..f9df3432 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,7 +8,7 @@ }, "rules": { "no-cond-assign": 0, - "no-console": 2, + "no-console": 0, "no-constant-condition": 2, "no-control-regex": 2, "no-debugger": 2, diff --git a/src/js/plugins/keyboard.js b/src/js/plugins/keyboard.js index 1d38a6aa..2527be6e 100644 --- a/src/js/plugins/keyboard.js +++ b/src/js/plugins/keyboard.js @@ -29,7 +29,7 @@ export default class Keyboard { let method; let argument; - if (DOM.isFocusableElement()) { + if (DOM.isFocusableElement() || !DOM.isVisible(this.ws_.el)) { return; } diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js index b909683b..e5e27fec 100644 --- a/src/js/plugins/scroll.js +++ b/src/js/plugins/scroll.js @@ -1,3 +1,4 @@ +import DOM from '../utils/dom'; import MobileDetector from '../utils/mobile-detector'; @@ -71,6 +72,10 @@ export default class Scroll { * @private */ onMouseWheel_(event) { + if (!DOM.isVisible(this.ws_.el)) { + return; + } + if (this.ws_.isMoving || this.timeout_) { event.preventDefault(); return; diff --git a/src/js/plugins/touch.js b/src/js/plugins/touch.js index 2b60e4c4..d3ce5322 100644 --- a/src/js/plugins/touch.js +++ b/src/js/plugins/touch.js @@ -1,3 +1,4 @@ +import DOM from '../utils/dom'; import MobileDetector from '../utils/mobile-detector'; const EVENTS = { @@ -88,6 +89,10 @@ export default class Touch { * @private */ onStart_(event) { + if (!DOM.isVisible(this.ws_.el)) { + return; + } + const info = Touch.normalizeEventInfo(event); this.startX_ = info.x; @@ -102,6 +107,10 @@ export default class Touch { * @private */ onMove_(event) { + if (!DOM.isVisible(this.ws_.el)) { + return; + } + const info = Touch.normalizeEventInfo(event); this.endX_ = info.x; @@ -113,6 +122,10 @@ export default class Touch { * @private */ onStop_() { + if (!DOM.isVisible(this.ws_.el)) { + return; + } + const diffX = this.startX_ - this.endX_; const diffY = this.startY_ - this.endY_; diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index ef76a4a1..8a6246a6 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -39,14 +39,15 @@ export default class Zoom { this.isZoomed_ = false; this.preBuildZoom_(); - document.addEventListener('keydown', this.onKeyDown.bind(this)); + document.body.addEventListener('keydown', this.onKeyDown.bind(this)); + window.addEventListener('resize', this.onWindowResize.bind(this)); } /** * On key down handler. Will decide if Zoom in or out * @param {Event} event Key down event */ - onKeyDown( event ) { + onKeyDown(event) { if ( !this.isZoomed_ && Keys.MINUS.includes( event.which ) ) { this.zoomIn(); } else if ( this.isZoomed_ && Keys.PLUS.includes( event.which ) ) { @@ -79,27 +80,45 @@ export default class Zoom { wrap.className = CLASSES.WRAP; const div = DOM.wrap(wrap, 'div'); div.className = CLASSES.DIV; - - // Calculates the margins in relation to window width - const divCSS = window.getComputedStyle(div); - const marginW = DOM.parseSize(divCSS.paddingLeft) - + DOM.parseSize(divCSS.paddingRight); - const marginH = DOM.parseSize(divCSS.paddingTop) - + DOM.parseSize(divCSS.paddingBottom); - - // Sets element size: window size - relative margins - const scale = divCSS.width.includes('%') ? - 100 / DOM.parseSize(divCSS.width) : - window.innerWidth / DOM.parseSize(divCSS.width); - elem.el.style.width = `${window.innerWidth - marginW * scale}px`; - elem.el.style.height = `${window.innerHeight - marginH * scale}px`; - - // Because of flexbox, wrap height is required - const slideCSS = window.getComputedStyle(elem.el); - wrap.style.height = `${DOM.parseSize(slideCSS.height) / scale}px`; + // Adding some layer for controling click events + const divLayer = document.createElement('div'); + divLayer.className = 'zoom-layer'; + divLayer.addEventListener('click', e => { + this.zoomOut(); + this.ws_.goToSlide(elem.i); + }); + wrap.appendChild(divLayer); + + this.setSizes_(div, wrap, elem); }); } + /** + * Sets layers size + * @param {Element} div flexbox element + * @param {Element} wrap wrapping element + * @param {Element} elem slide element + */ + setSizes_(div, wrap, elem) { + // Calculates the margins in relation to window width + const divCSS = window.getComputedStyle(div); + const marginW = DOM.parseSize(divCSS.paddingLeft) + + DOM.parseSize(divCSS.paddingRight); + const marginH = DOM.parseSize(divCSS.paddingTop) + + DOM.parseSize(divCSS.paddingBottom); + + // Sets element size: window size - relative margins + const scale = divCSS.width.includes('%') ? + 100 / DOM.parseSize(divCSS.width) : + window.innerWidth / DOM.parseSize(divCSS.width); + elem.el.style.width = `${window.innerWidth - marginW * scale}px`; + elem.el.style.height = `${window.innerHeight - marginH * scale}px`; + + // Because of flexbox, wrap height is required + const slideCSS = window.getComputedStyle(elem.el); + wrap.style.height = `${DOM.parseSize(slideCSS.height) / scale}px`; + } + /** * Zoom In the slider, scales the slides and uses a grid layout to show them */ @@ -107,6 +126,7 @@ export default class Zoom { DOM.hide(this.ws_.el); DOM.show(this.zws_.el); this.isZoomed_ = true; + document.body.style.overflow = 'auto'; } /** @@ -116,6 +136,19 @@ export default class Zoom { DOM.hide(this.zws_.el); DOM.show(this.ws_.el); this.isZoomed_ = false; + document.body.style.overflow = ''; + } + + /** + * When windows resize it is necessary to recalculate layers sizes + * @param {Event} ev + */ + onWindowResize(ev) { + this.zws_.slides.forEach( elem => { + const wrap = elem.el.parentElement; + const div = wrap.parentElement; + this.setSizes_(div, wrap, elem); + }); } } diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js index ae3487fb..df0b609d 100644 --- a/src/js/utils/dom.js +++ b/src/js/utils/dom.js @@ -121,6 +121,16 @@ export default class DOM { el.style.display = ''; } + /** + * Checks if the element is visible.This is only intended + * to be used in conjunction with DOM.hide and DOM.show + * @param {Element} el Element to check. + * @return {boolean} + */ + static isVisible(el) { + return el.style.display == ''; + } + /** * Fires a custom event on the given target. * @param {Element} target The target of the event. diff --git a/static/css/base.css b/static/css/base.css index 1909c044..a6d1ccf9 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -49,6 +49,7 @@ 14. Forms 15. Safari Bug (flex-wrap) 16. Print + 17. Zoom ----------------------------------------------------------------------------------- */ @@ -315,7 +316,6 @@ html.ws-ready body { #webslides { height: 100vh; overflow-x: hidden; - overflow-y: scroll; -webkit-overflow-scrolling: touch; } /* -- Hide scrollbar, but still being able to scroll -- */ @@ -3192,3 +3192,37 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap display: none; } } + + +/*========================================= +16. ZOOM +=========================================== */ + +#webslides-zoomed.grid { + background: #ccc; +} + +#webslides-zoomed.grid > .column { + position: relative; +} +#webslides-zoomed.grid > .column > .wrap-zoom { + position: relative; + background: #fff; +} +#webslides-zoomed.grid > .column { + width: 25%; +} +#webslides-zoomed.grid > .column > .wrap-zoom > .slide { + transform: scale(0.25) translate(-150%, -150vh); + display: flex !important; + position: absolute; + top: 0; + left: 0; + clip: rect(0px auto auto 0); +} +#webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer { + position: absolute; + background: transparent; + width: 100%; + height: 100%; +} diff --git a/static/js/webslides.js b/static/js/webslides.js index 46191ead..efe2016c 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-01 + * Date: 2017-04-05 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -231,6 +231,19 @@ var DOM = function () { el.style.display = ''; } + /** + * Checks if the element is visible.This is only intended + * to be used in conjunction with DOM.hide and DOM.show + * @param {Element} el Element to check. + * @return {boolean} + */ + + }, { + key: 'isVisible', + value: function isVisible(el) { + return el.style.display == ''; + } + /** * Fires a custom event on the given target. * @param {Element} target The target of the event. @@ -1531,7 +1544,7 @@ var Keyboard = function () { var method = void 0; var argument = void 0; - if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement()) { + if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement() || !__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isVisible(this.ws_.el)) { return; } @@ -1778,13 +1791,15 @@ var Navigation = function () { /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(3); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__ = __webpack_require__(3); 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"); } } + /** * Scroll plugin. */ @@ -1827,7 +1842,7 @@ var Scroll = function () { */ this.timeout_ = null; - if (!__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) { + if (!__WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isAny()) { this.scrollContainer_.addEventListener('wheel', this.onMouseWheel_.bind(this)); if (!wsInstance.isVertical) { @@ -1863,6 +1878,10 @@ var Scroll = function () { }, { key: 'onMouseWheel_', value: function onMouseWheel_(event) { + if (!__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isVisible(this.ws_.el)) { + return; + } + if (this.ws_.isMoving || this.timeout_) { event.preventDefault(); return; @@ -1909,13 +1928,15 @@ var Scroll = function () { /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(3); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__ = __webpack_require__(3); 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 EVENTS = { touch: { START: 'touchstart', @@ -1984,9 +2005,9 @@ var Touch = function () { var events = void 0; - if (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) { + if (__WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isAny()) { // Likely IE - if (window.PointerEvent && (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isWindows() || __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isWindowsPhone())) { + if (window.PointerEvent && (__WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isWindows() || __WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isWindowsPhone())) { events = EVENTS.pointer; } else { events = EVENTS.touch; @@ -2010,6 +2031,10 @@ var Touch = function () { _createClass(Touch, [{ key: 'onStart_', value: function onStart_(event) { + if (!__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isVisible(this.ws_.el)) { + return; + } + var info = Touch.normalizeEventInfo(event); this.startX_ = info.x; @@ -2027,6 +2052,10 @@ var Touch = function () { }, { key: 'onMove_', value: function onMove_(event) { + if (!__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isVisible(this.ws_.el)) { + return; + } + var info = Touch.normalizeEventInfo(event); this.endX_ = info.x; @@ -2041,6 +2070,10 @@ var Touch = function () { }, { key: 'onStop_', value: function onStop_() { + if (!__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isVisible(this.ws_.el)) { + return; + } + var diffX = this.startX_ - this.endX_; var diffY = this.startY_ - this.endY_; @@ -2436,7 +2469,8 @@ var Zoom = function () { this.isZoomed_ = false; this.preBuildZoom_(); - document.addEventListener('keydown', this.onKeyDown.bind(this)); + document.body.addEventListener('keydown', this.onKeyDown.bind(this)); + window.addEventListener('resize', this.onWindowResize.bind(this)); } /** @@ -2484,22 +2518,42 @@ var Zoom = function () { wrap.className = CLASSES.WRAP; var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div'); div.className = CLASSES.DIV; + // Adding some layer for controling click events + var divLayer = document.createElement('div'); + divLayer.className = 'zoom-layer'; + divLayer.addEventListener('click', function (e) { + _this.zoomOut(); + _this.ws_.goToSlide(elem.i); + }); + wrap.appendChild(divLayer); + + _this.setSizes_(div, wrap, elem); + }); + } - // Calculates the margins in relation to window width - var divCSS = window.getComputedStyle(div); - var marginW = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingLeft) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingRight); - var marginH = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingTop) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingBottom); + /** + * Sets layers size + * @param {Element} div flexbox element + * @param {Element} wrap wrapping element + * @param {Element} elem slide element + */ - // Sets element size: window size - relative margins - console.log(window.innerWidth, divCSS.width); - var scale = divCSS.width.includes('%') ? 100 / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width) : window.innerWidth / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width); - elem.el.style.width = window.innerWidth - marginW * scale + 'px'; - elem.el.style.height = window.innerHeight - marginH * scale + 'px'; + }, { + key: 'setSizes_', + value: function setSizes_(div, wrap, elem) { + // Calculates the margins in relation to window width + var divCSS = window.getComputedStyle(div); + var marginW = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingLeft) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingRight); + var marginH = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingTop) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingBottom); - // Because of flexbox, wrap height is required - var slideCSS = window.getComputedStyle(elem.el); - wrap.style.height = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(slideCSS.height) / scale + 'px'; - }); + // Sets element size: window size - relative margins + var scale = divCSS.width.includes('%') ? 100 / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width) : window.innerWidth / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width); + elem.el.style.width = window.innerWidth - marginW * scale + 'px'; + elem.el.style.height = window.innerHeight - marginH * scale + 'px'; + + // Because of flexbox, wrap height is required + var slideCSS = window.getComputedStyle(elem.el); + wrap.style.height = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(slideCSS.height) / scale + 'px'; } /** @@ -2512,6 +2566,7 @@ var Zoom = function () { __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.ws_.el); __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el); this.isZoomed_ = true; + document.body.style.overflow = 'auto'; } /** @@ -2524,6 +2579,24 @@ var Zoom = function () { __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el); __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.ws_.el); this.isZoomed_ = false; + document.body.style.overflow = ''; + } + + /** + * When windows resize it is necessary to recalculate layers sizes + * @param {Event} ev + */ + + }, { + key: 'onWindowResize', + value: function onWindowResize(ev) { + var _this2 = this; + + this.zws_.slides.forEach(function (elem) { + var wrap = elem.el.parentElement; + var div = wrap.parentElement; + _this2.setSizes_(div, wrap, elem); + }); } }]); diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 70edc04c..81facfd6 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,9 +1,9 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-01 + * Date: 2017-04-05 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};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=5)}([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 a=n(18),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:"once",value:function(e,t,n){var i=function i(a){a.target===e&&(e.removeEventListener(t,i),n(a))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(r)return r;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,a=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new a.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 a=n(0),o=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,a=void 0!==n&&n,o=t.changeOnClick,r=void 0!==o&&o,s=t.loop,l=void 0===s||s,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:a,changeOnClick:r,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),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(){this.initialised=!0,r.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=r.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.currentSlideI_!==e){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 a=this;this.el.style.overflow="hidden",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(){a.currentSlide_.hide(),e&&a.currentSlide_.moveAfterLast(),a.el.style.overflow="auto",setTimeout(function(){i.call(a,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var a=this;n.i(s.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(r.a.once(t.el,r.a.getAnimationEvent(),function(){t.el.classList.remove(o),i.call(a,t)}),t.el.classList.add(o)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,r.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=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 a=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}]),e}();t.a=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 a=n(3),o=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),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 a=n(0),o=n(1),r=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-o.scrollTop,r=o.scrollTop;if(!t)return o.scrollTop=e,void n();!function s(l){l+=16;var u=Math.min(1,l/t),c=a.a.swing(u,l*u,e,i,t);o.scrollTop=Math.floor(r+c*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:"once",value:function(e,t,n){var i=function i(a){a.target===e&&(e.removeEventListener(t,i),n(a))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,a=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new a.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 a=n(0),o=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,a=void 0!==n&&n,o=t.changeOnClick,s=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:a,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 a=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){a.currentSlide_.hide(),e&&a.currentSlide_.moveAfterLast(),a.el.style.overflow="auto",setTimeout(function(){i.call(a,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var a=this;n.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(o),i.call(a,t)}),t.el.classList.add(o)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 a=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,o){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(o&&this.isGoingLeft_||!o&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 a=n(0),o=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 a=n(0),o=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-o.scrollTop,s=o.scrollTop;if(!t)return o.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=a.a.swing(u,l*u,e,i,t);o.scrollTop=Math.floor(s+c*i),l .column { + width: 25%; +} #webslides-zoomed.grid > .column > .wrap-zoom > .slide { transform: scale(0.25) translate(-150%, -150vh); display: flex !important; - position: absolute; - top: 0; - left: 0; - clip: rect(0px auto auto 0); -} - - - - -.enorme { - position: absolute; - top: 0; - left: 0; - font-size: 500px; + position: absolute; + top: 0; + left: 0; + clip: rect(0px auto auto 0); +} +#webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer { + position: absolute; + background: transparent; + width: 100%; + height: 100%; } From ee6e0045e5bcdad81d8541e2eded104591a8f294 Mon Sep 17 00:00:00 2001 From: Luis Date: Sat, 8 Apr 2017 11:20:17 +0200 Subject: [PATCH 05/20] Adding zoom toggle to navigation counter --- src/js/modules/webslides.js | 7 +++++++ src/js/plugins/navigation.js | 9 +++++++-- src/js/plugins/zoom.js | 14 +++++++++++-- static/css/base.css | 5 ++++- static/js/webslides.js | 38 +++++++++++++++++++++++++++++++----- static/js/webslides.min.js | 4 ++-- 6 files changed, 65 insertions(+), 12 deletions(-) diff --git a/src/js/modules/webslides.js b/src/js/modules/webslides.js index 6f69d6a4..eccb8de6 100644 --- a/src/js/modules/webslides.js +++ b/src/js/modules/webslides.js @@ -383,6 +383,13 @@ export default class WebSlides { this.goToSlide(slideNumber); } + /** + * Toggles zoom + */ + toggleZoom() { + this.plugins.zoom.toggleZoom(); + } + /** * Registers a plugin to be loaded when the instance is created. It allows * (on purpose) to replace default plugins. diff --git a/src/js/plugins/navigation.js b/src/js/plugins/navigation.js index 264f37c8..141f6ce2 100644 --- a/src/js/plugins/navigation.js +++ b/src/js/plugins/navigation.js @@ -48,7 +48,9 @@ export default class Navigation { * Counter Element. * @type {Element} */ - this.counter = DOM.createNode('span', ELEMENT_ID.COUNTER); + this.counter = DOM.createNode('a', ELEMENT_ID.COUNTER); + this.counter.href = '#'; + this.counter.title = 'View all slides'; /** * @type {WebSlides} * @private @@ -72,6 +74,7 @@ export default class Navigation { 'ws:slide-change', this.onSlideChanged_.bind(this)); this.next.addEventListener('click', this.onButtonClicked_.bind(this)); this.prev.addEventListener('click', this.onButtonClicked_.bind(this)); + this.counter.addEventListener('click', this.onButtonClicked_.bind(this)); } /** @@ -115,8 +118,10 @@ export default class Navigation { event.preventDefault(); if (event.target === this.next) { this.ws_.goNext(); - } else { + } else if (event.target === this.next) { this.ws_.goPrev(); + } else { + this.ws_.toggleZoom(); } } } diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index 8a6246a6..624e678b 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -115,8 +115,18 @@ export default class Zoom { elem.el.style.height = `${window.innerHeight - marginH * scale}px`; // Because of flexbox, wrap height is required - const slideCSS = window.getComputedStyle(elem.el); - wrap.style.height = `${DOM.parseSize(slideCSS.height) / scale}px`; + wrap.style.height = `${window.innerHeight / scale}px`; + } + + /** + * Toggles zoom + */ + toggleZoom() { + if (this.isZoomed_) { + this.zoomOut(); + } else { + this.zoomIn(); + } } /** diff --git a/static/css/base.css b/static/css/base.css index a6d1ccf9..2036547b 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -1547,7 +1547,7 @@ opacity: 1; } */ -#counter { +#navigation #counter { position: relative; display: block; width: 10rem; @@ -1555,6 +1555,8 @@ opacity: 1; margin-left: auto; text-align: center; line-height: 4.8rem; + height: auto; + padding: 0; } #navigation p { @@ -3225,4 +3227,5 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap background: transparent; width: 100%; height: 100%; + cursor: pointer; } diff --git a/static/js/webslides.js b/static/js/webslides.js index efe2016c..5daa0f74 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-05 + * Date: 2017-04-08 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -1127,6 +1127,16 @@ var WebSlides = function () { this.goToSlide(slideNumber); } + /** + * Toggles zoom + */ + + }, { + key: 'toggleZoom', + value: function toggleZoom() { + this.plugins.zoom.toggleZoom(); + } + /** * Registers a plugin to be loaded when the instance is created. It allows * (on purpose) to replace default plugins. @@ -1651,7 +1661,9 @@ var Navigation = function () { * Counter Element. * @type {Element} */ - this.counter = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('span', ELEMENT_ID.COUNTER); + this.counter = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('a', ELEMENT_ID.COUNTER); + this.counter.href = '#'; + this.counter.title = 'View all slides'; /** * @type {WebSlides} * @private @@ -1678,6 +1690,7 @@ var Navigation = function () { this.ws_.el.addEventListener('ws:slide-change', this.onSlideChanged_.bind(this)); this.next.addEventListener('click', this.onButtonClicked_.bind(this)); this.prev.addEventListener('click', this.onButtonClicked_.bind(this)); + this.counter.addEventListener('click', this.onButtonClicked_.bind(this)); } /** @@ -1724,8 +1737,10 @@ var Navigation = function () { event.preventDefault(); if (event.target === this.next) { this.ws_.goNext(); - } else { + } else if (event.target === this.next) { this.ws_.goPrev(); + } else { + this.ws_.toggleZoom(); } } }], [{ @@ -2552,8 +2567,21 @@ var Zoom = function () { elem.el.style.height = window.innerHeight - marginH * scale + 'px'; // Because of flexbox, wrap height is required - var slideCSS = window.getComputedStyle(elem.el); - wrap.style.height = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(slideCSS.height) / scale + 'px'; + wrap.style.height = window.innerHeight / scale + 'px'; + } + + /** + * Toggles zoom + */ + + }, { + key: 'toggleZoom', + value: function toggleZoom() { + if (this.isZoomed_) { + this.zoomOut(); + } else { + this.zoomIn(); + } } /** diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 81facfd6..e9b6a344 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,9 +1,9 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-05 + * Date: 2017-04-08 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};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=5)}([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 a=n(18),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:"once",value:function(e,t,n){var i=function i(a){a.target===e&&(e.removeEventListener(t,i),n(a))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,a=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new a.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 a=n(0),o=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,a=void 0!==n&&n,o=t.changeOnClick,s=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:a,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 a=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){a.currentSlide_.hide(),e&&a.currentSlide_.moveAfterLast(),a.el.style.overflow="auto",setTimeout(function(){i.call(a,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var a=this;n.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(o),i.call(a,t)}),t.el.classList.add(o)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 a=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,o){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(o&&this.isGoingLeft_||!o&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 a=n(0),o=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 a=n(0),o=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-o.scrollTop,s=o.scrollTop;if(!t)return o.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=a.a.swing(u,l*u,e,i,t);o.scrollTop=Math.floor(s+c*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:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*i),l Date: Sat, 8 Apr 2017 13:14:25 +0200 Subject: [PATCH 06/20] Fix counter link --- src/js/plugins/navigation.js | 21 +++++++++++++++++---- static/css/base.css | 7 +++---- static/js/webslides.js | 24 ++++++++++++++++++++---- static/js/webslides.min.js | 2 +- 4 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/js/plugins/navigation.js b/src/js/plugins/navigation.js index 141f6ce2..fc3b824d 100644 --- a/src/js/plugins/navigation.js +++ b/src/js/plugins/navigation.js @@ -48,9 +48,7 @@ export default class Navigation { * Counter Element. * @type {Element} */ - this.counter = DOM.createNode('a', ELEMENT_ID.COUNTER); - this.counter.href = '#'; - this.counter.title = 'View all slides'; + this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER); /** * @type {WebSlides} * @private @@ -83,7 +81,7 @@ export default class Navigation { * @param {string|number} max Max slide number. */ updateCounter(current, max) { - this.counter.textContent = `${current} / ${max}`; + this.counter.childNodes[0].textContent = `${current} / ${max}`; } /** @@ -100,6 +98,21 @@ export default class Navigation { return arrow; } + /** + * Creates the navigation counter. + * @param {!String} id Desired ID for the counter. + * @return {Element} The arrow element. + */ + static createCounter(id) { + const counter = DOM.createNode('span', id); + const link = document.createElement('a'); + link.href = '#'; + link.title = 'View all slides'; + counter.appendChild(link); + + return counter; + } + /** * Slide Change event handler. Will update the text on the navigation. * @param {CustomEvent} event diff --git a/static/css/base.css b/static/css/base.css index 2036547b..03f96974 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -316,6 +316,7 @@ html.ws-ready body { #webslides { height: 100vh; overflow-x: hidden; + overflow-y: scroll; -webkit-overflow-scrolling: touch; } /* -- Hide scrollbar, but still being able to scroll -- */ @@ -1547,7 +1548,7 @@ opacity: 1; } */ -#navigation #counter { +#counter { position: relative; display: block; width: 10rem; @@ -1555,15 +1556,13 @@ opacity: 1; margin-left: auto; text-align: center; line-height: 4.8rem; - height: auto; - padding: 0; } #navigation p { margin-bottom: 0; } -#navigation a { +a#next,a#previous { position: absolute; width: 4rem; height: 4rem; diff --git a/static/js/webslides.js b/static/js/webslides.js index 5daa0f74..62cd50db 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1661,9 +1661,7 @@ var Navigation = function () { * Counter Element. * @type {Element} */ - this.counter = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('a', ELEMENT_ID.COUNTER); - this.counter.href = '#'; - this.counter.title = 'View all slides'; + this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER); /** * @type {WebSlides} * @private @@ -1702,7 +1700,7 @@ var Navigation = function () { }, { key: 'updateCounter', value: function updateCounter(current, max) { - this.counter.textContent = current + ' / ' + max; + this.counter.childNodes[0].textContent = current + ' / ' + max; } /** @@ -1752,6 +1750,24 @@ var Navigation = function () { return arrow; } + + /** + * Creates the navigation counter. + * @param {!String} id Desired ID for the counter. + * @return {Element} The arrow element. + */ + + }, { + key: 'createCounter', + value: function createCounter(id) { + var counter = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('span', id); + var link = document.createElement('a'); + link.href = '#'; + link.title = 'View all slides'; + counter.appendChild(link); + + return counter; + } }]); return Navigation; diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index e9b6a344..b22411d5 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -6,4 +6,4 @@ * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};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=5)}([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 o=n(18),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:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*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:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*i),l Date: Sat, 8 Apr 2017 13:52:21 +0200 Subject: [PATCH 07/20] hover counter link, .gallery li (equal), longform --- static/css/base.css | 284 ++++++++++++++++++++++++++++++++------------ 1 file changed, 210 insertions(+), 74 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index 03f96974..d9150175 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -47,9 +47,10 @@ 12. Avatars 13. Tables 14. Forms - 15. Safari Bug (flex-wrap) - 16. Print - 17. Zoom + 15. Longform Elements + 16. Safari Bug (flex-wrap) + 17. Print + 18. Zoom ----------------------------------------------------------------------------------- */ @@ -395,12 +396,17 @@ nav a[rel="external"] em, .wrap,header nav, footer nav { position: relative; - width: 90%; + width: 100%; max-width: 100%; margin-right:auto; margin-left: auto; z-index: 2; } +@media (min-width: 1024px) { +.wrap,header nav, footer nav { +width: 90%; + } +} .frame,.shadow { padding: 2.4rem; @@ -421,29 +427,28 @@ nav a[rel="external"] em, text-align: center; } -img.aligncenter { +img.aligncenter,figure.aligncenter { display: block; } -img.alignleft, -img.alignright, -img.aligncenter { - margin-top: 2.4rem; - margin-bottom: 2.4rem; +img.alignleft,figure.alignleft, +img.alignright,figure.alignright, +img.aligncenter,figure.aligncenter { + margin-top: 3.2rem; + margin-bottom: 3.2rem; } -@media (min-width: 768px) { - img.aligncenter { - margin-top: .8rem; - margin-bottom: .8rem; - } - img.alignright,svg.alignright { - margin: .8rem 0 .8rem 4.8rem - } - img.alignleft,svg.alignright { - margin: .8rem 4.8rem .8rem 0; - } +img.aligncenter,figure.aligncenter { + margin-top: .8rem; + margin-bottom: .8rem; +} +img.alignright,svg.alignright,figure.alignright { + margin: .8rem 0 .8rem 2.4rem +} +img.alignleft,svg.alignleft,figure.alignleft { + margin: .8rem 2.4rem .8rem 0; } + @media (min-width: 1024px) { /*=== div.size-60, img.size-50, h1.size-40, p.size-30... === */ @@ -693,7 +698,7 @@ footer, .embed iframe, .embed object, -.embed embed { +.embed embed,.embed video { position: absolute; top: 0; left: 0; @@ -701,6 +706,51 @@ footer, height: 100%; margin: 0; } +/* -- Responsive background video +https://fvsch.com/code/video-background/ -- */ + +.fullscreen > .embed { + position: fixed; + height: auto; + top: 0; + right: 0; + bottom: 0; + left: 0; + padding-bottom: 0; +} + +/* 1. No object-fit support: */ +@media (min-aspect-ratio: 16/9) { + .fullscreen > .embed > iframe, + .fullscreen > .embed > object, + .fullscreen > .embed > embed, + .fullscreen > .embed > video { + height: 300%; + top: -100%; + } +} +@media (max-aspect-ratio: 16/9) { + .fullscreen > .embed > iframe, + .fullscreen > .embed > object, + .fullscreen > .embed > embed, + .fullscreen > .embed > video { + width: 300%; + left: -100%; + } +} +/* 2. If supporting object-fit, overriding (1): */ +@supports (object-fit: cover) { + .fullscreen > .embed > iframe, + .fullscreen > .embed > object, + .fullscreen > .embed > embed, + .fullscreen > .embed > video { + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + } +} /*=== Browser (Screenshots) ================ */ @@ -743,15 +793,11 @@ li .browser {margin-bottom: 0; font-size: 1.6rem; } } - - .browser img { width: 100%; margin-top: 3.2rem; } - - /*=== 1.4. Basic Grid (Flexible blocks) Auto-fill & Equal height === */ @@ -896,7 +942,7 @@ h1 svg, h2 svg, h3 svg, h4 svg { margin-top: -.8rem; } -.text-intro svg,.text-quote p svg,.try svg { +.text-intro svg,.text-quote p svg,.wall p svg,.try svg { margin-top: -.4rem; } .flexblock li h2 svg,.flexblock li h3 svg {margin-top: 0; @@ -1034,10 +1080,23 @@ p.text-subtitle svg {vertical-align: text-top;} margin-top: 3.2rem; } - .text-uppercase {text-transform: uppercase;} .text-lowercase {text-transform: lowercase;} +/* -- Emoji (you'll love this) -- */ + +.text-emoji { +font-size: 6.8rem; +line-height: 8.8rem; +} + +@media (min-width: 768px) { +.text-emoji { +font-size: 12.8rem; +line-height: 16rem; + } +} + /* -- Numbers (results, sales... 23,478,289 iphones) -- */ .text-data { @@ -1143,6 +1202,7 @@ p.text-subtitle svg {vertical-align: text-top;} line-height: 4rem; font-weight: 400; margin-right: 2.4rem; + margin-bottom: 3.2rem; margin-left: 2.4rem; } @@ -1153,13 +1213,13 @@ p.text-subtitle svg {vertical-align: text-top;} @media (min-width: 1024px) { [class*="text-pull"] { - margin-right: -4rem; - margin-left: -4rem; + margin-right: -4.8rem; + margin-left: -4.8rem; } } @media (min-width: 568px) { [class*="text-pull-"] { - width: 32rem; + max-width: 40%; } .text-pull-right { float: right; @@ -1172,6 +1232,10 @@ p.text-subtitle svg {vertical-align: text-top;} margin-right: 2.4rem; } } +img[class*="text-pull-"],figure[class*="text-pull-"] { + padding-top:0; + margin-top: .8rem; +} /* -- Interviews (Questions & Answers) --- */ /* --
@@ -1208,7 +1272,6 @@ p.text-subtitle svg {vertical-align: text-top;} font-family: "San Francisco", helvetica, arial, sans-serif; } - /* Ultra Light */ @font-face { @@ -1217,7 +1280,6 @@ p.text-subtitle svg {vertical-align: text-top;} src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2"); } - /* Thin */ @font-face { @@ -1235,7 +1297,6 @@ p.text-subtitle svg {vertical-align: text-top;} src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2"); } - /* Bold */ @font-face { @@ -1244,7 +1305,6 @@ p.text-subtitle svg {vertical-align: text-top;} src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff2"); } - /*========================================= 3. Header & Footer =========================================== */ @@ -1270,20 +1330,24 @@ footer img { height: 4rem; vertical-align: middle; } +footer { + position: relative; +} +header, footer { + /* hover/visibility */ + z-index: 3; +} -header,footer { +header,.ws-ready footer { position: absolute; top: 0; left: 0; - /* hover/visibility */ - z-index: 3; } -footer { +.ws-ready footer { top: auto; bottom: 0; } - /*=== Hide header[role=banner] === */ /*Remove "opacity=0" if you want an unique, visible header on each slide*/ @@ -1414,8 +1478,7 @@ section * { -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } -section .background,section .background-video, -[class*="background-"].light,[class*="background-"].dark { +section .background,section .light,section .dark { -webkit-animation-duration:0s; animation-duration:0s; } @@ -1519,6 +1582,7 @@ padding: 2.4rem; clear: both; } } + /* === 5.2 Counter / Navigation Slides === */ #navigation { @@ -1557,7 +1621,9 @@ opacity: 1; text-align: center; line-height: 4.8rem; } - +#counter a:hover { +padding: .8rem; +} #navigation p { margin-bottom: 0; } @@ -1591,7 +1657,7 @@ a#previous { } } -/*=== 5.3 Slides - Background Images === */ +/*=== 5.3 Slides - Background Images/Videos === */ .background, [class*="background-"] { @@ -1600,9 +1666,11 @@ a#previous { right: 0; bottom: 0; left: 0; +} +.background, +[class*="background-"]{ background-repeat: no-repeat; } - .background { background-position: center; background-size: cover @@ -1663,19 +1731,18 @@ a#previous { } } +/*=== bg image/video overlay === */ +/*-- [class*="bg-"] .background.dark, [class*="bg-"] .embed.dark... -- */ - -/*=== bg image light overlay === */ - -[class*="bg-"] .background.light, -[class*="bg-"] [class*="background-"].light { +[class*="bg-"] .light, +[class*="bg-"] .light { filter: alpha(opacity=8000); opacity: 0.80; filter: alpha(opacity=8); } -[class*="bg-"] .background.dark, -[class*="bg-"] [class*="background-"].dark { +[class*="bg-"] .dark, +[class*="bg-"] .dark { filter: alpha(opacity=2000); opacity: 0.20; filter: alpha(opacity=2); @@ -2061,10 +2128,12 @@ img size recommended:800x600px =================================================== */ .flexblock.gallery li { - flex:inherit; margin-bottom: 4.8rem; } - +.flexblock.gallery li:nth-child(n+4) { + -webkit-flex:inherit; + flex:inherit; +} .flexblock.gallery li, .flexblock.gallery.blink li>a { padding: 0; @@ -2676,7 +2745,7 @@ p + .work { min-height: 100vh; } -[class*="card-"] figure img { +[class*="card-"] figure img,[class*="card-"] figure iframe { margin: 0 auto; display: block; } @@ -2693,8 +2762,12 @@ object-fit to re-frame images rather than just stretch and resize them === */ min-width: 380px; max-height: 100%; } + /* -- imgs/frames size recommended:800x600 -- */ [class*="card-"][class*="bg-"] figure img, - .fullscreen [class*="card-"] figure img { + [class*="card-"][class*="bg-"] figure iframe, + /* -- Make small images/iframes larger -- */ + .fullscreen [class*="card-"] figure img, + .fullscreen [class*="card-"] figure iframe { position: absolute; z-index: 1; top: 0; @@ -2708,12 +2781,15 @@ object-fit to re-frame images rather than just stretch and resize them === */ .flex-content, [class*="card"] blockquote { position: relative; + padding: 2.4rem; +} +[class*="card-"] .flex-content, +[class*="card-"] blockquote { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; justify-content: center; - padding: 2.4rem; } .flex-content p { @@ -2789,10 +2865,12 @@ object-fit to re-frame images rather than just stretch and resize them === */ /* Visibility */ z-index: 2; } + [class*="card"] figure figcaption svg { font-size: 1rem; } + /*========================================= 11. Quotes =========================================== */ @@ -2809,6 +2887,10 @@ blockquote p { blockquote p:last-child { margin-bottom: 3.2rem; } +/* -- Interviews dl.text-interview -- */ +dd blockquote p:last-child { +margin-bottom: 0; +} .bg-apple blockquote p { font-family: "San Francisco", "Roboto", helvetica, arial, sans-serif; font-weight: 300; @@ -2827,33 +2909,35 @@ cite:before { content: "\2014 \2009"; margin-right: 6px; } -/* -- Versatility: blockquote, p, h2, h3... -- */ -.text-quote { -position: relative; +/* -- Big Blockquote -- */ +/* Info: .wall will be deprecated soon. Use .text-quote ;) */ + +.text-quote,.wall { +position: relative; /* Versatility: blockquote, p, h2... */ } -.text-quote:before { +.text-quote:before,.wall:before { position: absolute; - top: -6.4rem; + top: -4rem; left: -.8rem; content: "\201C"; font-family: arial, sans-serif; - width: 6.4rem; - height: 6.4rem; - font-size: 16rem; + width: 5.6rem; + height: 5.6rem; + font-size: 12rem; line-height: 1; text-align: center; } @media (min-width:768px) { - .text-quote { - padding-left: 8rem; + .text-quote,.wall { + padding-left: 6.4rem; } - .text-quote p { + .text-quote p,.wall p { font-size: 3.2rem; line-height: 4.8rem; } - .text-quote:before { - top: -3.2rem; + .text-quote:before,.wall:before { + top: -1.6rem; left: .8rem; } } @@ -3144,7 +3228,60 @@ button:disabled:hover { } /*========================================= -15. SAFARI BUGS (flex-wrap) +15. Longform +=========================================== */ + +/* -- Posts = .wrap.longform -- */ + +.longform { +width: 72rem; +/* Why 72rem=720px? +90-95 characters per line = better reading speed */ +} +.longform .alignleft, .longform .alignright { + max-width: 40%; +} +.longform img.aligncenter,.longform figure.aligncenter { + margin-top: 3.2rem; + margin-bottom: 3.2rem; +} +.longform ul,.longform ol { +margin-bottom: 3.2rem; +} +.longform ul ol,.longform ol ul,.longform ul ul,.longform ol ol { +margin-bottom: 0; +} +.longform figcaption p,.longform [class*="text-pull-"] p{ +line-height: 2.4rem; +font-size: 1.6rem; +} +/* Mobile: video full width */ +.text-pull.embed { +padding-bottom: 60.6%; /*without black borders; */ +margin-right: -2.4rem; +margin-left: -2.4rem; +} +@media (min-width:1280px) { +.longform [class*="text-pull-"] { +max-width: 32%; +} +.longform .text-pull-right { +margin-right:-256px; +} +.longform .text-pull-left { +margin-left:-256px; + } +} +@media (min-width:1024px) { +.longform .text-quote { +margin-right: -4.8rem; +margin-left: -4.8rem; + } +} + + +/*========================================= +16. SAFARI BUGS (flex-wrap) Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap =========================================== */ @@ -3154,7 +3291,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap } /*========================================= -16. PRINT +17. PRINT =========================================== */ @media print { @@ -3194,9 +3331,8 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap } } - /*========================================= -16. ZOOM +18. ZOOM =========================================== */ #webslides-zoomed.grid { From 89e8ffdd788e305f5edd2b6f571c16fc34f4161e Mon Sep 17 00:00:00 2001 From: Luis Date: Sat, 8 Apr 2017 14:01:40 +0200 Subject: [PATCH 08/20] Fix navigation previous link --- src/js/plugins/navigation.js | 2 +- static/js/webslides.js | 2 +- static/js/webslides.min.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/js/plugins/navigation.js b/src/js/plugins/navigation.js index fc3b824d..09901651 100644 --- a/src/js/plugins/navigation.js +++ b/src/js/plugins/navigation.js @@ -131,7 +131,7 @@ export default class Navigation { event.preventDefault(); if (event.target === this.next) { this.ws_.goNext(); - } else if (event.target === this.next) { + } else if (event.target === this.prev) { this.ws_.goPrev(); } else { this.ws_.toggleZoom(); diff --git a/static/js/webslides.js b/static/js/webslides.js index 62cd50db..a26ce121 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1735,7 +1735,7 @@ var Navigation = function () { event.preventDefault(); if (event.target === this.next) { this.ws_.goNext(); - } else if (event.target === this.next) { + } else if (event.target === this.prev) { this.ws_.goPrev(); } else { this.ws_.toggleZoom(); diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index b22411d5..0b50cef8 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -6,4 +6,4 @@ * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};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=5)}([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 o=n(18),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:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*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:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*i),l Date: Sun, 9 Apr 2017 16:37:25 +0200 Subject: [PATCH 09/20] Zoom mode: unstyled slide number and zoom out when click outside the slide --- src/js/plugins/zoom.js | 47 +- static/js/webslides.js | 58 +- static/js/webslides.min.js | 4 +- tests/classes.html | 1940 ------------------------------------ tests/media.html | 722 -------------- tests/test.css | 29 - tests/test.js | 36 - 7 files changed, 77 insertions(+), 2759 deletions(-) delete mode 100644 tests/classes.html delete mode 100644 tests/media.html delete mode 100644 tests/test.css delete mode 100644 tests/test.js diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index 624e678b..f7c0cbce 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -75,22 +75,41 @@ export default class Zoom { DOM.after(this.zws_.el, this.ws_.el); // Creates the container for each slide - this.zws_.slides.forEach( elem => { - const wrap = DOM.wrap(elem.el, 'div'); - wrap.className = CLASSES.WRAP; - const div = DOM.wrap(wrap, 'div'); - div.className = CLASSES.DIV; - // Adding some layer for controling click events - const divLayer = document.createElement('div'); - divLayer.className = 'zoom-layer'; - divLayer.addEventListener('click', e => { - this.zoomOut(); - this.ws_.goToSlide(elem.i); - }); - wrap.appendChild(divLayer); + this.zws_.slides.forEach( elem => this.createSlideBlock_(elem)); + } - this.setSizes_(div, wrap, elem); + /** + * Creates a block structure around the slide + * @param {Element} elem slide element + */ + createSlideBlock_(elem) { + // Wraps the slide around a container + const wrap = DOM.wrap(elem.el, 'div'); + wrap.className = CLASSES.WRAP; + // Slide container, need due to flexbox styles + const div = DOM.wrap(wrap, 'div'); + div.className = CLASSES.DIV; + // Adding some layer for controling click events + const divLayer = document.createElement('div'); + divLayer.className = 'zoom-layer'; + divLayer.addEventListener('click', e => { + this.zoomOut(); + this.ws_.goToSlide(elem.i); + e.stopPropagation(); }); + wrap.appendChild(divLayer); + // Slide number + const slideNumber = document.createElement('span'); + slideNumber.className = 'slide-number'; + slideNumber.textContent = `${elem.i+1} / ${this.zws_.slides.length}`; + div.appendChild(slideNumber); + // Zoom out when click in slide "border" + div.addEventListener('click', e => { + this.ws_.toggleZoom(); + e.stopPropagation(); + }); + + this.setSizes_(div, wrap, elem); } /** diff --git a/static/js/webslides.js b/static/js/webslides.js index a26ce121..bc5fbf7b 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-08 + * Date: 2017-04-09 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -2545,21 +2545,47 @@ var Zoom = function () { // Creates the container for each slide this.zws_.slides.forEach(function (elem) { - var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div'); - wrap.className = CLASSES.WRAP; - var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div'); - div.className = CLASSES.DIV; - // Adding some layer for controling click events - var divLayer = document.createElement('div'); - divLayer.className = 'zoom-layer'; - divLayer.addEventListener('click', function (e) { - _this.zoomOut(); - _this.ws_.goToSlide(elem.i); - }); - wrap.appendChild(divLayer); + return _this.createSlideBlock_(elem); + }); + } + + /** + * Creates a block structure around the slide + * @param {Element} elem slide element + */ - _this.setSizes_(div, wrap, elem); + }, { + key: 'createSlideBlock_', + value: function createSlideBlock_(elem) { + var _this2 = this; + + // Wraps the slide around a container + var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div'); + wrap.className = CLASSES.WRAP; + // Slide container, need due to flexbox styles + var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div'); + div.className = CLASSES.DIV; + // Adding some layer for controling click events + var divLayer = document.createElement('div'); + divLayer.className = 'zoom-layer'; + divLayer.addEventListener('click', function (e) { + _this2.zoomOut(); + _this2.ws_.goToSlide(elem.i); + e.stopPropagation(); + }); + wrap.appendChild(divLayer); + // Slide number + var slideNumber = document.createElement('span'); + slideNumber.className = 'slide-number'; + slideNumber.textContent = elem.i + 1 + ' / ' + this.zws_.slides.length; + div.appendChild(slideNumber); + // Zoom out when click in slide "border" + div.addEventListener('click', function (e) { + _this2.ws_.toggleZoom(); + e.stopPropagation(); }); + + this.setSizes_(div, wrap, elem); } /** @@ -2634,12 +2660,12 @@ var Zoom = function () { }, { key: 'onWindowResize', value: function onWindowResize(ev) { - var _this2 = this; + var _this3 = this; this.zws_.slides.forEach(function (elem) { var wrap = elem.el.parentElement; var div = wrap.parentElement; - _this2.setSizes_(div, wrap, elem); + _this3.setSizes_(div, wrap, elem); }); } }]); diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 0b50cef8..b53b12e6 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,9 +1,9 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-08 + * Date: 2017-04-09 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};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=5)}([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 o=n(18),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:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*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:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*i),l - - - - - - - - - WebSlides Tutorial: Classes - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
-
- - - -
- - -
-

WebSlides Tutorial

-

Classes

-

* * *

-

- - - - - Free Download - -

-
- -
-
- -
-

WebSlides Classes

-

Friendly naming conventions.

- -
- -
-
-
-

- - - - CSS Syntax -

-

WebSlides is so easy to understand and love. Baseline: 8.

-
-
    -
  • Typography: .text-landing, .text-subtitle, .text-data, .text-intro...
    • -
  • BG Colors: .bg-primary, .bg-blue,.bg-apple...
    • -
  • BG Images: .background, .background-center-bottom...
    • -
  • Cards: .card-60, .card-50, .card-40...
    • -
  • Sizes: .size-50, .size-40...
    • -
  • Flex Blocks: .flexblock.clients, .flexblock.gallery, .flexblock.metrics...
    • -
-
- -
-
- -
-
-
-

WebSlides is really easy

-

Each parent <section> in the #webslides element is an individual slide.

-

Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

-
- -
- 
<article id="webslides">
-  <!-- Slide 1 -->
-  <section>
-    <h1>Design for trust</h1>
-  </section>
-  <!-- Slide 2 -->
-  <section class="bg-primary">
-    <div class="wrap">
-      <h2>.wrap = container 1200px with fadein</h2>
-    </div>
-  </section>
-</article>
-
-
- -
- -
-

Vertical sliding? <article id="webslides" class="vertical">

-
- -
-
-
- -
-

Header (logo) .alignright

-
-
-
-

Simple CSS Alignments

-

Put content wherever you want.

-
- -
-
-
- iPhone -

img.alignleft

-

img.alignleft.size-50

-

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

-

Image size recommended:
800x600px / 600x450px.

-
- -
-
-
- iPhone -

img.alignright

-

img.alignright.size-50

-

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

-

Image size recommended:
800x600px / 600x450px.

-
- -
-
-
- iPhone -

img.aligncenter.size-40

-
- -
-
-
-
-

1/9 left top

-

Put content wherever you want. Have less. Do more. Create beautiful solutions.

-

.slide-top and .content-left

-
-
- -
-
-
-
-

2/9 center top

-

In a village of La Mancha, the name of which I have no desire to call to mind,

-

.slide-top and .content-center

-
-
- -
-
-
-
-

3/9 right top

-

there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.

-

.slide-top and .content-right

-
-
- -
-
-
-
-

4/9 left center

-

An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays,

-

.content-left

-
-
- -
-
-
-
-

5/9 center

-

lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income.

-

.content-center

-
-
- -
-
-
-
-

6/9 right center

-

he rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays,

-

.content-right

-
-
- -
-
-
-
-

7/9 left bottom

-

while on week-days he made a brave figure in his best homespun.

-

.slide-bottom and .content-left

-
-
- -
-
-
-
-

8/9 center bottom

-

He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place,

-

.slide-bottom and .content-center

-
-
- -
-
-
-
-

9/9 right bottom

-

who used to saddle the hack as well as handle the bill-hook.

-

.slide-bottom and .content-right

-
-
- -
-
- -
-

.grid + .column

-

Basic Grid (auto-fill and equal height).

-
-
-
Why WebSlides?
-

There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.

-

* * *

-
- -
-
WebSlides Files
-
- -
-
How easy is WebSlides?
-

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

-

* * *

-
- -
- -
- -
-
- -
-

.grid.vertical-align + .column

-

Basic Grid (auto-fill and equal height).

-
-
-
Why WebSlides?
-

There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.

-

* * *

-
- -
-
WebSlides Files
-
- -
-
How easy is WebSlides?
-

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

-

* * *

-
- -
- -
- -
-
-
-

.grid.sm (sidebar + main)

-
-
-
-

.column 1

-

Stendhal syndrome is a psychosomatic disorder that causes rapid heartbeat, dizziness, fainting, confusion and even hallucinations when an individual is exposed to an experience of great personal significance, particularly viewing art.

-
-
-

.column 2

-

The illness is named after the 19th-century French author Stendhal (pseudonym of Marie-Henri Beyle), who described his experience with the phenomenon during his 1817 visit to Florence in his book Naples and Florence: A Journey from Milan to Reggio.

-

When he visited the Basilica of Santa Croce, where Niccolò Machiavelli, Michelangelo and Galileo Galilei are buried, he saw Giotto's frescoes for the first time and was overcome with emotion.

-
-
- -
- -
-
-
-

.grid.ms (main + sidebar)

-
-
-
-

.column 1

-

Beauty is a characteristic of an animal, idea, object, person or place that provides a perceptual experience of pleasure or satisfaction. Beauty is studied as part of aesthetics, culture, social psychology and sociology.

-

An "ideal beauty" is an entity which is admired, or possesses features widely attributed to beauty in a particular culture, for perfection.

-
-
-

.column 2

-

The experience of "beauty" often involves an interpretation of some entity as being in balance and harmony with nature, which may lead to feelings of attraction and emotional well-being.

-
-
- -
- -
-
-
-

.grid.sms (sidebar + main + sidebar)

-
-
-
-

.column 1

-

Information architecture is considered to have been founded by Richard Saul Wurman.

-
-
-

.column 2

-

Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

-
-
-

.column 3

-

The difficulty in establishing a common definition for "information architecture" arises partly from the term's existence in multiple fields.

-
-
- -
- -
-
-
-
-
- Big Ben, London -
- - - - - David Dibert (Unsplash) - -
-
- -
-

- Discover London -

-

.card-50.bg-white

-
    -
  • - Density: 5,518/km2 -
    • -
  • Population: 8,673,713
    • -
  • Website: visitlondon.com
    • -
-

- There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region. -

-
- -
- -
- -
-
-
-
-
-

Unsplash -

-

.card-50.bg-white

-

Unsplash is a really cool resource. It is a collection of Creative Commons Zero licensed photos that are really great. -

-
    -
  • - Role: Frontend -
    • -
  • Client: Acme
    • -
  • Year: 2018
    • -
-
- -
- Apple Watch -
- - - - - Crew (Unsplash) - -
-
- -
- -
- -
-
-
-
- Yosemite National Park -
- - - - - Chad Madden (Unsplash) - -
-
- -
-

- What is inspiration? -

-

- In Greek thought, inspiration meant that the poet or artist would go into ecstasy or furor poeticus, the divine frenzy or poetic madness. The Muses are the inspirational goddesses of literature, science, and the arts in Greek mythology. -

-
- -
- -
-
-

Backgrounds

-

<section class="bg-apple">

-
-
-
-

Corporate Backgrounds

-
    -
  • -

    .bg-primary

    - #44d -
    • -
  • -

    .bg-secondary

    - #67d -
    • -
  • -

    .bg-light

    - #edf2f7 -
    • -
  • -

    body

    - #f7f9fb -
    • -
-
-

General Colors

-
    -
  • -

    .bg-black

    - #111 -
    • -
  • -

    .bg-black-blue

    - #123 -
    • -
  • -

    .bg-gray

    - #d5d9e2 -
    • -
  • -

    .bg-white

    - #fff -
    • -
-
- -
-
-
-
    -
  • -

    .bg-red

    - #c23 -
    • -
  • -

    .bg-green

    - #077 -
    • -
  • -

    .bg-blue

    - #346 -
    • -
  • -

    .bg-purple

    - #b6d -
    • -
-
-

Transparent Backgrounds

-
    -
  • -

    .bg-trans-dark

    - rgba(0,0,0 , 0.5) -
    • -
  • -

    .bg-trans-light

    - rgba(255,255,255 , 0.2) -
    • -
-
- -
-
-
-

Gradients

-
    -
  • Horizontal .bg-gradient-h
    • -
  • Radial .bg-gradient-r
    • -
  • Vertical .bg-gradient-v
    • -
-
- -
-
- -
-

Horizontal Gradient

-

section.bg-gradient-h

-
- -
-
-
-

Radial Gradient

-

section.bg-gradient-r

-
- -
-
- -
-

Vertical Gradient

-

section.bg-gradient-v

-
- -
-
-
-

Background Videos

- 
<video class="background-video" autoplay muted loop poster="image.jpg">
-  <source src="video.mp4" type="video/mp4">
-</video>
-

.background-video

-
- -
-
-
-

.background-video

-

WebSlides is the easiest way to make HTML presentations. Inspire and engage.

-
- -
-
-
-

BG Video with Overlay

-

section.bg-blue > .background-video.dark or .light

-
- -
-
-
-
-

Fullscreen Background Images

- 
<section>
-	<span class="background" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span>
-	<section>
-		<h1>Slide</h1>
-	</section>
-</section>
-

How to embed Unsplash photos?

-
-
-

16 Different Backgrounds

-
    -
  • .background (cover)
    • -
  • .background-top (cover)
    • -
  • .background-bottom (cover)
    • -
  • .background.light (opacity)
    • -
  • .background.dark (opacity)
    • -
  • .background-center
    • -
  • .background-center-top
    • -
  • .background-center-bottom
    • -
  • .background-left
    • -
  • .background-left-top
    • -
  • .background-left-bottom
    • -
  • .background-right
    • -
  • .background-right-top
    • -
  • .background-right-bottom
    • -
  • .background-anim (animated)
    • -
  • .background-video (fullscreen)
    • -
-
-
- -
-
- -
-
-

.background-(position)

-

.background-right-bottom

-
    -
  • -
    - - - -

    Ultra-Fast WiFi

    - Simple and secure file sharing. -
    -
    • -
  • -
    - - - -

    All day battery life

    - Your battery worries may be over. -
    -
    • -
  • -
    - - - -

    Lifetime Warranty

    - We'll fix it or if we can't, we'll replace it. -
    -
    • -
-
-
- -
-
- - -
-

Iceland

-

section[class*="bg-"] > .background.dark

-
-
-
- - -
-

Iceland

-

section[class*="bg-"] > .background.light

-
-
-
- - -
-

.background.anim

-
- -
-
-
-

Flexible blocks

-

ul.flexblock = Flexible blocks with auto-fill and equal height.

-
-
    -
  • -

    - - - - .flexblock li 1 -

    - Multipurpose: services, features, specs... -
    • -
  • -

    - - - - .flexblock li 2 -

    - Multipurpose: benefits, clients, work... -
    • -
  • -

    - - - - .flexblock li 3 -

    - Multipurpose: news, metrics, plans... -
    • -
-
- -
-
-
-
-

Flexible Block = .flexblock

-

Auto-fill & Equal height columns:

- 
<ul class="flexblock">
-  <li>
-    Item 1
-  </li>
-  <li>
-    Item 2
-  </li>
-  <li>
-    Item 3
-  </li>
-  <li>
-    Item 4
-  </li>
-</ul>
-
-
-

Block Link = .flexblock.blink

-

Make the whole block clickable:

- 
<ul class="flexblock blink">
-  <li>
-    <a href="#">
-      Item 1
-    </a>
-  </li>
-  <li>
-    <a href="">
-      Item 2
-    </a>
-  </li>
-</ul>
-
-
- -
-
-
-

ul.flexblock

-
    -
  • -

    - - - - Purpose -

    - Businesses that people love -
    • -
  • -

    - - - - Principles -

    - Ethics of openness and good taste -
    • -
  • -

    - - - - Process -

    - Useful → Easy → Fast → Beautiful -
    • -
-
-

ul.flexblock.blink

- -
- -
-
-
-

ul.flexblock.blink.border

- -
- -
-
-
-

Clients

-

ul.flexblock.clients

- -
- -
-
-
-

Clients

-

ul.flexblock.clients.border

- -
- -
-
-
-

ul.flexblock.features

-
    -
  • -
    -

    100% customizable

    - Well documented. -
    -
    • -
  • -
    - $48 -

    Extra virgin olive oil

    - The Spanish caviar. -
    -
    • -
  • -
    -

    - - - - Ultra-fast Wifi -

    - Simple file sharing. -
    -
    • -
-
-

ul.flexblock.features.blink

- -
- -
-
-
-

ul.flexblock.gallery

- -
- -
-
-
-

ul.flexblock.gallery + .overlay

- -
- -
-
-
-

ul.flexblock.metrics

- -
    -
  • Founded - 2016 -
    • -
  • - - - - - - 24M Subscribers -
    • -
  • - - - - - - Revenue: $16M -
    • -
  • - Monthly Growth - 64% -
    • -
  • - - - - - - 8 Offices -
    • -
  • - - - - - - 48 Employees -
    • -
  • - - - - - - Benefits: $2,4M -
    • -
  • - - - - - - Bank: $32M -
    • -
-
- -
-
-
-

ul.flexblock.metrics.border

- -
    -
  • Founded - 2016 -
    • -
  • - - - - - - 24M Subscribers -
    • -
  • - - - - - - Revenue: $16M -
    • -
  • - Monthly Growth - 64% -
    • -
  • - - - - - - 8 Offices -
    • -
  • - - - - - - 48 Employees -
    • -
  • - - - - - - Benefits: $2,4M -
    • -
  • - - - - - - Bank: $32M -
    • -
-
- -
-
-
-

.flexblock.plans.blink

-

All content is for demo purposes only.

- -
- -
-
-
- -
- -
-
-
-
-

ul.flexblock.specs

-
    -
  • -
    - - - -

    Ultra-Fast WiFi

    - Simple and secure file sharing. -
    -
    • -
  • -
    - - - -

    All day battery life

    - Your battery worries may be over. -
    -
    • -
  • -
    - - - -

    Lifetime Warranty

    - We'll fix it or if we can't, we'll replace it. -
    -
    • -
-
- -
- Pixel Phone -
-
- -
-
- -
-

.flexblock.reasons

-
-
-
    -
  • -

    Why WebSlides? Work better, faster.

    -

    Designers and marketers can now focus on the content. Simply choose a demo and customize it in minutes. Be memorable!

    -
    • -
  • -

    Good karma. Just the essentials and using lovely CSS.

    -

    WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

    -
    • -
-
- -
- -
-
-
-

ul.flexblock.steps

-
    - -
  • - - - - - -

    01. Passion

    -

    When you're really passionate about your job, you can change the world.

    -
    • -
  • -
    - - - - - -

    02. Purpose

    -

    Why does this business exist? How are you different? Why matters?

    -
    • -
  • -
    - - - - - -

    03. Principles

    -

    Leadership through usefulness, openness, empathy, and good taste.

    -
    • -
  • -
    - - - - - -

    04. Process

    -
      -
    • Useful
      • -
    • Easy
      • -
    • Fast
      • -
    • Beautiful
      • -
    -
    • -
-
- -
-
-
-

ul.flexblock.activity

- -
- -
-
-
-
-
-

Ag

-
- -
-

Roboto in Google Fonts.

-

The quick brown fox jumps over the lazy dog.

-

ABCDEFGHIJKLMNOPQRSTUVWXYZ

-

abcdefghijklmnopqrstuvwxyz

-

1234567890(,.;:?!$&*)

-
- -
- -
- -
-
-
-

Landings

-

.text-landing

-
- -
-
-
-

Landings

-

Create a simple web presence.

-

.text-intro

-
- -
-
-
-

Powered by #WebSlides .text-subtitle

-

Landings

-

Create a simple web presence.

-
- -
-
- -
-

Landings

-

.text-shadow

-
- -
-
-

4,235,678

-

.text-data

-
-
- -
-

Why WebSlides? .text-context

-

WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.

-
- -
-
-
-

.text-cols (2 columns)

-
-

Why WebSlides? There are excellent presentation tools out there. WebSlides is about sharing content, essential features, and clean markup. Each parent <section> in the #webslides element is an individual slide.

-

WebSlides help you build a culture of innovation and excellence. When you're really passionate about your job, you can change the world. How to manage a design-driven organization? Leadership through usefulness, openness, empathy, and good taste.

-
-
    -
  • -
    - - - - Call us at 555.345.6789 -
    -
    • -
  • -
    - - - - @username -
    -
    • -
  • -
    - - - - Send us an email -
    -
    • -
-
- -
-
-
-
-
-

- A Phone by Google -

-

Pixel's camera lets you take brilliant photos in low light, bright light or any light.

-
    -
  • - - .text-label: - - Google (2016). -
    • -
  • - - Services: - - Industrial Design. -
    • -
  • - - Website: - - madeby.google.com/phone/ -
    • -
-
- -
-
- Pixel Phone -
-
- -
- -
- -
-
-
-
-
-

Ag

-
- -
-

Maitree in Google Fonts.

-

The quick brown fox jumps over the lazy dog.

-

ABCDEFGHIJKLMNOPQRSTUVWXYZ

-

abcdefghijklmnopqrstuvwxyz

-

1234567890(,.;:?!$&*)

-
- -
- -
- -
-
- -
-
-

WebSlides is incredibly easy and versatile.

-

.text-serif (Maitree)

-
-
-

Each parent <section> in the #webslides element is an individual slide.

-

Clean markup with popular naming conventions. Minimum effort. Just focus on your content.

-
-
- -
-
-
-

What is Stendhal Syndrome?

-

Beauty overdose. .text-pull-right

-

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

-

Psychiatrists have long debated whether it really exists.

-

The syndrome is not only associated with viewing a beautiful place, but also good art.

-

The beauty of Italian art has a concentrated perfection and transcendent sensuality that is incredibly addictive.

-

* * *

-
- -
-
-

One more thing...

-

.text-apple / .bg-apple

-
-
-
- -
- -
-
- -
-

Start in seconds

-

Create your own presentation instantly.
120+ prebuilt slides ready to use.

-

- - - - - Free Download - - - - - - - Pay what you want. - - -

-
- -
- -
-
- - - - - - - - - - - diff --git a/tests/media.html b/tests/media.html deleted file mode 100644 index 151ee93d..00000000 --- a/tests/media.html +++ /dev/null @@ -1,722 +0,0 @@ - - - - - - - - WebSlides Tutorial: Videos, Images, and Maps - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
-
- - - -
- - -
-

WebSlides Tutorial

-

Media

-

* * *

-

- - - - - Free Download - -

-
- -
-
-
-

A quick reference guide for beginners

-

Videos, images, maps, and charts.

- -
- -
-
- -
-

- - - - Insert images wherever you want -

-

15 different positions.

-
- -
-
-
-

15 Different Backgrounds

-
    -
  • .background (fullscreen)
    • -
  • .background-top (cover)
    • -
  • .background-bottom (cover)
    • -
  • .background.light (opacity)
    • -
  • .background.dark (opacity)
    • -
  • .background-center
    • -
  • .background-center-top
    • -
  • .background-center-bottom
    • -
  • .background-left
    • -
  • .background-left-top
    • -
  • .background-left-bottom
    • -
  • .background-right
    • -
  • .background-right-top
    • -
  • .background-right-bottom
    • -
  • .background-anim (animated)
    • -
-
- -
-
-
-

- - - - .background = Fullscreen Backgrounds -

-

How to embed Unsplash photos? →

- 
<section>
-  <span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"></span>
-  <div class="wrap">
-    <h1>Slide</h1>
-  </div>
-</section>
-

- - - - Position .background outside of .wrap container. -

-
- -
-
- -
-
-

.background-(position)

-

.background-right-bottom

-
    -
  • -
    - - - -

    Ultra-Fast WiFi

    - Simple and secure file sharing. -
    -
    • -
  • -
    - - - -

    All day battery life

    - Your battery worries may be over. -
    -
    • -
  • -
    - - - -

    Lifetime Warranty

    - We'll fix it or if we can't, we'll replace it. -
    -
    • -
-
-
- -
-
- - -
-

.background.anim

-
- -
-
- -
-

Opacity

-

[class*="bg-"] > .background.light

- 
<section class="bg-black">
-	<span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
-	<div class="wrap">
-		<h1>Slide</h1>
-	</div>
-</section>
-
-
-
- -
-

Opacity

-

[class*="bg-"] > .background.dark

- 
<section class="bg-black">
-	<span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
-	<div class="wrap">
-		<h1>Slide</h1>
-	</div>
-</section>
-
-
-
-
-

Optional · 500+ icons

-

- - - - - Font Awesome - - as SVG icons -

- 
<svg class="fa-flag">
-	<use xlink:href="#fa-flag"></use>
-</svg>
-

How to change icons?

-
    -
  1. Go to fontastic.me.
    2. -
  2. Create a free account.
    3. -
  3. Select new icons.
    4. -
  4. Publish as SVG sprite.
    5. -
  5. Edit svg-icons.css and svg.icons.js.
    6. -
-
- -
-
-
-

Transparent Logos

-

- Change the color of a .svg/.png image using CSS. Images are property of their respective owners. -

-
- -
- -
-
- -
-
-

An avatar is the graphical representation of the user or the user's alter ego or character. The word avatar originates in Hinduism.

-

Avatar @username, .avatar-56

-
-
-

img[class*="avatar-"] (80, 72, 64, 56, 48, and 40).

-
- -
-
-
-
-
-

Devices

-
    -
  • -
    - - - -

    Ultra-Fast WiFi

    - Simple and secure file sharing. -
    -
    • -
  • -
    - - - -

    All day battery life

    - Your battery worries may be over. -
    -
    • -
  • -
    - - - -

    Lifetime Warranty

    - We'll fix it or if we can't, we'll replace it. -
    -
    • -
-
- -
-
- iPhone -
-
- -
- -
- -
-
-
-
-
- Screenshot -
-
- -
-

Screenshots

-

HTML/CSS Browser.

- 
<figure class="browser">
-  <img alt="Screenshot" src="image.jpg">
-</figure>
-
- -
- -
-
- -
-

- Videos -

-
- -
-
-
-

Background Videos

- 
<video class="background-video" autoplay muted loop poster="image.jpg">
-  <source src="video.mp4" type="video/mp4">
-</video>
-

.background-video

-
- -
-
-
- -
-
-

Audio

-

Overlay: section.bg-red > .background-video.dark or .light

-
- -
-
-
- -
- -
-

Muted

-

Overlay: section.bg-blue > .background-video.dark or .light

-
- -
-
-
-
-

Responsive Videos

-

Just copy and paste the code from YouTube to your slide.

- 
<div class="embed">
- <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
- </iframe>
-</div>
-

.embed (responsive)

-
- -
- -
- -
- -
- -
- -
-
-
- -
- -
- -
- -
-
-
-

Fullscreen YouTube Video

- 
<section class="fullscreen">
-  <div class="embed">
-    <iframe src="https://www.youtube.com/embed/iY05U7GaU5I">
-    </iframe>
-  </div>
-</section>
-
-

.fullscreen > .embed (responsive)

-
- -
-
- -
- -
- -
-
-

- -

-
-

- - YouTube API

-

Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.

- -

You should use a local or a remote server since the YouTube API doesn't seem to work nicely when using the file directly on the browser.

-
- -
-
-
-

- - YouTube API Parameters

-

Syntax: data-autoplay, data-loop, data-no-controls, data-mute.

-
-
-
- 
<div class="embed">
-  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop>
-  </div>
-</div>
-

autoplay + loop

-
- -
- 
<div class="embed">
-  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls>
-  </div>
-</div>
-

autoplay + mute + no controls.

-
- -
- -
- -
-
-
-
-

YouTube API

-

autoplay + loop

- 
<div class="embed">
-  <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop>
-  </div>
-</div>
-
- -
- -
-
-
- -
- -
- -
-
-
-

Let's make some magic with the YouTube API

-

How to make a fullscreen YouTube video? .fullscreen > .embed

-
- 
<section class="fullscreen">
-  <div class="embed">
-    <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls</div>
-  </div>
-</section>
-
-

The video will automatically play when the slide is loaded.

-
- -
-
- -
-
-
- -
-
-
-

Fullscreen YouTube video background

-

Overlaying a transparent background on an embedded Youtube video:

-
- 
<section class="fullscreen bg-black">
-  <div class="embed dark">
-    <div data-youtube data-youtube-id="c9psfOxJysw" data-autoplay data-loop data-mute data-no-controls</div>
-  </div>
-</section>
-
-

.fullscreen[class*="bg-"] > .embed.dark or .light

-
- -
-
- -
-
-
- -
-

Overlay

-

.fullscreen[class*="bg-"] > .embed.dark or .light

-
- -
-
- -
-

- - - - Maps & Charts -

-
- -
-
-
-

Status of Net Neutrality around the world.

-
- -
- -
- -
-
-
- -
- -
-
-
-

Charts

- -
- -
Chart
-
- -
- -
-
-
- - - - - - - - - - - diff --git a/tests/test.css b/tests/test.css deleted file mode 100644 index 814b5a15..00000000 --- a/tests/test.css +++ /dev/null @@ -1,29 +0,0 @@ - -#webslides-zoomed.grid { - background: #ccc; -} - -#webslides-zoomed.grid > .column { - position: relative; -} -#webslides-zoomed.grid > .column > .wrap-zoom { - position: relative; - background: #fff; -} -#webslides-zoomed.grid > .column { - width: 25%; -} -#webslides-zoomed.grid > .column > .wrap-zoom > .slide { - transform: scale(0.25) translate(-150%, -150vh); - display: flex !important; - position: absolute; - top: 0; - left: 0; - clip: rect(0px auto auto 0); -} -#webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer { - position: absolute; - background: transparent; - width: 100%; - height: 100%; -} diff --git a/tests/test.js b/tests/test.js deleted file mode 100644 index 867a1b7e..00000000 --- a/tests/test.js +++ /dev/null @@ -1,36 +0,0 @@ -window.addEventListener("load", () => { - var getValue = ( px ) => { - return new Number( px.replace( /[^\d\.]/g, '' ) ); - }; - - - var wrap = ( query, tag ) => { - // Now webslides is a grid - const ws = document.getElementById('webslides'); - ws.classList.add('grid'); - - document.querySelectorAll( query ).forEach( elem => { - const div = document.createElement( 'div' ); - div.className = 'column'; - elem.parentElement.insertBefore( div, elem ); - const wrap = document.createElement( 'div' ); - wrap.className = 'wrap-zoom'; - div.appendChild( wrap ); - wrap.appendChild( elem ); - - const divCSS = window.getComputedStyle( div ); - const divW = getValue( divCSS.width ); - const marginW = getValue( divCSS.paddingLeft ) + getValue( divCSS.paddingRight ); - const marginH = getValue( divCSS.paddingTop ) + getValue( divCSS.paddingBottom ); - -// div.style.height = divH + 'px'; - elem.style.width = ( window.innerWidth - marginW * 4 ) + 'px'; - elem.style.height = ( window.innerHeight - marginH * 4 ) + 'px'; - - const slideCSS = window.getComputedStyle( elem ); - wrap.style.height = ( getValue( slideCSS.height ) / 4 ) + 'px'; - }); - }; - - //wrap( '.slide', 'div' ); -}); From 34fdc56eacfad449ce1d42df60671a130ff60bb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sun, 9 Apr 2017 19:47:54 +0200 Subject: [PATCH 10/20] index of slides: min 100vh, hover, numbers... --- static/css/base.css | 46 +++++++++++++++++------- static/css/colors.css | 81 +++++++++++++++++++++++++++---------------- 2 files changed, 86 insertions(+), 41 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index d9150175..75ef39c3 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -50,10 +50,9 @@ 15. Longform Elements 16. Safari Bug (flex-wrap) 17. Print - 18. Zoom + 18. Zoom: Index of slides (grid) ----------------------------------------------------------------------------------- */ - /*========================================= 0. CSS Reset & Normalize =========================================== */ @@ -1594,7 +1593,7 @@ padding: 2.4rem; bottom: 0; left: 0; /* hover/visibility */ - z-index: 3; + z-index: 4; } #navigation { -webkit-animation: fadeIn 16s; @@ -3332,23 +3331,34 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap } /*========================================= -18. ZOOM +18. Zoom: Index of slides (grid) =========================================== */ - -#webslides-zoomed.grid { - background: #ccc; -} - -#webslides-zoomed.grid > .column { - position: relative; +#webslides-zoomed.grid{ + -webkit-flex-direction: row; + flex-direction: row; + -webkit-justify-content: flex-start; + justify-content: flex-start; + -webkit-align-content: flex-start; + align-content: flex-start; + -webkit-align-items: flex-start; + align-items: flex-start; + min-height: 100vh; } #webslides-zoomed.grid > .column > .wrap-zoom { position: relative; - background: #fff; + -webkit-transition: .3s; + transition: .3s; } #webslides-zoomed.grid > .column { width: 25%; + -webkit-order: 0; + order: 0; + -webkit-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-align-self: auto; + align-self: auto; } + #webslides-zoomed.grid > .column > .wrap-zoom > .slide { transform: scale(0.25) translate(-150%, -150vh); display: flex !important; @@ -3357,6 +3367,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap left: 0; clip: rect(0px auto auto 0); } + #webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer { position: absolute; background: transparent; @@ -3364,3 +3375,14 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap height: 100%; cursor: pointer; } +#webslides-zoomed.grid > .column > .wrap-zoom:hover { +transform: scale(1.02); +} + +.text-slide-number { + text-align: center; + display: inline-block; + /*border-radius: .3rem; + padding: 0 1.6rem;*/ + margin: .8rem auto; + } \ No newline at end of file diff --git a/static/css/colors.css b/static/css/colors.css index cfa36246..2cc48e52 100644 --- a/static/css/colors.css +++ b/static/css/colors.css @@ -81,27 +81,27 @@ hr:after { color: #333; } -abbr, +bbbr, acronym { border-bottom: 1px dotted #333; } mark, ins { - background-color: rgba(221,238,255, 0.8); - color: inherit; +background-color: rgba(221,238,255, 0.8); +color: inherit; } ::-moz-selection { - background-color: rgba(221,238,255, 0.8); + background-color: rgba(221,238,255, 0.8); } ::-webkit-selection { - background-color: rgba(221,238,255, 0.8); + background-color: rgba(221,238,255, 0.8); } ::selection { - background-color: rgba(221,238,255, 0.8); + background-color: rgba(221,238,255, 0.8); } pre { @@ -119,7 +119,7 @@ code,[class*="bg-"] pre { } .bg-white code{ - background: rgba(0, 20, 80, 0.03); + background: rgba(0, 20, 80, 0.03); } /*================================================ Slides - Backgrounds
@@ -218,7 +218,7 @@ Slides - Backgrounds
/*Covers/Longforms...*/ .bg-trans-gradient{ - background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); +background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); } /*Horizontal Gradient*/ @@ -250,9 +250,9 @@ Slides - Backgrounds
/*Gray Gradient (horizontal)*/ .bg-gradient-gray{ - background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%); - color: #333; - text-shadow: none; +background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%); +color: #333; +text-shadow: none; } /*Border/Frame*/ .frame { @@ -261,7 +261,7 @@ Slides - Backgrounds
/*Layer/Box Shadow*/ .shadow,.pre { - position: relative; +position: relative; } .shadow:before,.shadow:after { box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3); @@ -274,13 +274,16 @@ TYPOGRAPHY /* -- Horizontal separator -- */ .text-separator:before { - background-color: rgba(170, 0, 0, 0.8); + background-color: rgba(170, 0, 0, 0.8); } /* -- Pull Quote (Right/Left) -- */ [class*="text-pull-"] { - border-top: 4px solid rgba(0, 0, 0, 0.5); +border-top: 4px solid rgba(0, 0, 0, 0.5); +} +img[class*="text-pull-"],figure[class*="text-pull-"] { +border-top: none; } /* -- Context -- */ @@ -374,7 +377,7 @@ nav li.email a:hover { } /*========================================= -Features & Clients List +Features & Clients List =========================================== */ .features li,.clients li { @@ -387,7 +390,7 @@ Features & Clients List } .features li:hover,.clients li:hover { - box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08); +box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08); } /*.features li span,.features li svg{color: #44d;}*/ @@ -410,7 +413,7 @@ Features & Clients List } /*=========================================== -flexblock.steps +flexblock.steps ============================================= */ .steps li:nth-child(1) { @@ -519,7 +522,7 @@ Gallery li+.overlay+image box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08); } .gallery li footer { - border-top:1px solid rgba(0,20,80,0.1); +border-top:1px solid rgba(0,20,80,0.1); } .gallery li a { @@ -684,13 +687,13 @@ Cards /*== Figure Background === */ [class*="card-"][class*="bg-"] figure { - background-color: rgba(0, 20, 80, 0.06); +background-color: rgba(0, 20, 80, 0.06); } /*== Ficaption Cards === */ -[class*="card-"] figcaption, -[class*="card-"] figcaption a { +[class*="card"] figcaption, +[class*="card"] figcaption a { color: #fff; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%); } @@ -703,7 +706,7 @@ Cards border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; -webkit-border-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; -moz-border-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; - + } } @@ -737,7 +740,7 @@ tr:nth-child(even)>td:hover { /*============================ -Browser (Screenshots) +Browser (Screenshots) ============================== */ .browser { @@ -783,10 +786,10 @@ input:focus::-moz-placeholder { input:focus::-webkit-input-placeholder { color: #ddd; } -a.button,[class*="badge-"], +a.button,[class*="badge-"] button[type="submit"], input { - box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3); + box-shadow: 0px 10px 16px -8px rgba(0, 20, 80, 0.3); } button, @@ -797,7 +800,7 @@ button[type="submit"], input[type="submit"], .button,.button:hover, button[type="submit"]:hover, -input[type="submit"]:hover +input[type="submit"]:hover { border: 1px solid #44d; } @@ -810,7 +813,7 @@ input[type="submit"], text-shadow: 0 1px 0 #123; } .button:active,button[type="submit"]:active,input[type="submit"]:active { - background-color: #17d; +background-color: #17d; } .ghost,.ghost:hover {background: none;color: inherit;text-shadow: none;} .bg-primary select, @@ -818,7 +821,7 @@ input[type="submit"], .bg-primary .button, .bg-primary button,.bg-primary button:hover, .bg-primary input, -[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost +[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost { border-color: #fff; } @@ -902,7 +905,6 @@ Slides (Counter/Arrows) background-color: rgba(0, 0, 0, 0.9); } - /*============================ Footer ============================== */ @@ -915,3 +917,24 @@ footer[role=contentinfo] { background-color:rgba(255,255,255 , 0.3); } */ + +/*============================ +Zoom: Index of slides +============================== */ + +#webslides-zoomed.grid { + background: #e3e5e9; +} + +#webslides-zoomed.grid > .column > .wrap-zoom { + background: #fff; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04); +} +#webslides-zoomed.grid > .column > .wrap-zoom:hover { + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08); +} +.text-slide-number { + /*background-color: rgba(255, 255, 255, 0.1);*/ + color: #456; + text-shadow: 0 1px 0 #fafafa; + } \ No newline at end of file From 052772be98bf725c407e25bdb2496665cfe79b2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Ant=C3=BAnez?= Date: Sun, 9 Apr 2017 20:19:48 +0200 Subject: [PATCH 11/20] index of slides: mini-slides same bg color as body --- static/css/colors.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/static/css/colors.css b/static/css/colors.css index 2cc48e52..7a47a2af 100644 --- a/static/css/colors.css +++ b/static/css/colors.css @@ -39,7 +39,9 @@ WebSlides - Colors Base =========================================== */ -body { +body, +/*index of slides: mini-slides same bg color as body */ +#webslides-zoomed.grid > .column > .wrap-zoom { color: #333; background-color: #f7f9fb; } @@ -927,7 +929,6 @@ Zoom: Index of slides } #webslides-zoomed.grid > .column > .wrap-zoom { - background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04); } #webslides-zoomed.grid > .column > .wrap-zoom:hover { @@ -937,4 +938,4 @@ Zoom: Index of slides /*background-color: rgba(255, 255, 255, 0.1);*/ color: #456; text-shadow: 0 1px 0 #fafafa; - } \ No newline at end of file + } From b41cf41ac909ffad72aea8b828a801b07831df50 Mon Sep 17 00:00:00 2001 From: Luis Date: Wed, 12 Apr 2017 21:25:20 +0200 Subject: [PATCH 12/20] Zoom responsive --- .eslintrc | 2 +- src/js/plugins/zoom.js | 27 ++++++++++-------- static/css/base.css | 58 +++++++++++++++++++++++++------------- static/js/webslides.js | 29 +++++++++++-------- static/js/webslides.min.js | 4 +-- 5 files changed, 74 insertions(+), 46 deletions(-) diff --git a/.eslintrc b/.eslintrc index f9df3432..39c58f07 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,7 +8,7 @@ }, "rules": { "no-cond-assign": 0, - "no-console": 0, + "no-console": 2, "no-constant-condition": 2, "no-control-regex": 2, "no-debugger": 2, diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index f7c0cbce..4b245ed6 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -95,19 +95,15 @@ export default class Zoom { divLayer.addEventListener('click', e => { this.zoomOut(); this.ws_.goToSlide(elem.i); - e.stopPropagation(); }); wrap.appendChild(divLayer); // Slide number const slideNumber = document.createElement('span'); slideNumber.className = 'slide-number'; - slideNumber.textContent = `${elem.i+1} / ${this.zws_.slides.length}`; + slideNumber.textContent = `${elem.i+1}`; div.appendChild(slideNumber); // Zoom out when click in slide "border" - div.addEventListener('click', e => { - this.ws_.toggleZoom(); - e.stopPropagation(); - }); + div.addEventListener('click', this.ws_.toggleZoom); this.setSizes_(div, wrap, elem); } @@ -130,11 +126,20 @@ export default class Zoom { const scale = divCSS.width.includes('%') ? 100 / DOM.parseSize(divCSS.width) : window.innerWidth / DOM.parseSize(divCSS.width); - elem.el.style.width = `${window.innerWidth - marginW * scale}px`; - elem.el.style.height = `${window.innerHeight - marginH * scale}px`; - - // Because of flexbox, wrap height is required - wrap.style.height = `${window.innerHeight / scale}px`; + if (scale == 1) { + // If the scale is 100% means it is mobile + const wsW = this.ws_.el.clientWidth; + elem.el.style.width = `${(wsW - marginW) * 2}px`; + elem.el.style.height = `${(wsW - marginH) * 1.5}px`; + elem.el.style.minHeight = scale == 1? 'auto' : ''; + // Because of flexbox, wrap height is required + wrap.style.height = `${window.innerWidth / 1.5}px`; + } else { + elem.el.style.width = `${window.innerWidth - marginW * scale}px`; + elem.el.style.height = `${window.innerHeight - marginH * scale}px`; + // Because of flexbox, wrap height is required + wrap.style.height = `${window.innerHeight / scale}px`; + } } /** diff --git a/static/css/base.css b/static/css/base.css index 75ef39c3..e88b6914 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -705,7 +705,7 @@ footer, height: 100%; margin: 0; } -/* -- Responsive background video +/* -- Responsive background video https://fvsch.com/code/video-background/ -- */ .fullscreen > .embed { @@ -723,18 +723,18 @@ https://fvsch.com/code/video-background/ -- */ .fullscreen > .embed > iframe, .fullscreen > .embed > object, .fullscreen > .embed > embed, - .fullscreen > .embed > video { - height: 300%; - top: -100%; + .fullscreen > .embed > video { + height: 300%; + top: -100%; } } @media (max-aspect-ratio: 16/9) { .fullscreen > .embed > iframe, .fullscreen > .embed > object, .fullscreen > .embed > embed, - .fullscreen > .embed > video { - width: 300%; - left: -100%; + .fullscreen > .embed > video { + width: 300%; + left: -100%; } } /* 2. If supporting object-fit, overriding (1): */ @@ -743,9 +743,9 @@ https://fvsch.com/code/video-background/ -- */ .fullscreen > .embed > object, .fullscreen > .embed > embed, .fullscreen > .embed > video { - top: 0; + top: 0; left: 0; - width: 100%; + width: 100%; height: 100%; object-fit: cover; } @@ -3227,14 +3227,14 @@ button:disabled:hover { } /*========================================= -15. Longform +15. Longform =========================================== */ /* -- Posts = .wrap.longform -- */ .longform { -width: 72rem; -/* Why 72rem=720px? +width: 72rem; +/* Why 72rem=720px? 90-95 characters per line = better reading speed */ } .longform .alignleft, .longform .alignright { @@ -3351,12 +3351,12 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap } #webslides-zoomed.grid > .column { width: 25%; - -webkit-order: 0; - order: 0; - -webkit-flex: 0 1 auto; - flex: 0 1 auto; - -webkit-align-self: auto; - align-self: auto; + -webkit-order: 0; + order: 0; + -webkit-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-align-self: auto; + align-self: auto; } #webslides-zoomed.grid > .column > .wrap-zoom > .slide { @@ -3376,7 +3376,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap cursor: pointer; } #webslides-zoomed.grid > .column > .wrap-zoom:hover { -transform: scale(1.02); + transform: scale(1.02); } .text-slide-number { @@ -3385,4 +3385,22 @@ transform: scale(1.02); /*border-radius: .3rem; padding: 0 1.6rem;*/ margin: .8rem auto; - } \ No newline at end of file + } + +@media all and (orientation: portrait) { + #webslides-zoomed.grid > .column { + width: 50%; + } + #webslides-zoomed.grid > .column > .wrap-zoom > .slide { + transform: scale(0.5) translate(-50%, -50vh); + } +} + +@media (max-aspect-ratio: 2/3) { + #webslides-zoomed.grid > .column { + width: 100%; + } + #webslides-zoomed.grid > .column > .wrap-zoom > .slide { + transform: scale(0.5) translate(-50%, -30vh); + } +} diff --git a/static/js/webslides.js b/static/js/webslides.js index bc5fbf7b..7d8d3559 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-09 + * Date: 2017-04-12 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -2571,19 +2571,15 @@ var Zoom = function () { divLayer.addEventListener('click', function (e) { _this2.zoomOut(); _this2.ws_.goToSlide(elem.i); - e.stopPropagation(); }); wrap.appendChild(divLayer); // Slide number var slideNumber = document.createElement('span'); slideNumber.className = 'slide-number'; - slideNumber.textContent = elem.i + 1 + ' / ' + this.zws_.slides.length; + slideNumber.textContent = '' + (elem.i + 1); div.appendChild(slideNumber); // Zoom out when click in slide "border" - div.addEventListener('click', function (e) { - _this2.ws_.toggleZoom(); - e.stopPropagation(); - }); + div.addEventListener('click', this.ws_.toggleZoom); this.setSizes_(div, wrap, elem); } @@ -2605,11 +2601,20 @@ var Zoom = function () { // Sets element size: window size - relative margins var scale = divCSS.width.includes('%') ? 100 / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width) : window.innerWidth / __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.width); - elem.el.style.width = window.innerWidth - marginW * scale + 'px'; - elem.el.style.height = window.innerHeight - marginH * scale + 'px'; - - // Because of flexbox, wrap height is required - wrap.style.height = window.innerHeight / scale + 'px'; + if (scale == 1) { + // If the scale is 100% means it is mobile + var wsW = this.ws_.el.clientWidth; + elem.el.style.width = (wsW - marginW) * 2 + 'px'; + elem.el.style.height = (wsW - marginH) * 1.5 + 'px'; + elem.el.style.minHeight = scale == 1 ? 'auto' : ''; + // Because of flexbox, wrap height is required + wrap.style.height = window.innerWidth / 1.5 + 'px'; + } else { + elem.el.style.width = window.innerWidth - marginW * scale + 'px'; + elem.el.style.height = window.innerHeight - marginH * scale + 'px'; + // Because of flexbox, wrap height is required + wrap.style.height = window.innerHeight / scale + 'px'; + } } /** diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index b53b12e6..b9b6a51a 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,9 +1,9 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-09 + * Date: 2017-04-12 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};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=5)}([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 o=n(18),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:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*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:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*i),l Date: Thu, 13 Apr 2017 16:17:43 +0200 Subject: [PATCH 13/20] Fix responsive zoom for some resolutions --- src/js/plugins/zoom.js | 4 +++- static/css/base.css | 4 ++-- static/js/webslides.js | 6 ++++-- static/js/webslides.min.js | 4 ++-- 4 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index 4b245ed6..fbd1b3c7 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -133,7 +133,7 @@ export default class Zoom { elem.el.style.height = `${(wsW - marginH) * 1.5}px`; elem.el.style.minHeight = scale == 1? 'auto' : ''; // Because of flexbox, wrap height is required - wrap.style.height = `${window.innerWidth / 1.5}px`; + wrap.style.height = `${(wsW - marginH) * 1.5 / 2}px`; } else { elem.el.style.width = `${window.innerWidth - marginW * scale}px`; elem.el.style.height = `${window.innerHeight - marginH * scale}px`; @@ -178,6 +178,8 @@ export default class Zoom { * @param {Event} ev */ onWindowResize(ev) { + if (this.isZoomed_) this.zoomOut(); + this.zws_.slides.forEach( elem => { const wrap = elem.el.parentElement; const div = wrap.parentElement; diff --git a/static/css/base.css b/static/css/base.css index e88b6914..dd563750 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -3385,7 +3385,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap /*border-radius: .3rem; padding: 0 1.6rem;*/ margin: .8rem auto; - } +} @media all and (orientation: portrait) { #webslides-zoomed.grid > .column { @@ -3401,6 +3401,6 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap width: 100%; } #webslides-zoomed.grid > .column > .wrap-zoom > .slide { - transform: scale(0.5) translate(-50%, -30vh); + transform: scale(0.5) translate(-50%, -50%); } } diff --git a/static/js/webslides.js b/static/js/webslides.js index 7d8d3559..5a0c455b 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-12 + * Date: 2017-04-13 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -2608,7 +2608,7 @@ var Zoom = function () { elem.el.style.height = (wsW - marginH) * 1.5 + 'px'; elem.el.style.minHeight = scale == 1 ? 'auto' : ''; // Because of flexbox, wrap height is required - wrap.style.height = window.innerWidth / 1.5 + 'px'; + wrap.style.height = (wsW - marginH) * 1.5 / 2 + 'px'; } else { elem.el.style.width = window.innerWidth - marginW * scale + 'px'; elem.el.style.height = window.innerHeight - marginH * scale + 'px'; @@ -2667,6 +2667,8 @@ var Zoom = function () { value: function onWindowResize(ev) { var _this3 = this; + if (this.isZoomed_) this.zoomOut(); + this.zws_.slides.forEach(function (elem) { var wrap = elem.el.parentElement; var div = wrap.parentElement; diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index b9b6a51a..fff781fd 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,9 +1,9 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-12 + * Date: 2017-04-13 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};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=5)}([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 o=n(18),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:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*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:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*i),l Date: Thu, 13 Apr 2017 18:47:01 +0200 Subject: [PATCH 14/20] Zoom - pinch gesture --- npm-debug.log.3319379681 | 0 src/js/plugins/touch.js | 88 +++++++++++++++++++++++++++++++------- static/js/webslides.js | 84 +++++++++++++++++++++++++++++------- static/js/webslides.min.js | 2 +- 4 files changed, 141 insertions(+), 33 deletions(-) create mode 100644 npm-debug.log.3319379681 diff --git a/npm-debug.log.3319379681 b/npm-debug.log.3319379681 new file mode 100644 index 00000000..e69de29b diff --git a/src/js/plugins/touch.js b/src/js/plugins/touch.js index d3ce5322..68bc3736 100644 --- a/src/js/plugins/touch.js +++ b/src/js/plugins/touch.js @@ -64,6 +64,27 @@ export default class Touch { */ this.isEnabled = false; + /** + * Whether is a gesture or not. + * @type {boolean} + * @private + */ + this.isGesture = false; + + /** + * Stores start touch event (x, y). + * @type {array} + * @private + */ + this.startTouches = []; + + /** + * Stores end touch event (x, y). + * @type {array} + * @private + */ + this.endTouches = []; + let events; if (MobileDetector.isAny()) { @@ -78,7 +99,6 @@ export default class Touch { this.isEnabled = true; document.addEventListener(events.START, this.onStart_.bind(this), false); document.addEventListener(events.MOVE, this.onMove_.bind(this), false); - document.addEventListener(events.MOVE, this.onMove_.bind(this), false); document.addEventListener(events.END, this.onStop_.bind(this), false); } } @@ -95,10 +115,16 @@ export default class Touch { const info = Touch.normalizeEventInfo(event); - this.startX_ = info.x; - this.startY_ = info.y; - this.endX_ = info.x; - this.endY_ = info.y; + if (event.touches.length == 1) { + this.startX_ = info.x; + this.startY_ = info.y; + this.endX_ = info.x; + this.endY_ = info.y; + } else if (event.touches.length > 1) { + this.startTouches = this.getTouchCoorinates(event); + this.endTouches = this.startTouches; + this.isGesture = true; + } } /** @@ -113,8 +139,12 @@ export default class Touch { const info = Touch.normalizeEventInfo(event); - this.endX_ = info.x; - this.endY_ = info.y; + if (this.isGesture) { + this.endTouches = this.getTouchCoorinates(event); + } else { + this.endX_ = info.x; + this.endY_ = info.y; + } } /** @@ -126,19 +156,45 @@ export default class Touch { return; } - const diffX = this.startX_ - this.endX_; - const diffY = this.startY_ - this.endY_; - - // It's an horizontal drag - if (Math.abs(diffX) > Math.abs(diffY)) { - if (diffX < -this.ws_.options.slideOffset) { - this.ws_.goPrev(); - } else if(diffX > this.ws_.options.slideOffset) { - this.ws_.goNext(); + if (this.isGesture) { + const startDistance = Math.sqrt( + Math.pow(this.startTouches[0].x - this.startTouches[1].x, 2) + + Math.pow(this.startTouches[0].y - this.startTouches[1].y, 2) + ); + const endDistance = Math.sqrt( + Math.pow(this.endTouches[0].x - this.endTouches[1].x, 2) + + Math.pow(this.endTouches[0].y - this.endTouches[1].y, 2) + ); + if (startDistance > endDistance) { + // Pinch gesture + this.ws_.toggleZoom(); + } + this.isGesture = false; + } else { + const diffX = this.startX_ - this.endX_; + const diffY = this.startY_ - this.endY_; + + // It's an horizontal drag + if (Math.abs(diffX) > Math.abs(diffY)) { + if (diffX < -this.ws_.options.slideOffset) { + this.ws_.goPrev(); + } else if(diffX > this.ws_.options.slideOffset) { + this.ws_.goNext(); + } } } } + /** + * Get X,Y coordinates from touchs pointers + * @param {Event} event + * @return {array} + */ + getTouchCoorinates(event) { + return [{x: event.touches[0].clientX, y: event.touches[0].clientY}, + {x: event.touches[1].clientX, y: event.touches[1].clientY}]; + } + /** * Normalizes an event to deal with differences between PointerEvent and * TouchEvent. diff --git a/static/js/webslides.js b/static/js/webslides.js index 5a0c455b..2762f794 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -2034,6 +2034,27 @@ var Touch = function () { */ this.isEnabled = false; + /** + * Whether is a gesture or not. + * @type {boolean} + * @private + */ + this.isGesture = false; + + /** + * Stores start touch event (x, y). + * @type {array} + * @private + */ + this.startTouches = []; + + /** + * Stores end touch event (x, y). + * @type {array} + * @private + */ + this.endTouches = []; + var events = void 0; if (__WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isAny()) { @@ -2047,7 +2068,6 @@ var Touch = function () { this.isEnabled = true; document.addEventListener(events.START, this.onStart_.bind(this), false); document.addEventListener(events.MOVE, this.onMove_.bind(this), false); - document.addEventListener(events.MOVE, this.onMove_.bind(this), false); document.addEventListener(events.END, this.onStop_.bind(this), false); } } @@ -2068,10 +2088,16 @@ var Touch = function () { var info = Touch.normalizeEventInfo(event); - this.startX_ = info.x; - this.startY_ = info.y; - this.endX_ = info.x; - this.endY_ = info.y; + if (event.touches.length == 1) { + this.startX_ = info.x; + this.startY_ = info.y; + this.endX_ = info.x; + this.endY_ = info.y; + } else if (event.touches.length > 1) { + this.startTouches = this.getTouchCoorinates(event); + this.endTouches = this.startTouches; + this.isGesture = true; + } } /** @@ -2089,8 +2115,12 @@ var Touch = function () { var info = Touch.normalizeEventInfo(event); - this.endX_ = info.x; - this.endY_ = info.y; + if (this.isGesture) { + this.endTouches = this.getTouchCoorinates(event); + } else { + this.endX_ = info.x; + this.endY_ = info.y; + } } /** @@ -2105,19 +2135,41 @@ var Touch = function () { return; } - var diffX = this.startX_ - this.endX_; - var diffY = this.startY_ - this.endY_; - - // It's an horizontal drag - if (Math.abs(diffX) > Math.abs(diffY)) { - if (diffX < -this.ws_.options.slideOffset) { - this.ws_.goPrev(); - } else if (diffX > this.ws_.options.slideOffset) { - this.ws_.goNext(); + if (this.isGesture) { + var startDistance = Math.sqrt(Math.pow(this.startTouches[0].x - this.startTouches[1].x, 2) + Math.pow(this.startTouches[0].y - this.startTouches[1].y, 2)); + var endDistance = Math.sqrt(Math.pow(this.endTouches[0].x - this.endTouches[1].x, 2) + Math.pow(this.endTouches[0].y - this.endTouches[1].y, 2)); + if (startDistance > endDistance) { + // Pinch gesture + this.ws_.toggleZoom(); + } + this.isGesture = false; + } else { + var diffX = this.startX_ - this.endX_; + var diffY = this.startY_ - this.endY_; + + // It's an horizontal drag + if (Math.abs(diffX) > Math.abs(diffY)) { + if (diffX < -this.ws_.options.slideOffset) { + this.ws_.goPrev(); + } else if (diffX > this.ws_.options.slideOffset) { + this.ws_.goNext(); + } } } } + /** + * Get X,Y coordinates from touchs pointers + * @param {Event} event + * @return {array} + */ + + }, { + key: 'getTouchCoorinates', + value: function getTouchCoorinates(event) { + return [{ x: event.touches[0].clientX, y: event.touches[0].clientY }, { x: event.touches[1].clientX, y: event.touches[1].clientY }]; + } + /** * Normalizes an event to deal with differences between PointerEvent and * TouchEvent. diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index fff781fd..35138568 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -6,4 +6,4 @@ * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};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=5)}([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 o=n(18),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:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},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 o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(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(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.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.currentSlideI_!==e){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 o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),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 o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=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 o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},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 o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*i),l1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return n.id=t,i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(){if(a)return a;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},i=Object.keys(t),n=0,s=i.length;n2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,i){var e=document.createElement(i);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild==t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=function(){function e(e,t){for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(n(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:s,changeOnClick:a,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{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.currentSlideI_!==e){this.isMoving=!0;var i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;iMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,o){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(o&&this.isGoingLeft_||!o&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(3),a=function(){function e(e,t){for(var i=0;i1&&(this.startTouches=this.getTouchCoorinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(s.a.isVisible(this.ws_.el)){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=this.getTouchCoorinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(s.a.isVisible(this.ws_.el))if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}},{key:"getTouchCoorinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l Date: Fri, 14 Apr 2017 18:28:27 +0200 Subject: [PATCH 15/20] Fix some resolutions height --- static/css/base.css | 5 +++-- static/js/webslides.js | 2 +- static/js/webslides.min.js | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/static/css/base.css b/static/css/base.css index dd563750..e5617cf0 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -3348,6 +3348,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap position: relative; -webkit-transition: .3s; transition: .3s; + overflow: hidden; } #webslides-zoomed.grid > .column { width: 25%; @@ -3387,12 +3388,12 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap margin: .8rem auto; } -@media all and (orientation: portrait) { +@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation:landscape) { #webslides-zoomed.grid > .column { width: 50%; } #webslides-zoomed.grid > .column > .wrap-zoom > .slide { - transform: scale(0.5) translate(-50%, -50vh); + transform: scale(0.5) translate(-50%, -50%); } } diff --git a/static/js/webslides.js b/static/js/webslides.js index 2762f794..ab2479cc 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-13 + * Date: 2017-04-14 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 35138568..3bdfb39b 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-13 + * Date: 2017-04-14 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros From 4dde8fe8fb5b8e72602e10aa7828613b403f16a2 Mon Sep 17 00:00:00 2001 From: Luis Date: Tue, 18 Apr 2017 20:29:09 +0200 Subject: [PATCH 16/20] Fix zoom out when click outside index slides --- npm-debug.log.3319379681 | 0 src/js/plugins/zoom.js | 3 ++- static/js/webslides.js | 11 +++++++---- static/js/webslides.min.js | 4 ++-- 4 files changed, 11 insertions(+), 7 deletions(-) delete mode 100644 npm-debug.log.3319379681 diff --git a/npm-debug.log.3319379681 b/npm-debug.log.3319379681 deleted file mode 100644 index e69de29b..00000000 diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index fbd1b3c7..daec0c89 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -103,7 +103,8 @@ export default class Zoom { slideNumber.textContent = `${elem.i+1}`; div.appendChild(slideNumber); // Zoom out when click in slide "border" - div.addEventListener('click', this.ws_.toggleZoom); + const obj = this; + div.addEventListener('click', () => obj.toggleZoom()); this.setSizes_(div, wrap, elem); } diff --git a/static/js/webslides.js b/static/js/webslides.js index ab2479cc..e2eed920 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-14 + * Date: 2017-04-18 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -14,9 +14,9 @@ /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) +/******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; -/******/ +/******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, @@ -2631,7 +2631,10 @@ var Zoom = function () { slideNumber.textContent = '' + (elem.i + 1); div.appendChild(slideNumber); // Zoom out when click in slide "border" - div.addEventListener('click', this.ws_.toggleZoom); + var obj = this; + div.addEventListener('click', function () { + return obj.toggleZoom(); + }); this.setSizes_(div, wrap, elem); } diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 3bdfb39b..d8987797 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,9 +1,9 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-14 + * Date: 2017-04-18 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return e[n].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var i={};t.m=e,t.c=i,t.i=function(e){return e},t.d=function(e,i,n){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/static/js/",t(t.s=5)}([function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(18),o=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return n.id=t,i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(){if(a)return a;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},i=Object.keys(t),n=0,s=i.length;n2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,i){var e=document.createElement(i);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild==t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=function(){function e(e,t){for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(n(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:s,changeOnClick:a,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{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.currentSlideI_!==e){this.isMoving=!0;var i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;iMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,o){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(o&&this.isGoingLeft_||!o&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(3),a=function(){function e(e,t){for(var i=0;i1&&(this.startTouches=this.getTouchCoorinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(s.a.isVisible(this.ws_.el)){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=this.getTouchCoorinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(s.a.isVisible(this.ws_.el))if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}},{key:"getTouchCoorinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return n.id=t,i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(){if(a)return a;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},i=Object.keys(t),n=0,s=i.length;n2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function(e,t){var i=document.createElement(t);return e.parentElement.insertBefore(i,e),i.appendChild(e),i}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild==t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=function(){function e(e,t){for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(n(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:s,changeOnClick:a,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{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.currentSlideI_!==e){this.isMoving=!0;var i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;iMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,o){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(o&&this.isGoingLeft_||!o&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(3),a=function(){function e(e,t){for(var i=0;i1&&(this.startTouches=this.getTouchCoorinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(s.a.isVisible(this.ws_.el)){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=this.getTouchCoorinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(s.a.isVisible(this.ws_.el))if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}},{key:"getTouchCoorinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l Date: Tue, 18 Apr 2017 20:34:45 +0200 Subject: [PATCH 17/20] ESC key for zoom out --- src/js/plugins/zoom.js | 3 ++- src/js/utils/keys.js | 3 ++- static/js/webslides.js | 5 +++-- static/js/webslides.min.js | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index daec0c89..4fa9ecb6 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -50,7 +50,8 @@ export default class Zoom { onKeyDown(event) { if ( !this.isZoomed_ && Keys.MINUS.includes( event.which ) ) { this.zoomIn(); - } else if ( this.isZoomed_ && Keys.PLUS.includes( event.which ) ) { + } else if ( this.isZoomed_ && + (Keys.PLUS.includes( event.which ) || event.which == Keys.ESCAPE ) ) { this.zoomOut(); } } diff --git a/src/js/utils/keys.js b/src/js/utils/keys.js index b0de0237..5a27e76b 100644 --- a/src/js/utils/keys.js +++ b/src/js/utils/keys.js @@ -10,7 +10,8 @@ const Keys = { RIGHT: 39, DOWN: 40, PLUS: [107, 171], - MINUS: [109, 173] + MINUS: [109, 173], + ESCAPE: 27 }; export default Keys; diff --git a/static/js/webslides.js b/static/js/webslides.js index e2eed920..1efc1bd4 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -573,7 +573,8 @@ var Keys = { RIGHT: 39, DOWN: 40, PLUS: [107, 171], - MINUS: [109, 173] + MINUS: [109, 173], + ESCAPE: 27 }; /* harmony default export */ __webpack_exports__["a"] = (Keys); @@ -2567,7 +2568,7 @@ var Zoom = function () { value: function onKeyDown(event) { if (!this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].MINUS.includes(event.which)) { this.zoomIn(); - } else if (this.isZoomed_ && __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.includes(event.which)) { + } else if (this.isZoomed_ && (__WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].PLUS.includes(event.which) || event.which == __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].ESCAPE)) { this.zoomOut(); } } diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index d8987797..f94bfb17 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -6,4 +6,4 @@ * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return e[n].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var i={};t.m=e,t.c=i,t.i=function(e){return e},t.d=function(e,i,n){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/static/js/",t(t.s=5)}([function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(18),o=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return n.id=t,i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(){if(a)return a;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},i=Object.keys(t),n=0,s=i.length;n2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function(e,t){var i=document.createElement(t);return e.parentElement.insertBefore(i,e),i.appendChild(e),i}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild==t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=function(){function e(e,t){for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(n(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:s,changeOnClick:a,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{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.currentSlideI_!==e){this.isMoving=!0;var i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;iMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,o){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(o&&this.isGoingLeft_||!o&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(3),a=function(){function e(e,t){for(var i=0;i1&&(this.startTouches=this.getTouchCoorinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(s.a.isVisible(this.ws_.el)){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=this.getTouchCoorinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(s.a.isVisible(this.ws_.el))if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}},{key:"getTouchCoorinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return n.id=t,i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(){if(a)return a;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},i=Object.keys(t),n=0,s=i.length;n2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function(e,t){var i=document.createElement(t);return e.parentElement.insertBefore(i,e),i.appendChild(e),i}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild==t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=function(){function e(e,t){for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(n(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:s,changeOnClick:a,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{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.currentSlideI_!==e){this.isMoving=!0;var i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;iMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,o){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(o&&this.isGoingLeft_||!o&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(3),a=function(){function e(e,t){for(var i=0;i1&&(this.startTouches=this.getTouchCoorinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(s.a.isVisible(this.ws_.el)){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=this.getTouchCoorinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(s.a.isVisible(this.ws_.el))if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}},{key:"getTouchCoorinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l Date: Wed, 26 Apr 2017 20:09:57 +0200 Subject: [PATCH 18/20] Blur efect when zooming --- src/js/modules/webslides.js | 24 +++++++++++- src/js/plugins/keyboard.js | 2 +- src/js/plugins/scroll.js | 3 +- src/js/plugins/touch.js | 7 ++-- src/js/plugins/zoom.js | 11 +++--- static/css/base.css | 6 +++ static/js/webslides.js | 74 +++++++++++++++++++++++++------------ static/js/webslides.min.js | 4 +- 8 files changed, 93 insertions(+), 38 deletions(-) diff --git a/src/js/modules/webslides.js b/src/js/modules/webslides.js index eccb8de6..f35c71f9 100644 --- a/src/js/modules/webslides.js +++ b/src/js/modules/webslides.js @@ -5,7 +5,8 @@ import scrollTo from '../utils/scroll-to'; const CLASSES = { VERTICAL: 'vertical', - READY: 'ws-ready' + READY: 'ws-ready', + DISABLED: 'disabled' }; // Default plugins @@ -390,6 +391,27 @@ export default class WebSlides { this.plugins.zoom.toggleZoom(); } + /** + * Disables the webslides element adding a class "disabled" + */ + disable() { + this.el.classList.add(CLASSES.DISABLED); + } + + /** + * Enables the webslides element removing a class "disabled" + */ + enable() { + this.el.classList.remove(CLASSES.DISABLED); + } + + /** + * Checks if it is disabled + */ + isDisabled() { + this.el.classList.contains(CLASSES.DISABLED); + } + /** * Registers a plugin to be loaded when the instance is created. It allows * (on purpose) to replace default plugins. diff --git a/src/js/plugins/keyboard.js b/src/js/plugins/keyboard.js index 2527be6e..209ce522 100644 --- a/src/js/plugins/keyboard.js +++ b/src/js/plugins/keyboard.js @@ -29,7 +29,7 @@ export default class Keyboard { let method; let argument; - if (DOM.isFocusableElement() || !DOM.isVisible(this.ws_.el)) { + if (DOM.isFocusableElement() || !this.ws_.isDisabled()) { return; } diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js index e5e27fec..1a3b4ed0 100644 --- a/src/js/plugins/scroll.js +++ b/src/js/plugins/scroll.js @@ -1,4 +1,3 @@ -import DOM from '../utils/dom'; import MobileDetector from '../utils/mobile-detector'; @@ -72,7 +71,7 @@ export default class Scroll { * @private */ onMouseWheel_(event) { - if (!DOM.isVisible(this.ws_.el)) { + if (!this.ws_.isDisabled()) { return; } diff --git a/src/js/plugins/touch.js b/src/js/plugins/touch.js index 68bc3736..e2895aa6 100644 --- a/src/js/plugins/touch.js +++ b/src/js/plugins/touch.js @@ -1,4 +1,3 @@ -import DOM from '../utils/dom'; import MobileDetector from '../utils/mobile-detector'; const EVENTS = { @@ -109,7 +108,7 @@ export default class Touch { * @private */ onStart_(event) { - if (!DOM.isVisible(this.ws_.el)) { + if (!this.ws_.isDisabled()) { return; } @@ -133,7 +132,7 @@ export default class Touch { * @private */ onMove_(event) { - if (!DOM.isVisible(this.ws_.el)) { + if (!this.ws_.isDisabled()) { return; } @@ -152,7 +151,7 @@ export default class Touch { * @private */ onStop_() { - if (!DOM.isVisible(this.ws_.el)) { + if (!this.ws_.isDisabled()) { return; } diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index 4fa9ecb6..6f47747c 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -65,6 +65,9 @@ export default class Zoom { this.zws_.el = this.ws_.el.cloneNode(); this.zws_.el.id = ID; this.zws_.el.className = CLASSES.ZOOM; + + this.zws_.el.addEventListener('click', () => this.toggleZoom()); + // Clone the slides this.zws_.slides = [].map.call(this.ws_.slides, (slide, i) => { @@ -94,6 +97,7 @@ export default class Zoom { const divLayer = document.createElement('div'); divLayer.className = 'zoom-layer'; divLayer.addEventListener('click', e => { + e.stopPropagation(); this.zoomOut(); this.ws_.goToSlide(elem.i); }); @@ -103,9 +107,6 @@ export default class Zoom { slideNumber.className = 'slide-number'; slideNumber.textContent = `${elem.i+1}`; div.appendChild(slideNumber); - // Zoom out when click in slide "border" - const obj = this; - div.addEventListener('click', () => obj.toggleZoom()); this.setSizes_(div, wrap, elem); } @@ -159,7 +160,7 @@ export default class Zoom { * Zoom In the slider, scales the slides and uses a grid layout to show them */ zoomIn() { - DOM.hide(this.ws_.el); + this.ws_.disable(); DOM.show(this.zws_.el); this.isZoomed_ = true; document.body.style.overflow = 'auto'; @@ -170,7 +171,7 @@ export default class Zoom { */ zoomOut() { DOM.hide(this.zws_.el); - DOM.show(this.ws_.el); + this.ws_.enable(); this.isZoomed_ = false; document.body.style.overflow = ''; } diff --git a/static/css/base.css b/static/css/base.css index e5617cf0..ef37d4e6 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -3333,6 +3333,12 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap /*========================================= 18. Zoom: Index of slides (grid) =========================================== */ +#webslides.disabled { + position: absolute; + width: 100%; + z-index: 0; + filter: blur(10px); +} #webslides-zoomed.grid{ -webkit-flex-direction: row; flex-direction: row; diff --git a/static/js/webslides.js b/static/js/webslides.js index 1efc1bd4..b8e1c0f4 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-18 + * Date: 2017-04-26 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -703,7 +703,8 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons var CLASSES = { VERTICAL: 'vertical', - READY: 'ws-ready' + READY: 'ws-ready', + DISABLED: 'disabled' }; // Default plugins @@ -1138,6 +1139,36 @@ var WebSlides = function () { this.plugins.zoom.toggleZoom(); } + /** + * Disables the webslides element adding a class "disabled" + */ + + }, { + key: 'disable', + value: function disable() { + this.el.classList.add(CLASSES.DISABLED); + } + + /** + * Enables the webslides element removing a class "disabled" + */ + + }, { + key: 'enable', + value: function enable() { + this.el.classList.remove(CLASSES.DISABLED); + } + + /** + * Checks if it is disabled + */ + + }, { + key: 'isDisabled', + value: function isDisabled() { + this.el.classList.contains(CLASSES.DISABLED); + } + /** * Registers a plugin to be loaded when the instance is created. It allows * (on purpose) to replace default plugins. @@ -1555,7 +1586,7 @@ var Keyboard = function () { var method = void 0; var argument = void 0; - if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement() || !__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isVisible(this.ws_.el)) { + if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement() || !this.ws_.isDisabled()) { return; } @@ -1823,15 +1854,13 @@ var Navigation = function () { /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__ = __webpack_require__(3); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(3); 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"); } } - /** * Scroll plugin. */ @@ -1874,7 +1903,7 @@ var Scroll = function () { */ this.timeout_ = null; - if (!__WEBPACK_IMPORTED_MODULE_1__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) { @@ -1910,7 +1939,7 @@ var Scroll = function () { }, { key: 'onMouseWheel_', value: function onMouseWheel_(event) { - if (!__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isVisible(this.ws_.el)) { + if (!this.ws_.isDisabled()) { return; } @@ -1960,15 +1989,13 @@ var Scroll = function () { /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_dom__ = __webpack_require__(0); -/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__ = __webpack_require__(3); +/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__ = __webpack_require__(3); 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 EVENTS = { touch: { START: 'touchstart', @@ -2058,9 +2085,9 @@ var Touch = function () { var events = void 0; - if (__WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isAny()) { + if (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isAny()) { // Likely IE - if (window.PointerEvent && (__WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isWindows() || __WEBPACK_IMPORTED_MODULE_1__utils_mobile_detector__["a" /* default */].isWindowsPhone())) { + if (window.PointerEvent && (__WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isWindows() || __WEBPACK_IMPORTED_MODULE_0__utils_mobile_detector__["a" /* default */].isWindowsPhone())) { events = EVENTS.pointer; } else { events = EVENTS.touch; @@ -2083,7 +2110,7 @@ var Touch = function () { _createClass(Touch, [{ key: 'onStart_', value: function onStart_(event) { - if (!__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isVisible(this.ws_.el)) { + if (!this.ws_.isDisabled()) { return; } @@ -2110,7 +2137,7 @@ var Touch = function () { }, { key: 'onMove_', value: function onMove_(event) { - if (!__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isVisible(this.ws_.el)) { + if (!this.ws_.isDisabled()) { return; } @@ -2132,7 +2159,7 @@ var Touch = function () { }, { key: 'onStop_', value: function onStop_() { - if (!__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].isVisible(this.ws_.el)) { + if (!this.ws_.isDisabled()) { return; } @@ -2587,6 +2614,11 @@ var Zoom = function () { this.zws_.el = this.ws_.el.cloneNode(); this.zws_.el.id = ID; this.zws_.el.className = CLASSES.ZOOM; + + this.zws_.el.addEventListener('click', function () { + return _this.toggleZoom(); + }); + // Clone the slides this.zws_.slides = [].map.call(this.ws_.slides, function (slide, i) { var s_ = slide.el.cloneNode(true); @@ -2622,6 +2654,7 @@ var Zoom = function () { var divLayer = document.createElement('div'); divLayer.className = 'zoom-layer'; divLayer.addEventListener('click', function (e) { + e.stopPropagation(); _this2.zoomOut(); _this2.ws_.goToSlide(elem.i); }); @@ -2631,11 +2664,6 @@ var Zoom = function () { slideNumber.className = 'slide-number'; slideNumber.textContent = '' + (elem.i + 1); div.appendChild(slideNumber); - // Zoom out when click in slide "border" - var obj = this; - div.addEventListener('click', function () { - return obj.toggleZoom(); - }); this.setSizes_(div, wrap, elem); } @@ -2694,7 +2722,7 @@ var Zoom = function () { }, { key: 'zoomIn', value: function zoomIn() { - __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.ws_.el); + this.ws_.disable(); __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el); this.isZoomed_ = true; document.body.style.overflow = 'auto'; @@ -2708,7 +2736,7 @@ var Zoom = function () { key: 'zoomOut', value: function zoomOut() { __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el); - __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.ws_.el); + this.ws_.enable(); this.isZoomed_ = false; document.body.style.overflow = ''; } diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index f94bfb17..bf0866a6 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,9 +1,9 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-18 + * Date: 2017-04-26 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return e[n].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var i={};t.m=e,t.c=i,t.i=function(e){return e},t.d=function(e,i,n){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/static/js/",t(t.s=5)}([function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(18),o=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return n.id=t,i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(){if(a)return a;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},i=Object.keys(t),n=0,s=i.length;n2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function(e,t){var i=document.createElement(t);return e.parentElement.insertBefore(i,e),i.appendChild(e),i}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild==t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=function(){function e(e,t){for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(n(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:s,changeOnClick:a,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{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.currentSlideI_!==e){this.isMoving=!0;var i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;iMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,o){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(o&&this.isGoingLeft_||!o&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(3),a=function(){function e(e,t){for(var i=0;i1&&(this.startTouches=this.getTouchCoorinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(s.a.isVisible(this.ws_.el)){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=this.getTouchCoorinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(s.a.isVisible(this.ws_.el))if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}},{key:"getTouchCoorinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return n.id=t,i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(){if(a)return a;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},i=Object.keys(t),n=0,s=i.length;n2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function(e,t){var i=document.createElement(t);return e.parentElement.insertBefore(i,e),i.appendChild(e),i}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild==t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=function(){function e(e,t){for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(n(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:s,changeOnClick:a,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{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.currentSlideI_!==e){this.isMoving=!0;var i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;iMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,s){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(s&&this.isGoingLeft_||!s&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(3),o=function(){function e(e,t){for(var i=0;i1&&(this.startTouches=this.getTouchCoorinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(this.ws_.isDisabled()){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=this.getTouchCoorinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(this.ws_.isDisabled())if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}},{key:"getTouchCoorinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l Date: Wed, 26 Apr 2017 21:31:50 +0200 Subject: [PATCH 19/20] Fix touch events --- .eslintrc | 2 +- src/js/modules/webslides.js | 3 ++- src/js/plugins/keyboard.js | 2 +- src/js/plugins/scroll.js | 2 +- src/js/plugins/touch.js | 6 +++--- static/js/webslides.js | 13 +++++++------ static/js/webslides.min.js | 2 +- 7 files changed, 16 insertions(+), 14 deletions(-) diff --git a/.eslintrc b/.eslintrc index 39c58f07..f9df3432 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,7 +8,7 @@ }, "rules": { "no-cond-assign": 0, - "no-console": 2, + "no-console": 0, "no-constant-condition": 2, "no-control-regex": 2, "no-debugger": 2, diff --git a/src/js/modules/webslides.js b/src/js/modules/webslides.js index f35c71f9..3b977fad 100644 --- a/src/js/modules/webslides.js +++ b/src/js/modules/webslides.js @@ -407,9 +407,10 @@ export default class WebSlides { /** * Checks if it is disabled + * @return {boolean} */ isDisabled() { - this.el.classList.contains(CLASSES.DISABLED); + return this.el.classList.contains(CLASSES.DISABLED); } /** diff --git a/src/js/plugins/keyboard.js b/src/js/plugins/keyboard.js index 209ce522..46f98820 100644 --- a/src/js/plugins/keyboard.js +++ b/src/js/plugins/keyboard.js @@ -29,7 +29,7 @@ export default class Keyboard { let method; let argument; - if (DOM.isFocusableElement() || !this.ws_.isDisabled()) { + if (DOM.isFocusableElement() || this.ws_.isDisabled()) { return; } diff --git a/src/js/plugins/scroll.js b/src/js/plugins/scroll.js index 1a3b4ed0..f1aba859 100644 --- a/src/js/plugins/scroll.js +++ b/src/js/plugins/scroll.js @@ -71,7 +71,7 @@ export default class Scroll { * @private */ onMouseWheel_(event) { - if (!this.ws_.isDisabled()) { + if (this.ws_.isDisabled()) { return; } diff --git a/src/js/plugins/touch.js b/src/js/plugins/touch.js index e2895aa6..0818e2a0 100644 --- a/src/js/plugins/touch.js +++ b/src/js/plugins/touch.js @@ -108,7 +108,7 @@ export default class Touch { * @private */ onStart_(event) { - if (!this.ws_.isDisabled()) { + if (this.ws_.isDisabled()) { return; } @@ -132,7 +132,7 @@ export default class Touch { * @private */ onMove_(event) { - if (!this.ws_.isDisabled()) { + if (this.ws_.isDisabled()) { return; } @@ -151,7 +151,7 @@ export default class Touch { * @private */ onStop_() { - if (!this.ws_.isDisabled()) { + if (this.ws_.isDisabled()) { return; } diff --git a/static/js/webslides.js b/static/js/webslides.js index b8e1c0f4..cf2589de 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1161,12 +1161,13 @@ var WebSlides = function () { /** * Checks if it is disabled + * @return {boolean} */ }, { key: 'isDisabled', value: function isDisabled() { - this.el.classList.contains(CLASSES.DISABLED); + return this.el.classList.contains(CLASSES.DISABLED); } /** @@ -1586,7 +1587,7 @@ var Keyboard = function () { var method = void 0; var argument = void 0; - if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement() || !this.ws_.isDisabled()) { + if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement() || this.ws_.isDisabled()) { return; } @@ -1939,7 +1940,7 @@ var Scroll = function () { }, { key: 'onMouseWheel_', value: function onMouseWheel_(event) { - if (!this.ws_.isDisabled()) { + if (this.ws_.isDisabled()) { return; } @@ -2110,7 +2111,7 @@ var Touch = function () { _createClass(Touch, [{ key: 'onStart_', value: function onStart_(event) { - if (!this.ws_.isDisabled()) { + if (this.ws_.isDisabled()) { return; } @@ -2137,7 +2138,7 @@ var Touch = function () { }, { key: 'onMove_', value: function onMove_(event) { - if (!this.ws_.isDisabled()) { + if (this.ws_.isDisabled()) { return; } @@ -2159,7 +2160,7 @@ var Touch = function () { }, { key: 'onStop_', value: function onStop_() { - if (!this.ws_.isDisabled()) { + if (this.ws_.isDisabled()) { return; } diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index bf0866a6..3338ab49 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -6,4 +6,4 @@ * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return e[n].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var i={};t.m=e,t.c=i,t.i=function(e){return e},t.d=function(e,i,n){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/static/js/",t(t.s=5)}([function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(18),o=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return n.id=t,i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(){if(a)return a;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},i=Object.keys(t),n=0,s=i.length;n2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function(e,t){var i=document.createElement(t);return e.parentElement.insertBefore(i,e),i.appendChild(e),i}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild==t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=function(){function e(e,t){for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(n(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:s,changeOnClick:a,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{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.currentSlideI_!==e){this.isMoving=!0;var i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;iMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,s){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(s&&this.isGoingLeft_||!s&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(3),o=function(){function e(e,t){for(var i=0;i1&&(this.startTouches=this.getTouchCoorinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(this.ws_.isDisabled()){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=this.getTouchCoorinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(this.ws_.isDisabled())if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}},{key:"getTouchCoorinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return n.id=t,i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(){if(a)return a;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},i=Object.keys(t),n=0,s=i.length;n2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function(e,t){var i=document.createElement(t);return e.parentElement.insertBefore(i,e),i.appendChild(e),i}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild==t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=function(){function e(e,t){for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(n(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:s,changeOnClick:a,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{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.currentSlideI_!==e){this.isMoving=!0;var i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;iMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,s){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(s&&this.isGoingLeft_||!s&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(3),o=function(){function e(e,t){for(var i=0;i1&&(this.startTouches=this.getTouchCoorinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(!this.ws_.isDisabled()){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=this.getTouchCoorinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(!this.ws_.isDisabled())if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}},{key:"getTouchCoorinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l Date: Sat, 29 Apr 2017 11:41:37 +0200 Subject: [PATCH 20/20] Blur effect --- .eslintrc | 2 +- src/js/plugins/zoom.js | 18 +++++- static/css/base.css | 123 ++++++++++++++++++++++++++++++++++--- static/css/colors.css | 18 +++--- static/js/webslides.js | 28 +++++++-- static/js/webslides.min.js | 4 +- 6 files changed, 162 insertions(+), 31 deletions(-) diff --git a/.eslintrc b/.eslintrc index f9df3432..39c58f07 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,7 +8,7 @@ }, "rules": { "no-cond-assign": 0, - "no-console": 0, + "no-console": 2, "no-constant-condition": 2, "no-control-regex": 2, "no-debugger": 2, diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index 6f47747c..d5d7630d 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -160,8 +160,14 @@ export default class Zoom { * Zoom In the slider, scales the slides and uses a grid layout to show them */ zoomIn() { - this.ws_.disable(); + this.ws_.el.classList.add('zooming', 'in'); + this.zws_.el.classList.add('zooming', 'in'); DOM.show(this.zws_.el); + setTimeout(() => { + this.ws_.el.classList.remove('zooming', 'in'); + this.zws_.el.classList.remove('zooming', 'in'); + this.ws_.disable(); + }, 400); this.isZoomed_ = true; document.body.style.overflow = 'auto'; } @@ -170,8 +176,14 @@ export default class Zoom { * Zoom Out the slider, remove scale from the slides */ zoomOut() { - DOM.hide(this.zws_.el); - this.ws_.enable(); + this.ws_.el.classList.add('zooming', 'out'); + this.zws_.el.classList.add('zooming', 'out'); + setTimeout(() => { + this.ws_.el.classList.remove('zooming', 'out'); + this.zws_.el.classList.remove('zooming', 'out'); + DOM.hide(this.zws_.el); + this.ws_.enable(); + }, 400); this.isZoomed_ = false; document.body.style.overflow = ''; } diff --git a/static/css/base.css b/static/css/base.css index ef37d4e6..d14b6284 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -3333,12 +3333,6 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap /*========================================= 18. Zoom: Index of slides (grid) =========================================== */ -#webslides.disabled { - position: absolute; - width: 100%; - z-index: 0; - filter: blur(10px); -} #webslides-zoomed.grid{ -webkit-flex-direction: row; flex-direction: row; @@ -3389,11 +3383,10 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap .text-slide-number { text-align: center; display: inline-block; - /*border-radius: .3rem; - padding: 0 1.6rem;*/ margin: .8rem auto; } + @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation:landscape) { #webslides-zoomed.grid > .column { width: 50%; @@ -3411,3 +3404,117 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap transform: scale(0.5) translate(-50%, -50%); } } + +#webslides.disabled, #webslides.zooming { + position: absolute; + width: 100%; + z-index: 0; +} +#webslides.disabled { + filter: blur(10px); +} +#webslides-zoomed.zooming { + opacity: 1; + transform: scale(1); +} +#webslides.zooming.in { + -webkit-animation: bg-zoom-in 0.4s 1; + animation: bg-zoom-in 0.4s 1; +} + +#webslides.zooming.out { + -webkit-animation: bg-zoom-out 0.4s 1; + animation: bg-zoom-out 0.4s 1; +} + +#webslides-zoomed.zooming.in { + -webkit-animation: grid-zoom-in 0.4s 1; + animation: grid-zoom-in 0.4s 1; +} + +#webslides-zoomed.zooming.out { + -webkit-animation: grid-zoom-out 0.4s 1; + animation: grid-zoom-out 0.4s 1; +} + +@-webkit-keyframes bg-zoom-in { + 0% { + filter: blur(0px); + } + 100% { + filter: blur(10px); + } +} +@keyframes bg-zoom-in { + 0% { + filter: blur(0px); + } + 100% { + filter: blur(10px); + } +} + +@-webkit-keyframes bg-zoom-out { + 0% { + filter: blur(10px); + } + 100% { + filter: blur(0px); + } +} +@keyframes bg-zoom-out { + 0% { + filter: blur(10px); + } + 100% { + filter: blur(0px); + } +} + +@-webkit-keyframes grid-zoom-in { + 0% { + opacity: 0; + transform: scale(1.2); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +@keyframes grid-zoom-in { + 0% { + opacity: 0; + transform: scale(1.2); + filter: blur(10px); + } + 100% { + opacity: 1; + transform: scale(1); + filter: blur(0px); + } +} + +@-webkit-keyframes grid-zoom-out { + 0% { + opacity: 1; + transform: scale(1); + filter: blur(0px); + } + 100% { + opacity: 0; + transform: scale(1.2); + filter: blur(10px); + } +} +@keyframes grid-zoom-out { + 0% { + opacity: 1; + transform: scale(1); + filter: blur(0px); + } + 100% { + opacity: 0; + transform: scale(1.2); + filter: blur(10px); + } +} diff --git a/static/css/colors.css b/static/css/colors.css index 7a47a2af..149ef8c8 100644 --- a/static/css/colors.css +++ b/static/css/colors.css @@ -39,7 +39,7 @@ WebSlides - Colors Base =========================================== */ -body, +body, /*index of slides: mini-slides same bg color as body */ #webslides-zoomed.grid > .column > .wrap-zoom { color: #333; @@ -379,7 +379,7 @@ nav li.email a:hover { } /*========================================= -Features & Clients List +Features & Clients List =========================================== */ .features li,.clients li { @@ -415,7 +415,7 @@ box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08); } /*=========================================== -flexblock.steps +flexblock.steps ============================================= */ .steps li:nth-child(1) { @@ -708,7 +708,7 @@ background-color: rgba(0, 20, 80, 0.06); border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; -webkit-border-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; -moz-border-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; - + } } @@ -742,7 +742,7 @@ tr:nth-child(even)>td:hover { /*============================ -Browser (Screenshots) +Browser (Screenshots) ============================== */ .browser { @@ -802,7 +802,7 @@ button[type="submit"], input[type="submit"], .button,.button:hover, button[type="submit"]:hover, -input[type="submit"]:hover +input[type="submit"]:hover { border: 1px solid #44d; } @@ -823,7 +823,7 @@ background-color: #17d; .bg-primary .button, .bg-primary button,.bg-primary button:hover, .bg-primary input, -[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost +[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost { border-color: #fff; } @@ -924,10 +924,6 @@ background-color:rgba(255,255,255 , 0.3); Zoom: Index of slides ============================== */ -#webslides-zoomed.grid { - background: #e3e5e9; -} - #webslides-zoomed.grid > .column > .wrap-zoom { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04); } diff --git a/static/js/webslides.js b/static/js/webslides.js index cf2589de..2642049a 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-26 + * Date: 2017-04-29 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -2723,8 +2723,16 @@ var Zoom = function () { }, { key: 'zoomIn', value: function zoomIn() { - this.ws_.disable(); + var _this3 = this; + + this.ws_.el.classList.add('zooming', 'in'); + this.zws_.el.classList.add('zooming', 'in'); __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el); + setTimeout(function () { + _this3.ws_.el.classList.remove('zooming', 'in'); + _this3.zws_.el.classList.remove('zooming', 'in'); + _this3.ws_.disable(); + }, 400); this.isZoomed_ = true; document.body.style.overflow = 'auto'; } @@ -2736,8 +2744,16 @@ var Zoom = function () { }, { key: 'zoomOut', value: function zoomOut() { - __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(this.zws_.el); - this.ws_.enable(); + var _this4 = this; + + this.ws_.el.classList.add('zooming', 'out'); + this.zws_.el.classList.add('zooming', 'out'); + setTimeout(function () { + _this4.ws_.el.classList.remove('zooming', 'out'); + _this4.zws_.el.classList.remove('zooming', 'out'); + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(_this4.zws_.el); + _this4.ws_.enable(); + }, 400); this.isZoomed_ = false; document.body.style.overflow = ''; } @@ -2750,14 +2766,14 @@ var Zoom = function () { }, { key: 'onWindowResize', value: function onWindowResize(ev) { - var _this3 = this; + var _this5 = this; if (this.isZoomed_) this.zoomOut(); this.zws_.slides.forEach(function (elem) { var wrap = elem.el.parentElement; var div = wrap.parentElement; - _this3.setSizes_(div, wrap, elem); + _this5.setSizes_(div, wrap, elem); }); } }]); diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 3338ab49..7cd231b1 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,9 +1,9 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-26 + * Date: 2017-04-29 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return e[n].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var i={};t.m=e,t.c=i,t.i=function(e){return e},t.d=function(e,i,n){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/static/js/",t(t.s=5)}([function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(18),o=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return n.id=t,i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(){if(a)return a;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},i=Object.keys(t),n=0,s=i.length;n2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function(e,t){var i=document.createElement(t);return e.parentElement.insertBefore(i,e),i.appendChild(e),i}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild==t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=function(){function e(e,t){for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(n(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:s,changeOnClick:a,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{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.currentSlideI_!==e){this.isMoving=!0;var i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;iMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,s){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(s&&this.isGoingLeft_||!s&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(3),o=function(){function e(e,t){for(var i=0;i1&&(this.startTouches=this.getTouchCoorinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(!this.ws_.isDisabled()){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=this.getTouchCoorinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(!this.ws_.isDisabled())if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}},{key:"getTouchCoorinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return n.id=t,i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(){if(a)return a;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},i=Object.keys(t),n=0,s=i.length;n2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function(e,t){var i=document.createElement(t);return e.parentElement.insertBefore(i,e),i.appendChild(e),i}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild==t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=function(){function e(e,t){for(var i=0;i0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(n(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");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.options={autoslide:s,changeOnClick:a,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{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.currentSlideI_!==e){this.isMoving=!0;var i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),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;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;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.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;iMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,s){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(s&&this.isGoingLeft_||!s&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(3),o=function(){function e(e,t){for(var i=0;i1&&(this.startTouches=this.getTouchCoorinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(!this.ws_.isDisabled()){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=this.getTouchCoorinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(!this.ws_.isDisabled())if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}},{key:"getTouchCoorinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l