omi-touch 2.0
This commit is contained in:
张磊
parent
8d94a7c7e2
commit
056770da65
|
|
@ -0,0 +1,59 @@
|
|||
# omi-finger
|
||||
|
||||
Support touch and gesture events in your Omi project.
|
||||
|
||||
[→ touch the mobile demo](https://tencent.github.io/omi/packages/omi-finger/examples/simple/)
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import { render, tag, WeElement } from 'omi'
|
||||
import 'omi-finger'
|
||||
|
||||
@tag('my-app')
|
||||
class MyApp extends WeElement {
|
||||
install() {
|
||||
this.data.wording = 'Tap or Swipe Me!'
|
||||
}
|
||||
|
||||
handleTap = (evt) => {
|
||||
this.data.wording += '\r\nTap'
|
||||
this.update()
|
||||
}
|
||||
|
||||
handleSwipe = (evt) => {
|
||||
this.data.wording += '\r\nSwipe-' + evt.direction
|
||||
this.update()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<omi-finger onTap={this.handleTap} abc={{a:1}} onSwipe={this.handleSwipe}>
|
||||
<div class="touchArea" >
|
||||
{this.data.wording}
|
||||
</div>
|
||||
</omi-finger>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
css() {
|
||||
return `.touchArea{
|
||||
background-color: green;
|
||||
width: 200px;
|
||||
min-height: 200px;
|
||||
text-align: center;
|
||||
color:white;
|
||||
height:auto;
|
||||
white-space: pre-line;
|
||||
}`
|
||||
}
|
||||
}
|
||||
|
||||
render(<my-app></my-app>, 'body')
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
MIT © dntzhang
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
|
||||
<title>omi-page</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="bundler.js"></script>
|
||||
|
||||
<a href="//github.com/Tencent/omi/tree/master/packages/omi-finger" target="_blank" style="position: absolute; right: 0; top: 0;">
|
||||
<img src="//alloyteam.github.io/github.png" alt="" />
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
import { render, define, WeElement } from 'omi'
|
||||
import '../../index'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
onChange = (value) => {
|
||||
console.log(value)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class="main">
|
||||
<omi-touch min={-1750} max={0} change={this.onChange}>
|
||||
|
||||
<div class="touchArea" >
|
||||
<ul >
|
||||
<li>Hello, Omi-Touch!</li>
|
||||
<li>AlloyTouch</li>
|
||||
<li>Omix</li>
|
||||
<li>AlloyFinger</li>
|
||||
<li>Omi</li>
|
||||
<li>AlloyGameEngine</li>
|
||||
<li>css3transform</li>
|
||||
<li>AlloyRender</li>
|
||||
<li>AlloyStick</li>
|
||||
<li>CodeStar</li>
|
||||
<li>AlloyDesigner</li>
|
||||
<li>JX</li>
|
||||
<li>TEditor</li>
|
||||
<li>JXAnimate</li>
|
||||
<li>Spirit</li>
|
||||
<li>AlloyImage</li>
|
||||
<li>ModJS</li>
|
||||
<li>Pretty row 16</li>
|
||||
<li>stepify</li>
|
||||
<li>AlloyTimer</li>
|
||||
<li>Alloy Desktop</li>
|
||||
<li>JX UI</li>
|
||||
<li>CodeTank</li>
|
||||
<li>iSpriter</li>
|
||||
<li>Rythem</li>
|
||||
<li>Go!Png </li>
|
||||
<li> row 1</li>
|
||||
<li> row 2</li>
|
||||
<li> row 3</li>
|
||||
<li>row 5</li>
|
||||
<li> row 5</li>
|
||||
<li> row 7</li>
|
||||
<li> row 8</li>
|
||||
<li> row 9</li>
|
||||
<li> row 11</li>
|
||||
<li> row 11</li>
|
||||
<li> row 12</li>
|
||||
<li> row 13</li>
|
||||
<li> row 14</li>
|
||||
<li> row 15</li>
|
||||
<li> row 16</li>
|
||||
<li> row 17</li>
|
||||
<li> row 18</li>
|
||||
<li> row 19</li>
|
||||
<li> row 20</li>
|
||||
<li> row 21</li>
|
||||
<li> row 22</li>
|
||||
<li> row 23</li>
|
||||
<li> row 24</li>
|
||||
<li style="border-bottom: none;"> row 25</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</omi-touch>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
css() {
|
||||
return `
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.main{
|
||||
width: 160px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(204, 204, 204);
|
||||
text-indent: 10px;
|
||||
margin: 100px auto;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0 10px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #fff;
|
||||
background-color: #fafafa;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.touchArea{
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
}`
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app></my-app>, 'body')
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { WeElement, define, getHost } from 'omi'
|
||||
import Transform from 'css3transform'
|
||||
import AlloyTouch from 'alloytouch'
|
||||
|
||||
class OmiTouch extends WeElement {
|
||||
install() {
|
||||
|
||||
this.css = getHost(this).css
|
||||
}
|
||||
|
||||
installed() {
|
||||
var target = this.host.firstChild;
|
||||
|
||||
Transform(target);
|
||||
|
||||
new AlloyTouch({
|
||||
touch: this.host,
|
||||
vertical: this.props.vertical === false ? false : true,
|
||||
target: target,
|
||||
property: this.props.property || "translateY",
|
||||
min: this.props.min,
|
||||
max: this.props.max,
|
||||
sensitivity: this.props.sensitivity,
|
||||
factor: this.props.factor,
|
||||
step: this.props.step,
|
||||
bindSelf: this.props.bindSelf,
|
||||
preventDefault: this.props.preventDefault === false ? false : true,
|
||||
change: this.props.change,
|
||||
touchStart: this.props.touchStart,
|
||||
touchMove: this.props.touchMove,
|
||||
touchEnd: this.props.touchEnd,
|
||||
tap: this.props.tap,
|
||||
pressMove: this.props.pressMove,
|
||||
animationEnd: this.props.animationEnd
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
render(){
|
||||
return this.props.children[0]
|
||||
}
|
||||
}
|
||||
|
||||
define('omi-touch', OmiTouch)
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
{
|
||||
"name": "omi-finger",
|
||||
"version": "2.0.0",
|
||||
"description": "Smooth scrolling, rotation, pull to refresh and any motion for the web.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"simple": "webpack -w"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/omi.git"
|
||||
},
|
||||
"keywords": [
|
||||
"omi-touch",
|
||||
"omi",
|
||||
"alloytouch",
|
||||
"touch",
|
||||
"scroll"
|
||||
],
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
"babel-plugin-transform-decorators-legacy": "^1.3.5",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-preset-omi": "^0.1.1",
|
||||
"esprima-fb": "^15001.1001.0-dev-harmony-fb",
|
||||
"webpack": "^3.4.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"omi": "latest",
|
||||
"css3transform": "^1.2.0",
|
||||
"alloytouch": "^0.2.5"
|
||||
},
|
||||
"author": "dntzhang <dntzhang@qq.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Tencent/omi/issues"
|
||||
},
|
||||
"homepage": "https://github.com/Tencent/omi"
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
|
||||
/**
|
||||
* Env
|
||||
* Get npm lifecycle event to identify the environment
|
||||
*/
|
||||
var ENV = process.env.npm_lifecycle_event;
|
||||
|
||||
var config = {
|
||||
entry: __dirname+'/examples/' + ENV + '/main.js',
|
||||
output: {
|
||||
// path: __dirname,
|
||||
path: __dirname+'/examples/' + ENV + '/',
|
||||
filename: 'bundler.js'
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
test: /\.js$/,
|
||||
query: {
|
||||
presets: ['env','omi'],
|
||||
plugins: [
|
||||
"transform-decorators-legacy",
|
||||
"transform-class-properties"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
],
|
||||
stats: {
|
||||
// Nice colored output
|
||||
colors: true
|
||||
},
|
||||
// Create Sourcemaps for the bundle
|
||||
// devtool: 'source-map',
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
Loading…
Reference in New Issue