Fix visibilityChange listener

iliketomatoes · Nov 14, 2014 · 4b7f577 · 4b7f577
1 parent e4f9ca6
commit 4b7f577
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 101 deletions.
diff --git 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
@@ -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:
 <pre lang="html">
-&lt;div id="your-carousel" class="elba-carousel"&gt;
-    &lt;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"&gt;
-    &lt;/div&gt;
+&lt;figure id="your-carousel" class="elba-carousel"&gt;
+    &lt;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"&gt;
+    &lt;figure&gt;
     ...
-    &lt;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"&gt;
-    &lt;/div&gt;
+    &lt;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"&gt;
+    &lt;/figure&gt;
     ...
-&lt;/div&gt;	    	
+&lt;/figure&gt;	    	
 </pre> 
 
 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,24 +129,72 @@ Available options:
 23. easeOutBack
 24. easeInOutBack
 
+##API
+<pre lang="javascript">
+	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();
+
+</pre>	
+
 ##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
 
 ###v 0.1
 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
@@ -1,6 +1,6 @@
 {
   "name": "elbajs",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "homepage": "https://github.com/iliketomatoes/elbajs",
   "authors": [
     "Giancarlo Soverini <giancarlosoverini@gmail.com>"

diff --git 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
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
         <![endif]-->
     </head>
     <body>
-        <div id="carousel" class="elba-carousel">
+        <figure id="carousel" class="elba-carousel">
             <figure class="elba" data-src="http://www.placebear.com/768/400" data-src-medium="http://www.placebear.com/1080/650" data-src-large="http://www.placebear.com/1400/800">
                 <figcaption class="elba-content">
                     <div class="elba-banner">
@@ -41,7 +41,7 @@ <h1>3</h1>
                     </div>
                 </figcaption>
              </figure>
-        </div>
+        </figure>
 
         <!--<div>
             <h1>Elba js</h1>

diff --git a/package.json b/package.json
@@ -1,20 +1,20 @@
 {
   "name": "elba",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "RWD, multi-serving, pure javascript gallery",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/dedalodesign/elbajs.git"
+    "url": "https://github.com/iliketomatoes/elbajs.git"
   },
   "author": "Giancarlo Soverini",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/dedalodesign/elbajs/issues"
+    "url": "https://github.com/iliketomatoes/elbajs/issues"
   },
-  "homepage": "https://github.com/dedalodesign/elbajs",
+  "homepage": "https://github.com/iliketomatoes/elbajs",
   "devDependencies": {
     "grunt": "^0.4.5",
     "grunt-contrib-clean": "^0.6.0",

diff --git a/src/dependencies.js b/src/dependencies.js
@@ -121,15 +121,5 @@ 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);
-  };
-};
 
 
diff --git a/src/helpers.js b/src/helpers.js
@@ -42,10 +42,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) {