jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
545 lines (524 loc) • 19.1 kB
JavaScript
import { invariant } from '../../hey-listen/dist/hey-listen.es.js';
import sync from '../../framesync/dist/framesync.es.js';
import { px, color, degrees, scale, alpha, progressPercentage, number } from '../../style-value-types/dist/style-value-types.es.js';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0) t[p[i]] = s[p[i]];
return t;
}
var createStyler = function (_a) {
var onRead = _a.onRead,
onRender = _a.onRender,
_b = _a.uncachedValues,
uncachedValues = _b === void 0 ? new Set() : _b,
_c = _a.useCache,
useCache = _c === void 0 ? true : _c;
return function (_a) {
if (_a === void 0) {
_a = {};
}
var props = __rest(_a, []);
var state = {};
var changedValues = [];
var hasChanged = false;
function setValue(key, value) {
if (key.startsWith('--')) {
props.hasCSSVariable = true;
}
var currentValue = state[key];
state[key] = value;
if (state[key] === currentValue) return;
if (changedValues.indexOf(key) === -1) {
changedValues.push(key);
}
if (!hasChanged) {
hasChanged = true;
sync.render(styler.render);
}
}
var styler = {
get: function (key, forceRead) {
if (forceRead === void 0) {
forceRead = false;
}
var useCached = !forceRead && useCache && !uncachedValues.has(key) && state[key] !== undefined;
return useCached ? state[key] : onRead(key, props);
},
set: function (values, value) {
if (typeof values === 'string') {
setValue(values, value);
} else {
for (var key in values) {
setValue(key, values[key]);
}
}
return this;
},
render: function (forceRender) {
if (forceRender === void 0) {
forceRender = false;
}
if (hasChanged || forceRender === true) {
onRender(state, props, changedValues);
hasChanged = false;
changedValues.length = 0;
}
return this;
}
};
return styler;
};
};
var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
var REPLACE_TEMPLATE = '$1-$2';
var camelToDash = function (str) {
return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
};
var camelCache = /*#__PURE__*/new Map();
var dashCache = /*#__PURE__*/new Map();
var prefixes = ['Webkit', 'Moz', 'O', 'ms', ''];
var numPrefixes = prefixes.length;
var isBrowser = typeof document !== 'undefined';
var testElement;
var setDashPrefix = function (key, prefixed) {
return dashCache.set(key, camelToDash(prefixed));
};
var testPrefix = function (key) {
testElement = testElement || document.createElement('div');
for (var i = 0; i < numPrefixes; i++) {
var prefix = prefixes[i];
var noPrefix = prefix === '';
var prefixedPropertyName = noPrefix ? key : prefix + key.charAt(0).toUpperCase() + key.slice(1);
if (prefixedPropertyName in testElement.style || noPrefix) {
camelCache.set(key, prefixedPropertyName);
setDashPrefix(key, "" + (noPrefix ? '' : '-') + camelToDash(prefixedPropertyName));
}
}
};
var setServerProperty = function (key) {
return setDashPrefix(key, key);
};
var prefixer = function (key, asDashCase) {
if (asDashCase === void 0) {
asDashCase = false;
}
var cache = asDashCase ? dashCache : camelCache;
if (!cache.has(key)) isBrowser ? testPrefix(key) : setServerProperty(key);
return cache.get(key) || key;
};
var axes = ['', 'X', 'Y', 'Z'];
var order = ['translate', 'scale', 'rotate', 'skew', 'transformPerspective'];
var transformProps = /*#__PURE__*/order.reduce(function (acc, key) {
return axes.reduce(function (axesAcc, axesKey) {
axesAcc.push(key + axesKey);
return axesAcc;
}, acc);
}, ['x', 'y', 'z']);
var transformPropDictionary = /*#__PURE__*/transformProps.reduce(function (dict, key) {
dict[key] = true;
return dict;
}, {});
function isTransformProp(key) {
return transformPropDictionary[key] === true;
}
function sortTransformProps(a, b) {
return transformProps.indexOf(a) - transformProps.indexOf(b);
}
var transformOriginProps = /*#__PURE__*/new Set(['originX', 'originY', 'originZ']);
function isTransformOriginProp(key) {
return transformOriginProps.has(key);
}
var int = /*#__PURE__*/__assign({}, number, { transform: Math.round });
var valueTypes = {
color: color,
backgroundColor: color,
outlineColor: color,
fill: color,
stroke: color,
borderColor: color,
borderTopColor: color,
borderRightColor: color,
borderBottomColor: color,
borderLeftColor: color,
borderWidth: px,
borderTopWidth: px,
borderRightWidth: px,
borderBottomWidth: px,
borderLeftWidth: px,
borderRadius: px,
radius: px,
borderTopLeftRadius: px,
borderTopRightRadius: px,
borderBottomRightRadius: px,
borderBottomLeftRadius: px,
width: px,
maxWidth: px,
height: px,
maxHeight: px,
size: px,
top: px,
right: px,
bottom: px,
left: px,
padding: px,
paddingTop: px,
paddingRight: px,
paddingBottom: px,
paddingLeft: px,
margin: px,
marginTop: px,
marginRight: px,
marginBottom: px,
marginLeft: px,
rotate: degrees,
rotateX: degrees,
rotateY: degrees,
rotateZ: degrees,
scale: scale,
scaleX: scale,
scaleY: scale,
scaleZ: scale,
skew: degrees,
skewX: degrees,
skewY: degrees,
distance: px,
translateX: px,
translateY: px,
translateZ: px,
x: px,
y: px,
z: px,
perspective: px,
opacity: alpha,
originX: progressPercentage,
originY: progressPercentage,
originZ: px,
zIndex: int,
fillOpacity: alpha,
strokeOpacity: alpha,
numOctaves: int
};
var getValueType = function (key) {
return valueTypes[key];
};
var getValueAsType = function (value, type) {
return type && typeof value === 'number' ? type.transform(value) : value;
};
var SCROLL_LEFT = 'scrollLeft';
var SCROLL_TOP = 'scrollTop';
var scrollKeys = /*#__PURE__*/new Set([SCROLL_LEFT, SCROLL_TOP]);
var blacklist = /*#__PURE__*/new Set([SCROLL_LEFT, SCROLL_TOP, 'transform']);
var translateAlias = {
x: 'translateX',
y: 'translateY',
z: 'translateZ'
};
function isCustomTemplate(v) {
return typeof v === 'function';
}
function buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration) {
var transformString = '';
var transformHasZ = false;
transformKeys.sort(sortTransformProps);
var numTransformKeys = transformKeys.length;
for (var i = 0; i < numTransformKeys; i++) {
var key = transformKeys[i];
transformString += (translateAlias[key] || key) + "(" + transform[key] + ") ";
transformHasZ = key === 'z' ? true : transformHasZ;
}
if (!transformHasZ && enableHardwareAcceleration) {
transformString += 'translateZ(0)';
} else {
transformString = transformString.trim();
}
if (isCustomTemplate(state.transform)) {
transformString = state.transform(transform, transformString);
} else if (transformIsDefault) {
transformString = 'none';
}
return transformString;
}
function buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase) {
if (enableHardwareAcceleration === void 0) {
enableHardwareAcceleration = true;
}
if (styles === void 0) {
styles = {};
}
if (transform === void 0) {
transform = {};
}
if (transformOrigin === void 0) {
transformOrigin = {};
}
if (transformKeys === void 0) {
transformKeys = [];
}
if (isDashCase === void 0) {
isDashCase = false;
}
var transformIsDefault = true;
var hasTransform = false;
var hasTransformOrigin = false;
for (var key in state) {
var value = state[key];
var valueType = getValueType(key);
var valueAsType = getValueAsType(value, valueType);
if (isTransformProp(key)) {
hasTransform = true;
transform[key] = valueAsType;
transformKeys.push(key);
if (transformIsDefault) {
if (valueType.default && value !== valueType.default || !valueType.default && value !== 0) {
transformIsDefault = false;
}
}
} else if (isTransformOriginProp(key)) {
transformOrigin[key] = valueAsType;
hasTransformOrigin = true;
} else if (!blacklist.has(key) || !isCustomTemplate(valueAsType)) {
styles[prefixer(key, isDashCase)] = valueAsType;
}
}
if (hasTransform || typeof state.transform === 'function') {
styles.transform = buildTransform(state, transform, transformKeys, transformIsDefault, enableHardwareAcceleration);
}
if (hasTransformOrigin) {
styles.transformOrigin = (transformOrigin.originX || '50%') + " " + (transformOrigin.originY || '50%') + " " + (transformOrigin.originZ || 0);
}
return styles;
}
function createStyleBuilder(enableHardwareAcceleration, isDashCase) {
if (enableHardwareAcceleration === void 0) {
enableHardwareAcceleration = true;
}
if (isDashCase === void 0) {
isDashCase = true;
}
var styles = {};
var transform = {};
var transformOrigin = {};
var transformKeys = [];
return function (state) {
transformKeys.length = 0;
buildStyleProperty(state, enableHardwareAcceleration, styles, transform, transformOrigin, transformKeys, isDashCase);
return styles;
};
}
function onRead(key, options) {
var element = options.element,
preparseOutput = options.preparseOutput;
var defaultValueType = getValueType(key);
if (isTransformProp(key)) {
return defaultValueType ? defaultValueType.default || 0 : 0;
} else if (scrollKeys.has(key)) {
return element[key];
} else {
var domValue = window.getComputedStyle(element, null).getPropertyValue(prefixer(key, true)) || 0;
return preparseOutput && defaultValueType && defaultValueType.test(domValue) && defaultValueType.parse ? defaultValueType.parse(domValue) : domValue;
}
}
function onRender(state, _a, changedValues) {
var element = _a.element,
buildStyles = _a.buildStyles,
hasCSSVariable = _a.hasCSSVariable;
Object.assign(element.style, buildStyles(state));
if (hasCSSVariable) {
var numChangedValues = changedValues.length;
for (var i = 0; i < numChangedValues; i++) {
var key = changedValues[i];
if (key.startsWith('--')) {
element.style.setProperty(key, state[key]);
}
}
}
if (changedValues.indexOf(SCROLL_LEFT) !== -1) {
element[SCROLL_LEFT] = state[SCROLL_LEFT];
}
if (changedValues.indexOf(SCROLL_TOP) !== -1) {
element[SCROLL_TOP] = state[SCROLL_TOP];
}
}
var cssStyler = /*#__PURE__*/createStyler({
onRead: onRead,
onRender: onRender,
uncachedValues: scrollKeys
});
function createCssStyler(element, _a) {
if (_a === void 0) {
_a = {};
}
var enableHardwareAcceleration = _a.enableHardwareAcceleration,
props = __rest(_a, ["enableHardwareAcceleration"]);
return cssStyler(__assign({ element: element, buildStyles: createStyleBuilder(enableHardwareAcceleration), preparseOutput: true }, props));
}
var camelCaseAttributes = /*#__PURE__*/new Set(['baseFrequency', 'diffuseConstant', 'kernelMatrix', 'kernelUnitLength', 'keySplines', 'keyTimes', 'limitingConeAngle', 'markerHeight', 'markerWidth', 'numOctaves', 'targetX', 'targetY', 'surfaceScale', 'specularConstant', 'specularExponent', 'stdDeviation', 'tableValues']);
var svgAttrsTemplate = function () {
return {
style: {}
};
};
var progressToPixels = function (progress, length) {
return px.transform(progress * length);
};
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];
} else {
var attrKey = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
attrs[attrKey] = style[key];
}
}
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 getDimensions = function (element) {
return typeof element.getBBox === 'function' ? element.getBBox() : element.getBoundingClientRect();
};
var getSVGElementDimensions = function (element) {
try {
return getDimensions(element);
} catch (e) {
return { x: 0, y: 0, width: 0, height: 0 };
}
};
var isPath = function (element) {
return element.tagName === 'path';
};
var svgStyler = /*#__PURE__*/createStyler({
onRead: function (key, _a) {
var element = _a.element;
key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
if (!isTransformProp(key)) {
return element.getAttribute(key);
} else {
var valueType = getValueType(key);
return valueType ? valueType.default || 0 : 0;
}
},
onRender: function (state, _a) {
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]);
}
}
}
});
var svg = function (element) {
var dimensions = getSVGElementDimensions(element);
var pathLength = isPath(element) && element.getTotalLength ? element.getTotalLength() : undefined;
return svgStyler({
element: element,
buildAttrs: createAttrBuilder(dimensions, pathLength)
});
};
var viewport = /*#__PURE__*/createStyler({
useCache: false,
onRead: function (key) {
return key === 'scrollTop' ? window.pageYOffset : window.pageXOffset;
},
onRender: function (_a) {
var _b = _a.scrollTop,
scrollTop = _b === void 0 ? 0 : _b,
_c = _a.scrollLeft,
scrollLeft = _c === void 0 ? 0 : _c;
return window.scrollTo(scrollLeft, scrollTop);
}
});
var cache = /*#__PURE__*/new WeakMap();
var createDOMStyler = function (node, props) {
var styler;
if (node instanceof HTMLElement) {
styler = createCssStyler(node, props);
} else if (node instanceof SVGElement) {
styler = svg(node);
} else if (node === window) {
styler = viewport(node);
}
invariant(styler !== undefined, 'No valid node provided. Node must be HTMLElement, SVGElement or window.');
cache.set(node, styler);
return styler;
};
var getStyler = function (node, props) {
return cache.has(node) ? cache.get(node) : createDOMStyler(node, props);
};
function index(nodeOrSelector, props) {
var node = typeof nodeOrSelector === 'string' ? document.querySelector(nodeOrSelector) : nodeOrSelector;
return getStyler(node, props);
}
export default index;
export { buildSVGAttrs, buildStyleProperty, createStyler as createStylerFactory, isTransformProp, transformProps };