[Tynstep-svn] r252 - in trunk/step/step-web/src/main/webapp: . js_mobile

ChrisBurrell at crosswire.org ChrisBurrell at crosswire.org
Fri Apr 20 12:43:48 MST 2012


Author: ChrisBurrell
Date: 2012-04-20 12:43:48 -0700 (Fri, 20 Apr 2012)
New Revision: 252

Modified:
   trunk/step/step-web/src/main/webapp/js_mobile/init.js
   trunk/step/step-web/src/main/webapp/mobile.html
   trunk/step/step-web/src/main/webapp/mobile_options.html
Log:
some playing around in the last hour for mobile

Modified: trunk/step/step-web/src/main/webapp/js_mobile/init.js
===================================================================
--- trunk/step/step-web/src/main/webapp/js_mobile/init.js	2012-04-20 17:29:36 UTC (rev 251)
+++ trunk/step/step-web/src/main/webapp/js_mobile/init.js	2012-04-20 19:43:48 UTC (rev 252)
@@ -1,15 +1,60 @@
 init();
 
+function getUrlVars() {
+	var vars = {};
+	var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
+			function(m, key, value) {
+				vars[key] = value;
+			});
+	return vars;
+}
+
 function init() {
-	$(document).ready(function() {
-		
-		
-		var url = BIBLE_GET_BIBLE_TEXT + "KJV" + "/" + "Exodus 1";
-		
-		//send to server
-		$.get(url, function (text) {
-			//we get html back, so we insert into passage:
-			$("#mobileMainPane").html(text.value);
-		});
+	$(document).bind('pageinit', function() {
+		updatePassageView();
 	});
+
+	$(document).bind("pagechange", function(toPage, options) {
+		if (location.hash === "") {
+			// main page
+			updatePassageView();
+		}
+	});
 }
+
+/**
+ * a typical URL looks like this, so we construct it and then send it to the
+ * server:
+ * http://localhost:8080/step-web/rest/bible/getBibleText/KJV/Jhn%201:1/HEADINGS,VERSE_NUMBERS,STRONG_NUMBERS,MORPHOLOGY
+ */
+function updatePassageView() {
+	var params = getUrlVars();
+
+	var options = "";
+	var version = "KJV";
+	var passage = "Romans 1";
+
+	var url = BIBLE_GET_BIBLE_TEXT + version + "/" + passage + "/";
+
+	if (!params["headings"] || params["headings"] === "on") {
+		url += "HEADINGS,";
+	}
+
+	if (!params["verse_numbers"] || params["verse_numbers"] === "on") {
+		url += "VERSE_NUMBERS,";
+	}
+
+	if (params["strongs"] === "on") {
+		url += "STRONG_NUMBERS,";
+	}
+
+	if (params["morphs"] === "on") {
+		url += "MORPHOLOGY,";
+	}
+	
+	$.get(url, function(text) {
+		// we get html back, so we insert into passage:
+		$("#mobileMainPane").html(text.value);
+	});
+
+}

Modified: trunk/step/step-web/src/main/webapp/mobile.html
===================================================================
--- trunk/step/step-web/src/main/webapp/mobile.html	2012-04-20 17:29:36 UTC (rev 251)
+++ trunk/step/step-web/src/main/webapp/mobile.html	2012-04-20 19:43:48 UTC (rev 252)
@@ -6,6 +6,7 @@
 	<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
 
 	<link rel="stylesheet" type="text/css" href="css_mobile/init-layout.css" />
+	<link rel="stylesheet" type="text/css" href="css/passage.css" />
 
 	<script src="js/initLib.js" type="text/javascript"></script>   
 
@@ -18,71 +19,51 @@
 </head> 
 <body> 
 
-<div data-role="page">
+<div data-role="page" id="main">
 
 	<div data-role="header" data-position="fixed">
 		<h1>STEP</h1>
-		<a href="#options" data-rel="dialog" data-transition="pop" data-icon="gears">Options</a>
+		<a href="#options" data-rel="dialog" data-transition="slide" data-icon="gears">Options</a>
 	</div><!-- /header -->
 
 	<div data-role="content">	
 		<div id="mobileMainPane"></div>
 	</div>
 	
-	<!-- /content -->
 
-</div><!-- /page -->
+</div>
 
 
-
-
-
-
-
-
-
 <div data-role="page" id="options">
-
 	<div data-role="header">
-		<h1>STEP</h1>
-	</div><!-- /header -->
+		<h1>Options</h1>
+	</div>
 
 	<div data-role="content">
 	
-	<div class="containing-element">	
-		<select name="slider" id="headings" data-role="slider" inline="true">
-			<option value="off">No Headings</option>
-			<option value="on">Headings</option>
-		</select>
+		<form>
+			<div data-role="control-group">
+				<legend>Display Options</legend>
+				   <input type="checkbox" checked="checked" name="verse_numbers" id="verse_numbers" />
+				   <label for="verse_numbers">Verse numbers</label>
+				   
+				   <input type="checkbox" checked="checked" name="headings" id="headings" />
+				   <label for="headings">Headers</label>
+		
+				   <input type="checkbox" name="strongs" id="strongs" />
+				   <label for="strongs">Strong numbers</label>
+				
+				   <input type="checkbox" name="morphs" id="morphs" />
+				   <label for="morphs">Morphology</label>
+			</div>
+			
+			<input type="submit" value="Submit" data-direction="reverse" />
+		</form>
 	</div>
-	
-	<div class="containing-element">	
-		<select name="slider" id="headings" data-role="slider" inline="true">
-			<option value="off">No Verse Numbers</option>
-			<option value="on">Verse Numbers</option>
-		</select>
-	</div>
 
-	<div class="containing-element">	
-		<select name="slider" id="headings" data-role="slider" inline="true">
-			<option value="off">No Strong Numbers</option>
-			<option value="on">Strong Numbers</option>
-		</select>
-	</div>
 
-	<div class="containing-element">	
-		<select name="slider" id="headings" data-role="slider" inline="true">
-			<option value="off">No Morphology</option>
-			<option value="on">Morphology</option>
-		</select>
-	</div>
 
 
-</div>
 
-
-
-
-
 </body>
 </html>
\ No newline at end of file

Modified: trunk/step/step-web/src/main/webapp/mobile_options.html
===================================================================
--- trunk/step/step-web/src/main/webapp/mobile_options.html	2012-04-20 17:29:36 UTC (rev 251)
+++ trunk/step/step-web/src/main/webapp/mobile_options.html	2012-04-20 19:43:48 UTC (rev 252)
@@ -3,8 +3,10 @@
 	<head> 
 	<title>STEP :: Scripture Tools For Every Pastor</title> 
 	<meta name="viewport" content="width=device-width, initial-scale=1"> 
-	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
+	<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
 
+	<link rel="stylesheet" type="text/css" href="css_mobile/init-layout.css" />
+
 	<script src="js/initLib.js" type="text/javascript"></script>   
 
 	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
@@ -12,48 +14,35 @@
 	
 	<script src="js/ui_hooks.js" type="text/javascript"></script>
 	
-<!--	<script src="js_mobile/init.js" type="text/javascript"></script>-->
 </head> 
 <body> 
 
-<div data-role="page">
-
+<div data-role="page" id="options">
 	<div data-role="header">
-		<h1>STEP</h1>
-	</div><!-- /header -->
+		<h1>Options</h1>
+	</div>
 
 	<div data-role="content">
 	
-	<div class="containing-element">	
-		<select name="slider" id="headings" data-role="slider" inline="true">
-			<option value="off">No Headings</option>
-			<option value="on">Headings</option>
-		</select>
+		<form action="mobile.html">
+			<div data-role="control-group">
+				<legend>Display Options</legend>
+				   <input type="checkbox" checked="checked" name="verseNumbers" id="verseNumbers" />
+				   <label for="verseNumbers">Verse numbers</label>
+				   
+				   <input type="checkbox" checked="checked" name="headers" id="headers" />
+				   <label for="headers">Headers</label>
+		
+				   <input type="checkbox" name="strongs" id="strongs" />
+				   <label for="strongs">Strong numbers</label>
+				
+				   <input type="checkbox" name="morphs" id="morphs" />
+				   <label for="morphs">Morphology</label>
+			</div>
+			
+			<input type="submit" value="Submit" data-direction="reverse" />
+		</form>
 	</div>
-	
-	<div class="containing-element">	
-		<select name="slider" id="headings" data-role="slider" inline="true">
-			<option value="off">No Verse Numbers</option>
-			<option value="on">Verse Numbers</option>
-		</select>
-	</div>
 
-	<div class="containing-element">	
-		<select name="slider" id="headings" data-role="slider" inline="true">
-			<option value="off">No Strong Numbers</option>
-			<option value="on">Strong Numbers</option>
-		</select>
-	</div>
-
-	<div class="containing-element">	
-		<select name="slider" id="headings" data-role="slider" inline="true">
-			<option value="off">No Morphology</option>
-			<option value="on">Morphology</option>
-		</select>
-	</div>
-
-
-</div><!-- /page -->
-
 </body>
 </html>
\ No newline at end of file




More information about the Tynstep-svn mailing list