mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-29 19:20:09 +00:00
removed some legacy...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
5dfb9866ea
commit
1c9119767c
@ -757,8 +757,7 @@ $(document).ready(function(){
|
|||||||
<a id="downloader" download="magazine.json">download magazine...</a>
|
<a id="downloader" download="magazine.json">download magazine...</a>
|
||||||
<input type="file" id="upload" name="files[]"/>
|
<input type="file" id="upload" name="files[]"/>
|
||||||
Alternative layout: <a href="./layout.html">native scroll</a>,
|
Alternative layout: <a href="./layout.html">native scroll</a>,
|
||||||
<a href="./layout-iscroll.html">iscroll</a>,
|
<a href="./index2.html">hand-written drag</a>
|
||||||
<a href="./layout-iscroll2.html">hand-written drag</a>
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<hr noshade color="silver">
|
<hr noshade color="silver">
|
||||||
|
|||||||
@ -1,571 +0,0 @@
|
|||||||
<!-- XXX for some reason a doctype kills the layout, need to investigate -->
|
|
||||||
<!--DOCTYPE html-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>PortableMag</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="magazine.css">
|
|
||||||
<link rel="stylesheet" href="magazine-themes.css">
|
|
||||||
<link rel="stylesheet" href="magazine-custom.css">
|
|
||||||
<style>
|
|
||||||
|
|
||||||
.viewer {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.magazine {
|
|
||||||
left: 150px;
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current.page {
|
|
||||||
z-index: 9000;
|
|
||||||
box-shadow: 10px 10px 150px -50px black;
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
.page:hover {
|
|
||||||
z-index: 9000;
|
|
||||||
box-shadow: 10px 10px 150px 0px black;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
.page {
|
|
||||||
-webkit-transition: none;
|
|
||||||
-moz-transition: none;
|
|
||||||
-o-transition: all 0 ease;
|
|
||||||
-ms-transition: none;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroller {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
width: auto;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* vertical */
|
|
||||||
.vertical.magazine,
|
|
||||||
.vertical.article,
|
|
||||||
.vertical.group {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
.vertical .article,
|
|
||||||
.vertical .group,
|
|
||||||
.vertical .page {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script src="ext-lib/jquery.js"></script>
|
|
||||||
<script src="ext-lib/jquery.scrollto.js"></script>
|
|
||||||
<script src="ext-lib/jquery.scrollstop.js"></script>
|
|
||||||
|
|
||||||
<script src="ext-lib/iscroll-custom.js"></script>
|
|
||||||
|
|
||||||
<script src="lib/jli.js"></script>
|
|
||||||
|
|
||||||
<script src="magazine.js"></script>
|
|
||||||
<script src="layout.js"></script>
|
|
||||||
|
|
||||||
<script src="platform.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
|
||||||
// keyboard...
|
|
||||||
$(document)
|
|
||||||
.keydown(makeKeyboardHandler({
|
|
||||||
'*': {
|
|
||||||
title: 'Global',
|
|
||||||
doc: '',
|
|
||||||
|
|
||||||
36: firstPage, // Home
|
|
||||||
35: lastPage, // End
|
|
||||||
37: prevPage, // Left
|
|
||||||
39: nextPage, // Right
|
|
||||||
32: {
|
|
||||||
'default': nextPage, // Space
|
|
||||||
'shift': prevPage // shift-Space
|
|
||||||
},
|
|
||||||
|
|
||||||
70: function(){ // F
|
|
||||||
togglePageFitMode()
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
function(k){console.log(k)}))
|
|
||||||
|
|
||||||
window.myScroll = new iScroll('viewer', {
|
|
||||||
vScroll: false,
|
|
||||||
snap: '.page',
|
|
||||||
momentum: false,
|
|
||||||
hScrollbar: false,
|
|
||||||
//chechDOMChanges: true,
|
|
||||||
/*
|
|
||||||
onScrollEnd: function () {
|
|
||||||
var n = getPageNumber()
|
|
||||||
var page = $($('.page')[n])
|
|
||||||
$('.current.page').removeClass('current')
|
|
||||||
page.addClass('current')
|
|
||||||
// XXX need to calc the propper offset...
|
|
||||||
//myScroll.scrollToElement(page[0], 40)
|
|
||||||
//myScroll.scrollToElement(page[0], 40)
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
var touching = false
|
|
||||||
var t = null
|
|
||||||
$('.viewer')
|
|
||||||
.on('mousedown touchstart', function(){
|
|
||||||
touching = true
|
|
||||||
clearTimeout(t)
|
|
||||||
})
|
|
||||||
.on('mouseup touchend', function(){
|
|
||||||
touching = false
|
|
||||||
})
|
|
||||||
.on('scrollstop', function(evt){
|
|
||||||
//log('scrollstop...')
|
|
||||||
// XXX for some reason, on android, this sets the page but
|
|
||||||
// does not actually scroll to it -- no animation and/or
|
|
||||||
// .ScrollTo does notwork...
|
|
||||||
//limit_scroll()
|
|
||||||
if(!touching){
|
|
||||||
t = setTimeout(function(){
|
|
||||||
var n = getPageNumber()
|
|
||||||
var page = $($('.page')[n])
|
|
||||||
$('.current.page').removeClass('current')
|
|
||||||
page.addClass('current')
|
|
||||||
// attempt to make it without using .ScrollTo(...)
|
|
||||||
// XXX the problem appears to be in the .scrollLeft(...)
|
|
||||||
// that does not work on some webkit browser versions
|
|
||||||
// namely on android it's "odd" to say the least...
|
|
||||||
//$('.viewer').scrollLeft(page.position().left)
|
|
||||||
$('.viewer')[0].scrollLeft = page.position().left
|
|
||||||
}, 100)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
|
|
||||||
if(!NAVIGATE_RELATIVE_TO_VISIBLE){
|
|
||||||
$('.viewer').css({overflow: 'hidden'})
|
|
||||||
}
|
|
||||||
|
|
||||||
// expand the templates...
|
|
||||||
runMagazineTemplates()
|
|
||||||
|
|
||||||
//setCurrentPage(0)
|
|
||||||
//limit_scroll()
|
|
||||||
})
|
|
||||||
|
|
||||||
var SCROLL_LIMIT = 800 * 1.5
|
|
||||||
|
|
||||||
function setup_scroll_limiter(){
|
|
||||||
$('.magazine').wrapAll($('<div class="scroller">'))
|
|
||||||
limit_scroll()
|
|
||||||
}
|
|
||||||
|
|
||||||
// XXX set the limit to next/prev page alignment...
|
|
||||||
function limit_scroll(){
|
|
||||||
var W = $('.viewer').width()
|
|
||||||
var ml = parseFloat($('.scroller').css('margin-left')) || 0
|
|
||||||
var pos = $('.viewer').scrollLeft()
|
|
||||||
var c = -ml + pos + W/2
|
|
||||||
$('.scroller').css({
|
|
||||||
'margin-left': -(c-SCROLL_LIMIT),
|
|
||||||
'width': c+SCROLL_LIMIT
|
|
||||||
})
|
|
||||||
$('.viewer').scrollLeft(pos-ml-(c-SCROLL_LIMIT))
|
|
||||||
}
|
|
||||||
function clear_limits(){
|
|
||||||
var pos = $('.viewer').scrollLeft()
|
|
||||||
var l = parseFloat($('.scroller').css('margin-left'))
|
|
||||||
$('.scroller').css({
|
|
||||||
'margin-left': '',
|
|
||||||
'width': ''
|
|
||||||
})
|
|
||||||
$('.viewer').scrollLeft(pos - l)
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="viewer" class="viewer">
|
|
||||||
|
|
||||||
<div class="magazine" name="PortableMag">
|
|
||||||
<div class="cover page">
|
|
||||||
<div class="content">
|
|
||||||
<!--h1 style="color:gray;font-size:125px;margin-bottom:-35px; margin-top: 160px">PortableMag</h1>
|
|
||||||
<h1 style="color:silver; font-size: 20px; margin-left:10px">A suit for publishing portable periodic magazines on mobile platforms.</h1-->
|
|
||||||
|
|
||||||
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
|
||||||
<g>
|
|
||||||
<title>PortableMag cover</title>
|
|
||||||
<defs>
|
|
||||||
<path id="circle_path" d="m177.720383,238.333344c0,-82.290771 66.655533,-148.946304 148.946304,-148.946304c82.290771,0 148.946289,66.655533 148.946289,148.946304c0,82.290771 -66.655518,148.946289 -148.946289,148.946289c-82.290771,0 -148.946304,-66.655518 -148.946304,-148.946289z"/>
|
|
||||||
</defs>
|
|
||||||
<text fill="#7f7f7f" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="306" y="434.33334" id="svg_2" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve"/>
|
|
||||||
<g id="svg_1">
|
|
||||||
<g id="svg_8">
|
|
||||||
<text stroke="#000000" fill="#7f7f7f" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="224.898504" y="309.870464" id="svg_6" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" font-weight="bold" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Mag</text>
|
|
||||||
<text stroke="#000000" fill="#a8a8a8" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="156.581224" y="309.650884" id="svg_7" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Portable</text>
|
|
||||||
</g>
|
|
||||||
<text stroke="#000000" fill="#afafaf" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="261.526111" y="338.824173" id="svg_4" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(1.53525 0 0 1.53525 -34.4106 -167.936)" font-weight="normal" font-style="normal">A suit for publishing portable periodic magazines on mobile platforms.</text>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<!-- if you do not want a page number just do not include it... -->
|
|
||||||
<!--div class="page-number-text">[PAGE NUMBER]</div-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- XXX do we need a Magazine Credits page??? -->
|
|
||||||
|
|
||||||
<div class="article">
|
|
||||||
<div class="cover page">
|
|
||||||
<div class="content">
|
|
||||||
<h1 name="basics" style="color:gray;font-size:100px;">The Basics...</h1>
|
|
||||||
<big>
|
|
||||||
<h2>Main features</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Magazines, Covers, Articles and Pages, fully navigable
|
|
||||||
<li>Three main views: <i style="color:silver">Magazine (under development)</i> Page and Ribbon
|
|
||||||
<li>Fully linkable structure
|
|
||||||
<li>Full intuitive Gesture, Mouse or Keyboard navigation
|
|
||||||
<li>Special #URLs enable full link-based navigation and control
|
|
||||||
<li>Bookmarks and bookmark navigation
|
|
||||||
<li>Intuitive navigator widget
|
|
||||||
<li>Portable to most mobile platforms including: Apple iOS, Android, Windows Phone 7/8, BlackBery, HP webOS and more.
|
|
||||||
<li>Standalone on main desktop operating systems, including Apple MacOS X and Microsoft Windows
|
|
||||||
<li>Based on popular, open and easy to learn and use standards (HTML5 layout, SVG vector graphics)
|
|
||||||
<i style="color: silver">
|
|
||||||
<li>Usable from the web (support for engines other than WebKit not here yet)
|
|
||||||
<li>Integrated Editor (under development)
|
|
||||||
<li>Integrated publishing framework (under development)
|
|
||||||
</i>
|
|
||||||
</ul>
|
|
||||||
</big>
|
|
||||||
<div style="position:absolute; bottom:10px; right:30px">
|
|
||||||
<a href="#next">get started...</a><br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
<h1 name="navigation">PortableMag Navigation and Linking</h1>
|
|
||||||
<div style="float:left; width: 40%; height: 100%; margin: 10px;">
|
|
||||||
<h2>Finger controls</h2>
|
|
||||||
<ul>
|
|
||||||
<li> Single finger swipe left/right – prev/next page.
|
|
||||||
<li> Two finger swipe left/right – prev/next article.
|
|
||||||
<li> Single finger swipe up/down – toggle thumbnail view.
|
|
||||||
<li> Pinch in/out – go in/out of thumbnail view.
|
|
||||||
</ul>
|
|
||||||
<h2>Navigation via #URLs</h2>
|
|
||||||
<h3>The basics</h3>
|
|
||||||
<a href="#1">Page #1</a><br>
|
|
||||||
<a href="#ArticleAnchorExample">Named page</a><br>
|
|
||||||
<p>
|
|
||||||
<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).
|
|
||||||
</i>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="float:left; width: 40%; height: 100%; padding: 10px;">
|
|
||||||
<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="#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>
|
|
||||||
<a href="#bookmark">Toggle bookmark</a><br>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
<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; right: 30px; bottom:10px;">
|
|
||||||
<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:450px; top:250px; 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>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- XXX do we need an Article Credits page??? -->
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
|
|
||||||
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
|
||||||
<defs>
|
|
||||||
<marker refY="50" refX="50" markerHeight="5" markerWidth="5" viewBox="0 0 100 100" orient="auto" markerUnits="strokeWidth" id="se_marker_start_svg_36">
|
|
||||||
<path stroke-width="10" stroke="#000000" fill="#000000" d="m0,50l100,40l-30,-40l30,-40l-100,40z" id="svg_3"/>
|
|
||||||
</marker>
|
|
||||||
<marker refY="50" refX="50" markerHeight="5" markerWidth="5" viewBox="0 0 100 100" orient="auto" markerUnits="strokeWidth" id="se_marker_start_svg_37">
|
|
||||||
<path stroke-width="10" stroke="#000000" fill="#000000" d="m0,50l100,40l-30,-40l30,-40l-100,40z" id="svg_8"/>
|
|
||||||
</marker>
|
|
||||||
</defs>
|
|
||||||
<title>PortableMag Anatomy</title>
|
|
||||||
<g>
|
|
||||||
<title>Layer 1</title>
|
|
||||||
<text fill="#000000" stroke="#000000" stroke-width="0" x="199" y="56.33334" id="svg_1" font-size="32" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" font-weight="bold">PortableMag Anatomy</text>
|
|
||||||
<path id="svg_34" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#000000" fill="none"/>
|
|
||||||
<g id="svg_30">
|
|
||||||
<g id="svg_2">
|
|
||||||
<path stroke="#000000" fill="#000000" fill-opacity="0" d="m78.166656,117.166718l675.000092,0l0,123.000031l-675.000092,0" transform="rotate(180 415.667 178.667)" id="svg_12"/>
|
|
||||||
<rect fill="#ffffff" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="87" y="132" width="130" height="100" stroke="#000000" id="svg_13"/>
|
|
||||||
<rect stroke="#000000" fill="#000000" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" x="223" y="132" width="415.00001" height="100" id="svg_14"/>
|
|
||||||
<text stroke-opacity="0" fill="#000000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="152" y="187.5" id="svg_24" font-size="14" font-family="Sans-serif" text-anchor="middle" xml:space="preserve">Magazine cover</text>
|
|
||||||
<rect stroke="#000000" id="svg_7" fill="#ffffff" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="229.66666" y="138.66667" width="130" height="86"/>
|
|
||||||
<text stroke-opacity="0" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" id="svg_4" y="187" x="294.83334" stroke-width="0" stroke="#000000" fill="#000000">Article Cover</text>
|
|
||||||
<rect id="svg_15" stroke="#000000" fill="#e5e5e5" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="365.66667" y="138.66668" width="130" height="86"/>
|
|
||||||
<text stroke-opacity="0" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" id="svg_5" y="187.00003" x="430.83337" stroke-width="0" stroke="#000000" fill="#000000">Page</text>
|
|
||||||
<rect id="svg_16" stroke="#000000" fill="#e5e5e5" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="501.66665" y="138.66666" width="130" height="86"/>
|
|
||||||
<text id="svg_6" stroke-opacity="0" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" y="186.66667" x="567.00001" stroke-width="0" stroke="#000000" fill="#000000">Page</text>
|
|
||||||
<path stroke="#000000" id="svg_17" fill="#bfbfbf" d="m646.167236,132.167267l105,0l0,99.000031l-105,0" transform="rotate(180 698.667 181.667)"/>
|
|
||||||
<text stroke-opacity="0" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" id="svg_25" y="187.00063" x="709.66669" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">Next Article</text>
|
|
||||||
<text xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="10" id="svg_26" y="113.33334" x="98.66669" stroke-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">Magazine</text>
|
|
||||||
<text xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="9" id="svg_27" y="129.33334" x="236.16669" stroke-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">Article</text>
|
|
||||||
</g>
|
|
||||||
<g id="svg_29">
|
|
||||||
<g id="svg_11">
|
|
||||||
<rect stroke="#000000" fill="#cccccc" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="273" y="295" width="322.99999" height="180" id="svg_20"/>
|
|
||||||
<rect stroke="#000000" fill="#ffffff" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="324.5" y="300.38461" width="220" height="169.23077" id="svg_21"/>
|
|
||||||
<text xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="18" id="svg_10" y="289.33334" x="292.66669" stroke-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">Page</text>
|
|
||||||
<g id="svg_19">
|
|
||||||
<text stroke-opacity="0" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="18" id="svg_9" y="381.83334" x="434.16669" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">Page Content</text>
|
|
||||||
<text xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" id="svg_18" y="400.83334" x="433.66669" stroke-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">(safe area)</text>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="svg_28">
|
|
||||||
<line id="svg_32" y2="275.33334" x2="305.66669" y1="227.33334" x1="362.66669" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000" fill="none"/>
|
|
||||||
<line stroke="#000000" id="svg_33" y2="228.33334" x2="497.66669" y1="289.33334" x1="587.66669" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="none"/>
|
|
||||||
</g>
|
|
||||||
<g id="svg_23">
|
|
||||||
<text stroke-opacity="0" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="10" id="svg_22" y="532.33334" x="446.66669" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">This area might get clipped</text>
|
|
||||||
<path marker-start="url(#se_marker_start_svg_36)" stroke="#000000" id="svg_36" d="m301.666687,464.333344c1,39 84,28 112,55.000031" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="none"/>
|
|
||||||
<path id="svg_37" marker-start="url(#se_marker_start_svg_37)" stroke="#000000" d="m577.666687,461.666687c1,39 -71,31 -98,56" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="none"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content" style="background: black; color: gray; padding-left: 20px; padding-right: 20px;">
|
|
||||||
<h1>The Page <i>content</i> has a fixed size...</h1>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
<a name="page-3-anchor"></a>
|
|
||||||
<img src="img.jpg" height="100%" align="left" style="margin-right: 15px"/>
|
|
||||||
<h1>Using the content block...</h1>
|
|
||||||
<p>
|
|
||||||
The content block can contain any HTML.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
The contents will allways fit the screen, the aspect ratio
|
|
||||||
of the content block is fixed regardless of the viewer.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Contents will not get clipped as long as they are within the block.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
NOTE: by default the overflow is visible (see <a href="#next">next page</a>), so be carefull.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
<img src="img.jpg" width="200%" style="position: absolute; left: -50%; top: -20%"/>
|
|
||||||
<div style="position:absolute; width:100%; height: 100%; color: white;">
|
|
||||||
<h1>You can still use the full page area...</h1>
|
|
||||||
<p>
|
|
||||||
Though anything outside the content block can and will get clipped,
|
|
||||||
depending on viewer aspect ratio...
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
You can see this by resizing the page in browser or rotating the device.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="article">
|
|
||||||
<div class="cover page">
|
|
||||||
<div class="content" name="ArticleAnchorExample">
|
|
||||||
<h1>Page Templates</h1>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
This page contains several examples of template fields,
|
|
||||||
the first one is the simplest, the magazine name
|
|
||||||
(<span class="magazine-title-text">[MAGAZINE NAME]</span>),
|
|
||||||
then we'll have the index (see next) and in the bottom-right
|
|
||||||
corner is the page number...
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="article-index">[ARTICLE INDEX]</div>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page" style="background: black; color: white;">
|
|
||||||
<div class="content">
|
|
||||||
<h1>Two column</h1>
|
|
||||||
<div style="float:left; width: 45%; height: 100%; margin: 10px;">
|
|
||||||
Column 1
|
|
||||||
</div>
|
|
||||||
<div style="float:left; width: 45%; height: 100%; padding: 10px;">
|
|
||||||
Column 2
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page no-resize page-align-left">
|
|
||||||
<div class="content" style="background:gold">
|
|
||||||
Left-aligned page...
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page no-resize page-align-center">
|
|
||||||
<div class="content" style="background:yellow; width: 600px">
|
|
||||||
Center-aligned page...
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page no-resize page-align-right">
|
|
||||||
<div class="content" style="background:gold; width: 400px">
|
|
||||||
Right-aligned page...
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page no-resize page-align-right">
|
|
||||||
<div class="content" style="background:orange; width: 200px">
|
|
||||||
Right-aligned page...
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--div class="article vertical">
|
|
||||||
<div class="cover page">
|
|
||||||
<div class="content">
|
|
||||||
<h1>Article Cover</h1>
|
|
||||||
<a href="#home">home</a><br>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group">
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
Page
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
Page
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
Page<br>
|
|
||||||
<a href="#home">home</a><br>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div-->
|
|
||||||
<div class="article">
|
|
||||||
<!-- page set -->
|
|
||||||
<div class="group" style="background: url(img.jpg) no-repeat right top; background-size: 100% auto; color: white;">
|
|
||||||
<div class="page cover no-resize page-align-left" style="background:transparent">
|
|
||||||
<div class="content">
|
|
||||||
<h1>Page Set Example</h1>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page no-resize" style="background:transparent">
|
|
||||||
<div class="content">
|
|
||||||
Page in set<br>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page no-resize page-align-right" style="background:transparent">
|
|
||||||
<div class="content">
|
|
||||||
Page in set<br>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
<!-- vim:set ts=4 sw=4 nowrap : -->
|
|
||||||
@ -1,758 +0,0 @@
|
|||||||
<!-- XXX for some reason a doctype kills the layout, need to investigate -->
|
|
||||||
<!--DOCTYPE html-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>PortableMag</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="magazine.css">
|
|
||||||
<link rel="stylesheet" href="magazine-themes.css">
|
|
||||||
<link rel="stylesheet" href="magazine-custom.css">
|
|
||||||
<style>
|
|
||||||
|
|
||||||
.viewer {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.magazine {
|
|
||||||
left: 150px;
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current.page {
|
|
||||||
/*
|
|
||||||
z-index: 9000;
|
|
||||||
box-shadow: 10px 10px 150px -50px black;
|
|
||||||
border-bottom: solid yellow 10px;
|
|
||||||
*/
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
.page:hover {
|
|
||||||
z-index: 9000;
|
|
||||||
box-shadow: 10px 10px 150px 0px black;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
.page {
|
|
||||||
|
|
||||||
vertical-align:top;
|
|
||||||
|
|
||||||
-webkit-transition: none;
|
|
||||||
-moz-transition: none;
|
|
||||||
-o-transition: all 0 ease;
|
|
||||||
-ms-transition: none;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroller {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
width: auto;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* vertical */
|
|
||||||
.vertical.magazine,
|
|
||||||
.vertical.article,
|
|
||||||
.vertical.group {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
.vertical .article,
|
|
||||||
.vertical .group,
|
|
||||||
.vertical .page {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script src="ext-lib/jquery.js"></script>
|
|
||||||
<script src="ext-lib/jquery.scrollto.js"></script>
|
|
||||||
<script src="ext-lib/jquery.scrollstop.js"></script>
|
|
||||||
|
|
||||||
<script src="ext-lib/iscroll.js"></script>
|
|
||||||
|
|
||||||
<script src="lib/jli.js"></script>
|
|
||||||
|
|
||||||
<script src="magazine.js"></script>
|
|
||||||
<script src="layout.js"></script>
|
|
||||||
|
|
||||||
<script src="platform.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
$(document).ready(function(){
|
|
||||||
// keyboard...
|
|
||||||
$(document)
|
|
||||||
.keydown(makeKeyboardHandler({
|
|
||||||
'*': {
|
|
||||||
title: 'Global',
|
|
||||||
doc: '',
|
|
||||||
|
|
||||||
36: firstPage, // Home
|
|
||||||
35: lastPage, // End
|
|
||||||
37: prevPage, // Left
|
|
||||||
39: nextPage, // Right
|
|
||||||
32: {
|
|
||||||
'default': nextPage, // Space
|
|
||||||
'shift': prevPage // shift-Space
|
|
||||||
},
|
|
||||||
// combined navigation with actions..
|
|
||||||
38: function(){togglePageView()}, // Up
|
|
||||||
40: function(){togglePageView()}, // Down
|
|
||||||
|
|
||||||
70: function(){ // F
|
|
||||||
togglePageFitMode()
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
function(k){console.log(k)}))
|
|
||||||
|
|
||||||
|
|
||||||
window.SNAP_TO_PAGES_IN_RIBBON = false
|
|
||||||
window.INITIAL_TIME = 200
|
|
||||||
window.INNERTIA_SCALE = 1
|
|
||||||
|
|
||||||
// XXX make this a default setup in the lib...
|
|
||||||
window.MagazineScroller = makeScrollHandler($('.viewer'), {
|
|
||||||
hScroll: true,
|
|
||||||
vScroll: false,
|
|
||||||
|
|
||||||
/*
|
|
||||||
// XXX the callback signature is a tad messy, revise...
|
|
||||||
// XXX need ability to dampen innertia, add some kind of resistance...
|
|
||||||
callback: function(data){
|
|
||||||
var evt = data.orig_event
|
|
||||||
var scroller = data.scroller
|
|
||||||
var root = scroller.root
|
|
||||||
var speed = data.speed
|
|
||||||
var distance = data.distance
|
|
||||||
var duration = data.duration
|
|
||||||
var touches = data.touches
|
|
||||||
var state = data.state
|
|
||||||
|
|
||||||
// canceling a scroll...
|
|
||||||
if(state == 'canceling' && togglePageView('?') == 'on'){
|
|
||||||
//root.trigger('userScrollCancelled')
|
|
||||||
setCurrentPage()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// ignore situations when the user is still touching...
|
|
||||||
// ...like when he/she lifted one finger of several...
|
|
||||||
if(touches > 0){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// click/tap...
|
|
||||||
if(Math.abs(distance) < CLICK_THRESHOLD){
|
|
||||||
if(duration > LONG_CLICK_THRESHOLD){
|
|
||||||
//root.trigger('userLongClick')
|
|
||||||
}
|
|
||||||
// click...
|
|
||||||
//root.trigger('userClick')
|
|
||||||
|
|
||||||
// get page target and select it if it's within a page...
|
|
||||||
var target = $(evt.target)
|
|
||||||
target = getPageNumber(
|
|
||||||
target.hasClass('page') ? target
|
|
||||||
: target.parents('.page'))
|
|
||||||
if(target != -1){
|
|
||||||
togglePageView()
|
|
||||||
setCurrentPage(target)
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var pages = $('.page')
|
|
||||||
var mag = $('.magazine')
|
|
||||||
|
|
||||||
// swipe left/right...
|
|
||||||
// XXX add swipe up/down...
|
|
||||||
if(!isNavigationViewRelative()){
|
|
||||||
var cur = $('.current.page')
|
|
||||||
if(distance >= CLICK_THRESHOLD){
|
|
||||||
//root.trigger('userSwipeRight')
|
|
||||||
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
return nextPage(cur)
|
|
||||||
} else if(distance <= -CLICK_THRESHOLD){
|
|
||||||
//root.trigger('userSwipeLeft')
|
|
||||||
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
return prevPage(cur)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// this makes things snap...
|
|
||||||
if(SNAP_TO_PAGES_IN_RIBBON){
|
|
||||||
return setCurrentPage()
|
|
||||||
}
|
|
||||||
|
|
||||||
// innertial scroll...
|
|
||||||
// XXX make this generic...
|
|
||||||
var t = INITIAL_TIME * (1+Math.abs(speed))
|
|
||||||
// XXX this is only horisontal at this point...
|
|
||||||
var at = getElementShift(mag).left
|
|
||||||
var to = at + (t*speed)
|
|
||||||
var first = getMagazineOffset(pages.first(), null, 'center')
|
|
||||||
var last = getMagazineOffset(pages.last(), null, 'center')
|
|
||||||
|
|
||||||
// filter out really small speeds...
|
|
||||||
if(Math.abs(speed) > 0.5){
|
|
||||||
// check bounds...
|
|
||||||
// NOTE: need to cut the distance and time if we are going the
|
|
||||||
// hit the bounds...
|
|
||||||
if(to > first){
|
|
||||||
// trim the time proportionally...
|
|
||||||
var _t = t
|
|
||||||
t = Math.abs(t * ((at-first)/(at-to)))
|
|
||||||
to = first
|
|
||||||
setTransitionEasing(mag, 'linear')
|
|
||||||
} else if(to < last){
|
|
||||||
// trim the time proportionally...
|
|
||||||
var _t = t
|
|
||||||
t = Math.abs(t * ((at-last)/(at-to)))
|
|
||||||
to = last
|
|
||||||
setTransitionEasing(mag, 'linear')
|
|
||||||
|
|
||||||
} else {
|
|
||||||
setTransitionEasing(mag, 'ease-out')
|
|
||||||
}
|
|
||||||
|
|
||||||
setTransitionDuration(mag, t)
|
|
||||||
setElementTransform(mag, to)
|
|
||||||
|
|
||||||
// restore defaults...
|
|
||||||
// XXX this is a bit dumb at this point...
|
|
||||||
// XXX run this as a transition end handler...
|
|
||||||
setTimeout(function(){
|
|
||||||
setTransitionEasing(mag, 'ease-out')
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
}, t+10)
|
|
||||||
|
|
||||||
// check scroll bounds...
|
|
||||||
// do not let the user scroll out of view...
|
|
||||||
} else {
|
|
||||||
if(at > first){
|
|
||||||
setTransitionEasing(mag, 'ease-in')
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
//setCurrentPage(0)
|
|
||||||
setElementTransform(mag, first)
|
|
||||||
|
|
||||||
} else if(at < last){
|
|
||||||
setTransitionEasing(mag, 'ease-in')
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
//setCurrentPage(-1)
|
|
||||||
setElementTransform(mag, last)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
*/
|
|
||||||
}).start()
|
|
||||||
|
|
||||||
$('.viewer')
|
|
||||||
.on('scrollCancelled', function(){
|
|
||||||
setCurrentPage()
|
|
||||||
})
|
|
||||||
.on('shortClick', function(evt, data){
|
|
||||||
// get page target and select it if it's within a page...
|
|
||||||
var target = $(data.orig_event.target)
|
|
||||||
target = getPageNumber(
|
|
||||||
target.hasClass('page') ? target
|
|
||||||
: target.parents('.page'))
|
|
||||||
if(target != -1){
|
|
||||||
togglePageView()
|
|
||||||
setCurrentPage(target)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.on('longClick', function(evt, data){
|
|
||||||
})
|
|
||||||
.on('swipeLeft', function(evt, data){
|
|
||||||
// ribbon mode...
|
|
||||||
if(isNavigationViewRelative()){
|
|
||||||
setTimeout(function(){
|
|
||||||
data.scroller.root.trigger('screenReleased', data)}, 2)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// full page view...
|
|
||||||
var cur = $('.current.page')
|
|
||||||
var mag = $('.magazine')
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
|
|
||||||
prevPage(cur)
|
|
||||||
})
|
|
||||||
.on('swipeRight', function(evt, data){
|
|
||||||
// ribbon mode...
|
|
||||||
if(isNavigationViewRelative()){
|
|
||||||
setTimeout(function(){
|
|
||||||
data.scroller.root.trigger('screenReleased', data)}, 2)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// full page view...
|
|
||||||
var cur = $('.current.page')
|
|
||||||
var mag = $('.magazine')
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
|
|
||||||
nextPage(cur)
|
|
||||||
})
|
|
||||||
|
|
||||||
// do snap and innertia...
|
|
||||||
.on('screenReleased', function(evt, data){
|
|
||||||
// this makes things snap...
|
|
||||||
if(SNAP_TO_PAGES_IN_RIBBON){
|
|
||||||
setCurrentPage()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
var speed = data.speed
|
|
||||||
var pages = $('.page')
|
|
||||||
var mag = $('.magazine')
|
|
||||||
// innertial scroll...
|
|
||||||
// XXX make this generic...
|
|
||||||
var t = INITIAL_TIME * (1+Math.abs(speed))
|
|
||||||
// XXX this is only horisontal at this point...
|
|
||||||
var at = getElementShift(mag).left
|
|
||||||
var to = (at + (t*speed*INNERTIA_SCALE))
|
|
||||||
var first = getMagazineOffset(pages.first(), null, 'center')
|
|
||||||
var last = getMagazineOffset(pages.last(), null, 'center')
|
|
||||||
|
|
||||||
// filter out really small speeds...
|
|
||||||
if(Math.abs(speed) > 0.5){
|
|
||||||
// check bounds...
|
|
||||||
// NOTE: need to cut the distance and time if we are going the
|
|
||||||
// hit the bounds...
|
|
||||||
if(to > first){
|
|
||||||
// trim the time proportionally...
|
|
||||||
var _t = t
|
|
||||||
t = Math.abs(t * ((at-first)/(at-to)))
|
|
||||||
to = first
|
|
||||||
setTransitionEasing(mag, 'linear')
|
|
||||||
} else if(to < last){
|
|
||||||
// trim the time proportionally...
|
|
||||||
var _t = t
|
|
||||||
t = Math.abs(t * ((at-last)/(at-to)))
|
|
||||||
to = last
|
|
||||||
setTransitionEasing(mag, 'linear')
|
|
||||||
|
|
||||||
} else {
|
|
||||||
setTransitionEasing(mag, 'ease-out')
|
|
||||||
}
|
|
||||||
|
|
||||||
setTransitionDuration(mag, t)
|
|
||||||
setElementTransform(mag, to)
|
|
||||||
|
|
||||||
// restore defaults...
|
|
||||||
// XXX this is a bit dumb at this point...
|
|
||||||
// XXX run this as a transition end handler...
|
|
||||||
setTimeout(function(){
|
|
||||||
setTransitionEasing(mag, 'ease-out')
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
}, t+10)
|
|
||||||
|
|
||||||
// check scroll bounds...
|
|
||||||
// do not let the user scroll out of view...
|
|
||||||
} else {
|
|
||||||
if(at > first){
|
|
||||||
setTransitionEasing(mag, 'ease-in')
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
//setCurrentPage(0)
|
|
||||||
setElementTransform(mag, first)
|
|
||||||
|
|
||||||
} else if(at < last){
|
|
||||||
setTransitionEasing(mag, 'ease-in')
|
|
||||||
setTransitionDuration(mag, INITIAL_TIME)
|
|
||||||
//setCurrentPage(-1)
|
|
||||||
setElementTransform(mag, last)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// XXX stub...
|
|
||||||
setTransitionEasing($('.magazine'), 'ease-out')
|
|
||||||
|
|
||||||
// expand the templates...
|
|
||||||
runMagazineTemplates()
|
|
||||||
|
|
||||||
setCurrentPage(0)
|
|
||||||
togglePageView('on')
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div id="viewer" class="viewer">
|
|
||||||
|
|
||||||
<div class="magazine" name="PortableMag">
|
|
||||||
<div class="cover page">
|
|
||||||
<div class="content">
|
|
||||||
<!--h1 style="color:gray;font-size:125px;margin-bottom:-35px; margin-top: 160px">PortableMag</h1>
|
|
||||||
<h1 style="color:silver; font-size: 20px; margin-left:10px">A suit for publishing portable periodic magazines on mobile platforms.</h1-->
|
|
||||||
|
|
||||||
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
|
||||||
<g>
|
|
||||||
<title>PortableMag cover</title>
|
|
||||||
<defs>
|
|
||||||
<path id="circle_path" d="m177.720383,238.333344c0,-82.290771 66.655533,-148.946304 148.946304,-148.946304c82.290771,0 148.946289,66.655533 148.946289,148.946304c0,82.290771 -66.655518,148.946289 -148.946289,148.946289c-82.290771,0 -148.946304,-66.655518 -148.946304,-148.946289z"/>
|
|
||||||
</defs>
|
|
||||||
<text fill="#7f7f7f" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="306" y="434.33334" id="svg_2" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve"/>
|
|
||||||
<g id="svg_1">
|
|
||||||
<g id="svg_8">
|
|
||||||
<text stroke="#000000" fill="#7f7f7f" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="224.898504" y="309.870464" id="svg_6" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" font-weight="bold" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Mag</text>
|
|
||||||
<text stroke="#000000" fill="#a8a8a8" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="156.581224" y="309.650884" id="svg_7" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Portable</text>
|
|
||||||
</g>
|
|
||||||
<text stroke="#000000" fill="#afafaf" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="261.526111" y="338.824173" id="svg_4" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(1.53525 0 0 1.53525 -34.4106 -167.936)" font-weight="normal" font-style="normal">A suit for publishing portable periodic magazines on mobile platforms.</text>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<!-- if you do not want a page number just do not include it... -->
|
|
||||||
<!--div class="page-number-text">[PAGE NUMBER]</div-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- XXX do we need a Magazine Credits page??? -->
|
|
||||||
|
|
||||||
<div class="article">
|
|
||||||
<div class="cover page">
|
|
||||||
<div class="content">
|
|
||||||
<h1 name="basics" style="color:gray;font-size:100px;">The Basics...</h1>
|
|
||||||
<big>
|
|
||||||
<h2>Main features</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Magazines, Covers, Articles and Pages, fully navigable
|
|
||||||
<li>Three main views: <i style="color:silver">Magazine (under development)</i> Page and Ribbon
|
|
||||||
<li>Fully linkable structure
|
|
||||||
<li>Full intuitive Gesture, Mouse or Keyboard navigation
|
|
||||||
<li>Special #URLs enable full link-based navigation and control
|
|
||||||
<li>Bookmarks and bookmark navigation
|
|
||||||
<li>Intuitive navigator widget
|
|
||||||
<li>Portable to most mobile platforms including: Apple iOS, Android, Windows Phone 7/8, BlackBery, HP webOS and more.
|
|
||||||
<li>Standalone on main desktop operating systems, including Apple MacOS X and Microsoft Windows
|
|
||||||
<li>Based on popular, open and easy to learn and use standards (HTML5 layout, SVG vector graphics)
|
|
||||||
<i style="color: silver">
|
|
||||||
<li>Usable from the web (support for engines other than WebKit not here yet)
|
|
||||||
<li>Integrated Editor (under development)
|
|
||||||
<li>Integrated publishing framework (under development)
|
|
||||||
</i>
|
|
||||||
</ul>
|
|
||||||
</big>
|
|
||||||
<div style="position:absolute; bottom:10px; right:30px">
|
|
||||||
<a href="#next">get started...</a><br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
<h1 name="navigation">PortableMag Navigation and Linking</h1>
|
|
||||||
<div style="float:left; width: 40%; height: 100%; margin: 10px;">
|
|
||||||
<h2>Finger controls</h2>
|
|
||||||
<ul>
|
|
||||||
<li> Single finger swipe left/right – prev/next page.
|
|
||||||
<li> Two finger swipe left/right – prev/next article.
|
|
||||||
<li> Single finger swipe up/down – toggle thumbnail view.
|
|
||||||
<li> Pinch in/out – go in/out of thumbnail view.
|
|
||||||
</ul>
|
|
||||||
<h2>Navigation via #URLs</h2>
|
|
||||||
<h3>The basics</h3>
|
|
||||||
<a href="#1">Page #1</a><br>
|
|
||||||
<a href="#ArticleAnchorExample">Named page</a><br>
|
|
||||||
<p>
|
|
||||||
<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).
|
|
||||||
</i>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="float:left; width: 40%; height: 100%; padding: 10px;">
|
|
||||||
<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="#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>
|
|
||||||
<a href="#bookmark">Toggle bookmark</a><br>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
<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; right: 30px; bottom:10px;">
|
|
||||||
<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:450px; top:250px; 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>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- XXX do we need an Article Credits page??? -->
|
|
||||||
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
|
|
||||||
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
|
||||||
<defs>
|
|
||||||
<marker refY="50" refX="50" markerHeight="5" markerWidth="5" viewBox="0 0 100 100" orient="auto" markerUnits="strokeWidth" id="se_marker_start_svg_36">
|
|
||||||
<path stroke-width="10" stroke="#000000" fill="#000000" d="m0,50l100,40l-30,-40l30,-40l-100,40z" id="svg_3"/>
|
|
||||||
</marker>
|
|
||||||
<marker refY="50" refX="50" markerHeight="5" markerWidth="5" viewBox="0 0 100 100" orient="auto" markerUnits="strokeWidth" id="se_marker_start_svg_37">
|
|
||||||
<path stroke-width="10" stroke="#000000" fill="#000000" d="m0,50l100,40l-30,-40l30,-40l-100,40z" id="svg_8"/>
|
|
||||||
</marker>
|
|
||||||
</defs>
|
|
||||||
<title>PortableMag Anatomy</title>
|
|
||||||
<g>
|
|
||||||
<title>Layer 1</title>
|
|
||||||
<text fill="#000000" stroke="#000000" stroke-width="0" x="199" y="56.33334" id="svg_1" font-size="32" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" font-weight="bold">PortableMag Anatomy</text>
|
|
||||||
<path id="svg_34" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#000000" fill="none"/>
|
|
||||||
<g id="svg_30">
|
|
||||||
<g id="svg_2">
|
|
||||||
<path stroke="#000000" fill="#000000" fill-opacity="0" d="m78.166656,117.166718l675.000092,0l0,123.000031l-675.000092,0" transform="rotate(180 415.667 178.667)" id="svg_12"/>
|
|
||||||
<rect fill="#ffffff" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="87" y="132" width="130" height="100" stroke="#000000" id="svg_13"/>
|
|
||||||
<rect stroke="#000000" fill="#000000" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" x="223" y="132" width="415.00001" height="100" id="svg_14"/>
|
|
||||||
<text stroke-opacity="0" fill="#000000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="152" y="187.5" id="svg_24" font-size="14" font-family="Sans-serif" text-anchor="middle" xml:space="preserve">Magazine cover</text>
|
|
||||||
<rect stroke="#000000" id="svg_7" fill="#ffffff" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="229.66666" y="138.66667" width="130" height="86"/>
|
|
||||||
<text stroke-opacity="0" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" id="svg_4" y="187" x="294.83334" stroke-width="0" stroke="#000000" fill="#000000">Article Cover</text>
|
|
||||||
<rect id="svg_15" stroke="#000000" fill="#e5e5e5" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="365.66667" y="138.66668" width="130" height="86"/>
|
|
||||||
<text stroke-opacity="0" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" id="svg_5" y="187.00003" x="430.83337" stroke-width="0" stroke="#000000" fill="#000000">Page</text>
|
|
||||||
<rect id="svg_16" stroke="#000000" fill="#e5e5e5" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="501.66665" y="138.66666" width="130" height="86"/>
|
|
||||||
<text id="svg_6" stroke-opacity="0" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" y="186.66667" x="567.00001" stroke-width="0" stroke="#000000" fill="#000000">Page</text>
|
|
||||||
<path stroke="#000000" id="svg_17" fill="#bfbfbf" d="m646.167236,132.167267l105,0l0,99.000031l-105,0" transform="rotate(180 698.667 181.667)"/>
|
|
||||||
<text stroke-opacity="0" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" id="svg_25" y="187.00063" x="709.66669" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">Next Article</text>
|
|
||||||
<text xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="10" id="svg_26" y="113.33334" x="98.66669" stroke-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">Magazine</text>
|
|
||||||
<text xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="9" id="svg_27" y="129.33334" x="236.16669" stroke-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">Article</text>
|
|
||||||
</g>
|
|
||||||
<g id="svg_29">
|
|
||||||
<g id="svg_11">
|
|
||||||
<rect stroke="#000000" fill="#cccccc" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="273" y="295" width="322.99999" height="180" id="svg_20"/>
|
|
||||||
<rect stroke="#000000" fill="#ffffff" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="324.5" y="300.38461" width="220" height="169.23077" id="svg_21"/>
|
|
||||||
<text xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="18" id="svg_10" y="289.33334" x="292.66669" stroke-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">Page</text>
|
|
||||||
<g id="svg_19">
|
|
||||||
<text stroke-opacity="0" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="18" id="svg_9" y="381.83334" x="434.16669" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">Page Content</text>
|
|
||||||
<text xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" id="svg_18" y="400.83334" x="433.66669" stroke-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">(safe area)</text>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g id="svg_28">
|
|
||||||
<line id="svg_32" y2="275.33334" x2="305.66669" y1="227.33334" x1="362.66669" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000" fill="none"/>
|
|
||||||
<line stroke="#000000" id="svg_33" y2="228.33334" x2="497.66669" y1="289.33334" x1="587.66669" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="none"/>
|
|
||||||
</g>
|
|
||||||
<g id="svg_23">
|
|
||||||
<text stroke-opacity="0" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="10" id="svg_22" y="532.33334" x="446.66669" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="#000000">This area might get clipped</text>
|
|
||||||
<path marker-start="url(#se_marker_start_svg_36)" stroke="#000000" id="svg_36" d="m301.666687,464.333344c1,39 84,28 112,55.000031" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="none"/>
|
|
||||||
<path id="svg_37" marker-start="url(#se_marker_start_svg_37)" stroke="#000000" d="m577.666687,461.666687c1,39 -71,31 -98,56" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="none"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content" style="background: black; color: gray; padding-left: 20px; padding-right: 20px;">
|
|
||||||
<h1>The Page <i>content</i> has a fixed size...</h1>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
<a name="page-3-anchor"></a>
|
|
||||||
<img src="img.jpg" height="100%" align="left" style="margin-right: 15px"/>
|
|
||||||
<h1>Using the content block...</h1>
|
|
||||||
<p>
|
|
||||||
The content block can contain any HTML.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
The contents will allways fit the screen, the aspect ratio
|
|
||||||
of the content block is fixed regardless of the viewer.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Contents will not get clipped as long as they are within the block.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
NOTE: by default the overflow is visible (see <a href="#next">next page</a>), so be carefull.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
<img src="img.jpg" width="200%" style="position: absolute; left: -50%; top: -20%"/>
|
|
||||||
<div style="position:absolute; width:100%; height: 100%; color: white;">
|
|
||||||
<h1>You can still use the full page area...</h1>
|
|
||||||
<p>
|
|
||||||
Though anything outside the content block can and will get clipped,
|
|
||||||
depending on viewer aspect ratio...
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
You can see this by resizing the page in browser or rotating the device.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="article">
|
|
||||||
<div class="cover page">
|
|
||||||
<div class="content" name="ArticleAnchorExample">
|
|
||||||
<h1>Page Templates</h1>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
This page contains several examples of template fields,
|
|
||||||
the first one is the simplest, the magazine name
|
|
||||||
(<span class="magazine-title-text">[MAGAZINE NAME]</span>),
|
|
||||||
then we'll have the index (see next) and in the bottom-right
|
|
||||||
corner is the page number...
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="article-index">[ARTICLE INDEX]</div>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page" style="background: black; color: white;">
|
|
||||||
<div class="content">
|
|
||||||
<h1>Two column</h1>
|
|
||||||
<div style="float:left; width: 45%; height: 100%; margin: 10px;">
|
|
||||||
Column 1
|
|
||||||
</div>
|
|
||||||
<div style="float:left; width: 45%; height: 100%; padding: 10px;">
|
|
||||||
Column 2
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page no-resize page-align-left">
|
|
||||||
<div class="content" style="background:gold">
|
|
||||||
Left-aligned page...
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page no-resize page-align-center">
|
|
||||||
<div class="content" style="background:yellow; width: 600px">
|
|
||||||
Center-aligned page...
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page no-resize page-align-right">
|
|
||||||
<div class="content" style="background:gold; width: 400px">
|
|
||||||
Right-aligned page...
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page no-resize page-align-right">
|
|
||||||
<div class="content" style="background:orange; width: 200px">
|
|
||||||
Right-aligned page...
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--div class="article vertical">
|
|
||||||
<div class="cover page">
|
|
||||||
<div class="content">
|
|
||||||
<h1>Article Cover</h1>
|
|
||||||
<a href="#home">home</a><br>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="group">
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
Page
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
Page
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page">
|
|
||||||
<div class="content">
|
|
||||||
Page<br>
|
|
||||||
<a href="#home">home</a><br>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div-->
|
|
||||||
<div class="article">
|
|
||||||
<!-- page set -->
|
|
||||||
<div class="group" style="background: url(img.jpg) no-repeat right top; background-size: 100% auto; color: white;">
|
|
||||||
<div class="page cover no-resize page-align-left" style="background:transparent">
|
|
||||||
<div class="content">
|
|
||||||
<h1>Page Set Example</h1>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page no-resize" style="background:transparent">
|
|
||||||
<div class="content">
|
|
||||||
Page in set<br>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page no-resize page-align-right" style="background:transparent">
|
|
||||||
<div class="content">
|
|
||||||
Page in set<br>
|
|
||||||
|
|
||||||
<div class="page-number-text">[PAGE NUMBER]</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
<!-- vim:set ts=4 sw=4 nowrap : -->
|
|
||||||
Loading…
x
Reference in New Issue
Block a user