@everymatrix/blog-article-details 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.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as i}from"./index-f613f8e8.js";const n={en:{error:"Error"},ro:{error:"Eroare"},fr:{error:"Error"},ar:{error:"خطأ"},hr:{error:"Greška"},"pt-br":{error:"Erro"},"es-mx":{error:"Error"}};function
|
|
1
|
+
import{r as t,h as i}from"./index-f613f8e8.js";const n={en:{error:"Error"},ro:{error:"Eroare"},fr:{error:"Error"},ar:{error:"خطأ"},hr:{error:"Greška"},"pt-br":{error:"Erro"},"es-mx":{error:"Error"}},e="__WIDGET_GLOBAL_STYLE_CACHE__";function s(t,i){if(t){const n=document.createElement("style");n.innerHTML=i,t.appendChild(n)}}function o(t,i){if(!t||!i)return;const n=new URL(i);fetch(n.href).then((t=>t.text())).then((i=>{const n=document.createElement("style");n.innerHTML=i,t&&t.appendChild(n)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}const r=class{constructor(n){t(this,n),this.renderContentConditionally=t=>-1!==(null==t?void 0:t.indexOf("<bannermatrix-banner"))?this.bannerMatrixReady?i("div",{class:"BlogContent",innerHTML:t}):null:i("div",{class:"BlogContent",innerHTML:t}),this.setImage=t=>{let i="";switch(this.device){case"mobile":i=t.sources[0].pictureSource;break;case"tablet":i=t.sources[1].pictureSource;break;case"desktop":i=t.sources[2].pictureSource}return i},this.cmsEndpoint=void 0,this.language="en",this.userRoles="everyone",this.cmsEnv="stage",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.showPublishingDate=!0,this.showImage=!0,this.showTitle=!0,this.showContent=!0,this.postId=void 0,this.postSlug=void 0,this.postCustomPath=void 0,this.intlDateTimeFormat="",this.hasErrors=!1,this.isLoading=!0,this.bannerMatrixReady=!1,this.device=""}handleBannerReady(){this.bannerMatrixReady=!0}watchEndpoint(t,i){t&&t!=i&&this.cmsEndpoint&&this.language&&(this.postCustomPath||this.postSlug||this.postId)&&this.getBlogArticleDetails()}handleClientStylingChange(t,i){t!=i&&s(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!=i&&this.clientStylingUrl&&o(this.stylingContainer,this.clientStylingUrl)}connectedCallback(){this.cmsEndpoint&&this.language&&(this.postCustomPath||this.postSlug||this.postId)&&this.getBlogArticleDetails()}getBlogArticleDetails(){if(!this.postId&&!this.postSlug&&!this.postCustomPath)throw this.hasErrors=!0,new Error("postId, postSlug or postCustomPath parameter has to be provided!");this.isLoading=!0;let t=new URL(`${this.cmsEndpoint}/${this.language}/blog-posts${this.postCustomPath?"":"/"+(this.postSlug||this.postId)}`);t.searchParams.append("env",this.cmsEnv),t.searchParams.append("userRoles",this.userRoles),t.searchParams.append("device",(()=>{const t=(()=>{let t=window.navigator.userAgent;return t.toLowerCase().match(/android/i)?"Android":t.toLowerCase().match(/iphone/i)?"iPhone":t.toLowerCase().match(/ipad|ipod/i)?"iPad":"PC"})();if(t)return"PC"===t?"dk":"mtWeb"})()),this.postCustomPath&&t.searchParams.append("customURL",this.postCustomPath),fetch(t.href).then((t=>{if(t.status>=300)throw this.hasErrors=!0,new Error("There was an error while fetching the data");return t.json()})).then((t=>{if(t.count>=1&&this.postCustomPath){let i=new Date(t.items[0].publishingDate),n=0;for(let e=1;e<t.items.length;e++){const s=new Date(t.items[e].publishingDate);i.getTime()<s.getTime()&&(i=s,n=e)}this.blogData=t.items[n]}else this.blogData=t;this.isLoading=!1})).catch((t=>{this.hasErrors=!0,console.log("Error",t)})).finally((()=>this.isLoading=!1))}componentDidLoad(){this.detectAndAlertDeviceType(),this.stylingContainer&&(null!=window.emMessageBus?function(t,i,n,s=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!s)return function(t,i){const n=document.createElement("style");return window.emMessageBus.subscribe(i,(i=>{t&&(n.innerHTML=i,t.appendChild(n))}))}(t,i);window[e]||(window[e]={});const o=(n=function(t,i){return window.emMessageBus.subscribe(i,(n=>{if(!t)return;const s=t.getRootNode(),o=window[e];let r=o[i]?.sheet;r?o[i].refCount=o[i].refCount+1:(r=new CSSStyleSheet,r.replaceSync(n),o[i]={sheet:r,refCount:1});const h=s.adoptedStyleSheets||[];h.includes(r)||(s.adoptedStyleSheets=[...h,r])}))}(t,i)).unsubscribe.bind(n);n.unsubscribe=()=>{if(window[e][i]){const t=window[e][i];t.refCount>1?t.refCount=t.refCount-1:delete window[e][i]}o()}}(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription):(this.clientStyling&&s(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&o(this.stylingContainer,this.clientStylingUrl)))}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}detectAndAlertDeviceType(){this.device=function(){const t=navigator.userAgent.toLowerCase();let i="";return i=t.includes("android")||t.includes("iphone")||t.includes("ipad")?function(){const t=screen.availWidth;return t<600?"mobile":t>=600&&t<1100?"tablet":void 0}():"desktop",i}()}parseDate(t){const i=new Date(t);if(i instanceof Date&&!Number.isNaN(i.getTime()))return i;const[n,e,s]=t.trim().split("/").map(Number);return new Date(s,e-1,n)}formatDate(t){const i=this.parseDate(t);return new Intl.DateTimeFormat(this.intlDateTimeFormat||"en-GB").format(i)}render(){var t,e,s,o,r,h;return this.hasErrors?i("div",{class:"BlogArticleDetails"},i("div",{class:"Title"},n[void 0!==(h=this.language)&&h in n?h:"en"].error)):i("div",{ref:t=>this.stylingContainer=t},!this.isLoading&&i("div",{class:"DetailsContainer"},i("div",{class:"DetailsHeadWrapper"},this.showPublishingDate&&this.blogData.publishingDate&&i("div",{class:"BlogDate"},this.formatDate(null===(t=this.blogData)||void 0===t?void 0:t.publishingDate)),this.showImage&&i("div",{class:"BlogBanner"},(null===(e=this.blogData.image)||void 0===e?void 0:e.src)?i("div",{style:{background:`url(${this.setImage(this.blogData.image)}) no-repeat center center / cover`}}):(null===(s=this.blogData.video)||void 0===s?void 0:s.sources[this.device])?i("video",{src:this.blogData.video.sources[this.device],controls:!0}):i("h1",{style:{color:"white"}},"No Image"))),i("div",{class:"DetailsBodyWrapper"},this.showTitle&&i("div",{class:"BlogTitle"},null===(o=this.blogData)||void 0===o?void 0:o.title),this.showContent&&this.renderContentConditionally(null===(r=this.blogData)||void 0===r?void 0:r.content))))}static get watchers(){return{postId:["watchEndpoint"],postSlug:["watchEndpoint"],postCustomPath:["watchEndpoint"],cmsEndpoint:["watchEndpoint"],language:["watchEndpoint"],clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};r.style=":host {\n display: block;\n}\n\n.DetailsContainer {\n background-color: #07072A;\n color: #fff;\n display: flex;\n flex-direction: column;\n}\n.DetailsContainer .BlogBanner div {\n height: 400px;\n}\n.DetailsContainer .DetailsHeadWrapper {\n position: relative;\n}\n.DetailsContainer .DetailsBodyWrapper {\n padding: 30px;\n}\n.DetailsContainer .BlogDate {\n font-size: 12px;\n border-radius: 5px 5px 0 0;\n padding: 10px;\n width: fit-content;\n text-align: center;\n background-color: #0D0D4D;\n z-index: 1;\n text-wrap: nowrap;\n position: absolute;\n bottom: 0;\n left: 30px;\n}\n.DetailsContainer .BlogTitle {\n font-size: 24px;\n}\n.DetailsContainer .BlogContent {\n font-size: 14px;\n}\n.DetailsContainer .BlogContent p:last-child {\n margin-bottom: 0;\n}\n\n@container (max-width: 475px) {\n .DetailsContainer {\n font-size: 12px;\n }\n}";export{r as blog_article_details}
|
|
@@ -33,6 +33,8 @@ const translate = (key, customLang) => {
|
|
|
33
33
|
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
|
|
34
34
|
};
|
|
35
35
|
|
|
36
|
+
const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
|
|
37
|
+
|
|
36
38
|
/**
|
|
37
39
|
* @name setClientStyling
|
|
38
40
|
* @description Method used to create and append to the passed element of the widget a style element with the content received
|
|
@@ -78,18 +80,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
|
78
80
|
* @param {HTMLElement} stylingContainer The highest element of the widget
|
|
79
81
|
* @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
|
|
80
82
|
* @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
|
|
83
|
+
* @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
|
|
81
84
|
*/
|
|
82
|
-
function setStreamStyling(stylingContainer, domain, subscription) {
|
|
83
|
-
if (window.emMessageBus)
|
|
84
|
-
const sheet = document.createElement('style');
|
|
85
|
+
function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
|
|
86
|
+
if (!window.emMessageBus) return;
|
|
85
87
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
88
|
+
const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
|
|
89
|
+
|
|
90
|
+
if (!supportAdoptStyle || !useAdoptedStyleSheets) {
|
|
91
|
+
subscription = getStyleTagSubscription(stylingContainer, domain);
|
|
92
|
+
|
|
93
|
+
return subscription;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
if (!window[StyleCacheKey]) {
|
|
97
|
+
window[StyleCacheKey] = {};
|
|
92
98
|
}
|
|
99
|
+
subscription = getAdoptStyleSubscription(stylingContainer, domain);
|
|
100
|
+
|
|
101
|
+
const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
|
|
102
|
+
const wrappedUnsubscribe = () => {
|
|
103
|
+
if (window[StyleCacheKey][domain]) {
|
|
104
|
+
const cachedObject = window[StyleCacheKey][domain];
|
|
105
|
+
cachedObject.refCount > 1
|
|
106
|
+
? (cachedObject.refCount = cachedObject.refCount - 1)
|
|
107
|
+
: delete window[StyleCacheKey][domain];
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
originalUnsubscribe();
|
|
111
|
+
};
|
|
112
|
+
subscription.unsubscribe = wrappedUnsubscribe;
|
|
113
|
+
|
|
114
|
+
return subscription;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
function getStyleTagSubscription(stylingContainer, domain) {
|
|
118
|
+
const sheet = document.createElement('style');
|
|
119
|
+
|
|
120
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
121
|
+
if (stylingContainer) {
|
|
122
|
+
sheet.innerHTML = data;
|
|
123
|
+
stylingContainer.appendChild(sheet);
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
function getAdoptStyleSubscription(stylingContainer, domain) {
|
|
129
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
130
|
+
if (!stylingContainer) return;
|
|
131
|
+
|
|
132
|
+
const shadowRoot = stylingContainer.getRootNode();
|
|
133
|
+
const cacheStyleObject = window[StyleCacheKey];
|
|
134
|
+
let cachedStyle = cacheStyleObject[domain]?.sheet;
|
|
135
|
+
|
|
136
|
+
if (!cachedStyle) {
|
|
137
|
+
cachedStyle = new CSSStyleSheet();
|
|
138
|
+
cachedStyle.replaceSync(data);
|
|
139
|
+
cacheStyleObject[domain] = {
|
|
140
|
+
sheet: cachedStyle,
|
|
141
|
+
refCount: 1
|
|
142
|
+
};
|
|
143
|
+
} else {
|
|
144
|
+
cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
const currentSheets = shadowRoot.adoptedStyleSheets || [];
|
|
148
|
+
if (!currentSheets.includes(cachedStyle)) {
|
|
149
|
+
shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
|
|
150
|
+
}
|
|
151
|
+
});
|
|
93
152
|
}
|
|
94
153
|
|
|
95
154
|
const getDevice = () => {
|
|
@@ -260,7 +319,7 @@ const BlogArticleDetails = class {
|
|
|
260
319
|
this.detectAndAlertDeviceType();
|
|
261
320
|
if (this.stylingContainer) {
|
|
262
321
|
if (window.emMessageBus != undefined) {
|
|
263
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style
|
|
322
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
264
323
|
}
|
|
265
324
|
else {
|
|
266
325
|
if (this.clientStyling)
|
|
@@ -29,6 +29,8 @@ const translate = (key, customLang) => {
|
|
|
29
29
|
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
|
|
30
30
|
};
|
|
31
31
|
|
|
32
|
+
const StyleCacheKey = '__WIDGET_GLOBAL_STYLE_CACHE__';
|
|
33
|
+
|
|
32
34
|
/**
|
|
33
35
|
* @name setClientStyling
|
|
34
36
|
* @description Method used to create and append to the passed element of the widget a style element with the content received
|
|
@@ -74,18 +76,75 @@ function setClientStylingURL(stylingContainer, clientStylingUrl) {
|
|
|
74
76
|
* @param {HTMLElement} stylingContainer The highest element of the widget
|
|
75
77
|
* @param {string} domain The domain from where the content should be fetched (e.g. 'Casino.Style', 'App.Style', 'casino-footer.style', etc.)
|
|
76
78
|
* @param {ref} subscription A reference to a variable where the subscription should be saved for unsubscribing when no longer needed
|
|
79
|
+
* @param {boolean} useAdoptedStyleSheets A flag to gradually enable testing of adoptedStyleSheets
|
|
77
80
|
*/
|
|
78
|
-
function setStreamStyling(stylingContainer, domain, subscription) {
|
|
79
|
-
if (window.emMessageBus)
|
|
80
|
-
const sheet = document.createElement('style');
|
|
81
|
+
function setStreamStyling(stylingContainer, domain, subscription, useAdoptedStyleSheets = false) {
|
|
82
|
+
if (!window.emMessageBus) return;
|
|
81
83
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
84
|
+
const supportAdoptStyle = 'adoptedStyleSheets' in Document.prototype;
|
|
85
|
+
|
|
86
|
+
if (!supportAdoptStyle || !useAdoptedStyleSheets) {
|
|
87
|
+
subscription = getStyleTagSubscription(stylingContainer, domain);
|
|
88
|
+
|
|
89
|
+
return subscription;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
if (!window[StyleCacheKey]) {
|
|
93
|
+
window[StyleCacheKey] = {};
|
|
88
94
|
}
|
|
95
|
+
subscription = getAdoptStyleSubscription(stylingContainer, domain);
|
|
96
|
+
|
|
97
|
+
const originalUnsubscribe = subscription.unsubscribe.bind(subscription);
|
|
98
|
+
const wrappedUnsubscribe = () => {
|
|
99
|
+
if (window[StyleCacheKey][domain]) {
|
|
100
|
+
const cachedObject = window[StyleCacheKey][domain];
|
|
101
|
+
cachedObject.refCount > 1
|
|
102
|
+
? (cachedObject.refCount = cachedObject.refCount - 1)
|
|
103
|
+
: delete window[StyleCacheKey][domain];
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
originalUnsubscribe();
|
|
107
|
+
};
|
|
108
|
+
subscription.unsubscribe = wrappedUnsubscribe;
|
|
109
|
+
|
|
110
|
+
return subscription;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
function getStyleTagSubscription(stylingContainer, domain) {
|
|
114
|
+
const sheet = document.createElement('style');
|
|
115
|
+
|
|
116
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
117
|
+
if (stylingContainer) {
|
|
118
|
+
sheet.innerHTML = data;
|
|
119
|
+
stylingContainer.appendChild(sheet);
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
function getAdoptStyleSubscription(stylingContainer, domain) {
|
|
125
|
+
return window.emMessageBus.subscribe(domain, (data) => {
|
|
126
|
+
if (!stylingContainer) return;
|
|
127
|
+
|
|
128
|
+
const shadowRoot = stylingContainer.getRootNode();
|
|
129
|
+
const cacheStyleObject = window[StyleCacheKey];
|
|
130
|
+
let cachedStyle = cacheStyleObject[domain]?.sheet;
|
|
131
|
+
|
|
132
|
+
if (!cachedStyle) {
|
|
133
|
+
cachedStyle = new CSSStyleSheet();
|
|
134
|
+
cachedStyle.replaceSync(data);
|
|
135
|
+
cacheStyleObject[domain] = {
|
|
136
|
+
sheet: cachedStyle,
|
|
137
|
+
refCount: 1
|
|
138
|
+
};
|
|
139
|
+
} else {
|
|
140
|
+
cacheStyleObject[domain].refCount = cacheStyleObject[domain].refCount + 1;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
const currentSheets = shadowRoot.adoptedStyleSheets || [];
|
|
144
|
+
if (!currentSheets.includes(cachedStyle)) {
|
|
145
|
+
shadowRoot.adoptedStyleSheets = [...currentSheets, cachedStyle];
|
|
146
|
+
}
|
|
147
|
+
});
|
|
89
148
|
}
|
|
90
149
|
|
|
91
150
|
const getDevice = () => {
|
|
@@ -256,7 +315,7 @@ const BlogArticleDetails = class {
|
|
|
256
315
|
this.detectAndAlertDeviceType();
|
|
257
316
|
if (this.stylingContainer) {
|
|
258
317
|
if (window.emMessageBus != undefined) {
|
|
259
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style
|
|
318
|
+
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
260
319
|
}
|
|
261
320
|
else {
|
|
262
321
|
if (this.clientStyling)
|