predefined transforms for data-attributes

[dotty-dev]

Hello,

i needed a way to use predefined transforms while still initializing everything with data-attributes

I created a new thread but maybe this is relevant/related to @mrleblanc101 / #135

here is what i came up with, maybe this is interesting for someone else:

JS:

const maskaTransforms = object.freeze({
  toUppercase: (chr) => chr.toUpperCase(),
  toLowercase: (chr) => chr.toLowerCase(),
});

const maskaInputs = new MaskInput('[data-maska]:not[data-maska-transform]');

const maskaInputsTransform = {};

for (const [key, func] of Object.entries(maskaTransforms)) {
  maskaInputsTransform[key] = new MaskInput(
    `[data-maska][data-maska-transform=${key}`,
    {
      preProcess: func
    }
  );
}

HTML (Example for IBAN Input):

<input type="text"
    data-maska="CCII IIII IIII IIII IIII IIII IIII IIII II"
    data-maska-tokens="C:[A-Z]|I:[0-9A-Z]"
    data-maska-transform="toUppercase">

Based on #135 's requirements I thought a little bit further and came up with the following implementation where you can define a per token transform:

JS:

const maskaTransforms = Object.freeze({
  toUppercase: (chr) => chr.toUpperCase(),
  toLowercase: (chr) => chr.toLowerCase(),
});

const maskaInputsTokensTransform = [];

const maskaInputsTokensTransformElements = document.querySelectorAll(
  '[data-maska-tokens-transform]'
);

maskaInputsTokensTransformElements.forEach((el) => {
  const tknsRaw = el.dataset.maskaTokensTransform.split('|');
  const tknsObj = tknsRaw.map((i) => {
    let blocks = i.split(':');
    return {
      key: blocks[0],
      pattern: blocks[1],
      transform: blocks[2] ? blocks[2] : false,
    };
  });
  const tkns = {};
  tknsObj.forEach((tkn) => {
    tkns[tkn.key] = {};
    tkns[tkn.key]['pattern'] = new RegExp(tkn.pattern);
    if (tkn.transform) {
      tkns[tkn.key]['transform'] = maskaTransforms[tkn.transform];
    }
  });

  maskaInputsTokensTransform.push(
    new Maska.MaskInput(el, {
      mask: el.dataset.maskaRaw,
      tokens: tkns,
    })
  );
});

HTML would look like this, please note that data-maska is now data-maska-raw and data-maska-tokens is data-maska-tokens-transform since it would otherwise clash with maska's main implementation:

<input type="text"
    data-maska-raw="CCII IIII IIII IIII IIII IIII IIII IIII II"
    data-maska-tokens-transform="C:[A-z]:toUppercase|I:[0-9A-z]:toUppercase">

Cheers.