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-21 05:55:56 +04:00
< title > Magazine< / title >
2013-01-25 17:36:28 +04:00
2013-01-21 05:55:56 +04:00
< link rel = "stylesheet" href = "magazine.css" >
2013-01-25 17:36:28 +04:00
< link rel = "stylesheet" href = "magazine-custom.css" >
2013-01-11 18:48:15 +04:00
< script src = "jquery.js" > < / script >
< script src = "jquery.touchSwipe.js" > < / script >
2013-01-22 18:04:33 +04:00
< script src = "jstorage.js" > < / script >
2013-01-24 02:58:13 +04:00
< script src = "jli.js" > < / script >
2013-01-23 01:37:39 +04:00
< script src = "magazine.js" > < / script >
2013-01-21 05:55:56 +04:00
2013-01-27 22:41:06 +04:00
< script src = "keybindings.js" > < / script >
<!-- configuration, keep this last... -->
< 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')
.swipe({
2013-01-23 23:17:29 +04:00
swipeStatus: swipeHandler,
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...
click: function(evt, elem){
if($(elem).hasClass('page')){
setCurrentPage(elem)
2013-01-23 04:10:05 +04:00
//togglePageView('on')
2013-01-22 18:39:44 +04:00
} else if($(elem).hasClass('content')){
setCurrentPage($(elem).parents('.page').first())
2013-01-23 04:10:05 +04:00
//togglePageView('on')
2013-01-22 18:39:44 +04:00
}
return true
2013-01-23 16:40:26 +04:00
},
2013-01-25 10:09:58 +04:00
//excludedElements: '.noSwipe',
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
// XXX do we need these here??
2013-01-22 18:39:44 +04:00
$('.button.cover').swipe({click: goToMagazineCover})
2013-01-29 15:27:07 +04:00
$('.button.toggle-bookmark').swipe({click: function(){toggleBookmark()}})
2013-01-29 18:55:21 +04:00
// XXX for some reason these are not animated...
$('.button.prev-bookmark').swipe({click: prevBookmark})
2013-01-29 15:27:07 +04:00
$('.button.next-bookmark').swipe({click: nextBookmark})
2013-01-22 18:39:44 +04:00
2013-01-22 19:19:43 +04:00
loadState()
2013-01-27 17:59:33 +04:00
setupNavigator()
2013-01-22 18:39:44 +04:00
togglePageView('on')
// hide the splash screen...
$(window).one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend',
function(){
$('.splash').fadeOut()
})
})
2013-01-11 18:48:15 +04:00
< / script >
< / head >
< body >
2013-01-21 05:55:56 +04:00
< div class = "viewer" >
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" >
< h2 > < i > loading...< / i > < / h2 >
< / td > < / tr > < / table >
< / div >
2013-01-22 18:04:33 +04:00
<!-- XXX Magazine title... -->
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-01-29 18:55:21 +04:00
< div class = "button cover title" > PortableMag< / div >
2013-01-29 15:27:07 +04:00
< / div >
< div class = "right-set" >
< div class = "button prev-bookmark" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
<!-- Created with SVG - edit - http://svg - edit.googlecode.com/ -->
< g >
2013-01-29 18:55:21 +04:00
< title > Previous page (S-Left)< / title >
2013-01-29 15:27:07 +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 >
< / div >
< div class = "button toggle-bookmark" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
<!-- Created with SVG - edit - http://svg - edit.googlecode.com/ -->
< g >
2013-01-29 18:55:21 +04:00
< title > Bookmark this page (B)< / title >
2013-01-29 15:27:07 +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 >
< / div >
< div class = "button next-bookmark" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
<!-- Created with SVG - edit - http://svg - edit.googlecode.com/ -->
< g >
2013-01-29 18:55:21 +04:00
< title > Next page (S-Right)< / title >
2013-01-29 15:27:07 +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 >
< / div >
< / 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" >
< a href = "#home" > Cover< / a > |
< a href = "#prevArticle" > Previous article< / a > |
< a href = "#prev" > Previous page< / a > |
< a href = "#next" > Next page< / a > |
< a href = "#nextArticle" > Next article< / a > |
< a href = "#end" > End< / a >
< / 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-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" >
< div class = "magazine" >
< 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-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 >
< div style = "position:absolute; width:100%; bottom:10px; text-align: right;" >
< a href = "#next" > get started...< / a > < br >
< / div >
< / 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 >
< div style = "position:absolute; width:100%; bottom:10px; text-align: right;" >
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-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" >
< h1 name = "anatomy" > PortableMag Anatomy< / h1 >
< p >
The magazine consists of:
< ul >
< li > Magazine cover
< li > Articles:
< ul >
< li > Article cover
< li > Pages
< / ul >
< / ul >
Each of these elements can be styled separately...
< / p >
< / 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-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-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-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-01-23 04:10:05 +04:00
< a href = "#home" > home< / a > < br >
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
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-01-28 03:01:20 +04:00
< div class = "page no-resize" >
< div class = "content" style = "background:gold" >
2013-01-21 20:05:05 +04:00
Page
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-01-28 03:25:04 +04:00
< div class = "page no-resize" >
< div class = "content" style = "background:yellow; width: 600px" >
2013-01-21 20:05:05 +04:00
Page
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-01-28 03:25:04 +04:00
< div class = "page no-resize" >
< div class = "content" style = "background:gold; width: 400px" >
2013-01-21 20:05:05 +04:00
Page
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-01-28 03:25:04 +04:00
< div class = "page no-resize" >
< div class = "content" style = "background:orange; width: 200px" >
2013-01-21 20:05:05 +04:00
Page
< / 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-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
< / 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-01-21 20:05:05 +04:00
< / div >
2013-01-11 18:48:15 +04:00
< / 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-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;
height: 20px;
}
.settings input {
border: solid silver 1px;
}
.settings button {
border: solid gray 1px;
cursor: hand;
padding-left: 15px;
padding-right: 15px;
}
< / 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', parseInt($('#PAGES_IN_RIBBON').attr('value'))+1); saveSettings()" > +< / button >
< button onclick = "$('#PAGES_IN_RIBBON').attr('value', parseInt($('#PAGES_IN_RIBBON').attr('value'))-1); 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 >
< table / >
< hr noshade color = "silver" >
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-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(){
var v = parseInt($('#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-01-26 22:48:59 +04:00
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
2013-01-29 15:50:52 +04:00
USE_REAL_PAGE_SIZES = $('#USE_REAL_PAGE_SIZES').text() == 'true' ? true : false
2013-01-26 22:48:59 +04:00
}
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)
2013-01-29 15:50:52 +04:00
$('#USE_REAL_PAGE_SIZES').text(USE_REAL_PAGE_SIZES)
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()
< / 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 : -->
