From e51f6afe63c30f80b9553be8a71ae62abf0989ff Mon Sep 17 00:00:00 2001 From: Ilya Apasov Date: Thu, 9 Apr 2020 19:45:25 +0200 Subject: [PATCH] feat: add jsToCss() as alias to isAnimatable(string, true) --- dist/animatable.js | 2 +- dist/animatable.js.map | 2 +- index.html | 22 +++++++++++----------- src/index.js | 3 +++ test/functions.test.js | 13 +++++++++++-- 5 files changed, 27 insertions(+), 15 deletions(-) diff --git a/dist/animatable.js b/dist/animatable.js index c4a35df..ec90609 100644 --- a/dist/animatable.js +++ b/dist/animatable.js @@ -1,3 +1,3 @@ //animatable-properties v2.1.0 https://github.com/apasov/animatable-properties#readme -!function(r,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports):"function"==typeof define&&define.amd?define(["exports"],o):o((r=r||self).animatable={})}(this,(function(r){"use strict";var o=["all","backdrop-filter","background","background-color","background-position","background-size","block-size","border","border-block-end","border-block-end-color","border-block-end-width","border-block-start","border-block-start-color","border-block-start-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-width","border-color","border-end-end-radius","border-end-start-radius","border-image-outset","border-image-slice","border-image-width","border-inline-end","border-inline-end-color","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-width","border-left","border-left-color","border-left-width","border-radius","border-right","border-right-color","border-right-width","border-start-end-radius","border-start-start-radius","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-width","border-width","bottom","box-shadow","caret-color","clip","clip-path","color","column-count","column-gap","column-rule","column-rule-color","column-rule-width","column-width","columns","filter","flex","flex-basis","flex-grow","flex-shrink","font","font-variation-settings","font-size","font-size-adjust","font-stretch","font-weight","gap","grid-column-gap","grid-gap","grid-row-gap","grid-template-columns","grid-template-rows","height","inline-size","inset","inset-block","inset-block-end","inset-block-start","inset-inline","inset-inline-end","inset-inline-start","left","letter-spacing","line-clamp","line-height","margin","margin-block-end","margin-block-start","margin-bottom","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","mask","mask-border","mask-position","mask-size","max-block-size","max-height","max-inline-size","max-lines","max-width","min-block-size","min-height","min-inline-size","min-width","object-position","offset","offset-anchor","offset-distance","offset-path","offset-position","offset-rotate","opacity","order","outline","outline-color","outline-offset","outline-width","padding","padding-block-end","padding-block-start","padding-bottom","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","perspective","perspective-origin","right","rotate","row-gap","scale","scrollbar-color","scroll-margin","scroll-margin-block","scroll-margin-block-start","scroll-margin-block-end","scroll-margin-bottom","scroll-margin-inline","scroll-margin-inline-start","scroll-margin-inline-end","scroll-margin-left","scroll-margin-right","scroll-margin-top","scroll-padding","scroll-padding-block","scroll-padding-block-start","scroll-padding-block-end","scroll-padding-bottom","scroll-padding-inline","scroll-padding-inline-start","scroll-padding-inline-end","scroll-padding-left","scroll-padding-right","scroll-padding-top","scroll-snap-coordinate","scroll-snap-destination","shape-image-threshold","shape-margin","shape-outside","tab-size","text-decoration","text-decoration-color","text-decoration-thickness","text-emphasis","text-emphasis-color","text-indent","text-shadow","text-underline-offset","top","transform","transform-origin","translate","vertical-align","visibility","width","word-spacing","z-index","zoom"],e=(r,o=!0)=>{let e=r.toLowerCase();return o&&("float"!==e&&"offset"!==e||(e="css-"+e)),e.replace(/-([a-z])/g,(r,o)=>o.toUpperCase())},t=(r,e=!1)=>{let t=r.toLowerCase();if("css"===t.substr(0,3)&&(t=t.substr(3)),o.includes(t))return!e||t;t=t.replace(/-/g,"");for(const r of o)if(t===r.replace(/-/g,""))return!e||r;return!1},i={properties:o.map(r=>e(r)),propertiesCSS:o,propertiesJS:o.map(r=>e(r,!1))};const n=i.properties,l=i.propertiesCSS,s=i.propertiesJS,d=e,a=t;r.cssToJs=d,r.isAnimatable=a,r.properties=n,r.propertiesCSS=l,r.propertiesJS=s,Object.defineProperty(r,"__esModule",{value:!0})})); +!function(r,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports):"function"==typeof define&&define.amd?define(["exports"],o):o((r=r||self).animatable={})}(this,(function(r){"use strict";var o=["all","backdrop-filter","background","background-color","background-position","background-size","block-size","border","border-block-end","border-block-end-color","border-block-end-width","border-block-start","border-block-start-color","border-block-start-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-width","border-color","border-end-end-radius","border-end-start-radius","border-image-outset","border-image-slice","border-image-width","border-inline-end","border-inline-end-color","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-width","border-left","border-left-color","border-left-width","border-radius","border-right","border-right-color","border-right-width","border-start-end-radius","border-start-start-radius","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-width","border-width","bottom","box-shadow","caret-color","clip","clip-path","color","column-count","column-gap","column-rule","column-rule-color","column-rule-width","column-width","columns","filter","flex","flex-basis","flex-grow","flex-shrink","font","font-variation-settings","font-size","font-size-adjust","font-stretch","font-weight","gap","grid-column-gap","grid-gap","grid-row-gap","grid-template-columns","grid-template-rows","height","inline-size","inset","inset-block","inset-block-end","inset-block-start","inset-inline","inset-inline-end","inset-inline-start","left","letter-spacing","line-clamp","line-height","margin","margin-block-end","margin-block-start","margin-bottom","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","mask","mask-border","mask-position","mask-size","max-block-size","max-height","max-inline-size","max-lines","max-width","min-block-size","min-height","min-inline-size","min-width","object-position","offset","offset-anchor","offset-distance","offset-path","offset-position","offset-rotate","opacity","order","outline","outline-color","outline-offset","outline-width","padding","padding-block-end","padding-block-start","padding-bottom","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","perspective","perspective-origin","right","rotate","row-gap","scale","scrollbar-color","scroll-margin","scroll-margin-block","scroll-margin-block-start","scroll-margin-block-end","scroll-margin-bottom","scroll-margin-inline","scroll-margin-inline-start","scroll-margin-inline-end","scroll-margin-left","scroll-margin-right","scroll-margin-top","scroll-padding","scroll-padding-block","scroll-padding-block-start","scroll-padding-block-end","scroll-padding-bottom","scroll-padding-inline","scroll-padding-inline-start","scroll-padding-inline-end","scroll-padding-left","scroll-padding-right","scroll-padding-top","scroll-snap-coordinate","scroll-snap-destination","shape-image-threshold","shape-margin","shape-outside","tab-size","text-decoration","text-decoration-color","text-decoration-thickness","text-emphasis","text-emphasis-color","text-indent","text-shadow","text-underline-offset","top","transform","transform-origin","translate","vertical-align","visibility","width","word-spacing","z-index","zoom"],e=(r,o=!0)=>{let e=r.toLowerCase();return o&&("float"!==e&&"offset"!==e||(e="css-"+e)),e.replace(/-([a-z])/g,(r,o)=>o.toUpperCase())},t=(r,e=!1)=>{let t=r.toLowerCase();if("css"===t.substr(0,3)&&(t=t.substr(3)),o.includes(t))return!e||t;t=t.replace(/-/g,"");for(const r of o)if(t===r.replace(/-/g,""))return!e||r;return!1},i={properties:o.map(r=>e(r)),propertiesCSS:o,propertiesJS:o.map(r=>e(r,!1))};const n=i.properties,l=i.propertiesCSS,s=i.propertiesJS,d=e,a=t;r.cssToJs=d,r.isAnimatable=a,r.jsToCss=r=>t(r,!0),r.properties=n,r.propertiesCSS=l,r.propertiesJS=s,Object.defineProperty(r,"__esModule",{value:!0})})); //# sourceMappingURL=animatable.js.map diff --git a/dist/animatable.js.map b/dist/animatable.js.map index d131e74..2e4ebca 100644 --- a/dist/animatable.js.map +++ b/dist/animatable.js.map @@ -1 +1 @@ -{"version":3,"file":"animatable.js","sources":["../src/properties.js","../src/functions.js","../src/arrays.js","../src/index.js"],"sourcesContent":["export default [\n 'all',\n 'backdrop-filter',\n 'background',\n 'background-color',\n 'background-position',\n 'background-size',\n 'block-size',\n 'border',\n 'border-block-end',\n 'border-block-end-color',\n 'border-block-end-width',\n 'border-block-start',\n 'border-block-start-color',\n 'border-block-start-width',\n 'border-bottom',\n 'border-bottom-color',\n 'border-bottom-left-radius',\n 'border-bottom-right-radius',\n 'border-bottom-width',\n 'border-color',\n 'border-end-end-radius',\n 'border-end-start-radius',\n 'border-image-outset',\n 'border-image-slice',\n 'border-image-width',\n 'border-inline-end',\n 'border-inline-end-color',\n 'border-inline-end-width',\n 'border-inline-start',\n 'border-inline-start-color',\n 'border-inline-start-width',\n 'border-left',\n 'border-left-color',\n 'border-left-width',\n 'border-radius',\n 'border-right',\n 'border-right-color',\n 'border-right-width',\n 'border-start-end-radius',\n 'border-start-start-radius',\n 'border-top',\n 'border-top-color',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-top-width',\n 'border-width',\n 'bottom',\n 'box-shadow',\n 'caret-color',\n 'clip',\n 'clip-path',\n 'color',\n 'column-count',\n 'column-gap',\n 'column-rule',\n 'column-rule-color',\n 'column-rule-width',\n 'column-width',\n 'columns',\n 'filter',\n 'flex',\n 'flex-basis',\n 'flex-grow',\n 'flex-shrink',\n 'font',\n 'font-variation-settings',\n 'font-size',\n 'font-size-adjust',\n 'font-stretch',\n 'font-weight',\n 'gap',\n 'grid-column-gap',\n 'grid-gap',\n 'grid-row-gap',\n 'grid-template-columns',\n 'grid-template-rows',\n 'height',\n 'inline-size',\n 'inset',\n 'inset-block',\n 'inset-block-end',\n 'inset-block-start',\n 'inset-inline',\n 'inset-inline-end',\n 'inset-inline-start',\n 'left',\n 'letter-spacing',\n 'line-clamp',\n 'line-height',\n 'margin',\n 'margin-block-end',\n 'margin-block-start',\n 'margin-bottom',\n 'margin-inline-end',\n 'margin-inline-start',\n 'margin-left',\n 'margin-right',\n 'margin-top',\n 'mask',\n 'mask-border',\n 'mask-position',\n 'mask-size',\n 'max-block-size',\n 'max-height',\n 'max-inline-size',\n 'max-lines',\n 'max-width',\n 'min-block-size',\n 'min-height',\n 'min-inline-size',\n 'min-width',\n 'object-position',\n 'offset',\n 'offset-anchor',\n 'offset-distance',\n 'offset-path',\n 'offset-position',\n 'offset-rotate',\n 'opacity',\n 'order',\n 'outline',\n 'outline-color',\n 'outline-offset',\n 'outline-width',\n 'padding',\n 'padding-block-end',\n 'padding-block-start',\n 'padding-bottom',\n 'padding-inline-end',\n 'padding-inline-start',\n 'padding-left',\n 'padding-right',\n 'padding-top',\n 'perspective',\n 'perspective-origin',\n 'right',\n 'rotate',\n 'row-gap',\n 'scale',\n 'scrollbar-color',\n 'scroll-margin',\n 'scroll-margin-block',\n 'scroll-margin-block-start',\n 'scroll-margin-block-end',\n 'scroll-margin-bottom',\n 'scroll-margin-inline',\n 'scroll-margin-inline-start',\n 'scroll-margin-inline-end',\n 'scroll-margin-left',\n 'scroll-margin-right',\n 'scroll-margin-top',\n 'scroll-padding',\n 'scroll-padding-block',\n 'scroll-padding-block-start',\n 'scroll-padding-block-end',\n 'scroll-padding-bottom',\n 'scroll-padding-inline',\n 'scroll-padding-inline-start',\n 'scroll-padding-inline-end',\n 'scroll-padding-left',\n 'scroll-padding-right',\n 'scroll-padding-top',\n 'scroll-snap-coordinate',\n 'scroll-snap-destination',\n 'shape-image-threshold',\n 'shape-margin',\n 'shape-outside',\n 'tab-size',\n 'text-decoration',\n 'text-decoration-color',\n 'text-decoration-thickness',\n 'text-emphasis',\n 'text-emphasis-color',\n 'text-indent',\n 'text-shadow',\n 'text-underline-offset',\n 'top',\n 'transform',\n 'transform-origin',\n 'translate',\n 'vertical-align',\n 'visibility',\n 'width',\n 'word-spacing',\n 'z-index',\n 'zoom',\n]\n","import properties from './properties'\n\nexport default {\n cssToJs: (value, webAnimationsAPI = true) => {\n let property = value.toLowerCase()\n if (webAnimationsAPI) {\n if (property === 'float' || property === 'offset') {\n property = 'css-' + property\n }\n }\n return property.replace(/-([a-z])/g, (match, letter) => {\n return letter.toUpperCase()\n })\n },\n\n isAnimatable: (value, returnCssProperty = false) => {\n let property = value.toLowerCase()\n if (property.substr(0, 3) === 'css') {\n property = property.substr(3)\n }\n if (properties.includes(property)) {\n return returnCssProperty ? property : true\n }\n property = property.replace(/-/g, '')\n for (const prop of properties) {\n if (property === prop.replace(/-/g, '')) {\n return returnCssProperty ? prop : true\n }\n }\n return false\n },\n}\n","import properties from './properties'\nimport functions from './functions'\n\nexport default {\n properties: properties.map((val) => functions.cssToJs(val)),\n propertiesCSS: properties,\n propertiesJS: properties.map((val) => functions.cssToJs(val, false)),\n}\n","import arrays from './arrays'\nimport functions from './functions'\n\nexport const properties = arrays.properties\nexport const propertiesCSS = arrays.propertiesCSS\nexport const propertiesJS = arrays.propertiesJS\nexport const cssToJs = functions.cssToJs\nexport const isAnimatable = functions.isAnimatable\n"],"names":["value","webAnimationsAPI","property","toLowerCase","replace","match","letter","toUpperCase","returnCssProperty","substr","properties","includes","prop","map","val","functions","propertiesCSS","propertiesJS","arrays","cssToJs","isAnimatable"],"mappings":";8MAAe,CACb,MACA,kBACA,aACA,mBACA,sBACA,kBACA,aACA,SACA,mBACA,yBACA,yBACA,qBACA,2BACA,2BACA,gBACA,sBACA,4BACA,6BACA,sBACA,eACA,wBACA,0BACA,sBACA,qBACA,qBACA,oBACA,0BACA,0BACA,sBACA,4BACA,4BACA,cACA,oBACA,oBACA,gBACA,eACA,qBACA,qBACA,0BACA,4BACA,aACA,mBACA,yBACA,0BACA,mBACA,eACA,SACA,aACA,cACA,OACA,YACA,QACA,eACA,aACA,cACA,oBACA,oBACA,eACA,UACA,SACA,OACA,aACA,YACA,cACA,OACA,0BACA,YACA,mBACA,eACA,cACA,MACA,kBACA,WACA,eACA,wBACA,qBACA,SACA,cACA,QACA,cACA,kBACA,oBACA,eACA,mBACA,qBACA,OACA,iBACA,aACA,cACA,SACA,mBACA,qBACA,gBACA,oBACA,sBACA,cACA,eACA,aACA,OACA,cACA,gBACA,YACA,iBACA,aACA,kBACA,YACA,YACA,iBACA,aACA,kBACA,YACA,kBACA,SACA,gBACA,kBACA,cACA,kBACA,gBACA,UACA,QACA,UACA,gBACA,iBACA,gBACA,UACA,oBACA,sBACA,iBACA,qBACA,uBACA,eACA,gBACA,cACA,cACA,qBACA,QACA,SACA,UACA,QACA,kBACA,gBACA,sBACA,4BACA,0BACA,uBACA,uBACA,6BACA,2BACA,qBACA,sBACA,oBACA,iBACA,uBACA,6BACA,2BACA,wBACA,wBACA,8BACA,4BACA,sBACA,uBACA,qBACA,yBACA,0BACA,wBACA,eACA,gBACA,WACA,kBACA,wBACA,4BACA,gBACA,sBACA,cACA,cACA,wBACA,MACA,YACA,mBACA,YACA,iBACA,aACA,QACA,eACA,UACA,UCvLS,CAACA,EAAOC,GAAmB,KAClC,IAAIC,EAAWF,EAAMG,cAMrB,OALIF,IACe,UAAbC,GAAqC,WAAbA,IAC1BA,EAAW,OAASA,IAGjBA,EAASE,QAAQ,YAAa,CAACC,EAAOC,IACpCA,EAAOC,kBAIJ,CAACP,EAAOQ,GAAoB,KACxC,IAAIN,EAAWF,EAAMG,cAIrB,GAH8B,QAA1BD,EAASO,OAAO,EAAG,KACrBP,EAAWA,EAASO,OAAO,IAEzBC,EAAWC,SAAST,GACtB,OAAOM,GAAoBN,EAE7BA,EAAWA,EAASE,QAAQ,KAAM,IAClC,IAAK,MAAMQ,KAAQF,EACjB,GAAIR,IAAaU,EAAKR,QAAQ,KAAM,IAClC,OAAOI,GAAoBI,EAG/B,OAAO,KC1BI,CACbF,WAAYA,EAAWG,IAAKC,GAAQC,EAAkBD,IACtDE,cAAeN,EACfO,aAAcP,EAAWG,IAAKC,GAAQC,EAAkBD,GAAK,WCHlDJ,EAAaQ,EAAOR,WACpBM,EAAgBE,EAAOF,cACvBC,EAAeC,EAAOD,aACtBE,EAAUJ,EACVK,EAAeL"} \ No newline at end of file +{"version":3,"file":"animatable.js","sources":["../src/properties.js","../src/functions.js","../src/arrays.js","../src/index.js"],"sourcesContent":["export default [\n 'all',\n 'backdrop-filter',\n 'background',\n 'background-color',\n 'background-position',\n 'background-size',\n 'block-size',\n 'border',\n 'border-block-end',\n 'border-block-end-color',\n 'border-block-end-width',\n 'border-block-start',\n 'border-block-start-color',\n 'border-block-start-width',\n 'border-bottom',\n 'border-bottom-color',\n 'border-bottom-left-radius',\n 'border-bottom-right-radius',\n 'border-bottom-width',\n 'border-color',\n 'border-end-end-radius',\n 'border-end-start-radius',\n 'border-image-outset',\n 'border-image-slice',\n 'border-image-width',\n 'border-inline-end',\n 'border-inline-end-color',\n 'border-inline-end-width',\n 'border-inline-start',\n 'border-inline-start-color',\n 'border-inline-start-width',\n 'border-left',\n 'border-left-color',\n 'border-left-width',\n 'border-radius',\n 'border-right',\n 'border-right-color',\n 'border-right-width',\n 'border-start-end-radius',\n 'border-start-start-radius',\n 'border-top',\n 'border-top-color',\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-top-width',\n 'border-width',\n 'bottom',\n 'box-shadow',\n 'caret-color',\n 'clip',\n 'clip-path',\n 'color',\n 'column-count',\n 'column-gap',\n 'column-rule',\n 'column-rule-color',\n 'column-rule-width',\n 'column-width',\n 'columns',\n 'filter',\n 'flex',\n 'flex-basis',\n 'flex-grow',\n 'flex-shrink',\n 'font',\n 'font-variation-settings',\n 'font-size',\n 'font-size-adjust',\n 'font-stretch',\n 'font-weight',\n 'gap',\n 'grid-column-gap',\n 'grid-gap',\n 'grid-row-gap',\n 'grid-template-columns',\n 'grid-template-rows',\n 'height',\n 'inline-size',\n 'inset',\n 'inset-block',\n 'inset-block-end',\n 'inset-block-start',\n 'inset-inline',\n 'inset-inline-end',\n 'inset-inline-start',\n 'left',\n 'letter-spacing',\n 'line-clamp',\n 'line-height',\n 'margin',\n 'margin-block-end',\n 'margin-block-start',\n 'margin-bottom',\n 'margin-inline-end',\n 'margin-inline-start',\n 'margin-left',\n 'margin-right',\n 'margin-top',\n 'mask',\n 'mask-border',\n 'mask-position',\n 'mask-size',\n 'max-block-size',\n 'max-height',\n 'max-inline-size',\n 'max-lines',\n 'max-width',\n 'min-block-size',\n 'min-height',\n 'min-inline-size',\n 'min-width',\n 'object-position',\n 'offset',\n 'offset-anchor',\n 'offset-distance',\n 'offset-path',\n 'offset-position',\n 'offset-rotate',\n 'opacity',\n 'order',\n 'outline',\n 'outline-color',\n 'outline-offset',\n 'outline-width',\n 'padding',\n 'padding-block-end',\n 'padding-block-start',\n 'padding-bottom',\n 'padding-inline-end',\n 'padding-inline-start',\n 'padding-left',\n 'padding-right',\n 'padding-top',\n 'perspective',\n 'perspective-origin',\n 'right',\n 'rotate',\n 'row-gap',\n 'scale',\n 'scrollbar-color',\n 'scroll-margin',\n 'scroll-margin-block',\n 'scroll-margin-block-start',\n 'scroll-margin-block-end',\n 'scroll-margin-bottom',\n 'scroll-margin-inline',\n 'scroll-margin-inline-start',\n 'scroll-margin-inline-end',\n 'scroll-margin-left',\n 'scroll-margin-right',\n 'scroll-margin-top',\n 'scroll-padding',\n 'scroll-padding-block',\n 'scroll-padding-block-start',\n 'scroll-padding-block-end',\n 'scroll-padding-bottom',\n 'scroll-padding-inline',\n 'scroll-padding-inline-start',\n 'scroll-padding-inline-end',\n 'scroll-padding-left',\n 'scroll-padding-right',\n 'scroll-padding-top',\n 'scroll-snap-coordinate',\n 'scroll-snap-destination',\n 'shape-image-threshold',\n 'shape-margin',\n 'shape-outside',\n 'tab-size',\n 'text-decoration',\n 'text-decoration-color',\n 'text-decoration-thickness',\n 'text-emphasis',\n 'text-emphasis-color',\n 'text-indent',\n 'text-shadow',\n 'text-underline-offset',\n 'top',\n 'transform',\n 'transform-origin',\n 'translate',\n 'vertical-align',\n 'visibility',\n 'width',\n 'word-spacing',\n 'z-index',\n 'zoom',\n]\n","import properties from './properties'\n\nexport default {\n cssToJs: (value, webAnimationsAPI = true) => {\n let property = value.toLowerCase()\n if (webAnimationsAPI) {\n if (property === 'float' || property === 'offset') {\n property = 'css-' + property\n }\n }\n return property.replace(/-([a-z])/g, (match, letter) => {\n return letter.toUpperCase()\n })\n },\n\n isAnimatable: (value, returnCssProperty = false) => {\n let property = value.toLowerCase()\n if (property.substr(0, 3) === 'css') {\n property = property.substr(3)\n }\n if (properties.includes(property)) {\n return returnCssProperty ? property : true\n }\n property = property.replace(/-/g, '')\n for (const prop of properties) {\n if (property === prop.replace(/-/g, '')) {\n return returnCssProperty ? prop : true\n }\n }\n return false\n },\n}\n","import properties from './properties'\nimport functions from './functions'\n\nexport default {\n properties: properties.map((val) => functions.cssToJs(val)),\n propertiesCSS: properties,\n propertiesJS: properties.map((val) => functions.cssToJs(val, false)),\n}\n","import arrays from './arrays'\nimport functions from './functions'\n\nexport const properties = arrays.properties\nexport const propertiesCSS = arrays.propertiesCSS\nexport const propertiesJS = arrays.propertiesJS\nexport const cssToJs = functions.cssToJs\nexport const jsToCss = (value) => {\n return functions.isAnimatable(value, true)\n}\nexport const isAnimatable = functions.isAnimatable\n"],"names":["value","webAnimationsAPI","property","toLowerCase","replace","match","letter","toUpperCase","returnCssProperty","substr","properties","includes","prop","map","val","functions","propertiesCSS","propertiesJS","arrays","cssToJs","isAnimatable"],"mappings":";8MAAe,CACb,MACA,kBACA,aACA,mBACA,sBACA,kBACA,aACA,SACA,mBACA,yBACA,yBACA,qBACA,2BACA,2BACA,gBACA,sBACA,4BACA,6BACA,sBACA,eACA,wBACA,0BACA,sBACA,qBACA,qBACA,oBACA,0BACA,0BACA,sBACA,4BACA,4BACA,cACA,oBACA,oBACA,gBACA,eACA,qBACA,qBACA,0BACA,4BACA,aACA,mBACA,yBACA,0BACA,mBACA,eACA,SACA,aACA,cACA,OACA,YACA,QACA,eACA,aACA,cACA,oBACA,oBACA,eACA,UACA,SACA,OACA,aACA,YACA,cACA,OACA,0BACA,YACA,mBACA,eACA,cACA,MACA,kBACA,WACA,eACA,wBACA,qBACA,SACA,cACA,QACA,cACA,kBACA,oBACA,eACA,mBACA,qBACA,OACA,iBACA,aACA,cACA,SACA,mBACA,qBACA,gBACA,oBACA,sBACA,cACA,eACA,aACA,OACA,cACA,gBACA,YACA,iBACA,aACA,kBACA,YACA,YACA,iBACA,aACA,kBACA,YACA,kBACA,SACA,gBACA,kBACA,cACA,kBACA,gBACA,UACA,QACA,UACA,gBACA,iBACA,gBACA,UACA,oBACA,sBACA,iBACA,qBACA,uBACA,eACA,gBACA,cACA,cACA,qBACA,QACA,SACA,UACA,QACA,kBACA,gBACA,sBACA,4BACA,0BACA,uBACA,uBACA,6BACA,2BACA,qBACA,sBACA,oBACA,iBACA,uBACA,6BACA,2BACA,wBACA,wBACA,8BACA,4BACA,sBACA,uBACA,qBACA,yBACA,0BACA,wBACA,eACA,gBACA,WACA,kBACA,wBACA,4BACA,gBACA,sBACA,cACA,cACA,wBACA,MACA,YACA,mBACA,YACA,iBACA,aACA,QACA,eACA,UACA,UCvLS,CAACA,EAAOC,GAAmB,KAClC,IAAIC,EAAWF,EAAMG,cAMrB,OALIF,IACe,UAAbC,GAAqC,WAAbA,IAC1BA,EAAW,OAASA,IAGjBA,EAASE,QAAQ,YAAa,CAACC,EAAOC,IACpCA,EAAOC,kBAIJ,CAACP,EAAOQ,GAAoB,KACxC,IAAIN,EAAWF,EAAMG,cAIrB,GAH8B,QAA1BD,EAASO,OAAO,EAAG,KACrBP,EAAWA,EAASO,OAAO,IAEzBC,EAAWC,SAAST,GACtB,OAAOM,GAAoBN,EAE7BA,EAAWA,EAASE,QAAQ,KAAM,IAClC,IAAK,MAAMQ,KAAQF,EACjB,GAAIR,IAAaU,EAAKR,QAAQ,KAAM,IAClC,OAAOI,GAAoBI,EAG/B,OAAO,KC1BI,CACbF,WAAYA,EAAWG,IAAKC,GAAQC,EAAkBD,IACtDE,cAAeN,EACfO,aAAcP,EAAWG,IAAKC,GAAQC,EAAkBD,GAAK,WCHlDJ,EAAaQ,EAAOR,WACpBM,EAAgBE,EAAOF,cACvBC,EAAeC,EAAOD,aACtBE,EAAUJ,EAIVK,EAAeL,yCAHJf,GACfe,EAAuBf,GAAO"} \ No newline at end of file diff --git a/index.html b/index.html index a191685..0498a4a 100644 --- a/index.html +++ b/index.html @@ -55,10 +55,10 @@ isAnimatable {{isAnimatable(modelType)}} - +
CSS - {{modelType ? modelType.toLowerCase() : ''}} + {{Css(modelType)}}
JS @@ -177,16 +177,23 @@ }, methods: { + Css(model) { + if (model) { + return animatable.jsToCss(model) + } + return '' + }, + Js(model) { if (model) { - return animatable.cssToJs(model, false) + return animatable.cssToJs(animatable.jsToCss(model), false) } return '' }, Waapi(model) { if (model) { - return animatable.cssToJs(model) + return animatable.cssToJs(animatable.jsToCss(model)) } return '' }, @@ -198,13 +205,6 @@ return '' }, - isCSS(model) { - if (animatable.propertiesCSS.includes(model.toLowerCase())) { - return true - } - return false - }, - filterFn(val, update) { if (val === '') { update(() => { diff --git a/src/index.js b/src/index.js index 9e2be51..5b4161d 100644 --- a/src/index.js +++ b/src/index.js @@ -5,4 +5,7 @@ export const properties = arrays.properties export const propertiesCSS = arrays.propertiesCSS export const propertiesJS = arrays.propertiesJS export const cssToJs = functions.cssToJs +export const jsToCss = (value) => { + return functions.isAnimatable(value, true) +} export const isAnimatable = functions.isAnimatable diff --git a/test/functions.test.js b/test/functions.test.js index acc2341..30a0fb1 100644 --- a/test/functions.test.js +++ b/test/functions.test.js @@ -1,4 +1,4 @@ -import functions from '../src/functions' +import * as functions from '../src/index' const testData = { isAnimatable: { @@ -11,6 +11,10 @@ const testData = { true: [{ float: 'cssFloat' }, { offset: 'cssOffset' }, { 'grid-column-gap': 'gridColumnGap' }], false: [{ float: 'float' }, { offset: 'offset' }], }, + + jsToCss: { + returnCssProperty: [{ 'scroll-padding-block-end': 'scroll-padding-block-end' }, { scrollpadDINGBLOCkend: 'scroll-padding-block-end' }], + }, } const testFn = (testData, key) => { @@ -20,7 +24,7 @@ const testFn = (testData, key) => { if (key === 'isAnimatable') { if (ke === 'returnCssProperty') { const expected = element[Object.keys(element)[0]] - test(`${key}('${Object.keys(element)[0]}, true') to equal ${expected}`, () => { + test(`${key}('${Object.keys(element)[0]}', true) to equal ${expected}`, () => { expect(functions[key](Object.keys(element)[0], true)).toBe(expected) }) } else { @@ -29,6 +33,11 @@ const testFn = (testData, key) => { expect(functions[key](element)).toBe(expected) }) } + } else if (key === 'jsToCss') { + const expected = element[Object.keys(element)[0]] + test(`${key}('${Object.keys(element)[0]}') to equal ${expected}`, () => { + expect(functions[key](Object.keys(element)[0])).toBe(expected) + }) } else { const webAnimationsAPI = ke === 'true' ? [] : [false] Object.keys(element).forEach(function (k) {