home1022
@@ -0,0 +1,224 @@
|
||||
'use strict'
|
||||
|
||||
// 等待初始化完毕
|
||||
document.addEventListener('UniAppJSBridgeReady', () => {
|
||||
document.body.onclick = function () {
|
||||
return uni.postMessage({
|
||||
data: {
|
||||
action: 'onClick'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'onJSBridgeReady'
|
||||
}
|
||||
})
|
||||
})
|
||||
let options
|
||||
let medias = []
|
||||
/**
|
||||
* @description 获取标签的所有属性
|
||||
* @param {Element} ele
|
||||
*/
|
||||
|
||||
function getAttrs(ele) {
|
||||
const attrs = Object.create(null)
|
||||
|
||||
for (let i = ele.attributes.length; i--;) {
|
||||
attrs[ele.attributes[i].name] = ele.attributes[i].value
|
||||
}
|
||||
|
||||
return attrs
|
||||
}
|
||||
/**
|
||||
* @description 图片加载出错
|
||||
*/
|
||||
|
||||
function onImgError() {
|
||||
if (options[1]) {
|
||||
this.src = options[1]
|
||||
this.onerror = null
|
||||
} // 取消监听点击
|
||||
|
||||
this.onclick = null
|
||||
this.ontouchstart = null
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'onError',
|
||||
source: 'img',
|
||||
attrs: getAttrs(this)
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* @description 创建 dom 结构
|
||||
* @param {object[]} nodes 节点数组
|
||||
* @param {Element} parent 父节点
|
||||
* @param {string} namespace 命名空间
|
||||
*/
|
||||
|
||||
function createDom(nodes, parent, namespace) {
|
||||
const _loop = function _loop(i) {
|
||||
const node = nodes[i]
|
||||
let ele = void 0
|
||||
|
||||
if (!node.type || node.type == 'node') {
|
||||
let { name } = node // svg 需要设置 namespace
|
||||
|
||||
if (name == 'svg') namespace = 'http://www.w3.org/2000/svg'
|
||||
if (name == 'html' || name == 'body') name = 'div' // 创建标签
|
||||
|
||||
if (!namespace) ele = document.createElement(name); else ele = document.createElementNS(namespace, name) // 设置属性
|
||||
|
||||
for (const item in node.attrs) {
|
||||
ele.setAttribute(item, node.attrs[item])
|
||||
} // 递归创建子节点
|
||||
|
||||
if (node.children) createDom(node.children, ele, namespace) // 处理图片
|
||||
|
||||
if (name == 'img') {
|
||||
if (!ele.src && ele.getAttribute('data-src')) ele.src = ele.getAttribute('data-src')
|
||||
|
||||
if (!node.attrs.ignore) {
|
||||
// 监听图片点击事件
|
||||
ele.onclick = function (e) {
|
||||
e.stopPropagation()
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'onImgTap',
|
||||
attrs: getAttrs(this)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (options[2]) {
|
||||
image = new Image()
|
||||
image.src = ele.src
|
||||
ele.src = options[2]
|
||||
|
||||
image.onload = function () {
|
||||
ele.src = this.src
|
||||
}
|
||||
|
||||
image.onerror = function () {
|
||||
ele.onerror()
|
||||
}
|
||||
}
|
||||
|
||||
ele.onerror = onImgError
|
||||
} // 处理链接
|
||||
else if (name == 'a') {
|
||||
ele.addEventListener('click', function (e) {
|
||||
e.stopPropagation()
|
||||
e.preventDefault() // 阻止默认跳转
|
||||
|
||||
const href = this.getAttribute('href')
|
||||
let offset
|
||||
if (href && href[0] == '#') offset = (document.getElementById(href.substr(1)) || {}).offsetTop
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'onLinkTap',
|
||||
attrs: getAttrs(this),
|
||||
offset
|
||||
}
|
||||
})
|
||||
}, true)
|
||||
} // 处理音视频
|
||||
else if (name == 'video' || name == 'audio') {
|
||||
medias.push(ele)
|
||||
|
||||
if (!node.attrs.autoplay) {
|
||||
if (!node.attrs.controls) ele.setAttribute('controls', 'true') // 空白图占位
|
||||
|
||||
if (!node.attrs.poster) ele.setAttribute('poster', "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'/>")
|
||||
}
|
||||
|
||||
if (options[3]) {
|
||||
ele.onplay = function () {
|
||||
for (let _i = 0; _i < medias.length; _i++) {
|
||||
if (medias[_i] != this) medias[_i].pause()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ele.onerror = function () {
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'onError',
|
||||
source: name,
|
||||
attrs: getAttrs(this)
|
||||
}
|
||||
})
|
||||
}
|
||||
} // 处理表格
|
||||
else if (name == 'table' && options[4] && !ele.style.cssText.includes('inline')) {
|
||||
const div = document.createElement('div')
|
||||
div.style.overflow = 'auto'
|
||||
div.appendChild(ele)
|
||||
ele = div
|
||||
} else if (name == 'svg') namespace = void 0
|
||||
} else ele = document.createTextNode(node.text.replace(/&/g, '&'))
|
||||
|
||||
parent.appendChild(ele)
|
||||
}
|
||||
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
var image
|
||||
|
||||
_loop(i)
|
||||
}
|
||||
} // 设置 html 内容
|
||||
|
||||
window.setContent = function (nodes, opts, append) {
|
||||
const ele = document.getElementById('content') // 背景颜色
|
||||
|
||||
if (opts[0]) document.body.bgColor = opts[0] // 长按复制
|
||||
|
||||
if (!opts[5]) ele.style.userSelect = 'none'
|
||||
|
||||
if (!append) {
|
||||
ele.innerHTML = '' // 不追加则先清空
|
||||
|
||||
medias = []
|
||||
}
|
||||
|
||||
options = opts
|
||||
const fragment = document.createDocumentFragment()
|
||||
createDom(nodes, fragment)
|
||||
ele.appendChild(fragment) // 触发事件
|
||||
|
||||
let height = ele.scrollHeight
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'onLoad',
|
||||
height
|
||||
}
|
||||
})
|
||||
clearInterval(window.timer)
|
||||
let ready = false
|
||||
window.timer = setInterval(() => {
|
||||
if (ele.scrollHeight != height) {
|
||||
height = ele.scrollHeight
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'onHeightChange',
|
||||
height
|
||||
}
|
||||
})
|
||||
} else if (!ready) {
|
||||
ready = true
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'onReady'
|
||||
}
|
||||
})
|
||||
}
|
||||
}, 350)
|
||||
} // 回收计时器
|
||||
|
||||
window.onunload = function () {
|
||||
clearInterval(window.timer)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
!(function (e, n) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = n() : typeof define === 'function' && define.amd ? define(n) : (e = e || self).uni = n() }(this, (() => {
|
||||
'use strict'
|
||||
|
||||
try { const e = {}; Object.defineProperty(e, 'passive', { get() { !0 } }), window.addEventListener('test-passive', null, e) } catch (e) {} const n = Object.prototype.hasOwnProperty; function t(e, t) { return n.call(e, t) } const i = []; const a = function (e, n) { const t = { options: { timestamp: +new Date() }, name: e, arg: n }; if (window.__dcloud_weex_postMessage || window.__dcloud_weex_) { if (e === 'postMessage') { const a = { data: [n] }; return window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessage(a) : window.__dcloud_weex_.postMessage(JSON.stringify(a)) } const o = { type: 'WEB_INVOKE_APPSERVICE', args: { data: t, webviewIds: i } }; window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessageToService(o) : window.__dcloud_weex_.postMessageToService(JSON.stringify(o)) } if (!window.plus) return window.parent.postMessage({ type: 'WEB_INVOKE_APPSERVICE', data: t, pageId: '' }, '*'); if (i.length === 0) { const r = plus.webview.currentWebview(); if (!r) throw new Error('plus.webview.currentWebview() is undefined'); const d = r.parent(); let s = ''; s = d ? d.id : r.id, i.push(s) } if (plus.webview.getWebviewById('__uniapp__service'))plus.webview.postMessageToUniNView({ type: 'WEB_INVOKE_APPSERVICE', args: { data: t, webviewIds: i } }, '__uniapp__service'); else { const w = JSON.stringify(t); plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat('WEB_INVOKE_APPSERVICE', '",').concat(w, ',').concat(JSON.stringify(i), ');')) } }; const o = {
|
||||
navigateTo() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.url; a('navigateTo', { url: encodeURI(n) }) }, navigateBack() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.delta; a('navigateBack', { delta: parseInt(n) || 1 }) }, switchTab() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.url; a('switchTab', { url: encodeURI(n) }) }, reLaunch() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.url; a('reLaunch', { url: encodeURI(n) }) }, redirectTo() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; const n = e.url; a('redirectTo', { url: encodeURI(n) }) }, getEnv(e) { window.plus ? e({ plus: !0 }) : e({ h5: !0 }) }, postMessage() { const e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; a('postMessage', e.data || {}) }
|
||||
}; const r = /uni-app/i.test(navigator.userAgent); const d = /Html5Plus/i.test(navigator.userAgent); const s = /complete|loaded|interactive/; const w = window.my && navigator.userAgent.indexOf('AlipayClient') > -1; const u = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent); const c = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent); const g = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent); const v = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i.test(navigator.userAgent); const p = window.qa && /quickapp/i.test(navigator.userAgent); for (var l, _ = function () { window.UniAppJSBridge = !0, document.dispatchEvent(new CustomEvent('UniAppJSBridgeReady', { bubbles: !0, cancelable: !0 })) }, f = [function (e) { if (r || d) return window.__dcloud_weex_postMessage || window.__dcloud_weex_ ? document.addEventListener('DOMContentLoaded', e) : window.plus && s.test(document.readyState) ? setTimeout(e, 0) : document.addEventListener('plusready', e), o }, function (e) { if (v) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('WeixinJSBridgeReady', e), window.wx.miniProgram }, function (e) { if (c) return window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('QQJSBridgeReady', e), window.qq.miniProgram }, function (e) {
|
||||
if (w) {
|
||||
document.addEventListener('DOMContentLoaded', e); const n = window.my; return {
|
||||
navigateTo: n.navigateTo, navigateBack: n.navigateBack, switchTab: n.switchTab, reLaunch: n.reLaunch, redirectTo: n.redirectTo, postMessage: n.postMessage, getEnv: n.getEnv
|
||||
}
|
||||
}
|
||||
}, function (e) { if (u) return document.addEventListener('DOMContentLoaded', e), window.swan.webView }, function (e) { if (g) return document.addEventListener('DOMContentLoaded', e), window.tt.miniProgram }, function (e) {
|
||||
if (p) {
|
||||
window.QaJSBridge && window.QaJSBridge.invoke ? setTimeout(e, 0) : document.addEventListener('QaJSBridgeReady', e); const n = window.qa; return {
|
||||
navigateTo: n.navigateTo, navigateBack: n.navigateBack, switchTab: n.switchTab, reLaunch: n.reLaunch, redirectTo: n.redirectTo, postMessage: n.postMessage, getEnv: n.getEnv
|
||||
}
|
||||
}
|
||||
}, function (e) { return document.addEventListener('DOMContentLoaded', e), o }], m = 0; m < f.length && !(l = f[m](_)); m++);l || (l = {}); const E = typeof uni !== 'undefined' ? uni : {}; if (!E.navigateTo) for (const b in l)t(l, b) && (E[b] = l[b]); return E.webView = l, E
|
||||
})))
|
||||
@@ -0,0 +1 @@
|
||||
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><style>body,html{width:100%;height:100%;overflow:hidden}body{margin:0}video{width:300px;height:225px}img{max-width:100%;-webkit-touch-callout:none}@keyframes show{0%{opacity:0}100%{opacity:1}}</style></head><body><div id="content"></div><script type="text/javascript" src="./js/uni.webview.min.js"></script><script type="text/javascript" src="./js/handler.js"></script></body>
|
||||
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
|
||||
<circle cx="32" cy="32" r="30" fill="#E3F2FD"/>
|
||||
<circle cx="32" cy="22" r="10" fill="#2196F3"/>
|
||||
<path d="M10,48Q20,58 32,58Q44,58 54,48L54,62H10L10,48Z" fill="#2196F3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 266 B |
@@ -0,0 +1,363 @@
|
||||
(function (window, document, exportName, undefined) {
|
||||
"use strict";
|
||||
|
||||
var isMultiTouch = false;
|
||||
var multiTouchStartPos;
|
||||
var eventTarget;
|
||||
var touchElements = {};
|
||||
|
||||
// polyfills
|
||||
if (!document.createTouch) {
|
||||
document.createTouch = function (view, target, identifier, pageX, pageY, screenX, screenY, clientX, clientY) {
|
||||
// auto set
|
||||
if (clientX == undefined || clientY == undefined) {
|
||||
clientX = pageX - window.pageXOffset;
|
||||
clientY = pageY - window.pageYOffset;
|
||||
}
|
||||
|
||||
return new Touch(target, identifier, {
|
||||
pageX: pageX,
|
||||
pageY: pageY,
|
||||
screenX: screenX,
|
||||
screenY: screenY,
|
||||
clientX: clientX,
|
||||
clientY: clientY
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
if (!document.createTouchList) {
|
||||
document.createTouchList = function () {
|
||||
var touchList = new TouchList();
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
touchList[i] = arguments[i];
|
||||
}
|
||||
touchList.length = arguments.length;
|
||||
return touchList;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* create an touch point
|
||||
* @constructor
|
||||
* @param target
|
||||
* @param identifier
|
||||
* @param pos
|
||||
* @param deltaX
|
||||
* @param deltaY
|
||||
* @returns {Object} touchPoint
|
||||
*/
|
||||
function Touch(target, identifier, pos, deltaX, deltaY) {
|
||||
deltaX = deltaX || 0;
|
||||
deltaY = deltaY || 0;
|
||||
|
||||
this.identifier = identifier;
|
||||
this.target = target;
|
||||
this.clientX = pos.clientX + deltaX;
|
||||
this.clientY = pos.clientY + deltaY;
|
||||
this.screenX = pos.screenX + deltaX;
|
||||
this.screenY = pos.screenY + deltaY;
|
||||
this.pageX = pos.pageX + deltaX;
|
||||
this.pageY = pos.pageY + deltaY;
|
||||
}
|
||||
|
||||
/**
|
||||
* create empty touchlist with the methods
|
||||
* @constructor
|
||||
* @returns touchList
|
||||
*/
|
||||
function TouchList() {
|
||||
var touchList = [];
|
||||
|
||||
touchList.item = function (index) {
|
||||
return this[index] || null;
|
||||
};
|
||||
|
||||
// specified by Mozilla
|
||||
touchList.identifiedTouch = function (id) {
|
||||
return this[id + 1] || null;
|
||||
};
|
||||
|
||||
return touchList;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Simple trick to fake touch event support
|
||||
* this is enough for most libraries like Modernizr and Hammer
|
||||
*/
|
||||
function fakeTouchSupport() {
|
||||
var objs = [window, document.documentElement];
|
||||
var props = ['ontouchstart', 'ontouchmove', 'ontouchcancel', 'ontouchend'];
|
||||
|
||||
for (var o = 0; o < objs.length; o++) {
|
||||
for (var p = 0; p < props.length; p++) {
|
||||
if (objs[o] && objs[o][props[p]] == undefined) {
|
||||
objs[o][props[p]] = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* we don't have to emulate on a touch device
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function hasTouchSupport() {
|
||||
return ("ontouchstart" in window) || // touch events
|
||||
(window.Modernizr && window.Modernizr.touch) || // modernizr
|
||||
(navigator.msMaxTouchPoints || navigator.maxTouchPoints) > 2; // pointer events
|
||||
}
|
||||
|
||||
/**
|
||||
* disable mouseevents on the page
|
||||
* @param ev
|
||||
*/
|
||||
function preventMouseEvents(ev) {
|
||||
// 注释启用默认事件
|
||||
// ev.preventDefault();
|
||||
// ev.stopPropagation();
|
||||
}
|
||||
|
||||
/**
|
||||
* only trigger touches when the left mousebutton has been pressed
|
||||
* @param touchType
|
||||
* @returns {Function}
|
||||
*/
|
||||
function onMouse(touchType) {
|
||||
return function (ev) {
|
||||
// prevent mouse events
|
||||
preventMouseEvents(ev);
|
||||
|
||||
if (ev.which !== 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// The EventTarget on which the touch point started when it was first placed on the surface,
|
||||
// even if the touch point has since moved outside the interactive area of that element.
|
||||
// also, when the target doesnt exist anymore, we update it
|
||||
if (ev.type == 'mousedown' || !eventTarget || (eventTarget && !eventTarget.dispatchEvent)) {
|
||||
eventTarget = ev.target;
|
||||
}
|
||||
|
||||
// shiftKey has been lost, so trigger a touchend
|
||||
if (isMultiTouch && !ev.shiftKey) {
|
||||
triggerTouch('touchend', ev);
|
||||
isMultiTouch = false;
|
||||
}
|
||||
|
||||
triggerTouch(touchType, ev);
|
||||
|
||||
// we're entering the multi-touch mode!
|
||||
if (!isMultiTouch && ev.shiftKey) {
|
||||
isMultiTouch = true;
|
||||
multiTouchStartPos = {
|
||||
pageX: ev.pageX,
|
||||
pageY: ev.pageY,
|
||||
clientX: ev.clientX,
|
||||
clientY: ev.clientY,
|
||||
screenX: ev.screenX,
|
||||
screenY: ev.screenY
|
||||
};
|
||||
triggerTouch('touchstart', ev);
|
||||
}
|
||||
|
||||
// reset
|
||||
if (ev.type == 'mouseup') {
|
||||
multiTouchStartPos = null;
|
||||
isMultiTouch = false;
|
||||
eventTarget = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* trigger a touch event
|
||||
* @param eventName
|
||||
* @param mouseEv
|
||||
*/
|
||||
function triggerTouch(eventName, mouseEv) {
|
||||
var touchEvent = document.createEvent('Event');
|
||||
touchEvent.initEvent(eventName, true, true);
|
||||
|
||||
touchEvent.altKey = mouseEv.altKey;
|
||||
touchEvent.ctrlKey = mouseEv.ctrlKey;
|
||||
touchEvent.metaKey = mouseEv.metaKey;
|
||||
touchEvent.shiftKey = mouseEv.shiftKey;
|
||||
|
||||
touchEvent.touches = getActiveTouches(mouseEv, eventName);
|
||||
touchEvent.targetTouches = getActiveTouches(mouseEv, eventName);
|
||||
touchEvent.changedTouches = getChangedTouches(mouseEv, eventName);
|
||||
|
||||
eventTarget.dispatchEvent(touchEvent);
|
||||
}
|
||||
|
||||
/**
|
||||
* create a touchList based on the mouse event
|
||||
* @param mouseEv
|
||||
* @returns {TouchList}
|
||||
*/
|
||||
function createTouchList(mouseEv) {
|
||||
var touchList = new TouchList();
|
||||
|
||||
if (isMultiTouch) {
|
||||
var f = TouchEmulator.multiTouchOffset;
|
||||
var deltaX = multiTouchStartPos.pageX - mouseEv.pageX;
|
||||
var deltaY = multiTouchStartPos.pageY - mouseEv.pageY;
|
||||
|
||||
touchList.push(new Touch(eventTarget, 1, multiTouchStartPos, (deltaX * -1) - f, (deltaY * -1) + f));
|
||||
touchList.push(new Touch(eventTarget, 2, multiTouchStartPos, deltaX + f, deltaY - f));
|
||||
} else {
|
||||
touchList.push(new Touch(eventTarget, 1, mouseEv, 0, 0));
|
||||
}
|
||||
|
||||
return touchList;
|
||||
}
|
||||
|
||||
/**
|
||||
* receive all active touches
|
||||
* @param mouseEv
|
||||
* @returns {TouchList}
|
||||
*/
|
||||
function getActiveTouches(mouseEv, eventName) {
|
||||
// empty list
|
||||
if (mouseEv.type == 'mouseup') {
|
||||
return new TouchList();
|
||||
}
|
||||
|
||||
var touchList = createTouchList(mouseEv);
|
||||
if (isMultiTouch && mouseEv.type != 'mouseup' && eventName == 'touchend') {
|
||||
touchList.splice(1, 1);
|
||||
}
|
||||
return touchList;
|
||||
}
|
||||
|
||||
/**
|
||||
* receive a filtered set of touches with only the changed pointers
|
||||
* @param mouseEv
|
||||
* @param eventName
|
||||
* @returns {TouchList}
|
||||
*/
|
||||
function getChangedTouches(mouseEv, eventName) {
|
||||
var touchList = createTouchList(mouseEv);
|
||||
|
||||
// we only want to return the added/removed item on multitouch
|
||||
// which is the second pointer, so remove the first pointer from the touchList
|
||||
//
|
||||
// but when the mouseEv.type is mouseup, we want to send all touches because then
|
||||
// no new input will be possible
|
||||
if (isMultiTouch && mouseEv.type != 'mouseup' &&
|
||||
(eventName == 'touchstart' || eventName == 'touchend')) {
|
||||
touchList.splice(0, 1);
|
||||
}
|
||||
|
||||
return touchList;
|
||||
}
|
||||
|
||||
/**
|
||||
* show the touchpoints on the screen
|
||||
*/
|
||||
function showTouches(ev) {
|
||||
var touch, i, el, styles;
|
||||
|
||||
// first all visible touches
|
||||
for (i = 0; i < ev.touches.length; i++) {
|
||||
touch = ev.touches[i];
|
||||
el = touchElements[touch.identifier];
|
||||
if (!el) {
|
||||
el = touchElements[touch.identifier] = document.createElement("div");
|
||||
document.body.appendChild(el);
|
||||
}
|
||||
|
||||
styles = TouchEmulator.template(touch);
|
||||
for (var prop in styles) {
|
||||
el.style[prop] = styles[prop];
|
||||
}
|
||||
}
|
||||
|
||||
// remove all ended touches
|
||||
if (ev.type == 'touchend' || ev.type == 'touchcancel') {
|
||||
for (i = 0; i < ev.changedTouches.length; i++) {
|
||||
touch = ev.changedTouches[i];
|
||||
el = touchElements[touch.identifier];
|
||||
if (el) {
|
||||
el.parentNode.removeChild(el);
|
||||
delete touchElements[touch.identifier];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TouchEmulator initializer
|
||||
*/
|
||||
function TouchEmulator() {
|
||||
if (hasTouchSupport()) {
|
||||
return;
|
||||
}
|
||||
|
||||
fakeTouchSupport();
|
||||
|
||||
window.addEventListener("mousedown", onMouse('touchstart'), true);
|
||||
window.addEventListener("mousemove", onMouse('touchmove'), true);
|
||||
window.addEventListener("mouseup", onMouse('touchend'), true);
|
||||
|
||||
window.addEventListener("mouseenter", preventMouseEvents, true);
|
||||
window.addEventListener("mouseleave", preventMouseEvents, true);
|
||||
window.addEventListener("mouseout", preventMouseEvents, true);
|
||||
window.addEventListener("mouseover", preventMouseEvents, true);
|
||||
|
||||
// it uses itself!
|
||||
window.addEventListener("touchstart", showTouches, true);
|
||||
window.addEventListener("touchmove", showTouches, true);
|
||||
window.addEventListener("touchend", showTouches, true);
|
||||
window.addEventListener("touchcancel", showTouches, true);
|
||||
}
|
||||
|
||||
// start distance when entering the multitouch mode
|
||||
TouchEmulator.multiTouchOffset = 75;
|
||||
|
||||
/**
|
||||
* css template for the touch rendering
|
||||
* @param touch
|
||||
* @returns object
|
||||
*/
|
||||
TouchEmulator.template = function (touch) {
|
||||
var size = 0;
|
||||
var transform = 'translate(' + (touch.clientX - (size / 2)) + 'px, ' + (touch.clientY - (size / 2)) + 'px)';
|
||||
return {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
top: 0,
|
||||
background: '#fff',
|
||||
border: 'solid 1px #999',
|
||||
opacity: .6,
|
||||
borderRadius: '100%',
|
||||
height: size + 'px',
|
||||
width: size + 'px',
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
display: 'block',
|
||||
overflow: 'hidden',
|
||||
pointerEvents: 'none',
|
||||
webkitUserSelect: 'none',
|
||||
mozUserSelect: 'none',
|
||||
userSelect: 'none',
|
||||
webkitTransform: transform,
|
||||
mozTransform: transform,
|
||||
transform: transform,
|
||||
zIndex: 100
|
||||
}
|
||||
};
|
||||
|
||||
// export
|
||||
if (typeof define == "function" && define.amd) {
|
||||
define(function () {
|
||||
return TouchEmulator;
|
||||
});
|
||||
} else if (typeof module != "undefined" && module.exports) {
|
||||
module.exports = TouchEmulator;
|
||||
} else {
|
||||
window[exportName] = TouchEmulator;
|
||||
}
|
||||
})(window, document, "TouchEmulator");
|
||||
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
|
||||
<circle cx="32" cy="32" r="30" fill="#F3E5F5"/>
|
||||
<circle cx="32" cy="20" r="12" fill="#9C27B0"/>
|
||||
<path d="M10,45Q20,56 32,56Q44,56 54,45L54,62H10L10,45Z" fill="#9C27B0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 266 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
|
||||
<rect width="120" height="120" rx="20" fill="#007AFF"/>
|
||||
<path d="M30,40H90v40H30z" fill="white"/>
|
||||
<circle cx="50" cy="60" r="12" fill="#007AFF"/>
|
||||
<rect x="70" y="50" width="20" height="20" fill="#007AFF" rx="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 315 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
|
||||
<path fill="#007AFF" d="M24,4L4,16v18h8v-8h8v8h8v-8h8v8h8V16L24,4z M22,36h4v-4h-4V36z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 181 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
|
||||
<path fill="#333" d="M24,4L4,16v18h8v-8h8v8h8v-8h8v8h8V16L24,4z M22,36h4v-4h-4V36z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 178 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
|
||||
<circle fill="#007AFF" cx="24" cy="16" r="8"/>
|
||||
<path fill="#007AFF" d="M36,38H12c-2.21,0-4-1.79-4-4v-6c0-2.21,1.79-4,4-4h24c2.21,0,4,1.79,4,4v6C40,36.21,38.21,38,36,38z M12,28c-1.1,0-2,0.9-2,2v6c0,1.1,0.9,2,2,2h24c1.1,0,2-0.9,2-2v-6c0-1.1-0.9-2-2-2H12z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 350 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
|
||||
<circle fill="#333" cx="24" cy="16" r="8"/>
|
||||
<path fill="#333" d="M36,38H12c-2.21,0-4-1.79-4-4v-6c0-2.21,1.79-4,4-4h24c2.21,0,4,1.79,4,4v6C40,36.21,38.21,38,36,38z M12,28c-1.1,0-2,0.9-2,2v6c0,1.1,0.9,2,2,2h24c1.1,0,2-0.9,2-2v-6c0-1.1-0.9-2-2-2H12z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 344 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
|
||||
<path fill="#007AFF" d="M36,4H12C8.686,4,6,6.686,6,10v30c0,2.21,1.79,4,4,4h24c2.21,0,4-1.79,4-4V10C42,6.686,39.314,4,36,4z M36,38H12V10h24V38z"/>
|
||||
<path fill="#007AFF" d="M18,18h12v4H18V18z M18,26h8v4h-8V26z"/>
|
||||
<circle fill="#007AFF" cx="16" cy="18" r="3"/>
|
||||
<circle fill="#007AFF" cx="16" cy="26" r="3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 402 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
|
||||
<path fill="#333" d="M36,4H12C8.686,4,6,6.686,6,10v30c0,2.21,1.79,4,4,4h24c2.21,0,4-1.79,4-4V10C42,6.686,39.314,4,36,4z M36,38H12V10h24V38z"/>
|
||||
<path fill="#333" d="M18,18h12v4H18V18z M18,26h8v4h-8V26z"/>
|
||||
<circle fill="#333" cx="16" cy="18" r="3"/>
|
||||
<circle fill="#333" cx="16" cy="26" r="3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 390 B |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1005 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |