@everymatrix/general-styling-wrapper 1.87.26 → 1.87.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -38,6 +38,8 @@ const mergeTranslations = (url, target) => {
|
|
|
38
38
|
});
|
|
39
39
|
};
|
|
40
40
|
|
|
41
|
+
const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
|
|
42
|
+
|
|
41
43
|
/**
|
|
42
44
|
* @name setClientStyling
|
|
43
45
|
* @description Method used to create and append to the passed element of the widget a style element with the content received
|
|
@@ -83,18 +85,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
|
83
85
|
* @param {HTMLElement} stylingContainer The highest element of the widget
|
|
84
86
|
* @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
|
|
85
87
|
* @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
|
|
88
|
+
* @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
|
|
86
89
|
*/
|
|
87
|
-
function setStreamStyling(stylingContainer, domain, subscription) {
|
|
88
|
-
if (window.emMessageBus)
|
|
89
|
-
const sheet = document.createElement('style');
|
|
90
|
+
function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
|
|
91
|
+
if (!window.emMessageBus) return;
|
|
90
92
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
93
|
+
const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
|
|
94
|
+
|
|
95
|
+
if (!supportAdoptStyle || !useAdoptedStyleSheets) {
|
|
96
|
+
subscription = getStyleTagSubscription(stylingContainer, domain);
|
|
97
|
+
|
|
98
|
+
return subscription;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
if (!window[StyleCacheKey]) {
|
|
102
|
+
window[StyleCacheKey] = {};
|
|
97
103
|
}
|
|
104
|
+
subscription = getAdoptStyleSubscription(stylingContainer, domain);
|
|
105
|
+
|
|
106
|
+
const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
|
|
107
|
+
const wrappedUnsubscribe = () => {
|
|
108
|
+
if (window[StyleCacheKey][domain]) {
|
|
109
|
+
const cachedObject = window[StyleCacheKey][domain];
|
|
110
|
+
cachedObject.refCount > 1
|
|
111
|
+
? (cachedObject.refCount = cachedObject.refCount - 1)
|
|
112
|
+
: delete window[StyleCacheKey][domain];
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
originalUnsubscribe();
|
|
116
|
+
};
|
|
117
|
+
subscription.unsubscribe = wrappedUnsubscribe;
|
|
118
|
+
|
|
119
|
+
return subscription;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
function getStyleTagSubscription(stylingContainer, domain) {
|
|
123
|
+
const sheet = document.createElement('style');
|
|
124
|
+
|
|
125
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
126
|
+
if (stylingContainer) {
|
|
127
|
+
sheet.innerHTML = data;
|
|
128
|
+
stylingContainer.appendChild(sheet);
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
function getAdoptStyleSubscription(stylingContainer, domain) {
|
|
134
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
135
|
+
if (!stylingContainer) return;
|
|
136
|
+
|
|
137
|
+
const shadowRoot = stylingContainer.getRootNode();
|
|
138
|
+
const cacheStyleObject = window[StyleCacheKey];
|
|
139
|
+
let cachedStyle = cacheStyleObject[domain]?.sheet;
|
|
140
|
+
|
|
141
|
+
if (!cachedStyle) {
|
|
142
|
+
cachedStyle = new CSSStyleSheet();
|
|
143
|
+
cachedStyle.replaceSync(data);
|
|
144
|
+
cacheStyleObject[domain] = {
|
|
145
|
+
sheet: cachedStyle,
|
|
146
|
+
refCount: 1
|
|
147
|
+
};
|
|
148
|
+
} else {
|
|
149
|
+
cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
const currentSheets = shadowRoot.adoptedStyleSheets || [];
|
|
153
|
+
if (!currentSheets.includes(cachedStyle)) {
|
|
154
|
+
shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
|
|
155
|
+
}
|
|
156
|
+
});
|
|
98
157
|
}
|
|
99
158
|
|
|
100
159
|
const generalStylingWrapperCss = ":host{display:block}";
|
|
@@ -113,7 +172,7 @@ const GeneralStylingWrapper = class {
|
|
|
113
172
|
componentDidLoad() {
|
|
114
173
|
if (this.el) {
|
|
115
174
|
if (window.emMessageBus != undefined) {
|
|
116
|
-
setStreamStyling(this.el, `${this.mbSource}.Style
|
|
175
|
+
setStreamStyling(this.el, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
117
176
|
}
|
|
118
177
|
else {
|
|
119
178
|
if (this.clientStyling)
|
|
@@ -34,6 +34,8 @@ const mergeTranslations = (url, target) => {
|
|
|
34
34
|
});
|
|
35
35
|
};
|
|
36
36
|
|
|
37
|
+
const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
|
|
38
|
+
|
|
37
39
|
/**
|
|
38
40
|
* @name setClientStyling
|
|
39
41
|
* @description Method used to create and append to the passed element of the widget a style element with the content received
|
|
@@ -79,18 +81,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
|
79
81
|
* @param {HTMLElement} stylingContainer The highest element of the widget
|
|
80
82
|
* @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
|
|
81
83
|
* @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
|
|
84
|
+
* @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
|
|
82
85
|
*/
|
|
83
|
-
function setStreamStyling(stylingContainer, domain, subscription) {
|
|
84
|
-
if (window.emMessageBus)
|
|
85
|
-
const sheet = document.createElement('style');
|
|
86
|
+
function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
|
|
87
|
+
if (!window.emMessageBus) return;
|
|
86
88
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
89
|
+
const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
|
|
90
|
+
|
|
91
|
+
if (!supportAdoptStyle || !useAdoptedStyleSheets) {
|
|
92
|
+
subscription = getStyleTagSubscription(stylingContainer, domain);
|
|
93
|
+
|
|
94
|
+
return subscription;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
if (!window[StyleCacheKey]) {
|
|
98
|
+
window[StyleCacheKey] = {};
|
|
93
99
|
}
|
|
100
|
+
subscription = getAdoptStyleSubscription(stylingContainer, domain);
|
|
101
|
+
|
|
102
|
+
const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
|
|
103
|
+
const wrappedUnsubscribe = () => {
|
|
104
|
+
if (window[StyleCacheKey][domain]) {
|
|
105
|
+
const cachedObject = window[StyleCacheKey][domain];
|
|
106
|
+
cachedObject.refCount > 1
|
|
107
|
+
? (cachedObject.refCount = cachedObject.refCount - 1)
|
|
108
|
+
: delete window[StyleCacheKey][domain];
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
originalUnsubscribe();
|
|
112
|
+
};
|
|
113
|
+
subscription.unsubscribe = wrappedUnsubscribe;
|
|
114
|
+
|
|
115
|
+
return subscription;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
function getStyleTagSubscription(stylingContainer, domain) {
|
|
119
|
+
const sheet = document.createElement('style');
|
|
120
|
+
|
|
121
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
122
|
+
if (stylingContainer) {
|
|
123
|
+
sheet.innerHTML = data;
|
|
124
|
+
stylingContainer.appendChild(sheet);
|
|
125
|
+
}
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
function getAdoptStyleSubscription(stylingContainer, domain) {
|
|
130
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
131
|
+
if (!stylingContainer) return;
|
|
132
|
+
|
|
133
|
+
const shadowRoot = stylingContainer.getRootNode();
|
|
134
|
+
const cacheStyleObject = window[StyleCacheKey];
|
|
135
|
+
let cachedStyle = cacheStyleObject[domain]?.sheet;
|
|
136
|
+
|
|
137
|
+
if (!cachedStyle) {
|
|
138
|
+
cachedStyle = new CSSStyleSheet();
|
|
139
|
+
cachedStyle.replaceSync(data);
|
|
140
|
+
cacheStyleObject[domain] = {
|
|
141
|
+
sheet: cachedStyle,
|
|
142
|
+
refCount: 1
|
|
143
|
+
};
|
|
144
|
+
} else {
|
|
145
|
+
cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
const currentSheets = shadowRoot.adoptedStyleSheets || [];
|
|
149
|
+
if (!currentSheets.includes(cachedStyle)) {
|
|
150
|
+
shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
|
|
151
|
+
}
|
|
152
|
+
});
|
|
94
153
|
}
|
|
95
154
|
|
|
96
155
|
const generalStylingWrapperCss = ":host{display:block}";
|
|
@@ -109,7 +168,7 @@ const GeneralStylingWrapper = class {
|
|
|
109
168
|
componentDidLoad() {
|
|
110
169
|
if (this.el) {
|
|
111
170
|
if (window.emMessageBus != undefined) {
|
|
112
|
-
setStreamStyling(this.el, `${this.mbSource}.Style
|
|
171
|
+
setStreamStyling(this.el, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
113
172
|
}
|
|
114
173
|
else {
|
|
115
174
|
if (this.clientStyling)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as
|
|
1
|
+
import{r as t,h as n,g as e}from"./index-7ef90fae.js";const i="__WIDGET_GLOBAL_STYLE_CACHE__";function s(t,n){if(t){const e=document.createElement("style");e.innerHTML=n,t.appendChild(e)}}function o(t,n){if(!t||!n)return;const e=new URL(n);fetch(e.href).then((t=>t.text())).then((n=>{const e=document.createElement("style");e.innerHTML=n,t&&t.appendChild(e)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}const h=class{constructor(n){t(this,n),this.stylingAppends=!1,this.clientStyling="",this.clientStylingUrl="",this.mbSource=void 0,this.translationUrl="",this.targetTranslations=void 0}componentDidLoad(){this.el&&(null!=window.emMessageBus?function(t,n,e,s=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!s)return function(t,n){const e=document.createElement("style");return window.emMessageBus.subscribe(n,(n=>{t&&(e.innerHTML=n,t.appendChild(e))}))}(t,n);window[i]||(window[i]={});const o=(e=function(t,n){return window.emMessageBus.subscribe(n,(e=>{if(!t)return;const s=t.getRootNode(),o=window[i];let h=o[n]?.sheet;h?o[n].refCount=o[n].refCount+1:(h=new CSSStyleSheet,h.replaceSync(e),o[n]={sheet:h,refCount:1});const c=s.adoptedStyleSheets||[];c.includes(h)||(s.adoptedStyleSheets=[...c,h])}))}(t,n)).unsubscribe.bind(e);e.unsubscribe=()=>{if(window[i][n]){const t=window[i][n];t.refCount>1?t.refCount=t.refCount-1:delete window[i][n]}o()}}(this.el,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&s(this.el,this.clientStyling),this.clientStylingUrl&&o(this.el,this.clientStylingUrl),this.stylingAppends=!0))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}handleClientStylingChange(t,n){t!=n&&s(this.el,this.clientStyling)}handleClientStylingUrlChange(t,n){t!=n&&this.clientStylingUrl&&o(this.el,this.clientStylingUrl)}componentDidRender(){this.stylingAppends||(this.clientStyling&&s(this.el,this.clientStyling),this.clientStylingUrl&&o(this.el,this.clientStylingUrl),this.stylingAppends=!0)}async componentWillLoad(){const t=[];if(this.translationUrl){const i=(n=this.translationUrl,e=this.targetTranslations,new Promise((t=>{fetch(n).then((t=>t.json())).then((n=>{Object.keys(n).forEach((t=>{e[t]=e[t]||{},Object.keys(n[t]).forEach((i=>{if(!e.en[i])return;const s=e.en[i];"object"==typeof n[t][i]?(e[t][i]=e[t][i]||Object.assign({},s),Object.keys(n[t][i]).forEach((s=>{e[t][i][s]=n[t][i][s]}))):e[t][i]=n[t][i]||Object.assign({},s)}))})),t(!0)})).catch((n=>{console.error("Failed to load translations:",n),t(!1)}))})));t.push(i)}var n,e;return await Promise.all(t)}render(){return n("div",{key:"09ad83748bbad518743c8671b986c541c52bf3f0",class:"StyleShell"},n("slot",{key:"3b28b776d3944410c717b002b70946d274a4e8e7",name:"mainContent"}))}get el(){return e(this)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingUrlChange"]}}};h.style=":host{display:block}";export{h as general_styling_wrapper}
|