Sass Slides index

src/js/plugins/zoom.js

@@ -164,12 +164,8 @@ export default class Zoom {
    * Zoom In the slider, scales the slides and uses a grid layout to show them.
    */
   zoomIn() {
-    this.ws_.el.classList.add('zooming', 'in');
-    this.zws_.el.classList.add('zooming', 'in');
     DOM.show(this.zws_.el);
     setTimeout(() => {
-      this.ws_.el.classList.remove('zooming', 'in');
-      this.zws_.el.classList.remove('zooming', 'in');
       this.ws_.disable();
     }, 400);
     this.isZoomed_ = true;
@@ -180,11 +176,7 @@ export default class Zoom {
    * Zoom Out the slider, remove scale from the slides.
    */
   zoomOut() {
-    this.ws_.el.classList.add('zooming', 'out');
-    this.zws_.el.classList.add('zooming', 'out');
     setTimeout(() => {
-      this.ws_.el.classList.remove('zooming', 'out');
-      this.zws_.el.classList.remove('zooming', 'out');
       DOM.hide(this.zws_.el);
       this.ws_.enable();
     }, 400);

src/scss/_color.scss

@@ -687,3 +687,17 @@ form .flexblock li:hover {
 footer[role='contentinfo'] {
   background-color: $white;
 }
+
+#webslides-zoomed .column > .wrap-zoom {
+  background-color: $catskill-white;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 8px rgba(0, 0, 0, .04);
+  color: $mine-shaft;
+
+  &:hover {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 8px rgba(0, 0, 0, .08);
+  }
+}
+
+.text-slide-number {
+  color: #abc;
+ }

src/scss/full.scss

@@ -39,6 +39,7 @@
 	16. Safari Bug (flex-wrap)
 	17. Print
   18. Colors
+  19. Slidex index (aka zoom)
 ----------------------------------------------------------------------------------- */
 
 @import 'vars';
@@ -93,3 +94,5 @@
 @import 'modules/print';
 
 @import 'color';
+
+@import 'modules/zoom';

src/scss/modules/_zoom.scss

@@ -0,0 +1,94 @@
+/*==============================================
+19. Slides Index: Thumbnails navigation gallery
+================================================ */
+
+#webslides-zoomed {
+  align-content: flex-start;
+  align-items: flex-start;
+  background: transparent;
+  flex-direction: row;
+  justify-content: flex-start;
+  min-height: 100vh;
+  position: relative;
+  z-index: 2;
+
+  > .wrap {
+    @media (min-width: 1024px) {
+      padding-bottom: 12rem;
+      padding-top: 12rem;
+      width: 100%;
+    }
+  }
+
+  > .wrap > .grid > .column {
+    align-self: auto;
+    flex: 0 1 auto;
+    order: 0;
+    width: 25%;
+
+    > .wrap-zoom {
+      overflow: hidden;
+      position: relative;
+      transition: .3s;
+
+      &:hover {
+        transform: scale(1.02);
+        z-index: 2;
+      }
+    }
+
+    > .wrap-zoom > .zoom-layer {
+      background: transparent;
+      cursor: pointer;
+      height: 100%;
+      position: absolute;
+      width: 100%;
+    }
+  }
+
+  .column > .wrap-zoom > .slide {
+    clip: rect(0 auto auto 0);
+    display: flex !important; //  sass-lint:disable-line no-important
+    left: 0;
+    position: absolute;
+    top: 0;
+    transform: scale(.25) translate(-150%, -150vh);
+
+    @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
+      transform: scale(.5) translate(-50%, -50%);
+    }
+
+    @media (max-aspect-ratio: 2 / 3) {
+      transform: scale(.5) translate(-50%, -50%);
+    }
+  }
+
+  #webslides-zoomed .column {
+    @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
+      width: 50%;
+    }
+
+    @media (max-aspect-ratio: 2 / 3) {
+      width: 100%;
+    }
+  }
+}
+
+.text-slide-number {
+  display: inline-block;
+  margin: .8rem auto;
+  text-align: center;
+}
+
+#webslides {
+  &.disabled,
+  &.zooming {
+    position: fixed;
+    width: 100%;
+    z-index: 0;
+  }
+
+  &.disabled {
+    filter: blur(10px);
+  }
+}

static/css/webslides.css

@@ -48,6 +48,7 @@
 	16. Safari Bug (flex-wrap)
 	17. Print
   18. Colors
+  19. Slidex index (aka zoom)
 ----------------------------------------------------------------------------------- */
 /*
 =========================================
@@ -3485,3 +3486,104 @@ form .flexblock li:hover {
 
 footer[role='contentinfo'] {
   background-color: #fff; }
+
+#webslides-zoomed .column > .wrap-zoom {
+  background-color: #f7f9fb;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
+  color: #333; }
+  #webslides-zoomed .column > .wrap-zoom:hover {
+    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
+            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08); }
+
+.text-slide-number {
+  color: #abc; }
+
+/*==============================================
+19. Slides Index: Thumbnails navigation gallery
+================================================ */
+#webslides-zoomed {
+  -ms-flex-line-pack: start;
+      align-content: flex-start;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  background: transparent;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  min-height: 100vh;
+  position: relative;
+  z-index: 2; }
+  @media (min-width: 1024px) {
+    #webslides-zoomed > .wrap {
+      padding-bottom: 12rem;
+      padding-top: 12rem;
+      width: 100%; } }
+  #webslides-zoomed > .wrap > .grid > .column {
+    -ms-flex-item-align: auto;
+        align-self: auto;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 1 auto;
+            flex: 0 1 auto;
+    -webkit-box-ordinal-group: 1;
+        -ms-flex-order: 0;
+            order: 0;
+    width: 25%; }
+    #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
+      overflow: hidden;
+      position: relative;
+      -webkit-transition: .3s;
+      transition: .3s; }
+      #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover {
+        -webkit-transform: scale(1.02);
+                transform: scale(1.02);
+        z-index: 2; }
+    #webslides-zoomed > .wrap > .grid > .column > .wrap-zoom > .zoom-layer {
+      background: transparent;
+      cursor: pointer;
+      height: 100%;
+      position: absolute;
+      width: 100%; }
+  #webslides-zoomed .column > .wrap-zoom > .slide {
+    clip: rect(0 auto auto 0);
+    display: -webkit-box !important;
+    display: -ms-flexbox !important;
+    display: flex !important;
+    left: 0;
+    position: absolute;
+    top: 0;
+    -webkit-transform: scale(0.25) translate(-150%, -150vh);
+            transform: scale(0.25) translate(-150%, -150vh); }
+    @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
+      #webslides-zoomed .column > .wrap-zoom > .slide {
+        -webkit-transform: scale(0.5) translate(-50%, -50%);
+                transform: scale(0.5) translate(-50%, -50%); } }
+    @media (max-aspect-ratio: 2 / 3) {
+      #webslides-zoomed .column > .wrap-zoom > .slide {
+        -webkit-transform: scale(0.5) translate(-50%, -50%);
+                transform: scale(0.5) translate(-50%, -50%); } }
+  @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) {
+    #webslides-zoomed #webslides-zoomed .column {
+      width: 50%; } }
+  @media (max-aspect-ratio: 2 / 3) {
+    #webslides-zoomed #webslides-zoomed .column {
+      width: 100%; } }
+
+.text-slide-number {
+  display: inline-block;
+  margin: .8rem auto;
+  text-align: center; }
+
+#webslides.disabled, #webslides.zooming {
+  position: fixed;
+  width: 100%;
+  z-index: 0; }
+
+#webslides.disabled {
+  -webkit-filter: blur(10px);
+          filter: blur(10px); }

static/js/webslides.js

@@ -1,7 +1,7 @@
 /*!
  * Name: WebSlides
  * Version: 1.3.1
- * Date: 2017-05-31
+ * Date: 2017-06-01
  * Description: Making HTML presentations easy
  * URL: https://github.com/webslides/webslides#readme
  * Credits: @jlantunez, @LuisSacristan, @Belelros
@@ -2875,12 +2875,8 @@ var Zoom = function () {
     value: function zoomIn() {
       var _this3 = this;
 
-      this.ws_.el.classList.add('zooming', 'in');
-      this.zws_.el.classList.add('zooming', 'in');
       __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].show(this.zws_.el);
       setTimeout(function () {
-        _this3.ws_.el.classList.remove('zooming', 'in');
-        _this3.zws_.el.classList.remove('zooming', 'in');
         _this3.ws_.disable();
       }, 400);
       this.isZoomed_ = true;
@@ -2896,11 +2892,7 @@ var Zoom = function () {
     value: function zoomOut() {
       var _this4 = this;
 
-      this.ws_.el.classList.add('zooming', 'out');
-      this.zws_.el.classList.add('zooming', 'out');
       setTimeout(function () {
-        _this4.ws_.el.classList.remove('zooming', 'out');
-        _this4.zws_.el.classList.remove('zooming', 'out');
         __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].hide(_this4.zws_.el);
         _this4.ws_.enable();
       }, 400);