Giter VIP home page Giter VIP logo

thumbs.js's Introduction

thumbs.js

Add touch support to your browser.

About

Small, transparent, and syntax-less library that adds touch support to your browser.

  • Handy for desktop debugging
  • Add touch to touch-less devices
  • Does nothing on touch-enabled devices
  • PhoneGap and mobile web friendly

More detail and a demo are on the thumbs.js homepage.

Browser Support

  • FireFox Desktop
  • Opera Desktop
  • Webkit Desktop
  • Webkit Mobile

Usage

<!-- include before all javascript -->
<!-- can also be dynamically loaded -->
<script type="text/javascript" src="thumbs.js"></script>

// later on...

element.addEventListener('touchstart', callback, false);
element.addEventListener('touchend',   callback, false);
element.addEventListener('touchmove',  callback, false);

// jQuery or zepto.js
$(element).bind('touchstart', callback);

// xui
$(element).on('touchstart', callback);

Building from source

Run:

make

Generates:

build/thumbs.x.x.js
build/thumbs.x.x.min.js

Running the tests

Open in a browser:

test/index.html

Running a simple example

Open in a browser:

example/index.html

Want to contribute?

Report or fix an issue

We use GitHub Issues

By the way, you rock! Thanks for helping us improve thumbs.js.

Pull Requests

Pull requests are welcome!

We appreciate the use of topic branches.

git checkout -b issue_23

# code

git commit -m "Issue 23: Fix a bad bug."

git push origin issue_23

# send pull request from branch issue_23 to mwbrooks:master

thumbs.js's People

Contributors

mwbrooks avatar tf 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  avatar  avatar  avatar  avatar  avatar  avatar

thumbs.js's Issues

Test on BlackBerry 6 (Torch)

Torch is a wonky device that has both point and touch interaction.

Does pressing the pointing fire a mouse, touch, or both?

onXXX only fires on <a>

Events defined as elements attributes only fire on anchor elements.

Event fires:

<a href="#" ontouchmove="console.log('move');">Move</a>

Event does not fire:

<button ontouchmove="console.log('move');">Move</button>

Tap doesn't work on Android

At the moment, it looks like either the custom Touch Event isn't being dispatched, or the handler is having trouble recognizing it. Unfortunately, TouchEvent documentation for Android's webkit browser is scant at best.

Test on Palm

From my understanding, Palm device do not support touch. Will be nice to see if thumbs.js can add touch event handling.

Test on BlackBerry 6 (Style)

This device uses a mobile webkit browser, but does not have touch input.

Does it still support touch events? Does the pointer fire touch events?

Not working when loaded after document-load event has been fired

As by now, the script requires a document-load event to be fired before it will work.
This makes the script unusable for situations where you would like to add thumbs.js to an already loaded document.

A simple fix for this, would be to wrap the initialization inside a check of the document's readystate.

Instead of the current window.addEventListener-call, it could be something like this:

var init = function() {
    for (var key in eventMap) {
        document.body.addEventListener(key, function(e) {
            // Supports:
            //   - addEventListener
            //   - setAttribute
            var event = createTouchEvent(eventMap[e.type], e);
            e.target.dispatchEvent(event);
            // Supports:
            //   - element.ontouchstart
            var fn = e.target['on' + eventMap[e.type]];
            if (typeof fn === 'function') fn(e);
        }, false);
    }
}

if (document.readyState == "complete" || document.readyState == "loaded") {
    init()
}
else {
    window.addEventListener('load', init, false)
}

More touch events

Hello!
Do you plan to add a little bit more touch events, such as: touchenter:mouseenter, touchleave:mouseleave?
Thank you!

Test on BlackBerry 5

All BlackBerry 5 devices fire mouse events - even the Storm (to my understanding).

Just need to make sure that the initEvent function works fine on BrowserField2

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.