232 lines
6.1 KiB
Plaintext
232 lines
6.1 KiB
Plaintext
<%@ page session="false"%>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Index Psalmen</title>
|
|
<meta name="viewport"
|
|
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0" />
|
|
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
|
|
<link rel="stylesheet" href="resources/css/themes/Psalmenweb.min.css" />
|
|
<link rel="stylesheet" href="resources/css/psalmenweb.css" />
|
|
|
|
<style type="text/css">
|
|
a {
|
|
width: 20%;
|
|
}
|
|
|
|
.ui-btn {
|
|
height: 100px;
|
|
font-size: 60px;
|
|
line-height: 40px;
|
|
}
|
|
</style>
|
|
|
|
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
|
|
<script
|
|
src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script></head>
|
|
<body>
|
|
|
|
<div data-role="page" id="myPage" data-theme="a">
|
|
<div data-role="content" data-theme="a">
|
|
<a id="choice" style="width: 100%;" href="#" data-role="button" data-transition="fade" class="indexlabel" data-theme="a">Psalm</a>
|
|
|
|
<div data-role="controlgroup" data-type="horizontal" class="localnav indexknoppengroep">
|
|
<a id="k7" href="#" data-role="button" data-theme="a">7</a>
|
|
|
|
<a id="k8" href="#" data-role="button" data-theme="a">8</a>
|
|
|
|
<a id="k9" href="#" data-role="button" data-theme="a">9</a>
|
|
</div>
|
|
<div data-role="controlgroup" data-type="horizontal" class="localnav indexknoppengroep">
|
|
<a id="k4" href="#" data-role="button" data-theme="a">4</a>
|
|
|
|
<a id="k5" href="#" data-role="button" data-theme="a">5</a>
|
|
|
|
<a id="k6" href="#" data-role="button" data-theme="a">6</a>
|
|
</div>
|
|
<div data-role="controlgroup" data-type="horizontal" class="localnav indexknoppengroep">
|
|
<a id="k1" href="#" data-role="button" data-theme="a">1</a>
|
|
|
|
<a id="k2" href="#" data-role="button" data-theme="a">2</a>
|
|
|
|
<a id="k3" href="#" data-role="button" data-theme="a">3</a>
|
|
</div>
|
|
<div data-role="controlgroup" data-type="horizontal" class="localnav indexknoppengroep">
|
|
<a id="kd" href="#" data-role="button" data-theme="a">↶</a>
|
|
|
|
<a id="k0" href="#" data-role="button" data-theme="a">0</a>
|
|
|
|
<a id="ke" href="#" data-role="button" data-theme="a">✔</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
$(".indexknoppengroep a").click(function() {
|
|
if ($("div.ui-loader.ui-overlay-shadow").length == 1) {
|
|
return;
|
|
}
|
|
var knop = this.id.substring(1);
|
|
switch(knop) {
|
|
case "0":
|
|
case "1":
|
|
case "2":
|
|
case "3":
|
|
case "4":
|
|
case "5":
|
|
case "6":
|
|
case "7":
|
|
case "8":
|
|
case "9":
|
|
addNumber(knop);
|
|
break;
|
|
case "d":
|
|
if ($("a#choice span span").html().length < 7) {
|
|
window.history.back();
|
|
} else {
|
|
removeChar();
|
|
}
|
|
|
|
break;
|
|
case "e":
|
|
if ($("a#choice span span").hasClass("invalid")) {
|
|
break;
|
|
}
|
|
var choice = $("a#choice span span").html();
|
|
if (choice.indexOf("vers") > 0) {
|
|
var psalm = choice.substring(6, choice.indexOf("vers") - 1);
|
|
var vers = choice.substring(choice.indexOf("vers") + 5);
|
|
if (vers == "") {
|
|
vers = 1;
|
|
choice += "1";
|
|
$("a#choice span span").html(choice);
|
|
}
|
|
if (! checkPsalmVerseExists(psalm, vers)) {
|
|
toastVerseDoesNotExist();
|
|
} else {
|
|
window.location.href = "psalm?p=" + psalm + "&v=" + vers;
|
|
//window.location.href = "/psalm?p=" + psalm + "&v=" + vers;
|
|
}
|
|
|
|
} else {
|
|
if (! (choice.length < 7)) {
|
|
choice += " vers ";
|
|
$("a#choice span span").html(choice);
|
|
}
|
|
}
|
|
|
|
}
|
|
var choice = $("a#choice span span").html();
|
|
if (choice.length < 7) {
|
|
$("a#kd span span").html("↶");
|
|
} else {
|
|
$("a#kd span span").html("◀");
|
|
}
|
|
});
|
|
});
|
|
|
|
function addNumber(knop) {
|
|
var choice = $("a#choice span span").html();
|
|
var lengte = choice.length;
|
|
|
|
if (choice.indexOf("vers") > 0) {
|
|
var vers = choice.substring(choice.indexOf("vers") + 5);
|
|
var verslengte = vers.length;
|
|
|
|
if (verslengte < 2) {
|
|
if (!(verslengte == 0 && knop == "0")) {
|
|
choice += knop;
|
|
}
|
|
} else {
|
|
if (!(knop == "0")) {
|
|
choice = choice.substring(0, choice.indexOf("vers") + 5) + knop;
|
|
}
|
|
}
|
|
$("a#choice span span").html(choice);
|
|
|
|
} else {
|
|
if (lengte == 5) {
|
|
choice += " ";
|
|
lengte++;
|
|
}
|
|
|
|
if (lengte < 9) {
|
|
if (!(lengte == 6 && knop == "0")) {
|
|
choice += knop;
|
|
}
|
|
} else {
|
|
if (!(knop == "0")) {
|
|
choice = "Psalm " + knop;
|
|
}
|
|
}
|
|
|
|
$("a#choice span span").html(choice);
|
|
|
|
checkCorrectPsalm();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function removeChar() {
|
|
var choice = $("a#choice span span").html();
|
|
var lengte = choice.length;
|
|
if (lengte > 5) {
|
|
choice = choice.substring(0, choice.length - 1);
|
|
if (choice.substring(choice.length - 4) == "vers") {
|
|
choice = choice.substring(0, choice.length - 5);
|
|
}
|
|
$("a#choice span span").html(choice);
|
|
checkCorrectPsalm();
|
|
}
|
|
}
|
|
|
|
function checkCorrectPsalm() {
|
|
var psalm = parseInt($("a#choice span span").html().substring(6));
|
|
if (psalm < 1 || psalm > 150) {
|
|
$("a#choice span span").addClass("invalid");
|
|
} else {
|
|
$("a#choice span span").removeClass("invalid");
|
|
}
|
|
}
|
|
|
|
function toastVerseDoesNotExist() {
|
|
$("a#choice span span").addClass("invalid");
|
|
$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>Dit vers bestaat niet.</h1></div>")
|
|
.css({
|
|
display: "block",
|
|
// opacity: 0.90,
|
|
position: "fixed",
|
|
padding: "7px",
|
|
"text-align": "center",
|
|
width: "350px",
|
|
left: ($(window).width() - 364) / 2,
|
|
top: $(window).height() / 2})
|
|
.appendTo($.mobile.pageContainer).delay(2000)
|
|
.fadeOut(400, function(){
|
|
$(this).remove();
|
|
var choice = $("a#choice span span").html();
|
|
choice = choice.substring(0, choice.indexOf("vers") + 5);
|
|
$("a#choice span span").html(choice);
|
|
$("a#choice span span").removeClass("invalid");
|
|
});
|
|
}
|
|
|
|
function checkPsalmVerseExists(psalm, vers) {
|
|
var result;
|
|
$.ajax({
|
|
url: 'psalmcheck',
|
|
async: false,
|
|
data: {p: psalm, v: vers}, //'p=' & psalm & '&v=' & vers,
|
|
success: function(data) {
|
|
result = data;
|
|
}
|
|
});
|
|
|
|
return result;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |