1 | import Parse from '../parse';
|
2 | import {addEvent, computedImageSize} from '../helpers';
|
3 | import { tap } from '../events';
|
4 |
|
5 | const ACTIONS_TYPE = {
|
6 | OPEN_IMAGE: 'OPEN_IMAGE',
|
7 | CLICK_BLANK: 'CLICK_BLANK',
|
8 | ROUTE: 'ROUTE',
|
9 | OPEN_VIDEO: 'OPEN_VIDEO'
|
10 | };
|
11 |
|
12 | class WebviewRich extends Parse {
|
13 | constructor(option = { platform: 'webview' }) {
|
14 | super(option);
|
15 | this.lazyLoad = false;
|
16 | this.bridge = window.bridge;
|
17 | this.images = [];
|
18 | this.imagesDoc = null;
|
19 | this.clientHeight = 0;
|
20 | this.count = -1;
|
21 | }
|
22 |
|
23 | initEvents() {
|
24 | tap(document.body, event => {
|
25 | event.stopPropagation();
|
26 | const { target } = event;
|
27 | const e = target.getAttribute('e');
|
28 |
|
29 |
|
30 | if (e === 'image') {
|
31 | const index = +target.getAttribute('index');
|
32 | this.bridge.send(ACTIONS_TYPE.OPEN_IMAGE, {
|
33 | index: index,
|
34 | images: this.images
|
35 | });
|
36 |
|
37 |
|
38 | } else if (e === 'link') {
|
39 | let route = JSON.parse(target.dataset.href);
|
40 | this.bridge.send(ACTIONS_TYPE.ROUTE, {
|
41 | ...route
|
42 | });
|
43 |
|
44 |
|
45 | } else if (e === 'video') {
|
46 | let props = JSON.parse(target.dataset.href);
|
47 | this.bridge.send(ACTIONS_TYPE.OPEN_VIDEO, {
|
48 | ...props
|
49 | });
|
50 | } else {
|
51 | this.bridge.send(ACTIONS_TYPE.CLICK_BLANK, {});
|
52 | }
|
53 | });
|
54 | }
|
55 |
|
56 | renderImage(props) {
|
57 |
|
58 | this.images.push(props);
|
59 | this.count += 1;
|
60 | const showDesc = props.desc && props.desc !== '';
|
61 |
|
62 | let element = showDesc ? `<div class="image-div"><img e="image" index=${this.count} data-src=${props.url} src=${props.url}><div>${props.desc}</div></div>`
|
63 | : `<div class="image-div"><img e="image" index=${this.count} data-src=${props.url} src=${props.url}></div>`;
|
64 |
|
65 | return element;
|
66 | }
|
67 |
|
68 | renderLink(props) {
|
69 | let str = JSON.stringify(props.route);
|
70 | return `<a href="javascript:void(0)" e="link" data-href=${str} target="_blank">${props.content}</a>`;
|
71 | }
|
72 |
|
73 | renderVideo(props) {
|
74 |
|
75 | let str = JSON.stringify(props);
|
76 | return `<div class="huazhi-video"><img e="video" data-href=${str} class="cover" src=${props.cover} alt="视频"><div e="video" data-href=${str} class="btn"></div></div>`;
|
77 | }
|
78 | }
|
79 |
|
80 | export default WebviewRich;
|