flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-12-23 20:11:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

added history special anchors (still a bit flaky, need a rethink)...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-26 23:45:38 +04:00
parent f55de66d9c
commit 0a6f2ffdb0
2 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@ -42,7 +42,18 @@ $(document).ready(function(){
})
.bind('hashchange', function(e){
e.preventDefault()
setCurrentPage(loadURLState())
var r = loadURLState()
// if we are dealing with history actions the browser will
// do the work for us...
if(r == 'back'){
window.history.go(-2)
return
} else if(r == 'forward'){
window.history.go(2)
return
} else {
setCurrentPage(r)
}
})
$('.viewer')
@ -179,7 +190,7 @@ $(document).ready(function(){
<a href="#1">Page #1</a><br>
<a href="#ArticleAnchorExample">Named page</a><br>
<p>
<a href="#page-3-anchor" style="pointer-events:none">Anchor on page #3</a><br>
<s><a href="#page-3-anchor" style="pointer-events:none">Anchor on page #3</a></s><br>
<i> currently navigation via existing anchors
will break the layout, so use the name attribute
on any other tags (see example).
@ -204,13 +215,17 @@ $(document).ready(function(){
<a href="#prev">Previous page</a><br>
<a href="#nextArticle">Next article</a><br>
<a href="#prevArticle">Previous article</a><br>
<h3>History support</h3>
<i>NOTE: this is still a bit flaky...</i><br>
<a href="#back">Go back</a><br>
<a href="#forward">Go forward</a><br>
</div>
<div style="position:absolute; width:100%; bottom:10px; text-align: right;">
<a href="#next">next page...</a><br>
<a href="#config">configuration demo</a> <a href="#next">next page...</a><br>
</div>
<div name="example-layer" class="hidden" onclick="window.location='#example-layer'" style="position:absolute; left:100px; top:400px; width: 300px; height:50px; text-align: center; padding: 15px; border: solid gray 5px; background: white; color: gray; cursor: hand">
<div name="example-layer" class="hidden" onclick="window.location='#example-layer'" style="position:absolute; left:100px; top:400px; width: 300px; height:50px; text-align: center; padding: 15px; border: solid gray 5px; background: white; color: gray; cursor: hand; opacity: 0.8">
<h3>This is an example layer</h3>
<i>click or tap to hide</i>
</div>
@ -349,7 +364,7 @@ $(document).ready(function(){
<div class="article">
<div class="cover page">
<div class="content">
<h1>Configuration demo</h1>
<h1 name="config">Configuration demo</h1>
<div>
Pages in ribbon: <input id="PAGES_IN_RIBBON" type="text"><button onclick="saveSettings()">save</button>
@ -365,7 +380,7 @@ $(document).ready(function(){
</div>
<div style="position:absolute; width:100%; bottom:10px; text-align: right;">
<a href="#home">magazine cover...</a><br>
<a href="#back">go back</a>, or return to <a href="#home">magazine cover...</a><br>
</div>
<script>

17
magazine.js
View File

@ -297,6 +297,23 @@ function loadURLState(){
} else if(anchor == 'end') {
return $('.page').length-1
// history...
} else if(anchor == 'back') {
//window.history.back()
//setTimeout(function(win){ return function(){ win.history.back() } }(window), 100)
// NOTE: if we do not do this we'll endup in an infinite history loop...
//window.location.hash = ''
//return getPageNumber()
return anchor
} else if(anchor == 'forward') {
//window.history.forward()
//setTimeout(function(win){ return function(){ win.history.forward() } }(window), 100)
// NOTE: if we do not do this we'll endup in an infinite history loop...
//window.location.hash = ''
//return getPageNumber()
return anchor
// relative URLs...
} else if(anchor == 'next') {
nextPage()