omi v4.0.24 - tap event support

packages/omi/config/properties.json

@@ -1,6 +1,6 @@
 {
   "props": {
-    "cname": 29,
+    "cname": 33,
     "props": {
       "$_dirty": "__d",
       "$_disable": "__x",
@@ -29,7 +29,10 @@
       "$_proxifyObjectTreeRecursively": "A",
       "$_isInstalled": "B",
       "$_useId": "C",
-      "$_useMap": "D"
+      "$_useMap": "D",
+      "$___touchX": "F",
+      "$___touchY": "G",
+      "$___scrollTop": "H"
     }
   },
   "vars": {

packages/omi/dist/omi.dev.js

@@ -1,5 +1,5 @@
 /**
- * omi v4.0.23  http://omijs.org
+ * omi v4.0.24  http://omijs.org
  * Omi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript.
  * By dntzhang https://github.com/dntzhang
  * Github: https://github.com/Tencent/omi
@@ -279,9 +279,19 @@
       var useCapture = name !== (name = name.replace(/Capture$/, ''));
       name = name.toLowerCase().substring(2);
       if (value) {
-        if (!old) node.addEventListener(name, eventProxy, useCapture);
+        if (!old) {
+          node.addEventListener(name, eventProxy, useCapture);
+          if (name == 'tap') {
+            node.addEventListener('touchstart', touchStart, useCapture);
+            node.addEventListener('touchstart', touchEnd, useCapture);
+          }
+        }
       } else {
         node.removeEventListener(name, eventProxy, useCapture);
+        if (name == 'tap') {
+          node.removeEventListener('touchstart', touchStart, useCapture);
+          node.removeEventListener('touchstart', touchEnd, useCapture);
+        }
       }
   (node._listeners || (node._listeners = {}))[name] = value;
     } else if (name !== 'list' && name !== 'type' && !isSvg && name in node) {
@@ -317,6 +327,18 @@
     return this._listeners[e.type](options.event && options.event(e) || e);
   }
 
+  function touchStart(e) {
+    this.___touchX = e.touches[0].pageX;
+    this.___touchY = e.touches[0].pageY;
+    this.___scrollTop = document.body.scrollTop;
+  }
+
+  function touchEnd(e) {
+    if (Math.abs(e.changedTouches[0].pageX - this.___touchX) < 30 && Math.abs(e.changedTouches[0].pageY - this.___touchY) < 30 && Math.abs(document.body.scrollTop - this.___scrollTop) < 30) {
+      this.dispatchEvent(new CustomEvent('tap', { detail: e }));
+    }
+  }
+
   /** Diff recursion count, used to track the end of the diff cycle. */
   var diffLevel = 0;
 
@@ -1419,7 +1441,7 @@
   };
 
   options.root.Omi = omi;
-  options.root.Omi.version = '4.0.23';
+  options.root.Omi.version = '4.0.24';
 
   if (typeof module != 'undefined') module.exports = omi;else self.Omi = omi;
 }());

packages/omi/dist/omi.esm.js

@@ -1,5 +1,5 @@
 /**
- * omi v4.0.23  http://omijs.org
+ * omi v4.0.24  http://omijs.org
  * Omi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript.
  * By dntzhang https://github.com/dntzhang
  * Github: https://github.com/Tencent/omi
@@ -276,9 +276,19 @@ function setAccessor(node, name, old, value, isSvg) {
     var useCapture = name !== (name = name.replace(/Capture$/, ''));
     name = name.toLowerCase().substring(2);
     if (value) {
-      if (!old) node.addEventListener(name, eventProxy, useCapture);
+      if (!old) {
+        node.addEventListener(name, eventProxy, useCapture);
+        if (name == 'tap') {
+          node.addEventListener('touchstart', touchStart, useCapture);
+          node.addEventListener('touchstart', touchEnd, useCapture);
+        }
+      }
     } else {
       node.removeEventListener(name, eventProxy, useCapture);
+      if (name == 'tap') {
+        node.removeEventListener('touchstart', touchStart, useCapture);
+        node.removeEventListener('touchstart', touchEnd, useCapture);
+      }
     }
 (node._listeners || (node._listeners = {}))[name] = value;
   } else if (name !== 'list' && name !== 'type' && !isSvg && name in node) {
@@ -314,6 +324,18 @@ function eventProxy(e) {
   return this._listeners[e.type](options.event && options.event(e) || e);
 }
 
+function touchStart(e) {
+  this.___touchX = e.touches[0].pageX;
+  this.___touchY = e.touches[0].pageY;
+  this.___scrollTop = document.body.scrollTop;
+}
+
+function touchEnd(e) {
+  if (Math.abs(e.changedTouches[0].pageX - this.___touchX) < 30 && Math.abs(e.changedTouches[0].pageY - this.___touchY) < 30 && Math.abs(document.body.scrollTop - this.___scrollTop) < 30) {
+    this.dispatchEvent(new CustomEvent('tap', { detail: e }));
+  }
+}
+
 /** Diff recursion count, used to track the end of the diff cycle. */
 var diffLevel = 0;
 
@@ -1416,7 +1438,7 @@ var omi = {
 };
 
 options.root.Omi = omi;
-options.root.Omi.version = '4.0.23';
+options.root.Omi.version = '4.0.24';
 
 export default omi;
 export { tag, WeElement, Component, render, h, h as createElement, options, define, observe, cloneElement, getHost };

packages/omi/dist/omi.js

@@ -83,8 +83,20 @@
             var useCapture = name !== (name = name.replace(/Capture$/, ''));
             name = name.toLowerCase().substring(2);
             if (value) {
-                if (!old) node.addEventListener(name, eventProxy, useCapture);
-            } else node.removeEventListener(name, eventProxy, useCapture);
+                if (!old) {
+                    node.addEventListener(name, eventProxy, useCapture);
+                    if ('tap' == name) {
+                        node.addEventListener('touchstart', touchStart, useCapture);
+                        node.addEventListener('touchstart', touchEnd, useCapture);
+                    }
+                }
+            } else {
+                node.removeEventListener(name, eventProxy, useCapture);
+                if ('tap' == name) {
+                    node.removeEventListener('touchstart', touchStart, useCapture);
+                    node.removeEventListener('touchstart', touchEnd, useCapture);
+                }
+            }
             (node.__l || (node.__l = {}))[name] = value;
         } else if ('list' !== name && 'type' !== name && !isSvg && name in node) {
             try {
@@ -99,6 +111,16 @@
     function eventProxy(e) {
         return this.__l[e.type](options.event && options.event(e) || e);
     }
+    function touchStart(e) {
+        this.F = e.touches[0].pageX;
+        this.G = e.touches[0].pageY;
+        this.H = document.body.scrollTop;
+    }
+    function touchEnd(e) {
+        if (Math.abs(e.changedTouches[0].pageX - this.F) < 30 && Math.abs(e.changedTouches[0].pageY - this.G) < 30 && Math.abs(document.body.scrollTop - this.H) < 30) this.dispatchEvent(new CustomEvent('tap', {
+            detail: e
+        }));
+    }
     function diff(dom, vnode, context, mountAll, parent, componentRoot) {
         var ret;
         if (!diffLevel++) {
@@ -780,7 +802,7 @@
         getHost: getHost
     };
     options.root.Omi = omi;
-    options.root.Omi.version = '4.0.23';
+    options.root.Omi.version = '4.0.24';
     if ('undefined' != typeof module) module.exports = omi; else self.Omi = omi;
 }();
 //# sourceMappingURL=omi.js.map

packages/omi/examples/tap2/hello-element.js

@@ -0,0 +1,33 @@
+import { define, WeElement } from '../../src/omi'
+
+define('hello-element', class extends WeElement {
+  static defaultProps = {
+    msg: '',
+    propFromParent: '123111',
+    testDefault: 'abc'
+  }
+
+  onClick = evt => {
+    // trigger CustomEvent
+    this.fire('abc', { name: 'dntzhang', age: 12 })
+    evt.stopPropagation()
+  }
+
+  css() {
+    return `
+        div {
+          color: red;
+          cursor: pointer;
+        }`
+  }
+
+  render(props) {
+    return (
+      <div onClick={this.onClick}>
+        Hello {props.msg} {props.propFromParent}
+        <div>Click Me!</div>
+        <div>{props.testDefault}</div>
+      </div>
+    )
+  }
+})

packages/omi/examples/tap2/index.html

@@ -0,0 +1,10 @@
+<html>
+	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
+<head></head>
+
+<body>
+
+	<script src="b.js"></script>
+</body>
+
+</html>

packages/omi/examples/tap2/main.js

@@ -0,0 +1,48 @@
+import { define, render, WeElement } from '../../src/omi'
+import './hello-element'
+
+define('my-app', class extends WeElement {
+  data = { abc: 'abc', passToChild: 123 }
+
+  onAbc = evt => {
+    this.data.abc = ' by ' + evt.detail.name
+    this.data.passToChild = 1234
+    this.aa = !this.aa
+    this.update()
+  }
+
+  css() {
+    return `
+         div{
+             color: green;
+         }`
+  }
+  onTap = evt => {
+    console.log('tap', evt)
+    this.update()
+  }
+
+  render(props, data) {
+    return (
+      <div>
+        {this.aa ? (
+          <div onTap={this.onTap}>
+            Hello {props.name} {data.abc}
+          </div>
+        ) : (
+          <div>
+            Hello {props.name} {data.abc}
+            22
+          </div>
+        )}
+        <hello-element
+          onAbc={this.onAbc}
+          prop-from-parent={data.passToChild}
+          msg="WeElement"
+        />
+      </div>
+    )
+  }
+})
+
+render(<my-app name="Omi v4.0" />, 'body')

packages/omi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omi",
-  "version": "4.0.23",
+  "version": "4.0.24",
   "description": "Next generation web framework.",
   "main": "dist/omi.js",
   "jsnext:main": "dist/omi.esm.js",
@@ -26,6 +26,7 @@
     "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",
+    "tap2": "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",

packages/omi/src/dom/index.js

@@ -94,9 +94,19 @@ export function setAccessor(node, name, old, value, isSvg) {
     let useCapture = name !== (name = name.replace(/Capture$/, ''))
     name = name.toLowerCase().substring(2)
     if (value) {
-      if (!old) node.addEventListener(name, eventProxy, useCapture)
+      if (!old) {
+        node.addEventListener(name, eventProxy, useCapture)
+        if (name == 'tap') {
+          node.addEventListener('touchstart', touchStart, useCapture)
+          node.addEventListener('touchstart', touchEnd, useCapture)
+        }
+      }
     } else {
       node.removeEventListener(name, eventProxy, useCapture)
+      if (name == 'tap') {
+        node.removeEventListener('touchstart', touchStart, useCapture)
+        node.removeEventListener('touchstart', touchEnd, useCapture)
+      }
     }
     ;(node._listeners || (node._listeners = {}))[name] = value
   } else if (name !== 'list' && name !== 'type' && !isSvg && name in node) {
@@ -141,3 +151,19 @@ export function setAccessor(node, name, old, value, isSvg) {
 function eventProxy(e) {
   return this._listeners[e.type]((options.event && options.event(e)) || e)
 }
+
+function touchStart(e) {
+  this.___touchX = e.touches[0].pageX
+  this.___touchY = e.touches[0].pageY
+  this.___scrollTop = document.body.scrollTop
+}
+
+function touchEnd(e) {
+  if (
+    Math.abs(e.changedTouches[0].pageX - this.___touchX) < 30 &&
+    Math.abs(e.changedTouches[0].pageY - this.___touchY) < 30 &&
+    Math.abs(document.body.scrollTop - this.___scrollTop) < 30
+  ) {
+    this.dispatchEvent(new CustomEvent('tap', { detail: e }))
+  }
+}

packages/omi/src/omi.js

@@ -25,7 +25,7 @@ const omi = {
 }
 
 options.root.Omi = omi
-options.root.Omi.version = '4.0.23'
+options.root.Omi.version = '4.0.24'
 
 export default omi