garris / garris/TremulaJS

Hammerjs_2.x Exception

Open
#17 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.3k
Forks
73
PR merge metrics
No merged PRs in 30d

Description

`Uncaught TypeError: Cannot read property 'stopDetect' of undefined` when dragging, in

``` json
"jquery": "~1.7.1",
"tremulajs": "~1.2.4",
"hammer.js": "~2.0.4",
"jsbezier": "*"
```

``` js
switch(ev.type) {
case 'mousewheel':
case 'DOMMouseScroll':
case 'wheel':
_mw.call(this,ev);
//dont break here -- keep evaluation...
case '_mw': //map events over for processing by dragleft
var wheelEvent = ev;//ev.originalEvent;
var //wheel events for webkit|| new moz || old moz
dy = wheelEvent.wheelDeltaY*.5||-wheelEvent.deltaY||-wheelEvent.detail*3,
dx = wheelEvent.wheelDeltaX*.5||-wheelEvent.deltaX||-wheelEvent.detail*3;
var nextScrollPos = this.scrollPos + (this.sx)?dx:dy;
var maxScroll = this.trailingEdgeScrollPos;
//isNextHeadMargin and isNextTailMargin add massive drag to input to simulate rubberband tension in scrollFrame
var isNextHeadMargin = !this.hasMediumGridDimsSi && nextScrollPos>this.firstItemPos;
var isNextTailMargin = !this.hasMediumGridDimsSi && nextScrollPos NOTE: THERE IS NO BREAK HERE. MW EVENTS ARE NORMALIZED (as ev.gesture.*) ABOVE AND THEN PROCESSED AS DRAG EVENTS BELOW vvv

case 'dragup':
case 'dragdown':
case 'dragright':
case 'dragleft':
// === manually block page scroll ===
// if in horizontal config and the user is scrolling horizontally
// or if in vertical config and the user is scrolling vertically
if(ev.pointerType=="mouse"){
ev.gesture.preventDefault();
ev.gesture.stopPropagation();
}else if(this.sx){//is horizontal config
// if(ev.gesture.deltaX != 0){//this old bit was recently disabled
if(Math.abs(ev.gesture.deltaY/ev.gesture.deltaX) <= 1){ // if this ratio is 1 or less then the user is scrolling the scroll axis: so block native events
shuntEvent(ev);
}
// }
}else{// is vertical config
// if(ev.gesture.deltaY != 0){//this old bit was recently disabled -- not needed now?
if(Math.abs(ev.gesture.deltaX/ev.gesture.deltaY) <= 1){ // if this ratio is 1 or less then the user is scrolling the scroll axis: so block native events
shuntEvent(ev);
}
// }
}// config case
// === END: manually block page scroll ===
this.isTouching=true;
//incase we are at the begining of a touch event or incase this is a fallthrough WheelEvent
if(fingeredOffset==0 || /wheel|scroll/.test(ev.type)){
fingeredOffset = this.scrollPos;
lastD = 0;
}
// //incase we are at the begining of a touch event or incase this is a fallthrough WheelEvent
// if(fingeredOffset_==0 || /wheel|scroll/.test(ev.type)){
// fingeredOffset_ = this.parentParentE.scrollTop;
// lastD_ = 0;
// }
var D = (this.sx)?ev.gesture.deltaX:ev.gesture.deltaY;
var D_ = (!this.sx)?ev.gesture.deltaX:ev.gesture.deltaY;
//if we are scrolling along the scrollaxis
if(Math.abs(D)>Math.abs(D_)){
this.setScrollPos( D-lastD, true );
lastD = D;
this.oneShotPaint(ev);
}
this.tagLastUserEvent(ev);
break;

case 'swipeleft':
if(!this.sx){return}
ev.gesture.stopDetect();
this.isTouching=false;
//var m = this.momentum = -this.dMomentum;
var m = -ev.gesture.velocityX;
if(this.steppedScrolling)
this.easeToNextStepItem();
else
this.startEasing(m,ev)
this.tagLastUserEvent(ev);
break;

case 'swiperight':
if(!this.sx){return}
ev.gesture.stopDetect();
this.isTouching=false;
var m = ev.gesture.velocityX;
if(this.steppedScrolling)
this.easeToPrevStepItem();
else
this.startEasing(m,ev)
this.tagLastUserEvent(ev);
break;

case 'swipeup':
if(this.sx){return}
ev.gesture.stopDetect();
this.isTouching=false;
var m = -ev.gesture.velocityY;
if(this.steppedScrolling)
this.easeToNextStepItem();
else
this.startEasing(m,ev)
this.tagLastUserEvent(ev);
break;

case 'swipedown':
if(this.sx){return}
ev.gesture.stopDetect();
this.isTouching=false;
//var m = this.momentum = this.dMomentum;
var m = ev.gesture.velocityY;
if(this.steppedScrolling)
this.easeToPrevStepItem();
else
this.startEasing(m,ev)
this.tagLastUserEvent(ev);
break;

case 'touch':
//u.log('touch: '+new Date().getMilliseconds())
fingeredOffset = 0;
fingeredOffset_ = 0;
this.isTouching=true;
this.oneShotPaint(ev);
this.tagLastUserEvent(ev);
break;
case 'release':
//u.log('release: '+new Date().getMilliseconds())
//test for last event being a touch AND being OVER x ms ago. Also make sure we're not in the middle of easing.
var lastUserEvtMs = new Date() - this.lastUserEvent.time;
var lastWasTouch = /touch/.test(this.lastUserEvent.evt.type,'i');
if(!this.isEasing && lastWasTouch && lastUserEvtMs < 1000){
this.$e.trigger('tremulaItemSelect',ev);
}
this.isTouching=false;
if(this.steppedScrolling){
var lastWasLegalTouch = lastWasTouch && ev.target && ev.target.className && !/\bgridBox\b/.test(ev.target.className);

if(!lastWasTouch || lastWasLegalTouch){
this.easeToClosestStepItem();
};
}else{
this.oneShotPaint();
}
this.tagLastUserEvent(ev);
break;
}//switch
```

`ev` doesn't have property `gesture` in 'swipe***' case. `ev.gesture.stopDetect();` causes error

copied from tremula codepen demo

``` js
(function(){

'use strict';

angular.module('tremula', []).directive('tremula', function($timeout){

return{
restrict: 'EA',
link: function($scope, elem){
var tremulaBase;
function createTremula(){

var $tremulaContainer = elem;
var tremula = new Tremula();
var config = {
itemConstraint :150,//px
itemMargins :[10,10],//x (left & right), y (top & bottom) in px
staticAxisOffset :0,//px
scrollAxisOffset :20,//px
scrollAxis :'x',//'x'|'y'
surfaceMap :tremula.projections.xyPlain,
staticAxisCount :2,//zero based
defaultLayout :tremula.layouts.xyPlain,
itemPreloading :true,
itemEasing :false,
isLooping :false,
itemEasingParams :{
touchCurve :tremula.easings.easeOutCubic,
swipeCurve :tremula.easings.easeOutCubic,
transitionCurve :tremula.easings.easeOutElastic,
easeTime :500,
springLimit :40 //in px
},
onChangePub : doScrollEvents,
data : null,
lastContentBlock : {
template :'

',
layoutType :'tremulaBlockItem',
noScaling:true,
w:300,
h:300,
isLastContentBlock:true,
adapter:tremula.dataAdapters.TremulaItem
},
adapter :null

};
tremula.init($tremulaContainer,config,this);
return tremula;
}
function doScrollEvents(o){
if(o.scrollProgress>.7){
if(!tremula.cache.endOfScrollFlag){
tremula.cache.endOfScrollFlag = true;
pageCtr++;
loadFlickr();
console.log('END OF SCROLL!')
}
}
}

var pageCtr = 1;
function loadFlickr(){
var dataUrl = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=c149b994c54c114bd7836b61539eec2e&tags=street+art&format=json&page='+pageCtr+'&extras=url_n';
$.ajax({
url:dataUrl
,dataType: 'jsonp'
,jsonp: 'jsoncallback'
})
.done(function(res){
if (res.stat=='fail')alert('Dang. Looks like Flickr has lost its pancakes... '+res.message);
var rs = res.photos.photo.filter(function(o,i){return o.height_n > o.width_n * .5});//filter out any with a really wide aspect ratio.
tremulaBase.appendData(rs,flickrDataAdapter);//flicker
tremulaBase.cache.endOfScrollFlag = false;
})
.fail( function(d,config,err){console.log('API FAIL. '+err) })}

function flickrDataAdapter(data,env){
this.data = data;
this.w = this.width = data.width_n;
this.h = this.height = data.height_n;
this.imgUrl = data.url_n;
this.auxClassList = "flickrRS";//stamp each mapped item with map ID
this.template = this.data.template||('desc ');
}
function applyBoxClick(){
elem.on('tremulaItemSelect',function(gestureEvt,domEvt){
console.log(gestureEvt,domEvt)
var
$e = $(domEvt.target);
if($e.closest('.gridBox')[0]){
var data = $.data(t).model.model.data;
}
if(data)alert(JSON.stringify(data));
})
}
$timeout(function(){
tremulaBase = createTremula();
applyBoxClick();
loadFlickr()
}, 1);
}
}
});

})();

```

Maybe `hammer.js` events not attached to DOM?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.