[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