From 4b7f57700b460fb049c4db1067983f764e949521 Mon Sep 17 00:00:00 2001 From: dedalodesign Date: Fri, 14 Nov 2014 09:35:10 +0100 Subject: [PATCH] Fix visibilityChange listener --- LICENSE | 2 +- README.md | 76 ++++++++++++++++++++++++++++++++-------- bower.json | 2 +- dist/elba/elba.js | 64 +++++++++++++-------------------- dist/elba/elba.min.js | 6 ++-- index.html | 4 +-- package.json | 8 ++--- src/dependencies.js | 10 ------ src/helpers.js | 4 --- src/privilegedmethods.js | 46 ++++++++++++------------ 10 files changed, 121 insertions(+), 101 deletions(-) diff --git a/LICENSE b/LICENSE index a4e6be1..e3df58f 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2014 dedalodesign +Copyright (c) 2014 Giancarlo Soverini Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 9621f9b..04ecd41 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ This is a pure javascript slider, responsive, serving lazy loading images accord Inspired by many sources such as bLazy and Superslides. -You can use it together with RequireJs since it is AMD ready. +You can load it as a module since it is AMD ready. At the moment this plugin's size is 10.7 KB minified. @@ -32,14 +32,14 @@ Include the script into your page: Add the markup for your gallery: 
-<div id="your-carousel" class="elba-carousel">
-    <div class="elba" data-src="http://yourpicdefault|http://yourpicdefault@2x" data-src-medium="http://yourpicmedium|http://yourpicmedium@2x" data-src-large="http://yourpiclarge|http://yourpiclarge@2x">
-    </div>
+<figure id="your-carousel" class="elba-carousel">
+    <figure class="elba" data-src="http://yourpicdefault|http://yourpicdefault@2x" data-src-medium="http://yourpicmedium|http://yourpicmedium@2x" data-src-large="http://yourpiclarge|http://yourpiclarge@2x">
+    <figure>
     ...
-    <div class="elba" data-src="http://yourpicdefault|http://yourpicdefault@2x" data-src-medium="http://yourpicmedium|http://yourpicmedium@2x" data-src-large="http://yourpiclarge|http://yourpiclarge@2x">
-    </div>
+    <figure class="elba" data-src="http://yourpicdefault|http://yourpicdefault@2x" data-src-medium="http://yourpicmedium|http://yourpicmedium@2x" data-src-large="http://yourpiclarge|http://yourpiclarge@2x">
+    </figure>
     ...
-</div>	    	
+</figure>
As shown above you can optionally set multiple sources depending on the width of the device. A further option is declaring different sources for the same breakpoint, one for normal screens and the other one for retina screens, separating the sources with the default separator '|'. @@ -53,7 +53,7 @@ Then activate the plugin: breakpoints: [ { width: 768, // min-width - src: 'data-src-medium' + src: 'data-src-medium' }, { width: 1080, // min-width @@ -73,8 +73,8 @@ require(['elba'], function(elba){ src: 'data-src-medium' }, { - width: 1080, // min-width - src: 'data-src-large' + width: 1080, // min-width + src: 'data-src-large' } ]}); }) @@ -101,7 +101,7 @@ Available options: | dots | Whether to set or not the dots for the navigation | Boolean | true | | dotsContainer | Append the dots to a custom HTML element by passing its ID | Boolean/String | false | | slideshow | Interval between any slide. Set 0 to disable slideshow. Expressed in milliseconds | Number | 10000 | - +|preload | Number of pictures you want to load after the first one has been loaded | Number | 1 | ###List of predefined easings 1. easeInSine @@ -129,12 +129,62 @@ Available options: 23. easeOutBack 24. easeInOutBack +##API +
+	var gallery = new Elba( document.getElementById('your-carousel'), 
+				{ //Whatever options });
+
+	/**
+	* Goes to the next slide.
+	* @param {String}
+	*/			
+	gallery.goTo('right');
+
+	/**
+	* Goes to the previous slide.
+	* @param {String}
+	*/			
+	gallery.goTo('left');
+
+	/**
+	* Goes to the xth slide.
+	* @param {Number} starting from 1 to the [lenght]
+	*/			
+	gallery.goTo(x);
+
+	/**
+	* Starts the slideshow.
+	*/			
+	gallery.startSlideshow();
+
+	/**
+	* This method temporarly stops the slideshow,
+	* which is restarted after a click on a navigation button.
+	*/
+	gallery.clearSlideshow();
+
+	/**
+	* This method permanently stops the slideshow.
+	*/
+	gallery.stopSlideshow();
+
+	/**
+	* This function returns the current index of the slideshow
+	* @return {Number}
+	*/
+	gallery.getCurrent();
+
+
+ ##BROWSER SUPPORT Not tested yet, but working on all modern browser, IE9+. ##CHANGELOG +###v 0.2.0 +Refactoring, conditional loading, active slideshow only if in viewport + ###v 0.1.1 AMD ready @@ -142,11 +192,9 @@ AMD ready Initial release ##ROADMAP -+ API ++ Better API + Touch events + Tests -+ More intelligent conditional loading -+ Activate slideshow only if in viewport ##LICENSE MIT diff --git a/bower.json b/bower.json index 65fd48a..ae6e853 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "elbajs", - "version": "0.1.1", + "version": "0.2.0", "homepage": "https://github.com/iliketomatoes/elbajs", "authors": [ "Giancarlo Soverini " diff --git a/dist/elba/elba.js b/dist/elba/elba.js index a8becdc..3c95fcf 100644 --- a/dist/elba/elba.js +++ b/dist/elba/elba.js @@ -1,5 +1,5 @@ -/*! elba - v0.1.1 - 2014-11-13 -* https://github.com/dedalodesign/elbajs +/*! elba - v0.2.0 - 2014-11-14 +* https://github.com/iliketomatoes/elbajs * Copyright (c) 2014 ; Licensed */ ;(function(elba) { @@ -136,16 +136,6 @@ NodeList.prototype.remove = window.HTMLCollection.prototype.remove = function() } }; -/* - * Set function scope's trick - */ - -Function.prototype.setScope = function(scope) { - var f = this; - return function() { - f.apply(scope); - }; -}; @@ -616,21 +606,21 @@ this.init = function(){ _setupNavigation(self.base,'right'); //Attach events to the navigation arrows - bindEvent(self.base.navigation.left, 'click', function(ev) { + self.base.navigation.left.addEventListener('click', function(ev) { ev.preventDefault(); self.goTo('left'); if(self.options.slideshow){ self.startSlideshow(); } - }); + }, false); - bindEvent(self.base.navigation.right, 'click', function(ev) { + self.base.navigation.right.addEventListener('click', function(ev) { ev.preventDefault(); self.goTo('right'); if(self.options.slideshow){ self.startSlideshow(); } - }); + }, false); } //Setting up the dots @@ -660,7 +650,7 @@ this.init = function(){ //Binding the click event to the dots for(var i = 1; i < self.base.slides.length - 1; i++){ self.base.navigation.dots[i].setAttribute('data-target', i); - bindEvent(self.base.navigation.dots[i], 'click', dotHandler(i)); + self.base.navigation.dots[i].addEventListener('click', dotHandler(i), false); } } @@ -675,29 +665,29 @@ this.init = function(){ //Bind resize event - bindEvent(window, 'resize', function(){ + window.addEventListener('resize', function(){ _resizeHandler(self.base, self.options); - }); + },false); if(!!self.options.slideshow){ - if (typeof document.addEventListener !== 'undefined' || typeof document[hidden] !== 'undefined') { - // Set the name of the hidden property and the change event for visibility - var hidden, visibilityChange; - if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support - hidden = 'hidden'; - visibilityChange = 'visibilitychange'; - } else if (typeof document.mozHidden !== 'undefined') { - hidden = 'mozHidden'; - visibilityChange = 'mozvisibilitychange'; - } else if (typeof document.msHidden !== 'undefined') { - hidden =' msHidden'; - visibilityChange = 'msvisibilitychange'; - } else if (typeof document.webkitHidden !== 'undefined') { - hidden = 'webkitHidden'; - visibilityChange = 'webkitvisibilitychange'; - } + // Set the name of the hidden property and the change event for visibility + var hidden, visibilityChange; + if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support + hidden = 'hidden'; + visibilityChange = 'visibilitychange'; + } else if (typeof document.mozHidden !== 'undefined') { + hidden = 'mozHidden'; + visibilityChange = 'mozvisibilitychange'; + } else if (typeof document.msHidden !== 'undefined') { + hidden =' msHidden'; + visibilityChange = 'msvisibilitychange'; + } else if (typeof document.webkitHidden !== 'undefined') { + hidden = 'webkitHidden'; + visibilityChange = 'webkitvisibilitychange'; + } + if (typeof document[hidden] !== 'undefined') { // If the page is hidden, pause the slideshow; // if the page is shown, play the slideshow var handleVisibilityChange = function() { @@ -1055,10 +1045,6 @@ function getLeftOffset(element , multiplier){ return intVal(- (getContainerWidth(element) * multiplier)); } -function bindEvent(ele, type, fn) { - ele.addEventListener(type, fn, false); -} - function getContainer(el, parentClass){ while (el && el.parentNode) { diff --git a/dist/elba/elba.min.js b/dist/elba/elba.min.js index ac3728b..67448eb 100644 --- a/dist/elba/elba.min.js +++ b/dist/elba/elba.min.js @@ -1,4 +1,4 @@ -/*! elba - v0.1.1 - 2014-11-13 -* https://github.com/dedalodesign/elbajs +/*! elba - v0.2.0 - 2014-11-14 +* https://github.com/iliketomatoes/elbajs * Copyright (c) 2014 ; Licensed */ -!function(a){"use strict";"function"==typeof define&&define.amd?define(a):window.Elba=a()}(function(){"use strict";function a(a){return new RegExp("(^|\\s+)"+a+"(\\s+|$)")}function b(a,b){var c=r(a,b)?t:s;c(a,b)}function c(a,b){function c(a,b,c){if("right"===a.directionHint)a.count>1&&c+11&&c-1>0&&Math.abs(c+1-a.pointer)<=b.preload))return!1;c--,w(a,b,c)}}this.base={el:a,container:null,slides:[],wrapper:null,count:0,source:0,navigation:{left:null,right:null,dots:null},pointer:0,directionHint:"right",resizeTimout:null,animated:!1},this.options=h(this.defaults,b);var e=function(a,b){var c=a.el||document,d=c.querySelectorAll(b.selector);a.count=d.length;for(var e=a.count;e--;a.slides.unshift(d[e]));},f=function(a){a.wrapper=document.createElement("div"),a.wrapper.className="elba-wrapper",a.wrapper.wrap(a.el)},g=function(a){if(a.count>1){a.pointer=1;var b=a.slides[a.count-1].cloneNode(!0);a.el.insertBefore(b,a.el.firstChild),a.slides.unshift(b);var c=a.slides[1].cloneNode(!0);a.el.appendChild(c),a.slides.push(c),a.count+=2}a.slides.forEach(function(a){var b=document.createElement("img");b.className="elba-island",a.appendChild(b)})},l=function(a,b){a.navigation[b]=document.createElement("a"),a.navigation[b].className="elba-"+b+"-nav",a.navigation[b].innerHtml=b,a.wrapper.appendChild(a.navigation[b])},q=function(a,b){a.navigation.dots=[];var c;b?c=document.getElementById(b):(c=document.createElement("div"),c.className="elba-dots-ctr",a.wrapper.appendChild(c));for(var d=1;d=e?(b.height=c=Math.ceil(g),b.width=d=Math.ceil(g/e)):(b.height=c=Math.ceil(f*e),b.width=d=Math.ceil(f));var k=(f-d)/2,l=(g-c)/2;b.style.left=Math.ceil(k)+"px",b.style.top=Math.ceil(l)+"px"},w=function(a,b,d){var e=d||a.pointer,f=a.slides[e];(p(f,b.successClass)||p(f,b.errorClass))&&c(a,b,e);var g=f.getAttribute(a.source||b.src),h=f.querySelector(".elba-island");if(g){var i=g.split(b.separator),j=i[v&&i.length>1?1:0],k=new Image;k.onerror=function(){b.error&&b.error(f,"invalid"),f.className=f.className+" "+b.errorClass},k.onload=function(){if(h.src=j,t(a,h),u.add(f,"no-bg-img"),u.add(f,b.successClass),b.success&&b.success(f),a.count>1&&(1===e||0===e||e===a.count-1||e===a.count-2)){var d,g;d=1===e?a.slides[a.count-1]:e===a.count-1?a.slides[1]:0===e?a.slides[a.count-2]:a.slides[0],p(d,b.successClass)||(g=d.querySelector(".elba-island"),g.src=j,t(a,g),u.add(d,"no-bg-img"),u.add(d,b.successClass))}c(a,b,e)},k.src=j}else c(a,b,e),b.error&&b.error(f,"missing"),f.className=f.className+" "+b.errorClass},x=function(a){a.navigation.dots.forEach(function(a){a&&u.remove(a,"active-dot")});var b;b=a.pointer===a.slides.length-1?1:0===a.pointer?a.slides.length-2:a.pointer,a.navigation.dots[b]&&u.add(a.navigation.dots[b],"active-dot")},y=function(a,b){for(var c=a.slides.length,d=0;c>d;d++){var e=a.slides[d];e&&(u.remove(e,"no-bg-img"),u.remove(e,b.successClass))}},z=function(a,b){s(a),a.el.style.left=m(a.container,a.pointer)+"px";var c=a.source;if(r(a,b),c!==a.source)y(a,b),w(a,b);else for(var d=0;d1&&(a.base.el.style.left=-i(a.base.container)+"px"),a.options.navigation&&(l(a.base,"left"),l(a.base,"right"),n(a.base.navigation.left,"click",function(b){b.preventDefault(),a.goTo("left"),a.options.slideshow&&a.startSlideshow()}),n(a.base.navigation.right,"click",function(b){b.preventDefault(),a.goTo("right"),a.options.slideshow&&a.startSlideshow()})),a.options.dots){q(a.base,a.options.dotsContainer),u.add(a.base.navigation.dots[a.base.pointer],"active-dot");for(var b=function(b){return function(){var c=a.base.navigation.dots[b].getAttribute("data-target");return parseInt(c)===a.base.pointer?!1:(a.goTo(c),a.options.slideshow&&a.startSlideshow(),!1)}},c=1;c=c)return!1;b.base.directionHint="right",b.base.pointer++,w(b.base,b.options),d(b.base,b.options,"right")}else{if(b.base.pointer-1<0)return!1;b.base.directionHint="left",b.base.pointer--,w(b.base,b.options),d(b.base,b.options,"left")}}else if(!isNaN(a)){var e=b.base.pointer;b.base.pointer=parseInt(a),b.base.pointer>e?(b.base.directionHint="right",w(b.base,b.options),d(b.base,b.options,"right")):(b.base.directionHint="left",w(b.base,b.options),d(b.base,b.options,"left"))}b.options.dots&&x(b.base)}},this.init()}function d(a,b,c){function d(b){null===r&&(r=b);var c=b-r,f=c/o;f>1&&(f=1);var h=q(f).toFixed(6);e(g,h,j,k),1==f?(f=1,i>1&&(a.pointer===i-1?(a.pointer=1,g.style.left=m(a.container,a.pointer)+"px"):0===a.pointer&&(a.pointer=i-2,g.style.left=m(a.container,a.pointer)+"px")),a.animated=!1,r=null,x(n)):w(d)}var g=a.el;if(a.animated)return!1;a.animated=!0;var h=m(a.container,a.pointer),i=a.slides.length,j=l(g.style.left),k=Math.abs(j-h);"right"===c&&(k=-k);var n,o=b.duration,p=1e3/60/o/4,q=f(y[b.easing],p),r=null;if(w&&x)n=w(d);else var s=setInterval(function(){null===r&&(r=new Date);var b=new Date-r,c=b/o;c>1&&(c=1);var d=q(c).toFixed(6);e(g,d,j,k),1==c&&(i>1&&(self.pointer===i-1?(self.pointer=1,g.style.left=m(a.container,a.pointer)+"px"):0===self.pointer&&(self.pointer=i-2,g.style.left=(a.container,a.pointer+"px"))),clearInterval(s),r=null,self.animated=!1)},25)}function e(a,b,c,d){var e=c+d*b;a.style.left=Math.ceil(e)+"px"}function f(a,b){return g(a[0],a[1],a[2],a[3],b)}function g(a,b,c,d,e){var f=function(b){var d=1-b;return 3*d*d*b*a+3*d*b*b*c+b*b*b},g=function(a){var c=1-a;return 3*c*c*a*b+3*c*a*a*d+a*a*a},h=function(b){var d=1-b;return 3*(2*(b-1)*b+d*d)*a+3*(-b*b*b+2*d*b)*c};return function(a){var b,c,d,i,j,k,l=a;for(d=l,k=0;8>k;k++){if(i=f(d)-l,Math.abs(i)d)return g(b);if(d>c)return g(c);for(;c>b;){if(i=f(d),Math.abs(i-l)i?b=d:c=d,d=.5*(c-b)+b}return g(d)}}function h(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function i(a){return"undefined"!=typeof a&&a?a.offsetWidth:window.innerWidth||document.documentElement.clientWidth}function j(a){return"undefined"!=typeof a&&a?a.offsetHeight:window.innerHeight||document.documentElement.clientHeight}function k(a,b){if(a&&b)for(var c=a.length,d=0;c>d&&b(a[d],d)!==!1;d++);}function l(a){return a?parseInt(a,10):0}function m(a,b){return l(-(i(a)*b))}function n(a,b,c){a.addEventListener(b,c,!1)}function o(a,b){for(;a&&a.parentNode;)if(a=a.parentNode,a.className===b)return a;return null}function p(a,b){return u.has(a,b)}function q(a){"function"==typeof jQuery&&a instanceof jQuery&&(a=a[0]);var b=a.getBoundingClientRect();return b.top>=0&&b.left>=0&&b.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&b.right<=(window.innerWidth||document.documentElement.clientWidth)}var r,s,t;"classList"in document.documentElement?(r=function(a,b){return a.classList.contains(b)},s=function(a,b){a.classList.add(b)},t=function(a,b){a.classList.remove(b)}):(r=function(b,c){return a(c).test(b.className)},s=function(a,b){r(a,b)||(a.className=a.className+" "+b)},t=function(b,c){b.className=b.className.replace(a(c)," ")});var u={hasClass:r,addClass:s,removeClass:t,toggleClass:b,has:r,add:s,remove:t,toggle:b};window.classie=u,HTMLElement.prototype.wrap=function(a){a.length||(a=[a]);for(var b=a.length-1;b>=0;b--){var c=b>0?this.cloneNode(!0):this,d=a[b],e=d.parentNode,f=d.nextSibling;c.appendChild(d),f?e.insertBefore(c,f):e.appendChild(c)}},Element.prototype.remove=function(){this.parentElement.removeChild(this)},NodeList.prototype.remove=window.HTMLCollection.prototype.remove=function(){for(var a=0,b=this.length;b>a;a++)this[a]&&this[a].parentElement&&this[a].parentElement.removeChild(this[a])},Function.prototype.setScope=function(a){var b=this;return function(){b.apply(a)}};var v=window.devicePixelRatio>1,w=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame,x=window.cancelAnimationFrame||window.mozCancelAnimationFrame,y={easeInSine:[.47,0,.745,.715],easeOutSine:[.39,.575,.565,1],easeInOutSine:[.445,.05,.55,.95],easeInQuad:[.55,.085,.68,.53],easeOutQuad:[.25,.46,.45,.94],easeInOutQuad:[.455,.03,.515,.955],easeInCubic:[.55,.055,.675,.19],easeOutCubic:[.215,.61,.355,1],easeInOutCubic:[.645,.045,.355,1],easeInQuart:[.895,.03,.685,.22],easeOutQuart:[.165,.84,.44,1],easeInOutQuart:[.77,0,.175,1],easeInQuint:[.755,.05,.855,.06],easeOutQuint:[.23,1,.32,1],easeInOutQuint:[.86,0,.07,1],easeInExpo:[.95,.05,.795,.035],easeOutExpo:[.19,1,.22,1],easeInOutExpo:[1,0,0,1],easeInCirc:[.6,.04,.98,.335],easeOutCirc:[.075,.82,.165,1],easeInOutCirc:[.785,.135,.15,.86],easeInBack:[.6,-.28,.735,.045],easeOutBack:[.175,.885,.32,1.275],easeInOutBack:[.68,-.55,.265,1.55]};return c.prototype.defaults={selector:".elba",separator:"|",breakpoints:!1,successClass:"elba-loaded",errorClass:"elba-error",container:"elba-wrapper",src:"data-src",error:!1,success:!1,duration:1e3,easing:"easeInOutCubic",navigation:!0,dots:!0,dotsContainer:!1,slideshow:5e3,preload:1},c.prototype.startSlideshow=function(){var a=this;a.base.slides.length>1&&(a.slideshow&&clearInterval(a.slideshow),a.slideshow=setInterval(function(){if(!q(a.base.container))return!1;var b=a.base.slides[a.base.pointer+1];b&&(u.has(b,a.options.successClass)||u.has(b,a.options.errorClass))&&a.goTo("right")},a.options.slideshow))},c.prototype.clearSlideshow=function(){var a=this;a.slideshow&&clearInterval(a.slideshow)},c.prototype.stopSlideshow=function(){var a=this;a.slideshow&&clearInterval(a.slideshow),a.options.slideshow=0},c.prototype.getCurrent=function(){return this.base.pointer},c}); \ No newline at end of file +!function(a){"use strict";"function"==typeof define&&define.amd?define(a):window.Elba=a()}(function(){"use strict";function a(a){return new RegExp("(^|\\s+)"+a+"(\\s+|$)")}function b(a,b){var c=q(a,b)?s:r;c(a,b)}function c(a,b){function c(a,b,c){if("right"===a.directionHint)a.count>1&&c+11&&c-1>0&&Math.abs(c+1-a.pointer)<=b.preload))return!1;c--,v(a,b,c)}}this.base={el:a,container:null,slides:[],wrapper:null,count:0,source:0,navigation:{left:null,right:null,dots:null},pointer:0,directionHint:"right",resizeTimout:null,animated:!1},this.options=h(this.defaults,b);var e=function(a,b){var c=a.el||document,d=c.querySelectorAll(b.selector);a.count=d.length;for(var e=a.count;e--;a.slides.unshift(d[e]));},f=function(a){a.wrapper=document.createElement("div"),a.wrapper.className="elba-wrapper",a.wrapper.wrap(a.el)},g=function(a){if(a.count>1){a.pointer=1;var b=a.slides[a.count-1].cloneNode(!0);a.el.insertBefore(b,a.el.firstChild),a.slides.unshift(b);var c=a.slides[1].cloneNode(!0);a.el.appendChild(c),a.slides.push(c),a.count+=2}a.slides.forEach(function(a){var b=document.createElement("img");b.className="elba-island",a.appendChild(b)})},l=function(a,b){a.navigation[b]=document.createElement("a"),a.navigation[b].className="elba-"+b+"-nav",a.navigation[b].innerHtml=b,a.wrapper.appendChild(a.navigation[b])},p=function(a,b){a.navigation.dots=[];var c;b?c=document.getElementById(b):(c=document.createElement("div"),c.className="elba-dots-ctr",a.wrapper.appendChild(c));for(var d=1;d=e?(b.height=c=Math.ceil(g),b.width=d=Math.ceil(g/e)):(b.height=c=Math.ceil(f*e),b.width=d=Math.ceil(f));var k=(f-d)/2,l=(g-c)/2;b.style.left=Math.ceil(k)+"px",b.style.top=Math.ceil(l)+"px"},v=function(a,b,d){var e=d||a.pointer,f=a.slides[e];(o(f,b.successClass)||o(f,b.errorClass))&&c(a,b,e);var g=f.getAttribute(a.source||b.src),h=f.querySelector(".elba-island");if(g){var i=g.split(b.separator),j=i[u&&i.length>1?1:0],k=new Image;k.onerror=function(){b.error&&b.error(f,"invalid"),f.className=f.className+" "+b.errorClass},k.onload=function(){if(h.src=j,s(a,h),t.add(f,"no-bg-img"),t.add(f,b.successClass),b.success&&b.success(f),a.count>1&&(1===e||0===e||e===a.count-1||e===a.count-2)){var d,g;d=1===e?a.slides[a.count-1]:e===a.count-1?a.slides[1]:0===e?a.slides[a.count-2]:a.slides[0],o(d,b.successClass)||(g=d.querySelector(".elba-island"),g.src=j,s(a,g),t.add(d,"no-bg-img"),t.add(d,b.successClass))}c(a,b,e)},k.src=j}else c(a,b,e),b.error&&b.error(f,"missing"),f.className=f.className+" "+b.errorClass},w=function(a){a.navigation.dots.forEach(function(a){a&&t.remove(a,"active-dot")});var b;b=a.pointer===a.slides.length-1?1:0===a.pointer?a.slides.length-2:a.pointer,a.navigation.dots[b]&&t.add(a.navigation.dots[b],"active-dot")},x=function(a,b){for(var c=a.slides.length,d=0;c>d;d++){var e=a.slides[d];e&&(t.remove(e,"no-bg-img"),t.remove(e,b.successClass))}},y=function(a,b){r(a),a.el.style.left=m(a.container,a.pointer)+"px";var c=a.source;if(q(a,b),c!==a.source)x(a,b),v(a,b);else for(var d=0;d1&&(a.base.el.style.left=-i(a.base.container)+"px"),a.options.navigation&&(l(a.base,"left"),l(a.base,"right"),a.base.navigation.left.addEventListener("click",function(b){b.preventDefault(),a.goTo("left"),a.options.slideshow&&a.startSlideshow()},!1),a.base.navigation.right.addEventListener("click",function(b){b.preventDefault(),a.goTo("right"),a.options.slideshow&&a.startSlideshow()},!1)),a.options.dots){p(a.base,a.options.dotsContainer),t.add(a.base.navigation.dots[a.base.pointer],"active-dot");for(var b=function(b){return function(){var c=a.base.navigation.dots[b].getAttribute("data-target");return parseInt(c)===a.base.pointer?!1:(a.goTo(c),a.options.slideshow&&a.startSlideshow(),!1)}},c=1;c=c)return!1;b.base.directionHint="right",b.base.pointer++,v(b.base,b.options),d(b.base,b.options,"right")}else{if(b.base.pointer-1<0)return!1;b.base.directionHint="left",b.base.pointer--,v(b.base,b.options),d(b.base,b.options,"left")}}else if(!isNaN(a)){var e=b.base.pointer;b.base.pointer=parseInt(a),b.base.pointer>e?(b.base.directionHint="right",v(b.base,b.options),d(b.base,b.options,"right")):(b.base.directionHint="left",v(b.base,b.options),d(b.base,b.options,"left"))}b.options.dots&&w(b.base)}},this.init()}function d(a,b,c){function d(b){null===r&&(r=b);var c=b-r,f=c/o;f>1&&(f=1);var h=q(f).toFixed(6);e(g,h,j,k),1==f?(f=1,i>1&&(a.pointer===i-1?(a.pointer=1,g.style.left=m(a.container,a.pointer)+"px"):0===a.pointer&&(a.pointer=i-2,g.style.left=m(a.container,a.pointer)+"px")),a.animated=!1,r=null,w(n)):v(d)}var g=a.el;if(a.animated)return!1;a.animated=!0;var h=m(a.container,a.pointer),i=a.slides.length,j=l(g.style.left),k=Math.abs(j-h);"right"===c&&(k=-k);var n,o=b.duration,p=1e3/60/o/4,q=f(x[b.easing],p),r=null;if(v&&w)n=v(d);else var s=setInterval(function(){null===r&&(r=new Date);var b=new Date-r,c=b/o;c>1&&(c=1);var d=q(c).toFixed(6);e(g,d,j,k),1==c&&(i>1&&(self.pointer===i-1?(self.pointer=1,g.style.left=m(a.container,a.pointer)+"px"):0===self.pointer&&(self.pointer=i-2,g.style.left=(a.container,a.pointer+"px"))),clearInterval(s),r=null,self.animated=!1)},25)}function e(a,b,c,d){var e=c+d*b;a.style.left=Math.ceil(e)+"px"}function f(a,b){return g(a[0],a[1],a[2],a[3],b)}function g(a,b,c,d,e){var f=function(b){var d=1-b;return 3*d*d*b*a+3*d*b*b*c+b*b*b},g=function(a){var c=1-a;return 3*c*c*a*b+3*c*a*a*d+a*a*a},h=function(b){var d=1-b;return 3*(2*(b-1)*b+d*d)*a+3*(-b*b*b+2*d*b)*c};return function(a){var b,c,d,i,j,k,l=a;for(d=l,k=0;8>k;k++){if(i=f(d)-l,Math.abs(i)d)return g(b);if(d>c)return g(c);for(;c>b;){if(i=f(d),Math.abs(i-l)i?b=d:c=d,d=.5*(c-b)+b}return g(d)}}function h(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function i(a){return"undefined"!=typeof a&&a?a.offsetWidth:window.innerWidth||document.documentElement.clientWidth}function j(a){return"undefined"!=typeof a&&a?a.offsetHeight:window.innerHeight||document.documentElement.clientHeight}function k(a,b){if(a&&b)for(var c=a.length,d=0;c>d&&b(a[d],d)!==!1;d++);}function l(a){return a?parseInt(a,10):0}function m(a,b){return l(-(i(a)*b))}function n(a,b){for(;a&&a.parentNode;)if(a=a.parentNode,a.className===b)return a;return null}function o(a,b){return t.has(a,b)}function p(a){"function"==typeof jQuery&&a instanceof jQuery&&(a=a[0]);var b=a.getBoundingClientRect();return b.top>=0&&b.left>=0&&b.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&b.right<=(window.innerWidth||document.documentElement.clientWidth)}var q,r,s;"classList"in document.documentElement?(q=function(a,b){return a.classList.contains(b)},r=function(a,b){a.classList.add(b)},s=function(a,b){a.classList.remove(b)}):(q=function(b,c){return a(c).test(b.className)},r=function(a,b){q(a,b)||(a.className=a.className+" "+b)},s=function(b,c){b.className=b.className.replace(a(c)," ")});var t={hasClass:q,addClass:r,removeClass:s,toggleClass:b,has:q,add:r,remove:s,toggle:b};window.classie=t,HTMLElement.prototype.wrap=function(a){a.length||(a=[a]);for(var b=a.length-1;b>=0;b--){var c=b>0?this.cloneNode(!0):this,d=a[b],e=d.parentNode,f=d.nextSibling;c.appendChild(d),f?e.insertBefore(c,f):e.appendChild(c)}},Element.prototype.remove=function(){this.parentElement.removeChild(this)},NodeList.prototype.remove=window.HTMLCollection.prototype.remove=function(){for(var a=0,b=this.length;b>a;a++)this[a]&&this[a].parentElement&&this[a].parentElement.removeChild(this[a])};var u=window.devicePixelRatio>1,v=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame,w=window.cancelAnimationFrame||window.mozCancelAnimationFrame,x={easeInSine:[.47,0,.745,.715],easeOutSine:[.39,.575,.565,1],easeInOutSine:[.445,.05,.55,.95],easeInQuad:[.55,.085,.68,.53],easeOutQuad:[.25,.46,.45,.94],easeInOutQuad:[.455,.03,.515,.955],easeInCubic:[.55,.055,.675,.19],easeOutCubic:[.215,.61,.355,1],easeInOutCubic:[.645,.045,.355,1],easeInQuart:[.895,.03,.685,.22],easeOutQuart:[.165,.84,.44,1],easeInOutQuart:[.77,0,.175,1],easeInQuint:[.755,.05,.855,.06],easeOutQuint:[.23,1,.32,1],easeInOutQuint:[.86,0,.07,1],easeInExpo:[.95,.05,.795,.035],easeOutExpo:[.19,1,.22,1],easeInOutExpo:[1,0,0,1],easeInCirc:[.6,.04,.98,.335],easeOutCirc:[.075,.82,.165,1],easeInOutCirc:[.785,.135,.15,.86],easeInBack:[.6,-.28,.735,.045],easeOutBack:[.175,.885,.32,1.275],easeInOutBack:[.68,-.55,.265,1.55]};return c.prototype.defaults={selector:".elba",separator:"|",breakpoints:!1,successClass:"elba-loaded",errorClass:"elba-error",container:"elba-wrapper",src:"data-src",error:!1,success:!1,duration:1e3,easing:"easeInOutCubic",navigation:!0,dots:!0,dotsContainer:!1,slideshow:5e3,preload:1},c.prototype.startSlideshow=function(){var a=this;a.base.slides.length>1&&(a.slideshow&&clearInterval(a.slideshow),a.slideshow=setInterval(function(){if(!p(a.base.container))return!1;var b=a.base.slides[a.base.pointer+1];b&&(t.has(b,a.options.successClass)||t.has(b,a.options.errorClass))&&a.goTo("right")},a.options.slideshow))},c.prototype.clearSlideshow=function(){var a=this;a.slideshow&&clearInterval(a.slideshow)},c.prototype.stopSlideshow=function(){var a=this;a.slideshow&&clearInterval(a.slideshow),a.options.slideshow=0},c.prototype.getCurrent=function(){return this.base.pointer},c}); \ No newline at end of file diff --git a/index.html b/index.html index 07b2acf..7e6be7e 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@ - +