133 lines
4.0 KiB
Plaintext
133 lines
4.0 KiB
Plaintext
<%@ page session="false"%>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
|
|
<html>
|
|
<head>
|
|
<title>Psalm ${psalm}</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.3.2/jquery.mobile-1.3.2.min.css" />
|
|
<link rel="stylesheet"
|
|
href="resources/css/themes/Psalmenweb.min.css" />
|
|
<link rel="stylesheet"
|
|
href="resources/css/psalmenweb.css" />
|
|
|
|
<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>
|
|
<script src="resources/js/prefs.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div data-role="page" data-theme="a">
|
|
<div data-role="header" data-position="fixed">
|
|
<div class="psalmheader">Psalm ${psalm}</div>
|
|
<a data-inline="true" data-icon="custom" data-iconpos="notext" id="bw" data-ajax="false" class="ui-btn-right" style="margin-right:350px;"></a>
|
|
<a href="hcindex" data-inline="true" data-icon="custom" data-iconpos="notext" id="hc" data-ajax="false" class="ui-btn-right" style="margin-right:150px;">a</a>
|
|
<a href="bijbelindex?t=1" data-inline="true" data-icon="custom" data-iconpos="notext" id="book" data-ajax="false" class="ui-btn-right" style="margin-right:50px;"></a>
|
|
</div>
|
|
<div data-role="content">
|
|
<br /> <br />
|
|
<c:forEach items="${psalmRegels}" var="psalmregel"
|
|
varStatus="varstatus">
|
|
<c:if
|
|
test="${(varstatus.index == 0) || (psalmregel.vers != psalmRegels[varstatus.index - 1].vers)}">
|
|
<a id="v${psalmregel.vers}"></a>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
<c:choose>
|
|
<c:when test="${psalmregel.vers == 0}">
|
|
<div class="psalmverseheader">Voorzang</div>
|
|
</c:when>
|
|
<c:otherwise>
|
|
<div class="psalmverseheader">Vers ${psalmregel.vers}</div>
|
|
</c:otherwise>
|
|
</c:choose>
|
|
</c:if>
|
|
<p class="psalmline">${psalmregel.tekst}</p>
|
|
</c:forEach>
|
|
|
|
<br />
|
|
</div>
|
|
<div data-role="footer" class="bigbuttons">
|
|
<div data-role="navbar" class="bigbuttons" data-position="fixed">
|
|
<ul>
|
|
<li><a href="psalm?p=${psalm - 1}" id="left" data-icon="custom" data-ajax="false"> </a></li>
|
|
<li><a href="#" id="minus" data-icon="custom"> </a></li>
|
|
<li><a href="psalmindex" id="index" data-icon="custom" data-ajax="false" data-transition="pop"> </a></li>
|
|
<li><a href="#" id="plus" data-icon="custom"> </a></li>
|
|
<li><a href="psalm?p=${psalm + 1}" id="right" data-icon="custom" data-ajax="false"> </a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var PREF_TEXTSIZE;
|
|
var PREF_COLOR;
|
|
|
|
$(function() {
|
|
loadPreferences();
|
|
setPreferences();
|
|
bindListeners();
|
|
});
|
|
|
|
function changeTextSize(delta) {
|
|
var size = parseInt($(".psalmverseheader").css("font-size"));
|
|
cssSize = (size + delta) + "px";
|
|
$(".psalmverseheader").css("font-size", cssSize);
|
|
|
|
size = parseInt($(".psalmline").css("font-size"));
|
|
cssSize = (size + delta) + "px";
|
|
$(".psalmline").css("font-size", cssSize);
|
|
}
|
|
|
|
$(function () {
|
|
$(document).on("click", "#minus", function(e) {
|
|
changeTextSize(-2);
|
|
//goToVerse(true);
|
|
});
|
|
|
|
$(document).on("click", "#plus", function(e) {
|
|
changeTextSize(2);
|
|
//goToVerse(true);
|
|
});
|
|
|
|
if ('${psalm}' == '1') {
|
|
$("#left").attr("href", "#");
|
|
$("#left span.ui-icon").css("background-image", "none");
|
|
}
|
|
if ('${psalm}' == '150') {
|
|
$("#right").attr("href", "#");
|
|
$("#right span.ui-icon").css("background-image", "none");
|
|
}
|
|
|
|
});
|
|
|
|
function goToVerse(immediately) {
|
|
if ("${vers}" != "") {
|
|
var target = $("#v${vers}").get(0).offsetTop;
|
|
|
|
if (target !== undefined) {
|
|
if (immediately) {
|
|
$.mobile.silentScroll(target);
|
|
} else {
|
|
setTimeout(function(){$.mobile.silentScroll(target);}, 100); // scroll after 1 sec
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
$(document).on('pageshow', function(){
|
|
goToVerse(false);
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|