The new interface is completely in Ajax. Feel a lot faster. re #73
Uses pushState / popState to keep browser history correct and allow using back in the browser.
This commit is contained in:
Sébastien Lucas
parent
c7c6524cce
commit
a509e3389d
5 changed files with 186 additions and 197 deletions
244
index.php
244
index.php
|
|
@ -32,9 +32,6 @@
|
|||
$n = getURLParam ("n", "1");
|
||||
$database = GetUrlParam (DB);
|
||||
|
||||
$currentPage = Page::getPage ($page, $qid, $query, $n);
|
||||
$currentPage->InitializeContent ();
|
||||
|
||||
/* Test to see if pages are opened on an Eink screen
|
||||
* test Kindle, Kobo Touch and Sony PRS-T1 Ereader.
|
||||
* HTTP_USER_AGENT = "Mozilla/5.0 (Linux; U; en-us; EBRD1101; EXT) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"
|
||||
|
|
@ -52,7 +49,7 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title><?php echo htmlspecialchars ($currentPage->title) ?></title>
|
||||
<title>COPS</title>
|
||||
<script type="text/javascript" src="<?php echo getUrlWithVersion("js/jquery-1.9.1.min.js") ?>"></script>
|
||||
<script type="text/javascript" src="<?php echo getUrlWithVersion("js/jquery.cookies.js") ?>"></script>
|
||||
<?php if (getCurrentOption ('use_fancyapps') == 1) { ?>
|
||||
|
|
@ -60,12 +57,44 @@
|
|||
<link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion("resources/fancybox/jquery.fancybox.css") ?>" media="screen" />
|
||||
<?php } ?>
|
||||
<script type="text/javascript" src="<?php echo getUrlWithVersion("js/jquery.sortElements.js") ?>"></script>
|
||||
<script type="text/javascript" src="<?php echo getUrlWithVersion("resources/doT/doT.min.js") ?>"></script>
|
||||
<script type="text/javascript" src="<?php echo getUrlWithVersion("util.js") ?>"></script>
|
||||
<link rel="related" href="<?php echo $config['cops_full_url'] ?>feed.php" type="application/atom+xml;profile=opds-catalog" title="<?php echo $config['cops_title_default']; ?>" />
|
||||
<link rel="icon" type="image/vnd.microsoft.icon" href="<?php echo $currentPage->favicon ?>" />
|
||||
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
|
||||
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300italic,800,300,400italic,600,600italic,700,700italic,800italic' />
|
||||
<link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion(getCurrentCss ()) ?>" media="screen" />
|
||||
<link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion("resources/normalize/normalize.css") ?>" />
|
||||
<script type="text/javascript">
|
||||
var template, result;
|
||||
|
||||
function ajaxifyLinks () {
|
||||
if (history.pushState) {
|
||||
$("a[href^='index']").click (function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var url = $(this).attr('href');
|
||||
jsonurl = url.replace ("index", "getJSON");
|
||||
$.getJSON(jsonurl, function(data) {
|
||||
history.pushState(data, "", url);
|
||||
result = template (data);
|
||||
document.title = data.title;
|
||||
$(".container").html (result);
|
||||
|
||||
ajaxifyLinks ();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.onpopstate = function(event) {
|
||||
//alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
|
||||
result = template (event.state);
|
||||
document.title = event.state.title;
|
||||
$(".container").html (result);
|
||||
|
||||
ajaxifyLinks ();
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
// Handler for .ready() called.
|
||||
|
||||
|
|
@ -114,202 +143,25 @@
|
|||
}
|
||||
});
|
||||
|
||||
$.get('templates/default/frontpage.html', function(data){
|
||||
template = doT.template(data);
|
||||
$.getJSON('<?php echo "getJSON.php?" . str_replace ("&", "&", $_SERVER["QUERY_STRING"]); ?>', function(data) {
|
||||
result = template (data);
|
||||
document.title = data.title;
|
||||
$(".container").html (result);
|
||||
|
||||
ajaxifyLinks ();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
<?php
|
||||
if ($currentPage->isPaginated ()) {
|
||||
$prevLink = $currentPage->getPrevLink ();
|
||||
$nextLink = $currentPage->getNextLink ();
|
||||
?>
|
||||
$(document).keydown(function(e){
|
||||
<?php
|
||||
if (!is_null ($prevLink)) {
|
||||
echo "if (e.keyCode == 37) {\$(location).attr('href','" . $prevLink->hrefXhtml () . "');}";
|
||||
}
|
||||
if (!is_null ($nextLink)) {
|
||||
echo "if (e.keyCode == 39) {\$(location).attr('href','" . $nextLink->hrefXhtml () . "');}";
|
||||
}
|
||||
|
||||
?>
|
||||
});
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<a class="headleft" href="<?php echo $_SERVER["SCRIPT_NAME"]; if ($page != Base::PAGE_INDEX && !is_null ($database)) echo "?" . addURLParameter ("", DB, $database); ?>">
|
||||
<img src="<?php echo getUrlWithVersion("images/home.png") ?>" alt="<?php echo localize ("home.alternate") ?>" />
|
||||
</a>
|
||||
<img class="headright" id="searchImage" src="<?php echo getUrlWithVersion("images/setting64.png") ?>" alt="Settings and menu" />
|
||||
<div class="headcenter">
|
||||
<h1><?php echo htmlspecialchars ($currentPage->title) ?></h1>
|
||||
</div>
|
||||
<div id="tool" <?php if ($withToolbar) echo 'style="display: none"' ?>>
|
||||
<div style="float: left; width: 60%">
|
||||
<form action="index.php" method="get">
|
||||
<div style="float: right">
|
||||
<input type="image" src="images/search32.png" alt="<?php echo localize ("search.alternate") ?>" />
|
||||
</div>
|
||||
<div class="stop">
|
||||
<input type="hidden" name="current" value="<?php echo $page ?>" />
|
||||
<input type="hidden" name="page" value="9" />
|
||||
<?php if (!is_null ($database)) { ?>
|
||||
<input type="hidden" name="<?php echo DB ?>" value="<?php echo $database ?>" />
|
||||
<?php } ?>
|
||||
<input type="search" name="query" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<?php if ($currentPage->containsBook ()) { ?>
|
||||
<div style="float: right; width: 35%">
|
||||
<div style="float: right">
|
||||
<img id="sort" src="images/sort32.png" alt="<?php echo localize ("sort.alternate") ?>" />
|
||||
</div>
|
||||
<div class="stop">
|
||||
<select id="sortchoice">
|
||||
<option value="st"><?php echo localize("bookword.title") ?></option>
|
||||
<option value="sa"><?php echo localize("authors.title") ?></option>
|
||||
<option value="ss"><?php echo localize("series.title") ?></option>
|
||||
<option value="sp"><?php echo localize("content.published") ?></option>
|
||||
</select>
|
||||
<select id="sortorder">
|
||||
<option value="asc"><?php echo localize("search.sortorder.asc") ?></option>
|
||||
<option value="desc"><?php echo localize("search.sortorder.desc") ?></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</header>
|
||||
<div id="content" style="display: none;"></div>
|
||||
<section>
|
||||
<?php
|
||||
if ($page == Base::PAGE_BOOK_DETAIL) {
|
||||
include ("bookdetail.php");
|
||||
} else if ($page == Base::PAGE_ABOUT) {
|
||||
readfile ("about.xml");
|
||||
}
|
||||
foreach ($currentPage->entryArray as $entry) {
|
||||
if (get_class ($entry) != "EntryBook") {
|
||||
?>
|
||||
<article>
|
||||
<div class="frontpage">
|
||||
<?php foreach ($entry->linkArray as $link) { if ($link->type != Link::OPDS_NAVIGATION_TYPE) { continue; } ?> <a href="<?php echo $link->hrefXhtml () ?>">
|
||||
<h2><?php echo htmlspecialchars ($entry->title) ?></h2>
|
||||
<?php } ?>
|
||||
<h4><?php echo htmlspecialchars ($entry->content) ?></h4>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
<?php
|
||||
}
|
||||
else
|
||||
{
|
||||
?>
|
||||
<article class="books">
|
||||
<span class="cover">
|
||||
<?php
|
||||
if ($entry->book->hasCover) {
|
||||
?>
|
||||
<a data-fancybox-group="group" class="fancycover" href="<?php echo $entry->getCover () ?>"><img src="<?php echo $entry->getCoverThumbnail () ?>" alt="<?php echo localize("i18n.coversection") ?>" /></a>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</span>
|
||||
<h2 class="download">
|
||||
<?php
|
||||
$i = 0;
|
||||
foreach ($config['cops_prefered_format'] as $format)
|
||||
{
|
||||
if ($i == 2) { break; }
|
||||
if ($data = $entry->book->getDataFormat ($format)) {
|
||||
$i++;
|
||||
?>
|
||||
<a href="<?php echo $data->getHtmlLink () ?>"><?php echo $format ?></a><br />
|
||||
<?php
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
</h2>
|
||||
<a class="fancydetail" href="<?php echo $entry->book->getDetailUrl () ?>">
|
||||
<div class="fullclickpopup">
|
||||
<h2><span class="st"><?php echo htmlspecialchars ($entry->title) ?></span>
|
||||
<?php
|
||||
if ($entry->book->getPubDate() != "")
|
||||
{
|
||||
?>
|
||||
<span class="sp">(<?php echo $entry->book->getPubDate() ?>)</span>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<?php
|
||||
if (!is_null ($entry->book->rating)) {
|
||||
?>
|
||||
<span class="sr"><?php echo $entry->book->getRating () ?></span>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</h2>
|
||||
<h4><?php echo localize("authors.title") . " : " ?></h4><span class="sa"><?php echo htmlspecialchars ($entry->book->getAuthorsName ()) ?></span><br />
|
||||
<?php
|
||||
$tags = $entry->book->getTagsName ();
|
||||
if (!empty ($tags)) {
|
||||
?>
|
||||
<h4><?php echo localize("tags.title") . " : </h4>" . htmlspecialchars ($tags) ?><br />
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<?php
|
||||
$serie = $entry->book->getSerie ();
|
||||
if (!is_null ($serie)) {
|
||||
?>
|
||||
<h4><?php echo localize("series.title") . " : " ?></h4><span class="ss"><?php echo htmlspecialchars ($serie->name) . " (" . $entry->book->seriesIndex . ")" ?></span><br />
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div></a>
|
||||
</article>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
</section>
|
||||
<footer>
|
||||
<div class="footleft">
|
||||
<a href="customize.php"><img src="<?php echo getUrlWithVersion("images/theme.png") ?>" alt="<?php echo localize ("customize.title") ?>" /></a>
|
||||
</div>
|
||||
<div class="footright">
|
||||
<a class="fancyabout" href="<?php if (getCurrentOption ('use_fancyapps') == 1) { echo "about.xml"; } else { echo $_SERVER["SCRIPT_NAME"] . str_replace ("&", "&", addURLParameter ("?page=16", DB, $database)); } ?>"><img src="<?php echo getUrlWithVersion("images/info.png") ?>" alt="<?php echo localize ("about.title") ?>" /></a>
|
||||
</div>
|
||||
<?php
|
||||
if ($currentPage->isPaginated ()) {
|
||||
?>
|
||||
|
||||
<div class="footcenter">
|
||||
<?php
|
||||
if (!is_null ($prevLink)) {
|
||||
?>
|
||||
<a href="<?php echo $prevLink->hrefXhtml () ?>" ><img src="<?php echo getUrlWithVersion("images/previous.png") ?>" alt="<?php echo localize ("paging.previous.alternate") ?>" /></a>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<p><?php echo " " . $currentPage->n . " / " . $currentPage->getMaxPage () . " " ?></p>
|
||||
<?php
|
||||
if (!is_null ($nextLink)) {
|
||||
?>
|
||||
<a href="<?php echo $nextLink->hrefXhtml () ?>" ><img src="<?php echo getUrlWithVersion("images/next.png") ?>" alt="<?php echo localize ("paging.next.alternate") ?>" /></a>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</footer>
|
||||
<div id="content" style="display: none;"></div>
|
||||
<div class="container">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue