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

Changes in slides index, adding padding, current slide, ...

Browse Source
This commit is contained in:
Luis
2017-06-21 16:48:35 +02:00
parent e7329433ff
commit 5b45de0b79
6 changed files with 100 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,9 @@ const CLASSES = {
ZOOM: 'grid',
DIV: 'column',
WRAP: 'wrap-zoom',
WRAP_CONTAINER: 'wrap'
WRAP_CONTAINER: 'wrap',
CURRENT: 'current',
SLIDE: 'slide'
};
const ID = 'webslides-zoomed';
@@ -80,6 +82,7 @@ export default class Zoom {
this.zws_.grid.appendChild(s_);
return new Slide(s_, i);
});
DOM.hide(this.zws_.el);
DOM.after(this.zws_.el, this.ws_.el);
@@ -95,6 +98,7 @@ export default class Zoom {
// Wraps the slide around a container
const wrap = DOM.wrap(elem.el, 'div');
wrap.className = CLASSES.WRAP;
wrap.setAttribute('id', `zoomed-${elem.el.getAttribute('id')}`);
// Slide container, need due to flexbox styles
const div = DOM.wrap(wrap, 'div');
div.className = CLASSES.DIV;
@@ -165,6 +169,17 @@ export default class Zoom {
*/
zoomIn() {
DOM.show(this.zws_.el);
const currentId = this.ws_.el
.querySelector(`.${CLASSES.SLIDE}.${CLASSES.CURRENT}`)
.getAttribute('id');
const zoomedCurrent = this.zws_.el
.querySelector(`.${CLASSES.WRAP}.${CLASSES.CURRENT}`);
if (zoomedCurrent) {
zoomedCurrent.classList.remove(CLASSES.CURRENT);
}
this.zws_.el
.querySelector(`#zoomed-${currentId}`)
.classList.add(CLASSES.CURRENT);
setTimeout(() => {
this.ws_.disable();
}, 400);

1
src/scss/_vars.scss
View File

@@ -58,3 +58,4 @@ $link-color: $royal-blue !default;
$link-color-secondary: $cardinal !default;
$link-hover: $dodger-blue !default;
$hr-bg: radial-gradient(ellipse at center, rgba(0, 20, 80, .2) 0, rgba(255, 255, 255, 0) 75%) !default;
$current-zoomed-slide-shadow: 0 0 7px rgba(0, 187, 255, .5);

7
src/scss/modules/_zoom.scss
View File

@@ -14,8 +14,7 @@
> .wrap {
@media (min-width: 1024px) {
padding-bottom: 12rem;
padding-top: 12rem;
padding: 12rem;
width: 100%;
}
}
@@ -37,6 +36,10 @@
}
}
> .wrap-zoom.current {
box-shadow: $current-zoomed-slide-shadow;
}
> .wrap-zoom > .zoom-layer {
background: transparent;
cursor: pointer;

40
static/css/webslides.css
View File

@@ -1,7 +1,7 @@
/*!
* Name: WebSlides
* Version: 1.3.1
* Date: 2017-06-02
* Date: 2017-06-21
* Description: Making HTML presentations easy
* URL: https://github.com/webslides/webslides#readme
* Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -823,6 +823,7 @@ ol > li {
li li {
font-size: 100%; }
/*== List .description (Product/Specs) === */
ul.description {
padding: 0; }
ul.description + p {
@@ -856,12 +857,6 @@ h4 svg {
.try svg {
margin-top: -.4rem; }
svg[class^='fa-'] {
display: inline-block;
height: 1em;
vertical-align: middle;
width: 1em; }
h1 {
font-size: 4rem;
line-height: 5.6rem; }
@@ -1035,6 +1030,7 @@ h3 + img {
font-size: 2.4rem;
line-height: 4rem; }
/*== 2.1. Headings with background ==*/
h1[class*='bg-'] {
padding: 2.4rem; }
@@ -1064,15 +1060,18 @@ h2 [class*='bg-'],
h3 [class*='bg-'] {
padding: .4rem .8rem; }
/*== 2.2. Typography Classes = .text- == */
.text-intro,
[class*='content-'] p {
font-size: 2.4rem;
line-height: 4rem; }
/* -- Serif -- */
.text-serif,
h1 span {
font-family: 'Maitree', times, serif; }
/* -- h1,h2... Promo/Landings -- */
.text-landing {
letter-spacing: .4rem;
text-transform: uppercase; }
@@ -1080,6 +1079,7 @@ h1 span {
.text-landing {
letter-spacing: 1.6rem; } }
/* -- Subtitle (Before h1, h2) p.subtitle + h1/h2 */
.text-subtitle {
letter-spacing: .2rem;
margin-bottom: 0;
@@ -1097,6 +1097,7 @@ h1 span {
.text-lowercase {
text-transform: lowercase; }
/* -- Emoji (you'll love this) -- */
.text-emoji {
font-size: 6.8rem;
line-height: 8.8rem; }
@@ -1105,6 +1106,7 @@ h1 span {
font-size: 12.8rem;
line-height: 16rem; } }
/* -- Numbers (results, sales... 23,478,289 iphones) -- */
.text-data {
font-size: 6.4rem;
line-height: 8rem;
@@ -1120,6 +1122,7 @@ h1 span {
text-transform: uppercase;
width: 12.8rem; }
/* -- Magazine Two Columns -- */
@media (min-width: 768px) {
.text-cols {
-webkit-column-count: 2;
@@ -1139,6 +1142,7 @@ h1 span {
padding: 0;
text-transform: uppercase; }
/* -- Heading with border -- */
.text-context {
position: relative; }
.text-context:before {
@@ -1152,6 +1156,7 @@ h1 span {
.text-context.text-uppercase {
letter-spacing: .1rem; }
/* -- Separator/Symbols (stars ***...) -- */
.text-symbols {
font-weight: 600;
letter-spacing: .8rem;
@@ -1174,6 +1179,7 @@ h1 span {
.text-separator:before {
margin-top: 1.2rem; } }
/* -- Pull Quote (Right/Left) -- */
[class*='text-pull'] {
font-size: 2.4rem;
font-weight: 400;
@@ -1208,6 +1214,12 @@ figure[class*='text-pull-'] {
margin-top: .8rem;
padding-top: 0; }
/* -- Interviews (Questions & Answers) --- */
/* -- <dl class="text-interview">
<dt>name</dt>
<dd><p>question or answer</p>
</dd>
--- */
.text-interview dt {
font-weight: 600;
margin-bottom: 0;
@@ -1221,29 +1233,37 @@ figure[class*='text-pull-'] {
white-space: nowrap;
width: 30%; } }
/* -- Info Messages (error, warning, success... -- */
.text-info {
font-size: 1.6rem;
line-height: 2.4rem; }
/*=========================================
2.1. San Francisco Font (Apple's new font)
=========================================== */
.text-apple,
.bg-apple {
font-family: 'San Francisco', helvetica, arial, sans-serif; }
/* Ultra Light */
@font-face {
font-family: 'San Francisco';
font-weight: 100;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2"); }
/* Thin */
@font-face {
font-family: 'San Francisco';
font-weight: 200;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2"); }
/* Regular */
@font-face {
font-family: 'San Francisco';
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff2"); }
/* Bold */
@font-face {
font-family: 'San Francisco';
font-weight: bold;
@@ -2901,8 +2921,7 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
z-index: 2; }
@media (min-width: 1024px) {
#webslides-zoomed > .wrap {
padding-bottom: 12rem;
padding-top: 12rem;
padding: 12rem;
width: 100%; } }
#webslides-zoomed > .wrap > .grid > .column {
-ms-flex-item-align: auto;
@@ -2923,6 +2942,9 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
-webkit-transform: scale(1.02);
transform: scale(1.02);
z-index: 2; }
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom.current {
-webkit-box-shadow: 0 0 7px rgba(0, 187, 255, 0.5);
box-shadow: 0 0 7px rgba(0, 187, 255, 0.5); }
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom > .zoom-layer {
background: transparent;
cursor: pointer;

52
static/js/webslides.js
View File

@@ -1,7 +1,7 @@
/*!
* Name: WebSlides
* Version: 1.3.1
* Date: 2017-06-02
* Date: 2017-06-21
* Description: Making HTML presentations easy
* URL: https://github.com/webslides/webslides#readme
* Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -194,7 +194,7 @@ var DOM = function () {
return animationEvent;
}
animationEvent = '';
animationEvent = 'animationend';
var el = optEl || document.createElement('ws');
var animations = {
@@ -205,11 +205,12 @@ var DOM = function () {
};
var animationNames = Object.keys(animations);
for (var i = 0, length = animationNames.length; i < length && !animationEvent; i++) {
for (var i = 0, length = animationNames.length; i < length; i++) {
var animationName = animationNames[i];
if (typeof el.style[animationName] !== 'undefined') {
animationEvent = animations[animationName];
break;
}
}
@@ -571,7 +572,8 @@ var Keys = {
DOWN: 40,
PLUS: [107, 171],
MINUS: [109, 173],
ESCAPE: 27
ESCAPE: 27,
F: 70
};
/* harmony default export */ __webpack_exports__["a"] = (Keys);
@@ -1099,7 +1101,7 @@ var WebSlides = function () {
}, {
key: 'isValidIndexSlide_',
value: function isValidIndexSlide_(i) {
return i >= 0 && i < this.maxSlide_;
return typeof i === 'number' && i >= 0 && i < this.maxSlide_;
}
/**
@@ -1122,6 +1124,7 @@ var WebSlides = function () {
// Keeping the order
if (slideNumber !== 0) {
var i = 0;
while (i < slideNumber) {
this.slides[i].moveAfterLast();
i++;
@@ -1172,6 +1175,28 @@ var WebSlides = function () {
return this.el.classList.contains(CLASSES.DISABLED);
}
/**
* Puts the browser into fullscreen
*/
}, {
key: 'fullscreen',
value: function fullscreen() {
var el = document.documentElement;
var isFullscreen = document.fullscreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullScreenElement;
if (!isFullscreen) {
/* istanbul ignore next hard to test prefixes */
var requestFullscreen = el.requestFullscreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
requestFullscreen.call(el);
} else {
/* istanbul ignore next hard to test prefixes */
var cancelFullscreen = document.exitFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.msExitFullscreen;
cancelFullscreen.call(document);
}
}
/**
* Registers a plugin to be loaded when the instance is created. It allows
* (on purpose) to replace default plugins.
@@ -1627,6 +1652,9 @@ var Keyboard = function () {
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].RIGHT:
method = !this.ws_.isVertical ? this.ws_.goNext : null;
break;
case __WEBPACK_IMPORTED_MODULE_0__utils_keys__["a" /* default */].F:
method = this.ws_.fullscreen;
break;
}
if (method) {
@@ -2691,7 +2719,9 @@ var CLASSES = {
ZOOM: 'grid',
DIV: 'column',
WRAP: 'wrap-zoom',
WRAP_CONTAINER: 'wrap'
WRAP_CONTAINER: 'wrap',
CURRENT: 'current',
SLIDE: 'slide'
};
var ID = 'webslides-zoomed';
@@ -2777,6 +2807,7 @@ var Zoom = function () {
_this.zws_.grid.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);
@@ -2799,10 +2830,11 @@ var Zoom = function () {
// Wraps the slide around a container
var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div');
wrap.className = CLASSES.WRAP;
wrap.setAttribute('id', 'zoomed-' + elem.el.getAttribute('id'));
// 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
// Adding some layer for controlling click events
var divLayer = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('div');
divLayer.className = 'zoom-layer';
divLayer.addEventListener('click', function (e) {
@@ -2876,6 +2908,12 @@ var Zoom = function () {
var _this3 = this;
__WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el);
var currentId = this.ws_.el.querySelector('.' + CLASSES.SLIDE + '.' + CLASSES.CURRENT).getAttribute('id');
var zoomedCurrent = this.zws_.el.querySelector('.' + CLASSES.WRAP + '.' + CLASSES.CURRENT);
if (zoomedCurrent) {
zoomedCurrent.classList.remove(CLASSES.CURRENT);
}
this.zws_.el.querySelector('#zoomed-' + currentId).classList.add(CLASSES.CURRENT);
setTimeout(function () {
_this3.ws_.disable();
}, 400);

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

File diff suppressed because one or more lines are too long