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