Updated the demo to include a showing whats cached

paulprins · paulprins · commit d6c10489a5d4 · 2014-08-19T02:14:24.000-05:00
diff --git a/demo.html b/demo.html
@@ -1,8 +1,11 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <title>jQuery Cache Images v1.0 Plug-in Demo</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><!-- please don't add "maximum-scale=1" here. It's bad for accessibility. -->
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 	<script type="text/javascript" src="assets/jquery-1.9.1.js"></script>
 	<script type="text/javascript" src="jquery.cacheImages.js"></script>
@@ -14,18 +17,18 @@ <h1>jQuery Cache Images v1.0 Plug-in</h1>
 
 	<p>Use the following buttons to perform some basic checks on the cache</p>
 	<p>
-		<button id="cacheLoadAdd">Display all cached images</button>
-		<button id="cacheStats">Cache Stats</button>
+		<button id="cacheLoadAll">Display all cached images</button>
 		<button id="dropCache">Empty the Cache</button>
 	</p>
-	<div id="statWindow" style="text-align: center;"></div>
+	<div id="statWindow" style="text-align: center; border: 5px solid; min-height: 40px;"></div>
+	<div style="text-align: right;"><button onclick="$('#statWindow').html('');">Empty Display</button></div>
 
 	<p>Images are kept in browser's Local Storage as a base64 encoded string. </p>
 
-	<ul id="DemoImages">
-	  <li><img src="assets/x-all-the-things.png" /></li>
-	  <li><img src="assets/cat.gif" /></li>
-	  <li><img src="assets/warhol.jpg" /></li>
+	<div id="DemoImages">
+		<img src="assets/x-all-the-things.png" />
+		<img src="assets/cat.gif" />
+		<img src="assets/warhol.jpg" />
 	</ul>
 
 
@@ -47,11 +50,37 @@ <h2>Flickr Test</h2>
 		$(function(){
 			// $('#flickrTest').cacheImages({debug: true});
 			$(document).on('click','#dropCache', function(){ cacheImagesDrop();	});
+			$(document).on('click','#cacheLoadAll', function(){	cacheImagesShowAll( $('#statWindow') ); });
 		});
 
+		/*
+		 *	Grab all of the images and display them inside the container
+		 */
+
+		var cacheKeys = [];	// Store the keys we need to drop here
 		var cacheImagesShowAll = function( container ){
-			
-		}
+			var cacheKeys = [];	// Store the keys we need to drop here
+			// Lets get our loop on
+			for (i = 0; i < window.localStorage.length; i++) {
+				if( window.localStorage.key(i).substr( 0, window.cacheImagesConfig.storagePrefix.length + 1 ) !== window.cacheImagesConfig.storagePrefix + ':' ){ continue; }	// Does not match our prefix?
+
+				cacheKeys.push( window.localStorage.key(i) ); // Droping the keys here re-indexes the localStorage so that the offset in our loop is wrong
+			}
+
+			if( cacheKeys.length ===  0 ){
+				if( window.cacheImagesConfig.debug ){ console.log( 'No Images to Drop' ); }
+				return true;
+			}
+
+			// Show the images we found
+			for( i = 0; i < cacheKeys.length; i++ ){
+				// if( $('#' + cacheKeys[i] ).length > 0 ){ continue; }
+
+				container.append( $('<img />').prop( 'src', window.localStorage.getItem( cacheKeys[i] ) ).width('25%') );
+			}
+
+			return true;
+		};
 	</script>
   </body>
 </html>
