Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
stylefire - npm Package Compare versions
Comparing version 5.0.0 to 6.0.0
@@ -5,2 +5,9 @@ # Changelog | ||
| ## [6.0.0] 2019-06-25 | ||
| ### Changed | ||
| - Using CSS parser to create SVG transforms. | ||
| - SVG `x` and `y` now refer to the prop, `translateX` and `translateY` to the transform. | ||
| ## [5.0.0] 2019-06-13 | ||
@@ -10,3 +17,3 @@ | ||
| - Changed default `originX` and `originY` to `"50%"`. | ||
| - Changed default `originX` and `originY` to `0.5`. | ||
@@ -13,0 +20,0 @@ ## [4.1.4] 2019-05-07 |
@@ -107,9 +107,2 @@ import sync from 'framesync'; | ||
| }; | ||
| var setDomAttrs = function (element, attrs) { | ||
| for (var key in attrs) { | ||
| if (attrs.hasOwnProperty(key)) { | ||
| element.setAttribute(key, attrs[key]); | ||
| } | ||
| } | ||
| }; | ||
@@ -150,3 +143,3 @@ var camelCache = /*#__PURE__*/new Map(); | ||
| var axes = ['', 'X', 'Y', 'Z']; | ||
| var order = ['scale', 'rotate', 'skew', 'transformPerspective']; | ||
| var order = ['translate', 'scale', 'rotate', 'skew', 'transformPerspective']; | ||
| var transformProps = /*#__PURE__*/order.reduce(function (acc, key) { | ||
@@ -173,3 +166,3 @@ return axes.reduce(function (axesAcc, axesKey) { | ||
| var rounded = /*#__PURE__*/__assign({}, number, { transform: Math.round }); | ||
| var int = /*#__PURE__*/__assign({}, number, { transform: Math.round }); | ||
| var valueTypes = { | ||
@@ -228,2 +221,5 @@ color: color, | ||
| distance: px, | ||
| translateX: px, | ||
| translateY: px, | ||
| translateZ: px, | ||
| x: px, | ||
@@ -237,3 +233,6 @@ y: px, | ||
| originZ: px, | ||
| zIndex: rounded | ||
| zIndex: int, | ||
| fillOpacity: alpha, | ||
| strokeOpacity: alpha, | ||
| numOctaves: int | ||
| }; | ||
@@ -332,6 +331,9 @@ var getValueType = function (key) { | ||
| } | ||
| function createStyleBuilder(enableHardwareAcceleration) { | ||
| function createStyleBuilder(enableHardwareAcceleration, isDashCase) { | ||
| if (enableHardwareAcceleration === void 0) { | ||
| enableHardwareAcceleration = true; | ||
| } | ||
| if (isDashCase === void 0) { | ||
| isDashCase = true; | ||
| } | ||
| var styles = {}; | ||
@@ -343,3 +345,3 @@ var transform = {}; | ||
| transformKeys.length = 0; | ||
| buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, true); | ||
| buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase); | ||
| return styles; | ||
@@ -399,76 +401,68 @@ }; | ||
| var ZERO_NOT_ZERO = 0.0000001; | ||
| var svgAttrsTemplate = function () { | ||
| return { | ||
| style: {} | ||
| }; | ||
| }; | ||
| var progressToPixels = function (progress, length) { | ||
| return progress * length + 'px'; | ||
| return px.transform(progress * length); | ||
| }; | ||
| var build = function (state, dimensions, isPath, pathLength) { | ||
| var hasTransform = false; | ||
| var hasDashArray = false; | ||
| var props = {}; | ||
| var dashArrayStyles = isPath ? { | ||
| pathLength: '0', | ||
| pathSpacing: "" + pathLength | ||
| } : undefined; | ||
| var scale$$1 = state.scale !== undefined ? state.scale || ZERO_NOT_ZERO : state.scaleX || 1; | ||
| var scaleY = state.scaleY !== undefined ? state.scaleY || ZERO_NOT_ZERO : scale$$1 || 1; | ||
| var transformOriginX = dimensions.width * (state.originX || 50) + dimensions.x; | ||
| var transformOriginY = dimensions.height * (state.originY || 50) + dimensions.y; | ||
| var scaleTransformX = -transformOriginX * (scale$$1 * 1); | ||
| var scaleTransformY = -transformOriginY * (scaleY * 1); | ||
| var scaleReplaceX = transformOriginX / scale$$1; | ||
| var scaleReplaceY = transformOriginY / scaleY; | ||
| var transform = { | ||
| translate: "translate(" + state.x + ", " + state.y + ") ", | ||
| scale: "translate(" + scaleTransformX + ", " + scaleTransformY + ") scale(" + scale$$1 + ", " + scaleY + ") translate(" + scaleReplaceX + ", " + scaleReplaceY + ") ", | ||
| rotate: "rotate(" + state.rotate + ", " + transformOriginX + ", " + transformOriginY + ") ", | ||
| skewX: "skewX(" + state.skewX + ") ", | ||
| skewY: "skewY(" + state.skewY + ") " | ||
| }; | ||
| for (var key in state) { | ||
| if (state.hasOwnProperty(key)) { | ||
| var value = state[key]; | ||
| if (isTransformProp(key)) { | ||
| hasTransform = true; | ||
| } else if (isPath && (key === 'pathLength' || key === 'pathSpacing') && typeof value === 'number') { | ||
| hasDashArray = true; | ||
| dashArrayStyles[key] = progressToPixels(value, pathLength); | ||
| } else if (isPath && key === 'pathOffset') { | ||
| props['stroke-dashoffset'] = progressToPixels(-value, pathLength); | ||
| } else { | ||
| var attrKey = !camelCaseAttributes.has(key) ? camelToDash(key) : key; | ||
| props[attrKey] = value; | ||
| } | ||
| } | ||
| var unmeasured = { x: 0, y: 0, width: 0, height: 0 }; | ||
| function calcOrigin(origin, offset, size) { | ||
| return typeof origin === 'string' ? origin : px.transform(offset + size * origin); | ||
| } | ||
| function calculateSVGTransformOrigin(dimensions, originX, originY) { | ||
| return calcOrigin(originX, dimensions.x, dimensions.width) + " " + calcOrigin(originY, dimensions.y, dimensions.height); | ||
| } | ||
| function buildSVGAttrs(_a, dimensions, totalPathLength, cssBuilder, attrs) { | ||
| if (dimensions === void 0) { | ||
| dimensions = unmeasured; | ||
| } | ||
| if (hasDashArray) { | ||
| props['stroke-dasharray'] = dashArrayStyles.pathLength + ' ' + dashArrayStyles.pathSpacing; | ||
| if (cssBuilder === void 0) { | ||
| cssBuilder = createStyleBuilder(false, false); | ||
| } | ||
| if (hasTransform) { | ||
| props.transform = ''; | ||
| for (var key in transform) { | ||
| if (transform.hasOwnProperty(key)) { | ||
| var defaultValue = key === 'scale' ? '1' : '0'; | ||
| props.transform += transform[key].replace(/undefined/g, defaultValue); | ||
| } | ||
| if (attrs === void 0) { | ||
| attrs = svgAttrsTemplate(); | ||
| } | ||
| var x = _a.x, | ||
| y = _a.y, | ||
| z = _a.z, | ||
| _b = _a.originX, | ||
| originX = _b === void 0 ? 0.5 : _b, | ||
| _c = _a.originY, | ||
| originY = _c === void 0 ? 0.5 : _c, | ||
| pathLength = _a.pathLength, | ||
| _d = _a.pathSpacing, | ||
| pathSpacing = _d === void 0 ? 1 : _d, | ||
| _e = _a.pathOffset, | ||
| pathOffset = _e === void 0 ? 0 : _e, | ||
| state = __rest(_a, ["x", "y", "z", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]); | ||
| var style = cssBuilder(state); | ||
| for (var key in style) { | ||
| if (key === 'transform') { | ||
| attrs.style.transform = style[key]; | ||
| } else { | ||
| var attrKey = !camelCaseAttributes.has(key) ? camelToDash(key) : key; | ||
| attrs[attrKey] = style[key]; | ||
| } | ||
| } | ||
| return props; | ||
| }; | ||
| if (originX !== undefined || originY !== undefined) { | ||
| attrs.style.transformOrigin = calculateSVGTransformOrigin(dimensions, originX, originY); | ||
| } | ||
| if (x !== undefined) attrs.x = x; | ||
| if (y !== undefined) attrs.y = y; | ||
| if (totalPathLength !== undefined && pathLength !== undefined) { | ||
| attrs['stroke-dashoffset'] = progressToPixels(-pathOffset, totalPathLength); | ||
| attrs['stroke-dasharray'] = progressToPixels(pathLength, totalPathLength) + " " + progressToPixels(pathSpacing, totalPathLength); | ||
| } | ||
| return attrs; | ||
| } | ||
| function createAttrBuilder(dimensions, totalPathLength) { | ||
| var attrs = svgAttrsTemplate(); | ||
| var cssBuilder = createStyleBuilder(false, false); | ||
| return function (state) { | ||
| return buildSVGAttrs(state, dimensions, totalPathLength, cssBuilder, attrs); | ||
| }; | ||
| } | ||
| var int = /*#__PURE__*/__assign({}, number, { transform: Math.round }); | ||
| var valueTypes$1 = { | ||
| fill: color, | ||
| stroke: color, | ||
| scale: scale, | ||
| scaleX: scale, | ||
| scaleY: scale, | ||
| opacity: alpha, | ||
| fillOpacity: alpha, | ||
| strokeOpacity: alpha, | ||
| numOctaves: int | ||
| }; | ||
| var getValueType$1 = function (key) { | ||
| return valueTypes$1[key]; | ||
| }; | ||
| var getDimensions = function (element) { | ||
@@ -485,2 +479,5 @@ return typeof element.getBBox === 'function' ? element.getBBox() : element.getBoundingClientRect(); | ||
| var isPath = function (element) { | ||
| return element.tagName === 'path'; | ||
| }; | ||
| var svgStyler = /*#__PURE__*/createStyler({ | ||
@@ -492,3 +489,3 @@ onRead: function (key, _a) { | ||
| } else { | ||
| var valueType = getValueType$1(key); | ||
| var valueType = getValueType(key); | ||
| return valueType ? valueType.default : 0; | ||
@@ -498,7 +495,12 @@ } | ||
| onRender: function (state, _a) { | ||
| var dimensions = _a.dimensions, | ||
| element = _a.element, | ||
| isPath = _a.isPath, | ||
| pathLength = _a.pathLength; | ||
| setDomAttrs(element, build(state, dimensions, isPath, pathLength)); | ||
| var element = _a.element, | ||
| buildAttrs = _a.buildAttrs; | ||
| var attrs = buildAttrs(state); | ||
| for (var key in attrs) { | ||
| if (key === 'style') { | ||
| Object.assign(element.style, attrs.style); | ||
| } else { | ||
| element.setAttribute(key, attrs[key]); | ||
| } | ||
| } | ||
| } | ||
@@ -508,12 +510,7 @@ }); | ||
| var dimensions = getSVGElementDimensions(element); | ||
| var props = { | ||
| var pathLength = isPath(element) ? element.getTotalLength() : undefined; | ||
| return svgStyler({ | ||
| element: element, | ||
| dimensions: dimensions, | ||
| isPath: false | ||
| }; | ||
| if (element.tagName === 'path') { | ||
| props.isPath = true; | ||
| props.pathLength = element.getTotalLength(); | ||
| } | ||
| return svgStyler(props); | ||
| buildAttrs: createAttrBuilder(dimensions, pathLength) | ||
| }); | ||
| }; | ||
@@ -558,2 +555,2 @@ | ||
| export default index; | ||
| export { createStyler as createStylerFactory, buildStyleProperty, isTransformProp }; | ||
| export { createStyler as createStylerFactory, buildStyleProperty, buildSVGAttrs, isTransformProp }; |
@@ -247,9 +247,4 @@ (function (global, factory) { | ||
| var REPLACE_TEMPLATE = '$1-$2'; | ||
| var camelToDash = function (str) { return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase(); }; | ||
| var setDomAttrs = function (element, attrs) { | ||
| for (var key in attrs) { | ||
| if (attrs.hasOwnProperty(key)) { | ||
| element.setAttribute(key, attrs[key]); | ||
| } | ||
| } | ||
| var camelToDash = function (str) { | ||
| return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase(); | ||
| }; | ||
@@ -290,3 +285,3 @@ | ||
| var axes = ['', 'X', 'Y', 'Z']; | ||
| var order = ['scale', 'rotate', 'skew', 'transformPerspective']; | ||
| var order = ['translate', 'scale', 'rotate', 'skew', 'transformPerspective']; | ||
| var transformProps = order.reduce(function (acc, key) { | ||
@@ -475,3 +470,3 @@ return axes.reduce(function (axesAcc, axesKey) { | ||
| var rounded = __assign({}, number, { transform: Math.round }); | ||
| var int = __assign({}, number, { transform: Math.round }); | ||
| var valueTypes = { | ||
@@ -530,2 +525,5 @@ color: color, | ||
| distance: px, | ||
| translateX: px, | ||
| translateY: px, | ||
| translateZ: px, | ||
| x: px, | ||
@@ -539,3 +537,6 @@ y: px, | ||
| originZ: px, | ||
| zIndex: rounded | ||
| zIndex: int, | ||
| fillOpacity: alpha, | ||
| strokeOpacity: alpha, | ||
| numOctaves: int | ||
| }; | ||
@@ -627,4 +628,5 @@ var getValueType = function (key) { return valueTypes[key]; }; | ||
| } | ||
| function createStyleBuilder(enableHardwareAcceleration) { | ||
| function createStyleBuilder(enableHardwareAcceleration, isDashCase) { | ||
| if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; } | ||
| if (isDashCase === void 0) { isDashCase = true; } | ||
| var styles = {}; | ||
@@ -636,3 +638,3 @@ var transform = {}; | ||
| transformKeys.length = 0; | ||
| buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, true); | ||
| buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase); | ||
| return styles; | ||
@@ -713,84 +715,53 @@ }; | ||
| var ZERO_NOT_ZERO = 0.0000001; | ||
| var svgAttrsTemplate = function () { return ({ | ||
| style: {} | ||
| }); }; | ||
| var progressToPixels = function (progress, length) { | ||
| return progress * length + 'px'; | ||
| return px.transform(progress * length); | ||
| }; | ||
| var build = function (state, dimensions, isPath, pathLength) { | ||
| var hasTransform = false; | ||
| var hasDashArray = false; | ||
| var props = {}; | ||
| var dashArrayStyles = isPath | ||
| ? { | ||
| pathLength: '0', | ||
| pathSpacing: "" + pathLength | ||
| var unmeasured = { x: 0, y: 0, width: 0, height: 0 }; | ||
| function calcOrigin(origin, offset, size) { | ||
| return typeof origin === 'string' | ||
| ? origin | ||
| : px.transform(offset + size * origin); | ||
| } | ||
| function calculateSVGTransformOrigin(dimensions, originX, originY) { | ||
| return calcOrigin(originX, dimensions.x, dimensions.width) + " " + calcOrigin(originY, dimensions.y, dimensions.height); | ||
| } | ||
| function buildSVGAttrs(_a, dimensions, totalPathLength, cssBuilder, attrs) { | ||
| if (dimensions === void 0) { dimensions = unmeasured; } | ||
| if (cssBuilder === void 0) { cssBuilder = createStyleBuilder(false, false); } | ||
| if (attrs === void 0) { attrs = svgAttrsTemplate(); } | ||
| var x = _a.x, y = _a.y, z = _a.z, _b = _a.originX, originX = _b === void 0 ? 0.5 : _b, _c = _a.originY, originY = _c === void 0 ? 0.5 : _c, pathLength = _a.pathLength, _d = _a.pathSpacing, pathSpacing = _d === void 0 ? 1 : _d, _e = _a.pathOffset, pathOffset = _e === void 0 ? 0 : _e, state = __rest(_a, ["x", "y", "z", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]); | ||
| var style = cssBuilder(state); | ||
| for (var key in style) { | ||
| if (key === 'transform') { | ||
| attrs.style.transform = style[key]; | ||
| } | ||
| : undefined; | ||
| var scale = state.scale !== undefined | ||
| ? state.scale || ZERO_NOT_ZERO | ||
| : state.scaleX || 1; | ||
| var scaleY = state.scaleY !== undefined ? state.scaleY || ZERO_NOT_ZERO : scale || 1; | ||
| var transformOriginX = dimensions.width * (state.originX || 50) + dimensions.x; | ||
| var transformOriginY = dimensions.height * (state.originY || 50) + dimensions.y; | ||
| var scaleTransformX = -transformOriginX * (scale * 1); | ||
| var scaleTransformY = -transformOriginY * (scaleY * 1); | ||
| var scaleReplaceX = transformOriginX / scale; | ||
| var scaleReplaceY = transformOriginY / scaleY; | ||
| var transform = { | ||
| translate: "translate(" + state.x + ", " + state.y + ") ", | ||
| scale: "translate(" + scaleTransformX + ", " + scaleTransformY + ") scale(" + scale + ", " + scaleY + ") translate(" + scaleReplaceX + ", " + scaleReplaceY + ") ", | ||
| rotate: "rotate(" + state.rotate + ", " + transformOriginX + ", " + transformOriginY + ") ", | ||
| skewX: "skewX(" + state.skewX + ") ", | ||
| skewY: "skewY(" + state.skewY + ") " | ||
| }; | ||
| for (var key in state) { | ||
| if (state.hasOwnProperty(key)) { | ||
| var value = state[key]; | ||
| if (isTransformProp(key)) { | ||
| hasTransform = true; | ||
| } | ||
| else if (isPath && | ||
| (key === 'pathLength' || key === 'pathSpacing') && | ||
| typeof value === 'number') { | ||
| hasDashArray = true; | ||
| dashArrayStyles[key] = progressToPixels(value, pathLength); | ||
| } | ||
| else if (isPath && key === 'pathOffset') { | ||
| props['stroke-dashoffset'] = progressToPixels(-value, pathLength); | ||
| } | ||
| else { | ||
| var attrKey = !camelCaseAttributes.has(key) ? camelToDash(key) : key; | ||
| props[attrKey] = value; | ||
| } | ||
| else { | ||
| var attrKey = !camelCaseAttributes.has(key) ? camelToDash(key) : key; | ||
| attrs[attrKey] = style[key]; | ||
| } | ||
| } | ||
| if (hasDashArray) { | ||
| props['stroke-dasharray'] = | ||
| dashArrayStyles.pathLength + ' ' + dashArrayStyles.pathSpacing; | ||
| if (originX !== undefined || originY !== undefined) { | ||
| attrs.style.transformOrigin = calculateSVGTransformOrigin(dimensions, originX, originY); | ||
| } | ||
| if (hasTransform) { | ||
| props.transform = ''; | ||
| for (var key in transform) { | ||
| if (transform.hasOwnProperty(key)) { | ||
| var defaultValue = key === 'scale' ? '1' : '0'; | ||
| props.transform += transform[key].replace(/undefined/g, defaultValue); | ||
| } | ||
| } | ||
| if (x !== undefined) | ||
| attrs.x = x; | ||
| if (y !== undefined) | ||
| attrs.y = y; | ||
| if (totalPathLength !== undefined && pathLength !== undefined) { | ||
| attrs['stroke-dashoffset'] = progressToPixels(-pathOffset, totalPathLength); | ||
| attrs['stroke-dasharray'] = progressToPixels(pathLength, totalPathLength) + " " + progressToPixels(pathSpacing, totalPathLength); | ||
| } | ||
| return props; | ||
| }; | ||
| return attrs; | ||
| } | ||
| function createAttrBuilder(dimensions, totalPathLength) { | ||
| var attrs = svgAttrsTemplate(); | ||
| var cssBuilder = createStyleBuilder(false, false); | ||
| return function (state) { | ||
| return buildSVGAttrs(state, dimensions, totalPathLength, cssBuilder, attrs); | ||
| }; | ||
| } | ||
| var int = __assign({}, number, { transform: Math.round }); | ||
| var valueTypes$1 = { | ||
| fill: color, | ||
| stroke: color, | ||
| scale: scale, | ||
| scaleX: scale, | ||
| scaleY: scale, | ||
| opacity: alpha, | ||
| fillOpacity: alpha, | ||
| strokeOpacity: alpha, | ||
| numOctaves: int | ||
| }; | ||
| var getValueType$1 = (function (key) { return valueTypes$1[key]; }); | ||
| var getDimensions = function (element) { | ||
@@ -810,2 +781,5 @@ return typeof element.getBBox === 'function' | ||
| var isPath = function (element) { | ||
| return element.tagName === 'path'; | ||
| }; | ||
| var svgStyler = createStyler({ | ||
@@ -818,3 +792,3 @@ onRead: function (key, _a) { | ||
| else { | ||
| var valueType = getValueType$1(key); | ||
| var valueType = getValueType(key); | ||
| return valueType ? valueType.default : 0; | ||
@@ -824,4 +798,12 @@ } | ||
| onRender: function (state, _a) { | ||
| var dimensions = _a.dimensions, element = _a.element, isPath = _a.isPath, pathLength = _a.pathLength; | ||
| setDomAttrs(element, build(state, dimensions, isPath, pathLength)); | ||
| var element = _a.element, buildAttrs = _a.buildAttrs; | ||
| var attrs = buildAttrs(state); | ||
| for (var key in attrs) { | ||
| if (key === 'style') { | ||
| Object.assign(element.style, attrs.style); | ||
| } | ||
| else { | ||
| element.setAttribute(key, attrs[key]); | ||
| } | ||
| } | ||
| } | ||
@@ -831,12 +813,7 @@ }); | ||
| var dimensions = getSVGElementDimensions(element); | ||
| var props = { | ||
| var pathLength = isPath(element) ? element.getTotalLength() : undefined; | ||
| return svgStyler({ | ||
| element: element, | ||
| dimensions: dimensions, | ||
| isPath: false | ||
| }; | ||
| if (element.tagName === 'path') { | ||
| props.isPath = true; | ||
| props.pathLength = element.getTotalLength(); | ||
| } | ||
| return svgStyler(props); | ||
| buildAttrs: createAttrBuilder(dimensions, pathLength) | ||
| }); | ||
| }); | ||
@@ -893,2 +870,3 @@ | ||
| exports.buildStyleProperty = buildStyleProperty; | ||
| exports.buildSVGAttrs = buildSVGAttrs; | ||
| exports.isTransformProp = isTransformProp; | ||
@@ -895,0 +873,0 @@ |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.stylefire={})}(this,function(t){"use strict";var e=function(){return(e=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};function r(t,e){var r={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(t);o<n.length;o++)e.indexOf(n[o])<0&&(r[n[o]]=t[n[o]])}return r}var n=function(){};"production"!==process.env.NODE_ENV&&(n=function(t,e){if(!t)throw new Error("Hey, listen! ".toUpperCase()+e)});var o,a=0,i="undefined"!=typeof window&&void 0!==window.requestAnimationFrame?function(t){return window.requestAnimationFrame(t)}:function(t){var e=Date.now(),r=Math.max(0,16.7-(e-a));a=e+r,setTimeout(function(){return t(a)},r)};!function(t){t.Read="read",t.Update="update",t.Render="render",t.PostRender="postRender",t.FixedUpdate="fixedUpdate"}(o||(o={}));var s,u=1/60*1e3,f=!0,c=!1,d=!1,l={delta:0,timestamp:0},p=[o.Read,o.Update,o.Render,o.PostRender],h=function(t){return c=t},g=p.reduce(function(t,e){var r,o,a,i,s,u,f,d,l,p=(r=h,o=[],a=[],i=0,s=!1,u=0,f=new WeakSet,d=new WeakSet,l={cancel:function(t){var e=a.indexOf(t);f.add(t),-1!==e&&a.splice(e,1)},process:function(t){var e,n;if(s=!0,o=(e=[a,o])[0],(a=e[1]).length=0,i=o.length)for(u=0;u<i;u++)(n=o[u])(t),!0!==d.has(n)||f.has(n)||(l.schedule(n),r(!0));s=!1},schedule:function(t,e,r){void 0===e&&(e=!1),void 0===r&&(r=!1),n("function"==typeof t,"Argument must be a function");var u=r&&s,c=u?o:a;f.delete(t),e&&d.add(t),-1===c.indexOf(t)&&(c.push(t),u&&(i=o.length))}});return t.sync[e]=function(t,e,r){return void 0===e&&(e=!1),void 0===r&&(r=!1),c||w(),p.schedule(t,e,r),t},t.cancelSync[e]=function(t){return p.cancel(t)},t.steps[e]=p,t},{steps:{},sync:{},cancelSync:{}}),v=g.steps,m=g.sync,y=(g.cancelSync,function(t){return v[t].process(l)}),b=function(t){c=!1,l.delta=f?u:Math.max(Math.min(t-l.timestamp,40),1),f||(u=l.delta),l.timestamp=t,d=!0,p.forEach(y),d=!1,c&&(f=!1,i(b))},w=function(){c=!0,f=!0,d||i(b)},O=function(t){var e=t.onRead,n=t.onRender,o=t.uncachedValues,a=void 0===o?new Set:o,i=t.useCache,s=void 0===i||i;return function(t){void 0===t&&(t={});var o=r(t,[]),i={},u=[],f=!1;function c(t,e){t.startsWith("--")&&(o.hasCSSVariable=!0);var r=i[t];i[t]=e,i[t]!==r&&(-1===u.indexOf(t)&&u.push(t),f||(f=!0,m.render(d.render)))}var d={get:function(t,r){return void 0===r&&(r=!1),!r&&s&&!a.has(t)&&void 0!==i[t]?i[t]:e(t,o)},set:function(t,e){if("string"==typeof t)c(t,e);else for(var r in t)c(r,t[r]);return this},render:function(t){return void 0===t&&(t=!1),(f||!0===t)&&(n(i,o,u),f=!1,u.length=0),this}};return d}},x=/([a-z])([A-Z])/g,S=function(t){return t.replace(x,"$1-$2").toLowerCase()},R=new Map,k=new Map,C=["Webkit","Moz","O","ms",""],P=C.length,L="undefined"!=typeof document,M=function(t,e){return k.set(t,S(e))},Y=function(t,e){void 0===e&&(e=!1);var r=e?k:R;return r.has(t)||(L?function(t){s=s||document.createElement("div");for(var e=0;e<P;e++){var r=C[e],n=""===r,o=n?t:r+t.charAt(0).toUpperCase()+t.slice(1);(o in s.style||n)&&(R.set(t,o),M(t,(n?"":"-")+S(o)))}}(t):function(t){M(t,t)}(t)),r.get(t)||t},T=["","X","Y","Z"],X=["scale","rotate","skew","transformPerspective"].reduce(function(t,e){return T.reduce(function(t,r){return t.push(e+r),t},t)},["x","y","z"]),W=X.reduce(function(t,e){return t[e]=!0,t},{});function E(t){return!0===W[t]}function B(t,e){return X.indexOf(t)-X.indexOf(e)}var j=new Set(["originX","originY","originZ"]);function A(t){return j.has(t)}var V=function(){return(V=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},F=function(t,e){return function(r){return Math.max(Math.min(r,e),t)}},Z=function(t){return t%1?Number(t.toFixed(5)):t},z=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i,N={test:function(t){return"number"==typeof t},parse:parseFloat,transform:function(t){return t}},H=V({},N,{transform:F(0,1)}),U=V({},N,{default:1}),I=function(t){return{test:function(e){return"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length},parse:parseFloat,transform:function(e){return""+e+t}}},q=I("deg"),D=I("%"),_=I("px"),$=V({},D,{parse:function(t){return D.parse(t)/100},transform:function(t){return D.transform(100*t)}}),G=F(0,255),J=function(t){return void 0!==t.red},K=function(t){return void 0!==t.hue},Q=function(t){return function(e){if("string"!=typeof e)return e;for(var r,n={},o=(r=e,r.substring(r.indexOf("(")+1,r.lastIndexOf(")"))).split(/,\s*/),a=0;a<4;a++)n[t[a]]=void 0!==o[a]?parseFloat(o[a]):1;return n}},tt=V({},N,{transform:function(t){return Math.round(G(t))}});function et(t,e){return t.startsWith(e)&&z.test(t)}var rt={test:function(t){return"string"==typeof t?et(t,"rgb"):J(t)},parse:Q(["red","green","blue","alpha"]),transform:function(t){var e=t.red,r=t.green,n=t.blue,o=t.alpha;return function(t){var e=t.red,r=t.green,n=t.blue,o=t.alpha;return"rgba("+e+", "+r+", "+n+", "+(void 0===o?1:o)+")"}({red:tt.transform(e),green:tt.transform(r),blue:tt.transform(n),alpha:Z(o)})}},nt={test:function(t){return"string"==typeof t?et(t,"hsl"):K(t)},parse:Q(["hue","saturation","lightness","alpha"]),transform:function(t){var e=t.hue,r=t.saturation,n=t.lightness,o=t.alpha;return function(t){var e=t.hue,r=t.saturation,n=t.lightness,o=t.alpha;return"hsla("+e+", "+r+", "+n+", "+(void 0===o?1:o)+")"}({hue:Math.round(e),saturation:D.transform(Z(r)),lightness:D.transform(Z(n)),alpha:Z(o)})}},ot=V({},rt,{test:function(t){return"string"==typeof t&&et(t,"#")},parse:function(t){var e="",r="",n="";return t.length>4?(e=t.substr(1,2),r=t.substr(3,2),n=t.substr(5,2)):(e=t.substr(1,1),r=t.substr(2,1),n=t.substr(3,1),e+=e,r+=r,n+=n),{red:parseInt(e,16),green:parseInt(r,16),blue:parseInt(n,16),alpha:1}}}),at={test:function(t){return"string"==typeof t&&z.test(t)||J(t)||K(t)},parse:function(t){return rt.test(t)?rt.parse(t):nt.test(t)?nt.parse(t):ot.test(t)?ot.parse(t):t},transform:function(t){return J(t)?rt.transform(t):K(t)?nt.transform(t):t}},it={color:at,backgroundColor:at,outlineColor:at,fill:at,stroke:at,borderColor:at,borderTopColor:at,borderRightColor:at,borderBottomColor:at,borderLeftColor:at,borderWidth:_,borderTopWidth:_,borderRightWidth:_,borderBottomWidth:_,borderLeftWidth:_,borderRadius:_,radius:_,borderTopLeftRadius:_,borderTopRightRadius:_,borderBottomRightRadius:_,borderBottomLeftRadius:_,width:_,maxWidth:_,height:_,maxHeight:_,size:_,top:_,right:_,bottom:_,left:_,padding:_,paddingTop:_,paddingRight:_,paddingBottom:_,paddingLeft:_,margin:_,marginTop:_,marginRight:_,marginBottom:_,marginLeft:_,rotate:q,rotateX:q,rotateY:q,rotateZ:q,scale:U,scaleX:U,scaleY:U,scaleZ:U,skew:q,skewX:q,skewY:q,distance:_,x:_,y:_,z:_,perspective:_,opacity:H,originX:$,originY:$,originZ:_,zIndex:e({},N,{transform:Math.round})},st=function(t){return it[t]},ut=function(t,e){return e&&"number"==typeof t?e.transform(t):t},ft="scrollLeft",ct="scrollTop",dt=new Set([ft,ct]),lt=new Set([ft,ct,"transform"]),pt={x:"translateX",y:"translateY",z:"translateZ"};function ht(t){return"function"==typeof t}function gt(t,e,r,n,o,a,i){void 0===e&&(e=!0),void 0===r&&(r={}),void 0===n&&(n={}),void 0===o&&(o={}),void 0===a&&(a=[]),void 0===i&&(i=!1);var s=!0,u=!1,f=!1;for(var c in t){var d=t[c],l=st(c),p=ut(d,l);E(c)?(u=!0,n[c]=p,a.push(c),s&&(l.default&&d!==l.default||!l.default&&0!==d)&&(s=!1)):A(c)?(o[c]=p,f=!0):lt.has(c)&&ht(p)||(r[Y(c,i)]=p)}return(u||"function"==typeof t.transform)&&(r.transform=function(t,e,r,n,o){var a="",i=!1;r.sort(B);for(var s=r.length,u=0;u<s;u++){var f=r[u];a+=(pt[f]||f)+"("+e[f]+") ",i="z"===f||i}return!i&&o?a+="translateZ(0)":a=a.trim(),ht(t.transform)?a=t.transform(e,a):n&&(a="none"),a}(t,n,a,s,e)),f&&(r.transformOrigin=(o.originX||"50%")+" "+(o.originY||"50%")+" "+(o.originZ||0)),r}var vt=O({onRead:function(t,e){var r=e.element,n=e.preparseOutput,o=st(t);if(E(t))return o&&o.default||0;if(dt.has(t))return r[t];var a=window.getComputedStyle(r,null).getPropertyValue(Y(t,!0))||0;return n&&o&&o.test(a)&&o.parse?o.parse(a):a},onRender:function(t,e,r){var n=e.element,o=e.buildStyles,a=e.hasCSSVariable;if(Object.assign(n.style,o(t)),a)for(var i=r.length,s=0;s<i;s++){var u=r[s];u.startsWith("--")&&n.style.setProperty(u,t[u])}-1!==r.indexOf(ft)&&(n[ft]=t[ft]),-1!==r.indexOf(ct)&&(n[ct]=t[ct])},uncachedValues:dt});function mt(t,n){void 0===n&&(n={});var o=n.enableHardwareAcceleration,a=r(n,["enableHardwareAcceleration"]);return vt(e({element:t,buildStyles:function(t){void 0===t&&(t=!0);var e={},r={},n={},o=[];return function(a){return o.length=0,gt(a,t,e,r,n,o,!0),e}}(o),preparseOutput:!0},a))}var yt=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues"]),bt=function(t,e){return t*e+"px"},wt={fill:at,stroke:at,scale:U,scaleX:U,scaleY:U,opacity:H,fillOpacity:H,strokeOpacity:H,numOctaves:e({},N,{transform:Math.round})},Ot=O({onRead:function(t,e){var r=e.element;if(E(t)){var n=function(t){return wt[t]}(t);return n?n.default:0}return r.getAttribute(t)},onRender:function(t,e){var r=e.dimensions;!function(t,e){for(var r in e)e.hasOwnProperty(r)&&t.setAttribute(r,e[r])}(e.element,function(t,e,r,n){var o=!1,a=!1,i={},s=r?{pathLength:"0",pathSpacing:""+n}:void 0,u=void 0!==t.scale?t.scale||1e-7:t.scaleX||1,f=void 0!==t.scaleY?t.scaleY||1e-7:u||1,c=e.width*(t.originX||50)+e.x,d=e.height*(t.originY||50)+e.y,l=1*u*-c,p=1*f*-d,h=c/u,g=d/f,v={translate:"translate("+t.x+", "+t.y+") ",scale:"translate("+l+", "+p+") scale("+u+", "+f+") translate("+h+", "+g+") ",rotate:"rotate("+t.rotate+", "+c+", "+d+") ",skewX:"skewX("+t.skewX+") ",skewY:"skewY("+t.skewY+") "};for(var m in t)if(t.hasOwnProperty(m)){var y=t[m];E(m)?o=!0:!r||"pathLength"!==m&&"pathSpacing"!==m||"number"!=typeof y?r&&"pathOffset"===m?i["stroke-dashoffset"]=bt(-y,n):i[yt.has(m)?m:S(m)]=y:(a=!0,s[m]=bt(y,n))}if(a&&(i["stroke-dasharray"]=s.pathLength+" "+s.pathSpacing),o)for(var m in i.transform="",v)if(v.hasOwnProperty(m)){var b="scale"===m?"1":"0";i.transform+=v[m].replace(/undefined/g,b)}return i}(t,r,e.isPath,e.pathLength))}}),xt=O({useCache:!1,onRead:function(t){return"scrollTop"===t?window.pageYOffset:window.pageXOffset},onRender:function(t){var e=t.scrollTop,r=void 0===e?0:e,n=t.scrollLeft,o=void 0===n?0:n;return window.scrollTo(o,r)}}),St=function(){};"production"!==process.env.NODE_ENV&&(St=function(t,e){if(!t)throw new Error(e)});var Rt=new WeakMap,kt=function(t,e){var r;return t instanceof HTMLElement?r=mt(t,e):t instanceof SVGElement?r=function(t){var e={element:t,dimensions:function(t){try{return function(t){return"function"==typeof t.getBBox?t.getBBox():t.getBoundingClientRect()}(t)}catch(t){return{x:0,y:0,width:0,height:0}}}(t),isPath:!1};return"path"===t.tagName&&(e.isPath=!0,e.pathLength=t.getTotalLength()),Ot(e)}(t):t===window&&(r=xt(t)),St(void 0!==r,"No valid node provided. Node must be HTMLElement, SVGElement or window."),Rt.set(t,r),r},Ct=function(t,e){return Rt.has(t)?Rt.get(t):kt(t,e)};t.default=function(t,e){var r="string"==typeof t?document.querySelector(t):t;return Ct(r,e)},t.createStylerFactory=O,t.buildStyleProperty=gt,t.isTransformProp=E,Object.defineProperty(t,"__esModule",{value:!0})}); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.stylefire={})}(this,function(t){"use strict";var e=function(){return(e=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};function r(t,e){var r={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(t);o<n.length;o++)e.indexOf(n[o])<0&&(r[n[o]]=t[n[o]])}return r}var n=function(){};"production"!==process.env.NODE_ENV&&(n=function(t,e){if(!t)throw new Error("Hey, listen! ".toUpperCase()+e)});var o,i=0,a="undefined"!=typeof window&&void 0!==window.requestAnimationFrame?function(t){return window.requestAnimationFrame(t)}:function(t){var e=Date.now(),r=Math.max(0,16.7-(e-i));i=e+r,setTimeout(function(){return t(i)},r)};!function(t){t.Read="read",t.Update="update",t.Render="render",t.PostRender="postRender",t.FixedUpdate="fixedUpdate"}(o||(o={}));var u,s=1/60*1e3,f=!0,d=!1,c=!1,l={delta:0,timestamp:0},p=[o.Read,o.Update,o.Render,o.PostRender],h=function(t){return d=t},v=p.reduce(function(t,e){var r,o,i,a,u,s,f,c,l,p=(r=h,o=[],i=[],a=0,u=!1,s=0,f=new WeakSet,c=new WeakSet,l={cancel:function(t){var e=i.indexOf(t);f.add(t),-1!==e&&i.splice(e,1)},process:function(t){var e,n;if(u=!0,o=(e=[i,o])[0],(i=e[1]).length=0,a=o.length)for(s=0;s<a;s++)(n=o[s])(t),!0!==c.has(n)||f.has(n)||(l.schedule(n),r(!0));u=!1},schedule:function(t,e,r){void 0===e&&(e=!1),void 0===r&&(r=!1),n("function"==typeof t,"Argument must be a function");var s=r&&u,d=s?o:i;f.delete(t),e&&c.add(t),-1===d.indexOf(t)&&(d.push(t),s&&(a=o.length))}});return t.sync[e]=function(t,e,r){return void 0===e&&(e=!1),void 0===r&&(r=!1),d||w(),p.schedule(t,e,r),t},t.cancelSync[e]=function(t){return p.cancel(t)},t.steps[e]=p,t},{steps:{},sync:{},cancelSync:{}}),g=v.steps,m=v.sync,y=(v.cancelSync,function(t){return g[t].process(l)}),b=function(t){d=!1,l.delta=f?s:Math.max(Math.min(t-l.timestamp,40),1),f||(s=l.delta),l.timestamp=t,c=!0,p.forEach(y),c=!1,d&&(f=!1,a(b))},w=function(){d=!0,f=!0,c||a(b)},O=function(t){var e=t.onRead,n=t.onRender,o=t.uncachedValues,i=void 0===o?new Set:o,a=t.useCache,u=void 0===a||a;return function(t){void 0===t&&(t={});var o=r(t,[]),a={},s=[],f=!1;function d(t,e){t.startsWith("--")&&(o.hasCSSVariable=!0);var r=a[t];a[t]=e,a[t]!==r&&(-1===s.indexOf(t)&&s.push(t),f||(f=!0,m.render(c.render)))}var c={get:function(t,r){return void 0===r&&(r=!1),!r&&u&&!i.has(t)&&void 0!==a[t]?a[t]:e(t,o)},set:function(t,e){if("string"==typeof t)d(t,e);else for(var r in t)d(r,t[r]);return this},render:function(t){return void 0===t&&(t=!1),(f||!0===t)&&(n(a,o,s),f=!1,s.length=0),this}};return c}},x=/([a-z])([A-Z])/g,S=function(t){return t.replace(x,"$1-$2").toLowerCase()},R=new Map,k=new Map,C=["Webkit","Moz","O","ms",""],M=C.length,T="undefined"!=typeof document,L=function(t,e){return k.set(t,S(e))},W=function(t,e){void 0===e&&(e=!1);var r=e?k:R;return r.has(t)||(T?function(t){u=u||document.createElement("div");for(var e=0;e<M;e++){var r=C[e],n=""===r,o=n?t:r+t.charAt(0).toUpperCase()+t.slice(1);(o in u.style||n)&&(R.set(t,o),L(t,(n?"":"-")+S(o)))}}(t):function(t){L(t,t)}(t)),r.get(t)||t},A=["","X","Y","Z"],E=["translate","scale","rotate","skew","transformPerspective"].reduce(function(t,e){return A.reduce(function(t,r){return t.push(e+r),t},t)},["x","y","z"]),P=E.reduce(function(t,e){return t[e]=!0,t},{});function X(t){return!0===P[t]}function Y(t,e){return E.indexOf(t)-E.indexOf(e)}var j=new Set(["originX","originY","originZ"]);function B(t){return j.has(t)}var V=function(){return(V=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},z=function(t,e){return function(r){return Math.max(Math.min(r,e),t)}},Z=function(t){return t%1?Number(t.toFixed(5)):t},F=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i,N={test:function(t){return"number"==typeof t},parse:parseFloat,transform:function(t){return t}},H=V({},N,{transform:z(0,1)}),U=V({},N,{default:1}),I=function(t){return{test:function(e){return"string"==typeof e&&e.endsWith(t)&&1===e.split(" ").length},parse:parseFloat,transform:function(e){return""+e+t}}},q=I("deg"),D=I("%"),_=I("px"),G=V({},D,{parse:function(t){return D.parse(t)/100},transform:function(t){return D.transform(100*t)}}),$=z(0,255),J=function(t){return void 0!==t.red},K=function(t){return void 0!==t.hue},Q=function(t){return function(e){if("string"!=typeof e)return e;for(var r,n={},o=(r=e,r.substring(r.indexOf("(")+1,r.lastIndexOf(")"))).split(/,\s*/),i=0;i<4;i++)n[t[i]]=void 0!==o[i]?parseFloat(o[i]):1;return n}},tt=V({},N,{transform:function(t){return Math.round($(t))}});function et(t,e){return t.startsWith(e)&&F.test(t)}var rt={test:function(t){return"string"==typeof t?et(t,"rgb"):J(t)},parse:Q(["red","green","blue","alpha"]),transform:function(t){var e=t.red,r=t.green,n=t.blue,o=t.alpha;return function(t){var e=t.red,r=t.green,n=t.blue,o=t.alpha;return"rgba("+e+", "+r+", "+n+", "+(void 0===o?1:o)+")"}({red:tt.transform(e),green:tt.transform(r),blue:tt.transform(n),alpha:Z(o)})}},nt={test:function(t){return"string"==typeof t?et(t,"hsl"):K(t)},parse:Q(["hue","saturation","lightness","alpha"]),transform:function(t){var e=t.hue,r=t.saturation,n=t.lightness,o=t.alpha;return function(t){var e=t.hue,r=t.saturation,n=t.lightness,o=t.alpha;return"hsla("+e+", "+r+", "+n+", "+(void 0===o?1:o)+")"}({hue:Math.round(e),saturation:D.transform(Z(r)),lightness:D.transform(Z(n)),alpha:Z(o)})}},ot=V({},rt,{test:function(t){return"string"==typeof t&&et(t,"#")},parse:function(t){var e="",r="",n="";return t.length>4?(e=t.substr(1,2),r=t.substr(3,2),n=t.substr(5,2)):(e=t.substr(1,1),r=t.substr(2,1),n=t.substr(3,1),e+=e,r+=r,n+=n),{red:parseInt(e,16),green:parseInt(r,16),blue:parseInt(n,16),alpha:1}}}),it={test:function(t){return"string"==typeof t&&F.test(t)||J(t)||K(t)},parse:function(t){return rt.test(t)?rt.parse(t):nt.test(t)?nt.parse(t):ot.test(t)?ot.parse(t):t},transform:function(t){return J(t)?rt.transform(t):K(t)?nt.transform(t):t}},at=e({},N,{transform:Math.round}),ut={color:it,backgroundColor:it,outlineColor:it,fill:it,stroke:it,borderColor:it,borderTopColor:it,borderRightColor:it,borderBottomColor:it,borderLeftColor:it,borderWidth:_,borderTopWidth:_,borderRightWidth:_,borderBottomWidth:_,borderLeftWidth:_,borderRadius:_,radius:_,borderTopLeftRadius:_,borderTopRightRadius:_,borderBottomRightRadius:_,borderBottomLeftRadius:_,width:_,maxWidth:_,height:_,maxHeight:_,size:_,top:_,right:_,bottom:_,left:_,padding:_,paddingTop:_,paddingRight:_,paddingBottom:_,paddingLeft:_,margin:_,marginTop:_,marginRight:_,marginBottom:_,marginLeft:_,rotate:q,rotateX:q,rotateY:q,rotateZ:q,scale:U,scaleX:U,scaleY:U,scaleZ:U,skew:q,skewX:q,skewY:q,distance:_,translateX:_,translateY:_,translateZ:_,x:_,y:_,z:_,perspective:_,opacity:H,originX:G,originY:G,originZ:_,zIndex:at,fillOpacity:H,strokeOpacity:H,numOctaves:at},st=function(t){return ut[t]},ft=function(t,e){return e&&"number"==typeof t?e.transform(t):t},dt="scrollLeft",ct="scrollTop",lt=new Set([dt,ct]),pt=new Set([dt,ct,"transform"]),ht={x:"translateX",y:"translateY",z:"translateZ"};function vt(t){return"function"==typeof t}function gt(t,e,r,n,o,i,a){void 0===e&&(e=!0),void 0===r&&(r={}),void 0===n&&(n={}),void 0===o&&(o={}),void 0===i&&(i=[]),void 0===a&&(a=!1);var u=!0,s=!1,f=!1;for(var d in t){var c=t[d],l=st(d),p=ft(c,l);X(d)?(s=!0,n[d]=p,i.push(d),u&&(l.default&&c!==l.default||!l.default&&0!==c)&&(u=!1)):B(d)?(o[d]=p,f=!0):pt.has(d)&&vt(p)||(r[W(d,a)]=p)}return(s||"function"==typeof t.transform)&&(r.transform=function(t,e,r,n,o){var i="",a=!1;r.sort(Y);for(var u=r.length,s=0;s<u;s++){var f=r[s];i+=(ht[f]||f)+"("+e[f]+") ",a="z"===f||a}return!a&&o?i+="translateZ(0)":i=i.trim(),vt(t.transform)?i=t.transform(e,i):n&&(i="none"),i}(t,n,i,u,e)),f&&(r.transformOrigin=(o.originX||"50%")+" "+(o.originY||"50%")+" "+(o.originZ||0)),r}function mt(t,e){void 0===t&&(t=!0),void 0===e&&(e=!0);var r={},n={},o={},i=[];return function(a){return i.length=0,gt(a,t,r,n,o,i,e),r}}var yt=O({onRead:function(t,e){var r=e.element,n=e.preparseOutput,o=st(t);if(X(t))return o&&o.default||0;if(lt.has(t))return r[t];var i=window.getComputedStyle(r,null).getPropertyValue(W(t,!0))||0;return n&&o&&o.test(i)&&o.parse?o.parse(i):i},onRender:function(t,e,r){var n=e.element,o=e.buildStyles,i=e.hasCSSVariable;if(Object.assign(n.style,o(t)),i)for(var a=r.length,u=0;u<a;u++){var s=r[u];s.startsWith("--")&&n.style.setProperty(s,t[s])}-1!==r.indexOf(dt)&&(n[dt]=t[dt]),-1!==r.indexOf(ct)&&(n[ct]=t[ct])},uncachedValues:lt});var bt=new Set(["baseFrequency","diffuseConstant","kernelMatrix","kernelUnitLength","keySplines","keyTimes","limitingConeAngle","markerHeight","markerWidth","numOctaves","targetX","targetY","surfaceScale","specularConstant","specularExponent","stdDeviation","tableValues"]),wt=function(){return{style:{}}},Ot=function(t,e){return _.transform(t*e)},xt={x:0,y:0,width:0,height:0};function St(t,e,r){return"string"==typeof t?t:_.transform(e+r*t)}function Rt(t,e,n,o,i){void 0===e&&(e=xt),void 0===o&&(o=mt(!1,!1)),void 0===i&&(i=wt());var a=t.x,u=t.y,s=(t.z,t.originX),f=void 0===s?.5:s,d=t.originY,c=void 0===d?.5:d,l=t.pathLength,p=t.pathSpacing,h=void 0===p?1:p,v=t.pathOffset,g=void 0===v?0:v,m=o(r(t,["x","y","z","originX","originY","pathLength","pathSpacing","pathOffset"]));for(var y in m){if("transform"===y)i.style.transform=m[y];else i[bt.has(y)?y:S(y)]=m[y]}return void 0===f&&void 0===c||(i.style.transformOrigin=function(t,e,r){return St(e,t.x,t.width)+" "+St(r,t.y,t.height)}(e,f,c)),void 0!==a&&(i.x=a),void 0!==u&&(i.y=u),void 0!==n&&void 0!==l&&(i["stroke-dashoffset"]=Ot(-g,n),i["stroke-dasharray"]=Ot(l,n)+" "+Ot(h,n)),i}var kt=O({onRead:function(t,e){var r=e.element;if(X(t)){var n=st(t);return n?n.default:0}return r.getAttribute(t)},onRender:function(t,e){var r=e.element,n=(0,e.buildAttrs)(t);for(var o in n)"style"===o?Object.assign(r.style,n.style):r.setAttribute(o,n[o])}}),Ct=function(t){var e=function(t){try{return function(t){return"function"==typeof t.getBBox?t.getBBox():t.getBoundingClientRect()}(t)}catch(t){return{x:0,y:0,width:0,height:0}}}(t),r=function(t){return"path"===t.tagName}(t)?t.getTotalLength():void 0;return kt({element:t,buildAttrs:function(t,e){var r=wt(),n=mt(!1,!1);return function(o){return Rt(o,t,e,n,r)}}(e,r)})},Mt=O({useCache:!1,onRead:function(t){return"scrollTop"===t?window.pageYOffset:window.pageXOffset},onRender:function(t){var e=t.scrollTop,r=void 0===e?0:e,n=t.scrollLeft,o=void 0===n?0:n;return window.scrollTo(o,r)}}),Tt=function(){};"production"!==process.env.NODE_ENV&&(Tt=function(t,e){if(!t)throw new Error(e)});var Lt=new WeakMap,Wt=function(t,n){var o;return t instanceof HTMLElement?o=function(t,n){void 0===n&&(n={});var o=n.enableHardwareAcceleration,i=r(n,["enableHardwareAcceleration"]);return yt(e({element:t,buildStyles:mt(o),preparseOutput:!0},i))}(t,n):t instanceof SVGElement?o=Ct(t):t===window&&(o=Mt(t)),Tt(void 0!==o,"No valid node provided. Node must be HTMLElement, SVGElement or window."),Lt.set(t,o),o},At=function(t,e){return Lt.has(t)?Lt.get(t):Wt(t,e)};t.default=function(t,e){var r="string"==typeof t?document.querySelector(t):t;return At(r,e)},t.createStylerFactory=O,t.buildStyleProperty=gt,t.buildSVGAttrs=Rt,t.isTransformProp=X,Object.defineProperty(t,"__esModule",{value:!0})}); |
| import { State, ResolvedState } from '../styler/types'; | ||
| declare function buildStyleProperty(state: State, enableHardwareAcceleration?: boolean, styles?: ResolvedState, transform?: ResolvedState, transformOrigin?: ResolvedState, transformKeys?: string[], isDashCase?: boolean): ResolvedState; | ||
| declare function createStyleBuilder(enableHardwareAcceleration?: boolean): (state: State) => ResolvedState; | ||
| declare function createStyleBuilder(enableHardwareAcceleration?: boolean, isDashCase?: boolean): (state: State) => ResolvedState; | ||
| export { buildStyleProperty, createStyleBuilder }; |
| import createStylerFactory from './styler'; | ||
| import { buildStyleProperty } from './css/build-styles'; | ||
| import { buildSVGAttrs } from './svg/build'; | ||
| import { isTransformProp } from './css/transform-props'; | ||
| import { Styler, Props } from './styler/types'; | ||
| export default function (nodeOrSelector: Element | string | Window, props?: Props): Styler; | ||
| export { createStylerFactory, Styler, buildStyleProperty, isTransformProp }; | ||
| export { createStylerFactory, Styler, buildStyleProperty, buildSVGAttrs, isTransformProp }; |
174
lib/index.js
@@ -107,9 +107,4 @@ 'use strict'; | ||
| var REPLACE_TEMPLATE = '$1-$2'; | ||
| var camelToDash = function (str) { return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase(); }; | ||
| var setDomAttrs = function (element, attrs) { | ||
| for (var key in attrs) { | ||
| if (attrs.hasOwnProperty(key)) { | ||
| element.setAttribute(key, attrs[key]); | ||
| } | ||
| } | ||
| var camelToDash = function (str) { | ||
| return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase(); | ||
| }; | ||
@@ -150,3 +145,3 @@ | ||
| var axes = ['', 'X', 'Y', 'Z']; | ||
| var order = ['scale', 'rotate', 'skew', 'transformPerspective']; | ||
| var order = ['translate', 'scale', 'rotate', 'skew', 'transformPerspective']; | ||
| var transformProps = order.reduce(function (acc, key) { | ||
@@ -173,3 +168,3 @@ return axes.reduce(function (axesAcc, axesKey) { | ||
| var rounded = __assign({}, styleValueTypes.number, { transform: Math.round }); | ||
| var int = __assign({}, styleValueTypes.number, { transform: Math.round }); | ||
| var valueTypes = { | ||
@@ -228,2 +223,5 @@ color: styleValueTypes.color, | ||
| distance: styleValueTypes.px, | ||
| translateX: styleValueTypes.px, | ||
| translateY: styleValueTypes.px, | ||
| translateZ: styleValueTypes.px, | ||
| x: styleValueTypes.px, | ||
@@ -237,3 +235,6 @@ y: styleValueTypes.px, | ||
| originZ: styleValueTypes.px, | ||
| zIndex: rounded | ||
| zIndex: int, | ||
| fillOpacity: styleValueTypes.alpha, | ||
| strokeOpacity: styleValueTypes.alpha, | ||
| numOctaves: int | ||
| }; | ||
@@ -325,4 +326,5 @@ var getValueType = function (key) { return valueTypes[key]; }; | ||
| } | ||
| function createStyleBuilder(enableHardwareAcceleration) { | ||
| function createStyleBuilder(enableHardwareAcceleration, isDashCase) { | ||
| if (enableHardwareAcceleration === void 0) { enableHardwareAcceleration = true; } | ||
| if (isDashCase === void 0) { isDashCase = true; } | ||
| var styles = {}; | ||
@@ -334,3 +336,3 @@ var transform = {}; | ||
| transformKeys.length = 0; | ||
| buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, true); | ||
| buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase); | ||
| return styles; | ||
@@ -411,84 +413,53 @@ }; | ||
| var ZERO_NOT_ZERO = 0.0000001; | ||
| var svgAttrsTemplate = function () { return ({ | ||
| style: {} | ||
| }); }; | ||
| var progressToPixels = function (progress, length) { | ||
| return progress * length + 'px'; | ||
| return styleValueTypes.px.transform(progress * length); | ||
| }; | ||
| var build = function (state, dimensions, isPath, pathLength) { | ||
| var hasTransform = false; | ||
| var hasDashArray = false; | ||
| var props = {}; | ||
| var dashArrayStyles = isPath | ||
| ? { | ||
| pathLength: '0', | ||
| pathSpacing: "" + pathLength | ||
| var unmeasured = { x: 0, y: 0, width: 0, height: 0 }; | ||
| function calcOrigin(origin, offset, size) { | ||
| return typeof origin === 'string' | ||
| ? origin | ||
| : styleValueTypes.px.transform(offset + size * origin); | ||
| } | ||
| function calculateSVGTransformOrigin(dimensions, originX, originY) { | ||
| return calcOrigin(originX, dimensions.x, dimensions.width) + " " + calcOrigin(originY, dimensions.y, dimensions.height); | ||
| } | ||
| function buildSVGAttrs(_a, dimensions, totalPathLength, cssBuilder, attrs) { | ||
| if (dimensions === void 0) { dimensions = unmeasured; } | ||
| if (cssBuilder === void 0) { cssBuilder = createStyleBuilder(false, false); } | ||
| if (attrs === void 0) { attrs = svgAttrsTemplate(); } | ||
| var x = _a.x, y = _a.y, z = _a.z, _b = _a.originX, originX = _b === void 0 ? 0.5 : _b, _c = _a.originY, originY = _c === void 0 ? 0.5 : _c, pathLength = _a.pathLength, _d = _a.pathSpacing, pathSpacing = _d === void 0 ? 1 : _d, _e = _a.pathOffset, pathOffset = _e === void 0 ? 0 : _e, state = __rest(_a, ["x", "y", "z", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]); | ||
| var style = cssBuilder(state); | ||
| for (var key in style) { | ||
| if (key === 'transform') { | ||
| attrs.style.transform = style[key]; | ||
| } | ||
| : undefined; | ||
| var scale = state.scale !== undefined | ||
| ? state.scale || ZERO_NOT_ZERO | ||
| : state.scaleX || 1; | ||
| var scaleY = state.scaleY !== undefined ? state.scaleY || ZERO_NOT_ZERO : scale || 1; | ||
| var transformOriginX = dimensions.width * (state.originX || 50) + dimensions.x; | ||
| var transformOriginY = dimensions.height * (state.originY || 50) + dimensions.y; | ||
| var scaleTransformX = -transformOriginX * (scale * 1); | ||
| var scaleTransformY = -transformOriginY * (scaleY * 1); | ||
| var scaleReplaceX = transformOriginX / scale; | ||
| var scaleReplaceY = transformOriginY / scaleY; | ||
| var transform = { | ||
| translate: "translate(" + state.x + ", " + state.y + ") ", | ||
| scale: "translate(" + scaleTransformX + ", " + scaleTransformY + ") scale(" + scale + ", " + scaleY + ") translate(" + scaleReplaceX + ", " + scaleReplaceY + ") ", | ||
| rotate: "rotate(" + state.rotate + ", " + transformOriginX + ", " + transformOriginY + ") ", | ||
| skewX: "skewX(" + state.skewX + ") ", | ||
| skewY: "skewY(" + state.skewY + ") " | ||
| }; | ||
| for (var key in state) { | ||
| if (state.hasOwnProperty(key)) { | ||
| var value = state[key]; | ||
| if (isTransformProp(key)) { | ||
| hasTransform = true; | ||
| } | ||
| else if (isPath && | ||
| (key === 'pathLength' || key === 'pathSpacing') && | ||
| typeof value === 'number') { | ||
| hasDashArray = true; | ||
| dashArrayStyles[key] = progressToPixels(value, pathLength); | ||
| } | ||
| else if (isPath && key === 'pathOffset') { | ||
| props['stroke-dashoffset'] = progressToPixels(-value, pathLength); | ||
| } | ||
| else { | ||
| var attrKey = !camelCaseAttributes.has(key) ? camelToDash(key) : key; | ||
| props[attrKey] = value; | ||
| } | ||
| else { | ||
| var attrKey = !camelCaseAttributes.has(key) ? camelToDash(key) : key; | ||
| attrs[attrKey] = style[key]; | ||
| } | ||
| } | ||
| if (hasDashArray) { | ||
| props['stroke-dasharray'] = | ||
| dashArrayStyles.pathLength + ' ' + dashArrayStyles.pathSpacing; | ||
| if (originX !== undefined || originY !== undefined) { | ||
| attrs.style.transformOrigin = calculateSVGTransformOrigin(dimensions, originX, originY); | ||
| } | ||
| if (hasTransform) { | ||
| props.transform = ''; | ||
| for (var key in transform) { | ||
| if (transform.hasOwnProperty(key)) { | ||
| var defaultValue = key === 'scale' ? '1' : '0'; | ||
| props.transform += transform[key].replace(/undefined/g, defaultValue); | ||
| } | ||
| } | ||
| if (x !== undefined) | ||
| attrs.x = x; | ||
| if (y !== undefined) | ||
| attrs.y = y; | ||
| if (totalPathLength !== undefined && pathLength !== undefined) { | ||
| attrs['stroke-dashoffset'] = progressToPixels(-pathOffset, totalPathLength); | ||
| attrs['stroke-dasharray'] = progressToPixels(pathLength, totalPathLength) + " " + progressToPixels(pathSpacing, totalPathLength); | ||
| } | ||
| return props; | ||
| }; | ||
| return attrs; | ||
| } | ||
| function createAttrBuilder(dimensions, totalPathLength) { | ||
| var attrs = svgAttrsTemplate(); | ||
| var cssBuilder = createStyleBuilder(false, false); | ||
| return function (state) { | ||
| return buildSVGAttrs(state, dimensions, totalPathLength, cssBuilder, attrs); | ||
| }; | ||
| } | ||
| var int = __assign({}, styleValueTypes.number, { transform: Math.round }); | ||
| var valueTypes$1 = { | ||
| fill: styleValueTypes.color, | ||
| stroke: styleValueTypes.color, | ||
| scale: styleValueTypes.scale, | ||
| scaleX: styleValueTypes.scale, | ||
| scaleY: styleValueTypes.scale, | ||
| opacity: styleValueTypes.alpha, | ||
| fillOpacity: styleValueTypes.alpha, | ||
| strokeOpacity: styleValueTypes.alpha, | ||
| numOctaves: int | ||
| }; | ||
| var getValueType$1 = (function (key) { return valueTypes$1[key]; }); | ||
| var getDimensions = function (element) { | ||
@@ -508,2 +479,5 @@ return typeof element.getBBox === 'function' | ||
| var isPath = function (element) { | ||
| return element.tagName === 'path'; | ||
| }; | ||
| var svgStyler = createStyler({ | ||
@@ -516,3 +490,3 @@ onRead: function (key, _a) { | ||
| else { | ||
| var valueType = getValueType$1(key); | ||
| var valueType = getValueType(key); | ||
| return valueType ? valueType.default : 0; | ||
@@ -522,4 +496,12 @@ } | ||
| onRender: function (state, _a) { | ||
| var dimensions = _a.dimensions, element = _a.element, isPath = _a.isPath, pathLength = _a.pathLength; | ||
| setDomAttrs(element, build(state, dimensions, isPath, pathLength)); | ||
| var element = _a.element, buildAttrs = _a.buildAttrs; | ||
| var attrs = buildAttrs(state); | ||
| for (var key in attrs) { | ||
| if (key === 'style') { | ||
| Object.assign(element.style, attrs.style); | ||
| } | ||
| else { | ||
| element.setAttribute(key, attrs[key]); | ||
| } | ||
| } | ||
| } | ||
@@ -529,12 +511,7 @@ }); | ||
| var dimensions = getSVGElementDimensions(element); | ||
| var props = { | ||
| var pathLength = isPath(element) ? element.getTotalLength() : undefined; | ||
| return svgStyler({ | ||
| element: element, | ||
| dimensions: dimensions, | ||
| isPath: false | ||
| }; | ||
| if (element.tagName === 'path') { | ||
| props.isPath = true; | ||
| props.pathLength = element.getTotalLength(); | ||
| } | ||
| return svgStyler(props); | ||
| buildAttrs: createAttrBuilder(dimensions, pathLength) | ||
| }); | ||
| }); | ||
@@ -582,2 +559,3 @@ | ||
| exports.buildStyleProperty = buildStyleProperty; | ||
| exports.buildSVGAttrs = buildSVGAttrs; | ||
| exports.isTransformProp = isTransformProp; |
| export declare const camelToDash: (str: string) => string; | ||
| export declare const setDomAttrs: (element: Element, attrs: { | ||
| [key: string]: any; | ||
| }) => void; |
| import { Dimensions, SVGState } from './types'; | ||
| declare const build: (state: SVGState, dimensions: Dimensions, isPath: boolean, pathLength?: number) => SVGState; | ||
| export default build; | ||
| import { State, ResolvedState } from '../styler/types'; | ||
| export declare type SVGAttrs = { | ||
| [key: string]: any; | ||
| style?: { | ||
| transform?: string; | ||
| transformOrigin?: string; | ||
| }; | ||
| }; | ||
| export declare type Dimensions = { | ||
| x: number; | ||
| y: number; | ||
| width: number; | ||
| height: number; | ||
| }; | ||
| export declare function buildSVGAttrs({ x, y, z, originX, originY, pathLength, pathSpacing, pathOffset, ...state }: State & SVGState, dimensions?: Dimensions, totalPathLength?: number | undefined, cssBuilder?: (state: State) => ResolvedState, attrs?: SVGAttrs): SVGAttrs; | ||
| export declare function createAttrBuilder(dimensions: Dimensions, totalPathLength?: number): (state: State & SVGState) => SVGAttrs; |
| import { Styler } from '../styler/types'; | ||
| export { Styler }; | ||
| declare const _default: (props?: import("stylefire/src/styler/types").Props) => Styler; | ||
| declare const _default: ({ ...props }?: import("stylefire/src/styler/types").Props) => Styler; | ||
| export default _default; |
| { | ||
| "name": "stylefire", | ||
| "version": "5.0.0", | ||
| "version": "6.0.0", | ||
| "description": "Performant, simplified stylers for CSS, SVG, path and DOM scroll.", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.63%
100723
- Lines of code
- decreased by-1.43%
2066
No dependency changes