diff --git a/src/js/plugins/zoom.js b/src/js/plugins/zoom.js index 2b84cb8..2433585 100644 --- a/src/js/plugins/zoom.js +++ b/src/js/plugins/zoom.js @@ -42,7 +42,6 @@ export default class Zoom { this.preBuildZoom_(); document.body.addEventListener('keydown', this.onKeyDown.bind(this)); - window.addEventListener('resize', this.onWindowResize.bind(this)); } /** @@ -115,42 +114,6 @@ export default class Zoom { const slideNumber = DOM.createNode('p', '', `${elem.i+1}`); slideNumber.className = 'text-slide-number'; div.appendChild(slideNumber); - - this.setSizes_(div, wrap, elem); - } - - /** - * Sets layers size - * @param {Element} div flexbox element - * @param {Element} wrap wrapping element - * @param {Element} elem slide element - */ - setSizes_(div, wrap, elem) { - // Calculates the margins in relation to window width - const divCSS = window.getComputedStyle(div); - const marginW = DOM.parseSize(divCSS.paddingLeft) - + DOM.parseSize(divCSS.paddingRight); - const marginH = DOM.parseSize(divCSS.paddingTop) - + DOM.parseSize(divCSS.paddingBottom); - - // Sets element size: window size - relative margins - const scale = divCSS.width.includes('%') ? - 100 / DOM.parseSize(divCSS.width) : - window.innerWidth / DOM.parseSize(divCSS.width); - if (scale === 1) { - // If the scale is 100% means it is mobile - const wsW = this.ws_.el.clientWidth; - elem.el.style.width = `${(wsW - marginW) * 2}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 = `${(wsW - marginH) * 1.5 / 2}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`; - } } /** @@ -198,17 +161,4 @@ export default class Zoom { this.isZoomed_ = false; document.body.style.overflow = ''; } - - /** - * When windows resize it is necessary to recalculate layers sizes. - */ - onWindowResize() { - if (this.isZoomed_) this.zoomOut(); - - this.zws_.slides.forEach(elem => { - const wrap = elem.el.parentElement; - const div = wrap.parentElement; - this.setSizes_(div, wrap, elem); - }); - } } diff --git a/src/scss/modules/_zoom.scss b/src/scss/modules/_zoom.scss index dbf701f..baafc28 100644 --- a/src/scss/modules/_zoom.scss +++ b/src/scss/modules/_zoom.scss @@ -12,10 +12,25 @@ position: relative; z-index: 2; + .slide { + height: 100%; + width: 400%; + + @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { + height: 200%; + width: 200%; + } + + @media (max-aspect-ratio: 2 / 3) { + height: 200%; + width: 200%; + } + } + > .wrap { @media (min-width: 1024px) { + padding-bottom: 12rem; padding-top: 12rem; - padding-bottom:12rem; } } @@ -23,13 +38,32 @@ align-self: auto; flex: 0 1 auto; order: 0; + position: relative; width: 25%; + @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { + width: 50%; + } + + @media (max-aspect-ratio: 2 / 3) { + width: 100%; + } + > .wrap-zoom { + display: inline-block; + height: 25vh; overflow: hidden; position: relative; transition: .3s; + @media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation: landscape) { + height: 50vh; + } + + @media (max-aspect-ratio: 2 / 3) { + height: 50vh; + } + &:hover { transform: scale(1.02); z-index: 2; @@ -61,16 +95,6 @@ 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 { diff --git a/static/css/webslides.css b/static/css/webslides.css index 466e782..0e5bcd3 100644 --- a/static/css/webslides.css +++ b/static/css/webslides.css @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.3.1 - * Date: 2017-06-21 + * Date: 2017-06-27 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -1922,6 +1922,10 @@ About, Philosophy... float: left; margin-right: 2.4rem; } } +/*================================================= +6.6 Reasons/Why/Numbers (counter-increment) +
comment -- */ .code-comment { color: rgba(70, 170, 130, 0.9); text-shadow: none; } +/*========================================= +Header/Nav +=========================================== */ header[role='banner'] { background-color: #fff; } @@ -3246,12 +3295,18 @@ nav li.github a:hover { nav li.email a:hover { background-color: #dd4b39; } +/*=================================================== +.flexblock li hover/active +===================================================== */ .flexblock li.active a, .metrics li:hover, .specs li:hover, .reasons li:hover { background-color: rgba(0, 20, 80, 0.03); } +/*========================================= +Features & Clients List +=========================================== */ .features li, .clients li { background-color: rgba(255, 255, 255, 0.9); } @@ -3265,6 +3320,9 @@ nav li.email a:hover { -webkit-box-shadow: 0 8px 16px rgba(0, 20, 80, 0.02), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: 0 8px 16px rgba(0, 20, 80, 0.02), 0 4px 16px rgba(0, 0, 0, 0.08); } +/*============================ +.flexblock with border +============================== */ .border { border-bottom: 1px solid rgba(0, 20, 80, 0.1); border-right: 1px solid rgba(0, 20, 80, 0.1); } @@ -3276,6 +3334,9 @@ nav li.email a:hover { .flexblock.border li li { border: 0; } +/*=========================================== +flexblock.steps +============================================= */ .steps li:nth-child(1) { background-color: #e8eef7; } @@ -3306,6 +3367,9 @@ nav li.email a:hover { .steps li:hover + li [class*='step-'] { border-left-color: #b8cef7; } } +/*========================================================= +Items: You can use for settings, drag&drop, close/delete... +=========================================================== */ .specs li:after { background: -webkit-gradient(linear, left top, right top, from(rgba(0, 20, 80, 0)), color-stop(50%, rgba(0, 20, 80, 0.2)), to(rgba(0, 20, 80, 0))); background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%); } @@ -3313,6 +3377,9 @@ nav li.email a:hover { .specs li:last-child:after { background: none; } +/*========================================================= +Why/Steps/Motivation/Reasons - Decimal/Numbers +=========================================================== */ .reasons li:after { background: -webkit-gradient(linear, left top, right top, from(rgba(0, 20, 80, 0)), color-stop(50%, rgba(0, 20, 80, 0.2)), to(rgba(0, 20, 80, 0))); background: linear-gradient(to right, rgba(0, 20, 80, 0) 0%, rgba(0, 20, 80, 0.2) 50%, rgba(0, 20, 80, 0) 100%); } @@ -3320,6 +3387,9 @@ nav li.email a:hover { .reasons li:last-child:after { background: none; } +/*========================================= +Overlays +=========================================== */ .overlay { background-color: rgba(0, 0, 0, 0.2); } @@ -3331,6 +3401,9 @@ li:hover .overlay { color: #fff; text-shadow: 0 1px 0 #111; } +/*========================================= +Gallery li+.overlay+image +=========================================== */ .gallery li { background-color: rgba(0, 20, 80, 0.06); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.03); @@ -3353,10 +3426,14 @@ li:hover .overlay { .flesblock.gallery li a footer { color: #aaa; } +/*Arrow */ .gallery li figcaption:before { border: 0.8rem solid #000; border-color: transparent transparent #fff #fff; } +/*========================================= +Plans / Pricing +=========================================== */ .plans > li div, .flexblock.plans li:hover div { background-color: #fff; } @@ -3383,12 +3460,18 @@ li:hover .overlay { color: #333; text-shadow: none; } +/*============================ +Activity/CV/Timeline/News +============================== */ .activity li { border-top: 0.1rem solid rgba(0, 20, 80, 0.1); } .activity li:hover { background-color: rgba(0, 20, 80, 0.02); } +/*========================================= +Resume/Work/CV/Portfolio +=========================================== */ .work-label, .work li a { border-bottom: 1px solid rgba(0, 20, 80, 0.1); } @@ -3399,22 +3482,32 @@ li:hover .overlay { .work li a:hover { background-color: rgba(0, 20, 80, 0.04); } +/*=========================================== +Clients / Services / Logos... +============================================= */ .clients.border figcaption { border-top: 1px solid rgba(0, 20, 80, 0.1); } +/*==================== +LOGOS +====================== */ +/* --- Images (black logo/image) --- */ img.blacklogo { background: none; -webkit-filter: grayscale(100%) brightness(10%) contrast(100%); filter: grayscale(100%) brightness(10%) contrast(100%); } +/* --- Images (gray logo/image) --- */ img.graylogo { -webkit-filter: grayscale(100%) brightness(10%) contrast(10%); filter: grayscale(100%) brightness(10%) contrast(10%); } +/* --- Images (white Logo/Image) --- */ img.whitelogo { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } +/* --- Logo/Images Hover --- */ li:hover img.blacklogo, li:hover img.graylogo, img.blacklogo:hover, @@ -3425,24 +3518,31 @@ img.graylogo:hover { -webkit-transition: all .6s ease; transition: all .6s ease; } +/*========================================================= +Cards +=========================================================== */ [class*='card-'] > a { color: inherit; } +/* --- card ul specs --- */ .description > li { border-bottom: 1px solid rgba(0, 20, 80, 0.1); } .description > li:last-child { border-bottom: 0; } +/*== Figure Background === */ [class*='card-'][class*='bg-'] figure { background-color: rgba(0, 20, 80, 0.06); } +/*== Ficaption Cards === */ [class*='card'] figcaption, [class*='card'] figcaption a { background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.2))); background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.2) 100%); color: #fff; } +/*===CTA (Call to Action - Numbers, Price, Promo...) ===== */ @media (min-width: 768px) { .cta .benefit { -o-border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; @@ -3451,6 +3551,9 @@ img.graylogo:hover { border-left-width: 1px; border-style: solid; } } +/*========================================= +Tables +=========================================== */ table td, th, thead { @@ -3469,6 +3572,9 @@ td:hover, tr:nth-child(even) > td:hover { background-color: rgba(255, 255, 255, 0.5); } +/*============================ +Browser (Screenshots) +============================== */ .browser { border: 1px solid rgba(0, 20, 80, 0.1); } @@ -3476,6 +3582,7 @@ tr:nth-child(even) > td:hover { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); } +/*=== Topbar === */ .browser:before { background-color: rgba(0, 20, 80, 0.1); border-bottom: 1px solid rgba(0, 20, 80, 0.2); @@ -3485,6 +3592,9 @@ tr:nth-child(even) > td:hover { background-color: rgba(0, 20, 80, 0.12); color: #fff; } +/*========================================= +Forms +=========================================== */ input, textarea { background-color: #fafbfc; } @@ -3573,11 +3683,13 @@ legend { background-color: rgba(0, 0, 0, 0.6); color: #fff; } +/* Inputs/Buttons - hover */ input:hover, select:hover { -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); } +/* App Store Badges */ [class*='badge-'] { background-color: #000; border: 1px solid #345; } @@ -3585,6 +3697,9 @@ select:hover { form .flexblock li:hover { background-color: rgba(0, 0, 0, 0.05); } +/*============================ +Table of Contents +============================== */ .toc, .toc ol > li:before, .chapter { @@ -3593,6 +3708,9 @@ form .flexblock li:hover { .toc li .toc-page:before { border-bottom: 1px dotted rgba(0, 0, 0, 0.9); } +/*============================ +Slides (Counter/Arrows) +============================== */ #counter, #navigation a { color: #abc; } @@ -3601,9 +3719,15 @@ form .flexblock li:hover { background-color: rgba(0, 0, 0, 0.9); color: #fff; } +/*============================ +Footer +============================== */ footer[role='contentinfo'] { background-color: #fff; } +/*============================ +Slides Index +============================== */ #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); diff --git a/static/js/webslides.js b/static/js/webslides.js index 897857a..e74830a 100644 --- a/static/js/webslides.js +++ b/static/js/webslides.js @@ -1,7 +1,7 @@ /*! * Name: WebSlides * Version: 1.3.1 - * Date: 2017-06-21 + * Date: 2017-06-27 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros @@ -2758,7 +2758,6 @@ var Zoom = function () { this.preBuildZoom_(); document.body.addEventListener('keydown', this.onKeyDown.bind(this)); - window.addEventListener('resize', this.onWindowResize.bind(this)); } /** @@ -2847,41 +2846,6 @@ var Zoom = function () { var slideNumber = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('p', '', '' + (elem.i + 1)); slideNumber.className = 'text-slide-number'; div.appendChild(slideNumber); - - this.setSizes_(div, wrap, elem); - } - - /** - * Sets layers size - * @param {Element} div flexbox element - * @param {Element} wrap wrapping element - * @param {Element} elem slide element - */ - - }, { - key: 'setSizes_', - value: function setSizes_(div, wrap, elem) { - // Calculates the margins in relation to window width - var divCSS = window.getComputedStyle(div); - var marginW = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingLeft) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingRight); - var marginH = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingTop) + __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].parseSize(divCSS.paddingBottom); - - // 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); - if (scale === 1) { - // If the scale is 100% means it is mobile - var wsW = this.ws_.el.clientWidth; - elem.el.style.width = (wsW - marginW) * 2 + '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 = (wsW - marginH) * 1.5 / 2 + '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'; - } } /** @@ -2937,24 +2901,6 @@ var Zoom = function () { this.isZoomed_ = false; document.body.style.overflow = ''; } - - /** - * When windows resize it is necessary to recalculate layers sizes. - */ - - }, { - key: 'onWindowResize', - value: function onWindowResize() { - var _this5 = this; - - if (this.isZoomed_) this.zoomOut(); - - this.zws_.slides.forEach(function (elem) { - var wrap = elem.el.parentElement; - var div = wrap.parentElement; - _this5.setSizes_(div, wrap, elem); - }); - } }]); return Zoom; diff --git a/static/js/webslides.min.js b/static/js/webslides.min.js index 9bbd0ec..a1c779f 100644 --- a/static/js/webslides.min.js +++ b/static/js/webslides.min.js @@ -1,9 +1,9 @@ /*! * Name: WebSlides * Version: 1.3.1 - * Date: 2017-06-21 + * Date: 2017-06-27 * Description: Making HTML presentations easy * URL: https://github.com/webslides/webslides#readme * Credits: @jlantunez, @LuisSacristan, @Belelros */ -!function(e){function t(n){if(i[n])return i[n].exports;var s=i[n]={i:n,l:!1,exports:{}};return e[n].call(s.exports,s,s.exports,t),s.l=!0,s.exports}var i={};t.m=e,t.c=i,t.i=function(e){return e},t.d=function(e,i,n){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/static/js/",t(t.s=6)}([function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(19),o=function(){function e(e,t){for(var i=0;i1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return t&&(n.id=t),i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(e){if(a&&!e)return a;a="";for(var t=e||document.createElement("ws"),i={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(i),s=0,o=n.length;s 2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{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&&void 0!==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){var i=document.createElement(t);return e.parentElement.insertBefore(i,e),i.appendChild(e),i}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild===t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}i.d(t,"a",function(){return l}),i.d(t,"b",function(){return r});var s=i(0),o=function(){function e(e,t){for(var i=0;i 0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.navigateOnScroll,f=void 0===d||d,v=t.scrollWait,y=void 0===v?450:v,p=t.slideOffset,m=void 0===p?50:p;if(n(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:s,changeOnClick:a,loop:l,minWheelDelta:h,navigateOnScroll:f,scrollWait:y,slideOffset:m},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 i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=a.a.toArray(this.el.childNodes).map(function(e,t){return new o.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 i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.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,a.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"number"==typeof e&&e>=0&&e =this.maxSlide_)&&(e=0),0!==e)for(var t=0;t 0&&(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=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;i Math.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,s){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(s&&this.isGoingLeft_||!s&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(3),o=function(){function e(e,t){for(var i=0;i 1&&(this.startTouches=e.getTouchCoordinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(!this.ws_.isDisabled()){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=e.getTouchCoordinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(!this.ws_.isDisabled())if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"getTouchCoordinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}},{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=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i 1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){};o||(o=document.getElementById("webslides"));var n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l 1&&void 0!==arguments[1]?arguments[1]:"",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",n=document.createElement(e);return t&&(n.id=t),i&&(n.textContent=i),n}},{key:"once",value:function(e,t,i){var n=function n(s){s.target===e&&(e.removeEventListener(t,n),i(s))};e.addEventListener(t,n,!1)}},{key:"getTransitionEvent",value:function(e){if(a&&!e)return a;a="";for(var t=e||document.createElement("ws"),i={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=Object.keys(i),s=0,o=n.length;s 2&&void 0!==arguments[2]?arguments[2]:{},n=new s.a(t,{detail:i});e.dispatchEvent(n)}},{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&&void 0!==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){var i=document.createElement(t);return e.parentElement.insertBefore(i,e),i.appendChild(e),i}},{key:"after",value:function(e,t){var i=t.parentNode;i.lastChild===t?i.appendChild(e):i.insertBefore(e,t.nextSibling)}}]),e}();t.a=l},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}i.d(t,"a",function(){return l}),i.d(t,"b",function(){return r});var s=i(0),o=function(){function e(e,t){for(var i=0;i 0&&void 0!==arguments[0]?arguments[0]:{},i=t.autoslide,s=void 0!==i&&i,o=t.changeOnClick,a=void 0!==o&&o,r=t.loop,l=void 0===r||r,c=t.minWheelDelta,h=void 0===c?40:c,d=t.navigateOnScroll,f=void 0===d||d,v=t.scrollWait,y=void 0===v?450:v,p=t.slideOffset,m=void 0===p?50:p;if(n(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:s,changeOnClick:a,loop:l,minWheelDelta:h,navigateOnScroll:f,scrollWait:y,slideOffset:m},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 i=e[t];o.a.isCandidate(i)||this.el.removeChild(i)}}},{key:"createPlugins_",value:function(){var e=this;Object.keys(c).forEach(function(t){var i=c[t];e.plugins[t]=new i(e)})}},{key:"onInit_",value:function(){this.initialised=!0,a.a.fireEvent(this.el,"ws:init"),document.documentElement.classList.add(u.READY)}},{key:"grabSlides_",value:function(){this.slides=a.a.toArray(this.el.childNodes).map(function(e,t){return new o.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 i=!1;null!==t?i=t:this.currentSlideI_>=0&&(i=e>this.currentSlideI_);var n=this.slides[e];null===this.currentSlide_||!this.isVertical||this.plugins.touch&&this.plugins.touch.isEnabled?this.transitionToSlide_(i,n,this.onSlideChange_):this.scrollTransitionToSlide_(i,n,this.onSlideChange_)}}},{key:"scrollTransitionToSlide_",value:function(e,t,n){var s=this;this.el.style.overflow="hidden",e?t.show():(t.moveBeforeFirst(),t.show(),i.i(r.a)(this.currentSlide_.el.offsetTop,0)),i.i(r.a)(t.el.offsetTop,500,function(){s.currentSlide_.hide(),e&&s.currentSlide_.moveAfterLast(),s.el.style.overflow="auto",setTimeout(function(){n.call(s,t)},150)})}},{key:"transitionToSlide_",value:function(e,t,n){var s=this;i.i(r.a)(0,0);var o="slideInRight";e||(t.moveBeforeFirst(),o="slideInLeft"),this.currentSlide_&&(e&&this.currentSlide_.moveAfterLast(),this.currentSlide_.hide()),t.show(),this.initialised&&this.plugins.touch&&this.plugins.touch.isEnabled?(a.a.once(t.el,a.a.getAnimationEvent(),function(){t.el.classList.remove(o),n.call(s,t)}),t.el.classList.add(o)):n.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,a.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"number"==typeof e&&e>=0&&e =this.maxSlide_)&&(e=0),0!==e)for(var t=0;t 0&&(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=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=function(){function e(e,t){for(var i=0;i Math.abs(t);if(this.isGoingUp_=t<0,this.isGoingLeft_=i<0,s){if(n)return;e.preventDefault()}(Math.abs(t)>=this.ws_.options.minWheelDelta||Math.abs(i)>=this.ws_.options.minWheelDelta)&&(s&&this.isGoingLeft_||!s&&this.isGoingUp_?this.ws_.goPrev():this.ws_.goNext(),e.preventDefault())}}}]),e}();t.a=a},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(3),o=function(){function e(e,t){for(var i=0;i 1&&(this.startTouches=e.getTouchCoordinates(t),this.endTouches=this.startTouches,this.isGesture=!0)}}},{key:"onMove_",value:function(t){if(!this.ws_.isDisabled()){var i=e.normalizeEventInfo(t);this.isGesture?this.endTouches=e.getTouchCoordinates(t):(this.endX_=i.x,this.endY_=i.y)}}},{key:"onStop_",value:function(){if(!this.ws_.isDisabled())if(this.isGesture){var e=Math.sqrt(Math.pow(this.startTouches[0].x-this.startTouches[1].x,2)+Math.pow(this.startTouches[0].y-this.startTouches[1].y,2)),t=Math.sqrt(Math.pow(this.endTouches[0].x-this.endTouches[1].x,2)+Math.pow(this.endTouches[0].y-this.endTouches[1].y,2));e>t&&this.ws_.toggleZoom(),this.isGesture=!1}else{var i=this.startX_-this.endX_,n=this.startY_-this.endY_;Math.abs(i)>Math.abs(n)&&(i<-this.ws_.options.slideOffset?this.ws_.goPrev():i>this.ws_.options.slideOffset&&this.ws_.goNext())}}}],[{key:"getTouchCoordinates",value:function(e){return[{x:e.touches[0].clientX,y:e.touches[0].clientY},{x:e.touches[1].clientX,y:e.touches[1].clientY}]}},{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=r},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var s=i(0),o=i(1),a=function(){function e(e,t){for(var i=0;i 1&&void 0!==arguments[1]?arguments[1]:500,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){};o||(o=document.getElementById("webslides"));var n=e-o.scrollTop,a=o.scrollTop;if(!t)return o.scrollTop=e,void i();!function r(l){l+=16;var u=Math.min(1,l/t),c=s.a.swing(u,l*u,e,n,t);o.scrollTop=Math.floor(a+c*n),l