add omi-tap
This commit is contained in:
张磊
parent
d3938ca5e5
commit
24f34c5689
|
|
@ -0,0 +1,45 @@
|
|||
## omi-tap
|
||||
|
||||
Support tap event in your [Omi](https://github.com/AlloyTeam/omi) project.
|
||||
|
||||
---
|
||||
|
||||
## Install
|
||||
|
||||
``` js
|
||||
npm install omi-tap
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import Omi from 'omi';
|
||||
import OmiTap from 'omi-tap';
|
||||
|
||||
class App extends Component {
|
||||
|
||||
constructor(){
|
||||
super()
|
||||
this.tapHandler = this.tapHandler.bind(this)
|
||||
}
|
||||
|
||||
tapHandler(evt) {
|
||||
alert('Hello Omi + Parcel!')
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<OmiTap onTap={this.tapHandler}>
|
||||
<h1>Hello Omi + Parcel 📦 🚀</h1>
|
||||
</OmiTap>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Omi.render(<App />,"#container");
|
||||
```
|
||||
|
||||
# License
|
||||
This content is released under the [MIT](http://opensource.org/licenses/MIT) License.
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import { WeElement, define } from "omi";
|
||||
|
||||
class OmiTap extends WeElement {
|
||||
|
||||
install() {
|
||||
this._handleTouchStart = this._handleTouchStart.bind(this)
|
||||
this._handleTouchEnd = this._handleTouchEnd.bind(this)
|
||||
this._x = null
|
||||
this._y = null
|
||||
this._scrollTop = null
|
||||
this.css = this.parentNode.host.css
|
||||
}
|
||||
|
||||
_handleTouchStart(evt) {
|
||||
this._x = evt.touches[0].pageX
|
||||
this._y = evt.touches[0].pageY
|
||||
this._scrollTop = document.body.scrollTop
|
||||
|
||||
}
|
||||
|
||||
_handleTouchEnd(evt) {
|
||||
if (Math.abs(evt.changedTouches[0].pageX - this._x) < 30 && Math.abs(evt.changedTouches[0].pageY - this._y) < 30 && Math.abs(document.body.scrollTop - this._scrollTop) < 30) {
|
||||
this.props.onTap(evt)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const c = this.props.children[0]
|
||||
!c.attributes && (c.attributes = {})
|
||||
Object.assign(c.attributes, {
|
||||
onTouchStart: this._handleTouchStart,
|
||||
onTouchEnd: this._handleTouchEnd
|
||||
})
|
||||
return c
|
||||
}
|
||||
}
|
||||
|
||||
define("omi-tap", OmiTap)
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "omi-tap",
|
||||
"version": "2.0.1",
|
||||
"description": "Support tap event in your Omi project.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [
|
||||
"tap",
|
||||
"omi",
|
||||
"omi-tap"
|
||||
],
|
||||
"author": "dntzhang",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"omi": "latest"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,11 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
</head>
|
||||
<body style="height:1000px;">
|
||||
|
||||
<script src="b.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { render, WeElement, tag } from "../../src/omi"
|
||||
import "omi-tap"
|
||||
|
||||
@tag("my-app")
|
||||
class MyApp extends WeElement {
|
||||
onTap = () => {
|
||||
console.log('tap')
|
||||
}
|
||||
|
||||
css() {
|
||||
return `
|
||||
div{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: rgb(56,121,217);
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
line-height: 93px;
|
||||
}`
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<omi-tap onTap={this.onTap} >
|
||||
<div>Tap Me!</div>
|
||||
</omi-tap>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render(<my-app />, "body");
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
"store": "rollup -c config/rollup.example.js --watch",
|
||||
"render-array": "rollup -c config/rollup.example.js --watch",
|
||||
"css3transform": "rollup -c config/rollup.example.js --watch",
|
||||
"tap": "rollup -c config/rollup.example.js --watch",
|
||||
"simple": "rollup -c config/rollup.example.js --watch",
|
||||
"transpile:main": "rollup -c config/rollup.config.js",
|
||||
"transpile:esm": "rollup -c config/rollup.config.esm.js",
|
||||
|
|
@ -94,8 +95,11 @@
|
|||
"istanbul-instrumenter-loader": "^3.0.0",
|
||||
"jest": "^23.6.0",
|
||||
"jscodeshift": "^0.5.0",
|
||||
"mobx": "^4.5.1",
|
||||
"mocha": "^5.0.4",
|
||||
"npm-run-all": "^4.0.0",
|
||||
"omi-mobx": "^0.2.2",
|
||||
"omi-tap": "^2.0.1",
|
||||
"omi-transform": "^2.0.1",
|
||||
"rimraf": "^2.5.3",
|
||||
"rollup": "^0.57.1",
|
||||
|
|
@ -107,9 +111,7 @@
|
|||
"sinon-chai": "^3.0.0",
|
||||
"typescript": "^2.8.1",
|
||||
"uglify-js": "^2.7.5",
|
||||
"webpack": "^4.3.0",
|
||||
"mobx": "^4.5.1",
|
||||
"omi-mobx": "^0.2.2"
|
||||
"webpack": "^4.3.0"
|
||||
},
|
||||
"greenkeeper": {
|
||||
"ignore": [
|
||||
|
|
|
|||
Loading…
Reference in New Issue