123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367 |
- <template>
- <view id="_root" :class="(selectable?'_select ':'')+'_root'">
- <slot v-if="!nodes[0]" />
-
- <node v-else :childs="nodes" :opts="[lazyLoad,loadingImg,errorImg,showImgMenu]" />
-
-
- <web-view ref="web" src="/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
-
- </view>
- </template>
- <script>
- import props from './props.js';
- const plugins=[]
- const parser = require('./parser')
- import node from './node/node'
- const dom = weex.requireModule('dom')
- export default {
- name: 'mp-html',
- data() {
- return {
- nodes: [],
-
- height: 0
-
- }
- },
- mixins:[props],
-
- components: {
- node
- },
-
- watch: {
- content(content) {
- this.setContent(content)
- }
- },
- created() {
- this.plugins = []
- for (let i = plugins.length; i--;)
- this.plugins.push(new plugins[i](this))
- },
- mounted() {
- if (this.content && !this.nodes.length)
- this.setContent(this.content)
- },
- beforeDestroy() {
- this._hook('onDetached')
- clearInterval(this._timer)
- },
- methods: {
-
- in(page, selector, scrollTop) {
-
- if (page && selector && scrollTop)
- this._in = {
- page,
- selector,
- scrollTop
- }
-
- },
-
- navigateTo(id, offset) {
- return new Promise((resolve, reject) => {
- if (!this.useAnchor)
- return reject('Anchor is disabled')
- offset = offset || parseInt(this.useAnchor) || 0
-
- if (!id) {
- dom.scrollToElement(this.$refs.web, {
- offset
- })
- resolve()
- } else {
- this._navigateTo = {
- resolve,
- reject,
- offset
- }
- this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
- }
-
-
- let deep = ' '
-
- deep = '>>>'
-
- const selector = uni.createSelectorQuery()
-
- .in(this._in ? this._in.page : this)
-
- .select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
- if (this._in)
- selector.select(this._in.selector).scrollOffset()
- .select(this._in.selector).boundingClientRect()
- else
- selector.selectViewport().scrollOffset()
- selector.exec(res => {
- if (!res[0])
- return reject('Label not found')
- const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
- if (this._in)
-
- this._in.page[this._in.scrollTop] = scrollTop
- else
-
- uni.pageScrollTo({
- scrollTop,
- duration: 300
- })
- resolve()
- })
-
- })
- },
-
- getText() {
- let text = '';
- (function traversal(nodes) {
- for (let i = 0; i < nodes.length; i++) {
- const node = nodes[i]
- if (node.type == 'text')
- text += node.text.replace(/&/g, '&')
- else if (node.name == 'br')
- text += '\n'
- else {
-
- const isBlock = node.name == 'p' || node.name == 'div' || node.name == 'tr' || node.name == 'li' || (node.name[0] == 'h' && node.name[1] > '0' && node.name[1] < '7')
- if (isBlock && text && text[text.length - 1] != '\n')
- text += '\n'
-
- if (node.children)
- traversal(node.children)
- if (isBlock && text[text.length - 1] != '\n')
- text += '\n'
- else if (node.name == 'td' || node.name == 'th')
- text += '\t'
- }
- }
- })(this.nodes)
- return text
- },
-
- getRect() {
- return new Promise((resolve, reject) => {
- uni.createSelectorQuery()
-
- .in(this)
-
- .select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject('Root label not found'))
- })
- },
-
- setContent(content, append) {
- if (!append || !this.imgList)
- this.imgList = []
- const nodes = new parser(this).parse(content)
-
- if (this._ready)
- this._set(nodes, append)
-
- this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
-
- this._videos = []
- this.$nextTick(() => {
- this._hook('onLoad')
- this.$emit('load')
- })
-
- let height
- clearInterval(this._timer)
- this._timer = setInterval(() => {
- this.getRect().then(rect => {
-
- if (rect.height == height) {
- this.$emit('ready', rect)
- clearInterval(this._timer)
- }
- height = rect.height
- }).catch(() => { })
- }, 350)
-
- },
-
- _hook(name) {
- for (let i = plugins.length; i--;)
- if (this.plugins[i][name])
- this.plugins[i][name]()
- },
-
-
- _set(nodes, append) {
- this.$refs.web.evalJs('setContent(' + JSON.stringify(nodes) + ',' + JSON.stringify([this.bgColor, this.errorImg, this.loadingImg, this.pauseVideo, this.scrollTable, this.selectable]) + ',' + append + ')')
- },
-
- _onMessage(e) {
- const message = e.detail.data[0]
- switch (message.action) {
-
- case 'onJSBridgeReady':
- this._ready = true
- if (this.nodes)
- this._set(this.nodes)
- break
-
- case 'onLoad':
- this.height = message.height
- this._hook('onLoad')
- this.$emit('load')
- break
-
- case 'onReady':
- this.getRect().then(res => {
- this.$emit('ready', res)
- }).catch(() => { })
- break
-
- case 'onHeightChange':
- this.height = message.height
- break
-
- case 'onImgTap':
- this.$emit('imgTap', message.attrs)
- if (this.previewImg)
- uni.previewImage({
- current: parseInt(message.attrs.i),
- urls: this.imgList
- })
- break
-
- case 'onLinkTap':
- const href = message.attrs.href
- this.$emit('linkTap', message.attrs)
- if (href) {
-
- if (href[0] == '#') {
- if (this.useAnchor)
- dom.scrollToElement(this.$refs.web, {
- offset: message.offset
- })
- }
-
- else if (href.includes('://')) {
- if (this.copyLink)
- plus.runtime.openWeb(href)
- }
- else
- uni.navigateTo({
- url: href,
- fail() {
- wx.switchTab({
- url: href
- })
- }
- })
- }
- break
-
- case 'getOffset':
- if (typeof message.offset == 'number') {
- dom.scrollToElement(this.$refs.web, {
- offset: message.offset + this._navigateTo.offset
- })
- this._navigateTo.resolve()
- } else
- this._navigateTo.reject('Label not found')
- break
-
- case 'onClick':
- this.$emit('tap')
- break
-
- case 'onError':
- this.$emit('error', {
- source: message.source,
- attrs: message.attrs
- })
- }
- }
-
- }
- }
- </script>
- <style>
- ._root {
- overflow: auto;
- -webkit-overflow-scrolling: touch;
- }
- ._select {
- user-select: text;
- }
- </style>
|