diff --git a/index2.html b/index2.html index 8b7e5fb..8aac6c0 100755 --- a/index2.html +++ b/index2.html @@ -209,62 +209,67 @@ $(document).ready(function(){
-

PortableMag Navigation and Linking

-
-

Finger controls

-
    -
  • Single finger swipe left/right – prev/next page. -
  • Two finger swipe left/right – prev/next article. -
  • Single finger swipe up/down – toggle thumbnail view. -
  • Pinch in/out – go in/out of thumbnail view. -
-

Navigation via #URLs

-

The basics

- Page #1
- Named page
-

- Anchor on page #3
- currently navigation via existing anchors - will break the layout, so use the name attribute - on any other tags (see example). - -

+
+

PortableMag Navigation and Linking

+
+
+

Finger controls

+
    +
  • Single finger swipe left/right – prev/next page. +
  • Two finger swipe left/right – prev/next article. +
  • Single finger swipe up/down – toggle thumbnail view. +
  • Pinch in/out – go in/out of thumbnail view. +
+

Navigation via #URLs

+

The basics

+ Page #1
+ Named page
+

+ Anchor on page #3
+ currently navigation via existing anchors + will break the layout, so use the name attribute + on any other tags (see example). + +

+
-
-

Special anchors

-

These show up in the page URL

- Magazine cover
- Last page
- Thumbnail view
- Toggle a hidden layer
- - Toggle bookmark
+
+

Special anchors

+

These show up in the page URL

+ Magazine cover
+ Last page
+ Thumbnail view
+ Toggle a hidden layer
+ + Toggle bookmark
+

Relative special anchors

+

These will get replaced by corresponding page numbers in the URL

+ Next page
+ Previous page
+ Next article
+ Previous article
+

History support

+ NOTE: this is still a bit flaky...
+ Go back
+ Go forward
+ + + +

+ configuration demo +

+
-

Relative special anchors

-

These will get replaced by corresponding page numbers in the URL

- Next page
- Previous page
- Next article
- Previous article
-

History support

- NOTE: this is still a bit flaky...
- Go back
- Go forward
-
- configuration demo next page...
+
+
[PAGE NUMBER]
- - - - -
[PAGE NUMBER]
@@ -383,35 +388,92 @@ $(document).ready(function(){
-

Page Templates

+
+

Page Templates

+
+
-

- This page contains several examples of template fields, - the first one is the simplest, the magazine name - ([MAGAZINE NAME]), - then we'll have the index (see next) and in the bottom-right - corner is the page number... -

+

Inline basic macros

+

+ This page contains several examples of inline template/macro fields, + these are HTML elements whos content will get replaced depending on + their class. +

-
[ARTICLE INDEX]
+

Magazine title

+

+ Any element with the class "magazine-title-text" + will be replaced with the magazine title (example: + [MAGAZINE NAME]) +

-
[PAGE NUMBER]
+

Page Numer

+

+ Any element with a class "page-number-text" will + get replaced with the page number (example: + #) +

+

+ NOTE: the selector div.page-number-text will + put the number at the bottom of the page, this page + number is a good example of this. +

+ +

Article Index

+

+ Any element with the class "article-index" will + be replaced with the links to all the articles in the + current magazine. +

+

+ Example:
+

[ARTICLE INDEX]
+

+ +
+
+
[PAGE NUMBER]
+
-
+
-

Two column

-
- Column 1 -
-
- Column 2 +
+

Two column

+
-
[PAGE NUMBER]
+ 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. + +
+
+
[PAGE NUMBER]
+
+ +
+
+
+

Three column

+
+
+ +

+ 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. +

+

+ NOTE: at this point, even and odd pages are aligned slightly to the right or left respectively, book-style. +

+ +
+
+
[PAGE NUMBER]
+
+
+
+
Left-aligned page... diff --git a/layout.js b/layout.js index b04a75a..55fe141 100755 --- a/layout.js +++ b/layout.js @@ -44,16 +44,7 @@ var togglePageView = createCSSClassToggler( var w = page.width() var h = page.height() - // XXX this is not correct... - // ...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 - } + var scale = getPageTargetScale(1) setMagazineScale(scale) unanimated($('.magazine, .viewer'), togglePageFitMode)('on') } else { @@ -64,7 +55,7 @@ var togglePageView = createCSSClassToggler( var w = page.width() var h = page.height() - scale = W/(w*PAGES_IN_RIBBON) + var scale = W/(w*PAGES_IN_RIBBON) setMagazineScale(scale) } // NOTE: can't disable transitions on this one because ScrollTo diff --git a/lib/jli.js b/lib/jli.js index 600de2f..3b88e7d 100755 --- a/lib/jli.js +++ b/lib/jli.js @@ -834,21 +834,22 @@ function makeScrollHandler(root, config){ return scroller } - - // default callback... // This will provide support for the folowing events on the scroll root // element: // - scrollCancelled +// // - shortClick // - doubleClick // - multiClick // this will store the number of clicks in data.clicks // - longClick +// // - swipeLeft // - swipeRight // - swipeUp // - swipeDown +// // - screenReleased // // NOTE: data.touches passed to the event is the number of touches diff --git a/magazine-themes.css b/magazine-themes.css index 1bae992..9044e5d 100755 --- a/magazine-themes.css +++ b/magazine-themes.css @@ -185,6 +185,12 @@ background: red; } +.light.page { + background: white; + color: black; +} + + /**************************************************** dark theme ****/ @@ -259,6 +265,10 @@ background: red; } +.dark.page { + background: black; + color: white; +} diff --git a/magazine.css b/magazine.css index f36da44..f7fb04e 100755 --- a/magazine.css +++ b/magazine.css @@ -502,7 +502,7 @@ body { /******************************************************* templates ***/ -.page-number-text { +div.page-number-text { position: absolute; bottom: 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 { diff --git a/magazine.js b/magazine.js index 707d001..e217113 100755 --- a/magazine.js +++ b/magazine.js @@ -52,6 +52,7 @@ var UPDATE_HASH_URL_POSITION = false // NOTE: partial history navigation over links will still work. var FULL_HISTORY_ENABLED = false +// if true, use CSS3 transforms to scroll, of false, use left. var USE_TRANSFORM = true @@ -225,6 +226,69 @@ function getMagazineShift(){ 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 ***/ @@ -399,54 +463,14 @@ function fitNPages(n, fit_to_content){ var cW = content.width() 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 // this point, as we will start changing things next... - - if(fit_to_content){ - if(USE_REAL_PAGE_SIZES){ - target_width = 'auto' - target_height = 'auto' - } else { - 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 - } + + var scale = getPageTargetScale(n, fit_to_content) + // cache some data... + var target_width = scale.width + var target_height = scale.height + var rW = scale.result_width // NOTE: we need to calculate the offset as the actual widths during // the animation are not correct... so just looking at .position()