implement pinch to zoom

2026-08-30 16:15:14 +02:00
parent ea50704f8a
commit 7eb02f07dc
160 changed files with 15806 additions and 61 deletions
@@ -0,0 +1,22 @@
+
+The MIT License (MIT)
+
+Copyright (c) 2015 Jonathan Ong me@jongleberry.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
@@ -0,0 +1,63 @@
+# Tap Event
+
+[![Build Status](https://secure.travis-ci.org/chemzqm/tap-event.svg)](http://travis-ci.org/chemzqm/tap-event)
+
+Make your `touchstart` event listeners into a `tap` event listener!
+
+What is "correct" behavior? The `tap` event:
+
+- shouldn't be triggered until the user removes his/her finger from the surface of the screen.
+- shouldn't be triggered when the user moves his/her finger at all (ie it should not interfere with drag events).
+- shouldn't be triggered if there's ever more than a single finger on the surface at all.
+- should never trigger the `click` event.
+
+Preserve context and arguments in 1.1.0, works with delegate easily
+
+## Install
+
+    npm install component-tap-event -S
+
+## API
+
+```js
+var tap = require('tap-event')
+
+var el = document.querySelector('#container')
+
+// the event you want to handle
+function changeLocation(e) {
+  // e.preventDefault() is already called!
+  location.href = this.href
+}
+
+// wrap the listener
+var listener = tap(changeLocation)
+
+// listen to `touchstart`
+el.addEventListener('touchstart', listener)
+
+// remove the listener
+el.removeEventListener('touchstart', listener)
+```
+
+or, more succinctly:
+
+```js
+document.querySelector('#container').addEventListener('touchstart', tap(function (e) {
+  location.href = this.href
+}))
+```
+
+To set a custom timeout (default is `200ms`), you have two options:
+
+```js
+// set globally
+tap.timeout = 300
+
+// set per instance
+tap(function (e) {
+
+}, {
+  timeout: 300
+})
+```
@@ -0,0 +1,87 @@
+var endEvents = [
+  'touchend'
+]
+
+module.exports = Tap
+
+// default tap timeout in ms
+Tap.timeout = 200
+
+function Tap(callback, options) {
+  options = options || {}
+  // if the user holds his/her finger down for more than 200ms,
+  // then it's not really considered a tap.
+  // however, you can make this configurable.
+  var timeout = options.timeout || Tap.timeout
+
+  // to keep track of the original listener
+  listener.handler = callback
+
+  return listener
+
+  // el.addEventListener('touchstart', listener)
+  function listener(e1) {
+    // tap should only happen with a single finger
+    if (!e1.touches || e1.touches.length > 1) return
+
+    var el = e1.target
+    var context = this
+    var args = arguments;
+
+    var timeout_id = setTimeout(cleanup, timeout)
+
+    el.addEventListener('touchmove', cleanup)
+
+    endEvents.forEach(function (event) {
+      el.addEventListener(event, done)
+    })
+
+    function done(e2) {
+      // since touchstart is added on the same tick
+      // and because of bubbling,
+      // it'll execute this on the same touchstart.
+      // this filters out the same touchstart event.
+      if (e1 === e2) return
+
+      cleanup()
+
+      // already handled
+      if (e2.defaultPrevented) return
+
+      // overwrite these functions so that they all to both start and events.
+      var preventDefault = e1.preventDefault
+      var stopPropagation = e1.stopPropagation
+
+      e1.stopPropagation = function () {
+        stopPropagation.call(e1)
+        stopPropagation.call(e2)
+      }
+
+      e1.preventDefault = function () {
+        //preventDefault.call(e1)
+        preventDefault.call(e2)
+      }
+
+      // calls the handler with the `end` event,
+      // but i don't think it matters.
+      callback.apply(context, args)
+    }
+
+    // cleanup end events
+    // to cancel the tap, just run this early
+    function cleanup(e2) {
+      // if it's the same event as the origin,
+      // then don't actually cleanup.
+      // hit issues with this - don't remember
+      if (e1 === e2) return
+
+      clearTimeout(timeout_id)
+
+      el.removeEventListener('touchmove', cleanup)
+
+      endEvents.forEach(function (event) {
+        el.removeEventListener(event, done)
+      })
+    }
+  }
+}
@@ -0,0 +1,38 @@
+{
+  "name": "component-tap-event",
+  "description": "Create tap event listeners",
+  "version": "1.1.4",
+  "license": "MIT",
+  "repository": "https://github.com/chemzqm/tap-event",
+  "keywords": [
+    "tap",
+    "event",
+    "listener"
+  ],
+  "main": "index.js",
+  "files": [
+    "index.js"
+  ],
+  "devDependencies": {
+    "coveralls": "^2.11.4",
+    "istanbul": "^0.4.0",
+    "istanbul-instrumenter-loader": "^0.2.0",
+    "karma": "^0.13.15",
+    "karma-cli": "^0.1.1",
+    "karma-coverage": "^0.5.3",
+    "karma-firefox-launcher": "^0.1.7",
+    "karma-mocha": "^0.2.0",
+    "karma-webpack": "^1.7.0",
+    "karma-wrap-preprocessor": "^0.1.0",
+    "mocha": "^2.3.3",
+    "mocha-loader": "^0.7.1",
+    "standardberry": "^3.5.1",
+    "touch-simulate": "^0.1.1",
+    "webpack": "^1.12.4",
+    "webpack-dev-server": "^1.12.1"
+  },
+  "scripts": {
+    "test": "make test-karma"
+  },
+  "browser": {}
+}