{"id":13606073,"url":"https://github.com/AlloyTeam/AlloyFinger","last_synced_at":"2025-04-12T08:30:22.937Z","repository":{"id":55064833,"uuid":"59704101","full_name":"AlloyTeam/AlloyFinger","owner":"AlloyTeam","description":"Super tiny size multi-touch gestures library for the web. 　　　You can touch this →","archived":false,"fork":false,"pushed_at":"2019-01-03T07:05:23.000Z","size":1177,"stargazers_count":3438,"open_issues_count":76,"forks_count":542,"subscribers_count":132,"default_branch":"master","last_synced_at":"2025-04-10T04:40:34.227Z","etag":null,"topics":["alloyfinger","finger","gesture","touch"],"latest_commit_sha":null,"homepage":"http://alloyteam.github.io/AlloyFinger/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlloyTeam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-25T23:17:03.000Z","updated_at":"2025-04-07T02:23:02.000Z","dependencies_parsed_at":"2022-08-14T10:50:23.428Z","dependency_job_id":null,"html_url":"https://github.com/AlloyTeam/AlloyFinger","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2FAlloyFinger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2FAlloyFinger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2FAlloyFinger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2FAlloyFinger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlloyTeam","download_url":"https://codeload.github.com/AlloyTeam/AlloyFinger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248539743,"owners_count":21121226,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alloyfinger","finger","gesture","touch"],"created_at":"2024-08-01T19:01:05.779Z","updated_at":"2025-04-12T08:30:22.570Z","avatar_url":"https://github.com/AlloyTeam.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Touch","前端常用","16. 动画(Animate)","Touch Gestures"],"sub_categories":["Markdown","13.20 视差滚动(Parallax Scrolling)","Reactive Programming"],"readme":"# Preview\n\nYou can touch this → [http://alloyteam.github.io/AlloyFinger/](http://alloyteam.github.io/AlloyFinger/)\n\n# Install\n\nYou can install it via npm:\n\n```html\nnpm install alloyfinger\n```\n\n# Usage\n\n```js\nvar af = new AlloyFinger(element, {\n    touchStart: function () { },\n    touchMove: function () { },\n    touchEnd:  function () { },\n    touchCancel: function () { },\n    multipointStart: function () { },\n    multipointEnd: function () { },\n    tap: function () { },\n    doubleTap: function () { },\n    longTap: function () { },\n    singleTap: function () { },\n    rotate: function (evt) {\n        console.log(evt.angle);\n    },\n    pinch: function (evt) {\n        console.log(evt.zoom);\n    },\n    pressMove: function (evt) {\n        console.log(evt.deltaX);\n        console.log(evt.deltaY);\n    },\n    swipe: function (evt) {\n        console.log(\"swipe\" + evt.direction);\n    }\n});\n\n/**\n * this method can also add or remove the event handler\n */\nvar onTap = function() {};\n\naf.on('tap', onTap);\naf.on('touchStart', function() {});\n\naf.off('tap', onTap);\n\n/**\n * this method can destroy the instance\n */\naf = af.destroy();\n```\n\n### Omi Version:\n\n\n```js\nimport { render, tag, WeElement } from 'omi'\nimport 'omi-finger'\n\n@tag('my-app')\nclass MyApp extends WeElement {\n  install() {\n    this.data.wording = 'Tap or Swipe Me!'\n  }\n\n  handleTap = (evt) =\u003e {\n    this.data.wording += '\\r\\nTap'\n    this.update()\n  }\n\n  handleSwipe = (evt) =\u003e {\n    this.data.wording += '\\r\\nSwipe-' + evt.direction\n    this.update()\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003comi-finger onTap={this.handleTap} abc={{a:1}} onSwipe={this.handleSwipe}\u003e\n          \u003cdiv class=\"touchArea\" \u003e\n            {this.data.wording}\n          \u003c/div\u003e\n        \u003c/omi-finger\u003e\n      \u003c/div\u003e\n    )\n  }\n\n  css() {\n    return `.touchArea{\n                  background-color: green;\n                  width: 200px;\n                  min-height: 200px;\n                  text-align: center;\n                  color:white;\n                  height:auto;\n                  white-space: pre-line;\n              }`\n  }\n}\n\nrender(\u003cmy-app\u003e\u003c/my-app\u003e, 'body')\n```\n\n* [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)\n* [css3transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)\n\n# Others\n\n* [AlloyCrop](https://github.com/AlloyTeam/AlloyCrop)\n\n\n# License\nThis content is released under the [MIT](http://opensource.org/licenses/MIT) License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlloyTeam%2FAlloyFinger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAlloyTeam%2FAlloyFinger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlloyTeam%2FAlloyFinger/lists"}