Browse Source

resolved issue: `Cards should have Double Click Handlers #1` on touch devices

Vladimir Bykov 11 years ago
parent
commit
bcae97c30d

+ 2 - 2
apps/web/priv/static/app/js/okey/deck.js

@@ -40,7 +40,7 @@ function DeckScope(scope) {
                     },
                     card.on("dragstart", this.select),
                     card.on("dragmove", this.track),
-                    card.on('dblclick', function(){ 
+                    card.$el.doubletap(function(){ 
                         scope.apiProvider.actionDiscard(card) 
                     }),
                     this.cards[j][i] = card, 
@@ -168,7 +168,7 @@ function DeckScope(scope) {
                         card.pos = {x:i, y:j}
                         card.on('dragstart', this.select)
                         card.on('dragmove', this.track)
-                        card.on('dblclick', function(){ 
+                        card.$el.doubletap(function(){ 
                             scope.apiProvider.actionDiscard(card) 
                         })                     
                         this.cards[j][i] = card

+ 8 - 6
apps/web/priv/static/app/js/okey/okey.js

@@ -29,9 +29,10 @@ function PostLoad()
                                             .on("dragstop", addFadeOut)
                                             .on("dragmove", deck.track)
                                             .on("revert",   fadeOut)
-                                            .on('dblclick', function(){
-                                                scope.apiProvider.actionTake(centralCard) 
-                                            })
+
+        centralCard.$el.doubletap(function(){
+            scope.apiProvider.actionTake(centralCard) 
+        })
 
         deck.$el.append(centralCard.$el[0]);
         centralCard.drag();
@@ -131,9 +132,10 @@ function PostLoad()
                 card
                     .on("dragstart", deck.select)
                     .on("dragmove", deck.track)
-                    .on('dblclick', function(){
-                        scope.apiProvider.actionTake(card) 
-                    });
+                    
+                card.$el.doubletap(function(){
+                    scope.apiProvider.actionTake(card) 
+                });
             }
             deck.length() < 15 ? (centralCard.dragHandler.enable(), centralCard.$el.on(document.createTouch ? "touchstart" : "mousedown", fadeIn).on(document.createTouch ? "touchend" : "mouseup", fadeOut), 
             centralCard.on("dragmove", removeFadeOut).on("dragstop", addFadeOut).on("revert", fadeOut)) : (centralCard.dragHandler.disable(), 

+ 29 - 1
apps/web/priv/static/app/js/selector.js

@@ -5,7 +5,7 @@ var scope = {
     CARD_SMALL_SOURCE: "svg/Card-Small.svg",
     CARD_COLORS: [ "#CE290F", "#3B5998", "#48AF5E", "#F8E81C" ],
     SKIN_NAMES: [ "Alina", "Gabrielo", "Mustafa" ],
-    version: 1106201402
+    version: 1006201401
 };
 
 var $ = function(_undefind)
@@ -210,6 +210,34 @@ var $ = function(_undefind)
     fn.pause = function() { return $("svg")[0].pauseAnimations(), this.each(function(el) { el.paused = !0; }); },
     fn.resume = function() { return $("svg")[0].unpauseAnimations(), this.each(function(el) { el.paused = !1; }); };
 
+    fn.doubletap = function(doubleTapHandler, delay){
+        delay = (delay == null) ? 300 : delay;
+        
+        if(document.createTouch){
+            return this.on('touchend', function(event){
+                var now = new Date().getTime();
+         
+                // the first time this will make delta a negative number
+                var lastTouch = this.__lastTouch || now + 1;
+                var delta = now - lastTouch;
+                if(delta < delay && 0 < delta){
+                    // After we detct a doubletap, start over
+                    this.__lastTouch = null;
+         
+                    if(doubleTapHandler !== null && typeof doubleTapHandler === 'function'){
+                        doubleTapHandler(event);
+                    }
+                }else{
+                    this.__lastTouch = now
+                }
+            });
+        }
+        else {
+            return this.on('dblclick', doubleTapHandler)
+        }
+        
+    }
+
     var tag = /^<(.+)\/>$/;
 
     return $.extend = function(target) {