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

refactored out the getPageTargetScale, now usable in both index and index2...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-02-22 16:54:29 +04:00
parent 2614207cd3
commit a086a33b72
6 changed files with 296 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

200
index2.html
View File

@ -209,62 +209,67 @@ $(document).ready(function(){
</div> </div>
<div class="page"> <div class="page">
<div class="content"> <div class="content">
<h1 name="navigation">PortableMag Navigation and Linking</h1> <div class="header">
<div style="float:left; width: 40%; height: 100%; margin: 10px;"> <h1 name="navigation">PortableMag Navigation and Linking</h1>
<h2>Finger controls</h2>
<ul>
<li> Single finger swipe left/right &ndash; prev/next page.
<li> Two finger swipe left/right &ndash; prev/next article.
<li> Single finger swipe up/down &ndash; toggle thumbnail view.
<li> Pinch in/out &ndash; 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>
<div class="body two-column">
<div class="no-column-break">
<h2>Finger controls</h2>
<ul>
<li> Single finger swipe left/right &ndash; prev/next page.
<li> Two finger swipe left/right &ndash; prev/next article.
<li> Single finger swipe up/down &ndash; toggle thumbnail view.
<li> Pinch in/out &ndash; 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;"> <div class="no-column-break">
<h3>Special anchors</h3> <h3>Special anchors</h3>
<p>These show up in the page URL</p> <p>These show up in the page URL</p>
<a href="#home">Magazine cover</a><br> <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="#thumbnails">Thumbnail view</a><br>
<a href="#example-layer">Toggle a hidden layer</a><br> <a href="#example-layer">Toggle a hidden layer</a><br>
<span name="example-layer" class="hidden"> <span name="example-layer" class="hidden">
<a href="#hideLayers">Hide all layers</a><br> <a href="#hideLayers">Hide all layers</a><br>
</span> </span>
<a href="#bookmark">Toggle bookmark</a><br> <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 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>
<p>
<a href="#config">configuration demo</a>
</p>
</div>
<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>
<div style="position:absolute; right: 30px; bottom:10px;"> <div class="footer">
<a href="#config">configuration demo</a> <a href="#next">next page...</a><br> <div class="page-number-text">[PAGE NUMBER]</div>
</div> </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>
</div> </div>
@ -383,35 +388,92 @@ $(document).ready(function(){
<div class="article"> <div class="article">
<div class="cover page"> <div class="cover page">
<div class="content" name="ArticleAnchorExample"> <div class="content" name="ArticleAnchorExample">
<h1>Page Templates</h1> <div class="header">
<h1>Page Templates</h1>
</div>
<div class="body">
<p> <h2>Inline basic macros</h2>
This page contains several examples of template fields, <p>
the first one is the simplest, the magazine name This page contains several examples of inline template/macro fields,
(<span class="magazine-title-text">[MAGAZINE NAME]</span>), these are HTML elements whos content will get replaced depending on
then we'll have the index (see next) and in the bottom-right their class.
corner is the page number... </p>
</p>
<div class="article-index">[ARTICLE INDEX]</div> <h3>Magazine title</h3>
<p>
Any element with the class <i>"magazine-title-text"</i>
will be replaced with the magazine title (example:
<span class="magazine-title-text">[MAGAZINE NAME]</span>)
</p>
<div class="page-number-text">[PAGE NUMBER]</div> <h3>Page Numer</h3>
<p>
Any element with a class <i>"page-number-text"</i> will
get replaced with the page number (example:
<span class="page-number-text">#</span>)
</p>
<p>
NOTE: the selector <i>div.page-number-text</i> will
put the number at the bottom of the page, this page
number is a good example of this.
</p>
<h3>Article Index</h3>
<p>
Any element with the class <i>"article-index"</i> will
be replaced with the links to all the articles in the
current magazine.
</p>
<p>
Example:<br>
<div class="article-index">[ARTICLE INDEX]</div>
</p>
</div>
<div class="footer">
<div class="page-number-text">[PAGE NUMBER]</div>
</div>
</div> </div>
</div> </div>
<div class="page" style="background: black; color: white;"> <div class="page dark">
<div class="content"> <div class="content">
<h1>Two column</h1> <div class="header">
<div style="float:left; width: 45%; height: 100%; margin: 10px;"> <h1>Two column</h1>
Column 1
</div>
<div style="float:left; width: 45%; height: 100%; padding: 10px;">
Column 2
</div> </div>
<div class="body two-column">
<div class="page-number-text">[PAGE NUMBER]</div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>
<div class="footer">
<div class="page-number-text">[PAGE NUMBER]</div>
</div>
</div> </div>
</div> </div>
<div class="page light">
<div class="content">
<div class="header">
<h1>Three column</h1>
</div>
<div class="body three-column">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</p>
<p>
NOTE: at this point, even and odd pages are aligned slightly to the right or left respectively, book-style.
</p>
</div>
<div class="footer">
<div class="page-number-text">[PAGE NUMBER]</div>
</div>
</div>
</div>
<div class="page no-resize page-align-left"> <div class="page no-resize page-align-left">
<div class="content" style="background:gold"> <div class="content" style="background:gold">
Left-aligned page... Left-aligned page...

13
layout.js
View File

@ -44,16 +44,7 @@ var togglePageView = createCSSClassToggler(
var w = page.width() var w = page.width()
var h = page.height() var h = page.height()
// XXX this is not correct... var scale = getPageTargetScale(1)
// ...need to fit one rectangel (page) into another (viewer)
// ...use the implementation in magazine.js
if(W >= H){
// fit to width...
var scale = W/w
} else {
// fit to height...
var scale = H/h
}
setMagazineScale(scale) setMagazineScale(scale)
unanimated($('.magazine, .viewer'), togglePageFitMode)('on') unanimated($('.magazine, .viewer'), togglePageFitMode)('on')
} else { } else {
@ -64,7 +55,7 @@ var togglePageView = createCSSClassToggler(
var w = page.width() var w = page.width()
var h = page.height() var h = page.height()
scale = W/(w*PAGES_IN_RIBBON) var scale = W/(w*PAGES_IN_RIBBON)
setMagazineScale(scale) setMagazineScale(scale)
} }
// NOTE: can't disable transitions on this one because ScrollTo // NOTE: can't disable transitions on this one because ScrollTo

5
lib/jli.js
View File

@ -834,21 +834,22 @@ function makeScrollHandler(root, config){
return scroller return scroller
} }
// default callback... // default callback...
// This will provide support for the folowing events on the scroll root // This will provide support for the folowing events on the scroll root
// element: // element:
// - scrollCancelled // - scrollCancelled
//
// - shortClick // - shortClick
// - doubleClick // - doubleClick
// - multiClick // - multiClick
// this will store the number of clicks in data.clicks // this will store the number of clicks in data.clicks
// - longClick // - longClick
//
// - swipeLeft // - swipeLeft
// - swipeRight // - swipeRight
// - swipeUp // - swipeUp
// - swipeDown // - swipeDown
//
// - screenReleased // - screenReleased
// //
// NOTE: data.touches passed to the event is the number of touches // NOTE: data.touches passed to the event is the number of touches

10
magazine-themes.css
View File

@ -185,6 +185,12 @@
background: red; background: red;
} }
.light.page {
background: white;
color: black;
}
/**************************************************** dark theme ****/ /**************************************************** dark theme ****/
@ -259,6 +265,10 @@
background: red; background: red;
} }
.dark.page {
background: black;
color: white;
}

81
magazine.css
View File

@ -502,7 +502,7 @@ body {
/******************************************************* templates ***/ /******************************************************* templates ***/
.page-number-text { div.page-number-text {
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
right: 10px; right: 10px;
@ -541,6 +541,85 @@ body {
/************************************************** page templates ***/
.page .content .header,
.page .content .body,
.page .content .footer {
position: relative;
width: 80%;
left: 13%
}
.page:nth-child(even) .content .header,
.page:nth-child(even) .content .body,
.page:nth-child(even) .content .footer {
left: 7%;
}
.page .content .header {
margin-top: 5%;
min-height: 5%;
max-height: 15%;
top: 0px;
}
.page .content .body {
max-height: 80%;
padding-top: 1%;
padding-bottom: 1%;
}
.page .content .body p:first-child {
margin-top: 0px;
}
.page .content .footer {
position: absolute;
min-height: 5%;
max-height: 15%;
bottom: 0px;
margin-bottom: 5%;
}
.body .no-column-break {
display: inline-block;
width: 100%;
}
.page .content .footer .page-number-text {
position: absolute;
bottom: auto;
right: 0px;
text-align: right;
}
.page:nth-child(even) .content .footer .page-number-text {
left: 0px;
text-align: left;
}
/* column layouts */
.page .content .two-column {
column-count: 2;
-webkit-column-count: 2;
-moz-column-count: 2;
text-align: justify;
}
.page .content .three-column {
column-count: 3;
-webkit-column-count: 3;
-moz-column-count: 3;
text-align: justify;
}
.page .content .four-column {
column-count: 4;
-webkit-column-count: 4;
-moz-column-count: 4;
text-align: justify;
}
/*********************************************************************/ /*********************************************************************/
body { body {

116
magazine.js
View File

@ -52,6 +52,7 @@ var UPDATE_HASH_URL_POSITION = false
// NOTE: partial history navigation over links will still work. // NOTE: partial history navigation over links will still work.
var FULL_HISTORY_ENABLED = false var FULL_HISTORY_ENABLED = false
// if true, use CSS3 transforms to scroll, of false, use left.
var USE_TRANSFORM = true var USE_TRANSFORM = true
@ -225,6 +226,69 @@ function getMagazineShift(){
return getElementShift($('.magazine')).left return getElementShift($('.magazine')).left
} }
function getPageTargetScale(n, fit_to_content){
var view = $('.viewer')
var content = $('.content')
var page = $('.page')
var W = view.width()
var H = view.height()
var cW = content.width()
var cH = content.height()
var scale = {
value: getPageScale(),
width: null,
height: null,
result_width: cW,
valueOf: function(){return this.value},
}
if(fit_to_content){
if(USE_REAL_PAGE_SIZES){
scale.width = 'auto'
scale.height = 'auto'
} else {
scale.width = cW
scale.height = cH
}
if(W/H > (cW*n)/cH){
scale.value = H/cH
} else {
scale.value = W/(cW*n)
}
// resulting page width...
scale.result_width = cW
} else {
// need to calc width only...
if(W/H > (cW*n)/cH){
scale.value = H/cH
scale.width = W/scale
scale.height = cH
// need to calc height only...
} else if(W/H > (cW*n)/cH){
scale.value = W/(cW*n)
scale.height = H/scale
scale.width = cW
// set both width and height to defaults (content and page ratios match)...
} else {
scale.value = W/(cW*n)
scale.height = cH
scale.width = cW
}
// resulting page width...
scale.result_width = W/scale
}
return scale
}
/************************************************** event handlers ***/ /************************************************** event handlers ***/
@ -399,54 +463,14 @@ function fitNPages(n, fit_to_content){
var cW = content.width() var cW = content.width()
var cH = content.height() var cH = content.height()
var rW = cW
var scale = getPageScale()
var target_width
var target_height
// to compensate for transitions, no data sampling should be beyound // to compensate for transitions, no data sampling should be beyound
// this point, as we will start changing things next... // this point, as we will start changing things next...
if(fit_to_content){ var scale = getPageTargetScale(n, fit_to_content)
if(USE_REAL_PAGE_SIZES){ // cache some data...
target_width = 'auto' var target_width = scale.width
target_height = 'auto' var target_height = scale.height
} else { var rW = scale.result_width
target_width = cW
target_height = cH
}
if(W/H > (cW*n)/cH){
scale = H/cH
} else {
scale = W/(cW*n)
}
// resulting page width...
var rW = cW
} else {
// need to calc width only...
if(W/H > (cW*n)/cH){
scale = H/cH
target_width = W/scale
target_height = cH
// need to calc height only...
} else if(W/H > (cW*n)/cH){
scale = W/(cW*n)
target_height = H/scale
target_width = cW
// set both width and height to defaults (content and page ratios match)...
} else {
scale = W/(cW*n)
target_height = cH
target_width = cW
}
// resulting page width...
var rW = W/scale
}
// NOTE: we need to calculate the offset as the actual widths during // NOTE: we need to calculate the offset as the actual widths during
// the animation are not correct... so just looking at .position() // the animation are not correct... so just looking at .position()