@tarojs/taro-h5 3.4.0-beta.0 → 3.4.0-beta.1

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)
-  }
-}

package/src/api/location/chooseLocation.js

@@ -1,143 +0,0 @@
-import './style.css'
-
-function createLocaltionChooser (handler) {
-  const html = `
-<div class='taro_chooselocation'>
-  <div class='taro_chooselocation_bar'>
-    <div class='taro_chooselocation_back'></div>
-    <p class='taro_chooselocation_title'>位置</p>
-    <button class='taro_chooselocation_submit'>完成</button>
-  </div>
-  <iframe class='taro_chooselocation_frame' frameborder='0' src='https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${LOCATION_APIKEY}&referer=myapp'></iframe>
-</div>
-`
-  const container = document.createElement('div')
-  container.innerHTML = html
-  const main = container.querySelector('.taro_chooselocation')
-
-  function show () {
-    setTimeout(() => {
-      main.style.top = '0'
-    })
-  }
-
-  function hide () {
-    main.style.top = '100%'
-  }
-
-  function back () {
-    handler({ errMsg: 'chooseLOcation:fail cancel' })
-    hide()
-  }
-
-  function submit () {
-    handler()
-    hide()
-  }
-
-  function remove () {
-    container.remove()
-    window.removeEventListener('popstate', back)
-  }
-
-  container.querySelector('.taro_chooselocation_back').addEventListener('click', back)
-  container.querySelector('.taro_chooselocation_submit').addEventListener('click', submit)
-
-  window.addEventListener('popstate', back)
-
-  return {
-    show,
-    remove,
-    container
-  }
-}
-
-/**
- * @typedef {Object} OriginalLocationObject
- * @property {string} module
- * @property {{ lat: number, lng: number }} latlng
- * @property {string} poiaddress
- * @property {string} poiname
- * @property {string} cityname
- */
-
-/**
- * @typedef {Object} LocationObject
- * @property {string} errMsg 信息
- * @property {string} name 位置名称
- * @property {string} address 详细地址
- * @property {string} latitude 纬度，浮点数，范围为-90~90，负数表示南纬。使用 gcj02 国测局坐标系
- * @property {string} longitude 经度，浮点数，范围为-180~180，负数表示西经。使用 gcj02 国测局坐标系
- */
-
-/**
- * 打开地图选择位置。
- * @param {Object} object 参数
- * @param {(obj: LocationObject) => void} [object.success] 接口调用成功的回调函数
- * @param {Function} [object.fail] 接口调用失败的回调函数
- * @param {Function} [object.complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-const chooseLocation = ({ success, fail, complete } = {}) => {
-  return new Promise((resolve, reject) => {
-    const choosenLocation = {}
-    const onSuccess = res => {
-      success && success(res)
-      complete && complete(res)
-      resolve(res)
-    }
-    const onError = res => {
-      fail && fail(res)
-      complete && complete(res)
-      reject(res)
-    }
-
-    // eslint-disable-next-line
-    if (!LOCATION_APIKEY) {
-      const errMsg = 'chooseLocation:fail LOCATION_APIKEY needed'
-      console.warn('chooseLocation api 依赖腾讯地图定位api，需要在defineConstants中配置LOCATION_APIKEY')
-      return onError({ errMsg })
-    }
-
-    const onMessage = event => {
-      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
-      /** @type {OriginalLocationObject} */
-      const loc = event.data
-
-      // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
-      if (!loc || loc.module !== 'locationPicker') return
-
-      choosenLocation.name = loc.poiname
-      choosenLocation.address = loc.poiaddress
-      choosenLocation.latitude = loc.latlng.lat
-      choosenLocation.longitude = loc.latlng.lng
-    }
-
-    const chooser = createLocaltionChooser(res => {
-      if (res) {
-        onError(res)
-      } else {
-        if (choosenLocation.latitude && choosenLocation.longitude) {
-          onSuccess({
-            errMsg: 'chooseLocation:ok',
-            ...choosenLocation
-          })
-        } else {
-          onError({
-            errMsg: 'chooseLocation:fail'
-          })
-        }
-      }
-      window.removeEventListener('message', onMessage, false)
-      setTimeout(() => {
-        chooser.remove()
-      }, 300)
-    })
-
-    document.body.appendChild(chooser.container)
-
-    window.addEventListener('message', onMessage, false)
-    chooser.show()
-  })
-}
-
-export default chooseLocation

package/src/api/location/index.js

@@ -1,5 +0,0 @@
-import { processOpenapi } from '../utils/index'
-
-export { default as chooseLocation } from './chooseLocation'
-export const getLocation = processOpenapi('getLocation')
-export const openLocation = processOpenapi('openLocation', { scale: 18 })

package/src/api/navigationBar/index.js

@@ -1,57 +0,0 @@
-import { shouldBeObject, getParameterError } from '../utils'
-
-export function setNavigationBarTitle (options) {
-  // options must be an Object
-  const isObject = shouldBeObject(options)
-  if (!isObject.res) {
-    const res = { errMsg: `setNavigationBarTitle${isObject.msg}` }
-    console.error(res.errMsg)
-    return Promise.reject(res)
-  }
-
-  const { title, success, fail, complete } = options
-  const res = { errMsg: 'setNavigationBarTitle:ok' }
-
-  if (!title || typeof title !== 'string') {
-    res.errMsg = getParameterError({
-      name: 'setNavigationBarTitle',
-      para: 'title',
-      correct: 'String',
-      wrong: title
-    })
-    console.error(res.errMsg)
-    typeof fail === 'function' && fail(res)
-    typeof complete === 'function' && complete(res)
-    return Promise.reject(res)
-  }
-
-  if (document.title !== title) {
-    document.title = title
-  }
-
-  typeof success === 'function' && success(res)
-  typeof complete === 'function' && complete(res)
-
-  return Promise.resolve(res)
-}
-
-/**
- * @typedef {Object} NavigationBarColorParam
- * @property {string} frontColor 前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
- * @property {string} backgroundColor 背景颜色值，有效值为十六进制颜色
- * @property {{duration: number, timingFunc: string}} animation 动画效果
- * @property {function} [success] 接口调用成功的回调函数
- * @property {function} [fail] 接口调用失败的回调函数
- * @property {function} [complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-
-/**
- * 设置页面导航条颜色
- * @param {NavigationBarColorParam} options
- */
-export function setNavigationBarColor (options) {
-  const meta = document.createElement('meta')
-  meta.setAttribute('name', 'theme-color')
-  meta.setAttribute('content', options.backgroundColor)
-  document.head.appendChild(meta)
-}

package/src/api/open/index.js

@@ -1,5 +0,0 @@
-import { processOpenapi } from '../utils'
-
-export const requestPayment = processOpenapi('chooseWXPay', undefined, undefined, options => {
-  return Object.assign(options, { timestamp: Number.parseInt(options.timeStamp, 10) })
-})

package/src/api/others/index.js

@@ -1,43 +0,0 @@
-import { fromByteArray, toByteArray } from 'base64-js'
-import { shouldBeObject, getParameterError } from '../utils'
-
-export function arrayBufferToBase64 (arrayBuffer) {
-  return fromByteArray(arrayBuffer)
-}
-
-export function base64ToArrayBuffer (base64) {
-  return toByteArray(base64)
-}
-
-export function makePhoneCall (options) {
-  // options must be an Object
-  const isObject = shouldBeObject(options)
-  if (!isObject.res) {
-    const res = { errMsg: `makePhoneCall${isObject.msg}` }
-    console.error(res.errMsg)
-    return Promise.reject(res)
-  }
-
-  const { phoneNumber, success, fail, complete } = options
-  const res = { errMsg: 'makePhoneCall:ok' }
-
-  if (typeof phoneNumber !== 'string') {
-    res.errMsg = getParameterError({
-      name: 'makePhoneCall',
-      para: 'phoneNumber',
-      correct: 'String',
-      wrong: phoneNumber
-    })
-    console.error(res.errMsg)
-    typeof fail === 'function' && fail(res)
-    typeof complete === 'function' && complete(res)
-    return Promise.reject(res)
-  }
-
-  window.location.href = `tel:${phoneNumber}`
-
-  typeof success === 'function' && success(res)
-  typeof complete === 'function' && complete(res)
-
-  return Promise.resolve(res)
-}

package/src/api/pullDownRefresh/index.js

@@ -1,51 +0,0 @@
-import Taro from '@tarojs/api'
-/**
- * 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
- * @param {Object} object 参数
- */
-const startPullDownRefresh = function (object = {}) {
-  return new Promise((resolve, reject) => {
-    const { success, fail, complete } = object
-    const res = {}
-    Taro.eventCenter.trigger('__taroStartPullDownRefresh', {
-      successHandler: () => {
-        success && success(res)
-        complete && complete()
-        resolve(res)
-      },
-      errorHandler: () => {
-        fail && fail(res)
-        complete && complete()
-        reject(res)
-      }
-    })
-  })
-}
-
-/**
- * 停止当前页面下拉刷新。
- * @param {Object} object 参数
- */
-const stopPullDownRefresh = function (object = {}) {
-  return new Promise((resolve, reject) => {
-    const { success, fail, complete } = object
-    const res = {}
-    Taro.eventCenter.trigger('__taroStopPullDownRefresh', {
-      successHandler: () => {
-        success && success(res)
-        complete && complete()
-        resolve(res)
-      },
-      errorHandler: () => {
-        fail && fail(res)
-        complete && complete()
-        reject(res)
-      }
-    })
-  })
-}
-
-export {
-  startPullDownRefresh,
-  stopPullDownRefresh
-}

package/src/api/scroll/index.js

@@ -1,99 +0,0 @@
-import { getTimingFunc, easeInOut } from '../utils/index'
-
-/**
- * @typedef {object} PageScrollToParam pageScrollTo参数
- * @property {number} scrollTop 滚动到页面的目标位置，单位 px
- * @property {string} selector 选择器, css selector
- * @property {number} [duration=300] 滚动动画的时长，单位 ms
- * @property {function} [success] 接口调用成功的回调函数
- * @property {function} [fail] 接口调用失败的回调函数
- * @property {function} [complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
-
-let scrollFunc
-let timer
-const FRAME_DURATION = 17
-
-/**
- * 将页面滚动到目标位置
- * @param {PageScrollToParam} object 参数
- */
-export const pageScrollTo = ({ scrollTop, selector, duration = 300, success, fail, complete }) => {
-  return new Promise((resolve, reject) => {
-    try {
-      if (scrollTop === undefined && !selector) {
-        throw Error('"scrollTop" 或 "selector" 需要其之一')
-      }
-
-      let el
-      if (document.querySelector('.taro-tabbar__tabbar') === null) {
-        // 没设置tabbar
-        el = window
-      } else {
-        // 有设置tabbar
-        el = document.querySelector('.taro-tabbar__panel') || window
-      }
-
-      if (!scrollFunc) {
-        if (el === window) {
-          scrollFunc = pos => {
-            if (pos === undefined) {
-              return window.pageYOffset
-            } else {
-              window.scrollTo(0, pos)
-            }
-          }
-        } else {
-          scrollFunc = pos => {
-            if (pos === undefined) {
-              return el.scrollTop
-            } else {
-              el.scrollTop = pos
-            }
-          }
-        }
-      }
-
-      if (scrollTop && selector) {
-        console.warn('"scrollTop" 或 "selector" 建议只设一个值，全部设置会忽略selector')
-      }
-      const from = scrollFunc()
-      let to
-      if (typeof scrollTop === 'number') {
-        to = scrollTop
-      } else {
-        to = document.querySelector(selector).offsetTop
-      }
-      const delta = to - from
-
-      const frameCnt = duration / FRAME_DURATION
-      const easeFunc = getTimingFunc(easeInOut, frameCnt)
-
-      const scroll = (frame = 0) => {
-        const dest = from + delta * easeFunc(frame)
-        scrollFunc(dest)
-        if (frame < frameCnt) {
-          timer && clearTimeout(timer)
-          timer = setTimeout(() => {
-            scroll(frame + 1)
-          }, FRAME_DURATION)
-        } else {
-          const res = {
-            errMsg: 'pageScrollTo:ok'
-          }
-          success && success(res)
-          complete && complete()
-          resolve(res)
-        }
-      }
-      scroll()
-    } catch (e) {
-      const res = {
-        errMsg: `pageScrollTo:fail ${e.message}`
-      }
-      fail && fail(res)
-      complete && complete()
-      reject(res)
-    }
-  })
-}