@everymatrix/blog-article-details 1.94.8 → 1.94.15
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.
- package/dist/blog-article-details/blog-article-details.entry.js +1 -1
- package/dist/cjs/blog-article-details.cjs.entry.js +82 -39
- package/dist/collection/components/blog-article-details/blog-article-details.js +26 -27
- package/dist/esm/blog-article-details.entry.js +82 -39
- package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/blog-article-details/.stencil/libs/common/src/device/index.d.ts +21 -0
- package/dist/types/components/blog-article-details/blog-article-details.d.ts +14 -12
- package/dist/types/components.d.ts +5 -5
- package/package.json +1 -1
- package/dist/collection/utils/utils.js +0 -59
- package/dist/types/utils/utils.d.ts +0 -4
|
@@ -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"}},e="__WIDGET_GLOBAL_STYLE_CACHE__";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 o(t,i){if(t){const n=document.createElement("style");n.innerHTML=i,t.appendChild(n)}}function s(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)}))}function r(t){return t.includes("android")}const h=class{constructor(n){t(this,n),this.renderContentConditionally=t=>t&&(!t.includes("<bannermatrix-banner")||this.bannerMatrixReady)?i("div",{class:"BlogContent",innerHTML:t}):null,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="mobile"}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&&o(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!==i&&this.clientStylingUrl&&s(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){if("PC"===t)return"dk";if("iPad"===t||"iPhone"===t)return"mtWeb"}return"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 o=new Date(t.items[e].publishingDate);i.getTime()<o.getTime()&&(i=o,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))}handleClientStyling(){void 0===window.emMessageBus?(this.clientStyling&&o(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&s(this.stylingContainer,this.clientStylingUrl)):this.stylingSubscription=function(t,i,n,o=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!o)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 s=(n=function(t,i){return window.emMessageBus.subscribe(i,(n=>{if(!t)return;const o=t.getRootNode(),s=window[e];let r=s[i]&&s[i].sheet;r?s[i].refCount=s[i].refCount+1:(r=new CSSStyleSheet,r.replaceSync(n),s[i]={sheet:r,refCount:1});const h=o.adoptedStyleSheets||[];h.includes(r)||(o.adoptedStyleSheets=[...h,r])}))}(t,i)).unsubscribe.bind(n);return n.unsubscribe=()=>{if(window[e][i]){const t=window[e][i];t.refCount>1?t.refCount=t.refCount-1:delete window[e][i]}s()},n}(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription,!0)}componentDidLoad(){this.detectAndAlertDeviceType(),this.handleClientStyling()}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}detectAndAlertDeviceType(){this.device=((t=!1)=>{if("undefined"==typeof window||"undefined"==typeof navigator)return"desktop";const i=navigator.userAgent.toLowerCase(),n=window.innerWidth;if(function(t){return!!t.includes("ipad")||t.includes("macintosh")&&navigator.maxTouchPoints>0}(i))return"tablet";if(function(t){return t.includes("iphone")||t.includes("ipod")}(i))return"mobile";if(function(t,i){return r(t)&&(t.includes("mobile")||t.includes("mobi")||i<=599)}(i,n))return"mobile";if(function(t,i){return r(t)&&!t.includes("mobile")&&!t.includes("mobi")&&i>599}(i,n))return"tablet";if(t){if(n<=599)return"mobile";if(n<=1099)return"tablet"}return"desktop"})()}parseDate(t){const i=new Date(t);if(i instanceof Date&&!Number.isNaN(i.getTime()))return i;const[n,e,o]=t.trim().split("/").map(Number);return new Date(o,e-1,n)}formatDate(t){const i=this.parseDate(t);return new Intl.DateTimeFormat(this.intlDateTimeFormat||"en-GB").format(i)}render(){var t,e,o,s,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 ${this.device}`},(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===(o=this.blogData.video)||void 0===o?void 0:o.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===(s=this.blogData)||void 0===s?void 0:s.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"]}}};h.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{h as blog_article_details}
|
|
@@ -151,6 +151,67 @@ function getAdoptStyleSubscription(stylingContainer, domain) {
|
|
|
151
151
|
});
|
|
152
152
|
}
|
|
153
153
|
|
|
154
|
+
const MOBILE_MAX = 599;
|
|
155
|
+
const TABLET_MAX = 1099;
|
|
156
|
+
function isIPad(ua) {
|
|
157
|
+
// Classic iPad UA
|
|
158
|
+
if (ua.includes('ipad'))
|
|
159
|
+
return true;
|
|
160
|
+
// iPadOS 13+ Safari pretending to be macOS
|
|
161
|
+
return ua.includes('macintosh') && navigator.maxTouchPoints > 0;
|
|
162
|
+
}
|
|
163
|
+
function isIPhone(ua) {
|
|
164
|
+
return ua.includes('iphone') || ua.includes('ipod');
|
|
165
|
+
}
|
|
166
|
+
function isAndroid(ua) {
|
|
167
|
+
return ua.includes('android');
|
|
168
|
+
}
|
|
169
|
+
function isAndroidMobile(ua, width) {
|
|
170
|
+
return isAndroid(ua) && (ua.includes('mobile') || ua.includes('mobi') || width <= MOBILE_MAX);
|
|
171
|
+
}
|
|
172
|
+
function isAndroidTablet(ua, width) {
|
|
173
|
+
return isAndroid(ua) && !ua.includes('mobile') && !ua.includes('mobi') && width > MOBILE_MAX;
|
|
174
|
+
}
|
|
175
|
+
/**
|
|
176
|
+
* Detects the current device type using user agent and viewport width.
|
|
177
|
+
*
|
|
178
|
+
* By default, this function focuses on actual device/platform detection.
|
|
179
|
+
* Responsive width fallback is optional and mainly intended for
|
|
180
|
+
* responsive layout testing or browser emulation.
|
|
181
|
+
*
|
|
182
|
+
* Supports:
|
|
183
|
+
* - iPhone / iPad
|
|
184
|
+
* - Android mobile / tablet
|
|
185
|
+
*
|
|
186
|
+
* @param enableResponsiveFallback
|
|
187
|
+
* When enabled, classify unknown devices by viewport width.
|
|
188
|
+
*
|
|
189
|
+
* @returns `'mobile' | 'tablet' | 'desktop'`
|
|
190
|
+
*/
|
|
191
|
+
const getDeviceType = (enableResponsiveFallback = false) => {
|
|
192
|
+
if (typeof window === 'undefined' || typeof navigator === 'undefined') {
|
|
193
|
+
return 'desktop';
|
|
194
|
+
}
|
|
195
|
+
const ua = navigator.userAgent.toLowerCase();
|
|
196
|
+
const width = window.innerWidth;
|
|
197
|
+
// Apple devices
|
|
198
|
+
if (isIPad(ua))
|
|
199
|
+
return 'tablet';
|
|
200
|
+
if (isIPhone(ua))
|
|
201
|
+
return 'mobile';
|
|
202
|
+
// Android devices
|
|
203
|
+
if (isAndroidMobile(ua, width))
|
|
204
|
+
return 'mobile';
|
|
205
|
+
if (isAndroidTablet(ua, width))
|
|
206
|
+
return 'tablet';
|
|
207
|
+
if (enableResponsiveFallback) {
|
|
208
|
+
if (width <= MOBILE_MAX)
|
|
209
|
+
return 'mobile';
|
|
210
|
+
if (width <= TABLET_MAX)
|
|
211
|
+
return 'tablet';
|
|
212
|
+
}
|
|
213
|
+
return 'desktop';
|
|
214
|
+
};
|
|
154
215
|
const getDevice = () => {
|
|
155
216
|
let userAgent = window.navigator.userAgent;
|
|
156
217
|
if (userAgent.toLowerCase().match(/android/i)) {
|
|
@@ -164,21 +225,6 @@ const getDevice = () => {
|
|
|
164
225
|
}
|
|
165
226
|
return 'PC';
|
|
166
227
|
};
|
|
167
|
-
function checkCustomDeviceWidth() {
|
|
168
|
-
const width = screen.availWidth;
|
|
169
|
-
if (width < 600) {
|
|
170
|
-
return 'mobile';
|
|
171
|
-
}
|
|
172
|
-
else if (width >= 600 && width < 1100) {
|
|
173
|
-
return 'tablet';
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
function getDeviceCustom() {
|
|
177
|
-
const userAgent = navigator.userAgent.toLowerCase();
|
|
178
|
-
let source = '';
|
|
179
|
-
source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? checkCustomDeviceWidth() : 'desktop';
|
|
180
|
-
return source;
|
|
181
|
-
}
|
|
182
228
|
const getDevicePlatform = () => {
|
|
183
229
|
const device = getDevice();
|
|
184
230
|
if (device) {
|
|
@@ -188,10 +234,8 @@ const getDevicePlatform = () => {
|
|
|
188
234
|
else if (device === 'iPad' || device === 'iPhone') {
|
|
189
235
|
return 'mtWeb';
|
|
190
236
|
}
|
|
191
|
-
else {
|
|
192
|
-
return 'mtWeb';
|
|
193
|
-
}
|
|
194
237
|
}
|
|
238
|
+
return 'mtWeb';
|
|
195
239
|
};
|
|
196
240
|
|
|
197
241
|
const blogArticleDetailsCss = ":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}";
|
|
@@ -201,11 +245,10 @@ const BlogArticleDetails = class {
|
|
|
201
245
|
constructor(hostRef) {
|
|
202
246
|
index.registerInstance(this, hostRef);
|
|
203
247
|
this.renderContentConditionally = (content) => {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
if (this.bannerMatrixReady) {
|
|
248
|
+
if (!content)
|
|
249
|
+
return null;
|
|
250
|
+
const hasBanner = content.includes('<bannermatrix-banner');
|
|
251
|
+
if (!hasBanner || this.bannerMatrixReady) {
|
|
209
252
|
return index.h("div", { class: "BlogContent", innerHTML: content });
|
|
210
253
|
}
|
|
211
254
|
return null;
|
|
@@ -243,7 +286,7 @@ const BlogArticleDetails = class {
|
|
|
243
286
|
this.hasErrors = false;
|
|
244
287
|
this.isLoading = true;
|
|
245
288
|
this.bannerMatrixReady = false;
|
|
246
|
-
this.device = '';
|
|
289
|
+
this.device = 'mobile';
|
|
247
290
|
}
|
|
248
291
|
// Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
|
|
249
292
|
handleBannerReady() {
|
|
@@ -255,12 +298,12 @@ const BlogArticleDetails = class {
|
|
|
255
298
|
}
|
|
256
299
|
}
|
|
257
300
|
handleClientStylingChange(newValue, oldValue) {
|
|
258
|
-
if (newValue
|
|
301
|
+
if (newValue !== oldValue) {
|
|
259
302
|
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
260
303
|
}
|
|
261
304
|
}
|
|
262
305
|
handleClientStylingChangeURL(newValue, oldValue) {
|
|
263
|
-
if (newValue
|
|
306
|
+
if (newValue !== oldValue) {
|
|
264
307
|
if (this.clientStylingUrl)
|
|
265
308
|
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
266
309
|
}
|
|
@@ -315,25 +358,25 @@ const BlogArticleDetails = class {
|
|
|
315
358
|
})
|
|
316
359
|
.finally(() => this.isLoading = false);
|
|
317
360
|
}
|
|
361
|
+
handleClientStyling() {
|
|
362
|
+
if (window.emMessageBus !== undefined) {
|
|
363
|
+
this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
|
|
364
|
+
return;
|
|
365
|
+
}
|
|
366
|
+
if (this.clientStyling)
|
|
367
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
368
|
+
if (this.clientStylingUrl)
|
|
369
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
370
|
+
}
|
|
318
371
|
componentDidLoad() {
|
|
319
372
|
this.detectAndAlertDeviceType();
|
|
320
|
-
|
|
321
|
-
if (window.emMessageBus != undefined) {
|
|
322
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
323
|
-
}
|
|
324
|
-
else {
|
|
325
|
-
if (this.clientStyling)
|
|
326
|
-
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
327
|
-
if (this.clientStylingUrl)
|
|
328
|
-
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
329
|
-
}
|
|
330
|
-
}
|
|
373
|
+
this.handleClientStyling();
|
|
331
374
|
}
|
|
332
375
|
disconnectedCallback() {
|
|
333
376
|
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
334
377
|
}
|
|
335
378
|
detectAndAlertDeviceType() {
|
|
336
|
-
this.device =
|
|
379
|
+
this.device = getDeviceType();
|
|
337
380
|
}
|
|
338
381
|
parseDate(dateString) {
|
|
339
382
|
const date = new Date(dateString);
|
|
@@ -354,7 +397,7 @@ const BlogArticleDetails = class {
|
|
|
354
397
|
return (index.h("div", { class: "BlogArticleDetails" }, index.h("div", { class: "Title" }, translate('error', this.language))));
|
|
355
398
|
}
|
|
356
399
|
return (index.h("div", { ref: el => this.stylingContainer = el }, !this.isLoading && (index.h("div", { class: "DetailsContainer" }, index.h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate && this.blogData.publishingDate &&
|
|
357
|
-
index.h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (index.h("div", { class:
|
|
400
|
+
index.h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (index.h("div", { class: `BlogBanner ${this.device}` }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (index.h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (index.h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (index.h("h1", { style: { color: "white" } }, "No Image")))))), index.h("div", { class: "DetailsBodyWrapper" }, this.showTitle &&
|
|
358
401
|
index.h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content))))));
|
|
359
402
|
}
|
|
360
403
|
static get watchers() { return {
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { translate } from "../../utils/locale.utils";
|
|
3
3
|
import { setClientStyling, setClientStylingURL, setStreamStyling } from "../../../../../../../../libs/common/src/styling/index";
|
|
4
|
-
import { getDevicePlatform,
|
|
4
|
+
import { getDevicePlatform, getDeviceType } from "../../../../../../../../libs/common/src/device/index";
|
|
5
5
|
export class BlogArticleDetails {
|
|
6
6
|
constructor() {
|
|
7
7
|
this.renderContentConditionally = (content) => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
if (this.bannerMatrixReady) {
|
|
8
|
+
if (!content)
|
|
9
|
+
return null;
|
|
10
|
+
const hasBanner = content.includes('<bannermatrix-banner');
|
|
11
|
+
if (!hasBanner || this.bannerMatrixReady) {
|
|
13
12
|
return h("div", { class: "BlogContent", innerHTML: content });
|
|
14
13
|
}
|
|
15
14
|
return null;
|
|
@@ -47,7 +46,7 @@ export class BlogArticleDetails {
|
|
|
47
46
|
this.hasErrors = false;
|
|
48
47
|
this.isLoading = true;
|
|
49
48
|
this.bannerMatrixReady = false;
|
|
50
|
-
this.device = '';
|
|
49
|
+
this.device = 'mobile';
|
|
51
50
|
}
|
|
52
51
|
// Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
|
|
53
52
|
handleBannerReady() {
|
|
@@ -59,12 +58,12 @@ export class BlogArticleDetails {
|
|
|
59
58
|
}
|
|
60
59
|
}
|
|
61
60
|
handleClientStylingChange(newValue, oldValue) {
|
|
62
|
-
if (newValue
|
|
61
|
+
if (newValue !== oldValue) {
|
|
63
62
|
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
64
63
|
}
|
|
65
64
|
}
|
|
66
65
|
handleClientStylingChangeURL(newValue, oldValue) {
|
|
67
|
-
if (newValue
|
|
66
|
+
if (newValue !== oldValue) {
|
|
68
67
|
if (this.clientStylingUrl)
|
|
69
68
|
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
70
69
|
}
|
|
@@ -120,25 +119,25 @@ export class BlogArticleDetails {
|
|
|
120
119
|
})
|
|
121
120
|
.finally(() => this.isLoading = false);
|
|
122
121
|
}
|
|
122
|
+
handleClientStyling() {
|
|
123
|
+
if (window.emMessageBus !== undefined) {
|
|
124
|
+
this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
if (this.clientStyling)
|
|
128
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
129
|
+
if (this.clientStylingUrl)
|
|
130
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
131
|
+
}
|
|
123
132
|
componentDidLoad() {
|
|
124
133
|
this.detectAndAlertDeviceType();
|
|
125
|
-
|
|
126
|
-
if (window.emMessageBus != undefined) {
|
|
127
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
128
|
-
}
|
|
129
|
-
else {
|
|
130
|
-
if (this.clientStyling)
|
|
131
|
-
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
132
|
-
if (this.clientStylingUrl)
|
|
133
|
-
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
134
|
-
}
|
|
135
|
-
}
|
|
134
|
+
this.handleClientStyling();
|
|
136
135
|
}
|
|
137
136
|
disconnectedCallback() {
|
|
138
137
|
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
139
138
|
}
|
|
140
139
|
detectAndAlertDeviceType() {
|
|
141
|
-
this.device =
|
|
140
|
+
this.device = getDeviceType();
|
|
142
141
|
}
|
|
143
142
|
parseDate(dateString) {
|
|
144
143
|
const date = new Date(dateString);
|
|
@@ -159,7 +158,7 @@ export class BlogArticleDetails {
|
|
|
159
158
|
return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
|
|
160
159
|
}
|
|
161
160
|
return (h("div", { ref: el => this.stylingContainer = el }, !this.isLoading && (h("div", { class: "DetailsContainer" }, h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate && this.blogData.publishingDate &&
|
|
162
|
-
h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (h("div", { class:
|
|
161
|
+
h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (h("div", { class: `BlogBanner ${this.device}` }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image")))))), h("div", { class: "DetailsBodyWrapper" }, this.showTitle &&
|
|
163
162
|
h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content))))));
|
|
164
163
|
}
|
|
165
164
|
static get is() { return "blog-article-details"; }
|
|
@@ -185,7 +184,7 @@ export class BlogArticleDetails {
|
|
|
185
184
|
"references": {}
|
|
186
185
|
},
|
|
187
186
|
"required": false,
|
|
188
|
-
"optional":
|
|
187
|
+
"optional": true,
|
|
189
188
|
"docs": {
|
|
190
189
|
"tags": [],
|
|
191
190
|
"text": "Endpoint URL for the source of data"
|
|
@@ -256,7 +255,7 @@ export class BlogArticleDetails {
|
|
|
256
255
|
"references": {}
|
|
257
256
|
},
|
|
258
257
|
"required": false,
|
|
259
|
-
"optional":
|
|
258
|
+
"optional": true,
|
|
260
259
|
"docs": {
|
|
261
260
|
"tags": [],
|
|
262
261
|
"text": "Client custom styling via streamStyling"
|
|
@@ -381,7 +380,7 @@ export class BlogArticleDetails {
|
|
|
381
380
|
"references": {}
|
|
382
381
|
},
|
|
383
382
|
"required": false,
|
|
384
|
-
"optional":
|
|
383
|
+
"optional": true,
|
|
385
384
|
"docs": {
|
|
386
385
|
"tags": [],
|
|
387
386
|
"text": "Showing post ID parameter"
|
|
@@ -398,7 +397,7 @@ export class BlogArticleDetails {
|
|
|
398
397
|
"references": {}
|
|
399
398
|
},
|
|
400
399
|
"required": false,
|
|
401
|
-
"optional":
|
|
400
|
+
"optional": true,
|
|
402
401
|
"docs": {
|
|
403
402
|
"tags": [],
|
|
404
403
|
"text": "Slug of post"
|
|
@@ -415,7 +414,7 @@ export class BlogArticleDetails {
|
|
|
415
414
|
"references": {}
|
|
416
415
|
},
|
|
417
416
|
"required": false,
|
|
418
|
-
"optional":
|
|
417
|
+
"optional": true,
|
|
419
418
|
"docs": {
|
|
420
419
|
"tags": [],
|
|
421
420
|
"text": "Custom Path of post"
|
|
@@ -147,6 +147,67 @@ function getAdoptStyleSubscription(stylingContainer, domain) {
|
|
|
147
147
|
});
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
+
const MOBILE_MAX = 599;
|
|
151
|
+
const TABLET_MAX = 1099;
|
|
152
|
+
function isIPad(ua) {
|
|
153
|
+
// Classic iPad UA
|
|
154
|
+
if (ua.includes('ipad'))
|
|
155
|
+
return true;
|
|
156
|
+
// iPadOS 13+ Safari pretending to be macOS
|
|
157
|
+
return ua.includes('macintosh') && navigator.maxTouchPoints > 0;
|
|
158
|
+
}
|
|
159
|
+
function isIPhone(ua) {
|
|
160
|
+
return ua.includes('iphone') || ua.includes('ipod');
|
|
161
|
+
}
|
|
162
|
+
function isAndroid(ua) {
|
|
163
|
+
return ua.includes('android');
|
|
164
|
+
}
|
|
165
|
+
function isAndroidMobile(ua, width) {
|
|
166
|
+
return isAndroid(ua) && (ua.includes('mobile') || ua.includes('mobi') || width <= MOBILE_MAX);
|
|
167
|
+
}
|
|
168
|
+
function isAndroidTablet(ua, width) {
|
|
169
|
+
return isAndroid(ua) && !ua.includes('mobile') && !ua.includes('mobi') && width > MOBILE_MAX;
|
|
170
|
+
}
|
|
171
|
+
/**
|
|
172
|
+
* Detects the current device type using user agent and viewport width.
|
|
173
|
+
*
|
|
174
|
+
* By default, this function focuses on actual device/platform detection.
|
|
175
|
+
* Responsive width fallback is optional and mainly intended for
|
|
176
|
+
* responsive layout testing or browser emulation.
|
|
177
|
+
*
|
|
178
|
+
* Supports:
|
|
179
|
+
* - iPhone / iPad
|
|
180
|
+
* - Android mobile / tablet
|
|
181
|
+
*
|
|
182
|
+
* @param enableResponsiveFallback
|
|
183
|
+
* When enabled, classify unknown devices by viewport width.
|
|
184
|
+
*
|
|
185
|
+
* @returns `'mobile' | 'tablet' | 'desktop'`
|
|
186
|
+
*/
|
|
187
|
+
const getDeviceType = (enableResponsiveFallback = false) => {
|
|
188
|
+
if (typeof window === 'undefined' || typeof navigator === 'undefined') {
|
|
189
|
+
return 'desktop';
|
|
190
|
+
}
|
|
191
|
+
const ua = navigator.userAgent.toLowerCase();
|
|
192
|
+
const width = window.innerWidth;
|
|
193
|
+
// Apple devices
|
|
194
|
+
if (isIPad(ua))
|
|
195
|
+
return 'tablet';
|
|
196
|
+
if (isIPhone(ua))
|
|
197
|
+
return 'mobile';
|
|
198
|
+
// Android devices
|
|
199
|
+
if (isAndroidMobile(ua, width))
|
|
200
|
+
return 'mobile';
|
|
201
|
+
if (isAndroidTablet(ua, width))
|
|
202
|
+
return 'tablet';
|
|
203
|
+
if (enableResponsiveFallback) {
|
|
204
|
+
if (width <= MOBILE_MAX)
|
|
205
|
+
return 'mobile';
|
|
206
|
+
if (width <= TABLET_MAX)
|
|
207
|
+
return 'tablet';
|
|
208
|
+
}
|
|
209
|
+
return 'desktop';
|
|
210
|
+
};
|
|
150
211
|
const getDevice = () => {
|
|
151
212
|
let userAgent = window.navigator.userAgent;
|
|
152
213
|
if (userAgent.toLowerCase().match(/android/i)) {
|
|
@@ -160,21 +221,6 @@ const getDevice = () => {
|
|
|
160
221
|
}
|
|
161
222
|
return 'PC';
|
|
162
223
|
};
|
|
163
|
-
function checkCustomDeviceWidth() {
|
|
164
|
-
const width = screen.availWidth;
|
|
165
|
-
if (width < 600) {
|
|
166
|
-
return 'mobile';
|
|
167
|
-
}
|
|
168
|
-
else if (width >= 600 && width < 1100) {
|
|
169
|
-
return 'tablet';
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
function getDeviceCustom() {
|
|
173
|
-
const userAgent = navigator.userAgent.toLowerCase();
|
|
174
|
-
let source = '';
|
|
175
|
-
source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? checkCustomDeviceWidth() : 'desktop';
|
|
176
|
-
return source;
|
|
177
|
-
}
|
|
178
224
|
const getDevicePlatform = () => {
|
|
179
225
|
const device = getDevice();
|
|
180
226
|
if (device) {
|
|
@@ -184,10 +230,8 @@ const getDevicePlatform = () => {
|
|
|
184
230
|
else if (device === 'iPad' || device === 'iPhone') {
|
|
185
231
|
return 'mtWeb';
|
|
186
232
|
}
|
|
187
|
-
else {
|
|
188
|
-
return 'mtWeb';
|
|
189
|
-
}
|
|
190
233
|
}
|
|
234
|
+
return 'mtWeb';
|
|
191
235
|
};
|
|
192
236
|
|
|
193
237
|
const blogArticleDetailsCss = ":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}";
|
|
@@ -197,11 +241,10 @@ const BlogArticleDetails = class {
|
|
|
197
241
|
constructor(hostRef) {
|
|
198
242
|
registerInstance(this, hostRef);
|
|
199
243
|
this.renderContentConditionally = (content) => {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
if (this.bannerMatrixReady) {
|
|
244
|
+
if (!content)
|
|
245
|
+
return null;
|
|
246
|
+
const hasBanner = content.includes('<bannermatrix-banner');
|
|
247
|
+
if (!hasBanner || this.bannerMatrixReady) {
|
|
205
248
|
return h("div", { class: "BlogContent", innerHTML: content });
|
|
206
249
|
}
|
|
207
250
|
return null;
|
|
@@ -239,7 +282,7 @@ const BlogArticleDetails = class {
|
|
|
239
282
|
this.hasErrors = false;
|
|
240
283
|
this.isLoading = true;
|
|
241
284
|
this.bannerMatrixReady = false;
|
|
242
|
-
this.device = '';
|
|
285
|
+
this.device = 'mobile';
|
|
243
286
|
}
|
|
244
287
|
// Rerender when bannermatrix has finished loaded. Issue when bannermatrix passed as content from CMS.
|
|
245
288
|
handleBannerReady() {
|
|
@@ -251,12 +294,12 @@ const BlogArticleDetails = class {
|
|
|
251
294
|
}
|
|
252
295
|
}
|
|
253
296
|
handleClientStylingChange(newValue, oldValue) {
|
|
254
|
-
if (newValue
|
|
297
|
+
if (newValue !== oldValue) {
|
|
255
298
|
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
256
299
|
}
|
|
257
300
|
}
|
|
258
301
|
handleClientStylingChangeURL(newValue, oldValue) {
|
|
259
|
-
if (newValue
|
|
302
|
+
if (newValue !== oldValue) {
|
|
260
303
|
if (this.clientStylingUrl)
|
|
261
304
|
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
262
305
|
}
|
|
@@ -311,25 +354,25 @@ const BlogArticleDetails = class {
|
|
|
311
354
|
})
|
|
312
355
|
.finally(() => this.isLoading = false);
|
|
313
356
|
}
|
|
357
|
+
handleClientStyling() {
|
|
358
|
+
if (window.emMessageBus !== undefined) {
|
|
359
|
+
this.stylingSubscription = setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription, true);
|
|
360
|
+
return;
|
|
361
|
+
}
|
|
362
|
+
if (this.clientStyling)
|
|
363
|
+
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
364
|
+
if (this.clientStylingUrl)
|
|
365
|
+
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
366
|
+
}
|
|
314
367
|
componentDidLoad() {
|
|
315
368
|
this.detectAndAlertDeviceType();
|
|
316
|
-
|
|
317
|
-
if (window.emMessageBus != undefined) {
|
|
318
|
-
setStreamStyling(this.stylingContainer, `${this.mbSource}.Style`, this.stylingSubscription);
|
|
319
|
-
}
|
|
320
|
-
else {
|
|
321
|
-
if (this.clientStyling)
|
|
322
|
-
setClientStyling(this.stylingContainer, this.clientStyling);
|
|
323
|
-
if (this.clientStylingUrl)
|
|
324
|
-
setClientStylingURL(this.stylingContainer, this.clientStylingUrl);
|
|
325
|
-
}
|
|
326
|
-
}
|
|
369
|
+
this.handleClientStyling();
|
|
327
370
|
}
|
|
328
371
|
disconnectedCallback() {
|
|
329
372
|
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
330
373
|
}
|
|
331
374
|
detectAndAlertDeviceType() {
|
|
332
|
-
this.device =
|
|
375
|
+
this.device = getDeviceType();
|
|
333
376
|
}
|
|
334
377
|
parseDate(dateString) {
|
|
335
378
|
const date = new Date(dateString);
|
|
@@ -350,7 +393,7 @@ const BlogArticleDetails = class {
|
|
|
350
393
|
return (h("div", { class: "BlogArticleDetails" }, h("div", { class: "Title" }, translate('error', this.language))));
|
|
351
394
|
}
|
|
352
395
|
return (h("div", { ref: el => this.stylingContainer = el }, !this.isLoading && (h("div", { class: "DetailsContainer" }, h("div", { class: "DetailsHeadWrapper" }, this.showPublishingDate && this.blogData.publishingDate &&
|
|
353
|
-
h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (h("div", { class:
|
|
396
|
+
h("div", { class: "BlogDate" }, this.formatDate((_a = this.blogData) === null || _a === void 0 ? void 0 : _a.publishingDate)), this.showImage && (h("div", { class: `BlogBanner ${this.device}` }, ((_b = this.blogData.image) === null || _b === void 0 ? void 0 : _b.src) ? (h("div", { style: { background: `url(${this.setImage(this.blogData.image)}) no-repeat center center / cover` } })) : (((_c = this.blogData.video) === null || _c === void 0 ? void 0 : _c.sources[this.device]) ? (h("video", { src: this.blogData.video.sources[this.device], controls: true })) : (h("h1", { style: { color: "white" } }, "No Image")))))), h("div", { class: "DetailsBodyWrapper" }, this.showTitle &&
|
|
354
397
|
h("div", { class: "BlogTitle" }, (_d = this.blogData) === null || _d === void 0 ? void 0 : _d.title), this.showContent && this.renderContentConditionally((_e = this.blogData) === null || _e === void 0 ? void 0 : _e.content))))));
|
|
355
398
|
}
|
|
356
399
|
static get watchers() { return {
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export type DevicePlatform = 'dk' | 'mtWeb';
|
|
2
|
+
export type Device = 'mobile' | 'tablet' | 'desktop';
|
|
3
|
+
/**
|
|
4
|
+
* Detects the current device type using user agent and viewport width.
|
|
5
|
+
*
|
|
6
|
+
* By default, this function focuses on actual device/platform detection.
|
|
7
|
+
* Responsive width fallback is optional and mainly intended for
|
|
8
|
+
* responsive layout testing or browser emulation.
|
|
9
|
+
*
|
|
10
|
+
* Supports:
|
|
11
|
+
* - iPhone / iPad
|
|
12
|
+
* - Android mobile / tablet
|
|
13
|
+
*
|
|
14
|
+
* @param enableResponsiveFallback
|
|
15
|
+
* When enabled, classify unknown devices by viewport width.
|
|
16
|
+
*
|
|
17
|
+
* @returns `'mobile' | 'tablet' | 'desktop'`
|
|
18
|
+
*/
|
|
19
|
+
export declare const getDeviceType: (enableResponsiveFallback?: boolean) => Device;
|
|
20
|
+
export declare const getDevice: () => "Android" | "iPhone" | "iPad" | "PC";
|
|
21
|
+
export declare const getDevicePlatform: () => DevicePlatform;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import { type Device } from "../../../../../../libs/common/src/device/index";
|
|
1
2
|
export declare class BlogArticleDetails {
|
|
2
3
|
/**
|
|
3
4
|
* Endpoint URL for the source of data
|
|
4
5
|
*/
|
|
5
|
-
cmsEndpoint
|
|
6
|
+
cmsEndpoint?: string;
|
|
6
7
|
/**
|
|
7
8
|
* Language of the widget
|
|
8
9
|
*/
|
|
@@ -18,7 +19,7 @@ export declare class BlogArticleDetails {
|
|
|
18
19
|
/**
|
|
19
20
|
* Client custom styling via streamStyling
|
|
20
21
|
*/
|
|
21
|
-
mbSource
|
|
22
|
+
mbSource?: string;
|
|
22
23
|
/**
|
|
23
24
|
* Client custom styling via string
|
|
24
25
|
*/
|
|
@@ -46,15 +47,15 @@ export declare class BlogArticleDetails {
|
|
|
46
47
|
/**
|
|
47
48
|
* Showing post ID parameter
|
|
48
49
|
*/
|
|
49
|
-
postId
|
|
50
|
+
postId?: string;
|
|
50
51
|
/**
|
|
51
52
|
* Slug of post
|
|
52
53
|
*/
|
|
53
|
-
postSlug
|
|
54
|
+
postSlug?: string;
|
|
54
55
|
/**
|
|
55
56
|
* Custom Path of post
|
|
56
57
|
*/
|
|
57
|
-
postCustomPath
|
|
58
|
+
postCustomPath?: string;
|
|
58
59
|
/**
|
|
59
60
|
* Intl date format
|
|
60
61
|
*/
|
|
@@ -62,22 +63,23 @@ export declare class BlogArticleDetails {
|
|
|
62
63
|
private hasErrors;
|
|
63
64
|
private isLoading;
|
|
64
65
|
bannerMatrixReady: boolean;
|
|
65
|
-
device:
|
|
66
|
+
device: Device;
|
|
66
67
|
handleBannerReady(): void;
|
|
67
68
|
watchEndpoint(newValue: string, oldValue: string): void;
|
|
68
|
-
handleClientStylingChange(newValue:
|
|
69
|
-
handleClientStylingChangeURL(newValue:
|
|
70
|
-
private stylingContainer
|
|
69
|
+
handleClientStylingChange(newValue: string, oldValue: string): void;
|
|
70
|
+
handleClientStylingChangeURL(newValue: string, oldValue: string): void;
|
|
71
|
+
private stylingContainer?;
|
|
71
72
|
private blogData;
|
|
72
73
|
private stylingSubscription;
|
|
73
74
|
connectedCallback(): void;
|
|
74
75
|
getBlogArticleDetails(): void;
|
|
76
|
+
handleClientStyling(): void;
|
|
75
77
|
componentDidLoad(): void;
|
|
76
78
|
disconnectedCallback(): void;
|
|
77
79
|
detectAndAlertDeviceType(): void;
|
|
78
|
-
parseDate(dateString:
|
|
79
|
-
formatDate(dateString:
|
|
80
|
-
renderContentConditionally: (content: string) => HTMLElement;
|
|
80
|
+
parseDate(dateString: string): Date;
|
|
81
|
+
formatDate(dateString: string): string;
|
|
82
|
+
renderContentConditionally: (content: string) => HTMLElement | null;
|
|
81
83
|
setImage: (image: any) => string;
|
|
82
84
|
render(): void;
|
|
83
85
|
}
|
|
@@ -18,7 +18,7 @@ export namespace Components {
|
|
|
18
18
|
/**
|
|
19
19
|
* Endpoint URL for the source of data
|
|
20
20
|
*/
|
|
21
|
-
"cmsEndpoint"
|
|
21
|
+
"cmsEndpoint"?: string;
|
|
22
22
|
/**
|
|
23
23
|
* CMS Endpoint stage
|
|
24
24
|
*/
|
|
@@ -34,19 +34,19 @@ export namespace Components {
|
|
|
34
34
|
/**
|
|
35
35
|
* Client custom styling via streamStyling
|
|
36
36
|
*/
|
|
37
|
-
"mbSource"
|
|
37
|
+
"mbSource"?: string;
|
|
38
38
|
/**
|
|
39
39
|
* Custom Path of post
|
|
40
40
|
*/
|
|
41
|
-
"postCustomPath"
|
|
41
|
+
"postCustomPath"?: string;
|
|
42
42
|
/**
|
|
43
43
|
* Showing post ID parameter
|
|
44
44
|
*/
|
|
45
|
-
"postId"
|
|
45
|
+
"postId"?: string;
|
|
46
46
|
/**
|
|
47
47
|
* Slug of post
|
|
48
48
|
*/
|
|
49
|
-
"postSlug"
|
|
49
|
+
"postSlug"?: string;
|
|
50
50
|
/**
|
|
51
51
|
* Property used to display the description
|
|
52
52
|
*/
|
package/package.json
CHANGED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
export function checkDeviceType() {
|
|
2
|
-
const userAgent = navigator.userAgent.toLowerCase();
|
|
3
|
-
const width = screen.availWidth;
|
|
4
|
-
const height = screen.availHeight;
|
|
5
|
-
if (userAgent.includes('iphone')) {
|
|
6
|
-
return 'mobile';
|
|
7
|
-
}
|
|
8
|
-
if (userAgent.includes('android')) {
|
|
9
|
-
if (height > width && width < 800) {
|
|
10
|
-
return 'mobile';
|
|
11
|
-
}
|
|
12
|
-
if (width > height && height < 800) {
|
|
13
|
-
return 'tablet';
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
return 'desktop';
|
|
17
|
-
}
|
|
18
|
-
export const getDevice = () => {
|
|
19
|
-
let userAgent = window.navigator.userAgent;
|
|
20
|
-
if (userAgent.toLowerCase().match(/android/i)) {
|
|
21
|
-
return 'Android';
|
|
22
|
-
}
|
|
23
|
-
if (userAgent.toLowerCase().match(/iphone/i)) {
|
|
24
|
-
return 'iPhone';
|
|
25
|
-
}
|
|
26
|
-
if (userAgent.toLowerCase().match(/ipad|ipod/i)) {
|
|
27
|
-
return 'iPad';
|
|
28
|
-
}
|
|
29
|
-
return 'PC';
|
|
30
|
-
};
|
|
31
|
-
function checkCustomDeviceWidth() {
|
|
32
|
-
const width = screen.availWidth;
|
|
33
|
-
if (width < 600) {
|
|
34
|
-
return 'mobile';
|
|
35
|
-
}
|
|
36
|
-
else if (width >= 600 && width < 1100) {
|
|
37
|
-
return 'tablet';
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
export function getDeviceCustom() {
|
|
41
|
-
const userAgent = navigator.userAgent.toLowerCase();
|
|
42
|
-
let source = '';
|
|
43
|
-
source = (userAgent.includes('android') || userAgent.includes('iphone') || userAgent.includes('ipad')) ? checkCustomDeviceWidth() : 'desktop';
|
|
44
|
-
return source;
|
|
45
|
-
}
|
|
46
|
-
export const getDevicePlatform = () => {
|
|
47
|
-
const device = getDevice();
|
|
48
|
-
if (device) {
|
|
49
|
-
if (device === 'PC') {
|
|
50
|
-
return 'dk';
|
|
51
|
-
}
|
|
52
|
-
else if (device === 'iPad' || device === 'iPhone') {
|
|
53
|
-
return 'mtWeb';
|
|
54
|
-
}
|
|
55
|
-
else {
|
|
56
|
-
return 'mtWeb';
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
};
|