2013-01-31 22:04:05 +04:00
<!-- XXX for some reason a doctype kills the layout, need to investigate -->
<!-- DOCTYPE html -->
< html >
< head >
< title > PortableMag< / title >
< link rel = "stylesheet" href = "lister.css" >
< link rel = "stylesheet" href = "magazine-custom.css" >
< script src = "jquery.js" > < / script >
<!-- XXX make this optional... -->
< script src = "ckeditor/ckeditor.js" > < / script >
< script src = "jli.js" > < / script >
< script src = "magazine.js" > < / script >
< script >
var DEBUG = true
$(document).ready(function(){
$('.viewer')
// setup internal events...
.on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState)
.on('pageChanged', updatePageNumberIndicator)
.on('bookmarksCleared', clearBookmarkIndicators)
.on('bookmarkAdded', function(_, n){makeBookmarkIndicator(n)})
.on('bookmarkRemoved', function(_, n){removeBookmarkIndicator(n)})
// editor specific events...
.on('pageCreated articleCreated magazineCreated', resetNavigator)
.on('pageMoved articleMoved', resetNavigator)
.on('pageRemoved articleRemoved', resetNavigator)
// XXX this will need to be repeated to newly created elements...
$('[contenteditable=true]')
.on('focus', function(){
toggleEditorMode('on')
})
.on('blur', function(){
toggleEditorMode('off')
})
2013-01-31 22:11:10 +04:00
$('button').attr('disabled', true)
2013-02-01 04:20:53 +04:00
$('#new_mag').click(function(){createBaseMagazine(prompt('Enter a name for the new magazine:'))})
2013-01-31 22:04:05 +04:00
})
< / script >
< / head >
< body >
< div class = "viewer" >
2013-02-01 04:20:53 +04:00
< div class = "left-toolbar" draggable = "true" >
< svg id = "new_mag" width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > New Magazine< / title >
< g id = "svg_47" >
< g id = "svg_33" >
< g id = "svg_34" >
< circle fill = "#000000" stroke = "#ffffff" fill-opacity = "0" cx = "28.671385" cy = "30.356987" r = "7.062921" id = "svg_35" / >
< text fill = "#ffffff" stroke = "#000000" stroke-width = "0" x = "28.820414" y = "36.240832" font-size = "18" font-family = "serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" id = "svg_36" > +< / text >
< / g >
< path fill = "none" stroke = "#ffffff" stroke-width = "null" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" d = "m22.8386,34.497002l-13.95876,0.052097l-0.06013,-28.683099l24.052891,0l-0.060101,18.821401" id = "svg_37" / >
< / g >
< text fill = "#ffffff" stroke = "#000000" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "15.923339" y = "17.539691" font-size = "12" font-family = "Sans-serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" id = "svg_38" > M< / text >
< / g >
< / g >
< / svg >
< hr >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > New Article< / title >
< g id = "svg_48" >
< g id = "svg_26" >
< g id = "svg_27" >
< circle fill = "#000000" stroke = "#ffffff" fill-opacity = "0" cx = "28.671385" cy = "30.356987" r = "7.062921" id = "svg_28" / >
< text fill = "#ffffff" stroke = "#000000" stroke-width = "0" x = "28.820414" y = "36.240832" font-size = "18" font-family = "serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" id = "svg_29" > +< / text >
< / g >
< path fill = "none" stroke = "#ffffff" stroke-width = "null" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" d = "m22.83856,34.49699l-13.95872,0.052139l-0.06013,-28.683129l24.052921,0l-0.06015,18.82142" id = "svg_30" / >
< / g >
< text fill = "#ffffff" stroke = "#000000" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "15.68281" y = "17.539691" font-size = "12" font-family = "Sans-serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" id = "svg_31" > A< / text >
< / g >
< / g >
< / svg >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Shift Article Left< / title >
< g id = "svg_76" >
< g id = "svg_70" >
< g id = "svg_71" >
< path fill = "none" stroke = "#ffffff" stroke-width = "null" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" d = "m28.62114,34.492649l-19.73146,0.052151l-0.06013,-28.68306l24.052919,0l-0.000019,17.438419" id = "svg_72" / >
< path fill = "none" stroke = "#ffffff" stroke-width = "null" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" d = "m32.840248,24.30155l0.05212,10.154291l-1.082369,0.060139" id = "svg_73" / >
< / g >
< path d = "m30.587009,30.33219l-4.3314,-7.037199l2.8526,0l4.331209,7.037199l-4.331209,7.037241l-2.8526,0l4.3314,-7.037241z" fill-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "#000000" stroke = "#ffffff" transform = "rotate(180 29.8475 30.3322)" id = "svg_74" / >
< / g >
< text fill = "#ffffff" stroke = "#000000" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "15.692654" y = "17.535428" font-size = "12" font-family = "Sans-serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" id = "svg_75" > A< / text >
< / g >
< / g >
< / svg >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Shift Article Right< / title >
< g id = "svg_89" >
< g id = "svg_85" >
< path fill = "none" stroke = "#ffffff" stroke-width = "null" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" d = "m29.583229,34.612888l-20.693559,-0.007988l-0.06013,-28.6831l24.052921,0l-0.000023,20.86595" id = "svg_86" / >
< path d = "m32.27066,30.392269l-4.33132,-7.037249l2.852549,0l4.33123,7.037249l-4.33123,7.03727l-2.852549,0l4.33132,-7.03727z" fill-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "#000000" stroke = "#ffffff" id = "svg_87" / >
< / g >
< text fill = "#ffffff" stroke = "#000000" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "15.692638" y = "17.595492" font-size = "12" font-family = "Sans-serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" id = "svg_88" > A< / text >
< / g >
< / g >
< / svg >
< hr >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > New Page< / title >
< g id = "svg_24" >
< g id = "svg_16" >
< g id = "svg_9" >
< circle fill = "#000000" stroke = "#ffffff" fill-opacity = "0" cx = "28.691122" cy = "30.383944" r = "7.062921" id = "svg_7" / >
< text fill = "#ffffff" stroke = "#000000" stroke-width = "0" x = "28.840151" y = "36.267789" id = "svg_8" font-size = "18" font-family = "serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" > +< / text >
< / g >
< path fill = "none" stroke = "#ffffff" stroke-width = "null" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" d = "m22.85829,34.523949l-13.95871,0.052132l-0.06013,-28.68312l24.05293,0l-0.06015,18.82142" id = "svg_15" / >
< / g >
< text fill = "#ffffff" stroke = "#000000" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "15.281621" y = "17.566648" id = "svg_17" font-size = "12" font-family = "Sans-serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" > P< / text >
< / g >
< / g >
< / svg >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Shift Page Left< / title >
< g id = "svg_68" >
< g id = "svg_67" >
< g id = "svg_66" >
< path fill = "none" stroke = "#ffffff" stroke-width = "null" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" d = "m28.621111,34.492619l-19.731441,0.052151l-0.06013,-28.683099l24.052921,0l-0.000011,17.4384" id = "svg_61" / >
< path fill = "none" stroke = "#ffffff" stroke-width = "null" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" d = "m32.840248,24.30146l0.05212,10.15435l-1.082397,0.060131" id = "svg_65" / >
< / g >
< path d = "m30.586981,30.3321l-4.3314,-7.037199l2.852598,0l4.331251,7.037199l-4.331251,7.0373l-2.852598,0l4.3314,-7.0373z" fill-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "#000000" stroke = "#ffffff" id = "svg_62" transform = "rotate(180 29.8475 30.3321)" / >
< / g >
< text fill = "#ffffff" stroke = "#000000" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "15.271712" y = "17.535359" font-size = "12" font-family = "Sans-serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" id = "svg_63" > P< / text >
< / g >
< / g >
< / svg >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Shift Page Right< / title >
< g id = "svg_58" >
< g id = "svg_57" >
< path fill = "none" stroke = "#ffffff" stroke-width = "null" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" d = "m29.57338,34.557121l-20.69354,-0.007992l-0.06013,-28.683129l24.052929,0l-0.000019,20.86593" id = "svg_54" / >
< path d = "m32.260818,30.336451l-4.331329,-7.037251l2.852551,0l4.331299,7.037251l-4.331299,7.037321l-2.852551,0l4.331329,-7.037321z" fill-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "#000000" id = "svg_56" stroke = "#ffffff" / >
< / g >
< text fill = "#ffffff" stroke = "#000000" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "15.261884" y = "17.539691" font-size = "12" font-family = "Sans-serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" id = "svg_55" > P< / text >
< / g >
< / g >
< / svg >
< hr >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Info< / title >
< g id = "svg_6" >
< circle fill = "#000000" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" cx = "20.762543" cy = "20.120354" r = "14.302816" id = "svg_2" stroke = "#ffffff" / >
< text fill = "#ffffff" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "21.029904" y = "21.833322" id = "svg_5" font-size = "24" font-family = "Sans-serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" transform = "matrix(0.894143 0 0 0.894143 1.91526 8.19192)" stroke = "#000000" > i< / text >
< / g >
< / g >
< / svg >
< / div >
2013-01-31 22:04:05 +04:00
< div class = "scaler" >
< div class = "aligner" >
2013-01-31 22:11:10 +04:00
<!-- magazine -->
< div class = "magazine" title = "PortableMag Demo" >
2013-01-31 22:04:05 +04:00
< div class = "cover page current" >
< 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 >
< / div >
< / div >
<!-- XXX do we need a Magazine Credits page??? -->
< div class = "article" >
< div class = "cover page" >
< div class = "content" >
2013-01-31 22:11:10 +04:00
< 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; width:100%; bottom:10px; text-align: right;" >
< a href = "#next" > get started...< / a > < br >
< / div >
2013-01-31 22:04:05 +04:00
< / div >
< / div >
< div class = "page" >
< div class = "content" >
2013-01-31 22:11:10 +04:00
< 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; width:100%; bottom:10px; text-align: right;" >
< 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 >
< / 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 >
< / 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 >
< / 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 >
< / 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 >
< / div >
< / div >
< div class = "article" >
< div class = "cover page" >
< div class = "content" name = "ArticleAnchorExample" >
< h1 > Page Templates< / h1 >
< a href = "#home" > home< / a > < br >
< / div >
< / div >
< div class = "page" >
< div class = "content" >
< h1 > Two column< / h1 >
< div style = "float:left; width: 45%; height: 100%; margin: 10px;" >
2013-01-31 22:04:05 +04:00
Column 1
< / div >
2013-01-31 22:11:10 +04:00
< div style = "float:left; width: 45%; height: 100%; padding: 10px;" >
2013-01-31 22:04:05 +04:00
Column 2
< / div >
< / div >
< / div >
2013-01-31 22:11:10 +04:00
< div class = "page no-resize" >
< div class = "content" style = "background:gold" >
Page
< / div >
< / div >
< div class = "page no-resize" >
< div class = "content" style = "background:yellow; width: 600px" >
Page
< / div >
< / div >
< div class = "page no-resize" >
< div class = "content" style = "background:gold; width: 400px" >
Page
< / div >
< / div >
< div class = "page no-resize" >
< div class = "content" style = "background:orange; width: 200px" >
Page
< / div >
< / div >
< / div >
< div class = "article" >
< div class = "cover page" >
< div class = "content" >
< h1 > Article Cover< / h1 >
< a href = "#home" > home< / a > < br >
< / div >
< / div >
< div class = "page" >
< div class = "content" >
Page
< / div >
< / div >
< div class = "page" >
< div class = "content" >
Page< br >
< a href = "#home" > home< / a > < br >
< / div >
< / div >
< / div >
< div class = "article" >
< div class = "cover page" >
< div class = "content" >
< h1 name = "config" > Configuration demo< / h1 >
< p >
NOTE: this is not an actual configuration page, just a live demo
of some of the available configuration option effects.
< / p >
< hr noshade color = "silver" >
< style >
.settings tr td:first-child {
text-align: right;
vertical-align: middle;
padding-right: 10px;
}
.settings tr {
height: 30px;
}
.settings button, .settings input {
background: white;
height: 25px;
}
.settings input {
border: solid silver 1px;
}
.settings button {
border: solid gray 1px;
cursor: hand;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 15px;
padding-right: 15px;
}
#RESET {
background: red;
color: white;
font-weight: bold;
}
< / style >
< table class = "settings" width = "100%" >
< tr >
< td width = "50%" >
Pages in ribbon:
< / td >
< td >
< input id = "PAGES_IN_RIBBON" type = "text" size = "8" style = "text-align:center" disabled >
< button onclick = "$('#PAGES_IN_RIBBON').attr('value', parseFloat($('#PAGES_IN_RIBBON').attr('value'))+0.5); saveSettings()" > +< / button >
< button onclick = "$('#PAGES_IN_RIBBON').attr('value', parseFloat($('#PAGES_IN_RIBBON').attr('value'))-0.5); saveSettings()" > -< / button >
< / td >
< / tr >
< tr >
< td >
Fit page to view:
< / td >
< td >
< button id = "FIT_PAGE_TO_VIEW" onclick = "toggleSetting(this)" > < / button >
< / td >
< / tr >
< tr >
< td >
Animate window resize:
< / td >
< td >
< button id = "ANIMATE_WINDOW_RESIZE" onclick = "toggleSetting(this)" > < / button >
< / td >
< / tr >
< tr >
< td >
Drag in full page view:
< / td >
< td >
< button id = "DRAG_FULL_PAGE" onclick = "toggleSetting(this)" > < / button >
< / td >
< / tr >
< tr >
< td >
Toggle viewer animation (affects transition to and from full page view):
< / td >
< td >
< button id = "viewer_transition_state" onclick = "toggleViewerAnimation()" > < / button >
< / td >
< / tr >
< tr >
< td >
Enable different size pages (still flaky):
< / td >
< td >
< button id = "USE_REAL_PAGE_SIZES" onclick = "toggleSetting(this)" > < / button >
< / td >
< / tr >
< tr >
< td >
Reset stored data:
< / td >
< td >
< button id = "RESET" onclick = "confirm('You really want to reset?')&&resetState()" > Reset< / button >
< / td >
< / tr >
< table / >
< hr noshade color = "silver" >
< table class = "settings" width = "100%" >
< tr >
< td width = "50%" >
Fingers supported:
< / td >
< td id = "FingersSupported" >
< / td >
< / tr >
< tr >
< td >
Browser info:
< / td >
< td id = "BrowserInfo" >
< / td >
< / tr >
< table / >
< div style = "position:absolute; width:100%; bottom:10px; text-align: right;" >
< a href = "#back" > go back< / a > , or return to < a href = "#home" > magazine cover...< / a > < br >
< / div >
< script >
var toggleViewerAnimation = function(){
var toggler = createCSSClassToggler(
// XXX this will turn off magazine animations...
'.scaler, .page, .magazine',
//'.scaler, .page',
'unanimated',
function(action){
$('#viewer_transition_state').text(action == 'on' ? 'off' : 'on')
})
return function(action){
if(action == null || action == '?'){
var res = toggler(action)
} else {
var res = toggler(action == 'on' ? 'off' : 'on')
}
return res == 'on' ? 'off' : 'on'
}
}()
toggleViewerAnimation('on')
function saveSettings(){
var v = parseFloat($('#PAGES_IN_RIBBON').attr('value'))
// ignore bad values...
v = v == null ? PAGES_IN_RIBBON : v
// can't be less that 1...
v = v < 1 ? 1 : v
PAGES_IN_RIBBON = v
// we need to reset the visible value in case it was wrong...
$('#PAGES_IN_RIBBON').attr('value', PAGES_IN_RIBBON)
FIT_PAGE_TO_VIEW = $('#FIT_PAGE_TO_VIEW').text() == 'true' ? true : false
ANIMATE_WINDOW_RESIZE = $('#ANIMATE_WINDOW_RESIZE').text() == 'true' ? true : false
DRAG_FULL_PAGE = $('#DRAG_FULL_PAGE').text() == 'true' ? true : false
USE_REAL_PAGE_SIZES = $('#USE_REAL_PAGE_SIZES').text() == 'true' ? true : false
}
function loadSettings(){
$('#PAGES_IN_RIBBON').attr('value', PAGES_IN_RIBBON)
$('#FIT_PAGE_TO_VIEW').text(FIT_PAGE_TO_VIEW)
$('#ANIMATE_WINDOW_RESIZE').text(ANIMATE_WINDOW_RESIZE)
$('#DRAG_FULL_PAGE').text(DRAG_FULL_PAGE)
$('#USE_REAL_PAGE_SIZES').text(USE_REAL_PAGE_SIZES)
2013-01-31 22:39:45 +04:00
//$('#FingersSupported').text($.fn.swipe.fingers.ALL)
2013-01-31 22:11:10 +04:00
var b = $('#BrowserInfo')
$.each($.browser, function(i, e){$('< div > '+i+': '+e+'< / div > ').appendTo(b)})
}
function toggleSetting(obj){
obj = $(obj)
obj.text() == 'true' ? obj.text('false') : obj.text('true')
saveSettings()
updateView()
}
loadSettings()
< / script >
< / div >
< / div >
2013-01-31 22:04:05 +04:00
< / div >
< / div >
2013-01-31 22:11:10 +04:00
2013-01-31 22:04:05 +04:00
< / div >
< / div >
< / div >
< / body >
< / html >
<!-- vim:set ts=4 sw=4 nowrap : -->
