handsontable
Version:
Handsontable is a JavaScript Data Grid available for React, Angular and Vue.
188 lines (181 loc) • 6.34 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.createThemeManager = createThemeManager;
var _iconsMap = require("../static/variables/helpers/iconsMap");
var _errors = require("../../helpers/errors");
var _cssVariables = require("./utils/cssVariables");
function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
/**
* The theme prefix.
*
* @type {string}
*/
const THEME_PREFIX = 'ht-theme-';
/**
* ThemeManager class provides methods to manage the theme styles.
*
* @class ThemeManager
*/
var _ThemeManager_brand = /*#__PURE__*/new WeakSet();
class ThemeManager {
/**
* The theme manager constructor.
*
* @param {object} options - The options object.
* @param {Handsontable} options.hot - The Handsontable instance.
* @param {object} options.themeObject - The theme object.
*/
constructor(_ref) {
let {
hot,
themeObject
} = _ref;
/**
* Injects theme styles into the DOM.
*/
_classPrivateMethodInitSpec(this, _ThemeManager_brand);
/**
* The Handsontable instance.
*
* @type {Handsontable}
*/
_defineProperty(this, "hot", void 0);
/**
* The theme styles element.
*
* @type {HTMLStyleElement}
*/
_defineProperty(this, "themeStyles", void 0);
/**
* The theme class name.
*
* @type {string}
*/
_defineProperty(this, "themeClassName", void 0);
/**
* The theme config.
*
* @type {object}
*/
_defineProperty(this, "themeConfig", void 0);
this.hot = hot;
this.update(themeObject);
}
/**
* Gets the theme class name.
*
* @returns {string} The theme class name.
*/
getClassName() {
return this.themeClassName;
}
/**
* Updates the theme manager.
*
* @param {object} themeObject - The theme object.
*/
update(themeObject) {
if (!this.hot) {
return;
}
if (themeObject.getThemeConfig === undefined) {
(0, _errors.throwWithCause)('[ThemeManager] The "theme" option must be an instance of ThemeBuilder.');
}
this.themeConfig = themeObject.getThemeConfig();
this.themeClassName = `${THEME_PREFIX}${this.themeConfig.name}`;
if (typeof themeObject.subscribe === 'function') {
themeObject.subscribe(config => {
var _this$hot;
if (!((_this$hot = this.hot) !== null && _this$hot !== void 0 && _this$hot.stylesHandler)) {
return;
}
this.themeConfig = config;
_assertClassBrand(_ThemeManager_brand, this, _injectThemeStyles).call(this);
this.hot.stylesHandler.clearCache();
this.hot.render();
this.hot.runHooks('afterSetTheme', this.themeClassName, false);
});
}
this.mount();
this.hot.runHooks('afterSetTheme', this.themeClassName, true);
}
/**
* Mounts the theme manager.
*/
mount() {
_assertClassBrand(_ThemeManager_brand, this, _injectThemeStyles).call(this);
}
/**
* Unmounts the theme manager.
*/
unmount() {
if (this.themeStyles) {
this.themeStyles.remove();
}
}
/**
* Destroys the theme manager.
*/
destroy() {
this.unmount();
this.hot.themeManager = null;
}
}
/**
* Creates a new ThemeManager instance.
*
* @param {object} options - The options object.
* @param {Handsontable} options.hot - The Handsontable instance.
* @param {object} options.themeObject - The theme object.
* @returns {ThemeManager} The ThemeManager instance.
*/
exports.ThemeManager = ThemeManager;
function _injectThemeStyles() {
if (!this.themeConfig || !this.hot || !this.hot.rootDocument || !this.hot.rootWrapperElement) {
return;
}
const colorScheme = this.themeConfig.colorScheme === 'auto' ? 'light dark' : this.themeConfig.colorScheme;
if (this.themeStyles) {
this.themeStyles.textContent = '';
} else {
this.themeStyles = this.hot.rootDocument.createElement('style');
}
this.themeStyles.textContent = `:where(.${this.themeClassName}) {\n`;
this.themeStyles.textContent += `color-scheme: ${colorScheme};\n`;
if (this.themeConfig.sizing) {
this.themeStyles.textContent += (0, _cssVariables.flattenCssVariables)(this.themeConfig.sizing, 'sizing');
}
if (this.themeConfig.density && this.themeConfig.density.type && this.themeConfig.density.sizes && this.themeConfig.density.sizes[this.themeConfig.density.type]) {
this.themeStyles.textContent += (0, _cssVariables.flattenCssVariables)(this.themeConfig.density.sizes[this.themeConfig.density.type], 'density');
}
if (this.themeConfig.colors) {
this.themeStyles.textContent += (0, _cssVariables.flattenCssVariables)(this.themeConfig.colors, 'colors');
}
if (this.themeConfig.tokens) {
this.themeStyles.textContent += (0, _cssVariables.flattenCssVariables)(this.themeConfig.tokens);
}
if (this.themeConfig.icons) {
this.themeStyles.textContent += (0, _iconsMap.iconsMap)(this.themeConfig.icons);
}
this.themeStyles.textContent += '}';
if (this.hot.rootWrapperElement && this.hot.rootWrapperElement.querySelector('style')) {
this.hot.rootWrapperElement.querySelector('style').textContent = this.themeStyles.textContent;
} else {
this.hot.rootWrapperElement.prepend(this.themeStyles);
}
}
function createThemeManager(_ref2) {
let {
hot,
themeObject
} = _ref2;
return new ThemeManager({
hot,
themeObject
});
}