Skip to content

Instantly share code, notes, and snippets.

@manufaktor

manufaktor/application.js

Last active December 23, 2015 08:19
Show Gist options
  • Save manufaktor/6606875 to your computer and use it in GitHub Desktop.
Save manufaktor/6606875 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. manufaktor revised this gist Sep 18, 2013. 1 changed file with 11 additions and 11 deletions.
    22 changes: 11 additions & 11 deletions gesture_manager.js
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ App.GestureManager = Ember.Object.extend({

    // setup hammer js listeners

    var hammerConf = {
    this.hammerConf = {
    // needed, because by default only 1 point
    // gestures are accessible
    swipe_max_touches: 2
    @@ -39,19 +39,19 @@ App.GestureManager = Ember.Object.extend({
    this.boundHandleDragDown = _.bind(this.handleDragDown, this);
    this.boundHandleDragUp = _.bind(this.handleDragUp, this);

    this.el.hammer(hammerConf).on("swipeleft", this.boundHandleSwipeLeft);
    this.el.hammer(hammerConf).on("swiperight", this.boundHandleSwipeRight);
    this.el.hammer(hammerConf).on("swipedown", this.boundHandleSwipeDown);
    this.el.hammer(hammerConf).on("dragdown", this.boundHandleDragDown);
    this.el.hammer(hammerConf).on("dragup", this.boundHandleDragUp);
    this.el.hammer(this.hammerConf).on("swipeleft", this.boundHandleSwipeLeft);
    this.el.hammer(this.hammerConf).on("swiperight", this.boundHandleSwipeRight);
    this.el.hammer(this.hammerConf).on("swipedown", this.boundHandleSwipeDown);
    this.el.hammer(this.hammerConf).on("dragdown", this.boundHandleDragDown);
    this.el.hammer(this.hammerConf).on("dragup", this.boundHandleDragUp);
    },

    destroy: function(){
    this.el.hammer(hammerConf).off("swipeleft", this.boundHandleSwipeLeft);
    this.el.hammer(hammerConf).off("swiperight", this.boundHandleSwipeRight);
    this.el.hammer(hammerConf).off("swipedown", this.boundHandleSwipeDown);
    this.el.hammer(hammerConf).off("dragdown", this.boundHandleDragDown);
    this.el.hammer(hammerConf).off("dragup", this.boundHandleDragUp);
    this.el.hammer(this.hammerConf).off("swipeleft", this.boundHandleSwipeLeft);
    this.el.hammer(this.hammerConf).off("swiperight", this.boundHandleSwipeRight);
    this.el.hammer(this.hammerConf).off("swipedown", this.boundHandleSwipeDown);
    this.el.hammer(this.hammerConf).off("dragdown", this.boundHandleDragDown);
    this.el.hammer(this.hammerConf).off("dragup", this.boundHandleDragUp);

    this.boundHandleSwipeLeft = null;
    this.boundHandleSwipeRight = null;
  2. manufaktor revised this gist Sep 18, 2013. 1 changed file with 10 additions and 10 deletions.
    20 changes: 10 additions & 10 deletions gesture_manager.js
    View file
    Original file line number Diff line number Diff line change
    @@ -72,27 +72,27 @@ App.GestureManager = Ember.Object.extend({
    },

    handleSwipeLeft: function(e){
    var customEvent = this.isTwoFinger(e) ? 'swipeLeftTwoFinger' : 'swipeLeft'
    this.el.trigger(customEvent, e)
    e.type = this.isTwoFinger(e) ? 'swipeLeftTwoFinger' : 'swipeLeft'
    this.el.trigger(e)
    },

    handleSwipeRight: function(e){
    var customEvent = this.isTwoFinger(e) ? 'swipeRightTwoFinger' : 'swipeRight'
    this.el.trigger(customEvent, e)
    e.type = this.isTwoFinger(e) ? 'swipeRightTwoFinger' : 'swipeRight'
    this.el.trigger(e)
    },

    handleSwipeDown: function(e){
    var customEvent = this.isTwoFinger(e) ? 'swipeDownTwoFinger' : 'swipeDown'
    this.el.trigger(customEvent, e)
    e.type = this.isTwoFinger(e) ? 'swipeDownTwoFinger' : 'swipeDown'
    this.el.trigger(e)
    },

    handleDragDown: function(e){
    var customEvent = this.isTwoFinger(e) ? 'dragDownTwoFinger' : 'dragDown'
    this.el.trigger(customEvent, e)
    e.type = this.isTwoFinger(e) ? 'dragDownTwoFinger' : 'dragDown'
    this.el.trigger(e)
    },

    handleDragUp: function(e){
    var customEvent = this.isTwoFinger(e) ? 'dragUpTwoFinger' : 'dragUp'
    this.el.trigger(customEvent, e)
    e.type = this.isTwoFinger(e) ? 'dragUpTwoFinger' : 'dragUp'
    this.el.trigger(e)
    }
    })
  3. manufaktor created this gist Sep 18, 2013.
    12 changes: 12 additions & 0 deletions application.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    App = Ember.Application.create({
    customEvents: {
    swipeLeft: 'swipeLeft',
    swipeRight: 'swipeRight',
    swipeLeftTwoFinger: 'swipeLeftTwoFinger',
    swipeRightTwoFinger: 'swipeRightTwoFinger',
    dragDown: 'dragDown',
    dragUp: 'dragUp',
    dragDownTwoFinger: 'dragDownTwoFinger',
    dragUpTwoFinger: 'dragUpTwoFinger'
    }
    });
    21 changes: 21 additions & 0 deletions custom_view.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    App.CustomView = Ember.View.extend({
    swipeLeft: function(){
    console.log('swipeLeft');
    },

    swipeLeftTwoFinger: function(){
    console.log('swipeLeft with two fingers')
    },

    dragUp: function(){
    console.log('dragging up')
    },

    didInsertElement: function(){
    this.gm = new App.GestureManager(this.$())
    },

    willDestroyElement: function(){
    this.gm.destroy();
    }
    })
    98 changes: 98 additions & 0 deletions gesture_manager.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,98 @@
    //TODO: check scrolling behavior on surface (https://github.com/EightMedia/hammer.js/issues/310)
    //TODO: when/where do we unregister the gestures?

    App.GestureManager = Ember.Object.extend({
    init: function(el){
    // el needs to be a jQuery element
    this.el = el;

    // helper for desktop simulation
    // pressing the alt key will simulate
    // a second finger in a gesture
    var keys = {
    'alt': false
    };

    $('body').keydown(function(e){
    keys['alt'] = e.altKey && e.altKey
    //console.log(keys)
    })

    $('body').keyup(function(e){
    keys['alt'] = e.altKey && e.altKey
    //console.log(keys)
    })

    this.keys = keys;

    // setup hammer js listeners

    var hammerConf = {
    // needed, because by default only 1 point
    // gestures are accessible
    swipe_max_touches: 2
    };

    this.boundHandleSwipeLeft = _.bind(this.handleSwipeLeft, this);
    this.boundHandleSwipeRight = _.bind(this.handleSwipeRight, this);
    this.boundHandleSwipeDown = _.bind(this.handleSwipeDown, this);
    this.boundHandleDragDown = _.bind(this.handleDragDown, this);
    this.boundHandleDragUp = _.bind(this.handleDragUp, this);

    this.el.hammer(hammerConf).on("swipeleft", this.boundHandleSwipeLeft);
    this.el.hammer(hammerConf).on("swiperight", this.boundHandleSwipeRight);
    this.el.hammer(hammerConf).on("swipedown", this.boundHandleSwipeDown);
    this.el.hammer(hammerConf).on("dragdown", this.boundHandleDragDown);
    this.el.hammer(hammerConf).on("dragup", this.boundHandleDragUp);
    },

    destroy: function(){
    this.el.hammer(hammerConf).off("swipeleft", this.boundHandleSwipeLeft);
    this.el.hammer(hammerConf).off("swiperight", this.boundHandleSwipeRight);
    this.el.hammer(hammerConf).off("swipedown", this.boundHandleSwipeDown);
    this.el.hammer(hammerConf).off("dragdown", this.boundHandleDragDown);
    this.el.hammer(hammerConf).off("dragup", this.boundHandleDragUp);

    this.boundHandleSwipeLeft = null;
    this.boundHandleSwipeRight = null;
    this.boundHandleSwipeDown = null;
    this.boundHandleDragDown = null;
    this.boundHandleDragUp = null;
    },

    isTwoFinger: function(e){
    var multiPoint = e.gesture.touches.length > 1;
    //console.log("points:", e.gesture.touches.length)

    if(this.keys['alt'] == true){
    multiPoint = true;
    }

    return multiPoint;
    },

    handleSwipeLeft: function(e){
    var customEvent = this.isTwoFinger(e) ? 'swipeLeftTwoFinger' : 'swipeLeft'
    this.el.trigger(customEvent, e)
    },

    handleSwipeRight: function(e){
    var customEvent = this.isTwoFinger(e) ? 'swipeRightTwoFinger' : 'swipeRight'
    this.el.trigger(customEvent, e)
    },

    handleSwipeDown: function(e){
    var customEvent = this.isTwoFinger(e) ? 'swipeDownTwoFinger' : 'swipeDown'
    this.el.trigger(customEvent, e)
    },

    handleDragDown: function(e){
    var customEvent = this.isTwoFinger(e) ? 'dragDownTwoFinger' : 'dragDown'
    this.el.trigger(customEvent, e)
    },

    handleDragUp: function(e){
    var customEvent = this.isTwoFinger(e) ? 'dragUpTwoFinger' : 'dragUp'
    this.el.trigger(customEvent, e)
    }
    })