Bug fixes, renaming php -> html for better off-line support

css/apple.css

@@ -12,7 +12,7 @@ div.jsTouch {
 div.jsTouchPanel {
 	border-left: 2px solid #999999; 
 	overflow: hidden; 
-	background-color: blacl;
+	background-color: black;
 }
 
 div.jsTouch a { 
@@ -112,18 +112,22 @@ div.jsTouch div.toolbar h1{
 }
 
 .back > span {
-	left: -7px;
-	background: -webkit-gradient(linear, left top, right bottom, color-stop(0,#496387), color-stop(.03,#9CB0CF), color-stop(.6,#455E80), color-stop(1,#5D7EAB));
-	border-left: 1px solid #5b6572;
-	border-bottom: 1px solid #5b6572;
-	-webkit-border-top-left-radius: 6px;
-	-webkit-border-bottom-right-radius: 6px;
-	-webkit-transform: rotate(45deg);
-	-webkit-mask-image: -webkit-gradient(linear, left bottom, right top, from(#000000), color-stop(0.37,#000000), color-stop(0.37, transparent), to(transparent));
+	top: 0px;
+	left: -11px;
+	height: 25px;
+	background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0,#496387), color-stop(.03,#9CB0CF), color-stop(.6,#455E80), color-stop(1,#5D7EAB));
+	border: 0px;
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=);
+	-webkit-mask-size: 13px 27px;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position-x: 0px;
+	-webkit-mask-position-y: 0px;
+	-webkit-mask-clip: border;
+	-webkit-box-sizing: border-box;	
 }	
 
 .back.clicked > span {
-	background-image: -webkit-gradient(linear, left top, right bottom, from(#7AD62B),  to(#56961E));
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7AD62B),  to(#56961E));
 }
 
 .button.next {

css/ipad-dark.css

@@ -111,14 +111,18 @@ div.jsTouch div.toolbar h1{
 }
 
 .back > span {
-	left: -7px;
-	background: -webkit-gradient(linear, left top, right bottom, from(#A6A6A6), to(#B5B5B5), color-stop(.5,#7A7A7A),color-stop(.5,#5C5C5C));
-	border-left: 1px solid #222222;
-	border-bottom: 1px solid #222222;
-	-webkit-border-top-left-radius: 6px;
-	-webkit-border-bottom-right-radius: 6px;
-	-webkit-transform: rotate(45deg);
-	-webkit-mask-image: -webkit-gradient(linear, left bottom, right top, from(#000000), color-stop(0.38,#000000), color-stop(0.38, transparent), to(transparent));
+	top: 0px;
+	left: -10px;
+	height: 25px;
+	background: -webkit-gradient(linear, 0 0, 0 100%, from(#A6A6A6), to(#B5B5B5), color-stop(.5,#7A7A7A),color-stop(.5,#5C5C5C));
+	border: 0px;
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=);
+	-webkit-mask-size: 13px 26px;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position-x: 0px;
+	-webkit-mask-position-y: 0px;
+	-webkit-mask-clip: border;
+	-webkit-box-sizing: border-box;	
 }	
 
 .back.clicked > span {

css/ipad-light.css

@@ -114,18 +114,22 @@ div.jsTouch div.toolbar h1{
 }
 
 .back > span {
-	left: -7px;
-	background: -webkit-gradient(linear, left top, right bottom, from(#BCBDBF), to(#717882));
-	border-left: 1px solid #222222;
-	border-bottom: 1px solid #222222;
-	-webkit-border-top-left-radius: 6px;
-	-webkit-border-bottom-right-radius: 6px;
-	-webkit-transform: rotate(45deg);
-	-webkit-mask-image: -webkit-gradient(linear, left bottom, right top, from(#000000), color-stop(0.38,#000000), color-stop(0.38, transparent), to(transparent));
+	top: 0px;
+	left: -11px;
+	height: 25px;
+	background: -webkit-gradient(linear, 0 0, 0 100%, from(#BCBDBF), to(#717882));
+	border: 0px;
+	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAABGCAYAAADb7SQ4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiNJREFUeNrEWb9LQlEUvj5BcHoQvMnVKXD1D3CLwqBJbHJsazQaWoSCxgbHJiMIAiNok6AhCDdXVycnJ8EQOgeOYaG+d39998KH+HyP753zzjnfd325xfdSgVeV8B6BScuEV0IRSbxHeCMk/AVFXCA8ScQKSXxPqK0fQBBfE5r/D+Y8VzUT9jb94DPimqRYIYkrhGcpKhhxIqTxrpNcExdlQJTTTnRJnCc8ykhUSOIOoZ71ZFfEZ4S2zgUu+rguxZRHEnPbfKRVsOtUl0RtYpOLTYljIS2Z3nVk2DY9SbNCEt8RDm0rUpe4La1jvXSqmtum72raZI24KuNQIYl/nSGSOJb0Jq61M0pxhjwK9304hUjHGSKILzc5Q5drUzttdYY+I97pDH1FzG0zNFUb04gTG4kzJS5kdYauiZtZnaFr4ooKsCIVaDHxKAQxt1NBnGIVHfGCcEQYh3jGU8KBfMKLiyM+lgzAq/qT0ArVTg+Ei1B9fEPoovV4fcfQd2HedScX39GprwGTNjJn0maTELN6IuSzECLB6T5x2eM66jQgnIeSxa60GnS3uL56tr7b1Ai0JPVwYi6yho2U2lgfKym19VxjMRHzEGbvS9K+RBPzetGVUpf29lZHSl2/DMnLvwh1ZMQrKW3Ic4fvJOZS6ZMQW5hpmpT63DvtlFLfm7bBNruM2C2yXb7y3U6ZpRS5P/4jpUjihRTbCJ3q1eL3GMMfAQYAJmB6SBO619IAAAAASUVORK5CYII=);
+	-webkit-mask-size: 13px 27px;
+	-webkit-mask-repeat: no-repeat;
+	-webkit-mask-position-x: 0px;
+	-webkit-mask-position-y: 0px;
+	-webkit-mask-clip: border;
+	-webkit-box-sizing: border-box;	
 }	
 
 .button:hover > span, .back.clicked > span {
-	background-image: -webkit-gradient(linear, left top, right bottom, from(#24CCFF), to(#1A83D4), color-stop(.5,#1A88DB),color-stop(.5,#187BC7));
+	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#24CCFF), to(#1A83D4), color-stop(.5,#1A88DB),color-stop(.5,#187BC7));
 }
 
 .button.next {

includes/cache.js

@@ -0,0 +1,48 @@
+// Convenience array of status values
+var cacheStatusValues = [];
+cacheStatusValues[0] = 'uncached';
+cacheStatusValues[1] = 'idle';
+cacheStatusValues[2] = 'checking';
+cacheStatusValues[3] = 'downloading';
+cacheStatusValues[4] = 'updateready';
+cacheStatusValues[5] = 'obsolete';
+
+// Listeners for all possible events
+var cache = window.applicationCache;
+cache.addEventListener('cached', logEvent, false);
+cache.addEventListener('checking', logEvent, false);
+cache.addEventListener('downloading', logEvent, false);
+cache.addEventListener('error', logEvent, false);
+cache.addEventListener('noupdate', logEvent, false);
+cache.addEventListener('obsolete', logEvent, false);
+cache.addEventListener('progress', logEvent, false);
+cache.addEventListener('updateready', logEvent, false);
+
+// Log every event to the console
+function logEvent(e) {
+    var online, status, type, message;
+    online = (navigator.onLine) ? 'yes' : 'no';
+    status = cacheStatusValues[cache.status];
+    type = e.type;
+    message = 'online: ' + online;
+    message+= ', event: ' + type;
+    message+= ', status: ' + status;
+    if (type == 'error' && navigator.onLine) {
+        message+= ' (prolly a syntax error in manifest)';
+    }
+    console.log(message);
+}
+
+// Swap in newly downloaded files when update is ready
+window.applicationCache.addEventListener(
+    'updateready', 
+    function(){
+		alert('cache ready');
+        window.applicationCache.swapCache();
+        console.log('swap cache has been called');
+    }, 
+    false
+);
+
+// Check for manifest changes every 10 seconds
+setInterval(function(){cache.update()}, 15000);

includes/jsTouch.js

@@ -26,12 +26,16 @@ var jsTouch = {
 
 	overlayHTML: function(HTML, params, callBack) {
 		// parse parameters
+		var top 		= 52;
+		var left 		= 10;
 		var width  		= 300;
 		var height 		= 300;
 		var modal 		= false;
 		var opacity 	= 0.3;		
 		var bgcolor		= 'black';
 		if (typeof(params) == 'object') {
+			if (String(params['top']) 		!= 'undefined') width		= parseInt(params['top']);
+			if (String(params['left']) 		!= 'undefined') width		= parseInt(params['left']);
 			if (String(params['width']) 	!= 'undefined') width		= parseInt(params['width']);
 			if (String(params['height']) 	!= 'undefined') height		= parseInt(params['height']);
 			if (String(params['modal']) 	!= 'undefined') modal 		= params['modal'];
@@ -58,7 +62,7 @@ var jsTouch = {
 		var div = document.createElement('div');
 		div.id = 'overlay_box';
 		div.className = 'overlay';
-		div.style.cssText += 'left: 10px; top: 52px; width: '+ width +'px; height: '+ height +'px; -webkit-border-radius: 5px; '+
+		div.style.cssText += 'left: '+ left +'px; top: '+ top +'px; width: '+ width +'px; height: '+ height +'px; -webkit-border-radius: 5px; '+
 			'-webkit-transition: all .4s ease-in-out; opacity: 0;';
 		div.innerHTML = HTML;
 		$(document.body).append(div);			
@@ -304,6 +308,16 @@ function jsTouchBox(name, params) {
 				div_new.innerHTML = HTML;
 				break;
 		}
+		// execute scripts
+		var d =	div_new.getElementsByTagName("script");
+		var t = d.length;
+		for (var x = 0; x < t; x++) {
+			var ns = document.createElement('script');
+			ns.type = "text/javascript";
+			ns.text = d[x].text;
+			div_new.appendChild(ns);
+		}				
+		// -------
 		this.resize();
 		this.initScroll();
 	}
@@ -413,7 +427,10 @@ function jsTouchBox(name, params) {
 	div2.className = 'jsTouch div2';
 	$('#'+this.name).append(div1);
 	$('#'+this.name).append(div2);
-
-	// -- resize events
-	window.addEventListener('resize', new Function("setTimeout(\"window.elements['"+ this.name +"'].resize()\", 1)"));
-}
+	// -- resize event
+	// window.addEventListener('resize', new Function("setTimeout(\"window.elements['"+ this.name +"'].resize()\", 1)"));
+}
+
+// -- few events
+window.addEventListener('resize', new Function("setTimeout(\"jsTouch.resize()\", 1)"));
+window.applicationCache.addEventListener('updateready', function(){ window.applicationCache.swapCache(); }, false);

index.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html manifest="manifest.php"><head>	<title>Web 2.0 Touch</title>	<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no; width=device-width;" />	<meta name="apple-mobile-web-app-capable" content="yes" />	<meta name="apple-mobile-web-app-status-bar-style" content="black" />		<link rel="apple-touch-startup-image" href="images/iphone_startup.png" />	<link rel="apple-touch-icon" href="images/iphone_icon.png" />	<link id="coreCSS" type="text/css" rel="stylesheet" media="screen" href="css/core.css">	<link id="mainCSS" type="text/css" rel="stylesheet" media="screen" href="css/ipad-dark.css">		<script type="text/javascript" src="includes/jquery.js"></script>	<script type="text/javascript" src="includes/jsTouch.js"></script>	<script type="text/javascript" src="includes/iscroll.js"></script>	<script type="text/javascript">		var myTouch; 		var myTouch2;		$(document).ready(function () { 			myTouch  = jsTouch.init('myTouch', { width: 320, page: 'pages/home.html' } );			myTouch2 = jsTouch.init('myTouch2', { width: -320, page: 'pages/home.html' } );			// unload page event			//window.onbeforeunload = function() { return 'All unsaved data will be lost.'; }						jsTouch.resize();		});		// prevent default scroll 		document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);	</script></head><body style="background-image: url(images/iphone_startup.png);">	<div id="myTouch" class="jsTouchPanel" style="position: absolute; left: 0px; top: 0px; border-left: 0px !important;">	</div> 	<div id="myTouch2" class="jsTouchPanel" style="position: absolute; left: 320px; top: 0px;">	</div> </body></html>

pages/animations.php → pages/animations.html

@@ -1,38 +1,38 @@
 <div class="toolbar">
 	<h1>Animations</h1>
-	<a class="button back" onclick="jsTouch.loadPage('pages/home.php', { transition: 'slide-right' });"><span></span>Back</a>
+	<a class="button back" onclick="jsTouch.loadPage('pages/home.html', { transition: 'slide-right' });"><span></span>Back</a>
 </div>
 <div class="content">
 <div>
 	<h2>Flip Transitions</h2>
 	<ul class="rounded">
-		<li><a onclick="jsTouch.loadPage('pages/animations.php', { transition: 'flip-left' });">
+		<li><a onclick="jsTouch.loadPage('pages/animations.html', { transition: 'flip-left' });">
 			<img src="images/tabs/go-left.png" class="icon">Flip Left</a></li>
-		<li><a onclick="jsTouch.loadPage('pages/animations.php', { transition: 'flip-right' });">
+		<li><a onclick="jsTouch.loadPage('pages/animations.html', { transition: 'flip-right' });">
 			<img src="images/tabs/go-right.png" class="icon">Flip Right</a></li>
-		<li><a onclick="jsTouch.loadPage('pages/animations.php', { transition: 'flip-top' });">
+		<li><a onclick="jsTouch.loadPage('pages/animations.html', { transition: 'flip-top' });">
 			<img src="images/tabs/go-left.png" class="icon">Flip Top</a></li>
-		<li><a onclick="jsTouch.loadPage('pages/animations.php', { transition: 'flip-bottom' });">
+		<li><a onclick="jsTouch.loadPage('pages/animations.html', { transition: 'flip-bottom' });">
 			<img src="images/tabs/go-right.png" class="icon">Flip Bottom</a></li>
 	</ul>
 
 	<h2>Disolve Transitions</h2>
 	<ul class="rounded">
-		<li><a onclick="jsTouch.loadPage('pages/animations.php', { transition: 'pop-in' });">
+		<li><a onclick="jsTouch.loadPage('pages/animations.html', { transition: 'pop-in' });">
 			<img src="images/tabs/go-left.png" class="icon">Pop In</a></li>
-		<li><a onclick="jsTouch.loadPage('pages/animations.php', { transition: 'pop-out' });">
+		<li><a onclick="jsTouch.loadPage('pages/animations.html', { transition: 'pop-out' });">
 			<img src="images/tabs/go-right.png" class="icon">Pop Out</a></li>
 	</ul>
 
 	<h2>Slide Transitions</h2>
 	<ul class="rounded">
-		<li><a onclick="jsTouch.loadPage('pages/animations.php', { transition: 'slide-left' });">
+		<li><a onclick="jsTouch.loadPage('pages/animations.html', { transition: 'slide-left' });">
 			<img src="images/tabs/go-left.png" class="icon">Slide Left</a></li>
-		<li><a onclick="jsTouch.loadPage('pages/animations.php', { transition: 'slide-right' });">
+		<li><a onclick="jsTouch.loadPage('pages/animations.html', { transition: 'slide-right' });">
 			<img src="images/tabs/go-right.png" class="icon">Slide Right</a></li>
-		<li><a onclick="jsTouch.loadPage('pages/animations.php', { transition: 'slide-up' });">
+		<li><a onclick="jsTouch.loadPage('pages/animations.html', { transition: 'slide-up' });">
 			<img src="images/tabs/go-left.png" class="icon">Slide Up</a></li>
-		<li><a onclick="jsTouch.loadPage('pages/animations.php', { transition: 'slide-down' });">
+		<li><a onclick="jsTouch.loadPage('pages/animations.html', { transition: 'slide-down' });">
 			<img src="images/tabs/go-right.png" class="icon">Slide Down</a></li>
 	</ul>
 	<div style="padding: 0px 15px">

pages/buttons.php → pages/buttons.html

@@ -1,6 +1,6 @@
 <div class="toolbar">
 	<h1>Buttons</h1>
-	<a class="button back" onclick="jsTouch.loadPage('pages/home.php', { transition: 'slide-right' });"><span></span>Back</a>
+	<a class="button back" onclick="jsTouch.loadPage('pages/home.html', { transition: 'slide-right' });"><span></span>Back</a>
 </div>
 <div class="content">
 <div>

pages/forms.html

@@ -0,0 +1 @@
+<div class="toolbar">	<h1>Forms</h1>	<a class="button back" onclick="jsTouch.loadPage('pages/home.html', { transition: 'slide-right' });"><span></span>Back</a></div><div class="content"><div>	<form name="lform" method="post" target="lframe" action="pages/forms_save.php">		<ul class="rounded">				<!--li>					<div class="label">Active</div>					<div class="field"><input type="checkbox" name="active" 						onclick="alert(1); if ($(this)[0].checked) $(this).addClass('checked'); else $(this).removeClass('checked');"></div>					<div class="clear"></div>				</li-->				<li>					<div class="label">First Name</div>					<div class="field"><input type="text" name="fname" value=""></div>					<div class="clear"></div>				</li>				<li>					<div class="label">Last Name</div>					<div class="field"><input type="text" name="lname" value=""></div>					<div class="clear"></div>				</li>				<li>					<div class="label">URL</div>					<div class="field"><input type="url" name="url" value="" autocapitalize="off"></div>					<div class="clear"></div>				</li>				<li>					<div class="label">Email</div>					<div class="field"><input type="email" name="email" value="" autocapitalize="off"></div>					<div class="clear"></div>				</li>				<li>					<div class="label">Login</div>					<div class="field"><input type="text" name="login" value="" autocapitalize="off"></div>					<div class="clear"></div>				</li>				<li>					<div class="label">Password</div>					<div class="field"><input type="password" name="password" value="" autocapitalize="off"></div>					<div class="clear"></div>				</li>		</ul>		<div style="text-align: center">			<a href="javascript: document.lform.submit();" class="button-green" style="width: 270px">Save Record</a>			<br><br>			<iframe name="lframe"></iframe>			<br><br>		</div>	</form></div></div>