@tarojs/taro-h5 3.3.13 → 3.3.17

package/src/api/image/chooseImage.js

@@ -1,87 +0,0 @@
-import { shouleBeObject, getParameterError } from '../utils'
-
-/**
- * 从本地相册选择图片或使用相机拍照。
- * @param {Object} object 参数
- * @param {string[]} [object.sourceType=['album', 'camera']] 选择图片的来源（h5端未实现）
- * @param {string[]} [object.sizeType=['original', 'compressed']] 所选的图片的尺寸（h5端未实现）
- * @param {number} [object.count=9] 最多可以选择的图片张数
- * @param {function} [object.success] 接口调用成功的回调函数
- * @param {function} [object.fail] 接口调用失败的回调函数
- * @param {function} [object.complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- * @param {string} [object.imageId] 用来上传的input元素ID（仅h5端）
- */
-const chooseImage = function (options) {
-  // options must be an Object
-  const isObject = shouleBeObject(options)
-  if (!isObject.res) {
-    const res = { errMsg: `chooseImage${isObject.msg}` }
-    console.error(res.errMsg)
-    return Promise.reject(res)
-  }
-
-  const { count = 1, success, fail, complete, imageId = 'taroChooseImage' } = options
-  const res = {
-    errMsg: 'chooseImage:ok',
-    tempFilePaths: [],
-    tempFiles: []
-  }
-
-  if (count && typeof count !== 'number') {
-    res.errMsg = getParameterError({
-      name: 'chooseImage',
-      para: 'count',
-      correct: 'Number',
-      wrong: count
-    })
-    console.error(res.errMsg)
-    typeof fail === 'function' && fail(res)
-    typeof complete === 'function' && complete(res)
-    return Promise.reject(res)
-  }
-
-  let taroChooseImageId = document.getElementById(imageId)
-  if (!taroChooseImageId) {
-    const obj = document.createElement('input')
-    obj.setAttribute('type', 'file')
-    obj.setAttribute('id', imageId)
-    if (count > 1) {
-      obj.setAttribute('multiple', 'multiple')
-    }
-    obj.setAttribute('accept', 'image/*')
-    obj.setAttribute('style', 'position: fixed; top: -4000px; left: -3000px; z-index: -300;')
-    document.body.appendChild(obj)
-    taroChooseImageId = document.getElementById(imageId)
-  } else {
-    if (count > 1) {
-      taroChooseImageId.setAttribute('multiple', 'multiple')
-    } else {
-      taroChooseImageId.removeAttribute('multiple')
-    }
-  }
-  let taroChooseImageCallback
-  const taroChooseImagePromise = new Promise(resolve => {
-    taroChooseImageCallback = resolve
-  })
-  const TaroMouseEvents = document.createEvent('MouseEvents')
-  TaroMouseEvents.initEvent('click', true, true)
-  taroChooseImageId.dispatchEvent(TaroMouseEvents)
-  taroChooseImageId.onchange = function (e) {
-    const arr = [...e.target.files]
-    arr && arr.forEach(item => {
-      const blob = new Blob([item], {
-        type: item.type
-      })
-      const url = URL.createObjectURL(blob)
-      res.tempFilePaths.push(url)
-      res.tempFiles.push({ path: url, size: item.size, type: item.type, originalFileObj: item })
-    })
-    typeof success === 'function' && success(res)
-    typeof complete === 'function' && complete(res)
-    taroChooseImageCallback(res)
-    e.target.value = ''
-  }
-  return taroChooseImagePromise
-}
-
-export default chooseImage

package/src/api/image/index.js

@@ -1,7 +0,0 @@
-/**
- * previewImage api基于开源的React组件[react-wx-images-viewer](https://github.com/react-ld/react-wx-images-viewer)开发，感谢！
- */
-
-export { default as chooseImage } from './chooseImage'
-export { default as getImageInfo } from './getImageInfo'
-export { previewImage } from './previewImage'

package/src/api/index.js

@@ -1,29 +0,0 @@
-/* 未支持的api */
-export * from './unsupportedApi'
-
-/* 已实现api */
-export * from './accelerometer'
-export * from './audio'
-export * from './canvas'
-export * from './clipboard'
-export * from './compass'
-export * from './createAnimation'
-export * from './createSelectorQuery'
-export * from './deviceMotion'
-export * from './fileTransfer'
-export * from './image'
-export * from './interactive'
-export * from './location'
-export * from './navigationBar'
-export * from './open'
-export * from './others'
-export * from './pullDownRefresh'
-export * from './request'
-export * from './scroll'
-export * from './storage'
-export * from './system'
-export * from './tabBar'
-export * from './vibrate'
-export * from './video'
-export * from './webSocket'
-export * from './window'

package/src/api/interactive/actionSheet.js

@@ -1,214 +0,0 @@
-import { inlineStyle, setTransform } from '../utils'
-
-const noop = function () {}
-export default class ActionSheet {
-  options = {
-    itemList: [],
-    itemColor: '#000000',
-    success: noop,
-    fail: noop,
-    complete: noop
-  }
-
-  style = {
-    maskStyle: {
-      position: 'fixed',
-      'z-index': '1000',
-      top: '0',
-      right: '0',
-      left: '0',
-      bottom: '0',
-      background: 'rgba(0,0,0,0.6)'
-    },
-    actionSheetStyle: {
-      'z-index': '4999',
-      position: 'fixed',
-      left: '0',
-      bottom: '0',
-      '-webkit-transform': 'translate(0, 100%)',
-      transform: 'translate(0, 100%)',
-      width: '100%',
-      'line-height': '1.6',
-      background: '#EFEFF4',
-      '-webkit-transition': '-webkit-transform .3s',
-      transition: 'transform .3s'
-    },
-    menuStyle: {
-      'background-color': '#FCFCFD'
-    },
-    cellStyle: {
-      position: 'relative',
-      padding: '10px 0',
-      'text-align': 'center',
-      'font-size': '18px'
-    },
-    cancelStyle: {
-      'margin-top': '6px',
-      padding: '10px 0',
-      'text-align': 'center',
-      'font-size': '18px',
-      color: '#000000',
-      'background-color': '#FCFCFD'
-    }
-  }
-
-  lastConfig = {}
-
-  create (options = {}) {
-    // style
-    const { maskStyle, actionSheetStyle, menuStyle, cellStyle, cancelStyle } = this.style
-
-    // configuration
-    const config = {
-      ...this.options,
-      ...options
-    }
-
-    this.lastConfig = config
-
-    // wrapper
-    this.el = document.createElement('div')
-    this.el.className = 'taro__actionSheet'
-    this.el.style.opacity = '0'
-    this.el.style.transition = 'opacity 0.2s linear'
-
-    // mask
-    const mask = document.createElement('div')
-    mask.setAttribute('style', inlineStyle(maskStyle))
-
-    // actionSheet
-    this.actionSheet = document.createElement('div')
-    this.actionSheet.setAttribute('style', inlineStyle(actionSheetStyle))
-
-    // menu
-    this.menu = document.createElement('div')
-    this.menu.setAttribute('style', inlineStyle({
-      ...menuStyle,
-      color: config.itemColor
-    }))
-
-    // cells
-    this.cells = config.itemList.map((item, index) => {
-      const cell = document.createElement('div')
-      cell.className = 'taro-actionsheet__cell'
-      cell.setAttribute('style', inlineStyle(cellStyle))
-      cell.textContent = item
-      cell.dataset.tapIndex = index
-      cell.onclick = e => this.onCellClick(e)
-      return cell
-    })
-
-    // cancel
-    this.cancel = document.createElement('div')
-    this.cancel.setAttribute('style', inlineStyle(cancelStyle))
-    this.cancel.textContent = '取消'
-
-    // result
-    this.cells.forEach(item => this.menu.appendChild(item))
-    this.actionSheet.appendChild(this.menu)
-    this.actionSheet.appendChild(this.cancel)
-    this.el.appendChild(mask)
-    this.el.appendChild(this.actionSheet)
-
-    // callbacks
-    const cb = () => {
-      this.hide()
-      const res = { errMsg: 'showActionSheet:fail cancel' }
-      config.fail(res)
-      config.complete(res)
-      this.rejectHandler(res)
-    }
-    mask.onclick = cb
-    this.cancel.onclick = cb
-
-    // show immediately
-    document.body.appendChild(this.el)
-    setTimeout(() => {
-      this.el.style.opacity = '1'
-      setTransform(this.actionSheet, 'translate(0, 0)')
-    }, 0)
-
-    return new Promise((resolve, reject) => {
-      this.resolveHandler = resolve
-      this.rejectHandler = reject
-    })
-  }
-
-  show (options = {}) {
-    const config = {
-      ...this.options,
-      ...options
-    }
-
-    this.lastConfig = config
-
-    if (this.hideOpacityTimer) clearTimeout(this.hideOpacityTimer)
-    if (this.hideDisplayTimer) clearTimeout(this.hideDisplayTimer)
-
-    // itemColor
-    if (config.itemColor) this.menu.style.color = config.itemColor
-
-    // cells
-    const { cellStyle } = this.style
-
-    config.itemList.forEach((item, index) => {
-      let cell
-      if (this.cells[index]) {
-        // assign new content
-        cell = this.cells[index]
-      } else {
-        // create new cell
-        cell = document.createElement('div')
-        cell.className = 'taro-actionsheet__cell'
-        cell.setAttribute('style', inlineStyle(cellStyle))
-        cell.dataset.tapIndex = index
-        this.cells.push(cell)
-        this.menu.appendChild(cell)
-      }
-      cell.textContent = item
-      cell.onclick = e => this.onCellClick(e)
-    })
-    const cellsLen = this.cells.length
-    const itemListLen = config.itemList.length
-    if (cellsLen > itemListLen) {
-      for (let i = itemListLen; i < cellsLen; i++) {
-        this.menu.removeChild(this.cells[i])
-      }
-      this.cells.splice(itemListLen)
-    }
-
-    // show
-    this.el.style.display = 'block'
-    setTimeout(() => {
-      this.el.style.opacity = '1'
-      setTransform(this.actionSheet, 'translate(0, 0)')
-    }, 0)
-
-    return new Promise((resolve, reject) => {
-      this.resolveHandler = resolve
-      this.rejectHandler = reject
-    })
-  }
-
-  onCellClick (e) {
-    this.hide()
-    const res = {
-      errMsg: 'showActionSheet:ok',
-      tapIndex: +e.currentTarget.dataset.tapIndex
-    }
-    this.lastConfig.success && this.lastConfig.success(res)
-    this.lastConfig.complete && this.lastConfig.complete(res)
-    this.resolveHandler(res)
-  }
-
-  hide () {
-    if (this.hideOpacityTimer) clearTimeout(this.hideOpacityTimer)
-    if (this.hideDisplayTimer) clearTimeout(this.hideDisplayTimer)
-
-    this.hideOpacityTimer = setTimeout(() => {
-      this.el.style.opacity = '0'
-      setTransform(this.actionSheet, 'translate(0, 100%)')
-      this.hideDisplayTimer = setTimeout(() => { this.el.style.display = 'none' }, 200)
-    }, 0)
-  }
-}

package/src/api/interactive/modal.js

@@ -1,256 +0,0 @@
-import { inlineStyle } from '../utils'
-
-const noop = function () {}
-
-export default class Modal {
-  options = {
-    title: '',
-    content: '',
-    showCancel: true,
-    cancelText: '取消',
-    cancelColor: '#000000',
-    confirmText: '确定',
-    confirmColor: '#3CC51F',
-    success: noop,
-    fail: noop,
-    complete: noop
-  }
-
-  style = {
-    maskStyle: {
-      position: 'fixed',
-      'z-index': '1000',
-      top: '0',
-      right: '0',
-      left: '0',
-      bottom: '0',
-      background: 'rgba(0,0,0,0.6)'
-    },
-    modalStyle: {
-      'z-index': '4999',
-      position: 'fixed',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      width: '80%',
-      'max-width': '300px',
-      'border-radius': '3px',
-      'text-align': 'center',
-      'line-height': '1.6',
-      overflow: 'hidden',
-      background: '#FFFFFF'
-    },
-    titleStyle: {
-      padding: '20px 24px 9px',
-      'font-size': '18px'
-    },
-    textStyle: {
-      padding: '0 24px 12px',
-      'min-height': '40px',
-      'font-size': '15px',
-      'line-height': '1.3',
-      color: '#808080'
-    },
-    footStyle: {
-      position: 'relative',
-      'line-height': '48px',
-      'font-size': '18px',
-      display: 'flex'
-    },
-    btnStyle: {
-      position: 'relative',
-      '-webkit-box-flex': '1',
-      '-webkit-flex': '1',
-      flex: '1'
-    }
-  }
-
-  create (options = {}) {
-    // style
-    const { maskStyle, modalStyle, titleStyle, textStyle, footStyle, btnStyle } = this.style
-
-    // configuration
-    const config = {
-      ...this.options,
-      ...options
-    }
-
-    // wrapper
-    this.el = document.createElement('div')
-    this.el.className = 'taro__modal'
-    this.el.style.opacity = '0'
-    this.el.style.transition = 'opacity 0.2s linear'
-
-    // mask
-    const mask = document.createElement('div')
-    mask.className = 'taro-modal__mask'
-    mask.setAttribute('style', inlineStyle(maskStyle))
-
-    // modal
-    const modal = document.createElement('div')
-    modal.className = 'taro-modal__content'
-    modal.setAttribute('style', inlineStyle(modalStyle))
-
-    // title
-    const titleCSS = config.title ? titleStyle : {
-      ...titleStyle,
-      display: 'none'
-    }
-    this.title = document.createElement('div')
-
-    this.title.className = 'taro-modal__title'
-    this.title.setAttribute('style', inlineStyle(titleCSS))
-    this.title.textContent = config.title
-
-    // text
-    const textCSS = config.title ? textStyle : {
-      ...textStyle,
-      padding: '40px 20px 26px',
-      color: '#353535'
-    }
-    this.text = document.createElement('div')
-    this.text.className = 'taro-modal__text'
-    this.text.setAttribute('style', inlineStyle(textCSS))
-    this.text.textContent = config.content
-
-    // foot
-    const foot = document.createElement('div')
-    foot.className = 'taro-modal__foot'
-    foot.setAttribute('style', inlineStyle(footStyle))
-
-    // cancel button
-    const cancelCSS = {
-      ...btnStyle,
-      color: config.cancelColor,
-      display: config.showCancel ? 'block' : 'none'
-    }
-    this.cancel = document.createElement('div')
-    this.cancel.className = 'taro-model__btn taro-model__cancel'
-    this.cancel.setAttribute('style', inlineStyle(cancelCSS))
-    this.cancel.textContent = config.cancelText
-    this.cancel.onclick = () => {
-      this.hide()
-      const res = this.getRes('cancel')
-      config.success(res)
-      config.complete(res)
-      this.resolveHandler(res)
-    }
-
-    // confirm button
-    this.confirm = document.createElement('div')
-    this.confirm.className = 'taro-model__btn taro-model__confirm'
-    this.confirm.setAttribute('style', inlineStyle(btnStyle))
-    this.confirm.style.color = config.confirmColor
-    this.confirm.textContent = config.confirmText
-    this.confirm.onclick = () => {
-      this.hide()
-      const res = this.getRes('confirm')
-      config.success(res)
-      config.complete(res)
-      this.resolveHandler(res)
-    }
-
-    // result
-    foot.appendChild(this.cancel)
-    foot.appendChild(this.confirm)
-    modal.appendChild(this.title)
-    modal.appendChild(this.text)
-    modal.appendChild(foot)
-    this.el.appendChild(mask)
-    this.el.appendChild(modal)
-
-    // show immediately
-    document.body.appendChild(this.el)
-    setTimeout(() => { this.el.style.opacity = '1' }, 0)
-
-    return new Promise(resolve => (this.resolveHandler = resolve))
-  }
-
-  getRes (type) {
-    const res = {
-      errMsg: 'showModal:ok',
-      cancel: false,
-      confirm: false
-    }
-    res[type] = true
-    return res
-  }
-
-  show (options = {}) {
-    const config = {
-      ...this.options,
-      ...options
-    }
-
-    if (this.hideOpacityTimer) clearTimeout(this.hideOpacityTimer)
-    if (this.hideDisplayTimer) clearTimeout(this.hideDisplayTimer)
-
-    // title & text
-    const { textStyle } = this.style
-
-    if (config.title) {
-      this.title.textContent = config.title
-      // none => block
-      this.title.style.display = 'block'
-      this.text.setAttribute('style', inlineStyle(textStyle))
-    } else {
-      // block => none
-      this.title.style.display = 'none'
-      const textCSS = {
-        ...textStyle,
-        padding: '40px 20px 26px',
-        color: '#353535'
-      }
-      this.text.setAttribute('style', inlineStyle(textCSS))
-    }
-
-    this.text.textContent = config.content || ''
-
-    // showCancel
-    this.cancel.style.display = config.showCancel ? 'block' : 'none'
-
-    // cancelText
-    this.cancel.textContent = config.cancelText || ''
-
-    // cancelColor
-    this.cancel.style.color = config.cancelColor || undefined
-
-    // confirmText
-    this.confirm.textContent = config.confirmText || ''
-
-    // confirmColor
-    this.confirm.style.color = config.confirmColor || undefined
-
-    // cbs
-    this.cancel.onclick = () => {
-      this.hide()
-      const res = this.getRes('cancel')
-      config.success(res)
-      config.complete(res)
-      this.resolveHandler(res)
-    }
-    this.confirm.onclick = () => {
-      this.hide()
-      const res = this.getRes('confirm')
-      config.success(res)
-      config.complete(res)
-      this.resolveHandler(res)
-    }
-
-    // show
-    this.el.style.display = 'block'
-    setTimeout(() => { this.el.style.opacity = '1' }, 0)
-
-    return new Promise(resolve => (this.resolveHandler = resolve))
-  }
-
-  hide () {
-    if (this.hideOpacityTimer) clearTimeout(this.hideOpacityTimer)
-    if (this.hideDisplayTimer) clearTimeout(this.hideDisplayTimer)
-
-    this.hideOpacityTimer = setTimeout(() => {
-      this.el.style.opacity = '0'
-      this.hideDisplayTimer = setTimeout(() => { this.el.style.display = 'none' }, 200)
-    }, 0)
-  }
-}