mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-31 00:39:48 +02:00
Code Issues Releases Wiki Activity

Slides index (aka zoom) merged into dev #73

Browse Source
This commit is contained in:
Luis
2017-04-29 12:00:10 +02:00
parent 714915002c 37e8d1ae26
commit b19e4a4e0d
14 changed files with 1228 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc
View File

@@ -132,5 +132,3 @@
"yield-star-spacing": [2, "after"]
}
}

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

@@ -5,7 +5,8 @@ import scrollTo from '../utils/scroll-to';
const CLASSES = {
VERTICAL: 'vertical',
READY: 'ws-ready'
READY: 'ws-ready',
DISABLED: 'disabled'
};
// Default plugins
@@ -19,7 +20,8 @@ const PLUGINS = {
'scroll': Plugins.Scroll,
'touch': Plugins.Touch,
'video': Plugins.Video,
'youtube': Plugins.YouTube
'youtube': Plugins.YouTube,
'zoom': Plugins.Zoom
};
@@ -386,6 +388,35 @@ export default class WebSlides {
this.goToSlide(slideNumber);
}
/**
* Toggles zoom
*/
toggleZoom() {
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
* @return {boolean}
*/
isDisabled() {
return 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.

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

@@ -29,7 +29,7 @@ export default class Keyboard {
let method;
let argument;
if (DOM.isFocusableElement()) {
if (DOM.isFocusableElement() || this.ws_.isDisabled()) {
return;
}

24
src/js/plugins/navigation.js
View File

@@ -48,7 +48,7 @@ export default class Navigation {
* Counter Element.
* @type {Element}
*/
this.counter = DOM.createNode('span', ELEMENT_ID.COUNTER);
this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER);
/**
* @type {WebSlides}
* @private
@@ -72,6 +72,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));
}
/**
@@ -80,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}`;
}
/**
@@ -97,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
@@ -115,8 +131,10 @@ export default class Navigation {
event.preventDefault();
if (event.target === this.next) {
this.ws_.goNext();
} else {
} else if (event.target === this.prev) {
this.ws_.goPrev();
} else {
this.ws_.toggleZoom();
}
}
}

4
src/js/plugins/plugins.js
View File

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

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

@@ -76,6 +76,10 @@ export default class Scroll {
* @private
*/
onMouseWheel_(event) {
if (this.ws_.isDisabled()) {
return;
}
if (this.ws_.isMoving || this.timeout_) {
event.preventDefault();
return;

69
src/js/plugins/touch.js
View File

@@ -63,6 +63,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()) {
@@ -87,12 +108,22 @@ export default class Touch {
* @private
*/
onStart_(event) {
if (this.ws_.isDisabled()) {
return;
}
const info = Touch.normalizeEventInfo(event);
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;
}
}
/**
@@ -101,17 +132,44 @@ export default class Touch {
* @private
*/
onMove_(event) {
if (this.ws_.isDisabled()) {
return;
}
const info = Touch.normalizeEventInfo(event);
if (this.isGesture) {
this.endTouches = this.getTouchCoorinates(event);
} else {
this.endX_ = info.x;
this.endY_ = info.y;
}
}
/**
* Stop touch handler. Checks if it needs to make any actions.
* @private
*/
onStop_() {
if (this.ws_.isDisabled()) {
return;
}
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_;
@@ -124,6 +182,17 @@ export default class Touch {
}
}
}
}
/**
* 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

205
src/js/plugins/zoom.js Normal file
View File

@@ -0,0 +1,205 @@
import DOM from '../utils/dom';
import Keys from '../utils/keys';
import Slide from '../modules/slide';
const CLASSES = {
ZOOM: 'grid',
DIV: 'column',
WRAP: 'wrap-zoom'
};
const ID = 'webslides-zoomed';
/**
* Zoom plugin.
*/
export default class Zoom {
/**
* @param {WebSlides} wsInstance The WebSlides instance
* @constructor
*/
constructor(wsInstance) {
/**
* @type {WebSlides}
* @private
*/
this.ws_ = wsInstance;
/**
* @type {WebSlides}
* @private
*/
this.zws_ = {};
/**
* @type {boolean}
* @private
*/
this.isZoomed_ = false;
this.preBuildZoom_();
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) {
if ( !this.isZoomed_ && Keys.MINUS.includes( event.which ) ) {
this.zoomIn();
} else if ( this.isZoomed_ &&
(Keys.PLUS.includes( event.which ) || event.which == Keys.ESCAPE ) ) {
this.zoomOut();
}
}
/**
* Prepare zoom structure, scales the slides and uses a grid layout
* to show them
*/
preBuildZoom_() {
// Clone #webslides element
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) => {
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 => this.createSlideBlock_(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 => {
e.stopPropagation();
this.zoomOut();
this.ws_.goToSlide(elem.i);
});
wrap.appendChild(divLayer);
// Slide number
const slideNumber = document.createElement('span');
slideNumber.className = 'slide-number';
slideNumber.textContent = `${elem.i+1}`;
div.appendChild(slideNumber);
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);
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 = `${(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`;
// Because of flexbox, wrap height is required
wrap.style.height = `${window.innerHeight / scale}px`;
}
}
/**
* Toggles zoom
*/
toggleZoom() {
if (this.isZoomed_) {
this.zoomOut();
} else {
this.zoomIn();
}
}
/**
* Zoom In the slider, scales the slides and uses a grid layout to show them
*/
zoomIn() {
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';
}
/**
* Zoom Out the slider, remove scale from the slides
*/
zoomOut() {
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 = '';
}
/**
* When windows resize it is necessary to recalculate layers sizes
* @param {Event} ev
*/
onWindowResize(ev) {
if (this.isZoomed_) this.zoomOut();
this.zws_.slides.forEach( elem => {
const wrap = elem.el.parentElement;
const div = wrap.parentElement;
this.setSizes_(div, wrap, elem);
});
}
}

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

@@ -127,6 +127,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.
@@ -171,4 +181,42 @@ 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;
}
/**
* 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);
}
}
}

5
src/js/utils/keys.js
View File

@@ -8,7 +8,10 @@ const Keys = {
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40
DOWN: 40,
PLUS: [107, 171],
MINUS: [109, 173],
ESCAPE: 27
};
export default Keys;

232
static/css/base.css
View File

@@ -47,12 +47,18 @@
12. Avatars
13. Tables
14. Forms
<<<<<<< HEAD
15. Longform Elements
16. Safari Bug (flex-wrap)
17. Print
=======
15. Longform Elements
16. Safari Bug (flex-wrap)
17. Print
18. Zoom: Index of slides (grid)
>>>>>>> feature/zoom
----------------------------------------------------------------------------------- */
/*=========================================
0. CSS Reset & Normalize
=========================================== */
@@ -706,7 +712,11 @@ footer,
height: 100%;
margin: 0;
}
<<<<<<< HEAD
/* -- Responsive background video
=======
/* -- Responsive background video
>>>>>>> feature/zoom
https://fvsch.com/code/video-background/ -- */
.fullscreen > .embed {
@@ -724,18 +734,30 @@ https://fvsch.com/code/video-background/ -- */
.fullscreen > .embed > iframe,
.fullscreen > .embed > object,
.fullscreen > .embed > embed,
<<<<<<< HEAD
.fullscreen > .embed > video {
height: 300%;
top: -100%;
=======
.fullscreen > .embed > video {
height: 300%;
top: -100%;
>>>>>>> feature/zoom
}
}
@media (max-aspect-ratio: 16/9) {
.fullscreen > .embed > iframe,
.fullscreen > .embed > object,
.fullscreen > .embed > embed,
<<<<<<< HEAD
.fullscreen > .embed > video {
width: 300%;
left: -100%;
=======
.fullscreen > .embed > video {
width: 300%;
left: -100%;
>>>>>>> feature/zoom
}
}
/* 2. If supporting object-fit, overriding (1): */
@@ -744,9 +766,15 @@ https://fvsch.com/code/video-background/ -- */
.fullscreen > .embed > object,
.fullscreen > .embed > embed,
.fullscreen > .embed > video {
<<<<<<< HEAD
top: 0;
left: 0;
width: 100%;
=======
top: 0;
left: 0;
width: 100%;
>>>>>>> feature/zoom
height: 100%;
object-fit: cover;
}
@@ -3236,14 +3264,23 @@ button:disabled:hover {
}
/*=========================================
<<<<<<< HEAD
15. Longform
=======
15. Longform
>>>>>>> feature/zoom
=========================================== */
/* -- Posts = .wrap.longform -- */
.longform {
<<<<<<< HEAD
width: 72rem;
/* Why 72rem=720px?
=======
width: 72rem;
/* Why 72rem=720px?
>>>>>>> feature/zoom
90-95 characters per line = better reading speed */
}
.longform .alignleft, .longform .alignright {
@@ -3337,4 +3374,197 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
#counter, #navigation {
display: none;
}
<<<<<<< HEAD
}
=======
}
/*=========================================
18. Zoom: Index of slides (grid)
=========================================== */
#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;
-webkit-transition: .3s;
transition: .3s;
overflow: hidden;
}
#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;
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%;
cursor: pointer;
}
#webslides-zoomed.grid > .column > .wrap-zoom:hover {
transform: scale(1.02);
}
.text-slide-number {
text-align: center;
display: inline-block;
margin: .8rem auto;
}
@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%, -50%);
}
}
@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%, -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);
}
}
>>>>>>> feature/zoom

24
static/css/colors.css
View File

@@ -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;
}
@@ -918,4 +920,24 @@ footer[role=contentinfo] {
/*footer:hover {
background-color:rgba(255,255,255 , 0.3);
}
<<<<<<< HEAD
*/
=======
*/
/*============================
Zoom: Index of slides
============================== */
#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);
}
#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;
}
>>>>>>> feature/zoom

550
static/js/webslides.js
View File

@@ -1,7 +1,12 @@
/*!
* Name: WebSlides
<<<<<<< HEAD
* Version: 1.3.1
* Date: 2017-04-26
=======
* Version: 1.2.1
* Date: 2017-04-29
>>>>>>> feature/zoom
* Description: Making HTML presentations easy
* URL: https://github.com/webslides/webslides#readme
* Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -79,12 +84,16 @@
/***/ (function(module, exports, __webpack_require__) {
"use strict";
<<<<<<< HEAD
Object.defineProperty(exports, "__esModule", {
value: true
});
=======
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__custom_event__ = __webpack_require__(18);
>>>>>>> feature/zoom
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; }; }();
var _customEvent = __webpack_require__(17);
@@ -240,6 +249,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.
@@ -293,6 +315,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;
@@ -525,7 +594,10 @@ var Keys = {
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40
DOWN: 40,
PLUS: [107, 171],
MINUS: [109, 173],
ESCAPE: 27
};
exports.default = Keys;
@@ -645,12 +717,19 @@ exports.default = MobileDetector;
/***/ (function(module, exports, __webpack_require__) {
"use strict";
<<<<<<< HEAD
Object.defineProperty(exports, "__esModule", {
value: true
});
=======
/* 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__(20);
>>>>>>> feature/zoom
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; }; }();
var _plugins = __webpack_require__(12);
@@ -675,11 +754,13 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
var CLASSES = {
VERTICAL: 'vertical',
READY: 'ws-ready'
READY: 'ws-ready',
DISABLED: 'disabled'
};
// Default plugins
var PLUGINS = {
<<<<<<< HEAD
'autoslide': _plugins2.default.AutoSlide,
'clickNav': _plugins2.default.ClickNav,
'grid': _plugins2.default.Grid,
@@ -690,6 +771,19 @@ var PLUGINS = {
'touch': _plugins2.default.Touch,
'video': _plugins2.default.Video,
'youtube': _plugins2.default.YouTube
=======
'autoslide': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].AutoSlide,
'clickNav': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].ClickNav,
'grid': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Grid,
'hash': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Hash,
'keyboard': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Keyboard,
'nav': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Navigation,
'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,
'zoom': __WEBPACK_IMPORTED_MODULE_0__plugins_plugins__["a" /* default */].Zoom
>>>>>>> feature/zoom
};
/**
@@ -1099,6 +1193,47 @@ var WebSlides = function () {
this.goToSlide(slideNumber);
}
/**
* Toggles zoom
*/
}, {
key: 'toggleZoom',
value: function toggleZoom() {
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
* @return {boolean}
*/
}, {
key: 'isDisabled',
value: function isDisabled() {
return 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.
@@ -1558,7 +1693,11 @@ var Keyboard = function () {
var method = void 0;
var argument = void 0;
<<<<<<< HEAD
if (_dom2.default.isFocusableElement()) {
=======
if (__WEBPACK_IMPORTED_MODULE_1__utils_dom__["a" /* default */].isFocusableElement() || this.ws_.isDisabled()) {
>>>>>>> feature/zoom
return;
}
@@ -1674,7 +1813,11 @@ var Navigation = function () {
* Counter Element.
* @type {Element}
*/
<<<<<<< HEAD
this.counter = _dom2.default.createNode('span', ELEMENT_ID.COUNTER);
=======
this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER);
>>>>>>> feature/zoom
/**
* @type {WebSlides}
* @private
@@ -1701,6 +1844,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));
}
/**
@@ -1712,7 +1856,7 @@ var Navigation = function () {
}, {
key: 'updateCounter',
value: function updateCounter(current, max) {
this.counter.textContent = current + ' / ' + max;
this.counter.childNodes[0].textContent = current + ' / ' + max;
}
/**
@@ -1747,8 +1891,10 @@ var Navigation = function () {
event.preventDefault();
if (event.target === this.next) {
this.ws_.goNext();
} else {
} else if (event.target === this.prev) {
this.ws_.goPrev();
} else {
this.ws_.toggleZoom();
}
}
}], [{
@@ -1760,6 +1906,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;
@@ -1772,6 +1936,21 @@ exports.default = Navigation;
/***/ (function(module, exports, __webpack_require__) {
"use strict";
<<<<<<< HEAD
=======
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__autoslide__ = __webpack_require__(6);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__click_nav__ = __webpack_require__(7);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__grid__ = __webpack_require__(8);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__hash__ = __webpack_require__(9);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__keyboard__ = __webpack_require__(10);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__navigation__ = __webpack_require__(11);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__scroll__ = __webpack_require__(13);
/* 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);
>>>>>>> feature/zoom
Object.defineProperty(exports, "__esModule", {
@@ -1796,6 +1975,7 @@ var _hash2 = _interopRequireDefault(_hash);
var _keyboard = __webpack_require__(10);
<<<<<<< HEAD
var _keyboard2 = _interopRequireDefault(_keyboard);
var _navigation = __webpack_require__(11);
@@ -1832,6 +2012,21 @@ exports.default = {
Video: _video2.default,
YouTube: _youtube2.default
};
=======
/* harmony default export */ __webpack_exports__["a"] = ({
AutoSlide: __WEBPACK_IMPORTED_MODULE_0__autoslide__["a" /* default */],
ClickNav: __WEBPACK_IMPORTED_MODULE_1__click_nav__["a" /* default */],
Grid: __WEBPACK_IMPORTED_MODULE_2__grid__["a" /* default */],
Hash: __WEBPACK_IMPORTED_MODULE_3__hash__["a" /* default */],
Keyboard: __WEBPACK_IMPORTED_MODULE_4__keyboard__["a" /* default */],
Navigation: __WEBPACK_IMPORTED_MODULE_5__navigation__["a" /* default */],
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 */],
Zoom: __WEBPACK_IMPORTED_MODULE_10__zoom__["a" /* default */]
});
>>>>>>> feature/zoom
/***/ }),
/* 13 */
@@ -1931,6 +2126,10 @@ var Scroll = function () {
}, {
key: 'onMouseWheel_',
value: function onMouseWheel_(event) {
if (this.ws_.isDisabled()) {
return;
}
if (this.ws_.isMoving || this.timeout_) {
event.preventDefault();
return;
@@ -2059,6 +2258,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 (_mobileDetector2.default.isAny()) {
@@ -2086,12 +2306,22 @@ var Touch = function () {
_createClass(Touch, [{
key: 'onStart_',
value: function onStart_(event) {
if (this.ws_.isDisabled()) {
return;
}
var info = Touch.normalizeEventInfo(event);
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;
}
}
/**
@@ -2103,11 +2333,19 @@ var Touch = function () {
}, {
key: 'onMove_',
value: function onMove_(event) {
if (this.ws_.isDisabled()) {
return;
}
var info = Touch.normalizeEventInfo(event);
if (this.isGesture) {
this.endTouches = this.getTouchCoorinates(event);
} else {
this.endX_ = info.x;
this.endY_ = info.y;
}
}
/**
* Stop touch handler. Checks if it needs to make any actions.
@@ -2117,6 +2355,19 @@ var Touch = function () {
}, {
key: 'onStop_',
value: function onStop_() {
if (this.ws_.isDisabled()) {
return;
}
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_;
@@ -2129,6 +2380,19 @@ var Touch = function () {
}
}
}
}
/**
* 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
@@ -2347,7 +2611,11 @@ var Player = function () {
}
/**
<<<<<<< HEAD
* Destroys the iframe. Saves the current time in case it gets restored.
=======
* Plays the video.
>>>>>>> feature/zoom
*/
@@ -2608,11 +2876,271 @@ exports.default = YouTube;
/***/ (function(module, exports, __webpack_require__) {
"use strict";
<<<<<<< HEAD
Object.defineProperty(exports, "__esModule", {
value: true
});
=======
/* 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.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
*/
_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) || event.which == __WEBPACK_IMPORTED_MODULE_1__utils_keys__["a" /* default */].ESCAPE)) {
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;
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);
_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) {
return _this.createSlideBlock_(elem);
});
}
/**
* Creates a block structure around the slide
* @param {Element} elem slide element
*/
}, {
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) {
e.stopPropagation();
_this2.zoomOut();
_this2.ws_.goToSlide(elem.i);
});
wrap.appendChild(divLayer);
// Slide number
var slideNumber = document.createElement('span');
slideNumber.className = 'slide-number';
slideNumber.textContent = '' + (elem.i + 1);
div.appendChild(slideNumber);
this.setSizes_(div, wrap, elem);
}
/**
* Sets layers size
* @param {Element} div flexbox element
* @param {Element} wrap wrapping element
* @param {Element} elem slide element
*/
}, {
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);
// 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);
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 = (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';
// Because of flexbox, wrap height is required
wrap.style.height = window.innerHeight / scale + 'px';
}
}
/**
* Toggles zoom
*/
}, {
key: 'toggleZoom',
value: function toggleZoom() {
if (this.isZoomed_) {
this.zoomOut();
} else {
this.zoomIn();
}
}
/**
* Zoom In the slider, scales the slides and uses a grid layout to show them
*/
}, {
key: 'zoomIn',
value: function zoomIn() {
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';
}
/**
* Zoom Out the slider, remove scale from the slides
*/
}, {
key: 'zoomOut',
value: function zoomOut() {
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 = '';
}
/**
* When windows resize it is necessary to recalculate layers sizes
* @param {Event} ev
*/
}, {
key: 'onWindowResize',
value: function onWindowResize(ev) {
var _this5 = this;
if (this.isZoomed_) this.zoomOut();
this.zws_.slides.forEach(function (elem) {
var wrap = elem.el.parentElement;
var div = wrap.parentElement;
_this5.setSizes_(div, wrap, elem);
});
}
}]);
return Zoom;
}();
/* harmony default export */ __webpack_exports__["a"] = (Zoom);
/***/ }),
/* 18 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
>>>>>>> feature/zoom
var NativeCustomEvent = window.CustomEvent;
/**
@@ -2657,8 +3185,13 @@ var WSCustomEvent = canIuseNativeCustom() ? NativeCustomEvent : IECustomEvent;
exports.default = WSCustomEvent;
/***/ }),
<<<<<<< HEAD
/* 18 */
/***/ (function(module, exports, __webpack_require__) {
=======
/* 19 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
>>>>>>> feature/zoom
"use strict";
@@ -2687,10 +3220,19 @@ function linear(p) {
exports.default = { swing: swing, linear: linear };
/***/ }),
<<<<<<< HEAD
/* 19 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
=======
/* 20 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__easing__ = __webpack_require__(19);
/* harmony export (immutable) */ __webpack_exports__["a"] = scrollTo;
>>>>>>> feature/zoom
Object.defineProperty(exports, "__esModule", {

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

File diff suppressed because one or more lines are too long