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

more cleanup and refactoring...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-02-26 14:35:30 +04:00
parent 40af08494a
commit f417236a72
1 changed files with 223 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
index.html
View File

@ -94,8 +94,8 @@ function prepareTransitions(elem){
}
$(document).ready(function(){
// general window behavior...
$(window)
//.resize(viewResizeHandler)
.resize(updateView)
.bind('hashchange', hashChangeHandler)
@ -129,8 +129,6 @@ $(document).ready(function(){
},
function(k){console.log(k)}))
//setTransformOrigin($('.magazine'))
window.MagazineScroller = makeScrollHandler($('.viewer'), {
hScroll: true,
vScroll: false,
@ -149,9 +147,6 @@ $(document).ready(function(){
.on('swipeRight', handleSwipeRight)
.on('swipeUp swipeDown', function(){ togglePageView('off') })
.on('screenReleased', handleScrollRelease)
/*
.on('screenReleased swipeRight swipeLeft', handleScrollRelease)
*/
.on('pageChanged', updatePageNumberIndicator)
.on('magazineDataLoaded', loadMagazineChrome)
@ -192,18 +187,19 @@ $(document).ready(function(){
</head>
<body>
<!-- Magazine Chrome -->
<div class="chrome">
<!-- Splash screen -->
<div class="splash noSwipe">
<!-- Splash screen -->
<div class="splash noSwipe">
<!-- XXX replace this with a background-image logo... -->
<table width="100%" height="100%"><tr><td align="center" valign="middle">
<!--h2><div id="spinner" style="position:relative; display:inline-block; width:50px; height:50px; vertical-align:middle;"></div><i>loading...</i></h2-->
<div id="spinner" style="position:relative; display:inline-block; width:50px; height:50px; vertical-align:middle;"></div>
<script>
// add a spinner to the splash...
var opts = {
$('#spinner').spin({
lines: 11, // The number of lines to draw
length: 6, // The length of each line
width: 4, // The line thickness
@ -219,16 +215,17 @@ $(document).ready(function(){
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
}
$('#spinner').spin(opts)
})
</script>
</td></tr></table>
</div>
</div>
<!-- Toolbars -->
<!-- Toolbars -->
<div class="left-toolbar">
<!-- Editor Toolbar -->
<div class="left-toolbar">
<svg id="new-magazine" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
<g>
@ -348,10 +345,12 @@ $(document).ready(function(){
</svg>
</div>
</div>
</div>
<!-- Editor Toolbar (end) -->
<div class="top-toolbar">
<!-- Top Toolbar -->
<div class="top-toolbar">
<div class="left-set">
<div class="button title"><a href="#home" class="magazine-title-text">Magazine Title</a></div>
</div>
@ -401,8 +400,12 @@ $(document).ready(function(){
</a>
</div>
</div>
</div>
<div class="bottom-toolbar">
</div>
<!-- Top Toolbar (end) -->
<!-- Bottom Toolbar -->
<div class="bottom-toolbar">
<!-- this is just an example-->
<div class="controls">
<a href="#home" title="(Home)">Cover</a>
@ -420,19 +423,19 @@ $(document).ready(function(){
</div>
</div>
<div class="page-number">0/0</div>
</div>
</div>
<!-- Bottom Toolbar (end) -->
<!-- Toolbars (end) -->
<!-- Magazine Viewer -------------------------------------------------->
<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/ -->
@ -851,7 +854,11 @@ $(document).ready(function(){
</div>
</div>
<!-- Magazine Viewer (end) ------------------------------------------>
</div>
<!-- Magazine Chrome (end) -->
</body>
</html>