mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-19 11:21:20 +02:00
Code Issues Releases Wiki Activity

Using class to control overflow

Browse Source
This commit is contained in:
Antonio Laguna
2017-07-28 11:20:21 +02:00
parent 4fb3f14cde
commit 9f93263c86
2 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,8 @@ const CLASSES = {
WRAP: 'wrap-zoom', WRAP: 'wrap-zoom',
WRAP_CONTAINER: 'wrap', WRAP_CONTAINER: 'wrap',
CURRENT: 'current', CURRENT: 'current',
SLIDE: 'slide' SLIDE: 'slide',
ZOOM_ENABLED: 'ws-ready-zoom'
}; };
const ID = 'webslides-zoomed'; const ID = 'webslides-zoomed';
@@ -100,9 +101,11 @@ export default class Zoom {
const wrap = DOM.wrap(elem.el, 'div'); const wrap = DOM.wrap(elem.el, 'div');
wrap.className = CLASSES.WRAP; wrap.className = CLASSES.WRAP;
wrap.setAttribute('id', `zoomed-${elem.el.getAttribute('id')}`); wrap.setAttribute('id', `zoomed-${elem.el.getAttribute('id')}`);
// Slide container, need due to flexbox styles // Slide container, need due to flexbox styles
const div = DOM.wrap(wrap, 'div'); const div = DOM.wrap(wrap, 'div');
div.className = CLASSES.DIV; div.className = CLASSES.DIV;
// Adding some layer for controlling click events // Adding some layer for controlling click events
const divLayer = DOM.createNode('div'); const divLayer = DOM.createNode('div');
divLayer.className = 'zoom-layer'; divLayer.className = 'zoom-layer';
@@ -112,8 +115,9 @@ export default class Zoom {
this.ws_.goToSlide(elem.i); this.ws_.goToSlide(elem.i);
}); });
wrap.appendChild(divLayer); wrap.appendChild(divLayer);
// Slide number // Slide number
const slideNumber = DOM.createNode('p', '', `${elem.i+1}`); const slideNumber = DOM.createNode('p', '', `${elem.i + 1}`);
slideNumber.className = 'text-slide-number'; slideNumber.className = 'text-slide-number';
div.appendChild(slideNumber); div.appendChild(slideNumber);
} }
@@ -137,22 +141,26 @@ export default class Zoom {
const currentId = this.ws_.currentSlide_.el.id; const currentId = this.ws_.currentSlide_.el.id;
const zoomedCurrent = this.zws_.el const zoomedCurrent = this.zws_.el
.querySelector(`.${CLASSES.WRAP}.${CLASSES.CURRENT}`); .querySelector(`.${CLASSES.WRAP}.${CLASSES.CURRENT}`);
if (zoomedCurrent) { if (zoomedCurrent) {
zoomedCurrent.classList.remove(CLASSES.CURRENT); zoomedCurrent.classList.remove(CLASSES.CURRENT);
} }
const actualCurrent = this.zws_.el const actualCurrent = this.zws_.el
.querySelector(`#zoomed-${currentId}`); .querySelector(`#zoomed-${currentId}`);
actualCurrent.classList.add(CLASSES.CURRENT); actualCurrent.classList.add(CLASSES.CURRENT);
this.isZoomed_ = true; this.isZoomed_ = true;
document.body.style.overflow = 'auto'; document.documentElement.classList.add(CLASSES.ZOOM_ENABLED);
setTimeout(() => { setTimeout(() => {
this.ws_.disable(); this.ws_.disable();
this.zws_.el.classList.add('in'); this.zws_.el.classList.add('in');
const wrapCSS = window.getComputedStyle(this.zws_.grid); const wrapCSS = window.getComputedStyle(this.zws_.grid);
const scrollingElement = document.scrollingElement || document.body;
scrollTo(actualCurrent.parentNode.offsetTop scrollTo(actualCurrent.parentNode.offsetTop
+ DOM.parseSize(wrapCSS.paddingTop), 50, () => {}, document.body); + DOM.parseSize(wrapCSS.paddingTop), 50, () => {}, scrollingElement);
}, 50); }, 50);
} }
@@ -166,7 +174,7 @@ export default class Zoom {
this.ws_.enable(); this.ws_.enable();
this.disable(); this.disable();
this.isZoomed_ = false; this.isZoomed_ = false;
document.body.style.overflow = ''; document.documentElement.classList.remove(CLASSES.ZOOM_ENABLED);
}, 400); }, 400);
} }

8
src/scss/_base.scss
View File

@@ -14,6 +14,14 @@ webslides.js will add .ws-ready automatically. Don't worry :) -- */
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
} }
&.ws-ready-zoom {
overflow: visible;
body {
overflow: auto;
}
}
} }
#webslides { #webslides {