mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-28 18:50:08 +00:00
added layer #URLs and #hideLayers...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
c2f23d1483
commit
145c453ecb
17
TODO.otl
17
TODO.otl
@ -1,17 +1,20 @@
|
||||
[_] 25% Priority work
|
||||
[_] 50% general todo
|
||||
[_] BUG: href to existing anchors will mess up layout...
|
||||
| need to find out how can we disable anchor links from actually
|
||||
| going to the anchor...
|
||||
[_] something made phonegap version unhappy...
|
||||
| likely the URL logic...
|
||||
|
|
||||
| try and make it optional...
|
||||
[_] #URL "layers"
|
||||
| navigation to a hidden layer will show the layer, any other
|
||||
| navigation will hide it...
|
||||
[_] time transitions
|
||||
| the goal is for slow devices to seem not to have animations at
|
||||
| all and faster ones to seem to have fast animations...
|
||||
[_] vanquish opacity effects
|
||||
| they slow everything down considerably!
|
||||
[_] BUG: href to existing anchors will mess up layout...
|
||||
| need to find out how can we disable anchor links from actually
|
||||
| going to the anchor...
|
||||
[X] something made phonegap version unhappy...
|
||||
| likely the URL logic...
|
||||
|
|
||||
| try and make it optional...
|
||||
[X] add page urls
|
||||
[X] add state saving to local storage
|
||||
[X] use modes (CSS) for thumbnail/page views...
|
||||
|
||||
48
index.html
48
index.html
@ -33,11 +33,13 @@ $(document).ready(function(){
|
||||
swipeStatus: swipeUpdate,
|
||||
// XXX change this to pinch...
|
||||
swipeUp: function(){
|
||||
togglePageView('off')
|
||||
//togglePageView('off')
|
||||
togglePageView()
|
||||
},
|
||||
// XXX change this to pinch...
|
||||
swipeDown: function(){
|
||||
togglePageView('on')
|
||||
//togglePageView('on')
|
||||
togglePageView()
|
||||
},
|
||||
// XXX for some reason this deos not bubble up the nested elements...
|
||||
click: function(evt, elem){
|
||||
@ -85,13 +87,18 @@ $(document).ready(function(){
|
||||
<!-- XXX Magazine title... -->
|
||||
|
||||
<div class="top-toolbar">
|
||||
mooo
|
||||
<div class="button home">Home</div>
|
||||
<div class="button cover">Issue Cover</div>
|
||||
<div class="button prev-article">Prev Article</div>
|
||||
<div class="button next-article">Next Article</div>
|
||||
</div>
|
||||
<div class="bottom-toolbar">
|
||||
<!-- this is just an example-->
|
||||
<a href="#home">Cover</a> |
|
||||
<a href="#prevArticle">Previous article</a> |
|
||||
<a href="#prev">Previous page</a> |
|
||||
<a href="#next">Next page</a> |
|
||||
<a href="#nextArticle">Next article</a> |
|
||||
<a href="#end">End</a>
|
||||
</div>
|
||||
|
||||
<div class="scaler">
|
||||
@ -100,17 +107,36 @@ $(document).ready(function(){
|
||||
<div class="cover page current">
|
||||
<div class="content">
|
||||
<h1>Magazine Cover</h1>
|
||||
<br><br><br>
|
||||
<a href="#1">Article 1</a><br>
|
||||
<a href="#ArticleAnchorExample">Article 2</a><br>
|
||||
<a href="#11">Article 3</a><br>
|
||||
|
||||
<br><br><br>
|
||||
<h2>Navigation via #URLs</h2>
|
||||
<p><i>BUG: currently navigation via existing anchors
|
||||
will break the layout, so use the name attribute
|
||||
on any other tags (see example).
|
||||
</i></p>
|
||||
<h3>The basics</h3>
|
||||
<a href="#1">Page #1</a><br>
|
||||
<a href="#3">Page #3</a><br>
|
||||
<a href="#ArticleAnchorExample">Named page</a><br>
|
||||
|
||||
<h3>Special anchors</h3>
|
||||
<p>These show up in the page URL</p>
|
||||
<a href="#home">Magazine cover</a><br>
|
||||
<a href="#end">Last Page</a><br>
|
||||
<a href="#end">Last page</a><br>
|
||||
<a href="#thumbnails">Thumbnail view</a><br>
|
||||
<a href="#example-layer">Toggle a hidden layer</a><br>
|
||||
<span name="example-layer" class="hidden">
|
||||
<a href="#hideLayers">Hide all layers</a><br>
|
||||
</span>
|
||||
|
||||
<h3>Relative special anchors</h3>
|
||||
<p>These will get replaced by corresponding page numbers in the URL</p>
|
||||
<a href="#next">Next page</a><br>
|
||||
<a href="#prev">Previous page</a><br>
|
||||
<a href="#nextArticle">Next article</a><br>
|
||||
<a href="#prevArticle">Previous article</a><br>
|
||||
|
||||
<div name="example-layer" class="hidden" onclick="window.location.hash='example-layer'" style="position:absolute; left:400px; top:150px; width: 250px; height:50px; text-align: center; padding: 15px; border: solid gray 5px; background: silver; color: white">
|
||||
This is an example
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
15
magazine.css
15
magazine.css
@ -4,6 +4,14 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
/* keep this empty... */
|
||||
.shown {
|
||||
}
|
||||
|
||||
|
||||
/* all elements that will behave like a page */
|
||||
.page {
|
||||
/* XXX make this browser-sized... */
|
||||
@ -145,6 +153,13 @@ body {
|
||||
|
||||
height: 50px;
|
||||
left: 0px;
|
||||
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
}
|
||||
.top-toolbar a, .bottom-toolbar a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-toolbar {
|
||||
|
||||
67
magazine.js
67
magazine.js
@ -354,7 +354,6 @@ function swipeUpdate(evt, phase, direction, distance){
|
||||
}
|
||||
|
||||
|
||||
// XXX store the current page...
|
||||
function setCurrentPage(n, W){
|
||||
if(n == null){
|
||||
var cur = $('.current.page')
|
||||
@ -444,7 +443,7 @@ function prevArticle(){
|
||||
|
||||
/*********************************************************************/
|
||||
// XXX make these magazine-specific...
|
||||
// XXX BUG: if the hach url part coresponds to a real anchor the browser
|
||||
// XXX BUG: if the hash url part coresponds to a real anchor the browser
|
||||
// shifts the page, need to disable this...
|
||||
// URL state managers...
|
||||
function loadURLState(){
|
||||
@ -455,32 +454,80 @@ function loadURLState(){
|
||||
var n = parseInt(anchor)
|
||||
if(typeof(n) == typeof(1) && n >= 0){
|
||||
return n
|
||||
|
||||
// XXX add real external aliases...
|
||||
} else if(anchor == 'thumbnails') {
|
||||
togglePageView('off')
|
||||
return getPageNumber()
|
||||
|
||||
} else if(anchor == 'home') {
|
||||
return 0
|
||||
|
||||
} else if(anchor == 'end') {
|
||||
return $('.page').length-1
|
||||
|
||||
// relative URLs...
|
||||
} else if(anchor == 'next') {
|
||||
nextPage()
|
||||
return getPageNumber()
|
||||
|
||||
} else if(anchor == 'prev') {
|
||||
prevPage()
|
||||
return getPageNumber()
|
||||
|
||||
} else if(anchor == 'nextArticle') {
|
||||
nextArticle()
|
||||
return getPageNumber()
|
||||
|
||||
} else if(anchor == 'prevArticle') {
|
||||
prevArticle()
|
||||
return getPageNumber()
|
||||
|
||||
// hide all visible layers on current page...
|
||||
} else if(anchor == 'hideLayers') {
|
||||
$('.current.page .shown')
|
||||
.addClass('hidden')
|
||||
.removeClass('shown')
|
||||
return getPageNumber()
|
||||
|
||||
} else {
|
||||
return getPageNumber($('[name='+anchor+']').parents('.page'))
|
||||
var elem = $('[name='+anchor+']')
|
||||
n = getPageNumber(elem.parents('.page'))
|
||||
// toggle hidden/shown elements...
|
||||
if(elem.hasClass('hidden')){
|
||||
elem
|
||||
.addClass('shown')
|
||||
.removeClass('hidden')
|
||||
} else if(elem.hasClass('shown')){
|
||||
elem
|
||||
.addClass('hidden')
|
||||
.removeClass('shown')
|
||||
}
|
||||
return n
|
||||
}
|
||||
}
|
||||
function saveURLState(){
|
||||
var anchor = window.location.hash.split('#')[1]
|
||||
var page = $('[name='+anchor+']')
|
||||
var elem = $('[name='+anchor+']')
|
||||
var page = elem
|
||||
if(!page.hasClass('page')){
|
||||
page = page.parents('.page')
|
||||
}
|
||||
var n = getPageNumber()
|
||||
// XXX use real aliases...
|
||||
if(n == getPageNumber(page)
|
||||
|| (anchor == 'home' && n == 0)
|
||||
|| (anchor == 'end' && n == $('.page').length-1)){
|
||||
return
|
||||
|
||||
// decide which #URLs stay in the URL and which get replaces with a
|
||||
// page number...
|
||||
if(!elem.hasClass('shown') && !elem.hasClass('hidden')){
|
||||
// XXX use real aliases...
|
||||
// do not replace these urls with page numbers...
|
||||
if( n == getPageNumber(page)
|
||||
|| (anchor == 'home' && n == 0)
|
||||
|| (anchor == 'end' && n == $('.page').length-1)){
|
||||
return anchor
|
||||
}
|
||||
}
|
||||
window.location.hash = getPageNumber()
|
||||
window.location.hash = n
|
||||
return n
|
||||
}
|
||||
|
||||
// local storage state managers...
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user