194 lines
8.7 KiB
JavaScript
194 lines
8.7 KiB
JavaScript
|
"use strict";
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.ShadowDomStylesheet = exports.SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS = exports.SUPPORTS_CONSTRUCTABLE_STYLESHEETS = void 0;
|
||
|
|
var tslib_1 = require("tslib");
|
||
|
|
/* eslint no-restricted-globals: 0 */
|
||
|
|
var Stylesheet_1 = require("./Stylesheet");
|
||
|
|
var shadowConfig_1 = require("./shadowConfig");
|
||
|
|
exports.SUPPORTS_CONSTRUCTABLE_STYLESHEETS = typeof document !== 'undefined' && Array.isArray(document.adoptedStyleSheets) && 'replace' in CSSStyleSheet.prototype;
|
||
|
|
var supportsModifyingAdoptedStyleSheets = false;
|
||
|
|
if (exports.SUPPORTS_CONSTRUCTABLE_STYLESHEETS) {
|
||
|
|
try {
|
||
|
|
document.adoptedStyleSheets.push();
|
||
|
|
supportsModifyingAdoptedStyleSheets = true;
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
supportsModifyingAdoptedStyleSheets = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
exports.SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS = supportsModifyingAdoptedStyleSheets;
|
||
|
|
var _stylesheet;
|
||
|
|
var _global = {};
|
||
|
|
// Grab window.
|
||
|
|
try {
|
||
|
|
// Why the cast?
|
||
|
|
// if compiled/type checked in same program with `@fluentui/font-icons-mdl2` which extends `Window` on global
|
||
|
|
// ( check packages/font-icons-mdl2/src/index.ts ) the definitions don't match! Thus the need of this extra assertion
|
||
|
|
_global = (window || {});
|
||
|
|
}
|
||
|
|
catch (_a) {
|
||
|
|
/* leave as blank object */
|
||
|
|
}
|
||
|
|
var copyOldGlobalRules = function (stylesheet, inShadow, win, doc) {
|
||
|
|
var _a;
|
||
|
|
if (inShadow === void 0) { inShadow = false; }
|
||
|
|
if (!doc) {
|
||
|
|
// SSR
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var oldGlobalRules = doc.querySelectorAll('[data-merge-styles]');
|
||
|
|
if (oldGlobalRules) {
|
||
|
|
stylesheet.setConfig({
|
||
|
|
window: win,
|
||
|
|
inShadow: inShadow,
|
||
|
|
stylesheetKey: shadowConfig_1.GLOBAL_STYLESHEET_KEY,
|
||
|
|
});
|
||
|
|
for (var i = 0; i < oldGlobalRules.length; i++) {
|
||
|
|
var styleElem = oldGlobalRules[i];
|
||
|
|
styleElem.setAttribute('data-merge-styles-global', 'true');
|
||
|
|
var cssRules = ((_a = styleElem.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) || [];
|
||
|
|
for (var j = 0; j < cssRules.length; j++) {
|
||
|
|
var rule = cssRules[j];
|
||
|
|
stylesheet.insertRule(rule.cssText);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var ShadowDomStylesheet = /** @class */ (function (_super) {
|
||
|
|
tslib_1.__extends(ShadowDomStylesheet, _super);
|
||
|
|
function ShadowDomStylesheet(config, serializedStylesheet) {
|
||
|
|
var _this = _super.call(this, config, serializedStylesheet) || this;
|
||
|
|
_this._onAddSheetCallbacks = [];
|
||
|
|
_this._sheetCounter = 0;
|
||
|
|
_this._adoptableSheets = new Map();
|
||
|
|
_global[shadowConfig_1.SHADOW_DOM_STYLESHEET_SETTING] = ShadowDomStylesheet;
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
ShadowDomStylesheet.getInstance = function (shadowConfig) {
|
||
|
|
var sConfig = shadowConfig || shadowConfig_1.DEFAULT_SHADOW_CONFIG;
|
||
|
|
var stylesheetKey = sConfig.stylesheetKey || shadowConfig_1.GLOBAL_STYLESHEET_KEY;
|
||
|
|
var inShadow = sConfig.inShadow;
|
||
|
|
var win = sConfig.window || (typeof window !== 'undefined' ? window : undefined);
|
||
|
|
var global = (win || _global);
|
||
|
|
var doc = win ? win.document : typeof document !== 'undefined' ? document : undefined;
|
||
|
|
_stylesheet = global[Stylesheet_1.STYLESHEET_SETTING];
|
||
|
|
// When an app has multiple versions of Fluent v8 it is possible
|
||
|
|
// that an older version of Stylesheet is initialized before
|
||
|
|
// the version that supports shadow DOM. We check for this case
|
||
|
|
// and re-initialize the stylesheet in that case.
|
||
|
|
var oldStylesheetInitializedFirst = _stylesheet && !_stylesheet.getAdoptedSheets;
|
||
|
|
if (!_stylesheet ||
|
||
|
|
oldStylesheetInitializedFirst ||
|
||
|
|
(_stylesheet._lastStyleElement && _stylesheet._lastStyleElement.ownerDocument !== doc)) {
|
||
|
|
var fabricConfig = (global === null || global === void 0 ? void 0 : global.FabricConfig) || {};
|
||
|
|
var defaultMergeStyles = {
|
||
|
|
window: win,
|
||
|
|
inShadow: inShadow,
|
||
|
|
stylesheetKey: stylesheetKey,
|
||
|
|
};
|
||
|
|
fabricConfig.mergeStyles = fabricConfig.mergeStyles || {};
|
||
|
|
fabricConfig.mergeStyles = tslib_1.__assign(tslib_1.__assign({}, defaultMergeStyles), fabricConfig.mergeStyles);
|
||
|
|
var stylesheet = void 0;
|
||
|
|
if (oldStylesheetInitializedFirst) {
|
||
|
|
stylesheet = new ShadowDomStylesheet(fabricConfig.mergeStyles, JSON.parse(_stylesheet.serialize()));
|
||
|
|
copyOldGlobalRules(stylesheet, inShadow, win, doc);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
stylesheet = new ShadowDomStylesheet(fabricConfig.mergeStyles, fabricConfig.serializedStylesheet);
|
||
|
|
}
|
||
|
|
_stylesheet = stylesheet;
|
||
|
|
global[Stylesheet_1.STYLESHEET_SETTING] = _stylesheet;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_stylesheet.setConfig({
|
||
|
|
window: win,
|
||
|
|
inShadow: inShadow,
|
||
|
|
stylesheetKey: stylesheetKey,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (win) {
|
||
|
|
_stylesheet._getAdoptableStyleSheet(stylesheetKey);
|
||
|
|
}
|
||
|
|
return _stylesheet;
|
||
|
|
};
|
||
|
|
ShadowDomStylesheet.prototype.getAdoptedSheets = function () {
|
||
|
|
return this._adoptableSheets;
|
||
|
|
};
|
||
|
|
ShadowDomStylesheet.prototype.onAddSheet = function (callback) {
|
||
|
|
var _this = this;
|
||
|
|
this._onAddSheetCallbacks.push(callback);
|
||
|
|
return function () {
|
||
|
|
_this._onAddSheetCallbacks = _this._onAddSheetCallbacks.filter(function (cb) { return cb !== callback; });
|
||
|
|
};
|
||
|
|
};
|
||
|
|
ShadowDomStylesheet.prototype.insertRule = function (rule, preserve) {
|
||
|
|
var _a = this._config, injectionMode = _a.injectionMode, _b = _a.stylesheetKey, stylesheetKey = _b === void 0 ? shadowConfig_1.GLOBAL_STYLESHEET_KEY : _b;
|
||
|
|
var injectStyles = injectionMode !== Stylesheet_1.InjectionMode.none;
|
||
|
|
var addToConstructableStylesheet = stylesheetKey === shadowConfig_1.GLOBAL_STYLESHEET_KEY || !!this._adoptableSheets.has(stylesheetKey);
|
||
|
|
var constructableSheet = undefined;
|
||
|
|
if (injectStyles && addToConstructableStylesheet) {
|
||
|
|
constructableSheet = this._getAdoptableStyleSheet(stylesheetKey);
|
||
|
|
}
|
||
|
|
if (constructableSheet) {
|
||
|
|
this._insertRuleIntoSheet(constructableSheet, rule);
|
||
|
|
}
|
||
|
|
_super.prototype.insertRule.call(this, rule, preserve, stylesheetKey);
|
||
|
|
};
|
||
|
|
ShadowDomStylesheet.prototype._getCacheKey = function (key) {
|
||
|
|
var _a = this._config, _b = _a.inShadow, inShadow = _b === void 0 ? false : _b, _c = _a.stylesheetKey, currentStylesheetKey = _c === void 0 ? shadowConfig_1.GLOBAL_STYLESHEET_KEY : _c;
|
||
|
|
if (inShadow) {
|
||
|
|
return "__".concat(currentStylesheetKey, "__").concat(key);
|
||
|
|
}
|
||
|
|
return _super.prototype._getCacheKey.call(this, key);
|
||
|
|
};
|
||
|
|
ShadowDomStylesheet.prototype._createStyleElement = function () {
|
||
|
|
var styleElement = _super.prototype._createStyleElement.call(this);
|
||
|
|
if (this._config.stylesheetKey === shadowConfig_1.GLOBAL_STYLESHEET_KEY) {
|
||
|
|
styleElement.setAttribute('data-merge-styles-global', 'true');
|
||
|
|
}
|
||
|
|
return styleElement;
|
||
|
|
};
|
||
|
|
ShadowDomStylesheet.prototype._makeCSSStyleSheet = function () {
|
||
|
|
var win = this._config.window || window;
|
||
|
|
var sheet = undefined;
|
||
|
|
if (!exports.SUPPORTS_CONSTRUCTABLE_STYLESHEETS) {
|
||
|
|
var style = this._createStyleElement();
|
||
|
|
sheet = style.sheet;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
sheet = new win.CSSStyleSheet();
|
||
|
|
}
|
||
|
|
if (sheet) {
|
||
|
|
sheet.bucketName = 'merge-styles';
|
||
|
|
sheet.metadata = {
|
||
|
|
stylesheetKey: this._config.stylesheetKey || shadowConfig_1.GLOBAL_STYLESHEET_KEY,
|
||
|
|
sortOrder: this._sheetCounter++,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return sheet;
|
||
|
|
};
|
||
|
|
ShadowDomStylesheet.prototype._addAdoptableStyleSheet = function (key, sheet, queue) {
|
||
|
|
var _this = this;
|
||
|
|
if (queue === void 0) { queue = true; }
|
||
|
|
if (!this._adoptableSheets.has(key)) {
|
||
|
|
this._adoptableSheets.set(key, sheet);
|
||
|
|
var win = this._config.window;
|
||
|
|
if (queue && win) {
|
||
|
|
win.queueMicrotask(function () {
|
||
|
|
_this._onAddSheetCallbacks.forEach(function (callback) { return callback({ key: key, sheet: sheet }); });
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
ShadowDomStylesheet.prototype._getAdoptableStyleSheet = function (key) {
|
||
|
|
var sheet = this._adoptableSheets.get(key);
|
||
|
|
if (!sheet) {
|
||
|
|
sheet = this._makeCSSStyleSheet();
|
||
|
|
this._addAdoptableStyleSheet(key, sheet);
|
||
|
|
}
|
||
|
|
return sheet;
|
||
|
|
};
|
||
|
|
return ShadowDomStylesheet;
|
||
|
|
}(Stylesheet_1.Stylesheet));
|
||
|
|
exports.ShadowDomStylesheet = ShadowDomStylesheet;
|
||
|
|
//# sourceMappingURL=ShadowDomStylesheet.js.map
|