@web3r/flowerkit
Version:
Tree-shakable JavaScript and TypeScript utility library for frontend/browser apps: DOM, events, arrays, objects, strings, date, JSON, and network helpers (ESM/CJS, SSR-friendly).
1 lines • 2.77 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":[""],"sourcesContent":["import { getWindow } from \"ssr-window\";\r\n\r\nexport type TGetCSSTransformValuesArgs = Parameters<typeof getCSSTransformValues>;\r\n\r\nexport type TGetCSSTransformValuesReturn = ReturnType<typeof getCSSTransformValues>;\r\n\r\n/**\r\n * Gets an object with `x`, `y`, `z` values of CSS3 transform\r\n * @param el{HTMLElement|Node|Element|Document} DOM element\r\n * @returns {{x: number, y: number, z: number}}\r\n * @throws {TypeError} getCSSTransformValues: el must be an HTMLElement\r\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/transform\r\n * @example\r\n * // How to get `translate3d` values of a `div`?\r\n * // <div id=\"block\" style=\"transform: translate3d(10px, 15px, 35px);\"></div>\r\n * const block = document.getElementById(\"block\");\r\n * const values = getCSSTransformValues(block);\r\n * console.log(values); // => { x: 10, y: 15, z: 35 }\r\n */\r\nexport const getCSSTransformValues = (el: HTMLElement): { x: number; y: number; z: number; } => {\r\n if (!el || typeof (el as any).style !== \"object\") {\r\n throw new TypeError(\"getCSSTransformValues: el must be an HTMLElement\");\r\n }\r\n\r\n const style = getWindow().getComputedStyle(el);\r\n const matrix = style.transform;\r\n\r\n // eslint-disable-next-line no-nested-ternary\r\n const matrixType = matrix === \"none\" ? \"none\" : matrix.includes(\"3d\") ? \"3d\" : \"2d\";\r\n\r\n const getValues = (index: number) => {\r\n const val = matrix.match(/matrix.*\\((.+)\\)/);\r\n return val ? val[1].split(\", \")[index] : 0;\r\n };\r\n\r\n switch (matrixType) {\r\n case \"2d\": {\r\n return {\r\n x: getValues(4),\r\n y: getValues(5),\r\n z: 0,\r\n };\r\n }\r\n case \"3d\": {\r\n return {\r\n x: getValues(12),\r\n y: getValues(13),\r\n z: getValues(14),\r\n };\r\n }\r\n case \"none\":\r\n default: {\r\n return {\r\n x: 0,\r\n y: 0,\r\n z: 0,\r\n };\r\n }\r\n }\r\n};\r\n"],"names":["getCSSTransformValues","el","style","TypeError","getWindow","getComputedStyle","matrix","transform","matrixType","includes","getValues","index","val","match","split","x","y","z"],"mappings":";;;;;;;;;;;;;GAmBO,MAAMA,sBAAyBC,KACpC,IAAKA,WAAcA,GAAWC,QAAU,SACtC,MAAM,IAAIC,UAAU,oDAGtB,MAAMD,MAAQE,YAAYC,iBAAiBJ,IAC3C,MAAMK,OAASJ,MAAMK;6CAGrB;MAAMC,WAAaF,SAAW,OAAS,OAASA,OAAOG,SAAS,MAAQ,KAAO,KAE/E,MAAMC,UAAaC,QACjB,MAAMC,IAAMN,OAAOO,MAAM,oBACzB,OAAOD,IAAMA,IAAI,GAAGE,MAAM,MAAMH,OAAS,GAG3C,OAAQH,YACN,IAAK,KACH,MAAO,CACLO,EAAGL,UAAU,GACbM,EAAGN,UAAU,GACbO,EAAG,GAGP,IAAK,KACH,MAAO,CACLF,EAAGL,UAAU,IACbM,EAAGN,UAAU,IACbO,EAAGP,UAAU,KAGjB,IAAK,OACL,QACE,MAAO,CACLK,EAAG,EACHC,EAAG,EACHC,EAAG"}