oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-rich-text/mp-html/search/index.js

@@ -0,0 +1,132 @@
+/**
+ * @fileoverview search 插件
+ */
+function Search (vm) {
+  /**
+   * @description 关键词搜索
+   * @param {regexp|string} key 要搜索的关键词
+   * @param {boolean} anchor 是否将搜索结果设置为锚点
+   * @param {string} style 搜索结果的样式
+   */
+  vm.search = function (key, anchor, style = 'background-color:yellow') {
+    const res = []
+    const stack = [];
+
+    // 遍历搜索
+    (function traversal (nodes) {
+      for (let i = 0; i < nodes.length; i++) {
+        let node = nodes[i]
+        if (node.type === 'text' && key) {
+          const text = node.text
+          const arr = text.split(key)
+          if (arr.length > 1) {
+            node = {
+              name: 'span',
+              attrs: {},
+              type: 'node',
+              c: 1,
+              s: 1,
+              children: []
+            }
+            vm.$set(nodes, i, node)
+            for (let j = 0; j < arr.length; j++) {
+              if (arr[j]) {
+                node.children.push({
+                  type: 'text',
+                  text: arr[j]
+                })
+              }
+              if (j !== arr.length - 1) {
+                // 关键词转为一个 span
+                node.children.push({
+                  name: 'span',
+                  attrs: {
+                    id: anchor ? 'search' + (res.length + 1) : undefined, // 用于锚点的 id
+                    style: style
+                  },
+                  // #ifdef VUE3
+                  c: 1,
+                  // #endif
+                  children: [{
+                    type: 'text',
+                    text: key instanceof RegExp ? key.exec(text)[0] : key
+                  }]
+                })
+                res.push(node.children[node.children.length - 1].attrs)
+              }
+            }
+            if (key instanceof RegExp) {
+              key.exec(text)
+            }
+            if (anchor) {
+              for (let l = stack.length; l--;) {
+                if (stack[l].c) {
+                  break
+                } else {
+                  vm.$set(stack[l], 'c', 1)
+                }
+              }
+            }
+          }
+        } else if (node.s) {
+          let text = ''
+          // 复原上一次的结果
+          for (let k = 0; k < node.children.length; k++) {
+            const child = node.children[k]
+            if (child.text) {
+              text += child.text
+            } else {
+              text += child.children[0].text
+            }
+          }
+          vm.$set(nodes, i, {
+            type: 'text',
+            text
+          })
+          if (key && (key instanceof RegExp ? key.test(text) : text.includes(key))) {
+            i--
+          }
+        } else if (node.children) {
+          stack.push(node)
+          traversal(node.children)
+          stack.pop()
+        }
+      }
+    })(vm.nodes)
+
+    return new Promise(function (resolve) {
+      setTimeout(() => {
+        resolve({
+          num: res.length, // 结果数量
+          /**
+           * @description 高亮某一个结果
+           * @param {number} i 第几个
+           * @param {string} hlstyle 高亮的样式
+           */
+          highlight (i, hlstyle = 'background-color:#FF9632') {
+            if (i < 1 || i > res.length) return
+            if (this.last) {
+              res[this.last - 1].style = style
+            }
+            this.last = i
+            res[i - 1].style = hlstyle
+          },
+          /**
+           * @description 跳转到搜索结果
+           * @param {number} i 第几个
+           * @param {number} offset 偏移量
+           */
+          jump: anchor
+            ? (i, offset) => {
+                if (i > 0 && i <= res.length) {
+                  vm.navigateTo('search' + i, offset)
+                }
+              }
+            : undefined
+        })
+      }, 200)
+    })
+  }
+}
+
+export default Search

package/components/oxy-rich-text/mp-html/style/index.js

@@ -0,0 +1,129 @@
+/**
+ * @fileoverview style 插件
+ */
+// #ifndef APP-PLUS-NVUE
+import Parser  from './parser'
+// #endif
+
+function Style () {
+  this.styles = []
+}
+
+// #ifndef APP-PLUS-NVUE
+Style.prototype.onParse = function (node, vm) {
+  // 获取样式
+  if (node.name === 'style' && node.children.length && node.children[0].type === 'text') {
+    this.styles = this.styles.concat(new Parser().parse(node.children[0].text))
+  } else if (node.name) {
+    // 匹配样式（对非文本标签）
+    // 存储不同优先级的样式 name < class < id < 后代
+    let matched = ['', '', '', '']
+    for (let i = 0, len = this.styles.length; i < len; i++) {
+      const item = this.styles[i]
+      let res = match(node, item.key || item.list[item.list.length - 1])
+      let j
+      if (res) {
+        // 后代选择器
+        if (!item.key) {
+          j = item.list.length - 2
+          for (let k = vm.stack.length; j >= 0 && k--;) {
+            // 子选择器
+            if (item.list[j] === '>') {
+              // 错误情况
+              if (j < 1 || j > item.list.length - 2) break
+              if (match(vm.stack[k], item.list[j - 1])) {
+                j -= 2
+              } else {
+                j++
+              }
+            } else if (match(vm.stack[k], item.list[j])) {
+              j--
+            }
+          }
+          res = 4
+        }
+        if (item.key || j < 0) {
+          // 添加伪类
+          if (item.pseudo && node.children) {
+            let text
+            item.style = item.style.replace(/content:([^;]+)/, (_, $1) => {
+              text = $1.replace(/['"]/g, '')
+                // 处理 attr 函数
+                .replace(/attr\((.+?)\)/, (_, $1) => node.attrs[$1.trim()] || '')
+                // 编码 \xxx
+                .replace(/\\(\w{4})/, (_, $1) => String.fromCharCode(parseInt($1, 16)))
+              return ''
+            })
+            const pseudo = {
+              name: 'span',
+              attrs: {
+                style: item.style
+              },
+              children: [{
+                type: 'text',
+                text
+              }]
+            }
+            if (item.pseudo === 'before') {
+              node.children.unshift(pseudo)
+            } else {
+              node.children.push(pseudo)
+            }
+          } else {
+            matched[res - 1] += item.style + (item.style[item.style.length - 1] === ';' ? '' : ';')
+          }
+        }
+      }
+    }
+    matched = matched.join('')
+    if (matched.length > 2) {
+      node.attrs.style = matched + (node.attrs.style || '')
+    }
+  }
+}
+
+/**
+ * @description 匹配样式
+ * @param {object} node 要匹配的标签
+ * @param {string|string[]} keys 选择器
+ * @returns {number} 0：不匹配；1：name 匹配；2：class 匹配；3：id 匹配
+ */
+function match (node, keys) {
+  function matchItem (key) {
+    if (key[0] === '#') {
+      // 匹配 id
+      if (node.attrs.id && node.attrs.id.trim() === key.substr(1)) return 3
+    } else if (key[0] === '.') {
+      // 匹配 class
+      key = key.substr(1)
+      const selectors = (node.attrs.class || '').split(' ')
+      for (let i = 0; i < selectors.length; i++) {
+        if (selectors[i].trim() === key) return 2
+      }
+    } else if (node.name === key) {
+      // 匹配 name
+      return 1
+    }
+    return 0
+  }
+
+  // 多选择器交集
+  if (keys instanceof Array) {
+    let res = 0
+    for (let j = 0; j < keys.length; j++) {
+      const tmp = matchItem(keys[j])
+      // 任意一个不匹配就失败
+      if (!tmp) return 0
+      // 优先级最大的一个作为最终优先级
+      if (tmp > res) {
+        res = tmp
+      }
+    }
+    return res
+  }
+
+  return matchItem(keys)
+}
+// #endif
+
+export default Style

package/components/oxy-rich-text/mp-html/style/parser.js

@@ -0,0 +1,175 @@
+const blank = {
+  ' ': true,
+  '\n': true,
+  '\t': true,
+  '\r': true,
+  '\f': true
+}
+
+function Parser () {
+  this.styles = []
+  this.selectors = []
+}
+
+/**
+ * @description 解析 css 字符串
+ * @param {string} content css 内容
+ */
+Parser.prototype.parse = function (content) {
+  new Lexer(this).parse(content)
+  return this.styles
+}
+
+/**
+ * @description 解析到一个选择器
+ * @param {string} name 名称
+ */
+Parser.prototype.onSelector = function (name) {
+  // 不支持的选择器
+  if (name.includes('[') || name.includes('*') || name.includes('@')) return
+  const selector = {}
+  // 伪类
+  if (name.includes(':')) {
+    const info = name.split(':')
+    const pseudo = info.pop()
+    if (pseudo === 'before' || pseudo === 'after') {
+      selector.pseudo = pseudo
+      name = info[0]
+    } else return
+  }
+
+  // 分割交集选择器
+  function splitItem (str) {
+    const arr = []
+    let i, start
+    for (i = 1, start = 0; i < str.length; i++) {
+      if (str[i] === '.' || str[i] === '#') {
+        arr.push(str.substring(start, i))
+        start = i
+      }
+    }
+    if (!arr.length) {
+      return str
+    } else {
+      arr.push(str.substring(start, i))
+      return arr
+    }
+  }
+
+  // 后代选择器
+  if (name.includes(' ')) {
+    selector.list = []
+    const list = name.split(' ')
+    for (let i = 0; i < list.length; i++) {
+      if (list[i].length) {
+        // 拆分子选择器
+        const arr = list[i].split('>')
+        for (let j = 0; j < arr.length; j++) {
+          selector.list.push(splitItem(arr[j]))
+          if (j < arr.length - 1) {
+            selector.list.push('>')
+          }
+        }
+      }
+    }
+  } else {
+    selector.key = splitItem(name)
+  }
+
+  this.selectors.push(selector)
+}
+
+/**
+ * @description 解析到选择器内容
+ * @param {string} content 内容
+ */
+Parser.prototype.onContent = function (content) {
+  // 并集选择器
+  for (let i = 0; i < this.selectors.length; i++) {
+    this.selectors[i].style = content
+  }
+  this.styles = this.styles.concat(this.selectors)
+  this.selectors = []
+}
+
+/**
+ * @description css 词法分析器
+ * @param {object} handler 高层处理器
+ */
+function Lexer (handler) {
+  this.selector = ''
+  this.style = ''
+  this.handler = handler
+}
+
+Lexer.prototype.parse = function (content) {
+  this.i = 0
+  this.content = content
+  this.state = this.blank
+  for (let len = content.length; this.i < len; this.i++) {
+    this.state(content[this.i])
+  }
+}
+
+Lexer.prototype.comment = function () {
+  this.i = this.content.indexOf('*/', this.i) + 1
+  if (!this.i) {
+    this.i = this.content.length
+  }
+}
+
+Lexer.prototype.blank = function (c) {
+  if (!blank[c]) {
+    if (c === '/' && this.content[this.i + 1] === '*') {
+      this.comment()
+      return
+    }
+    this.selector += c
+    this.state = this.name
+  }
+}
+
+Lexer.prototype.name = function (c) {
+  if (c === '/' && this.content[this.i + 1] === '*') {
+    this.comment()
+    return
+  }
+  if (c === '{' || c === ',' || c === ';') {
+    this.handler.onSelector(this.selector.trimEnd())
+    this.selector = ''
+    if (c !== '{') {
+      while (blank[this.content[++this.i]]);
+    }
+    if (this.content[this.i] === '{') {
+      this.floor = 1
+      this.state = this.val
+    } else {
+      this.selector += this.content[this.i]
+    }
+  } else if (blank[c]) {
+    this.selector += ' '
+  } else {
+    this.selector += c
+  }
+}
+
+Lexer.prototype.val = function (c) {
+  if (c === '/' && this.content[this.i + 1] === '*') {
+    this.comment()
+    return
+  }
+  if (c === '{') {
+    this.floor++
+  } else if (c === '}') {
+    this.floor--
+    if (!this.floor) {
+      this.handler.onContent(this.style)
+      this.style = ''
+      this.state = this.blank
+      return
+    }
+  }
+  this.style += c
+}
+
+export default Parser

package/components/oxy-rich-text/mp-html/template/index.js

@@ -0,0 +1,67 @@
+/**
+ * @fileoverview 插件入口文件模板
+ */
+
+const data = {} // 全局数据
+
+/**
+ * @description 组件被创建时将实例化插件
+ * @param {Component} vm 组件实例
+ */
+function Plugin (vm) {
+  this.vm = vm // 保存实例在其他周期使用
+  this.compData = {} // 仅在单个组件中使用的数据
+  data.xxx = 'xxx' // 记录全局数据
+}
+
+/**
+ * @description html 数据更新时触发
+ * @param {string} content 要更新的 html 字符串
+ * @param {object} config 解析配置
+ * @returns {string|void} 如果要对 html 字符串进行一些预处理，则返回处理后的字符串
+ */
+Plugin.prototype.onUpdate = function (content, config) {
+  config.ignoreTags.xxx = true // 移除 xxx 标签
+  // 对 html 内容进行预处理并返回修改，没有修改则不需要返回
+  return content
+}
+
+/**
+ * @description 解析到一个标签时触发
+ * @param {object} node 标签
+ * @param {object} parser 解析器实例
+ * @returns {boolean|void} 如果返回 false 将移除该标签
+ */
+Plugin.prototype.onParse = function (node, parser) {
+  // 处理文本标签
+  if (node.type === 'text') {
+    // node.text 文本内容
+  } else {
+    // 处理元素标签
+    // node.name 标签名
+    // node.attrs 属性列表
+    // node.children 子节点（非自闭合标签有）
+
+    if (node.name === 'xxx') {
+      parser.expose() // 如果该标签不能被 rich-text 包含，需要调用此方法暴露出来
+      // parser.options 组件传入的一些解析属性
+      // parser.stack 可以从栈中获取祖先节点
+    }
+  }
+}
+
+/**
+ * @description dom 树加载完毕时触发（load 事件）
+ */
+Plugin.prototype.onLoad = function () {
+  // 可以获取媒体 context 对象等
+}
+
+/**
+ * @description 组件被移除时触发
+ */
+Plugin.prototype.onDetached = function () {
+  // 可以释放一些必要的资源（计时器等）
+}
+
+export default Plugin

package/components/oxy-rich-text/mp-html/txv-video/index.js

@@ -0,0 +1,46 @@
+/**
+ * @fileoverview txv-video 插件
+ * Include txv-video (https://github.com/tvfe/txv-miniprogram-plugin)
+ */
+const TxvVideo = function (vm) {
+  this.vm = vm
+}
+
+// #ifdef MP-WEIXIN || MP-QQ
+try {
+  const TxvContext = requirePlugin('tencentvideo')
+
+  TxvVideo.prototype.onLoad = function () {
+    setTimeout(() => {
+      for (let i = 0; i < this.videos.length; i++) {
+        const ctx = TxvContext.getTxvContext(this.videos[i])
+        ctx.id = this.videos[i]
+        this.vm._videos.push(ctx)
+      }
+    }, 50)
+  }
+} catch (e) {
+  console.error('使用txv-video扩展需注册腾讯视频插件')
+}
+
+TxvVideo.prototype.onUpdate = function (_, config) {
+  config.trustTags['txv-video'] = true
+  this.videos = []
+}
+
+TxvVideo.prototype.onParse = function (node, parser) {
+  if (node.name === 'iframe' && (node.attrs.src || '').includes('vid')) {
+    const vid = node.attrs.src.match(/vid=([^&\s]+)/)
+    if (vid) {
+      node.name = 'txv-video'
+      node.attrs.vid = vid[1]
+      this.videos.push(vid[1])
+      node.attrs.src = undefined
+      parser.expose()
+    }
+  }
+}
+
+// #endif
+
+export default TxvVideo