Packages

backpex

0.19.1
0.19.6 0.19.5 0.19.4 0.19.3 0.19.2 0.19.1 0.19.0 0.18.3 0.18.2 0.18.1 0.18.0 0.17.4 0.17.3 0.17.2 0.17.1 0.17.0 0.16.3 0.16.2 0.16.1 0.16.0 0.15.3 0.15.2 0.15.1 0.15.0 0.14.0 0.13.0 0.12.0 0.11.0 0.10.0 0.9.1 0.9.0 0.8.2 0.8.1 0.8.0 0.7.1 0.7.0 0.6.0 0.5.1 0.5.0 0.4.0 0.3.2 0.3.1 0.3.0 0.2.0 0.1.1

Highly customizable administration panel for Phoenix LiveView applications.

HexDocs

Current section

Files

Jump to
Readme
45 Versions
13 Dependencies
Dependants
Files
Activity
backpex assets js hooks _currency_input.js
Raw

assets/js/hooks/_currency_input.js 

import IMask from 'imask'



export default {

  mounted () {

    this.maskedInput = this.el.querySelector('[data-masked-input]')

    this.hiddenInput = this.el.querySelector('[data-hidden-input]')



    this.initializeMask()

  },

  initializeMask () {

    const maskPattern = this.el.dataset.maskPattern



    if (!maskPattern) {

      console.error('You must provide a mask pattern in the data-masked-pattern attribute.')

      return

    }



    this.maskOptions = {

      mask: maskPattern,

      lazy: false,

      blocks: {

        num: {

          mask: Number,

          thousandsSeparator: this.el.dataset.thousandsSeparator,

          radix: this.el.dataset.radix

        }

      }

    }



    this.mask = IMask(this.maskedInput, this.maskOptions)

    this.mask.unmaskedValue = this.rawValue(this.hiddenInput.value)

    this.mask.on('accept', this.handleMaskChange.bind(this))

  },

  updated () {

    this.handleMaskChange()

  },

  handleMaskChange () {

    this.hiddenInput.value = this.rawValue(this.mask.value)

  },

  destroyed () {

    this.mask.destroy()

  },

  rawValue (value) {

    return value

      .replace(this.el.dataset.unit || '', '')

      .trim()

      .replace(new RegExp(`\\${this.el.dataset.thousandsSeparator}`, 'g'), '')

  }

}