Giter VIP home page Giter VIP logo

backbone.touch's Introduction

Backbone.touch

Monkey patch Backbone.View to enable fast tap events on touch devices.

Usage

Backbone.touch is made to work with your existing views. It replaces the delegateEvents method and replaces any click event with the three events touchstart, touchmove and touchend when a touch device is used. Once the touchend fires your callback is executed without the 300ms delay that the click event has.

Download & Include

Bower install

bower install backbone.touch

Manual download

Depends on Underscore, Backbone and jQuery. You can swap out the jQuery dependency completely with a custom configuration.

Include in your application after jQuery, Underscore, and Backbone have been included.

<script src="/js/jquery.js"></script>
<script src="/js/underscore.js"></script>
<script src="/js/backbone.js"></script>

<script src="/js/backbone.touch.js"></script>

Note that backbone.touch currently overwrites Backbone.View to make its usage a no-op part from including it.

Release notes

0.4

  • NodeJS + Browserify environment support

0.3

  • Possibility to override the threshold
  • Grunt v4.0

0.2

  • Register as an anonymous AMD module

0.1

  • Initial release. Only tested on iPad

License

MIT License (c) Raymond Julin

backbone.touch's People

Contributors

jamuhl avatar kevinsperrine avatar krawaller avatar loicmahieu avatar neilkumar avatar nervetattoo avatar streunerlein avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

backbone.touch's Issues

Events Not Delegated for Devices Supporting Touch & Click

Devices that support touch events and click events will not delegate click events, thereby not allowing certain elements to be clicked, only touched.

I've tested this on Chrome with my Acer Aspire S7 (Windows 8.1), Chrome on Mac OSX (10.9.4) as well as Safari on iPhone 5 (7.1). Mac and iPhone work as expected, however, the Acer is a touchscreen enabled laptop and when using this plugin, any click event that has been registered on an element prevents the handler from being called when clicking as normal, I can only touch the screen for the expected behavior.

similar problem to #13

Could you test if "window" exists instead of "global"

Hi,

I know that we should not have a global var "global" or a DOM node with a "global" ID in browser context, sometimes, old projects with bad practices had and we want add to them good plugins such yours ;-)

I can add a pull request to do that, but maybe you prefer choose how you want to fix it.

Thank you.

Zepto compatibility issue

I am using backbone with zepto instead of jquery, backbone.touch have a compatibility issue with zepto.
zepto's touch event object does not have 'originalEvent' property, my workaround was to change line 93 and 94 to:

var oe = e.originalEvent || e; 
if (!('changedTouches' in oe)) return;
var touch = oe.changedTouches[0];

How does this compare to the touchclick lib?

I just popped touchclick into my project and it seems to work just as well as backbone-touch, without extending backbone, and the bonus .touchactive class added for styling touch events (I can create a 'touchactive' state for increased perceived performance).

Am I missing any benefits that backbone.touch gives over this?

Bower backbone dependency version number is wrong

the project's bower.json which is at 0.4.1 in the repo has the correct backbone dependency version, but 0.4.0 which is available to bower apparently does not. Can you update? Thank you.

$ bower install -save backbone.touch#0.4.1
bower backbone.touch#0.4.1  not-cached git://github.com/nervetattoo/backbone.touch.git#0.4.1
bower backbone.touch#0.4.1     resolve git://github.com/nervetattoo/backbone.touch.git#0.4.1
bower backbone.touch#0.4.1     ENORESTARGET No tag found that was able to satisfy 0.4.1

Additional error details:
Available versions: 0.4.0, 0.3.0, 0.2.0

Method does not exist error when extending views

I have base Dialog view something like that:

var Dialog = Backbone.View.extend({
      events: {
           'click .close' : 'closeDialog'
      },
      closeDialog: function() { /* code goes here */ }
});
// then i extend it
var Dialog1 = Dialog.extend({
     events: _.extend(Dialog.prototype.events, {
           'click .something': 'onDialog1Click'
     }),
     onDialog1Click: function() {}
});

var Dialog2 = Dialog.extend({
     events: _.extend(Dialog.prototype.events, {
           'click .something_else': 'onDialog2Click'
     }),
     onDialog2Click: function() {}
})


var dialog1 = new Dialog1();
var dialog2 = new Dialog2();

//Uncaught Error: Method "onDialog2Click" or "onDialog1Click" does not exist 

I solve this by repeating again all base class events again in child classes. Is there other way to do it?

Long tap reloads the page

This plugin works well when taps are quick.
But when you tap and hold, then release after 1 second, it reloads the page.
I have already used preventDefault, but doesn't seem to help.

Is this a known issue?

Should not steal delegateEvents

Backbone.touch should rather massage the events data before calling to delegateEvents, this allows to mix different backbone plugins that override delegateEvents

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.