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

src/js/plugins/zoom.js

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

src/scss/_vars.scss

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

src/scss/modules/_zoom.scss

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

static/css/webslides.css

@@ -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: 12rem;
-      padding-top: 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;

static/js/webslides.js

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