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

done basic CSS layout, animations, navigation and zooming...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-21 03:32:28 +04:00
parent a2ff1b94b0
commit 192b0ee5cd
2 changed files with 182 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
magazine.css
View File

@ -1,6 +1,6 @@
/* all elements that will behave like a page */
.cover, .page {
.page {
/* XXX make this browser-sized... */
display: inline-block;
vertical-align: bottom;
@ -11,30 +11,72 @@
* one way to go is to use a fixed page layout and scale things manually.
*/
width: 400px;
height: 300px;
width: 800px;
height: 600px;
/* change to relative units... */
margin-top: -300px;
font-size: 12px;
}
border: solid blue 1px;
.current.page {
}
/* general layout */
.magazine {
.viewer {
/* this makes the magazine behave like a ribbon */
width: 100%;
height: 100%;
overflow: visible;
overflow: hidden;
white-space: nowrap;
font-size: 0px;
background: gray;
border: solid blue 1px;
}
.scaler {
position: relative;
overflow: visible;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.aligner {
position: relative;
left: 50%;
height: 100%;
}
.magazine {
position: relative;
display: inline-block;
vertical-align: bottom;
top: 50%;
/* change to relative units... */
margin-left: -400px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.magazine > .cover {
background: white;
}

68
magazine.html
View File

@ -5,6 +5,58 @@
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('.page').click(function(){
var pages = $('.page')
setCurrentPage(pages.index(this))
})
})
function setCurrentPage(n){
var pages = $('.page')
var cur = $(pages[n])
$('.current.page').removeClass('current')
cur.addClass('current')
$('.magazine').css({left: -n*pages.width()})
return cur
}
function nextPage(){
var pages = $('.page')
var cur = $('.current.page')
return setCurrentPage(Math.min(pages.index(cur)+1, pages.length-1))
}
function prevPage(){
var pages = $('.page')
var cur = $('.current.page')
return setCurrentPage(Math.max(pages.index(cur)-1, 0))
}
function setElementScale(elem, scale){
return elem.css({
'transform': 'scale('+scale+')',
'-moz-transform': 'scale('+scale+')',
'-o-transform': 'scale('+scale+')',
'-ms-transform': 'scale('+scale+')',
'-webkit-transform': 'scale('+scale+')',
})
}
function fitNPages(n){
if(n==null){
n = 1
}
var pages = $('.page')
var scale = $('.viewer').width()/(pages.width()*n)
setElementScale($('.scaler'), scale)
}
// XXX create magazine...
function createMagazine(){
}
@ -23,15 +75,18 @@ function createPage(article, template){
</head>
<body>
<div class="viewer">
<div class="scaler">
<div class="aligner">
<div class="magazine">
<div class="cover">
<div class="cover page current">
Magazine Cover
</div>
<!-- XXX do we need a Magazine Credits page??? -->
<div class="article">
<div class="cover">
<div class="cover page">
Article Cover<br>
some more text...
</div>
@ -49,7 +104,7 @@ function createPage(article, template){
</div>
</div>
<div class="article">
<div class="cover">
<div class="cover page">
Article Cover
</div>
@ -70,7 +125,7 @@ function createPage(article, template){
</div>
</div>
<div class="article">
<div class="cover">
<div class="cover page">
Article Cover
</div>
@ -88,7 +143,7 @@ function createPage(article, template){
</div>
</div>
<div class="article">
<div class="cover">
<div class="cover page">
Article Cover
</div>
@ -106,6 +161,9 @@ function createPage(article, template){
</div>
</div>
</div>
</div>
</div>
</div>
</body>