xiaoe_mp_npm 1.0.21 → 1.0.22-test02

package/src/Task/TaskQuizPopup/components/wxParse/htmlparser.js

@@ -0,0 +1,183 @@
+/**
+ * author: Di (微信小程序开发工程师)
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
+ *               垂直微信小程序开发交流社区
+ *
+ * github地址: https://github.com/icindy/wxParse
+ *
+ * for: 微信小程序富文本解析
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
+ */
+// Regular Expressions for parsing tags and attributes
+var startTag =
+    /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/,
+  endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/,
+  attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g
+
+// Empty Elements - HTML 5
+var empty = makeMap(
+  'area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr',
+)
+
+// Block Elements - HTML 5
+var block = makeMap(
+  'a,address,code,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video',
+)
+
+// Inline Elements - HTML 5
+var inline = makeMap(
+  'abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var',
+)
+
+// Elements that you can, intentionally, leave open
+// (and which close themselves)
+var closeSelf = makeMap('colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr')
+
+// Attributes that have their values filled in disabled="disabled"
+var fillAttrs = makeMap(
+  'checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected',
+)
+
+// Special Elements (can contain anything)
+var special = makeMap('wxxxcode-style,script,style,view,scroll-view,block')
+
+function HTMLParser(html, handler) {
+  var index,
+    chars,
+    match,
+    stack = [],
+    last = html
+  stack.last = function () {
+    return this[this.length - 1]
+  }
+
+  while (html) {
+    chars = true
+
+    // Make sure we're not in a script or style element
+    if (!stack.last() || !special[stack.last()]) {
+      // Comment
+      if (html.indexOf('<!--') == 0) {
+        index = html.indexOf('-->')
+
+        if (index >= 0) {
+          if (handler.comment) handler.comment(html.substring(4, index))
+          html = html.substring(index + 3)
+          chars = false
+        }
+
+        // end tag
+      } else if (html.indexOf('</') == 0) {
+        match = html.match(endTag)
+
+        if (match) {
+          html = html.substring(match[0].length)
+          match[0].replace(endTag, parseEndTag)
+          chars = false
+        }
+
+        // start tag
+      } else if (html.indexOf('<') == 0) {
+        match = html.match(startTag)
+
+        if (match) {
+          html = html.substring(match[0].length)
+          match[0].replace(startTag, parseStartTag)
+          chars = false
+        }
+      }
+
+      if (chars) {
+        index = html.indexOf('<')
+
+        var text = index < 0 ? html : html.substring(0, index)
+        html = index < 0 ? '' : html.substring(index)
+
+        if (handler.chars) handler.chars(text)
+      }
+    } else {
+      html = html.replace(new RegExp('([\\s\\S]*?)</' + stack.last() + '[^>]*>'), function (all, text) {
+        text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, '$1$2')
+        if (handler.chars) handler.chars(text)
+
+        return ''
+      })
+
+      parseEndTag('', stack.last())
+    }
+
+    if (html == last) throw 'Parse Error: ' + html
+    last = html
+  }
+
+  // Clean up any remaining tags
+  parseEndTag()
+
+  function parseStartTag(tag, tagName, rest, unary) {
+    tagName = tagName.toLowerCase()
+
+    if (block[tagName]) {
+      while (stack.last() && inline[stack.last()]) {
+        parseEndTag('', stack.last())
+      }
+    }
+
+    if (closeSelf[tagName] && stack.last() == tagName) {
+      parseEndTag('', tagName)
+    }
+
+    unary = empty[tagName] || !!unary
+
+    if (!unary) stack.push(tagName)
+
+    if (handler.start) {
+      var attrs = []
+
+      rest.replace(attr, function (match, name) {
+        var value = arguments[2]
+          ? arguments[2]
+          : arguments[3]
+          ? arguments[3]
+          : arguments[4]
+          ? arguments[4]
+          : fillAttrs[name]
+          ? name
+          : ''
+
+        attrs.push({
+          name: name,
+          value: value,
+          escaped: value.replace(/(^|[^\\])"/g, '$1\\"'), //"
+        })
+      })
+
+      if (handler.start) {
+        handler.start(tagName, attrs, unary)
+      }
+    }
+  }
+
+  function parseEndTag(tag, tagName) {
+    // If no tag name is provided, clean shop
+    if (!tagName) var pos = 0
+    // Find the closest opened tag of the same type
+    else for (var pos = stack.length - 1; pos >= 0; pos--) if (stack[pos] == tagName) break
+
+    if (pos >= 0) {
+      // Close all the open elements, up the stack
+      for (var i = stack.length - 1; i >= pos; i--) if (handler.end) handler.end(stack[i])
+
+      // Remove the open elements from the stack
+      stack.length = pos
+    }
+  }
+}
+
+function makeMap(str) {
+  var obj = {},
+    items = str.split(',')
+  for (var i = 0; i < items.length; i++) obj[items[i]] = true
+  return obj
+}
+
+module.exports = HTMLParser

package/src/Task/TaskQuizPopup/components/wxParse/iframeParse.js

@@ -0,0 +1,216 @@
+/**
+ * iframe 解析器
+ */
+class iframeParser {
+  constructor(domTree) {
+    console.warn('----------------------')
+    console.warn('domTree', domTree)
+    this.domTree = domTree // wxParse 解析出来的 dom树
+    this.audioArr = [] // dom 树中的 iframe 音频对象引用
+    this.videoArr = [] // dom 树中的 iframe 视频对象引用
+    this.audioMap = [] // audioArr 中对象的 id 数组， 请求用
+    this.videoMap = [] // videoArr 中对象的 id 数组， 请求用
+    this.timer = null // 定时器，请求过久的时候做容错返回
+    this.delay = 3000 // 延迟时间，超时返回原数据
+  }
+
+  /**
+   * 解析 domTree 并替换自有 iframe 成 video 或 audio 组件
+   * @return [Promise对象]
+   */
+  parse() {
+    return new Promise((resolve, reject) => {
+      // 获取所有 本地视频 和 本地音频 的 iframe 对象引用
+      this.findAllIFrame(this.domTree.nodes)
+
+      if (this.audioArr.length !== 0 || this.videoArr.length !== 0) {
+        // 生成 id 数组用于请求
+        this.audioMap = this.audioArr.map((el) => this.getParams('id', el.attr && el.attr.src) || false)
+        this.videoMap = this.videoArr.map((el) => this.getParams('id', el.attr && el.attr.src) || false)
+
+        // 延迟时间， 超时则不显示音视频资源，按老的返回
+        this.timer = setTimeout(() => {
+          reject('request timeout 3 seconds')
+        }, this.delay)
+
+        // 获取数据
+        const audioPromise = this.getAudioData()
+        const videoPromise = this.getVideoData()
+
+        // 等待两个回调都完成再进行替换操作
+        Promise.all([audioPromise, videoPromise])
+          .then((res) => {
+            this.replaceAudio(res[0], reject)
+            this.replaceVideo(res[1], reject)
+            // 清除定时器
+            clearTimeout(this.timer)
+            resolve(this.domTree)
+          })
+          .catch((err) => {
+            console.error('[iframeParse Error]: promise all err', err)
+            // 清除定时器
+            clearTimeout(this.timer)
+            reject(err)
+          })
+      } else {
+        resolve(this.domTree)
+      }
+    })
+  }
+
+  /**
+   * 获取 URL 中的参数
+   * @param {string} key [参数名称]
+   * @param {string} href [链接]
+   * @return [参数值，获取失败为空]
+   */
+  getParams(key, href) {
+    if (!href) return ''
+    const match = href.match(new RegExp('[?&]' + key + '=([^&]*)'))
+    return (match && match[1] && decodeURIComponent(match[1])) || ''
+  }
+
+  /**
+   * 递归获取 iframe 数组并放入 audioArr 和 videoArr 中
+   * @param {object} nodes [dom数组]
+   */
+  findAllIFrame(nodes) {
+    if (!nodes) return
+    let i = nodes.length - 1
+    for (; i >= 0; i--) {
+      if (nodes[i].tag === 'iframe') {
+        if (nodes[i].classStr && nodes[i].classStr.indexOf('xiaoe-iframe-audio') > -1) {
+          this.audioArr.push(nodes[i])
+        } else if (nodes[i].classStr && nodes[i].classStr.indexOf('xiaoe-iframe-video') > -1) {
+          this.videoArr.push(nodes[i])
+        }
+        if (nodes[i].nodes && nodes[i].nodes.length > 0) {
+          this.findAllIFrame(nodes[i].nodes)
+        }
+      } else {
+        this.findAllIFrame(nodes[i].nodes)
+      }
+    }
+  }
+
+  /**
+   * 获取视频链接
+   * @return [Promise对象]
+   */
+  getVideoData() {
+    if (this.videoMap.length > 0) {
+      return new Promise((resolve, reject) => {
+        getApp()
+          .globalData.xiaoeRequest.RICHTEXTVideo.post({ id: this.videoMap }, false)
+          .then((res) => {
+            if (res.code === 0) {
+              resolve(res.data)
+            } else {
+              reject('request error')
+            }
+          })
+      })
+    } else {
+      return Promise.resolve()
+    }
+  }
+
+  /**
+   * 根据 id 数组获取音频链接
+   * @return [Promise对象]
+   */
+  getAudioData() {
+    if (this.audioMap.length > 0) {
+      return new Promise((resolve, reject) => {
+        getApp()
+          .globalData.xiaoeRequest.RICHTEXTAudio.post({ id: this.audioMap }, false)
+          .then((res) => {
+            if (res.code === 0) {
+              resolve(res.data)
+            } else {
+              reject('request error')
+            }
+          })
+      })
+    } else {
+      return Promise.resolve()
+    }
+  }
+
+  /**
+   * 替换音频数据
+   * @param {object} res [请求返回对象]
+   * @param {function} reject [错误回调]
+   */
+  replaceAudio(res) {
+    if (this.audioMap.length === 0) return
+    // 根据 map 替换 audioArr 的值
+    this.audioMap.forEach((el) => {
+      const data = res[el]
+      if (data) {
+        // 每次都进行一次比对
+        this.audioArr.map((audioDom, index) => {
+          if (audioDom.attr && typeof audioDom.attr.src === 'string' && audioDom.attr.src.indexOf(el) >= 0) {
+            // 判断原本的 src 里有没有带对应带 audio id
+            this.audioArr[index].attr.src = data.file_url
+            this.audioArr[index].attr.length = data.audio_length
+            this.audioArr[index].attr.title = data.audio_title
+            this.audioArr[index].tag = 'xeAudio'
+            this.audioArr[index].id = el
+          }
+        })
+      }
+    })
+  }
+
+  /**
+   * 替换 video 资源
+   * @param {object} res [请求返回对象]
+   * @param {function} reject  [错误回调]
+   */
+  replaceVideo(res) {
+    if (this.videoMap.length === 0) return
+    this.videoMap.forEach((el) => {
+      const data = res[el]
+      if (data) {
+        this.videoArr.map((videoDom, index) => {
+          if (videoDom.attr && typeof videoDom.attr.src === 'string' && videoDom.attr.src.indexOf(el) >= 0) {
+            this.videoArr[index].attr.src = data.file_url
+            this.videoArr[index].tag = 'xeVideo'
+          }
+        })
+      }
+    })
+  }
+
+  /**
+   * 格式化时间
+   * @param {number} time [时间/秒数]
+   */
+  formatTime(time) {
+    if (typeof +time === 'number' && time >= 0) {
+      let m = parseInt(time / 60)
+      let s = parseInt(time % 60)
+      m = m < 10 ? `0${m}` : m
+      s = s < 10 ? `0${s}` : s
+      return `${m}:${s}`
+    } else {
+      return '--:--'
+    }
+  }
+}
+
+// 修改 domTree ， 将自用 iframe 替换成 video 和 audio 组件
+function iframeParse(domTree, callback) {
+  const parser = new iframeParser(domTree, callback)
+  parser
+    .parse()
+    .then((res) => {
+      callback(res)
+    })
+    .catch((err) => {
+      console.error('[iFrameParse Error]: ', err)
+      callback(domTree)
+    })
+}
+module.exports = iframeParse