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

Zoom responsive

Browse Source
This commit is contained in:
Luis
2017-04-12 21:25:20 +02:00
parent 052772be98
commit b41cf41ac9
5 changed files with 74 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc
View File

@@ -8,7 +8,7 @@
}, },
"rules": { "rules": {
"no-cond-assign": 0, "no-cond-assign": 0,
"no-console": 0, "no-console": 2,
"no-constant-condition": 2, "no-constant-condition": 2,
"no-control-regex": 2, "no-control-regex": 2,
"no-debugger": 2, "no-debugger": 2,

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

@@ -95,19 +95,15 @@ export default class Zoom {
divLayer.addEventListener('click', e => { divLayer.addEventListener('click', e => {
this.zoomOut(); this.zoomOut();
this.ws_.goToSlide(elem.i); this.ws_.goToSlide(elem.i);
e.stopPropagation();
}); });
wrap.appendChild(divLayer); wrap.appendChild(divLayer);
// Slide number // Slide number
const slideNumber = document.createElement('span'); const slideNumber = document.createElement('span');
slideNumber.className = 'slide-number'; slideNumber.className = 'slide-number';
slideNumber.textContent = `${elem.i+1} / ${this.zws_.slides.length}`; slideNumber.textContent = `${elem.i+1}`;
div.appendChild(slideNumber); div.appendChild(slideNumber);
// Zoom out when click in slide "border" // Zoom out when click in slide "border"
div.addEventListener('click', e => { div.addEventListener('click', this.ws_.toggleZoom);
this.ws_.toggleZoom();
e.stopPropagation();
});
this.setSizes_(div, wrap, elem); this.setSizes_(div, wrap, elem);
} }
@@ -130,11 +126,20 @@ export default class Zoom {
const scale = divCSS.width.includes('%') ? const scale = divCSS.width.includes('%') ?
100 / DOM.parseSize(divCSS.width) : 100 / DOM.parseSize(divCSS.width) :
window.innerWidth / DOM.parseSize(divCSS.width); window.innerWidth / DOM.parseSize(divCSS.width);
elem.el.style.width = `${window.innerWidth - marginW * scale}px`; if (scale == 1) {
elem.el.style.height = `${window.innerHeight - marginH * scale}px`; // If the scale is 100% means it is mobile
const wsW = this.ws_.el.clientWidth;
// Because of flexbox, wrap height is required elem.el.style.width = `${(wsW - marginW) * 2}px`;
wrap.style.height = `${window.innerHeight / scale}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`;
}
} }
/** /**

58
static/css/base.css
View File

@@ -705,7 +705,7 @@ footer,
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
/* -- Responsive background video /* -- Responsive background video
https://fvsch.com/code/video-background/ -- */ https://fvsch.com/code/video-background/ -- */
.fullscreen > .embed { .fullscreen > .embed {
@@ -723,18 +723,18 @@ https://fvsch.com/code/video-background/ -- */
.fullscreen > .embed > iframe, .fullscreen > .embed > iframe,
.fullscreen > .embed > object, .fullscreen > .embed > object,
.fullscreen > .embed > embed, .fullscreen > .embed > embed,
.fullscreen > .embed > video { .fullscreen > .embed > video {
height: 300%; height: 300%;
top: -100%; top: -100%;
} }
} }
@media (max-aspect-ratio: 16/9) { @media (max-aspect-ratio: 16/9) {
.fullscreen > .embed > iframe, .fullscreen > .embed > iframe,
.fullscreen > .embed > object, .fullscreen > .embed > object,
.fullscreen > .embed > embed, .fullscreen > .embed > embed,
.fullscreen > .embed > video { .fullscreen > .embed > video {
width: 300%; width: 300%;
left: -100%; left: -100%;
} }
} }
/* 2. If supporting object-fit, overriding (1): */ /* 2. If supporting object-fit, overriding (1): */
@@ -743,9 +743,9 @@ https://fvsch.com/code/video-background/ -- */
.fullscreen > .embed > object, .fullscreen > .embed > object,
.fullscreen > .embed > embed, .fullscreen > .embed > embed,
.fullscreen > .embed > video { .fullscreen > .embed > video {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
@@ -3227,14 +3227,14 @@ button:disabled:hover {
} }
/*========================================= /*=========================================
15. Longform 15. Longform
=========================================== */ =========================================== */
/* -- Posts = .wrap.longform -- */ /* -- Posts = .wrap.longform -- */
.longform { .longform {
width: 72rem; width: 72rem;
/* Why 72rem=720px? /* Why 72rem=720px?
90-95 characters per line = better reading speed */ 90-95 characters per line = better reading speed */
} }
.longform .alignleft, .longform .alignright { .longform .alignleft, .longform .alignright {
@@ -3351,12 +3351,12 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
} }
#webslides-zoomed.grid > .column { #webslides-zoomed.grid > .column {
width: 25%; width: 25%;
-webkit-order: 0; -webkit-order: 0;
order: 0; order: 0;
-webkit-flex: 0 1 auto; -webkit-flex: 0 1 auto;
flex: 0 1 auto; flex: 0 1 auto;
-webkit-align-self: auto; -webkit-align-self: auto;
align-self: auto; align-self: auto;
} }
#webslides-zoomed.grid > .column > .wrap-zoom > .slide { #webslides-zoomed.grid > .column > .wrap-zoom > .slide {
@@ -3376,7 +3376,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
cursor: pointer; cursor: pointer;
} }
#webslides-zoomed.grid > .column > .wrap-zoom:hover { #webslides-zoomed.grid > .column > .wrap-zoom:hover {
transform: scale(1.02); transform: scale(1.02);
} }
.text-slide-number { .text-slide-number {
@@ -3385,4 +3385,22 @@ transform: scale(1.02);
/*border-radius: .3rem; /*border-radius: .3rem;
padding: 0 1.6rem;*/ padding: 0 1.6rem;*/
margin: .8rem auto; margin: .8rem auto;
} }
@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);
}
}

29
static/js/webslides.js
View File

@@ -1,7 +1,7 @@
/*! /*!
* Name: WebSlides * Name: WebSlides
* Version: 1.2.1 * Version: 1.2.1
* Date: 2017-04-09 * Date: 2017-04-12
* Description: Making HTML presentations easy * Description: Making HTML presentations easy
* URL: https://github.com/webslides/webslides#readme * URL: https://github.com/webslides/webslides#readme
* Credits: @jlantunez, @LuisSacristan, @Belelros * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -2571,19 +2571,15 @@ var Zoom = function () {
divLayer.addEventListener('click', function (e) { divLayer.addEventListener('click', function (e) {
_this2.zoomOut(); _this2.zoomOut();
_this2.ws_.goToSlide(elem.i); _this2.ws_.goToSlide(elem.i);
e.stopPropagation();
}); });
wrap.appendChild(divLayer); wrap.appendChild(divLayer);
// Slide number // Slide number
var slideNumber = document.createElement('span'); var slideNumber = document.createElement('span');
slideNumber.className = 'slide-number'; slideNumber.className = 'slide-number';
slideNumber.textContent = elem.i + 1 + ' / ' + this.zws_.slides.length; slideNumber.textContent = '' + (elem.i + 1);
div.appendChild(slideNumber); div.appendChild(slideNumber);
// Zoom out when click in slide "border" // Zoom out when click in slide "border"
div.addEventListener('click', function (e) { div.addEventListener('click', this.ws_.toggleZoom);
_this2.ws_.toggleZoom();
e.stopPropagation();
});
this.setSizes_(div, wrap, elem); this.setSizes_(div, wrap, elem);
} }
@@ -2605,11 +2601,20 @@ var Zoom = function () {
// Sets element size: window size - relative margins // 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); 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'; if (scale == 1) {
elem.el.style.height = window.innerHeight - marginH * scale + 'px'; // If the scale is 100% means it is mobile
var wsW = this.ws_.el.clientWidth;
// Because of flexbox, wrap height is required elem.el.style.width = (wsW - marginW) * 2 + 'px';
wrap.style.height = window.innerHeight / scale + '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';
}
} }
/** /**

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

File diff suppressed because one or more lines are too long