From: Michael Ang Date: Tue, 19 Oct 2010 20:47:19 +0000 (+0000) Subject: Merge branch 'newui' of http://github.com/rajbot/bookreader into swipe X-Git-Url: http://git.rot13.org/?p=bookreader.git;a=commitdiff_plain;h=07eb2f5fa072fe23ae589097ccbbe17cfc49c394;hp=-c Merge branch 'newui' of github.com/rajbot/bookreader into swipe --- 07eb2f5fa072fe23ae589097ccbbe17cfc49c394 diff --combined BookReader/BookReader.js index 6bbf45f,36032e7..db4fe25 --- a/BookReader/BookReader.js +++ b/BookReader/BookReader.js @@@ -370,7 -370,7 +370,7 @@@ BookReader.prototype.setClickHandler2U //console.log('setting handler'); //console.log(element.tagName); - $(element).unbind('tap').bind('tap', data, function(e) { + $(element).unbind('click').bind('click', data, function(e) { handler(e); }); } @@@ -1473,7 -1473,7 +1473,7 @@@ BookReader.prototype.prepareTwoPageVie $('#BRcontainer').append('
'); // Attaches to first child, so must come after we add the page view - $('#BRcontainer').dragscrollable(); + //$('#BRcontainer').dragscrollable(); this.bindGestures($('#BRcontainer')); // $$$ calculate first then set @@@ -2377,13 -2377,8 +2377,13 @@@ BookReader.prototype.setMouseHandlers2U this.setClickHandler2UP( this.prefetchedImgs[this.twoPage.currentIndexL], { self: this }, function(e) { + if (e.button == 2) { + // right click + return; + } e.data.self.ttsStop(); e.data.self.left(); + e.preventDefault(); } ); @@@ -2391,10 -2386,6 +2391,10 @@@ this.setClickHandler2UP( this.prefetchedImgs[this.twoPage.currentIndexR], { self: this }, function(e) { + if (e.button == 2) { + // right click + return; + } e.data.self.ttsStop(); e.data.self.right(); e.preventDefault(); @@@ -2420,7 -2411,7 +2420,7 @@@ BookReader.prototype.prefetchImg = func if (loadImage) { //console.log('prefetching ' + index); var img = document.createElement("img"); - img.className = 'BRpageimage'; + $(img).addClass('BRpageimage').addClass('BRnoselect'); if (index < 0 || index > (this.numLeafs - 1) ) { // Facing page at beginning or end, or beyond $(img).css({ @@@ -3865,11 -3856,13 +3865,13 @@@ BookReader.prototype.bindNavigationHand }); jIcons.filter('.zoom_in').bind('click', function() { + self.ttsStop(); self.zoom(1); return false; }); jIcons.filter('.zoom_out').bind('click', function() { + self.ttsStop(); self.zoom(-1); return false; }); @@@ -3879,26 -3872,10 +3881,26 @@@ self.search($('#textSrch').val()); }); + this.initSwipeData(); $('#BookReader').die('mousemove.navigation').live('mousemove.navigation', { 'br': this }, this.navigationMousemoveHandler ); + + $('.BRpageimage').die('mousedown.swipe').live('mousedown.swipe', + { 'br': this }, + this.swipeMousedownHandler + ) + .die('mousemove.swipe').live('mousemove.swipe', + { 'br': this }, + this.swipeMousemoveHandler + ) + .die('mouseup.swipe').live('mouseup.swipe', + { 'br': this }, + this.swipeMouseupHandler + ); + + this.bindMozTouchHandlers(); } // unbindNavigationHandlers @@@ -3925,100 -3902,6 +3927,100 @@@ BookReader.prototype.navigationMousemov } } +BookReader.prototype.initSwipeData = function(clientX, clientY) { + /* + * Based on the really quite awesome "Today's Guardian" at http://guardian.gyford.com/ + */ + this._swipe = { + mightBeSwiping: false, + startTime: (new Date).getTime(), + startX: clientX, + startY: clientY, + deltaX: 0, + deltaY: 0, + deltaT: 0 + } +} + +BookReader.prototype.swipeMousedownHandler = function(event) { + //console.log('swipe mousedown'); + //console.log(event); + + var self = event.data['br']; + self.initSwipeData(event.clientX, event.clientY); + self._swipe.mightBeSwiping = true; + + // We should be the last bubble point for the page images + // Disable image drag and select, but keep right-click + if ($(event.originalTarget).hasClass('BRpageimage') && event.button != 2) { + event.preventDefault(); + } +} + +BookReader.prototype.swipeMousemoveHandler = function(event) { + //console.log('swipe move ' + event.clientX + ',' + event.clientY); + + var _swipe = event.data['br']._swipe; + if (! _swipe.mightBeSwiping) { + return; + } + + // Update swipe data + _swipe.deltaX = event.clientX - _swipe.startX; + _swipe.deltaY = event.clientY - _swipe.startY; + _swipe.deltaT = (new Date).getTime() - _swipe.startTime; + + var absX = Math.abs(_swipe.deltaX); + var absY = Math.abs(_swipe.deltaY); + + // Minimum distance in the amount of tim to trigger the swipe + var minSwipeLength = Math.max($('#BookReader').width() / 5, 100); + var maxSwipeTime = 1000; + + // Check for horizontal swipe + if (absX > absY && (absX > minSwipeLength) && _swipe.deltaT < maxSwipeTime) { + //console.log('swipe! ' + _swipe.deltaX + ',' + _swipe.deltaY + ' ' + _swipe.deltaT + 'ms'); + + _swipe.mightBeSwiping = false; // only trigger once + if (event.data['br'].mode == event.data['br'].constMode2up) { + if (_swipe.deltaX < 0) { + event.data['br'].right(); + } else { + event.data['br'].left(); + } + } + } +} +BookReader.prototype.swipeMouseupHandler = function(event) { + //console.log('swipe mouseup'); + //console.log(event); + event.data['br']._swipe.mightBeSwiping = false; +} + +BookReader.prototype.bindMozTouchHandlers = function() { + var self = this; + + // Currently only want touch handlers in 2up + $('#BookReader').bind('MozTouchDown', function(event) { + //console.log('MozTouchDown ' + event.streamId + ' ' + event.clientX + ',' + event.clientY); + if (this.mode == this.constMode2up) { + event.preventDefault(); + } + }) + .bind('MozTouchMove', function(event) { + //console.log('MozTouchMove - ' + event.streamId + ' ' + event.clientX + ',' + event.clientY) + if (this.mode == this.constMode2up) { + event.preventDefault(); + } + }) + .bind('MozTouchUp', function(event) { + //console.log('MozTouchUp - ' + event.streamId + ' ' + event.clientX + ',' + event.clientY); + if (this.mode = this.constMode2up) { + event.preventDefault(); + } + }); +} + // navigationIsVisible //______________________________________________________________________________ // Returns true if the navigation elements are currently visible