/**
* Input text formatter
* @requires https://nosir.github.io/cleave.js/
*/
import Cleave from 'cleave.js'
export default (() => {
const formattedInputs = document.querySelectorAll('[data-input-format]')
if (formattedInputs.length === 0) return
// Card icons
const cardPlaceholder = ``
const cardAmex = ``
const cardVisa = ``
const cardMaster = ``
const cardDiners = ``
const cardJcb = ``
const cardDiscover = ``
formattedInputs.forEach((input) => {
const targetInput =
input.tagName.toLowerCase() !== 'input'
? input.querySelector('.form-control')
: input
const cardIcon = input.querySelector('[data-card-icon]')
let options
let formatter
if (input.dataset.inputFormat != undefined)
options = JSON.parse(input.dataset.inputFormat)
/* eslint-disable no-unused-vars, no-undef, indent */
if (cardIcon) {
cardIcon.innerHTML = cardPlaceholder
formatter = new Cleave(targetInput, {
...options,
onCreditCardTypeChanged: (type) => {
switch (type) {
case 'amex':
cardIcon.innerHTML = cardAmex
break
case 'visa':
cardIcon.innerHTML = cardVisa
break
case 'mastercard':
cardIcon.innerHTML = cardMaster
break
case 'diners':
cardIcon.innerHTML = cardDiners
break
case 'jcb':
cardIcon.innerHTML = cardJcb
break
case 'discover':
cardIcon.innerHTML = cardDiscover
break
default:
cardIcon.innerHTML = cardPlaceholder
}
},
})
} else {
formatter = new Cleave(targetInput, options)
}
/* eslint-enable no-unused-vars, no-undef, indent */
})
})()