@tarojs/taro-h5
Version:
Taro h5 framework
215 lines (212 loc) • 7.24 kB
JavaScript
import Taro from '@tarojs/api';
import { isFunction } from '@tarojs/shared';
import { findDOM } from '../../utils/index.js';
import { CanvasContext } from '../canvas/CanvasContext.js';
import { NodesRef } from './nodesRef.js';
function filter(fields, dom, selector) {
if (!dom)
return null;
const isViewport = selector === '.taro_page';
const { id, dataset, rect, size, scrollOffset, properties = [], computedStyle = [], nodeCanvasType, node, context } = fields;
const res = {};
if (nodeCanvasType && node) {
const tagName = dom.tagName;
res.node = {
id: dom.id,
$taroElement: dom
};
if (/^taro-canvas-core/i.test(tagName)) {
const type = dom.type || '';
res.nodeCanvasType = type;
const canvas = dom.getElementsByTagName('canvas')[0];
if (/^(2d|webgl)/i.test(type) && canvas) {
res.node = canvas;
}
else {
res.node = null;
}
}
else if (/^taro-scroll-view-core/i.test(tagName)) {
// Note https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/ScrollViewContext.html
res.nodeCanvasType = '';
res.node = dom;
dom.scrollTo = dom.mpScrollToMethod;
dom.scrollIntoView = dom.mpScrollIntoViewMethod;
}
else {
res.nodeCanvasType = '';
res.node = dom;
}
return res;
}
if (context) {
const tagName = dom.tagName;
if (/^taro-video-core/i.test(tagName)) {
// TODO HTMLVideoElement to VideoContext
return { context: dom };
}
else if (/^taro-canvas-core/i.test(tagName)) {
const type = dom.type || '2d';
const canvas = dom === null || dom === void 0 ? void 0 : dom.querySelector('canvas');
const ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext(type);
return { context: new CanvasContext(canvas, ctx) };
}
else if (/^taro-live-player-core/i.test(tagName)) {
console.error('暂时不支持通过 NodesRef.context 获取 LivePlayerContext');
}
else if (/^taro-editor-core/i.test(tagName)) {
console.error('暂时不支持通过 NodesRef.context 获取 EditorContext');
}
else if (/^taro-map-core/i.test(tagName)) {
console.error('暂时不支持通过 NodesRef.context 获取 MapContext');
}
return;
}
if (id)
res.id = dom.id;
if (dataset)
res.dataset = Object.assign({}, dom.dataset);
if (rect || size) {
const { left, right, top, bottom, width, height } = dom.getBoundingClientRect();
if (rect) {
if (!isViewport) {
res.left = left;
res.right = right;
res.top = top;
res.bottom = bottom;
}
else {
res.left = 0;
res.right = 0;
res.top = 0;
res.bottom = 0;
}
}
if (size) {
if (!isViewport) {
res.width = width;
res.height = height;
}
else {
res.width = dom.clientWidth;
res.height = dom.clientHeight;
}
}
}
if (scrollOffset) {
res.scrollLeft = dom.scrollLeft;
res.scrollTop = dom.scrollTop;
}
if (properties.length) {
properties.forEach(prop => {
const attr = dom.getAttribute(prop);
if (attr)
res[prop] = attr;
});
}
if (computedStyle.length) {
const styles = window.getComputedStyle(dom);
computedStyle.forEach(key => {
const value = styles.getPropertyValue(key) || styles[key];
if (value)
res[key] = value;
});
}
return res;
}
/**
* WXML节点信息API
* @return {Object} SelectorQuery 对象实例
*/
function queryBat(queue, cb) {
const result = [];
queue.forEach(item => {
var _a;
const { selector, single, fields, component } = item;
// selector 的容器节点
/* eslint-disable */
const container = (component !== null ?
(findDOM(component) || document) :
document);
/* eslint-enable */
// 特殊处理 ---- 选自己
let selectSelf = false;
if (container !== document) {
const $nodeList = (_a = container.parentNode) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selector);
if ($nodeList) {
for (let i = 0, len = $nodeList.length; i < len; ++i) {
if (container === $nodeList[i]) {
selectSelf = true;
break;
}
}
}
}
if (single) {
const el = selectSelf === true ? container : container.querySelector(selector);
result.push(filter(fields, el, selector));
}
else {
const $children = container.querySelectorAll(selector);
const children = [];
selectSelf === true && children.push(container);
for (let i = 0, len = $children.length; i < len; ++i) {
children.push($children[i]);
}
result.push(children.map(dom => filter(fields, dom)));
}
});
cb(result);
}
class SelectorQuery {
constructor() {
this._defaultWebviewId = null;
this._webviewId = null;
this._queue = [];
this._queueCb = [];
this._component;
}
in(component) {
this._component = component;
return this;
}
select(selector) {
// 小程序里跨自定义组件的后代选择器 '>>>' 在 h5 替换为普通后代选择器 '>'
if (typeof selector === 'string')
selector = selector.replace('>>>', '>');
return new NodesRef(selector, this, true);
}
selectAll(selector) {
// 小程序里跨自定义组件的后代选择器 '>>>' 在 h5 替换为普通后代选择器 '>'
if (typeof selector === 'string')
selector = selector.replace('>>>', '>');
return new NodesRef(selector, this, false);
}
selectViewport() {
return new NodesRef('.taro_page', this, true);
}
exec(cb) {
Taro.nextTick(() => {
queryBat(this._queue, res => {
const _queueCb = this._queueCb;
res.forEach((item, index) => {
const cb = _queueCb[index];
isFunction(cb) && cb.call(this, item);
});
isFunction(cb) && cb.call(this, res);
});
});
return this;
}
_push(selector, component, single, fields, callback = null) {
this._queue.push({
component,
selector,
single,
fields
});
this._queueCb.push(callback);
}
}
export { SelectorQuery };
//# sourceMappingURL=selectorQuery.js.map