From 708d5bfda6edf7e024ce4cb650ec469dc173c322 Mon Sep 17 00:00:00 2001 From: Luis Date: Sun, 9 Apr 2017 16:37:25 +0200 Subject: [PATCH] Zoom mode: unstyled slide number and zoom out when click outside the slide --- src/js/plugins/zoom.js | 47 +- static/js/webslides.js | 60 +- static/js/webslides.min.js | 4 +- tests/classes.html | 1940 ------------------------------------ tests/media.html | 722 -------------- tests/test.css | 29 - tests/test.js | 36 - 7 files changed, 78 insertions(+), 2760 deletions(-) delete mode 100644 tests/classes.html delete mode 100644 tests/media.html delete mode 100644 tests/test.css delete mode 100644 tests/test.js diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index 624e678..f7c0cbc 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -75,22 +75,41 @@ export default class Zoom { DOM.after(this.zws_.el, this.ws_.el); // Creates the container for each slide - this.zws_.slides.forEach( elem => { - const wrap = DOM.wrap(elem.el, 'div'); - wrap.className = CLASSES.WRAP; - const div = DOM.wrap(wrap, 'div'); - div.className = CLASSES.DIV; - // Adding some layer for controling click events - const divLayer = document.createElement('div'); - divLayer.className = 'zoom-layer'; - divLayer.addEventListener('click', e => { - this.zoomOut(); - this.ws_.goToSlide(elem.i); - }); - wrap.appendChild(divLayer); + this.zws_.slides.forEach( elem => this.createSlideBlock_(elem)); + } - this.setSizes_(div, wrap, elem); + /** + * Creates a block structure around the slide + * @param {Element} elem slide element + */ + createSlideBlock_(elem) { + // Wraps the slide around a container + const wrap = DOM.wrap(elem.el, 'div'); + wrap.className = CLASSES.WRAP; + // Slide container, need due to flexbox styles + const div = DOM.wrap(wrap, 'div'); + div.className = CLASSES.DIV; + // Adding some layer for controling click events + const divLayer = document.createElement('div'); + divLayer.className = 'zoom-layer'; + divLayer.addEventListener('click', e => { + this.zoomOut(); + this.ws_.goToSlide(elem.i); + e.stopPropagation(); }); + wrap.appendChild(divLayer); + // Slide number + const slideNumber = document.createElement('span'); + slideNumber.className = 'slide-number'; + slideNumber.textContent = `${elem.i+1} / ${this.zws_.slides.length}`; + div.appendChild(slideNumber); + // Zoom out when click in slide "border" + div.addEventListener('click', e => { + this.ws_.toggleZoom(); + e.stopPropagation(); + }); + + this.setSizes_(div, wrap, elem); } /** diff --git a/static/js/webslides.js b/static/js/webslides.js index a26ce12..bc5fbf7 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-08 + * Date: 2017-04-09 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -2545,23 +2545,49 @@ var Zoom = function () { // Creates the container for each slide this.zws_.slides.forEach(function (elem) { - var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div'); - wrap.className = CLASSES.WRAP; - var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div'); - div.className = CLASSES.DIV; - // Adding some layer for controling click events - var divLayer = document.createElement('div'); - divLayer.className = 'zoom-layer'; - divLayer.addEventListener('click', function (e) { - _this.zoomOut(); - _this.ws_.goToSlide(elem.i); - }); - wrap.appendChild(divLayer); - - _this.setSizes_(div, wrap, elem); + return _this.createSlideBlock_(elem); }); } + /** + * Creates a block structure around the slide + * @param {Element} elem slide element + */ + + }, { + key: 'createSlideBlock_', + value: function createSlideBlock_(elem) { + var _this2 = this; + + // Wraps the slide around a container + var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div'); + wrap.className = CLASSES.WRAP; + // 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 + var divLayer = document.createElement('div'); + divLayer.className = 'zoom-layer'; + divLayer.addEventListener('click', function (e) { + _this2.zoomOut(); + _this2.ws_.goToSlide(elem.i); + e.stopPropagation(); + }); + wrap.appendChild(divLayer); + // Slide number + var slideNumber = document.createElement('span'); + slideNumber.className = 'slide-number'; + slideNumber.textContent = elem.i + 1 + ' / ' + this.zws_.slides.length; + div.appendChild(slideNumber); + // Zoom out when click in slide "border" + div.addEventListener('click', function (e) { + _this2.ws_.toggleZoom(); + e.stopPropagation(); + }); + + this.setSizes_(div, wrap, elem); + } + /** * Sets layers size * @param {Element} div flexbox element @@ -2634,12 +2660,12 @@ var Zoom = function () { }, { key: 'onWindowResize', value: function onWindowResize(ev) { - var _this2 = this; + var _this3 = this; this.zws_.slides.forEach(function (elem) { var wrap = elem.el.parentElement; var div = wrap.parentElement; - _this2.setSizes_(div, wrap, elem); + _this3.setSizes_(div, wrap, elem); }); } }]); diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 0b50cef..b53b12e 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,9 +1,9 @@ /*! * Name: WebSlides * Version: 1.2.1 - * Date: 2017-04-08 + * Date: 2017-04-09 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/static/js/",t(t.s=5)}([function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(18),a=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=document.createElement(e);return i.id=t,n&&(i.textContent=n),i}},{key:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");this.isMoving=!1,this.slides=null,this.currentSlideI_=-1,this.currentSlide_=null,this.maxSlide_=0,this.isVertical=this.el.classList.contains(u.VERTICAL),this.plugins={},this.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var n=e[t];a.a.isCandidate(n)||this.el.removeChild(n)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var n=c[t];e.plugins[t]=new n(e)})}},{key:"onInit_",value:function(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.a.toArray(this.el.childNodes).map(function(e,t){return new a.a(e,t)}),this.maxSlide_=this.slides.length}},{key:"goToSlide",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isValidIndexSlide_(e)&&!this.isMoving&&this.currentSlideI_!==e){this.isMoving=!0;var n=!1;null!==t?n=t:this.currentSlideI_>=0&&(n=e>this.currentSlideI_);var i=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(n,i,this.onSlideChange_):this.scrollTransitionToSlide_(n,i,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,i){var o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.a.fireEvent(this.el,"ws:slide-change",{slides:this.maxSlide_,currentSlide0:this.currentSlideI_,currentSlide:this.currentSlideI_+1})}},{key:"goNext",value:function(){var e=this.currentSlideI_+1;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;e=this.maxSlide_-1}this.goToSlide(e,!1)}},{key:"isValidIndexSlide_",value:function(e){return e>=0&&e=this.maxSlide_)&&(e=0),0!==e)for(var t=0;t0&&(this.interval_=setInterval(this.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=s},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=r},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*i),l1&&void 0!==arguments[1]?arguments[1]:"",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",i=document.createElement(e);return i.id=t,n&&(i.textContent=n),i}},{key:"once",value:function(e,t,n){var i=function i(o){o.target===e&&(e.removeEventListener(t,i),n(o))};e.addEventListener(t,i,!1)}},{key:"getTransitionEvent",value:function(){if(s)return s;for(var e=document.createElement("ws"),t={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(t),i=0,o=n.length;i2&&void 0!==arguments[2]?arguments[2]:{},i=new o.a(t,{detail:n});e.dispatchEvent(i)}},{key:"toArray",value:function(e){return[].slice.call(e)}},{key:"isFocusableElement",value:function(){var e=!1;if(document.activeElement){var t="inherit"!==document.activeElement.contentEditable;e=["INPUT","SELECT","OPTION","TEXTAREA"].indexOf(document.activeElement.tagName)>-1||t}return e}},{key:"parseSize",value:function(e){return Number(e.replace(/[^\d\.]/g,""))}},{key:"wrap",value:function e(t,n){var e=document.createElement(n);return t.parentElement.insertBefore(e,t),e.appendChild(t),e}},{key:"after",value:function(e,t){var n=t.parentNode;n.lastChild==t?n.appendChild(e):n.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(0),a=function(){function e(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},n=t.autoslide,o=void 0!==n&&n,a=t.changeOnClick,s=void 0!==a&&a,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.scrollWait,f=void 0===d?450:d,v=t.slideOffset,y=void 0===v?50:v;if(i(this,e),this.el=document.getElementById("webslides"),!this.el)throw new Error("Couldn't find the webslides container!");this.isMoving=!1,this.slides=null,this.currentSlideI_=-1,this.currentSlide_=null,this.maxSlide_=0,this.isVertical=this.el.classList.contains(u.VERTICAL),this.plugins={},this.options={autoslide:o,changeOnClick:s,loop:l,minWheelDelta:h,scrollWait:f,slideOffset:y},this.initialised=!1,this.removeChildren_(),this.grabSlides_(),this.createPlugins_(),this.initSlides_(),this.onInit_()}return l(e,[{key:"removeChildren_",value:function(){for(var e=this.el.childNodes,t=e.length;t--;){var n=e[t];a.a.isCandidate(n)||this.el.removeChild(n)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var n=c[t];e.plugins[t]=new n(e)})}},{key:"onInit_",value:function(){this.initialised=!0,s.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=s.a.toArray(this.el.childNodes).map(function(e,t){return new a.a(e,t)}),this.maxSlide_=this.slides.length}},{key:"goToSlide",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(this.isValidIndexSlide_(e)&&!this.isMoving&&this.currentSlideI_!==e){this.isMoving=!0;var n=!1;null!==t?n=t:this.currentSlideI_>=0&&(n=e>this.currentSlideI_);var i=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(n,i,this.onSlideChange_):this.scrollTransitionToSlide_(n,i,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,i){var o=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),n.i(r.a)(this.currentSlide_.el.offsetTop,0)),n.i(r.a)(t.el.offsetTop,500,function(){o.currentSlide_.hide(),e&&o.currentSlide_.moveAfterLast(),o.el.style.overflow="auto",setTimeout(function(){i.call(o,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,i){var o=this;n.i(r.a)(0,0);var a="slideInRight";e||(t.moveBeforeFirst(),a="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(s.a.once(t.el,s.a.getAnimationEvent(),function(){t.el.classList.remove(a),i.call(o,t)}),t.el.classList.add(a)):i.call(this,t)}},{key:"onSlideChange_",value:function(e){this.currentSlide_&&this.currentSlide_.disable(),this.currentSlide_=e,this.currentSlideI_=e.i,this.currentSlide_.enable(),this.isMoving=!1,s.a.fireEvent(this.el,"ws:slide-change",{slides:this.maxSlide_,currentSlide0:this.currentSlideI_,currentSlide:this.currentSlideI_+1})}},{key:"goNext",value:function(){var e=this.currentSlideI_+1;if(e>=this.maxSlide_){if(!this.options.loop)return;e=0}this.goToSlide(e,!0)}},{key:"goPrev",value:function(){var e=this.currentSlideI_-1;if(e<0){if(!this.options.loop)return;e=this.maxSlide_-1}this.goToSlide(e,!1)}},{key:"isValidIndexSlide_",value:function(e){return e>=0&&e=this.maxSlide_)&&(e=0),0!==e)for(var t=0;t0&&(this.interval_=setInterval(this.ws_.goNext.bind(this.ws_),e))}},{key:"stop",value:function(){this.interval_&&(clearInterval(this.interval_),this.interval_=null)}}]),e}();t.a=s},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;nMath.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=n<0,a){if(i)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(n)>=this.ws_.options.minWheelDelta)&&(a&&this.isGoingLeft_||!a&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=r},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(0),a=n(3),s=function(){function e(e,t){for(var n=0;nMath.abs(t)&&(e<-this.ws_.options.slideOffset?this.ws_.goPrev():e>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"normalizeEventInfo",value:function(e){var t={pageX:0,pageY:0};return void 0!==e.changedTouches?t=e.changedTouches[0]:void 0!==e.originalEvent&&void 0!==e.originalEvent.changedTouches&&(t=e.originalEvent.changedTouches[0]),{x:e.offsetX||e.layerX||t.pageX,y:e.offsetY||e.layerY||t.pageY}}}]),e}();t.a=l},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=n(0),a=n(1),s=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:500,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},i=e-a.scrollTop,s=a.scrollTop;if(!t)return a.scrollTop=e,void n();!function r(l){l+=16;var u=Math.min(1,l/t),c=o.a.swing(u,l*u,e,i,t);a.scrollTop=Math.floor(s+c*i),l - - - - - - - - - WebSlides Tutorial: Classes - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
-
- - - -
- - -
-

WebSlides Tutorial

-

Classes

-

* * *

-

- - - - - Free Download - -

-
- -
-
- -
-

WebSlides Classes

-

Friendly naming conventions.

- -
- -
-
-
-

- - - - CSS Syntax -

-

WebSlides is so easy to understand and love. Baseline: 8.

-
-
    -
  • Typography: .text-landing, .text-subtitle, .text-data, .text-intro...
    • -
  • BG Colors: .bg-primary, .bg-blue,.bg-apple...
    • -
  • BG Images: .background, .background-center-bottom...
    • -
  • Cards: .card-60, .card-50, .card-40...
    • -
  • Sizes: .size-50, .size-40...
    • -
  • Flex Blocks: .flexblock.clients, .flexblock.gallery, .flexblock.metrics...
    • -
-
- -
-
- -
-
-
-

WebSlides is really easy

-

Each parent <section> in the #webslides element is an individual slide.

-

Code is neat, scalable, and well documented. It uses intuitive markup with popular naming conventions. There's no need to overuse classes or nesting. Based on SimpleSlides, by Jenn Schiffer :)

-
- -
- 
<article id="webslides">
-  <!-- Slide 1 -->
-  <section>
-    <h1>Design for trust</h1>
-  </section>
-  <!-- Slide 2 -->
-  <section class="bg-primary">
-    <div class="wrap">
-      <h2>.wrap = container 1200px with fadein</h2>
-    </div>
-  </section>
-</article>
-
-
- -
- -
-

Vertical sliding? <article id="webslides" class="vertical">

-
- -
-
-
- -
-

Header (logo) .alignright

-
-
-
-

Simple CSS Alignments

-

Put content wherever you want.

-
- -
-
-
- iPhone -

img.alignleft

-

img.alignleft.size-50

-

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

-

Image size recommended:
800x600px / 600x450px.

-
- -
-
-
- iPhone -

img.alignright

-

img.alignright.size-50

-

Jobs unveiled the iPhone to the public on January 9, 2007, at the Macworld 2007 convention at the Moscone Center in San Francisco. Apple sold 6.1 million first generation iPhone units over five quarters.

-

Image size recommended:
800x600px / 600x450px.

-
- -
-
-
- iPhone -

img.aligncenter.size-40

-
- -
-
-
-
-

1/9 left top

-

Put content wherever you want. Have less. Do more. Create beautiful solutions.

-

.slide-top and .content-left

-
-
- -
-
-
-
-

2/9 center top

-

In a village of La Mancha, the name of which I have no desire to call to mind,

-

.slide-top and .content-center

-
-
- -
-
-
-
-

3/9 right top

-

there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.

-

.slide-top and .content-right

-
-
- -
-
-
-
-

4/9 left center

-

An olla of rather more beef than mutton, a salad on most nights, scraps on Saturdays,

-

.content-left

-
-
- -
-
-
-
-

5/9 center

-

lentils on Fridays, and a pigeon or so extra on Sundays, made away with three-quarters of his income.

-

.content-center

-
-
- -
-
-
-
-

6/9 right center

-

he rest of it went in a doublet of fine cloth and velvet breeches and shoes to match for holidays,

-

.content-right

-
-
- -
-
-
-
-

7/9 left bottom

-

while on week-days he made a brave figure in his best homespun.

-

.slide-bottom and .content-left

-
-
- -
-
-
-
-

8/9 center bottom

-

He had in his house a housekeeper past forty, a niece under twenty, and a lad for the field and market-place,

-

.slide-bottom and .content-center

-
-
- -
-
-
-
-

9/9 right bottom

-

who used to saddle the hack as well as handle the bill-hook.

-

.slide-bottom and .content-right

-
-
- -
-
- -
-

.grid + .column

-

Basic Grid (auto-fill and equal height).

-
-
-
Why WebSlides?
-

There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.

-

* * *

-
- -
-
WebSlides Files
-
- -
-
How easy is WebSlides?
-

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

-

* * *

-
- -
- -
- -
-
- -
-

.grid.vertical-align + .column

-

Basic Grid (auto-fill and equal height).

-
-
-
Why WebSlides?
-

There're excellent presentation tools out there. WebSlides is about good karma and sharing content. Hypertext, clean code, and beauty as narrative elements.

-

* * *

-
- -
-
WebSlides Files
-
- -
-
How easy is WebSlides?
-

You can create your own presentation instantly. Just a basic knowledge of HTML and CSS is required. Simply choose a demo and customize it.

-

* * *

-
- -
- -
- -
-
-
-

.grid.sm (sidebar + main)

-
-
-
-

.column 1

-

Stendhal syndrome is a psychosomatic disorder that causes rapid heartbeat, dizziness, fainting, confusion and even hallucinations when an individual is exposed to an experience of great personal significance, particularly viewing art.

-
-
-

.column 2

-

The illness is named after the 19th-century French author Stendhal (pseudonym of Marie-Henri Beyle), who described his experience with the phenomenon during his 1817 visit to Florence in his book Naples and Florence: A Journey from Milan to Reggio.

-

When he visited the Basilica of Santa Croce, where Niccolò Machiavelli, Michelangelo and Galileo Galilei are buried, he saw Giotto's frescoes for the first time and was overcome with emotion.

-
-
- -
- -
-
-
-

.grid.ms (main + sidebar)

-
-
-
-

.column 1

-

Beauty is a characteristic of an animal, idea, object, person or place that provides a perceptual experience of pleasure or satisfaction. Beauty is studied as part of aesthetics, culture, social psychology and sociology.

-

An "ideal beauty" is an entity which is admired, or possesses features widely attributed to beauty in a particular culture, for perfection.

-
-
-

.column 2

-

The experience of "beauty" often involves an interpretation of some entity as being in balance and harmony with nature, which may lead to feelings of attraction and emotional well-being.

-
-
- -
- -
-
-
-

.grid.sms (sidebar + main + sidebar)

-
-
-
-

.column 1

-

Information architecture is considered to have been founded by Richard Saul Wurman.

-
-
-

.column 2

-

Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design and architecture to the digital landscape.

-
-
-

.column 3

-

The difficulty in establishing a common definition for "information architecture" arises partly from the term's existence in multiple fields.

-
-
- -
- -
-
-
-
-
- Big Ben, London -
- - - - - David Dibert (Unsplash) - -
-
- -
-

- Discover London -

-

.card-50.bg-white

-
    -
  • - Density: 5,518/km2 -
    • -
  • Population: 8,673,713
    • -
  • Website: visitlondon.com
    • -
-

- There are many reasons to visit London. London has a diverse range of people and cultures, and more than 300 languages are spoken in the region. -

-
- -
- -
- -
-
-
-
-
-

Unsplash -

-

.card-50.bg-white

-

Unsplash is a really cool resource. It is a collection of Creative Commons Zero licensed photos that are really great. -

-
    -
  • - Role: Frontend -
    • -
  • Client: Acme
    • -
  • Year: 2018
    • -
-
- -
- Apple Watch -
- - - - - Crew (Unsplash) - -
-
- -
- -
- -
-
-
-
- Yosemite National Park -
- - - - - Chad Madden (Unsplash) - -
-
- -
-

- What is inspiration? -

-

- In Greek thought, inspiration meant that the poet or artist would go into ecstasy or furor poeticus, the divine frenzy or poetic madness. The Muses are the inspirational goddesses of literature, science, and the arts in Greek mythology. -

-
- -
- -
-
-

Backgrounds

-

<section class="bg-apple">

-
-
-
-

Corporate Backgrounds

-
    -
  • -

    .bg-primary

    - #44d -
    • -
  • -

    .bg-secondary

    - #67d -
    • -
  • -

    .bg-light

    - #edf2f7 -
    • -
  • -

    body

    - #f7f9fb -
    • -
-
-

General Colors

-
    -
  • -

    .bg-black

    - #111 -
    • -
  • -

    .bg-black-blue

    - #123 -
    • -
  • -

    .bg-gray

    - #d5d9e2 -
    • -
  • -

    .bg-white

    - #fff -
    • -
-
- -
-
-
-
    -
  • -

    .bg-red

    - #c23 -
    • -
  • -

    .bg-green

    - #077 -
    • -
  • -

    .bg-blue

    - #346 -
    • -
  • -

    .bg-purple

    - #b6d -
    • -
-
-

Transparent Backgrounds

-
    -
  • -

    .bg-trans-dark

    - rgba(0,0,0 , 0.5) -
    • -
  • -

    .bg-trans-light

    - rgba(255,255,255 , 0.2) -
    • -
-
- -
-
-
-

Gradients

-
    -
  • Horizontal .bg-gradient-h
    • -
  • Radial .bg-gradient-r
    • -
  • Vertical .bg-gradient-v
    • -
-
- -
-
- -
-

Horizontal Gradient

-

section.bg-gradient-h

-
- -
-
-
-

Radial Gradient

-

section.bg-gradient-r

-
- -
-
- -
-

Vertical Gradient

-

section.bg-gradient-v

-
- -
-
-
-

Background Videos

- 
<video class="background-video" autoplay muted loop poster="image.jpg">
-  <source src="video.mp4" type="video/mp4">
-</video>
-

.background-video

-
- -
-
-
-

.background-video

-

WebSlides is the easiest way to make HTML presentations. Inspire and engage.

-
- -
-
-
-

BG Video with Overlay

-

section.bg-blue > .background-video.dark or .light

-
- -
-
-
-
-

Fullscreen Background Images

- 
<section>
-	<span class="background" style="background-image:url('https://source.unsplash.com/UJbHNoVPZW0/')"></span>
-	<section>
-		<h1>Slide</h1>
-	</section>
-</section>
-

How to embed Unsplash photos?

-
-
-

16 Different Backgrounds

-
    -
  • .background (cover)
    • -
  • .background-top (cover)
    • -
  • .background-bottom (cover)
    • -
  • .background.light (opacity)
    • -
  • .background.dark (opacity)
    • -
  • .background-center
    • -
  • .background-center-top
    • -
  • .background-center-bottom
    • -
  • .background-left
    • -
  • .background-left-top
    • -
  • .background-left-bottom
    • -
  • .background-right
    • -
  • .background-right-top
    • -
  • .background-right-bottom
    • -
  • .background-anim (animated)
    • -
  • .background-video (fullscreen)
    • -
-
-
- -
-
- -
-
-

.background-(position)

-

.background-right-bottom

-
    -
  • -
    - - - -

    Ultra-Fast WiFi

    - Simple and secure file sharing. -
    -
    • -
  • -
    - - - -

    All day battery life

    - Your battery worries may be over. -
    -
    • -
  • -
    - - - -

    Lifetime Warranty

    - We'll fix it or if we can't, we'll replace it. -
    -
    • -
-
-
- -
-
- - -
-

Iceland

-

section[class*="bg-"] > .background.dark

-
-
-
- - -
-

Iceland

-

section[class*="bg-"] > .background.light

-
-
-
- - -
-

.background.anim

-
- -
-
-
-

Flexible blocks

-

ul.flexblock = Flexible blocks with auto-fill and equal height.

-
-
    -
  • -

    - - - - .flexblock li 1 -

    - Multipurpose: services, features, specs... -
    • -
  • -

    - - - - .flexblock li 2 -

    - Multipurpose: benefits, clients, work... -
    • -
  • -

    - - - - .flexblock li 3 -

    - Multipurpose: news, metrics, plans... -
    • -
-
- -
-
-
-
-

Flexible Block = .flexblock

-

Auto-fill & Equal height columns:

- 
<ul class="flexblock">
-  <li>
-    Item 1
-  </li>
-  <li>
-    Item 2
-  </li>
-  <li>
-    Item 3
-  </li>
-  <li>
-    Item 4
-  </li>
-</ul>
-
-
-

Block Link = .flexblock.blink

-

Make the whole block clickable:

- 
<ul class="flexblock blink">
-  <li>
-    <a href="#">
-      Item 1
-    </a>
-  </li>
-  <li>
-    <a href="">
-      Item 2
-    </a>
-  </li>
-</ul>
-
-
- -
-
-
-

ul.flexblock

-
    -
  • -

    - - - - Purpose -

    - Businesses that people love -
    • -
  • -

    - - - - Principles -

    - Ethics of openness and good taste -
    • -
  • -

    - - - - Process -

    - Useful → Easy → Fast → Beautiful -
    • -
-
-

ul.flexblock.blink

- -
- -
-
-
-

ul.flexblock.blink.border

- -
- -
-
-
-

Clients

-

ul.flexblock.clients

- -
- -
-
-
-

Clients

-

ul.flexblock.clients.border

- -
- -
-
-
-

ul.flexblock.features

-
    -
  • -
    -

    100% customizable

    - Well documented. -
    -
    • -
  • -
    - $48 -

    Extra virgin olive oil

    - The Spanish caviar. -
    -
    • -
  • -
    -

    - - - - Ultra-fast Wifi -

    - Simple file sharing. -
    -
    • -
-
-

ul.flexblock.features.blink

- -
- -
-
-
-

ul.flexblock.gallery

- -
- -
-
-
-

ul.flexblock.gallery + .overlay

- -
- -
-
-
-

ul.flexblock.metrics

- -
    -
  • Founded - 2016 -
    • -
  • - - - - - - 24M Subscribers -
    • -
  • - - - - - - Revenue: $16M -
    • -
  • - Monthly Growth - 64% -
    • -
  • - - - - - - 8 Offices -
    • -
  • - - - - - - 48 Employees -
    • -
  • - - - - - - Benefits: $2,4M -
    • -
  • - - - - - - Bank: $32M -
    • -
-
- -
-
-
-

ul.flexblock.metrics.border

- -
    -
  • Founded - 2016 -
    • -
  • - - - - - - 24M Subscribers -
    • -
  • - - - - - - Revenue: $16M -
    • -
  • - Monthly Growth - 64% -
    • -
  • - - - - - - 8 Offices -
    • -
  • - - - - - - 48 Employees -
    • -
  • - - - - - - Benefits: $2,4M -
    • -
  • - - - - - - Bank: $32M -
    • -
-
- -
-
-
-

.flexblock.plans.blink

-

All content is for demo purposes only.

- -
- -
-
-
- -
- -
-
-
-
-

ul.flexblock.specs

-
    -
  • -
    - - - -

    Ultra-Fast WiFi

    - Simple and secure file sharing. -
    -
    • -
  • -
    - - - -

    All day battery life

    - Your battery worries may be over. -
    -
    • -
  • -
    - - - -

    Lifetime Warranty

    - We'll fix it or if we can't, we'll replace it. -
    -
    • -
-
- -
- Pixel Phone -
-
- -
-
- -
-

.flexblock.reasons

-
-
-
    -
  • -

    Why WebSlides? Work better, faster.

    -

    Designers and marketers can now focus on the content. Simply choose a demo and customize it in minutes. Be memorable!

    -
    • -
  • -

    Good karma. Just the essentials and using lovely CSS.

    -

    WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

    -
    • -
-
- -
- -
-
-
-

ul.flexblock.steps

-
    - -
  • - - - - - -

    01. Passion

    -

    When you're really passionate about your job, you can change the world.

    -
    • -
  • -
    - - - - - -

    02. Purpose

    -

    Why does this business exist? How are you different? Why matters?

    -
    • -
  • -
    - - - - - -

    03. Principles

    -

    Leadership through usefulness, openness, empathy, and good taste.

    -
    • -
  • -
    - - - - - -

    04. Process

    -
      -
    • Useful
      • -
    • Easy
      • -
    • Fast
      • -
    • Beautiful
      • -
    -
    • -
-
- -
-
-
-

ul.flexblock.activity

- -
- -
-
-
-
-
-

Ag

-
- -
-

Roboto in Google Fonts.

-

The quick brown fox jumps over the lazy dog.

-

ABCDEFGHIJKLMNOPQRSTUVWXYZ

-

abcdefghijklmnopqrstuvwxyz

-

1234567890(,.;:?!$&*)

-
- -
- -
- -
-
-
-

Landings

-

.text-landing

-
- -
-
-
-

Landings

-

Create a simple web presence.

-

.text-intro

-
- -
-
-
-

Powered by #WebSlides .text-subtitle

-

Landings

-

Create a simple web presence.

-
- -
-
- -
-

Landings

-

.text-shadow

-
- -
-
-

4,235,678

-

.text-data

-
-
- -
-

Why WebSlides? .text-context

-

WebSlides is incredibly easy and versatile. The easiest way to make HTML presentations.

-
- -
-
-
-

.text-cols (2 columns)

-
-

Why WebSlides? There are excellent presentation tools out there. WebSlides is about sharing content, essential features, and clean markup. Each parent <section> in the #webslides element is an individual slide.

-

WebSlides help you build a culture of innovation and excellence. When you're really passionate about your job, you can change the world. How to manage a design-driven organization? Leadership through usefulness, openness, empathy, and good taste.

-
-
    -
  • -
    - - - - Call us at 555.345.6789 -
    -
    • -
  • -
    - - - - @username -
    -
    • -
  • -
    - - - - Send us an email -
    -
    • -
-
- -
-
-
-
-
-

- A Phone by Google -

-

Pixel's camera lets you take brilliant photos in low light, bright light or any light.

-
    -
  • - - .text-label: - - Google (2016). -
    • -
  • - - Services: - - Industrial Design. -
    • -
  • - - Website: - - madeby.google.com/phone/ -
    • -
-
- -
-
- Pixel Phone -
-
- -
- -
- -
-
-
-
-
-

Ag

-
- -
-

Maitree in Google Fonts.

-

The quick brown fox jumps over the lazy dog.

-

ABCDEFGHIJKLMNOPQRSTUVWXYZ

-

abcdefghijklmnopqrstuvwxyz

-

1234567890(,.;:?!$&*)

-
- -
- -
- -
-
- -
-
-

WebSlides is incredibly easy and versatile.

-

.text-serif (Maitree)

-
-
-

Each parent <section> in the #webslides element is an individual slide.

-

Clean markup with popular naming conventions. Minimum effort. Just focus on your content.

-
-
- -
-
-
-

What is Stendhal Syndrome?

-

Beauty overdose. .text-pull-right

-

Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.

-

Psychiatrists have long debated whether it really exists.

-

The syndrome is not only associated with viewing a beautiful place, but also good art.

-

The beauty of Italian art has a concentrated perfection and transcendent sensuality that is incredibly addictive.

-

* * *

-
- -
-
-

One more thing...

-

.text-apple / .bg-apple

-
-
-
- -
- -
-
- -
-

Start in seconds

-

Create your own presentation instantly.
120+ prebuilt slides ready to use.

-

- - - - - Free Download - - - - - - - Pay what you want. - - -

-
- -
- -
-
- - - - - - - - - - - diff --git a/tests/media.html b/tests/media.html deleted file mode 100644 index 151ee93..0000000 --- a/tests/media.html +++ /dev/null @@ -1,722 +0,0 @@ - - - - - - - - WebSlides Tutorial: Videos, Images, and Maps - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
-
- - - -
- - -
-

WebSlides Tutorial

-

Media

-

* * *

-

- - - - - Free Download - -

-
- -
-
-
-

A quick reference guide for beginners

-

Videos, images, maps, and charts.

- -
- -
-
- -
-

- - - - Insert images wherever you want -

-

15 different positions.

-
- -
-
-
-

15 Different Backgrounds

-
    -
  • .background (fullscreen)
    • -
  • .background-top (cover)
    • -
  • .background-bottom (cover)
    • -
  • .background.light (opacity)
    • -
  • .background.dark (opacity)
    • -
  • .background-center
    • -
  • .background-center-top
    • -
  • .background-center-bottom
    • -
  • .background-left
    • -
  • .background-left-top
    • -
  • .background-left-bottom
    • -
  • .background-right
    • -
  • .background-right-top
    • -
  • .background-right-bottom
    • -
  • .background-anim (animated)
    • -
-
- -
-
-
-

- - - - .background = Fullscreen Backgrounds -

-

How to embed Unsplash photos? →

- 
<section>
-  <span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"></span>
-  <div class="wrap">
-    <h1>Slide</h1>
-  </div>
-</section>
-

- - - - Position .background outside of .wrap container. -

-
- -
-
- -
-
-

.background-(position)

-

.background-right-bottom

-
    -
  • -
    - - - -

    Ultra-Fast WiFi

    - Simple and secure file sharing. -
    -
    • -
  • -
    - - - -

    All day battery life

    - Your battery worries may be over. -
    -
    • -
  • -
    - - - -

    Lifetime Warranty

    - We'll fix it or if we can't, we'll replace it. -
    -
    • -
-
-
- -
-
- - -
-

.background.anim

-
- -
-
- -
-

Opacity

-

[class*="bg-"] > .background.light

- 
<section class="bg-black">
-	<span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
-	<div class="wrap">
-		<h1>Slide</h1>
-	</div>
-</section>
-
-
-
- -
-

Opacity

-

[class*="bg-"] > .background.dark

- 
<section class="bg-black">
-	<span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
-	<div class="wrap">
-		<h1>Slide</h1>
-	</div>
-</section>
-
-
-
-
-

Optional · 500+ icons

-

- - - - - Font Awesome - - as SVG icons -

- 
<svg class="fa-flag">
-	<use xlink:href="#fa-flag"></use>
-</svg>
-

How to change icons?

-
    -
  1. Go to fontastic.me.
    2. -
  2. Create a free account.
    3. -
  3. Select new icons.
    4. -
  4. Publish as SVG sprite.
    5. -
  5. Edit svg-icons.css and svg.icons.js.
    6. -
-
- -
-
-
-

Transparent Logos

-

- Change the color of a .svg/.png image using CSS. Images are property of their respective owners. -

-
- -
- -
-
- -
-
-

An avatar is the graphical representation of the user or the user's alter ego or character. The word avatar originates in Hinduism.

-

Avatar @username, .avatar-56

-
-
-

img[class*="avatar-"] (80, 72, 64, 56, 48, and 40).

-
- -
-
-
-
-
-

Devices

-
    -
  • -
    - - - -

    Ultra-Fast WiFi

    - Simple and secure file sharing. -
    -
    • -
  • -
    - - - -

    All day battery life

    - Your battery worries may be over. -
    -
    • -
  • -
    - - - -

    Lifetime Warranty

    - We'll fix it or if we can't, we'll replace it. -
    -
    • -
-
- -
-
- iPhone -
-
- -
- -
- -
-
-
-
-
- Screenshot -
-
- -
-

Screenshots

-

HTML/CSS Browser.

- 
<figure class="browser">
-  <img alt="Screenshot" src="image.jpg">
-</figure>
-
- -
- -
-
- -
-

- Videos -

-
- -
-
-
-

Background Videos

- 
<video class="background-video" autoplay muted loop poster="image.jpg">
-  <source src="video.mp4" type="video/mp4">
-</video>
-

.background-video

-
- -
-
-
- -
-
-

Audio

-

Overlay: section.bg-red > .background-video.dark or .light

-
- -
-
-
- -
- -
-

Muted

-

Overlay: section.bg-blue > .background-video.dark or .light

-
- -
-
-
-
-

Responsive Videos

-

Just copy and paste the code from YouTube to your slide.

- 
<div class="embed">
- <iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
- </iframe>
-</div>
-

.embed (responsive)

-
- -
- -
- -
- -
- -
- -
-
-
- -
- -
- -
- -
-
-
-

Fullscreen YouTube Video

- 
<section class="fullscreen">
-  <div class="embed">
-    <iframe src="https://www.youtube.com/embed/iY05U7GaU5I">
-    </iframe>
-  </div>
-</section>
-
-

.fullscreen > .embed (responsive)

-
- -
-
- -
- -
- -
-
-

- -

-
-

- - YouTube API

-

Embed videos with loop, autoplay, and muted attributes. The video will automatically play when the slide is loaded.

- -

You should use a local or a remote server since the YouTube API doesn't seem to work nicely when using the file directly on the browser.

-
- -
-
-
-

- - YouTube API Parameters

-

Syntax: data-autoplay, data-loop, data-no-controls, data-mute.

-
-
-
- 
<div class="embed">
-  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop>
-  </div>
-</div>
-

autoplay + loop

-
- -
- 
<div class="embed">
-  <div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls>
-  </div>
-</div>
-

autoplay + mute + no controls.

-
- -
- -
- -
-
-
-
-

YouTube API

-

autoplay + loop

- 
<div class="embed">
-  <div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop>
-  </div>
-</div>
-
- -
- -
-
-
- -
- -
- -
-
-
-

Let's make some magic with the YouTube API

-

How to make a fullscreen YouTube video? .fullscreen > .embed

-
- 
<section class="fullscreen">
-  <div class="embed">
-    <div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls</div>
-  </div>
-</section>
-
-

The video will automatically play when the slide is loaded.

-
- -
-
- -
-
-
- -
-
-
-

Fullscreen YouTube video background

-

Overlaying a transparent background on an embedded Youtube video:

-
- 
<section class="fullscreen bg-black">
-  <div class="embed dark">
-    <div data-youtube data-youtube-id="c9psfOxJysw" data-autoplay data-loop data-mute data-no-controls</div>
-  </div>
-</section>
-
-

.fullscreen[class*="bg-"] > .embed.dark or .light

-
- -
-
- -
-
-
- -
-

Overlay

-

.fullscreen[class*="bg-"] > .embed.dark or .light

-
- -
-
- -
-

- - - - Maps & Charts -

-
- -
-
-
-

Status of Net Neutrality around the world.

-
- -
- -
- -
-
-
- -
- -
-
-
-

Charts

- -
- -
Chart
-
- -
- -
-
-
- - - - - - - - - - - diff --git a/tests/test.css b/tests/test.css deleted file mode 100644 index 814b5a1..0000000 --- a/tests/test.css +++ /dev/null @@ -1,29 +0,0 @@ - -#webslides-zoomed.grid { - background: #ccc; -} - -#webslides-zoomed.grid > .column { - position: relative; -} -#webslides-zoomed.grid > .column > .wrap-zoom { - position: relative; - background: #fff; -} -#webslides-zoomed.grid > .column { - width: 25%; -} -#webslides-zoomed.grid > .column > .wrap-zoom > .slide { - transform: scale(0.25) translate(-150%, -150vh); - display: flex !important; - position: absolute; - top: 0; - left: 0; - clip: rect(0px auto auto 0); -} -#webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer { - position: absolute; - background: transparent; - width: 100%; - height: 100%; -} diff --git a/tests/test.js b/tests/test.js deleted file mode 100644 index 867a1b7..0000000 --- a/tests/test.js +++ /dev/null @@ -1,36 +0,0 @@ -window.addEventListener("load", () => { - var getValue = ( px ) => { - return new Number( px.replace( /[^\d\.]/g, '' ) ); - }; - - - var wrap = ( query, tag ) => { - // Now webslides is a grid - const ws = document.getElementById('webslides'); - ws.classList.add('grid'); - - document.querySelectorAll( query ).forEach( elem => { - const div = document.createElement( 'div' ); - div.className = 'column'; - elem.parentElement.insertBefore( div, elem ); - const wrap = document.createElement( 'div' ); - wrap.className = 'wrap-zoom'; - div.appendChild( wrap ); - wrap.appendChild( elem ); - - const divCSS = window.getComputedStyle( div ); - const divW = getValue( divCSS.width ); - const marginW = getValue( divCSS.paddingLeft ) + getValue( divCSS.paddingRight ); - const marginH = getValue( divCSS.paddingTop ) + getValue( divCSS.paddingBottom ); - -// div.style.height = divH + 'px'; - elem.style.width = ( window.innerWidth - marginW * 4 ) + 'px'; - elem.style.height = ( window.innerHeight - marginH * 4 ) + 'px'; - - const slideCSS = window.getComputedStyle( elem ); - wrap.style.height = ( getValue( slideCSS.height ) / 4 ) + 'px'; - }); - }; - - //wrap( '.slide', 'div' ); -});