mirror of
https://github.com/flynx/PortableMag.git
synced 2025-10-29 03:00:09 +00:00
added multiple click support...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
9c0b3f1367
commit
5d9318388b
21
index.html
21
index.html
@ -759,9 +759,9 @@ $(document).ready(function(){
|
||||
of some of the available configuration option effects.
|
||||
</p>
|
||||
<p>
|
||||
<button id="downloader">build the magazine...</button>
|
||||
<button onclick="generateMagazineDownload()">build the magazine...</button>
|
||||
<a id="data_download" style="display:none">download...</a>
|
||||
<input type="file" id="upload" name="file" multiple/>
|
||||
<input type="file" id="upload" name="file" multiple onchange="handleFileSelect(event)"/>
|
||||
Alternative layout: <a href="./layout.html">native scroll</a>,
|
||||
<a href="./index2.html">hand-written drag</a>
|
||||
</p>
|
||||
@ -1016,17 +1016,9 @@ $(document).ready(function(){
|
||||
loadSettings()
|
||||
|
||||
// setup download link...
|
||||
/*
|
||||
$('#downloader')
|
||||
.attr('href','data:text/octet-stream;base64,'+btoa(
|
||||
JSON.stringify(buildJSON(true, true))
|
||||
// this is a really odd one, Chrome seems to replace some
|
||||
// entities with actual chars...
|
||||
.replace(/–/g, '–')))
|
||||
*/
|
||||
var USE_ZIP = true
|
||||
var USE_DATA_URL = true
|
||||
function generateMagazineZip(){
|
||||
function generateMagazineDownload(){
|
||||
var zip = new JSZip()
|
||||
var json = JSON.stringify(buildJSON(true, true))
|
||||
// this is a really odd one, Chrome seems to replace some
|
||||
@ -1055,9 +1047,8 @@ $(document).ready(function(){
|
||||
location.href="data:application/zip;base64,"+content
|
||||
}
|
||||
}
|
||||
$('#downloader')
|
||||
.click(generateMagazineZip)
|
||||
|
||||
/*
|
||||
// util...
|
||||
// from: http://stackoverflow.com/a/11058858
|
||||
function ab2str(buf) {
|
||||
@ -1072,6 +1063,7 @@ $(document).ready(function(){
|
||||
}
|
||||
return buf;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
// upload...
|
||||
@ -1114,9 +1106,6 @@ $(document).ready(function(){
|
||||
}
|
||||
}
|
||||
|
||||
$('#upload').on('change', handleFileSelect);
|
||||
|
||||
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
16
index2.html
16
index2.html
@ -120,7 +120,9 @@ $(document).ready(function(){
|
||||
// XXX make this a default setup in the lib...
|
||||
window.MagazineScroller = makeScrollHandler($('.viewer'), {
|
||||
hScroll: true,
|
||||
vScroll: false
|
||||
vScroll: false,
|
||||
|
||||
//enableMultiClicks: true,
|
||||
}).start()
|
||||
|
||||
|
||||
@ -135,6 +137,7 @@ $(document).ready(function(){
|
||||
target.hasClass('page') ? target
|
||||
: target.parents('.page'))
|
||||
if(target != -1){
|
||||
var mag = $('.magazine')
|
||||
setTransitionDuration(mag, INITIAL_TIME)
|
||||
setTransitionEasing(mag, 'ease')
|
||||
|
||||
@ -142,8 +145,17 @@ $(document).ready(function(){
|
||||
setCurrentPage(target)
|
||||
}
|
||||
})
|
||||
.on('longClick', function(evt, data){
|
||||
/* XXX to use these set the enableMultiClicks to true in makeScrollHandler
|
||||
.on('multiClick', function(evt, data){
|
||||
alert('multiple clicks... ('+data.clicks+')')
|
||||
})
|
||||
.on('doubleClick', function(evt, data){
|
||||
alert('double click...')
|
||||
})
|
||||
.on('longClick', function(evt, data){
|
||||
alert('long click...')
|
||||
})
|
||||
*/
|
||||
.on('swipeLeft', function(evt, data){
|
||||
// ribbon mode...
|
||||
if(isNavigationViewRelative()){
|
||||
|
||||
72
lib/jli.js
72
lib/jli.js
@ -485,6 +485,7 @@ function makeKeyboardHandler(keybindings, unhandled){
|
||||
|
||||
var CLICK_THRESHOLD = 10
|
||||
var LONG_CLICK_THRESHOLD = 400
|
||||
var MULTI_CLICK_TIMEOUT = 200
|
||||
|
||||
// XXX add a resonable cancel scheme...
|
||||
// ... something similar to touch threshold but bigger...
|
||||
@ -553,13 +554,14 @@ function makeScrollHandler(root, config){
|
||||
bottom: root.height() - scroller.options.eventBounds
|
||||
}
|
||||
}
|
||||
//togglePageDragging('on')
|
||||
scrolled = $(root.children()[0])
|
||||
setTransitionDuration(scrolled, 0)
|
||||
// XXX these two are redundant...
|
||||
scrolling = true
|
||||
scroller.state = 'scrolling'
|
||||
scroller.options.enabelStartEvent && root.trigger('userScrollStart')
|
||||
//togglePageDragging('on')
|
||||
|
||||
shift = getElementShift(scrolled)
|
||||
scale = getElementScale(scrolled)
|
||||
// get the user coords...
|
||||
@ -571,9 +573,11 @@ function makeScrollHandler(root, config){
|
||||
return false
|
||||
}
|
||||
|
||||
// XXX add limits to this...
|
||||
// XXX slow down drag when at limit...
|
||||
// XXX try and make this adaptive to stay ahead of the lags...
|
||||
// NOTE: this does not support limiting the scroll, might be done in
|
||||
// the future though.
|
||||
// The way to go about this is to track scrolled size in the
|
||||
// callback...
|
||||
function moveHandler(evt){
|
||||
if(ignoring){
|
||||
return
|
||||
@ -630,8 +634,10 @@ function makeScrollHandler(root, config){
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// XXX get real transition duration...
|
||||
setTransitionDuration(scrolled, 200)
|
||||
scroller.resetTransitions()
|
||||
//setTransitionDuration(scrolled, scroller.options.transitionDuration)
|
||||
|
||||
x = touch ? event.changedTouches[0].pageX : evt.clientX
|
||||
y = touch ? event.changedTouches[0].pageY : evt.clientY
|
||||
@ -663,6 +669,7 @@ function makeScrollHandler(root, config){
|
||||
touch = false
|
||||
scrolling = false
|
||||
scroller.state = 'waiting'
|
||||
scrolled = null
|
||||
bounds = null
|
||||
max_dx = 0
|
||||
max_dy = 0
|
||||
@ -681,6 +688,10 @@ function makeScrollHandler(root, config){
|
||||
hScroll: true,
|
||||
vScroll: true,
|
||||
|
||||
// sets the default transition settings while not scrolling...
|
||||
transitionDuration: 200,
|
||||
transitionEasing: 'ease',
|
||||
|
||||
// items to be ignored by the scroller...
|
||||
// this is a jQuery compatible selector.
|
||||
ignoreElements: '.noSwipe',
|
||||
@ -699,11 +710,14 @@ function makeScrollHandler(root, config){
|
||||
autoCancelEvents: false,
|
||||
eventBounds: 5,
|
||||
|
||||
|
||||
// NOTE: if this returns false explicitly, this will stop scrolling.
|
||||
callback: postScrollCallback,
|
||||
// These are used by the default callback...
|
||||
enableMultiClicks: false,
|
||||
clickThreshold: null,
|
||||
longClickThreshold: null,
|
||||
multiClickTimeout: null,
|
||||
},
|
||||
// NOTE: this is updated live but not used by the system in any way...
|
||||
state: 'stopped',
|
||||
@ -744,6 +758,11 @@ function makeScrollHandler(root, config){
|
||||
}
|
||||
this.state = 'stopped'
|
||||
return this
|
||||
},
|
||||
resetTransitions: function(){
|
||||
var scrolled = this.root.children().first()
|
||||
setTransitionDuration(scrolled, this.options.transitionDuration)
|
||||
setTransitionEasing(scrolled, this.options.transitionEasing)
|
||||
}
|
||||
}
|
||||
|
||||
@ -770,12 +789,16 @@ function makeScrollHandler(root, config){
|
||||
// XXX add generic snap
|
||||
// XXX add generic innertial scroll
|
||||
function postScrollCallback(data){
|
||||
var root = data.scroller.root
|
||||
var clickThreshold = data.scroller.options.clickThreshold || CLICK_THRESHOLD
|
||||
var longClickThreshold = data.scroller.options.longClickThreshold || LONG_CLICK_THRESHOLD
|
||||
var scroller = data.scroller
|
||||
var root = scroller.root
|
||||
var clickThreshold = scroller.options.clickThreshold || CLICK_THRESHOLD
|
||||
var longClickThreshold = scroller.options.longClickThreshold || LONG_CLICK_THRESHOLD
|
||||
|
||||
var enableMultiClicks = scroller.options.enableMultiClicks
|
||||
var multiClickTimeout = scroller.options.multiClickTimeout || MULTI_CLICK_TIMEOUT
|
||||
|
||||
// cancel event...
|
||||
if(data.scroller.state == 'canceling'){
|
||||
if(scroller.state == 'canceling'){
|
||||
return root.trigger('scrollCancelled', data)
|
||||
}
|
||||
|
||||
@ -785,12 +808,41 @@ function postScrollCallback(data){
|
||||
return
|
||||
}
|
||||
|
||||
// clicks and long clicks...
|
||||
// clicks, double clicks and long clicks...
|
||||
if(Math.abs(data.distance) < clickThreshold){
|
||||
if(data.duration > longClickThreshold){
|
||||
return root.trigger('longClick', data)
|
||||
}
|
||||
return root.trigger('shortClick', data)
|
||||
if(!enableMultiClicks){
|
||||
return root.trigger('shortClick', data)
|
||||
|
||||
} else {
|
||||
if(scroller._clicks == null){
|
||||
scroller._clicks = 1
|
||||
} else {
|
||||
scroller._clicks += 1
|
||||
}
|
||||
|
||||
// kill any previous waits...
|
||||
if(scroller._click_timeout_id != null){
|
||||
clearTimeout(scroller._click_timeout_id)
|
||||
}
|
||||
|
||||
// wait for the next click...
|
||||
scroller._click_timeout_id = setTimeout(function(){
|
||||
var clicks = scroller._clicks
|
||||
data.clicks = clicks
|
||||
if(clicks == 1){
|
||||
root.trigger('shortClick', data)
|
||||
} else if(clicks == 2){
|
||||
root.trigger('doubleClick', data)
|
||||
} else {
|
||||
root.trigger('multiClick', data)
|
||||
}
|
||||
scroller._clicks = null
|
||||
scroller._click_timeout_id = null
|
||||
}, multiClickTimeout)
|
||||
}
|
||||
}
|
||||
|
||||
// left/right swipes...
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user