iemotion/src/js/index.js

评论时快速找到表情。

class Emotion {
  constructor(fileUrl) {
    this.fileName = fileUrl
    this.init()
  }
  init() {
    // 获取分类
    this.getAllCategory()
  }

  // 获取所有表情分类
  getAllCategory() {
    $.ajax({
      url: this.fileName,
      type: 'get',
      success: function (backData) {
        $('.btns').html('')
        var data = backData.data

        for (var item in data) {
          const t = `<button type="button" class="btn btn-outline-info" onclick='emotion.getImg("${data[item].url}","${data[item].name}")'>${data[item].name}</button>`
          if (data[item].name == 'default') {
            $('.btns').prepend(t)
          } else {
            $('.btns').append(t)
          }
        }
        $('.btns button:first').trigger('click')
      }
    })
  }
  // 获取图片
  getImg(fileUrl, fileName) {
    $('#all_img>ul').html('')
    $('#common_img>ul').html('')
    const _this = this
    $.ajax({
      url: fileUrl,
      type: 'get',
      beforeSend: function () {
        console.log('开始发送请求了')
        $('.mask').show()
      },
      complete: function (e, message) {
        $('.mask').hide()
        if (message !== 'success') {
          // 请求失败
          $('.nav-tabs').before(
            `<div class="alert alert-danger alert-dismissible" role="alert"><button type="button"class="close"data-dismiss="alert"aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>请求出错了</strong>请重新尝试！</div>`
          )
        }
      },
      success: function (t) {
        const allImg = t.all
        console.log(fileUrl)
        _this.insertImg('#all_img>ul', '#url_list', allImg, fileName)
        $('.source').html(
          `<p>当前表情JSON源文件：<a href='${fileUrl}' target="_blank">${fileUrl}</a></p>`
        )
        $('.all_img').trigger('click')
      }
    })
  }

  /**
   * 插入图片和复制的内容
   * @author 小康
   * @date 2021-01-12
   * @param {any} imgElement 存放图片的容器
   * @param {any} copyElement 存放复制图片
   * @param {any} imgList 图片列表
   * @returns {any}
   */
  insertImg(imgElement, copyElement, imgList, fileName) {
    const container = []

    imgList.forEach((value, index) => {
      $(imgElement).append(
        `<li class="item"><div class="img"><img src="${value.url}"class="all_img"><div class="button"><span class="copy" data-clipboard-text="${value.url}">链接</span><span class="copy" data-clipboard-text="<img src='${value.url}' alt='${value.name}'>">IMG标签</span><span class="copy" data-clipboard-text="![${value.name}](${value.url})">Markdown</span></div></div></li>`
      )

      // 像容器中插入当前图片对象
      container.push({
        text: value.name,
        icon: `<img src='${value.url}'>`
      })
    })
    // 返回类型
    const copyList = {}
    copyList[fileName] = {
      type: 'image',
      container
    }
    $(copyElement).text(JSON.stringify(copyList))
  }
}
;(function (window) {
  // window.emotion = new Emotion('https://unpkg.com/iemotion-pic/dist/name.json')
  window.emotion = new Emotion(
    'https://cdn.jsdelivr.net/npm/iemotion-pic@latest/dist/name.json'
  )
  // window.emotion = new Emotion('http://localhost:3000/name.json')
})(window)