Draccoz
12/8/2016 - 3:23 PM

CSS Transform getter and setter from single template

CSS Transform getter and setter from single template

function buildPatterns(order) {
  let orderMap = {};
  let orderArray = order.split("|");
  orderArray.forEach((t, i) => orderMap[ t ] = i);

  return (consts, ...vars) => {
    const escapePars = [ /(\(|\))/g, "\\$1" ];
    const map = {
      number: { match: `([\\de.-]+)`, cast: Number },
      string: { match: `([\\w.-]+)`, cast: String },
      object: { match: `(.+?)`, cast: _ => _ },
      undefined: { match: "", cast: _ => _ }
    };
    const params = [];
    let regExp = new RegExp(consts.reduce((a, c, i) => {
      let param = map[ typeof vars[ i ] ];
      params[ i ] = {
        cast: param.cast,
        default: vars[ i ]
      };
      return a + c.replace(...escapePars) + (param.match);
    }, ""));
    return {
      getTransform(style) {
        let match = style.transform.match(regExp) || [];
        return {
          x: params[ orderMap.x ].cast(match[ orderMap.x + 1 ] || params[ orderMap.x ].default),
          y: params[ orderMap.y ].cast(match[ orderMap.y + 1 ] || params[ orderMap.y ].default),
          scale: params[ orderMap.scale ].cast(match[ orderMap.scale + 1 ] || params[ orderMap.scale ].default)
        }
      },
      setTransform(style, values) {
        style.transform = consts.reduce((a, c, i) => a + c + (values[ orderArray[ i ] ] || ""), "");
      }
    };
  }
}

// Example usage
const { getTransform, setTransform } = buildPatterns("x|y|scale")`translate(${0}%, ${0}%) scale(${0})`;
let { scale, x, y } = getTransform(style);
// do something with scale, x and y
setTransform(style, { scale, x, y });