@kompasid/lit-web-components 0.8.26 → 0.8.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.
- package/demo/index.html +16 -0
- package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.d.ts +16 -2
- package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js +112 -31
- package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js.map +1 -1
- package/dist/src/components/kompasid-widget-recirculations-default/types.d.ts +8 -0
- package/dist/src/components/kompasid-widget-recirculations-default/types.js.map +1 -1
- package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.d.ts +1 -0
- package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js +8 -1
- package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js.map +1 -1
- package/dist/src/utils/IntersectionObserver.d.ts +21 -0
- package/dist/src/utils/IntersectionObserver.js +109 -0
- package/dist/src/utils/IntersectionObserver.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts +89 -35
- package/src/components/kompasid-widget-recirculations-default/readme.md +32 -17
- package/src/components/kompasid-widget-recirculations-default/types.ts +9 -0
- package/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts +10 -1
- package/src/utils/IntersectionObserver.ts +97 -0
package/demo/index.html
CHANGED
|
@@ -70,6 +70,7 @@
|
|
|
70
70
|
const trackerContentType = 'content_type'
|
|
71
71
|
const trackerContentTitle = 'content_title'
|
|
72
72
|
const trackerContentCategories = 'content_categories'
|
|
73
|
+
const trackerUserId = 'user_id'
|
|
73
74
|
const trackerUserType = 'user_type'
|
|
74
75
|
const trackerMeteredWallBalance = 0
|
|
75
76
|
const subscriptionStatus = 'subscription_status'
|
|
@@ -195,9 +196,24 @@
|
|
|
195
196
|
>
|
|
196
197
|
</kompasid-widget-recirculations-list>
|
|
197
198
|
|
|
199
|
+
<kompasid-widget-recirculations-list
|
|
200
|
+
widgetTitle="Terbaru"
|
|
201
|
+
apiSlug="list"
|
|
202
|
+
>
|
|
203
|
+
</kompasid-widget-recirculations-list>
|
|
204
|
+
|
|
198
205
|
<kompasid-widget-recirculations-default
|
|
199
206
|
.permalinkArticle=${widgetRelatedPost.permalinkArticle}
|
|
200
207
|
.slugs=${widgetRelatedPost.slugs}
|
|
208
|
+
.tracker_content_id=${trackerContentId}
|
|
209
|
+
.tracker_content_categories=${trackerContentCategories}
|
|
210
|
+
.tracker_user_id=${trackerUserId}
|
|
211
|
+
.tracker_user_type=${trackerUserType}
|
|
212
|
+
.tracker_subscription_status=${trackerSubscriptionStatus}
|
|
213
|
+
.tracker_subscription_package=${paywallSubscriptionPackage}
|
|
214
|
+
.tracker_metered_wall_type=${meteredWallType}
|
|
215
|
+
.tracker_metered_wall_balance=${trackerMeteredWallBalance}
|
|
216
|
+
.tracker_page_domain=${trackerPageDomain}
|
|
201
217
|
></kompasid-widget-recirculations-default>
|
|
202
218
|
|
|
203
219
|
<kompasid-widget-recirculations-default
|
|
@@ -6,7 +6,7 @@ export declare class KompasWidgetRecirculationsDefault extends LitElement {
|
|
|
6
6
|
* Props
|
|
7
7
|
*/
|
|
8
8
|
posts: Post[][];
|
|
9
|
-
|
|
9
|
+
recoID: string;
|
|
10
10
|
permalinkArticle: string;
|
|
11
11
|
userGuid: string;
|
|
12
12
|
slugs: string;
|
|
@@ -15,11 +15,19 @@ export declare class KompasWidgetRecirculationsDefault extends LitElement {
|
|
|
15
15
|
titleName: string;
|
|
16
16
|
titleLink: string;
|
|
17
17
|
isDark: boolean;
|
|
18
|
+
tracker_content_id: string;
|
|
19
|
+
tracker_content_categories: string;
|
|
20
|
+
tracker_user_id: string;
|
|
21
|
+
tracker_user_type: string;
|
|
22
|
+
tracker_subscription_status: string;
|
|
23
|
+
tracker_subscription_package: string;
|
|
24
|
+
tracker_metered_wall_type: string;
|
|
25
|
+
tracker_metered_wall_balance: number;
|
|
26
|
+
tracker_page_domain: string;
|
|
18
27
|
/**
|
|
19
28
|
* Fetch Data
|
|
20
29
|
*/
|
|
21
30
|
connectedCallback(): Promise<void>;
|
|
22
|
-
fetchAccessToken(): Promise<void>;
|
|
23
31
|
relatedArticles(): Promise<void>;
|
|
24
32
|
otherArticles(): Promise<void>;
|
|
25
33
|
handleFetchError(error: unknown): void;
|
|
@@ -30,5 +38,11 @@ export declare class KompasWidgetRecirculationsDefault extends LitElement {
|
|
|
30
38
|
private titleOtherArticle;
|
|
31
39
|
renderChips(post: Post): import("lit").TemplateResult<1>[];
|
|
32
40
|
renderImage(post: Post): import("lit").TemplateResult<1> | "";
|
|
41
|
+
/**
|
|
42
|
+
* mengirim event ke datalayer
|
|
43
|
+
*/
|
|
44
|
+
private recoContentClicked;
|
|
45
|
+
private recoContentViewed;
|
|
46
|
+
handleObserver(): void;
|
|
33
47
|
render(): import("lit").TemplateResult<1>;
|
|
34
48
|
}
|
|
@@ -3,6 +3,8 @@ import { html, css, LitElement } from 'lit';
|
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
4
|
import { TWStyles } from '../../../tailwind/tailwind.js';
|
|
5
5
|
import { useTimeDifference } from '../../utils/useTimeDIfference.js';
|
|
6
|
+
import { createIntersectionObserverComponent } from '../../utils/IntersectionObserver.js';
|
|
7
|
+
createIntersectionObserverComponent();
|
|
6
8
|
let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault extends LitElement {
|
|
7
9
|
constructor() {
|
|
8
10
|
super(...arguments);
|
|
@@ -10,7 +12,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
10
12
|
* Props
|
|
11
13
|
*/
|
|
12
14
|
this.posts = [];
|
|
13
|
-
this.
|
|
15
|
+
this.recoID = '';
|
|
14
16
|
this.permalinkArticle = '';
|
|
15
17
|
this.userGuid = '0';
|
|
16
18
|
this.slugs = '';
|
|
@@ -19,6 +21,17 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
19
21
|
this.titleName = ''; // contoh: Artikel Terkait / Lainnya dalam 'kategori'
|
|
20
22
|
this.titleLink = ''; // contoh: /kategori/opini
|
|
21
23
|
this.isDark = false;
|
|
24
|
+
// data dari artikel yg sedang dibuka, untuk datalayer reco_content_viewed
|
|
25
|
+
this.tracker_content_id = ''; //
|
|
26
|
+
this.tracker_content_categories = '';
|
|
27
|
+
// datau user
|
|
28
|
+
this.tracker_user_id = '';
|
|
29
|
+
this.tracker_user_type = '';
|
|
30
|
+
this.tracker_subscription_status = '';
|
|
31
|
+
this.tracker_subscription_package = '';
|
|
32
|
+
this.tracker_metered_wall_type = '';
|
|
33
|
+
this.tracker_metered_wall_balance = 0;
|
|
34
|
+
this.tracker_page_domain = '';
|
|
22
35
|
}
|
|
23
36
|
/**
|
|
24
37
|
* Fetch Data
|
|
@@ -27,7 +40,6 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
27
40
|
super.connectedCallback();
|
|
28
41
|
try {
|
|
29
42
|
if (this.type === 'relatedArticle') {
|
|
30
|
-
await this.fetchAccessToken();
|
|
31
43
|
await this.relatedArticles();
|
|
32
44
|
}
|
|
33
45
|
else if (this.type === 'otherArticle') {
|
|
@@ -38,29 +50,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
38
50
|
this.handleFetchError(error);
|
|
39
51
|
}
|
|
40
52
|
}
|
|
41
|
-
async fetchAccessToken() {
|
|
42
|
-
var _a;
|
|
43
|
-
const response = await fetch('https://api.kompas.id/account/api/v1/login/guest', {
|
|
44
|
-
method: 'POST',
|
|
45
|
-
headers: {
|
|
46
|
-
'Content-Type': 'application/json',
|
|
47
|
-
},
|
|
48
|
-
body: JSON.stringify({
|
|
49
|
-
email: 'anonynous.user@kompas.id',
|
|
50
|
-
}),
|
|
51
|
-
});
|
|
52
|
-
const result = await response.json();
|
|
53
|
-
if ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.accessToken) {
|
|
54
|
-
this.accessToken = result.data.accessToken;
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
throw new Error('Token akses tidak tersedia dalam respons');
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
53
|
async relatedArticles() {
|
|
61
|
-
if (!this.accessToken) {
|
|
62
|
-
throw new Error('Token akses tidak tersedia');
|
|
63
|
-
}
|
|
64
54
|
const kompasApiAi = 'https://ai.kompas.id/api/v1';
|
|
65
55
|
// Constructing parameters
|
|
66
56
|
const params = new URLSearchParams();
|
|
@@ -73,10 +63,12 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
73
63
|
const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`;
|
|
74
64
|
const response = await fetch(endpoint, {
|
|
75
65
|
headers: {
|
|
76
|
-
Authorization: `Bearer ${this.accessToken}`,
|
|
77
66
|
'Content-Type': 'application/json',
|
|
78
67
|
},
|
|
79
68
|
});
|
|
69
|
+
// get x-request-id from headers
|
|
70
|
+
const recoId = response.headers.get('X-Request-Id') || '';
|
|
71
|
+
this.recoID = recoId;
|
|
80
72
|
const result = await response.json();
|
|
81
73
|
if (result === null || result === void 0 ? void 0 : result.result) {
|
|
82
74
|
const items = result.result;
|
|
@@ -207,6 +199,54 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
207
199
|
/>
|
|
208
200
|
`;
|
|
209
201
|
}
|
|
202
|
+
/**
|
|
203
|
+
* mengirim event ke datalayer
|
|
204
|
+
*/
|
|
205
|
+
recoContentClicked(post, recoIndex) {
|
|
206
|
+
var _a;
|
|
207
|
+
if (this.type !== 'relatedArticle')
|
|
208
|
+
return; // Hanya trigger event jika type 'relatedArticle'
|
|
209
|
+
window.dataLayer = window.dataLayer || [];
|
|
210
|
+
window.dataLayer.push({
|
|
211
|
+
// data dari component
|
|
212
|
+
event: 'reco_content_clicked',
|
|
213
|
+
content_id: post.name,
|
|
214
|
+
content_categories: ((_a = post.category) === null || _a === void 0 ? void 0 : _a.map(cat => cat.name).join('|')) || '',
|
|
215
|
+
reco_index: recoIndex,
|
|
216
|
+
reco_id: this.recoID || '',
|
|
217
|
+
reco_model: 'context',
|
|
218
|
+
// data dari implementor
|
|
219
|
+
user_id: this.tracker_user_id || 'NA',
|
|
220
|
+
user_type: this.tracker_user_type || '',
|
|
221
|
+
subscription_status: this.tracker_subscription_status || '',
|
|
222
|
+
subscription_package: this.tracker_subscription_package || '',
|
|
223
|
+
metered_wall_type: this.tracker_metered_wall_type || '',
|
|
224
|
+
metered_wall_balance: this.tracker_metered_wall_balance,
|
|
225
|
+
page_domain: this.tracker_page_domain || 'Kompas.id',
|
|
226
|
+
});
|
|
227
|
+
}
|
|
228
|
+
recoContentViewed() {
|
|
229
|
+
window.dataLayer = window.dataLayer || [];
|
|
230
|
+
window.dataLayer.push({
|
|
231
|
+
event: 'reco_content_viewed',
|
|
232
|
+
content_id: this.tracker_content_id || '',
|
|
233
|
+
content_categories: this.tracker_content_categories || '',
|
|
234
|
+
user_type: this.tracker_user_type || '',
|
|
235
|
+
subscription_status: this.tracker_subscription_status || '',
|
|
236
|
+
subscription_package: this.tracker_subscription_package || '',
|
|
237
|
+
metered_wall_type: this.tracker_metered_wall_type || '',
|
|
238
|
+
metered_wall_balance: this.tracker_metered_wall_balance,
|
|
239
|
+
page_domain: this.tracker_page_domain || 'Kompas.id',
|
|
240
|
+
});
|
|
241
|
+
}
|
|
242
|
+
handleObserver() {
|
|
243
|
+
if (this.type === 'relatedArticle') {
|
|
244
|
+
this.recoContentViewed();
|
|
245
|
+
}
|
|
246
|
+
else {
|
|
247
|
+
// kalo mau implemen buat artikel lainnya
|
|
248
|
+
}
|
|
249
|
+
}
|
|
210
250
|
render() {
|
|
211
251
|
return html `
|
|
212
252
|
<div class="w-full ${this.isDark ? 'bg-dark-5 ' : ''}">
|
|
@@ -215,17 +255,25 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
215
255
|
? this.titleRelatedArticle()
|
|
216
256
|
: this.titleOtherArticle()}
|
|
217
257
|
<!-- end: widget title -->
|
|
218
|
-
|
|
258
|
+
<intersection-observer-component
|
|
259
|
+
.onTrigger="${() => this.handleObserver()}"
|
|
260
|
+
></intersection-observer-component>
|
|
219
261
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
|
|
220
262
|
<!-- start: left-post-loop -->
|
|
221
263
|
<div class="grid grid-cols-1 gap-6">
|
|
222
264
|
${this.posts[0]
|
|
223
|
-
? this.posts[0].map(post => html `
|
|
265
|
+
? this.posts[0].map((post, index) => html `
|
|
224
266
|
<div class="w-full">
|
|
225
267
|
<div class="flex">
|
|
226
268
|
<div class="w-1/2">${this.renderImage(post)}</div>
|
|
227
269
|
<div class="flex-grow pl-4 w-1/2">
|
|
228
|
-
<a
|
|
270
|
+
<a
|
|
271
|
+
href="${post.permalink}?open_from=${this.type ===
|
|
272
|
+
'relatedArticle'
|
|
273
|
+
? 'Artikel_Terkait'
|
|
274
|
+
: 'Artikel_Lainnya'}"
|
|
275
|
+
@click="${() => this.recoContentClicked(post, index + 1)}"
|
|
276
|
+
>
|
|
229
277
|
${this.renderChips(post)}
|
|
230
278
|
<h5
|
|
231
279
|
class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
|
|
@@ -254,12 +302,18 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
254
302
|
<!-- start: right-post-loop -->
|
|
255
303
|
<div class="flex flex-col w-full">
|
|
256
304
|
${this.posts[1]
|
|
257
|
-
? this.posts[1].map(post => html `
|
|
305
|
+
? this.posts[1].map((post, index) => html `
|
|
258
306
|
<div class="mb-6">
|
|
259
307
|
<div class="flex">
|
|
260
308
|
<div class="w-1/2">${this.renderImage(post)}</div>
|
|
261
309
|
<div class="flex-grow pl-4 w-1/2">
|
|
262
|
-
<a
|
|
310
|
+
<a
|
|
311
|
+
href="${post.permalink}?open_from=${this.type ===
|
|
312
|
+
'relatedArticle'
|
|
313
|
+
? 'Artikel_Terkait'
|
|
314
|
+
: 'Artikel_Lainnya'}"
|
|
315
|
+
@click="${() => this.recoContentClicked(post, index + 6)}"
|
|
316
|
+
>
|
|
263
317
|
${this.renderChips(post)}
|
|
264
318
|
<h5
|
|
265
319
|
class="hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this
|
|
@@ -318,7 +372,7 @@ __decorate([
|
|
|
318
372
|
], KompasWidgetRecirculationsDefault.prototype, "posts", void 0);
|
|
319
373
|
__decorate([
|
|
320
374
|
property({ type: String })
|
|
321
|
-
], KompasWidgetRecirculationsDefault.prototype, "
|
|
375
|
+
], KompasWidgetRecirculationsDefault.prototype, "recoID", void 0);
|
|
322
376
|
__decorate([
|
|
323
377
|
property({ type: String })
|
|
324
378
|
], KompasWidgetRecirculationsDefault.prototype, "permalinkArticle", void 0);
|
|
@@ -343,6 +397,33 @@ __decorate([
|
|
|
343
397
|
__decorate([
|
|
344
398
|
property({ type: Boolean })
|
|
345
399
|
], KompasWidgetRecirculationsDefault.prototype, "isDark", void 0);
|
|
400
|
+
__decorate([
|
|
401
|
+
property({ type: String })
|
|
402
|
+
], KompasWidgetRecirculationsDefault.prototype, "tracker_content_id", void 0);
|
|
403
|
+
__decorate([
|
|
404
|
+
property({ type: String })
|
|
405
|
+
], KompasWidgetRecirculationsDefault.prototype, "tracker_content_categories", void 0);
|
|
406
|
+
__decorate([
|
|
407
|
+
property({ type: String })
|
|
408
|
+
], KompasWidgetRecirculationsDefault.prototype, "tracker_user_id", void 0);
|
|
409
|
+
__decorate([
|
|
410
|
+
property({ type: String })
|
|
411
|
+
], KompasWidgetRecirculationsDefault.prototype, "tracker_user_type", void 0);
|
|
412
|
+
__decorate([
|
|
413
|
+
property({ type: String })
|
|
414
|
+
], KompasWidgetRecirculationsDefault.prototype, "tracker_subscription_status", void 0);
|
|
415
|
+
__decorate([
|
|
416
|
+
property({ type: String })
|
|
417
|
+
], KompasWidgetRecirculationsDefault.prototype, "tracker_subscription_package", void 0);
|
|
418
|
+
__decorate([
|
|
419
|
+
property({ type: String })
|
|
420
|
+
], KompasWidgetRecirculationsDefault.prototype, "tracker_metered_wall_type", void 0);
|
|
421
|
+
__decorate([
|
|
422
|
+
property({ type: Number })
|
|
423
|
+
], KompasWidgetRecirculationsDefault.prototype, "tracker_metered_wall_balance", void 0);
|
|
424
|
+
__decorate([
|
|
425
|
+
property({ type: String })
|
|
426
|
+
], KompasWidgetRecirculationsDefault.prototype, "tracker_page_domain", void 0);
|
|
346
427
|
KompasWidgetRecirculationsDefault = __decorate([
|
|
347
428
|
customElement('kompasid-widget-recirculations-default')
|
|
348
429
|
], KompasWidgetRecirculationsDefault);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasWidgetRecirculationsDefault.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.js'\nimport { useTimeDifference } from '../../utils/useTimeDIfference.js'\n\n@customElement('kompasid-widget-recirculations-default')\nexport class KompasWidgetRecirculationsDefault extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n @property({ type: Array }) posts: Post[][] = []\n @property({ type: String }) accessToken = ''\n @property({ type: String }) permalinkArticle = ''\n @property({ type: String }) userGuid = '0'\n @property({ type: String }) slugs = ''\n @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =\n 'relatedArticle'\n @property({ type: String }) mainCategory = ''\n @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'\n @property({ type: String }) titleLink = '' // contoh: /kategori/opini\n\n @property({ type: Boolean }) isDark = false\n\n /**\n * Fetch Data\n */\n async connectedCallback() {\n super.connectedCallback()\n try {\n if (this.type === 'relatedArticle') {\n await this.fetchAccessToken()\n await this.relatedArticles()\n } else if (this.type === 'otherArticle') {\n await this.otherArticles()\n }\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async fetchAccessToken() {\n const response = await fetch(\n 'https://api.kompas.id/account/api/v1/login/guest',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n email: 'anonynous.user@kompas.id',\n }),\n }\n )\n\n const result = await response.json()\n\n if (result?.data?.accessToken) {\n this.accessToken = result.data.accessToken\n } else {\n throw new Error('Token akses tidak tersedia dalam respons')\n }\n }\n\n async relatedArticles() {\n if (!this.accessToken) {\n throw new Error('Token akses tidak tersedia')\n }\n\n const kompasApiAi = 'https://ai.kompas.id/api/v1'\n\n // Constructing parameters\n const params = new URLSearchParams()\n params.append('page_url', this.permalinkArticle)\n params.append('page_type', 'read')\n params.append('item_type', 'articles')\n params.append('guid', this.userGuid)\n params.append('slugs', this.slugs)\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`\n\n const response = await fetch(endpoint, {\n headers: {\n Authorization: `Bearer ${this.accessToken}`,\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n } else {\n throw new Error('Data artikel terkait tidak ditemukan')\n }\n }\n\n async otherArticles() {\n const kompasApiCdsSPA = 'https://cds.kompas.id/api/v2'\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`\n\n const response = await fetch(endpoint, {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n } else {\n throw new Error('Data artikel lainnya tidak ditemukan')\n }\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n /**\n * Render widget components\n */\n\n private titleRelatedArticle() {\n return html`\n <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n <div>\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n Artikel Terkait\n </h5>\n </div>\n </div>\n `\n }\n\n private titleOtherArticle() {\n return html`\n <a\n href=\"${this.titleLink}\"\n class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n >\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this.isDark\n ? 'text-blue-200'\n : 'text-brand-1'}\"\n >\n ${this.titleName}\n </h5>\n </a>\n `\n }\n\n renderChips(post: Post) {\n const chips = []\n const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')\n const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')\n const isKompasBrief = post.postTag?.some(tag => tag.slug === 'kompas-brief')\n const isFreemium = post.isFreemium === true\n\n if (isKompasBrief) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-red-100 text-red-600\">Kompas Brief</div>\n </div>\n `\n )\n } else if (isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n } else if (isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n } else if (isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n renderImage(post: Post) {\n const { thumbnailMedium } = post.thumbnails?.sizes || {}\n if (!thumbnailMedium) return ''\n\n const { permalink, width, height } = thumbnailMedium\n return html`\n <img\n src=\"${permalink}\"\n width=\"${width}\"\n height=\"${height}\"\n alt=\"${post.title}\"\n class=\"aspect-video object-cover w-full\"\n />\n `\n }\n\n render() {\n return html`\n <div class=\"w-full ${this.isDark ? 'bg-dark-5 ' : ''}\">\n <!-- start: widget title -->\n ${this.type === 'relatedArticle'\n ? this.titleRelatedArticle()\n : this.titleOtherArticle()}\n <!-- end: widget title -->\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n <!-- start: left-post-loop -->\n <div class=\"grid grid-cols-1 gap-6\">\n ${this.posts[0]\n ? this.posts[0].map(\n post => html`\n <div class=\"w-full\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a href=\"${post.permalink}\">\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${useTimeDifference(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : 'Belum ada artikel'}\n </div>\n <!-- end: left-post-loop -->\n\n <!-- start: right-post-loop -->\n <div class=\"flex flex-col w-full\">\n ${this.posts[1]\n ? this.posts[1].map(\n post => html`\n <div class=\"mb-6\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a href=\"${post.permalink}\">\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${useTimeDifference(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : ''}\n <!-- start: ads -->\n <slot></slot>\n <!-- end: ads -->\n </div>\n <!-- end: right-post-loop -->\n </div>\n </div>\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasWidgetRecirculationsDefault.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.js'\nimport { useTimeDifference } from '../../utils/useTimeDIfference.js'\nimport { createIntersectionObserverComponent } from '../../utils/IntersectionObserver.js'\n\ncreateIntersectionObserverComponent()\n@customElement('kompasid-widget-recirculations-default')\nexport class KompasWidgetRecirculationsDefault extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n @property({ type: Array }) posts: Post[][] = []\n @property({ type: String }) recoID = ''\n @property({ type: String }) permalinkArticle = ''\n @property({ type: String }) userGuid = '0'\n @property({ type: String }) slugs = ''\n @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =\n 'relatedArticle'\n @property({ type: String }) mainCategory = ''\n @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'\n @property({ type: String }) titleLink = '' // contoh: /kategori/opini\n\n @property({ type: Boolean }) isDark = false\n\n // data dari artikel yg sedang dibuka, untuk datalayer reco_content_viewed\n @property({ type: String }) tracker_content_id = '' //\n @property({ type: String }) tracker_content_categories = ''\n // datau user\n @property({ type: String }) tracker_user_id = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_subscription_package = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_page_domain = ''\n\n /**\n * Fetch Data\n */\n async connectedCallback() {\n super.connectedCallback()\n try {\n if (this.type === 'relatedArticle') {\n await this.relatedArticles()\n } else if (this.type === 'otherArticle') {\n await this.otherArticles()\n }\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async relatedArticles() {\n const kompasApiAi = 'https://ai.kompas.id/api/v1'\n\n // Constructing parameters\n const params = new URLSearchParams()\n params.append('page_url', this.permalinkArticle)\n params.append('page_type', 'read')\n params.append('item_type', 'articles')\n params.append('guid', this.userGuid)\n params.append('slugs', this.slugs)\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`\n\n const response = await fetch(endpoint, {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n\n // get x-request-id from headers\n const recoId = response.headers.get('X-Request-Id') || ''\n this.recoID = recoId\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n } else {\n throw new Error('Data artikel terkait tidak ditemukan')\n }\n }\n\n async otherArticles() {\n const kompasApiCdsSPA = 'https://cds.kompas.id/api/v2'\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`\n\n const response = await fetch(endpoint, {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n } else {\n throw new Error('Data artikel lainnya tidak ditemukan')\n }\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n /**\n * Render widget components\n */\n\n private titleRelatedArticle() {\n return html`\n <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n <div>\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n Artikel Terkait\n </h5>\n </div>\n </div>\n `\n }\n\n private titleOtherArticle() {\n return html`\n <a\n href=\"${this.titleLink}\"\n class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n >\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this.isDark\n ? 'text-blue-200'\n : 'text-brand-1'}\"\n >\n ${this.titleName}\n </h5>\n </a>\n `\n }\n\n renderChips(post: Post) {\n const chips = []\n const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')\n const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')\n const isKompasBrief = post.postTag?.some(tag => tag.slug === 'kompas-brief')\n const isFreemium = post.isFreemium === true\n\n if (isKompasBrief) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-red-100 text-red-600\">Kompas Brief</div>\n </div>\n `\n )\n } else if (isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n } else if (isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n } else if (isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n renderImage(post: Post) {\n const { thumbnailMedium } = post.thumbnails?.sizes || {}\n if (!thumbnailMedium) return ''\n\n const { permalink, width, height } = thumbnailMedium\n return html`\n <img\n src=\"${permalink}\"\n width=\"${width}\"\n height=\"${height}\"\n alt=\"${post.title}\"\n class=\"aspect-video object-cover w-full\"\n />\n `\n }\n\n /**\n * mengirim event ke datalayer\n */\n private recoContentClicked(post: Post, recoIndex: number) {\n if (this.type !== 'relatedArticle') return // Hanya trigger event jika type 'relatedArticle'\n\n window.dataLayer = window.dataLayer || []\n window.dataLayer.push({\n // data dari component\n event: 'reco_content_clicked',\n content_id: post.name,\n content_categories: post.category?.map(cat => cat.name).join('|') || '',\n reco_index: recoIndex,\n reco_id: this.recoID || '',\n reco_model: 'context',\n // data dari implementor\n user_id: this.tracker_user_id || 'NA',\n user_type: this.tracker_user_type || '',\n subscription_status: this.tracker_subscription_status || '',\n subscription_package: this.tracker_subscription_package || '',\n metered_wall_type: this.tracker_metered_wall_type || '',\n metered_wall_balance: this.tracker_metered_wall_balance,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n })\n }\n\n private recoContentViewed() {\n window.dataLayer = window.dataLayer || []\n window.dataLayer.push({\n event: 'reco_content_viewed',\n content_id: this.tracker_content_id || '',\n content_categories: this.tracker_content_categories || '',\n user_type: this.tracker_user_type || '',\n subscription_status: this.tracker_subscription_status || '',\n subscription_package: this.tracker_subscription_package || '',\n metered_wall_type: this.tracker_metered_wall_type || '',\n metered_wall_balance: this.tracker_metered_wall_balance,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n })\n }\n\n handleObserver() {\n if (this.type === 'relatedArticle') {\n this.recoContentViewed()\n } else {\n // kalo mau implemen buat artikel lainnya\n }\n }\n\n render() {\n return html`\n <div class=\"w-full ${this.isDark ? 'bg-dark-5 ' : ''}\">\n <!-- start: widget title -->\n ${this.type === 'relatedArticle'\n ? this.titleRelatedArticle()\n : this.titleOtherArticle()}\n <!-- end: widget title -->\n <intersection-observer-component\n .onTrigger=\"${() => this.handleObserver()}\"\n ></intersection-observer-component>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n <!-- start: left-post-loop -->\n <div class=\"grid grid-cols-1 gap-6\">\n ${this.posts[0]\n ? this.posts[0].map(\n (post, index) => html`\n <div class=\"w-full\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a\n href=\"${post.permalink}?open_from=${this.type ===\n 'relatedArticle'\n ? 'Artikel_Terkait'\n : 'Artikel_Lainnya'}\"\n @click=\"${() =>\n this.recoContentClicked(post, index + 1)}\"\n >\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${useTimeDifference(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : 'Belum ada artikel'}\n </div>\n <!-- end: left-post-loop -->\n\n <!-- start: right-post-loop -->\n <div class=\"flex flex-col w-full\">\n ${this.posts[1]\n ? this.posts[1].map(\n (post, index) => html`\n <div class=\"mb-6\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a\n href=\"${post.permalink}?open_from=${this.type ===\n 'relatedArticle'\n ? 'Artikel_Terkait'\n : 'Artikel_Lainnya'}\"\n @click=\"${() =>\n this.recoContentClicked(post, index + 6)}\"\n >\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${useTimeDifference(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : ''}\n <!-- start: ads -->\n <slot></slot>\n <!-- end: ads -->\n </div>\n <!-- end: right-post-loop -->\n </div>\n </div>\n `\n }\n}\n"]}
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
+
interface Category {
|
|
2
|
+
id: number;
|
|
3
|
+
name: string;
|
|
4
|
+
slug: string;
|
|
5
|
+
}
|
|
1
6
|
interface PostTag {
|
|
2
7
|
slug: string;
|
|
3
8
|
}
|
|
4
9
|
export interface Post {
|
|
10
|
+
id: number;
|
|
5
11
|
title: string;
|
|
12
|
+
name: string;
|
|
13
|
+
category: Category[];
|
|
6
14
|
isAnalisis?: boolean;
|
|
7
15
|
isEksklusif?: boolean;
|
|
8
16
|
isFreemium?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/types.ts"],"names":[],"mappings":"","sourcesContent":["interface PostTag {\n slug: string\n}\n\nexport interface Post {\n title: string\n isAnalisis?: boolean\n isEksklusif?: boolean\n isFreemium?: boolean\n featuredImageThumbnailMedium: string\n permalink: string\n publishedDate: string\n postTag?: PostTag[]\n thumbnails: {\n sizes: {\n thumbnailMedium: {\n permalink: string\n width: number\n height: number\n }\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/types.ts"],"names":[],"mappings":"","sourcesContent":["interface Category {\n id: number\n name: string\n slug: string\n}\n\ninterface PostTag {\n slug: string\n}\n\nexport interface Post {\n id: number\n title: string\n name: string\n category: Category[]\n isAnalisis?: boolean\n isEksklusif?: boolean\n isFreemium?: boolean\n featuredImageThumbnailMedium: string\n permalink: string\n publishedDate: string\n postTag?: PostTag[]\n thumbnails: {\n sizes: {\n thumbnailMedium: {\n permalink: string\n width: number\n height: number\n }\n }\n }\n}\n"]}
|
package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.d.ts
CHANGED
|
@@ -22,6 +22,7 @@ export declare class KompasWidgetRecirculationsList extends LitElement {
|
|
|
22
22
|
fetchArticles(): Promise<void>;
|
|
23
23
|
handleFetchError(error: unknown): void;
|
|
24
24
|
renderChips(item: ListItem): import("lit").TemplateResult<1>[];
|
|
25
|
+
getSectionName(): "Section_Terbaru" | "Section_Terpopuler";
|
|
25
26
|
render(): import("lit").TemplateResult<1>;
|
|
26
27
|
}
|
|
27
28
|
export {};
|
package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js
CHANGED
|
@@ -92,6 +92,13 @@ let KompasWidgetRecirculationsList = class KompasWidgetRecirculationsList extend
|
|
|
92
92
|
}
|
|
93
93
|
return chips;
|
|
94
94
|
}
|
|
95
|
+
getSectionName() {
|
|
96
|
+
const sectionMapping = {
|
|
97
|
+
Terbaru: 'Section_Terbaru',
|
|
98
|
+
Terpopuler: 'Section_Terpopuler',
|
|
99
|
+
};
|
|
100
|
+
return sectionMapping[this.widgetTitle] || '';
|
|
101
|
+
}
|
|
95
102
|
render() {
|
|
96
103
|
return html `
|
|
97
104
|
<div class="${this.isDark ? 'bg-dark-5 ' : ''}">
|
|
@@ -113,7 +120,7 @@ let KompasWidgetRecirculationsList = class KompasWidgetRecirculationsList extend
|
|
|
113
120
|
<div class="flex flex-col w-full">
|
|
114
121
|
${this.renderChips(item)}
|
|
115
122
|
<a
|
|
116
|
-
href="${item.permalink}"
|
|
123
|
+
href="${item.permalink}?open_from=${this.getSectionName()}"
|
|
117
124
|
class="font-bold font-lora hover:underline leading-normal text-xl ${this
|
|
118
125
|
.isDark
|
|
119
126
|
? 'text-white'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasWidgetRecirculationsList.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AAkB7D,IAAM,8BAA8B,GAApC,MAAM,8BAA+B,SAAQ,UAAU;IAAvD;;QACuB,gBAAW,GAAG,EAAE,CAAA;QACjB,gBAAW,GAAe,EAAE,CAAA;QAC3B,YAAO,GAAG,EAAE,CAAA;QAEX,WAAM,GAAG,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"KompasWidgetRecirculationsList.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { useTimeDifference } from '../../utils/useTimeDIfference.js'\n\ninterface PostTag {\n slug: string\n}\n\ninterface ListItem {\n title: string\n isAnalisis?: boolean\n isEksklusif?: boolean\n isFreemium?: boolean\n isKompasBrief?: boolean\n permalink: string\n publishedDate?: string\n postTag?: PostTag[]\n}\n\n@customElement('kompasid-widget-recirculations-list')\nexport class KompasWidgetRecirculationsList extends LitElement {\n @property({ type: String }) widgetTitle = ''\n @property({ type: Array }) articleList: ListItem[] = []\n @property({ type: String }) apiSlug = ''\n\n @property({ type: Boolean }) isDark = false\n\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n async connectedCallback() {\n super.connectedCallback()\n try {\n await this.fetchArticles()\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async fetchArticles() {\n const endpoint = `https://cds.kompas.id/api/v2/article/${this.apiSlug}`\n\n const response = await fetch(endpoint, {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n this.articleList = result.result.map(\n (article: {\n postTag?: never[] | undefined\n isFreemium?: false | undefined\n title: any\n permalink: any\n publishedDate: any\n }) => {\n const {\n postTag = [],\n isFreemium = false,\n title,\n permalink,\n publishedDate,\n } = article\n\n const isAnalisis = postTag.some(\n (tag: { slug: string }) => tag.slug === 'analisis'\n )\n const isEksklusif = postTag.some(\n (tag: { slug: string }) => tag.slug === 'eksklusif'\n )\n const isKompasBrief = postTag.some(\n (tag: { slug: string }) => tag.slug === 'kompas-brief'\n )\n\n return {\n isAnalisis,\n isEksklusif,\n isFreemium,\n isKompasBrief,\n title,\n permalink,\n publishedDate,\n }\n }\n )\n } else {\n throw new Error('Data artikel populer tidak ditemukan')\n }\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n renderChips(item: ListItem) {\n const chips = []\n\n if (item.isKompasBrief) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-red-100 text-red-600\">Kompas Brief</div>\n </div>\n `\n )\n } else if (item.isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n } else if (item.isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n } else if (item.isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n getSectionName() {\n const sectionMapping = {\n Terbaru: 'Section_Terbaru',\n Terpopuler: 'Section_Terpopuler',\n } as const\n\n return sectionMapping[this.widgetTitle as keyof typeof sectionMapping] || ''\n }\n\n render() {\n return html`\n <div class=\"${this.isDark ? 'bg-dark-5 ' : ''}\">\n <div class=\"mb-6\">\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${this.widgetTitle}\n </h5>\n </div>\n\n <ul class=\"flex flex-col\">\n ${this.articleList.slice(0, 5).map(\n item =>\n html`\n <li class=\"flex flex-col items-start mb-3\">\n <div class=\"flex w-full\">\n <div class=\"flex flex-col w-full\">\n ${this.renderChips(item)}\n <a\n href=\"${item.permalink}?open_from=${this.getSectionName()}\"\n class=\"font-bold font-lora hover:underline leading-normal text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${item.title}\n </a>\n <div\n class=\"flex w-full flex-row font-sans items-center leading-normal justify-between pt-2 text-sm ${this\n .isDark\n ? 'text-white'\n : 'text-grey-500'}\"\n >\n ${item.publishedDate\n ? useTimeDifference(item.publishedDate, true)\n : 'Tanggal tidak tersedia'}\n </div>\n </div>\n </div>\n </li>\n `\n )}\n </ul>\n </div>\n `\n }\n}\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare class IntersectionObserverComponent extends LitElement {
|
|
3
|
+
rootMargin: string;
|
|
4
|
+
threshold: number;
|
|
5
|
+
multipleTrigger: boolean;
|
|
6
|
+
forceTrigger: boolean;
|
|
7
|
+
timer: number;
|
|
8
|
+
onTrigger?: () => void;
|
|
9
|
+
elementTarget: HTMLElement;
|
|
10
|
+
private intersectionObserver;
|
|
11
|
+
private timerId;
|
|
12
|
+
connectedCallback(): void;
|
|
13
|
+
firstUpdated(): void;
|
|
14
|
+
disconnectedCallback(): void;
|
|
15
|
+
private handleIntersection;
|
|
16
|
+
private handleEntryInView;
|
|
17
|
+
private clearTimer;
|
|
18
|
+
private emitTrigger;
|
|
19
|
+
render(): import("lit").TemplateResult<1>;
|
|
20
|
+
}
|
|
21
|
+
export declare const createIntersectionObserverComponent: () => typeof IntersectionObserverComponent;
|