@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
111 lines • 4.29 kB
JavaScript
;
/**
* Based on CSS Tricks tutorial.
* @see https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/
*/
var __rest = (this && this.__rest) || function (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 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
class CssCustomProperties {
constructor(props = {}) {
this.getterDefaultProps = {};
this.customprops = {};
// Methods
this.customProperties = (props = {}) => {
// FIXME:
// in case of performance issues results should get saved at least into intern variables
// other cache strategies could be also tested
if (Object.keys(this.customprops).length > 1) {
return this.customprops;
}
const customprops = CssCustomProperties.listCustomProperties(Object.assign(Object.assign({}, this.getterDefaultProps), props));
this.customprops = customprops;
return customprops;
};
this.getterDefaultProps = props;
}
}
CssCustomProperties.listLocalStylesheets = () => {
if (document && document.styleSheets) {
return Array.from(document.styleSheets).filter((stylesheet) => {
// is inline stylesheet or from same domain
if (!stylesheet.href) {
return true;
}
return stylesheet.href.indexOf(window.location.origin) === 0;
});
}
return [];
};
CssCustomProperties.listLocalCssRules = () => {
return CssCustomProperties.listLocalStylesheets()
.map((stylesheet) => {
return Array.from(stylesheet.cssRules);
})
.flat();
};
CssCustomProperties.listLocalCssStyleRules = (filter = {}) => {
const { cssRuleType = "CSSStyleRule", selectorText } = filter;
const cssStyleRules = CssCustomProperties.listLocalCssRules().filter((rule) => {
const cssrule = rule;
if (cssrule.style) {
if (cssrule.constructor.name !== cssRuleType) {
return false;
}
if (!!selectorText && cssrule.selectorText !== selectorText) {
return false;
}
return true;
}
else {
return false;
}
});
return cssStyleRules;
};
CssCustomProperties.listLocalCssStyleRuleProperties = (filter = {}) => {
const { propertyType = "all" } = filter, otherFilters = __rest(filter, ["propertyType"]);
return CssCustomProperties.listLocalCssStyleRules(otherFilters)
.map((cssrule) => {
return [...cssrule.style].map((propertyname) => {
return [propertyname.trim(), cssrule.style.getPropertyValue(propertyname).trim()];
});
})
.flat()
.filter((declaration) => {
switch (propertyType) {
case "normal":
return declaration[0].indexOf("--") !== 0;
case "custom":
return declaration[0].indexOf("--") === 0;
}
return true; // case "all"
});
};
CssCustomProperties.listCustomProperties = (props = {}) => {
const { removeDashPrefix = true, returnObject = true, filterName = () => true } = props, filterProps = __rest(props, ["removeDashPrefix", "returnObject", "filterName"]);
const customProperties = CssCustomProperties.listLocalCssStyleRuleProperties(Object.assign(Object.assign({}, filterProps), { propertyType: "custom" }))
.filter((declaration) => {
return filterName(declaration[0]);
})
.map((declaration) => {
if (removeDashPrefix) {
return [declaration[0].substr(2), declaration[1]];
}
return declaration;
});
return returnObject
? Object.fromEntries(customProperties)
: customProperties;
};
exports.default = CssCustomProperties;
//# sourceMappingURL=CssCustomProperties.js.map