mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-22 04:43:42 +02:00
Code Issues Releases Wiki Activity

Click on zoomed slide event handled

Browse Source
This commit is contained in:
Luis
2017-04-05 19:13:38 +02:00
parent 79ec99a2f7
commit ebb5e9a4cd
10 changed files with 227 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc
View File

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

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() || !DOM.isVisible(this.ws_.el)) {
return;
}

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

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

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

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

39
src/js/plugins/zoom.js
View File

@@ -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,7 +80,26 @@ export default class Zoom {
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.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)
@@ -97,7 +117,6 @@ export default class Zoom {
// Because of flexbox, wrap height is required
const slideCSS = window.getComputedStyle(elem.el);
wrap.style.height = `${DOM.parseSize(slideCSS.height) / scale}px`;
});
}
/**
@@ -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);
});
}
}

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

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

36
static/css/base.css
View File

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

93
static/js/webslides.js
View File

@@ -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,14 +2518,35 @@ 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);
});
}
/**
* 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
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';
@@ -2499,7 +2554,6 @@ var Zoom = function () {
// 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);
});
}
}]);

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

File diff suppressed because one or more lines are too long

16
tests/test.css
View File

@@ -10,7 +10,9 @@
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;
@@ -19,13 +21,9 @@
left: 0;
clip: rect(0px auto auto 0);
}
.enorme {
#webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer {
position: absolute;
top: 0;
left: 0;
font-size: 500px;
background: transparent;
width: 100%;
height: 100%;
}