shangmenanmo/components/jyf-Parser/index.vue

<!--
 parser 主模块组件
 github地址：https://github.com/jin-yufeng/Parser
 文档地址：https://jin-yufeng.github.io/Parser
 插件市场：https://ext.dcloud.net.cn/plugin?id=805
 author：JinYufeng
-->
<template>
	<view>
		<!--#ifdef H5-->
		<slot v-if="!html && !nodes.length"></slot>
		<div :id="'rtf' + uid" :style="(selectable ? 'user-select:text;-webkit-user-select:text;' : '') + (showWithAnimation ? ('opacity:0;' + showAnimation) : '')"></div>
		<!--#endif-->
		<!--#ifndef H5-->
		<slot v-if="!html[0].name && !html[0].type && !nodes.length"></slot>
		<!--#endif-->
		<!--#ifdef MP-ALIPAY-->
		<view class="_contain" :style="(selectable ? 'user-select:text;-webkit-user-select:text;' : '') + (showWithAnimation ? ('opacity:0;' + showAnimation) : '')">
			<trees :nodes="nodes.length ? nodes : (html[0].name || html[0].type ? html : [])" :imgMode="imgMode" />
		</view>
		<!--#endif-->
		<!--#ifndef MP-ALIPAY || H5-->
		<trees class="_contain" :style="'display:block;' + (selectable ? 'user-select:text;-webkit-user-select:text;' : '') + (showWithAnimation ? ('opacity:0;' + showAnimation) : '')"
		 :nodes="nodes.length ? nodes : (html[0].name || html[0].type ? html : [])" :imgMode="imgMode" :loadVideo="loadVideo" />
		<!--#endif-->
	</view>
</template>

<script>
	// #ifndef H5
	import trees from "./trees"
	var document; // document 补丁包，详见 https://jin-yufeng.github.io/Parser/#/instructions?id=document
	const parseHtmlSync = require('./libs/MpHtmlParser.js').parseHtmlSync;
	const cache = getApp().parserCache = {};
	const CssHandler = require("./libs/CssHandler.js");
	// 散列函数（计算 cache 的 key）
	const Hash = (str) => {
		for (var i = 0, hash = 5381, len = str.length; i < len; i++)
			hash += (hash << 5) + str.charCodeAt(i);
		return hash;
	};
	// #endif
	// 动画
	const showAnimation =
		"transition:400ms ease 0ms;transition-property:transform,opacity;transform-origin:50% 50% 0;-webkit-transition:400ms ease 0ms;-webkit-transform:;-webkit-transition-property:transform,opacity;-webkit-transform-origin:50% 50% 0;opacity: 1"
	const config = require('./libs/config.js');
	// #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU || MP-TOUTIAO
	// 图片链接去重
	const Deduplication = (src) => {
		if (src.indexOf("http") != 0) return src;
		var newSrc = '';
		for (var i = 0; i < src.length; i++) {
			newSrc += (Math.random() >= 0.5 ? src[i].toUpperCase() : src[i].toLowerCase());
			if (src[i] == '/' && src[i - 1] != '/' && src[i + 1] != '/') break;
		}
		newSrc += src.substring(i + 1);
		return newSrc;
	}
	// #endif
	export default {
		name: 'parser',
		data() {
			return {
				// #ifdef APP-PLUS
				loadVideo: false,
				// #endif
				// #ifdef H5
				uid: this._uid,
				showAnimation: '',
				// #endif
				// #ifndef H5
				showAnimation: {},
				controls: {},
				// #endif
				nodes: []
			}
		},
		// #ifndef H5
		components: {
			trees
		},
		// #endif
		props: {
			'html': {
				type: null,
				default: null
			},
			'autocopy': {
				type: Boolean,
				default: true
			},
			// #ifndef MP-ALIPAY
			'autopause': {
				type: Boolean,
				default: true
			},
			// #endif
			'autopreview': {
				type: Boolean,
				default: true
			},
			'autosetTitle': {
				type: Boolean,
				default: true
			},
			'domain': {
				type: String,
				default: null
			},
			'imgMode': {
				type: String,
				default: 'default'
			},
			// #ifdef MP-WEIXIN || MP-QQ || H5 || APP-PLUS
			'lazyLoad': {
				type: Boolean,
				default: false
			},
			// #endif
			'selectable': {
				type: Boolean,
				default: false
			},
			'tagStyle': {
				type: Object,
				default: () => {
					return {};
				}
			},
			'showWithAnimation': {
				type: Boolean,
				default: false
			},
			'useAnchor': {
				type: Boolean,
				default: false
			},
			'useCache': {
				type: Boolean,
				default: false
			}
		},
		watch: {
			html(html) {
				this.setContent(html, undefined, true);
			}
		},
		mounted() {
			this.imgList = [];
			this.imgList.each = function(f) {
				for (var i = 0; i < this.length; i++) {
					// #ifdef MP-ALIPAY || APP-PLUS
					this[i] = f(this[i], i, this) || this[i];
					// #endif
					// #ifndef MP-ALIPAY || APP-PLUS
					var newSrc = f(this[i], i, this);
					if (newSrc) {
						if (this.includes(newSrc)) this[i] = Deduplication(newSrc);
						else this[i] = newSrc;
					}
					// #endif
				}
			}
			this.setContent(this.html, undefined, true);
		},
		// #ifdef H5
		beforeDestroy() {
			if (this._observer) this._observer.disconnect();
		},
		// #endif
		methods: {
			// #ifdef H5
			setContent(html, options, observed) {
				if (typeof options == "object")
					for (var key in options) {
						key = key.replace(/-(\w)/g, function() {
							return arguments[1].toUpperCase();
						})
						this[key] = options[key];
					}
				html = html || '';
				if (!html) {
					if (this.rtf) this.rtf.parentNode.removeChild(this.rtf);
					return;
				}
				if (typeof html != 'string') html = this.Dom2Str(html.nodes || html);
				// 处理 rpx
				if (/[0-9.]*?rpx/.test(html)) {
					const rpx = uni.getSystemInfoSync().screenWidth / 750;
					html = html.replace(/([0-9.]*?)rpx/g, function() {
						return parseFloat(arguments[1]) * rpx + "px";
					})
				}
				// 处理 tag-style 和 userAgentStyles
				var style = "<style>";
				for (var item in config.userAgentStyles)
					style += (item + '{' + config.userAgentStyles[item] + '}');
				for (var item in this.tagStyle)
					style += (item + '{' + this.tagStyle[item] + '}');
				style += "</style>";
				html = style + html;
				if (this.rtf) this.rtf.parentNode.removeChild(this.rtf);
				this.rtf = document.createElement('div');
				this.rtf.innerHTML = html;
				for (var style of this.rtf.getElementsByTagName("style")) {
					style.innerHTML = style.innerHTML.replace(/\s*body/g, "#rtf" + this._uid);
					style.setAttribute("scoped", "true");
				}
				// 懒加载
				if (this.lazyLoad && IntersectionObserver) {
					if (this._observer) this._observer.disconnect();
					this._observer = new IntersectionObserver(changes => {
						for (var change of changes) {
							if (change.isIntersecting) {
								change.target.src = change.target.getAttribute("data-src");
								change.target.removeAttribute("data-src");
								this._observer.unobserve(change.target);
							}
						}
					}, {
						rootMargin: "1000px 0px 1000px 0px"
					})
				}
				var component = this;
				// 获取标题
				var title = this.rtf.getElementsByTagName("title");
				if (title.length && this.autosetTitle)
					uni.setNavigationBarTitle({
						title: title[0].innerText
					})
				// 图片处理
				this.imgList.length = 0;
				var imgs = this.rtf.getElementsByTagName("img");
				for (var i = 0; i < imgs.length; i++) {
					var img = imgs[i];
					img.style.maxWidth = "100%";
					img.i = i;
					if (this.domain && img.getAttribute("src")[0] == "/") {
						if (img.getAttribute("src")[1] == "/")
							img.src = (this.domain.includes("://") ? this.domain.split("://")[0] : "http") + ':' + img.getAttribute("src");
						else img.src = this.domain + img.getAttribute("src");
					}
					component.imgList.push(img.src);
					if (img.parentElement.nodeName != 'A') {
						img.onclick = function() {
							if (!this.hasAttribute('ignore')) {
								var preview = true;
								this.ignore = () => preview = false;
								component.$emit('imgtap', this);
								if (preview && component.autopreview) {
									uni.previewImage({
										current: this.i,
										urls: component.imgList
									});
								}
							}
						}
					}
					img.onerror = function() {
						component.$emit('error', {
							source: "img",
							target: this
						});
					}
					if (component.lazyLoad && this._observer) {
						img.setAttribute("data-src", img.src);
						img.removeAttribute("src");
						this._observer.observe(img);
					}
				}
				// 链接处理
				var links = this.rtf.getElementsByTagName("a");
				for (var link of links) {
					link.onclick = function(e) {
						var jump = true,
							href = this.getAttribute("href");
						component.$emit('linkpress', {
							href,
							ignore: () => jump = false
						});
						if (jump && href) {
							if (href[0] == '#') {
								if (component.useAnchor) {
									component.navigateTo({
										id: href.substring(1)
									})
								}
							} else if (href.indexOf("http") == 0 || href.indexOf("//") == 0)
								return true;
							else {
								uni.navigateTo({
									url: href
								})
							}
						}
						return false;
					}
				}
				// 视频处理
				var videos = this.rtf.getElementsByTagName("video");
				component.videoContexts = videos;
				for (var video of videos) {
					video.style.maxWidth = "100%";
					video.onerror = function() {
						component.$emit('error', {
							source: "video",
							target: this
						});
					}
					video.onplay = function() {
						if (component.autopause) {
							for (var video of component.videoContexts) {
								if (video != this)
									video.pause();
							}
						}
					}
				}
				// 音频处理
				var audios = this.rtf.getElementsByTagName("audios");
				for (var audio of audios) {
					audio.onerror = function(e) {
						component.$emit('error', {
							source: "audio",
							target: this
						});
					}
				}
				document.getElementById("rtf" + this._uid).appendChild(this.rtf);
				if (this.showWithAnimation)
					this.showAnimation = showAnimation;
				if (!observed) this.nodes = [0];
				this.$nextTick(() => {
					this.$emit("ready", this.rtf.getBoundingClientRect());
				})
			},
			Dom2Str(nodes) {
				var str = "";
				for (var node of nodes) {
					if (node.type == "text")
						str += node.text;
					else {
						str += ('<' + node.name);
						for (var attr in node.attrs || {})
							str += (' ' + attr + '="' + node.attrs[attr] + '"');
						if (!node.children || !node.children.length) str += "/>";
						else str += ('>' + this.Dom2Str(node.children) + "</" + node.name + '>');
					}
				}
				return str;
			},
			getText(whiteSpace = true) {
				if (!whiteSpace) return this.rtf.innerText.replace(/\s/g, '');
				return this.rtf.innerText;
			},
			navigateTo(obj) {
				if (!obj.id) {
					window.scrollTo(0, this.rtf.offsetTop);
					return obj.success ? obj.success({
						errMsg: "pageScrollTo:ok"
					}) : null;
				}
				var target = document.getElementById(obj.id);
				if (!target) return obj.fail ? obj.fail({
					errMsg: "Label Not Found"
				}) : null;
				uni.pageScrollTo({
					scrollTop: this.rtf.offsetTop + target.offsetTop,
					success: obj.success,
					fail: obj.fail
				});
			},
			// #endif
			// #ifndef H5
			setContent(html, options, observed) {
				if (typeof options == "object")
					for (var key in options) {
						key = key.replace(/-(\w)/g, function() {
							return arguments[1].toUpperCase();
						})
						this[key] = options[key];
					}
				if (this.showWithAnimation)
					this.showAnimation = showAnimation;
				if (!html) {
					if (observed) return;
					else this.nodes = [];
				} else if (typeof html == "string") {
					var res;
					// 缓存读取
					if (this.useCache) {
						var hash = Hash(html);
						if (cache[hash])
							res = cache[hash];
						else {
							res = parseHtmlSync(html, this);
							cache[hash] = res;
						}
					} else res = parseHtmlSync(html, this);
					this.nodes = res;
					this.$emit('parse', res);
				} else if (html.constructor == Array) {
					if (!observed) this.nodes = html;
					else this.nodes = [];
					// 非本插件产生的 array 需要进行一些转换
					if (html.length && html[0].PoweredBy != "Parser") {
						const Parser = {
							_imgNum: 0,
							_videoNum: 0,
							_audioNum: 0,
							_domain: this.domain,
							_protocol: this.domain ? (this.domain.includes("://") ? this.domain.split("://")[0] : "http") : undefined,
							_STACK: [],
							CssHandler: new CssHandler(this.tagStyle)
						};
						Parser.CssHandler.getStyle('');
						const DFS = (nodes) => {
							for (var node of nodes) {
								if (node.type == "text") continue;
								node.attrs = node.attrs || {};
								for (var item in node.attrs) {
									if (!config.trustAttrs[item]) node.attrs[item] = undefined;
									else if (typeof node.attrs[item] != "string") node.attrs[item] = node.attrs[item].toString();
								}
								config.LabelAttrsHandler(node, Parser);
								if (config.blockTags[node.name]) node.name = 'div';
								else if (!config.trustTags[node.name]) node.name = 'span';
								if (node.children && node.children.length) {
									Parser._STACK.push(node);
									DFS(node.children);
									Parser._STACK.pop();
								} else node.children = undefined;
							}
						}
						DFS(html);
						this.nodes = html;
					}
				} else if (typeof html == 'object' && html.nodes) {
					this.nodes = html.nodes;
					console.warn("Parser 类型错误：object 类型已废弃，请直接将 html 设置为 object.nodes （array 类型）");
				} else {
					return this.$emit('error', {
						source: "parse",
						errMsg: "传入的nodes数组格式不正确！应该传入的类型是array，实际传入的类型是：" + typeof html.nodes
					});
				}
				// #ifdef APP-PLUS
				this.loadVideo = false;
				// #endif
				if (document) this.document = new document("html", this.html || html, this);
				this.$nextTick(() => {
					this.imgList.length = 0;
					this.videoContexts = [];
					const getContext = (components) => {
						for (let component of components) {
							if (component.$options.name == "trees") {
								var observered = false;
								for (var item of component.nodes) {
									if (item.continue) continue;
									if (item.name == 'img') {
										if (item.attrs.src && item.attrs.i) {
											// #ifndef MP-ALIPAY || APP-PLUS
											if (this.imgList.indexOf(item.attrs.src) == -1)
												this.imgList[item.attrs.i] = item.attrs.src;
											else this.imgList[item.attrs.i] = Deduplication(item.attrs.src);
											// #endif
											// #ifdef MP-ALIPAY || APP-PLUS
											this.imgList[item.attrs.i] = item.attrs.src;
											// #endif
										}
										// #ifndef MP-ALIPAY
										if (!observered) {
											observered = true;
											if (this.lazyLoad && uni.createIntersectionObserver) {
												if (component._observer) component._observer.disconnect();
												component._observer = uni.createIntersectionObserver(component);
												component._observer.relativeToViewport({
													top: 1000,
													bottom: 1000
												}).observe('.img', res => {
													component.imgLoad = true;
													component._observer.disconnect();
													component._observer = null;
												})
											} else
												component.imgLoad = true;
										}
										// #endif
									}
									// #ifndef MP-ALIPAY
									else if (item.name == 'video') {
										var context = uni.createVideoContext(item.attrs.id, component);
										context.id = item.attrs.id;
										this.videoContexts.push(context);
									}
									// #endif
									// #ifdef MP-WEIXIN
									else if (item.name == 'audio' && item.attrs.autoplay)
										wx.createAudioContext(item.attrs.id, component).play();
									// #endif
									// 设置标题
									else if (item.name == "title") {
										if (item.children[0].type == "text" && item.children[0].text && this.autosetTitle)
											uni.setNavigationBarTitle({
												title: item.children[0].text
											})
									}
									// #ifdef MP-BAIDU || MP-ALIPAY
									if (item.attrs && item.attrs.id) {
										this.anchors = this.anchors || [];
										this.anchors.push({
											id: item.attrs.id,
											node: component
										})
									}
									// #endif
								}
							}
							if (component.$children.length)
								getContext(component.$children)
						}
					}
					// #ifdef MP-TOUTIAO
					setTimeout(() => {
						// #endif
						getContext(this.$children)
						uni.createSelectorQuery().in(this).select("._contain").boundingClientRect(res => {
							this.$emit("ready", res);
						}).exec();
						// #ifdef MP-TOUTIAO
					}, 200)
					// #endif
					// #ifdef APP-PLUS
					setTimeout(() => {
						this.loadVideo = true;
					}, 3000);
					// #endif
				})
			},
			getText(whiteSpace = true) {
				var text = "";
				const DFS = (node) => {
					if (node.type == "text") return text += node.text;
					else {
						if (whiteSpace && (((node.name == 'p' || node.name == "div" || node.name == "tr" || node.name == "li" ||
								/h[1-6]/.test(node.name)) && text && text[text.length - 1] != '\n') || node.name == "br"))
							text += '\n';
						for (var child of node.children || [])
							DFS(child);
						if (whiteSpace && (node.name == 'p' || node.name == "div" || node.name == "tr" || node.name == "li" || /h[1-6]/.test(
								node.name)) && text && text[text.length - 1] != '\n')
							text += '\n';
						else if (whiteSpace && node.name == "td") text += '\t';
					}
				}
				var nodes = ((this.nodes && this.nodes.length) ? this.nodes : (this.html[0] && (this.html[0].name || this.html[0].type) ?
					this.html : []));
				if (!nodes.length) return "";
				for (var node of nodes)
					DFS(node);
				return text;
			},
			navigateTo(obj) {
				var Scroll = (selector, component) => {
					const query = uni.createSelectorQuery().in(component ? component : this);
					query.select(selector).boundingClientRect();
					query.selectViewport().scrollOffset();
					query.exec(res => {
						if (!res || !res[0])
							return obj.fail ? obj.fail({
								errMsg: "Label Not Found"
							}) : null;
						uni.pageScrollTo({
							scrollTop: res[1].scrollTop + res[0].top,
							success: obj.success,
							fail: obj.fail
						})
					})
				}
				if (!obj.id) Scroll("._contain");
				else {
					// #ifndef MP-BAIDU || MP-ALIPAY
					Scroll('._contain >>> #' + obj.id + ', ._contain >>> .' + obj.id);
					// #endif
					// #ifdef MP-BAIDU || MP-ALIPAY
					for (var anchor of this.anchors) {
						if (anchor.id == obj.id) {
							Scroll("#" + obj.id + ", ." + obj.id, anchor.node);
						}
					}
					// #endif
				}
			},
			// #endif
			getVideoContext(id) {
				if (!id) return this.videoContexts;
				else {
					for (var video of this.videoContexts) {
						if (video.id == id) return video;
					}
				}
				return null;
			}
		}
	}
</script>

<style>
	/* #ifndef MP-BAIDU */
	:host {
		display: block;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}

	/* #endif */
</style>