huazhi-article/entry/webview.js

import Parse from '../parse';
import {addEvent, computedImageSize} from '../helpers';
import { tap } from '../events';

const ACTIONS_TYPE = {
  OPEN_IMAGE: 'OPEN_IMAGE',
  CLICK_BLANK: 'CLICK_BLANK',
  ROUTE: 'ROUTE',
  OPEN_VIDEO: 'OPEN_VIDEO'
};

class WebviewRich extends Parse {
  constructor(option = { platform: 'webview' }) {
    super(option);
    this.lazyLoad = false;
    this.bridge = window.bridge;
    this.images = [];
    this.imagesDoc = null;
    this.clientHeight = 0;
    this.count = -1;
  }

  initEvents() {
    tap(document.body, event => {
      event.stopPropagation();
      const { target } = event;
      const e = target.getAttribute('e');

      // 图片
      if (e === 'image') {
        const index = +target.getAttribute('index');
        this.bridge.send(ACTIONS_TYPE.OPEN_IMAGE, {
          index: index,
          images: this.images
        });

        // 跳转
      } else if (e === 'link') {
        let route = JSON.parse(target.dataset.href);
        this.bridge.send(ACTIONS_TYPE.ROUTE, {
          ...route
        });

        // 视频
      }  else if (e === 'video') {
        let url = target.dataset.href;
        this.bridge.send(ACTIONS_TYPE.OPEN_VIDEO, {
          url
        });
      } else {
        this.bridge.send(ACTIONS_TYPE.CLICK_BLANK, {});
      }
    });
  }

  renderImage(props) {

    this.images.push(props);
    this.count += 1;
    const showDesc = props.desc && props.desc !== '';

    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>`
        : `<div class="image-div"><img e="image" index=${this.count} data-src=${props.url} src=${props.url}></div>`;

    return element;
  }

  renderLink(props) {
    let str = JSON.stringify(props.route);
    return `<a href="javascript:void(0)" e="link" data-href=${str} target="_blank">${props.content}</a>`;
  }

  renderVideo(props) {
    // return `<video src="${props.url}" controls="controls"></video>`;
    return `<div class="huazhi-video"><img e="video" data-href=${props.url} class="cover" src=${props.cover} alt="视频"><div e="video" data-href=${props.url} class="btn"></div></div>`;
  }
}

export default WebviewRich;