playable
Version:
Video player based on HTML5Video
86 lines • 3.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyleSheet = void 0;
var tslib_1 = require("tslib");
var camelToKebab_1 = (0, tslib_1.__importDefault)(require("./utils/camelToKebab"));
var generateClassNames_1 = (0, tslib_1.__importDefault)(require("./utils/generateClassNames"));
var StyleSheet = /** @class */ (function () {
function StyleSheet() {
this._rulesByModule = new Map();
this._classNamesByModule = new Map();
this._data = {};
}
StyleSheet.prototype.attach = function () {
var _this = this;
this._styleNode = this._styleNode || document.createElement('style');
var discoveredStyles = [];
this._rulesByModule.forEach(function (_, module) {
discoveredStyles.push(_this._getModuleCSS(module));
});
this._styleNode.innerHTML = discoveredStyles.join(' ');
document.getElementsByTagName('head')[0].appendChild(this._styleNode);
};
StyleSheet.prototype.update = function (data) {
this._data = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, this._data), data);
if (this._styleNode) {
this.attach();
}
};
StyleSheet.prototype.registerModuleTheme = function (module, rules) {
//todo maybe we would like to update overrides for module? Or at least show warning instead of Error
if (this._rulesByModule.get(module)) {
throw new Error('can`t register multiple themes for one module');
}
this._rulesByModule.set(module, rules);
this._classNamesByModule.set(module, (0, generateClassNames_1.default)(rules));
};
StyleSheet.prototype.getModuleClassNames = function (module) {
return this._classNamesByModule.get(module);
};
StyleSheet.prototype._getModuleCSS = function (module) {
var _this = this;
var moduleRules = this._rulesByModule.get(module);
var moduleClassNames = this._classNamesByModule.get(module);
if (!moduleRules || !moduleClassNames) {
return '';
}
return Object.keys(moduleRules)
.map(function (classImportName) {
return _this._getRuleCSS(moduleRules[classImportName], moduleClassNames[classImportName]);
})
.join(' ');
};
StyleSheet.prototype._getRuleCSS = function (rule, ruleClassName) {
var _this = this;
if (!rule || !ruleClassName) {
return '';
}
var complexRuleNames = Object.keys(rule)
.filter(function (ruleName) { return typeof rule[ruleName] === 'object'; })
.map(function (ruleName) {
return ruleName.indexOf('&') !== -1 ? ruleName : "& ".concat(ruleName);
});
var complexRules = complexRuleNames
.map(function (ruleName) {
var selector = ruleName.replace(/&/g, ".".concat(ruleClassName));
//don't want to allow deep nesting now, maybe later
return "".concat(selector, " {").concat(_this._getRuleStyles(rule[ruleName]), "}");
})
.join(' ');
return ".".concat(ruleClassName, " {").concat(this._getRuleStyles(rule), "} ").concat(complexRules);
};
StyleSheet.prototype._getRuleStyles = function (rule) {
var _this = this;
var simpleRuleNames = Object.keys(rule).filter(function (ruleName) { return typeof rule[ruleName] !== 'object'; });
return simpleRuleNames
.map(function (ruleName) {
return "".concat((0, camelToKebab_1.default)(ruleName), ": ").concat(typeof rule[ruleName] === 'function'
? rule[ruleName](_this._data)
: rule[ruleName]);
})
.join('; ');
};
return StyleSheet;
}());
exports.StyleSheet = StyleSheet;
//# sourceMappingURL=style-sheet.js.map