2013-01-29 13:58:27 +04:00
<!-- XXX for some reason a doctype kills the layout, need to investigate -->
<!-- DOCTYPE html -->
2013-01-11 18:48:15 +04:00
< html >
< head >
2013-01-30 01:00:58 +04:00
< title > PortableMag< / title >
2013-02-11 02:22:29 +04:00
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
2013-01-25 17:36:28 +04:00
2013-01-21 05:55:56 +04:00
< link rel = "stylesheet" href = "magazine.css" >
2013-02-08 23:08:44 +04:00
< link rel = "stylesheet" href = "magazine-themes.css" >
2013-02-11 18:22:00 +04:00
< link rel = "stylesheet" href = "magazine-custom.css" >
2013-01-25 17:36:28 +04:00
2013-02-05 17:56:34 +04:00
< script src = "ext-lib/jquery.js" > < / script >
< script src = "ext-lib/jquery.touchSwipe.js" > < / script >
< script src = "ext-lib/jstorage.js" > < / script >
2013-02-10 05:09:30 +04:00
< script src = "ext-lib/spin.js" > < / script >
2013-02-10 05:21:25 +04:00
< script src = "ext-lib/jquery.spin.js" > < / script >
2013-02-21 21:30:56 +04:00
<!-- zip functionality -->
< script src = "ext-lib/jszip.js" > < / script >
< script src = "ext-lib/jszip-load.js" > < / script >
< script src = "ext-lib\jszip-inflate.js" > < / script >
<!-- script src="ext - lib\jszip - deflate.js"></script -->
2013-02-05 17:56:34 +04:00
<!-- EXPERIMENTAL -->
<!--
XXX scrollTo is a cool and a powerfull tool but it needs a sustantial code reorganization
this might be a good idea/exersize sometime in the future...
-->
<!-- script src="ext - lib/jquery.scrollto.js"></script -->
< script src = "lib/jli.js" > < / script >
2013-01-22 18:04:33 +04:00
2013-01-23 01:37:39 +04:00
< script src = "magazine.js" > < / script >
2013-02-02 07:05:21 +04:00
< script src = "navigator.js" > < / script >
2013-02-08 21:04:00 +04:00
< script src = "editor.js" > < / script >
2013-01-21 05:55:56 +04:00
2013-01-27 22:41:06 +04:00
<!-- configuration, keep this last... -->
2013-02-05 20:21:06 +04:00
< script src = "platform.js" > < / script >
2013-01-31 03:47:11 +04:00
< script src = "keybindings.js" > < / script >
2013-01-27 22:41:06 +04:00
< script src = "config.js" > < / script >
2013-01-22 18:39:44 +04:00
< script >
2013-01-26 22:48:59 +04:00
var DEBUG = true
2013-01-22 18:39:44 +04:00
$(document).ready(function(){
2013-01-23 00:42:27 +04:00
if(DEBUG){
$('.splash').click(function(){
$('.splash').fadeOut()
})
}
2013-01-22 19:03:26 +04:00
$(window)
2013-01-27 01:25:20 +04:00
.resize(viewResizeHandler)
2013-01-26 23:48:57 +04:00
.bind('hashchange', hashChangeHandler)
2013-01-22 18:39:44 +04:00
2013-01-27 22:41:06 +04:00
$(document)
.keydown(makeKeyboardHandler(keybindings))
2013-01-22 18:39:44 +04:00
$('.viewer')
2013-01-29 21:30:53 +04:00
// setup internal events...
.on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState)
2013-01-30 01:00:58 +04:00
.on('pageChanged', updatePageNumberIndicator)
2013-02-02 08:36:54 +04:00
.on('magazineDataLoaded', loadMagazineChrome)
2013-01-29 21:30:53 +04:00
// user interactions...
2013-01-22 18:39:44 +04:00
.swipe({
2013-02-19 00:55:49 +04:00
swipeStatus: makeSwipeHandler(),
2013-01-29 15:44:27 +04:00
// XXX these get called instead of pinches...
2013-01-29 03:05:42 +04:00
swipeUp: function(event, direction, distance, duration, fingerCount){
if(fingerCount == 2){
toggleBookmark()
} else {
togglePageView()
}
2013-01-22 18:39:44 +04:00
},
2013-01-29 15:44:27 +04:00
// XXX these get called instead of pinches...
2013-01-29 03:05:42 +04:00
swipeDown: function(event, direction, distance, duration, fingerCount){
if(fingerCount == 2){
toggleBookmark()
} else {
togglePageView()
}
2013-01-22 18:39:44 +04:00
},
2013-01-23 16:35:30 +04:00
2013-01-29 15:44:27 +04:00
// XXX for some reasons these lose the competition with swipes...
2013-01-23 16:35:30 +04:00
pinchIn: function(event, direction, distance, duration, fingerCount, pinchZoom) {
2013-01-23 17:45:42 +04:00
if(pinchZoom < distance ) {
return
}
2013-01-23 16:40:26 +04:00
if(fingerCount == 2){
togglePageView('on')
}
2013-01-23 16:35:30 +04:00
},
2013-01-29 15:44:27 +04:00
// XXX for some reasons these lose the competition with swipes...
2013-01-23 16:35:30 +04:00
pinchOut: function(event, direction, distance, duration, fingerCount, pinchZoom) {
2013-01-23 17:45:42 +04:00
if(pinchZoom < distance ) {
return
}
2013-01-23 16:40:26 +04:00
if(fingerCount == 2){
togglePageView('off')
}
2013-01-23 16:35:30 +04:00
},
2013-01-22 18:39:44 +04:00
// XXX for some reason this deos not bubble up the nested elements...
2013-01-31 19:13:06 +04:00
// XXX just stopped working....
// ...works if we double click but not on a single click...
2013-01-22 18:39:44 +04:00
click: function(evt, elem){
2013-02-03 02:14:56 +04:00
elem = $(elem)
// bubble up to nearest page...
if(!elem.hasClass('page')
& & elem.parents('.page').length != 0){
elem = elem.parents('.page').first()
}
// click current page to toggle full page view...
if(elem.hasClass('current', 'page')
& & togglePageView('?') == 'off'){
togglePageView('on')
// click any page to set it to current...
} else if(elem.hasClass('page')){
2013-01-22 18:39:44 +04:00
setCurrentPage(elem)
}
return true
2013-01-23 16:40:26 +04:00
},
2013-01-31 19:13:06 +04:00
excludedElements: $.fn.swipe.defaults.excludedElements + ', [contenteditable=true]',
2013-01-29 15:34:26 +04:00
fingers: $.fn.swipe.fingers.ALL
//fingers: $.fn.swipe.fingers.THREE
2013-01-22 18:39:44 +04:00
})
2013-01-23 23:17:29 +04:00
2013-01-29 20:45:16 +04:00
// load state and setup everything that depends on it...
2013-02-02 05:46:31 +04:00
// XXX load the data with loadJSON()
2013-01-22 19:19:43 +04:00
loadState()
2013-02-02 08:36:54 +04:00
// need to call this once per whole page load....
setupNavigator()
// XXX STUB, needed untill we load everything frim JSON...
$('.viewer').trigger('magazineDataLoaded')
2013-01-22 18:39:44 +04:00
2013-01-29 20:45:16 +04:00
// set default view...
2013-01-22 18:39:44 +04:00
togglePageView('on')
// hide the splash screen...
$(window).one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend',
function(){
2013-01-30 03:57:01 +04:00
// NOTE: this will fix a bug on android -- the pages appear
// to rendering quite a bit longer than loading, so on
// loadState() above the current page is set well before
// it is alligned correctly, so this will reset the
// current page after everything is aligned...
2013-01-30 03:46:56 +04:00
setTimeout(function(){
//updateView()
setCurrentPage()
2013-01-30 03:57:01 +04:00
}, 300)
2013-01-30 03:46:56 +04:00
// hide the splash...
setTimeout(function(){
$('.splash').fadeOut()
2013-01-30 03:57:01 +04:00
}, 350)
2013-02-10 05:21:25 +04:00
// remove the spinner...
2013-02-10 05:09:30 +04:00
setTimeout(function(){
2013-02-10 05:21:25 +04:00
$('#spinner').spin(false)
2013-02-10 05:09:30 +04:00
}, 500)
2013-01-22 18:39:44 +04:00
})
2013-02-08 21:04:00 +04:00
2013-01-31 02:46:02 +04:00
})
2013-01-11 18:48:15 +04:00
< / script >
< / head >
< body >
2013-01-21 05:55:56 +04:00
2013-02-09 02:29:53 +04:00
< div class = "viewer dark" >
2013-01-22 00:36:32 +04:00
2013-01-22 18:39:44 +04:00
<!-- 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" >
2013-02-10 05:11:13 +04:00
<!-- 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 >
2013-02-10 05:09:30 +04:00
< script >
// add a spinner to the splash...
var opts = {
lines: 11, // The number of lines to draw
length: 6, // The length of each line
width: 4, // The line thickness
radius: 8, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: $('.splash #spinner').css('color'), // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 64, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: true, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
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
}
2013-02-10 05:21:25 +04:00
$('#spinner').spin(opts)
2013-02-10 05:09:30 +04:00
< / script >
2013-01-22 18:39:44 +04:00
< / td > < / tr > < / table >
< / div >
2013-02-08 21:04:00 +04:00
<!-- Toolbars -->
< div class = "left-toolbar" >
< svg id = "new-magazine" 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 >
< div >
< svg id = "new-article" 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 id = "shift-article-left" 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 id = "shift-article-right" 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 >
< / div >
< hr >
< div >
< svg id = "new-page" 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 id = "shift-page-left" 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 id = "shift-page-right" 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 >
< / div >
< / div >
2013-01-22 18:04:33 +04:00
2013-01-22 01:26:37 +04:00
< div class = "top-toolbar" >
2013-01-29 15:27:07 +04:00
< div class = "left-set" >
2013-02-08 23:08:44 +04:00
< div class = "button title" > < a href = "#home" class = "magazine-title-text" > Magazine Title< / a > < / div >
2013-01-29 15:27:07 +04:00
< / div >
< div class = "right-set" >
< div class = "button prev-bookmark" >
2013-01-29 19:55:26 +04:00
< a href = "#prevBookmark" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
2013-01-29 22:25:51 +04:00
< title > Previous bookmark (S-Left)< / title >
2013-01-29 19:55:26 +04:00
< path transform = "rotate(-180 18.9697 20.1122)" id = "svg_13" stroke = "#ffffff" d = "m20.467497,20.112247l-8.773763,-14.254913l5.778195,0l8.773788,14.254913l-8.773788,14.25491l-5.778195,0l8.773763,-14.25491z" fill-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "#afafaf" / >
< / g >
< / svg >
< / a >
2013-01-29 15:27:07 +04:00
< / div >
< div class = "button toggle-bookmark" >
2013-01-29 19:55:26 +04:00
< a href = "#bookmark" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
2013-01-29 22:25:51 +04:00
< title > Toggle bookmark (B)< / title >
2013-01-29 19:55:26 +04:00
< rect stroke = "#ffffff" id = "svg_1" height = "28.604868" width = "24.052915" y = "5.858955" x = "8.807377" fill-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "#afafaf" / >
< path stroke = "#ffffff" id = "svg_4" d = "m21.762226,3.651895l8.416584,0l0,14.510554l-4.124887,-2.792193l-4.291697,2.792193l0,-14.510554l0,0z" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" stroke-width = "0" fill = "#ff0000" / >
< / g >
< / svg >
< / a >
2013-01-29 15:27:07 +04:00
< / div >
< div class = "button next-bookmark" >
2013-01-29 19:55:26 +04:00
< a href = "#nextBookmark" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
2013-01-29 22:25:51 +04:00
< title > Next bookmark (S-Right)< / title >
2013-01-29 19:55:26 +04:00
< path stroke = "#ffffff" id = "svg_11" d = "m23.175751,20.132858l-8.773797,-14.254913l5.77823,0l8.773788,14.254913l-8.773788,14.254913l-5.77823,0l8.773797,-14.254913z" fill-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "#afafaf" / >
< / g >
< / svg >
< / a >
2013-01-29 15:27:07 +04:00
< / div >
2013-02-08 23:08:44 +04:00
< div class = "button info" >
2013-01-31 03:47:11 +04:00
< a href = "javascript:alert('not implemented yet...')" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Info< / title >
2013-02-01 02:14:40 +04:00
< 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 >
2013-01-31 03:47:11 +04:00
< / g >
< / g >
< / svg >
< / a >
< / div >
2013-01-29 15:27:07 +04:00
< / div >
2013-01-22 01:26:37 +04:00
< / div >
< div class = "bottom-toolbar" >
2013-01-27 18:24:30 +04:00
<!-- this is just an example -->
< div class = "controls" >
2013-01-29 22:25:51 +04:00
< a href = "#home" title = "(Home)" > Cover< / a >
< a href = "#prevBookmark" title = "(S-Left)" > < Bookmark< / a >
< a href = "#prevArticle" title = "(C-Left)" > < Article< / a >
< a href = "#prev" title = "Previous page (Left)" > < Pa< / a > < a href = "#next" title = "Next page (Right)" > ge > < / a >
< a href = "#nextArticle" title = "(C-Right)" > Article > < / a >
< a href = "#nextBookmark" title = "(S-Right)" > Bookmark > < / a >
< a href = "#end" title = "(End)" > End< / a >
2013-01-27 18:24:30 +04:00
< / div >
2013-01-27 17:59:33 +04:00
<!-- position indicator -->
< div class = "navigator" >
< div class = "bar" >
< div class = "indicator" > < / div >
< / div >
< / div >
2013-01-30 01:00:58 +04:00
< div class = "page-number" > 0/0< / div >
2013-01-22 01:26:37 +04:00
< / div >
2013-01-22 00:36:32 +04:00
2013-01-21 05:55:56 +04:00
< div class = "scaler" >
< div class = "aligner" >
2013-02-05 21:14:07 +04:00
< div class = "magazine" name = "PortableMag" >
2013-01-21 05:55:56 +04:00
< div class = "cover page current" >
2013-01-21 20:05:05 +04:00
< div class = "content" >
2013-01-29 14:41:28 +04:00
<!-- 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 >
2013-01-29 15:27:07 +04:00
< title > PortableMag cover< / title >
2013-01-29 14:41:28 +04:00
< 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 >
2013-02-02 05:46:31 +04:00
<!-- if you do not want a page number just do not include it... -->
<!-- div class="page - number - text">[PAGE NUMBER]</div -->
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
<!-- XXX do we need a Magazine Credits page??? -->
< div class = "article" >
< div class = "cover page" >
2013-01-21 18:04:10 +04:00
< div class = "content" >
2013-01-26 15:05:33 +04:00
< h1 name = "basics" style = "color:gray;font-size:100px;" > The Basics...< / h1 >
2013-01-29 23:08:32 +04:00
< big >
< h2 > Main features< / h2 >
< ul >
< li > Magazines, Covers, Articles and Pages, fully navigable
2013-01-29 23:17:52 +04:00
< li > Three main views: < i style = "color:silver" > Magazine (under development)< / i > Page and Ribbon
2013-01-29 23:08:32 +04:00
< li > Fully linkable structure
2013-01-30 16:47:56 +04:00
< li > Full intuitive Gesture, Mouse or Keyboard navigation
< li > Special #URLs enable full link-based navigation and control
2013-01-29 23:08:32 +04:00
< li > Bookmarks and bookmark navigation
< li > Intuitive navigator widget
2013-01-30 16:47:56 +04:00
< 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)
2013-01-29 23:17:52 +04:00
< i style = "color: silver" >
2013-01-29 23:08:32 +04:00
< 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 >
2013-02-02 05:46:31 +04:00
< div style = "position:absolute; bottom:10px; right:30px" >
2013-01-26 15:05:33 +04:00
< a href = "#next" > get started...< / a > < br >
< / div >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-26 15:05:33 +04:00
< / div >
< / div >
< div class = "page" >
< div class = "content" >
< 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 >
2013-01-26 23:45:38 +04:00
< s > < a href = "#page-3-anchor" style = "pointer-events:none" > Anchor on page #3< / a > < / s > < br >
2013-01-26 15:05:33 +04:00
< 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 >
2013-01-28 18:15:14 +04:00
< a href = "#bookmark" > Toggle bookmark< / a > < br >
2013-01-26 15:05:33 +04:00
< 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 >
2013-01-26 23:45:38 +04:00
< 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 >
2013-01-26 15:05:33 +04:00
< / div >
2013-02-02 05:46:31 +04:00
< div style = "position:absolute; right: 30px; bottom:10px;" >
2013-01-26 23:45:38 +04:00
< a href = "#config" > configuration demo< / a > < a href = "#next" > next page...< / a > < br >
2013-01-26 15:05:33 +04:00
< / div >
2013-01-26 23:54:00 +04:00
< 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" >
2013-01-26 15:05:33 +04:00
< h3 > This is an example layer< / h3 >
< i > click or tap to hide< / i >
< / div >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 18:04:10 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
<!-- XXX do we need an Article Credits page??? -->
< div class = "page" >
2013-01-26 15:05:33 +04:00
< div class = "content" >
2013-01-30 22:44:18 +04:00
2013-01-31 02:51:01 +04:00
< svg width = "800" height = "600" xmlns = "http://www.w3.org/2000/svg" >
2013-01-30 22:44:18 +04:00
<!-- Created with SVG - edit - http://svg - edit.googlecode.com/ -->
< defs >
2013-01-31 02:51:01 +04:00
< 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" / >
2013-01-30 22:44:18 +04:00
< / marker >
2013-01-31 02:51:01 +04:00
< 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" / >
2013-01-30 22:44:18 +04:00
< / marker >
< / defs >
< title > PortableMag Anatomy< / title >
< g >
< title > Layer 1< / title >
2013-01-31 02:51:01 +04:00
< 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" / >
2013-01-30 22:44:18 +04:00
< g id = "svg_30" >
< g id = "svg_2" >
2013-01-31 02:51:01 +04:00
< 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 >
2013-01-30 22:44:18 +04:00
< / g >
< g id = "svg_29" >
< g id = "svg_11" >
2013-01-31 02:51:01 +04:00
< 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 >
2013-01-30 22:44:18 +04:00
< g id = "svg_19" >
2013-01-31 02:51:01 +04:00
< 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 >
2013-01-30 22:44:18 +04:00
< / g >
< / g >
< g id = "svg_28" >
2013-01-31 02:51:01 +04:00
< 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" / >
2013-01-30 22:44:18 +04:00
< / g >
< / g >
< / g >
< / g >
< / svg >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-26 15:05:33 +04:00
< / 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 >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
< div class = "page" >
2013-01-21 20:05:05 +04:00
< div class = "content" >
2013-01-23 16:31:30 +04:00
< a name = "page-3-anchor" > < / a >
2013-01-26 15:05:33 +04:00
< 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 >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
< div class = "page" >
2013-01-21 20:05:05 +04:00
< div class = "content" >
2013-01-26 15:05:33 +04:00
< 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 >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
< / div >
< div class = "article" >
< div class = "cover page" >
2013-01-23 04:10:05 +04:00
< div class = "content" name = "ArticleAnchorExample" >
2013-01-26 15:05:33 +04:00
< h1 > Page Templates< / h1 >
2013-02-02 06:25:27 +04:00
< p >
This page contains several examples of template fields,
the first one is the simplest, the magazine name
(< span class = "magazine-title-text" > [MAGAZINE NAME]< / span > ),
then we'll have the index (see next) and in the bottom-right
corner is the page number...
< / p >
< div class = "article-index" > [ARTICLE INDEX]< / div >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-02-07 01:03:36 +04:00
< div class = "page" style = "background: black; color: white;" >
2013-01-21 20:05:05 +04:00
< div class = "content" >
2013-01-31 13:48:45 +04:00
< h1 > Two column< / h1 >
< div style = "float:left; width: 45%; height: 100%; margin: 10px;" >
2013-01-31 02:46:02 +04:00
Column 1
< / div >
2013-01-31 13:48:45 +04:00
< div style = "float:left; width: 45%; height: 100%; padding: 10px;" >
2013-01-31 02:46:02 +04:00
Column 2
< / div >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-02-06 17:27:22 +04:00
< div class = "page no-resize page-align-left" >
2013-01-28 03:01:20 +04:00
< div class = "content" style = "background:gold" >
2013-02-07 01:13:16 +04:00
Left-aligned page...
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-02-06 17:27:22 +04:00
< div class = "page no-resize page-align-center" >
2013-01-28 03:25:04 +04:00
< div class = "content" style = "background:yellow; width: 600px" >
2013-02-07 01:13:16 +04:00
Center-aligned page...
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-02-06 17:27:22 +04:00
< div class = "page no-resize page-align-right" >
2013-01-28 03:25:04 +04:00
< div class = "content" style = "background:gold; width: 400px" >
2013-02-07 01:13:16 +04:00
Right-aligned page...
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-02-06 17:27:22 +04:00
< div class = "page no-resize page-align-right" >
2013-01-28 03:25:04 +04:00
< div class = "content" style = "background:orange; width: 200px" >
2013-02-07 01:13:16 +04:00
Right-aligned page...
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
< / div >
< div class = "article" >
< div class = "cover page" >
2013-01-21 20:05:05 +04:00
< div class = "content" >
2013-01-23 04:10:05 +04:00
< h1 > Article Cover< / h1 >
< a href = "#home" > home< / a > < br >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
< div class = "page" >
2013-01-21 20:05:05 +04:00
< div class = "content" >
Page
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
< div class = "page" >
2013-01-21 20:05:05 +04:00
< div class = "content" >
2013-01-23 04:10:05 +04:00
Page< br >
< a href = "#home" > home< / a > < br >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-11 18:48:15 +04:00
< / div >
< / div >
2013-02-06 23:12:10 +04:00
< div class = "article" >
<!-- page set -->
2013-02-08 21:04:00 +04:00
< div class = "group" style = "background: url(img.jpg) no-repeat right top; background-size: 100% auto; color: white;" >
2013-02-07 01:03:36 +04:00
< div class = "page cover no-resize page-align-left" style = "background:transparent" >
2013-02-06 23:12:10 +04:00
< div class = "content" >
< h1 > Page Set Example< / h1 >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
2013-02-07 01:03:36 +04:00
< div class = "page no-resize" style = "background:transparent" >
2013-02-06 23:12:10 +04:00
< div class = "content" >
Page in set< br >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
2013-02-07 01:03:36 +04:00
< div class = "page no-resize page-align-right" style = "background:transparent" >
2013-02-06 23:12:10 +04:00
< div class = "content" >
Page in set< br >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< / div >
< / div >
2013-01-26 22:48:59 +04:00
< div class = "article" >
< div class = "cover page" >
< div class = "content" >
2013-01-26 23:45:38 +04:00
< h1 name = "config" > Configuration demo< / h1 >
2013-01-26 22:48:59 +04:00
2013-01-27 01:21:45 +04:00
< p >
NOTE: this is not an actual configuration page, just a live demo
of some of the available configuration option effects.
< / p >
2013-02-11 02:22:29 +04:00
< p >
2013-02-21 22:36:16 +04:00
< button onclick = "generateMagazineDownload()" > build the magazine...< / button >
2013-02-21 21:30:56 +04:00
< a id = "data_download" style = "display:none" > download...< / a >
2013-02-21 22:36:16 +04:00
< input type = "file" id = "upload" name = "file" multiple onchange = "handleFileSelect(event)" / >
2013-02-14 19:06:18 +04:00
Alternative layout: < a href = "./layout.html" > native scroll< / a > ,
2013-02-20 23:16:05 +04:00
< a href = "./index2.html" > hand-written drag< / a >
2013-02-11 02:22:29 +04:00
< / p >
2013-01-26 22:48:59 +04:00
2013-01-29 19:37:54 +04:00
< 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;
2013-01-30 03:35:34 +04:00
height: 25px;
2013-01-29 19:37:54 +04:00
}
.settings input {
border: solid silver 1px;
}
.settings button {
border: solid gray 1px;
cursor: hand;
2013-01-29 20:45:16 +04:00
padding-top: 3px;
padding-bottom: 3px;
2013-01-29 19:37:54 +04:00
padding-left: 15px;
padding-right: 15px;
}
2013-01-30 03:35:34 +04:00
#RESET {
background: red;
color: white;
font-weight: bold;
}
2013-01-29 19:37:54 +04:00
< / 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 >
2013-01-29 20:45:16 +04:00
< 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 >
2013-01-29 19:37:54 +04:00
< / td >
< / tr >
2013-02-07 03:24:57 +04:00
< tr >
< td >
Transition duration:
< / td >
< td >
< input id = "transition_duration" type = "text" size = "8" style = "text-align:center" disabled >
< button onclick = "$('#transition_duration').attr('value', parseInt($('#transition_duration').attr('value'))*2); saveSettings()" > +< / button >
< button onclick = "$('#transition_duration').attr('value', parseInt($('#transition_duration').attr('value'))/2); saveSettings()" > -< / button >
< / td >
< / tr >
2013-01-29 19:37:54 +04:00
< tr >
< td >
Fit page to view:
< / td >
< td >
< button id = "FIT_PAGE_TO_VIEW" onclick = "toggleSetting(this)" > < / button >
< / td >
< / tr >
< tr >
< td >
2013-02-06 17:27:22 +04:00
Enable different size pages (still flaky):
2013-01-29 19:37:54 +04:00
< / td >
< td >
2013-02-06 17:27:22 +04:00
< button id = "USE_REAL_PAGE_SIZES" onclick = "toggleSetting(this)" > < / button >
2013-01-29 19:37:54 +04:00
< / td >
< / tr >
2013-02-09 02:10:35 +04:00
<!-- tr>
2013-01-29 19:37:54 +04:00
< td >
2013-02-06 17:27:22 +04:00
Animate window resize:
2013-01-29 19:37:54 +04:00
< / td >
< td >
2013-02-06 17:27:22 +04:00
< button id = "ANIMATE_WINDOW_RESIZE" onclick = "toggleSetting(this)" > < / button >
2013-01-29 19:37:54 +04:00
< / td >
2013-02-09 02:10:35 +04:00
< / tr-- >
2013-01-29 19:37:54 +04:00
< tr >
< td >
2013-02-06 17:27:22 +04:00
Drag in full page view:
2013-01-29 19:37:54 +04:00
< / td >
< td >
2013-02-06 17:27:22 +04:00
< button id = "DRAG_FULL_PAGE" onclick = "toggleSetting(this)" > < / button >
2013-01-29 19:37:54 +04:00
< / td >
< / tr >
2013-02-14 08:02:07 +04:00
<!-- tr>
2013-01-29 19:37:54 +04:00
< td >
2013-02-06 17:27:22 +04:00
Toggle viewer animation (affects transition to and from full page view):
2013-01-29 19:37:54 +04:00
< / td >
< td >
2013-02-06 17:27:22 +04:00
< button id = "viewer_transition_state" onclick = "toggleViewerAnimation()" > < / button >
2013-01-29 19:37:54 +04:00
< / td >
2013-02-14 08:02:07 +04:00
< / tr-- >
< tr >
< td >
Use transform to drag:
< / td >
< td >
< button id = "USE_TRANSFORM" onclick = "toggleSetting(this); setCurrentPage()" > < / button >
< / td >
2013-01-29 19:37:54 +04:00
< / tr >
2013-02-05 17:56:34 +04:00
< tr >
< td >
Enable #URL updating on page flip:
< / td >
< td >
< button id = "UPDATE_HASH_URL_POSITION" onclick = "toggleSetting(this)" > < / button >
< / td >
< / tr >
2013-02-09 02:01:11 +04:00
< tr >
< td >
Toggele viewer themes:
< / td >
< td >
< button id = "theme_toggler" onclick = "toggleThemes(); $(this).text(toggleThemes('?'))" > < / button >
< / td >
< / tr >
2013-02-09 02:10:35 +04:00
< tr >
< td >
2013-02-09 02:19:08 +04:00
Toggele theme shadowless mode:
2013-02-09 02:10:35 +04:00
< / td >
< td >
< button id = "theme_shadow_toggler" onclick = "toggleShadows(); $(this).text(toggleShadows('?'))" > < / button >
< / td >
< / tr >
2013-02-05 19:06:01 +04:00
< tr >
< td >
Full navigation gistory:
< / td >
< td >
< button id = "FULL_HISTORY_ENABLED" onclick = "toggleSetting(this)" > < / button >
< / td >
< / tr >
2013-01-30 03:35:34 +04:00
< tr >
< td >
Reset stored data:
< / td >
< td >
< button id = "RESET" onclick = "confirm('You really want to reset?')&&resetState()" > Reset< / button >
< / td >
< / tr >
2013-01-29 19:37:54 +04:00
< table / >
< hr noshade color = "silver" >
2013-02-09 02:10:35 +04:00
< table class = "settings" width = "100%" style = "font-size:x-small" >
2013-01-30 02:41:51 +04:00
< tr >
< td width = "50%" >
Fingers supported:
< / td >
< td id = "FingersSupported" >
< / td >
< / tr >
2013-02-05 20:21:06 +04:00
< tr >
< td >
User Agent:
< / td >
< td id = "UserAgent" >
< / td >
< / tr >
2013-01-30 02:41:51 +04:00
< table / >
2013-01-26 22:48:59 +04:00
< div style = "position:absolute; width:100%; bottom:10px; text-align: right;" >
2013-01-26 23:45:38 +04:00
< a href = "#back" > go back< / a > , or return to < a href = "#home" > magazine cover...< / a > < br >
2013-01-26 22:48:59 +04:00
< / div >
< script >
2013-02-07 03:24:57 +04:00
var TRANSITION_DURATION = 100
2013-01-29 17:41:49 +04:00
var toggleViewerAnimation = function(){
var toggler = createCSSClassToggler(
// XXX this will turn off magazine animations...
2013-01-29 18:55:21 +04:00
'.scaler, .page, .magazine',
//'.scaler, .page',
2013-01-29 17:41:49 +04:00
'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')
2013-01-26 22:48:59 +04:00
function saveSettings(){
2013-01-29 20:45:16 +04:00
var v = parseFloat($('#PAGES_IN_RIBBON').attr('value'))
2013-01-29 19:37:54 +04:00
// 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)
2013-02-07 03:24:57 +04:00
// transition duration...
var t = parseInt($('#transition_duration').attr('value'))
t = t == null ? TRANSITION_DURATION : t
t = t < 25 ? 25 : t
TRANSITION_DURATION = t
setTransitionDuration($('.scaler'), t)
setTransitionDuration($('.magazine'), t)
2013-01-26 22:48:59 +04:00
FIT_PAGE_TO_VIEW = $('#FIT_PAGE_TO_VIEW').text() == 'true' ? true : false
2013-02-09 02:10:35 +04:00
//ANIMATE_WINDOW_RESIZE = $('#ANIMATE_WINDOW_RESIZE').text() == 'true' ? true : false
2013-01-26 22:48:59 +04:00
DRAG_FULL_PAGE = $('#DRAG_FULL_PAGE').text() == 'true' ? true : false
2013-01-29 15:50:52 +04:00
USE_REAL_PAGE_SIZES = $('#USE_REAL_PAGE_SIZES').text() == 'true' ? true : false
2013-02-05 17:56:34 +04:00
UPDATE_HASH_URL_POSITION = $('#UPDATE_HASH_URL_POSITION').text() == 'true' ? true : false
2013-02-05 19:06:01 +04:00
FULL_HISTORY_ENABLED = $('#FULL_HISTORY_ENABLED').text() == 'true' ? true : false
2013-02-14 08:02:07 +04:00
USE_TRANSFORM = $('#USE_TRANSFORM').text() == 'true' ? true : false
2013-02-11 02:22:29 +04:00
2013-01-26 22:48:59 +04:00
}
function loadSettings(){
2013-02-07 03:24:57 +04:00
$('#transition_duration').attr('value', TRANSITION_DURATION)
2013-01-26 22:48:59 +04:00
$('#PAGES_IN_RIBBON').attr('value', PAGES_IN_RIBBON)
$('#FIT_PAGE_TO_VIEW').text(FIT_PAGE_TO_VIEW)
2013-02-09 02:10:35 +04:00
//$('#ANIMATE_WINDOW_RESIZE').text(ANIMATE_WINDOW_RESIZE)
2013-01-26 22:48:59 +04:00
$('#DRAG_FULL_PAGE').text(DRAG_FULL_PAGE)
2013-01-29 15:50:52 +04:00
$('#USE_REAL_PAGE_SIZES').text(USE_REAL_PAGE_SIZES)
2013-02-05 17:56:34 +04:00
$('#UPDATE_HASH_URL_POSITION').text(UPDATE_HASH_URL_POSITION)
2013-02-05 19:06:01 +04:00
$('#FULL_HISTORY_ENABLED').text(FULL_HISTORY_ENABLED)
2013-02-14 08:02:07 +04:00
$('#USE_TRANSFORM').text(USE_TRANSFORM)
2013-02-09 02:10:35 +04:00
$('#theme_toggler').text(toggleThemes('?'))
$('#theme_shadow_toggler').text(toggleShadows('?'))
2013-01-30 02:41:51 +04:00
$('#FingersSupported').text($.fn.swipe.fingers.ALL)
var b = $('#BrowserInfo')
$.each($.browser, function(i, e){$('< div > '+i+': '+e+'< / div > ').appendTo(b)})
2013-02-05 20:21:06 +04:00
$('#UserAgent').text(navigator.userAgent)
2013-02-11 02:22:29 +04:00
2013-01-26 22:48:59 +04:00
}
function toggleSetting(obj){
obj = $(obj)
obj.text() == 'true' ? obj.text('false') : obj.text('true')
saveSettings()
updateView()
}
loadSettings()
2013-02-11 02:46:14 +04:00
// setup download link...
2013-02-21 21:30:56 +04:00
var USE_ZIP = true
var USE_DATA_URL = true
2013-02-21 22:36:16 +04:00
function generateMagazineDownload(){
2013-02-21 21:30:56 +04:00
var zip = new JSZip()
var json = JSON.stringify(buildJSON(true, true))
// this is a really odd one, Chrome seems to replace some
// entities with actual chars...
// what is even more odd, this then confuses some unicode
// readers/wwriters...
.replace(/– – ')
if(USE_ZIP){
zip.file('magazine.json', json)
var content = zip.generate()
} else {
var content = btoa(json)
}
if(USE_DATA_URL){
$('#data_download')
.attr('href','data:text/octet-stream;base64,'+content)
.css('display', 'inline')
if(USE_ZIP){
$('#data_download')
.attr('download','magazine.zip')
} else {
$('#data_download')
.attr('download','magazine.json')
}
} else {
location.href="data:application/zip;base64,"+content
}
}
2013-02-21 22:36:16 +04:00
/*
2013-02-21 21:30:56 +04:00
// util...
// from: http://stackoverflow.com/a/11058858
function ab2str(buf) {
return String.fromCharCode.apply(null, new Uint16Array(buf));
}
function str2ab(str) {
var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
var bufView = new Uint16Array(buf);
for (var i=0, strLen=str.length; i< strLen ; i + + ) {
bufView[i] = str.charCodeAt(i);
}
return buf;
}
2013-02-21 22:36:16 +04:00
*/
2013-02-21 21:30:56 +04:00
2013-02-11 02:22:29 +04:00
2013-02-11 02:46:14 +04:00
// upload...
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
console.log('loading...')
2013-02-21 21:30:56 +04:00
var raw_data = e.target.result
window.JSON_DATA = raw_data
if(USE_ZIP){
var zip = new JSZip(raw_data)
console.log('zip loaded...')
var json = zip.file('magazine.json').data
} else {
var json = raw_data
}
loadJSON($.parseJSON(json), true)
2013-02-11 02:46:14 +04:00
console.log('done.')
};
})(f);
// Read in the image file as a data URL.
2013-02-21 21:30:56 +04:00
if(USE_ZIP){
reader.readAsArrayBuffer(f)
} else {
reader.readAsBinaryString(f)
}
//reader.readAsText(f)
2013-02-11 02:46:14 +04:00
}
}
2013-01-26 22:48:59 +04:00
< / script >
< / div >
< / div >
< / div >
2013-01-11 18:48:15 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
< / div >
< / div >
2013-01-11 18:48:15 +04:00
< / body >
< / html >
2013-01-26 22:48:59 +04:00
<!-- vim:set ts=4 sw=4 nowrap : -->
