vue-scan-code/src/index.js

a code scanning plug-in for vue

const eventSimple = require('event-simple')

var _Vue

function Scan () {
  this.pointer = ''
  this.pointerQueue = []
  this.code = ''
  this.nextCode = ''
  this.lastCode = ''
  this.name = 'scan'
  this.eventName = 'scancode'
  this.codeMinLength = 5
  this.wait = 30
  this.timer = null
  this.handler = {}
  this.initScanCode = function (callback, vueExp) {
    if (typeof callback === 'function') {
      if ((vueExp._uid || vueExp._uid === 0) && !this.handler[this.name + vueExp._uid]) {
        var bool = this.pointerQueue.some(function (point) { return point == vueExp._uid })
        !bool && this.pointerQueue.push([vueExp._uid])
        this.handler[this.name + vueExp._uid] = callback
      } else if (this.handler[this.name + vueExp._uid]) {
        this.handler[this.name + vueExp._uid] = callback
      } else {
        console.error('error: ~~~')
      }
    } else {
      console.error('the callback is only function')
    }
    this.pointer = vueExp._uid
  }
  this.offScanCode = function (that) {
    if (that instanceof _Vue) {
      const pointerIndex = this.pointerQueue.findIndex(function (p) { return p == this._uid })
      if (pointerIndex > -1) {
        this.pointerQueue.splice(pointerIndex, -1)
        delete this.handler[this.name + this._uid]
      }
      this.pointer = ''
    } else {
      console.error('current Example not a vue example')
    }
  }
  this.bindScanCode = function (that, callback) {
    if (that instanceof _Vue) {
      if (typeof callback == 'function') {
        this.initScanCode(callback, that)
      }
    } else {
      console.error('current Example not a vue example')
    }
  }
  this.outputScanCode = function (code) {
    if (this.pointer && this.handler[this.name + this.pointer]) {
      this.handler[this.name + this.pointer](code)
    }
    this.clearCache()
  }
  this.getPrototypeName = function () {
    return '$' + this.name
  }
  this.clearCache = function () {
    this.nextCode = ''
    this.lastCode = ''
    this.code = ''
  }
}

Scan.prototype.init = function (options) {
  options && options.scanName && (this.name = options.scanName)
  options && options.scanWait && (this.wait = options.scanWait)
  options && options.scanCodeMinLength && (this.codeMinLength = options.scanCodeMinLength)
  var lastTime, nextTime, lastCode, nextCode
  var self = this
  window.addEventListener('keypress', function (e) {
    nextCode = e.which
    nextTime = new Date().getTime()
    if (lastCode && lastTime && nextTime - lastTime <= self.wait) {
      if (lastCode) {
        self.lastCode += String.fromCharCode(lastCode)
      } else {
        self.lastCode += ''
      }
      if (nextCode) {
        self.nextCode += String.fromCharCode(nextCode)
      } else {
        self.nextCode += ''
      }
      eventSimple.emit(self.eventName, self.nextCode, self.lastCode)
    } else if (lastCode && lastTime && nextTime - lastTime > 100) {
      self.code = ''
    }
    lastCode = nextCode
    lastTime = nextTime
  })
  eventSimple.on(self.eventName, function (nextCode, lastCode) {
    clearTimeout(self.timer)
    self.timer = setTimeout(function () {
      if (nextCode.length >= self.codeMinLength && lastCode.length >= self.codeMinLength) {
        self.code = lastCode + nextCode.slice(lastCode.length - 1)
        self.outputScanCode(self.code)
      } else {
        console.error('current barcode length less than the options scanCodeMinLength')
        self.clearCache()
      }
    }, self.wait)
  })
}

export default {
  install: function (Vue, options) {
    // eslint-disable-next-line no-undef
    if (_Vue === Vue) { return }
    _Vue = Vue

    const sc = new Scan()
    window.scan = sc
    sc.init(options || {})
    Vue.prototype[sc.getPrototypeName()] = sc
  }
}