flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-10-31 12:00:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

some fixes and added a basic 'online' configuration demo (last article)...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-01-26 22:48:59 +04:00
parent 182f788b33
commit f55de66d9c
3 changed files with 68 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
index.html
View File

@ -14,6 +14,8 @@
<script>
var DEBUG = true
$(document).ready(function(){
if(DEBUG){
@ -344,6 +346,57 @@ $(document).ready(function(){
</div>
</div>
</div>
<div class="article">
<div class="cover page">
<div class="content">
<h1>Configuration demo</h1>
<div>
Pages in ribbon: <input id="PAGES_IN_RIBBON" type="text"><button onclick="saveSettings()">save</button>
</div>
<div>
Fit page to view: <button id="FIT_PAGE_TO_VIEW" onclick="toggleSetting(this)"></button>
</div>
<div>
Animate window resize: <button id="ANIMATE_WINDOW_RESIZE" onclick="toggleSetting(this)"></button>
</div>
<div>
Drag in full page view: <button id="DRAG_FULL_PAGE" onclick="toggleSetting(this)"></button>
</div>
<div style="position:absolute; width:100%; bottom:10px; text-align: right;">
<a href="#home">magazine cover...</a><br>
</div>
<script>
function saveSettings(){
var v = parseInt($('#PAGES_IN_RIBBON').attr('value'))
PAGES_IN_RIBBON = v == null ? PAGES_IN_RIBBON : v
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
}
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)
}
function toggleSetting(obj){
obj = $(obj)
obj.text() == 'true' ? obj.text('false') : obj.text('true')
saveSettings()
updateView()
}
loadSettings()
</script>
</div>
</div>
</div>
</div>
</div>
</div>
@ -352,3 +405,4 @@ $(document).ready(function(){
</body>
</html>
<!-- vim:set ts=4 sw=4 nowrap : -->

2
jli.js
View File

@ -7,7 +7,7 @@
* looks...
**********************************************************************/
var DEBUG = true
//var DEBUG = DEBUG != null ? DEBUG : true
/*********************************************************************/

17
magazine.js
View File

@ -1,17 +1,20 @@
/**********************************************************************
**********************************************************************/
var DEBUG = true
//var DEBUG = DEBUG != null ? DEBUG : true
// number of pages to display in ribbon...
var PAGES_IN_RIBBON = 6
// if true, expand a page to fit the whole view in single page mode...
var FIT_PAGE_TO_VIEW = false
var FIT_PAGE_TO_VIEW = true
// if true will make page resizes after window resize animated...
var ANIMATE_WINDOW_RESIZE = true
// if true will disable page dragging in single page mode...
var DRAG_FULL_PAGE = false
/*********************************************************************/
@ -31,7 +34,7 @@ togglePageView = createCSSClassToggler(
// post-change callback...
function(action){
if(action == 'on'){
fitNPages(1)
fitNPages(1, !FIT_PAGE_TO_VIEW)
} else {
fitNPages(PAGES_IN_RIBBON)
}
@ -63,6 +66,8 @@ function getPageNumber(page){
/************************************************** event handlers ***/
// swipe state handler
// this handles single and double finger swipes and dragging
function swipeHandler(evt, phase, direction, distance, duration, fingers){
var pages = $('.page')
var cur = $('.current.page')
@ -70,7 +75,11 @@ function swipeHandler(evt, phase, direction, distance, duration, fingers){
var scale = getPageScale()
var mag = $('.magazine')
if(phase=='move' && (direction=='left' || direction=='right')){
if(phase=='move'
// see if wee need to drag the page and allways drag the ribbon...
&& (DRAG_FULL_PAGE || togglePageView('?') == 'off')
&& (direction=='left' || direction=='right')){
// using the "unanimated" trick we will make the drag real-time...
mag.addClass('unanimated')
if(direction == 'left'){
$('.magazine').css({left: -n*cur.width()-distance/scale})