2013-01-31 04:13:25 +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 = "magazine.css" >
< link rel = "stylesheet" href = "magazine-custom.css" >
< script src = "jquery.js" > < / script >
< script src = "jquery.touchSwipe.js" > < / script >
< script src = "jstorage.js" > < / script >
<!-- XXX make this optional... -->
< script src = "ckeditor/ckeditor.js" > < / script >
< script src = "jli.js" > < / script >
< script src = "magazine.js" > < / script >
<!-- configuration, keep this last... -->
< script src = "keybindings.js" > < / script >
< script src = "config.js" > < / script >
< script >
var DEBUG = true
$(document).ready(function(){
if(DEBUG){
$('.splash').click(function(){
$('.splash').fadeOut()
})
}
$(window)
.resize(viewResizeHandler)
.bind('hashchange', hashChangeHandler)
$(document)
.keydown(makeKeyboardHandler(keybindings))
$('.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)})
2013-01-31 05:38:38 +04:00
// editor specific events...
.on('pageCreated articleCreated magazineCreated', resetNavigator)
.on('pageMoved articleMoved', resetNavigator)
2013-01-31 06:35:23 +04:00
.on('pageRemoved articleRemoved', resetNavigator)
2013-01-31 05:38:38 +04:00
2013-01-31 04:13:25 +04:00
// user interactions...
.swipe({
swipeStatus: swipeHandler,
// XXX these get called instead of pinches...
swipeUp: function(event, direction, distance, duration, fingerCount){
if(fingerCount == 2){
toggleBookmark()
} else {
togglePageView()
}
},
// XXX these get called instead of pinches...
swipeDown: function(event, direction, distance, duration, fingerCount){
if(fingerCount == 2){
toggleBookmark()
} else {
togglePageView()
}
},
// XXX for some reasons these lose the competition with swipes...
pinchIn: function(event, direction, distance, duration, fingerCount, pinchZoom) {
if(pinchZoom < distance ) {
return
}
if(fingerCount == 2){
togglePageView('on')
}
},
// XXX for some reasons these lose the competition with swipes...
pinchOut: function(event, direction, distance, duration, fingerCount, pinchZoom) {
if(pinchZoom < distance ) {
return
}
if(fingerCount == 2){
togglePageView('off')
}
},
// XXX for some reason this deos not bubble up the nested elements...
click: function(evt, elem){
if($(elem).hasClass('page')){
setCurrentPage(elem)
2013-01-31 19:13:06 +04:00
} else if($(elem).parents('.page').length != 0){
2013-01-31 04:13:25 +04:00
setCurrentPage($(elem).parents('.page').first())
}
return true
},
excludedElements: '.noSwipe, a, [contenteditable=true]',
fingers: $.fn.swipe.fingers.ALL
//fingers: $.fn.swipe.fingers.THREE
})
2013-01-31 14:02:43 +04:00
// 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 04:13:25 +04:00
// load state and setup everything that depends on it...
loadState()
setupNavigator()
setupBookmarkTouchZones()
// set default view...
togglePageView('on')
// hide the splash screen...
$(window).one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend',
function(){
// 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...
setTimeout(function(){
//updateView()
setCurrentPage()
}, 300)
// hide the splash...
setTimeout(function(){
$('.splash').fadeOut()
}, 350)
})
})
< / script >
< / head >
< body >
< div class = "viewer" >
<!-- 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" >
< h2 > < i > loading...< / i > < / h2 >
< / td > < / tr > < / table >
< / div >
<!-- XXX Magazine title... -->
< div class = "top-toolbar" >
< div class = "left-set" >
2013-01-31 05:38:38 +04:00
< div class = "button cover title" > < a href = "#home" > PortableMag Editor< / a > < / div >
2013-01-31 04:13:25 +04:00
< / div >
< div class = "right-set" >
< div class = "button prev-bookmark" >
< a href = "#prevBookmark" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Previous bookmark (S-Left)< / title >
< 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 >
< / div >
< div class = "button toggle-bookmark" >
< a href = "#bookmark" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Toggle bookmark (B)< / title >
< 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 >
< / div >
< div class = "button next-bookmark" >
< a href = "#nextBookmark" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Next bookmark (S-Right)< / title >
< 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 >
< / div >
< div class = "button info" style = "opacity: 0.3" >
< a href = "javascript:alert('not implemented yet...')" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Info< / title >
< g id = "svg_3" >
< circle fill = "#000000" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" cx = "20.341617" 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 = "19.914334" y = "23.397665" id = "svg_5" font-size = "24" font-family = "Sans-serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" transform = "matrix(1.02694 0 0 1.02694 -0.348556 4.34707)" stroke = "#000000" > i< / text >
< / g >
< / g >
< / svg >
< / a >
< / div >
< / div >
< / div >
< div class = "bottom-toolbar" >
<!-- this is just an example -->
< div class = "controls" >
< 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 >
< / div >
<!-- position indicator -->
< div class = "navigator" >
< div class = "bar" >
< div class = "indicator" > < / div >
< / div >
< / div >
< div class = "page-number" > 0/0< / div >
< / div >
< div class = "scaler" >
< div class = "aligner" >
< div class = "magazine" title = "PortableMag Templates" >
< 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" >
< h1 name = "basics" style = "color:gray;font-size:100px;" > Templates...< / h1 >
< / div >
< / div >
< div class = "page" >
< div class = "content" >
< h1 contenteditable = "true" > Two column< / h1 >
< div contenteditable = "true" style = "float:left; width: 45%; height: 100%; margin: 10px;" >
Column 1
< / div >
< div contenteditable = "true" style = "float:left; width: 45%; height: 100%; padding: 10px;" >
Column 2
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body >
< / html >
<!-- vim:set ts=4 sw=4 nowrap : -->
