@salesforcedevs/dw-components 1.3.322 → 1.3.323-alpha.2
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/dw-components",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.323-alpha.2",
|
|
4
4
|
"description": "Lightning web components for https://developer.salesforce.com",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -26,5 +26,7 @@
|
|
|
26
26
|
"@types/setimmediate": "^1.0.2",
|
|
27
27
|
"setimmediate": "^1.0.5"
|
|
28
28
|
},
|
|
29
|
-
"
|
|
29
|
+
"volta": {
|
|
30
|
+
"node": "16.19.1"
|
|
31
|
+
}
|
|
30
32
|
}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
@import "dxHelpers/reset";
|
|
2
|
+
@import "dxHelpers/text";
|
|
3
|
+
@import "dxHelpers/card";
|
|
4
|
+
|
|
1
5
|
dx-section:first-of-type {
|
|
2
6
|
--dx-c-section-padding-bottom: 0;
|
|
3
7
|
}
|
|
@@ -6,16 +10,58 @@ dx-section {
|
|
|
6
10
|
--dx-c-section-position: revert;
|
|
7
11
|
}
|
|
8
12
|
|
|
13
|
+
.feature-card {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: row;
|
|
16
|
+
padding: 20px;
|
|
17
|
+
border-radius: 15px;
|
|
18
|
+
box-shadow: var(--dx-g-box-shadow-sm);
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
|
|
21
|
+
--dx-c-card-title-color: var(--dx-g-blue-vibrant-20);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.feature-card:hover {
|
|
25
|
+
--dx-c-card-title-color: var(--dx-g-blue-vibrant-40);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.feature-card-body {
|
|
29
|
+
padding-right: 20px;
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
justify-content: space-between;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.dx-text-display-6 {
|
|
36
|
+
color: var(--dx-c-card-title-color);
|
|
37
|
+
transition: var(--dx-g-transition-hue-1x);
|
|
38
|
+
font-size: var(--dx-g-text-xl);
|
|
39
|
+
line-height: var(--dx-c-card-title-line-height);
|
|
40
|
+
letter-spacing: var(--dx-c-card-title-letter-spacing);
|
|
41
|
+
word-break: var(--dx-c-card-title-word-break, break-word);
|
|
42
|
+
hyphens: auto;
|
|
43
|
+
}
|
|
44
|
+
|
|
9
45
|
.badge-link-container {
|
|
10
46
|
padding-top: var(--dx-g-spacing-md);
|
|
47
|
+
width: 100%;
|
|
11
48
|
}
|
|
12
49
|
|
|
13
50
|
.badge-container {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-flow: row wrap;
|
|
53
|
+
width: 100%;
|
|
54
|
+
gap: 1em;
|
|
14
55
|
padding-top: 0;
|
|
15
56
|
}
|
|
16
57
|
|
|
17
58
|
.external-link-container {
|
|
18
59
|
padding-top: var(--dx-g-spacing-md);
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-flow: row wrap;
|
|
62
|
+
justify-content: space-between;
|
|
63
|
+
margin-top: 4em;
|
|
64
|
+
gap: 1em;
|
|
19
65
|
}
|
|
20
66
|
|
|
21
67
|
.item-container {
|
|
@@ -1,142 +1,85 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<dx-section>
|
|
3
|
-
<dx-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
label="Featured Demo"
|
|
10
|
-
is-external-link
|
|
11
|
-
class="code-samples-feature"
|
|
12
|
-
>
|
|
13
|
-
{featuredCodeSample.body}
|
|
14
|
-
</dx-feature>
|
|
15
|
-
</dx-section>
|
|
16
|
-
|
|
17
|
-
<dx-section title="Browse Demos">
|
|
18
|
-
<div class="docs-action-bar">
|
|
19
|
-
<div class="records-container">
|
|
20
|
-
<span if:true={endingRecord}>
|
|
21
|
-
Showing { startingRecord } to { endingRecord } of {
|
|
22
|
-
filteredSamples.length }
|
|
3
|
+
<div class="feature-card dx-card-base">
|
|
4
|
+
<div class="feature-card-body">
|
|
5
|
+
<h4>Featured App</h4>
|
|
6
|
+
<h3 class="dx-text-display-6">{featuredCodeSample.title}</h3>
|
|
7
|
+
<span class="feature-card-content dx-text-body-2">
|
|
8
|
+
{featuredCodeSample.body}
|
|
23
9
|
</span>
|
|
10
|
+
<div class="badge-link-container">
|
|
11
|
+
<div class="external-link-container">
|
|
12
|
+
<dx-button
|
|
13
|
+
target={target}
|
|
14
|
+
icon-symbol="new_window"
|
|
15
|
+
variant="primary"
|
|
16
|
+
href={featuredCodeSample.githubLink}
|
|
17
|
+
onclick={handleReadItClick}
|
|
18
|
+
>
|
|
19
|
+
Explore on GitHub
|
|
20
|
+
</dx-button>
|
|
21
|
+
<dx-button
|
|
22
|
+
target={target}
|
|
23
|
+
variant="secondary"
|
|
24
|
+
href={featuredCodeSample.trailheadLink}
|
|
25
|
+
onclick={handleReadItClick}
|
|
26
|
+
>
|
|
27
|
+
Learn on Trailhead
|
|
28
|
+
</dx-button>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
24
31
|
</div>
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
icon-symbol="chevrondown"
|
|
31
|
-
slot="control"
|
|
32
|
-
>
|
|
33
|
-
Source
|
|
34
|
-
</dx-button>
|
|
35
|
-
<dx-checkbox-group
|
|
36
|
-
legend="Source"
|
|
37
|
-
options={sources}
|
|
38
|
-
slot="content"
|
|
39
|
-
onchange={handleSourceFilterChange}
|
|
40
|
-
value={selectedSourceFilter}
|
|
41
|
-
class="filter-checkbox-group"
|
|
42
|
-
></dx-checkbox-group>
|
|
43
|
-
</dx-popover>
|
|
44
|
-
<dx-popover width="max-content">
|
|
45
|
-
<dx-button
|
|
46
|
-
class="filter-button"
|
|
47
|
-
variant="tertiary"
|
|
48
|
-
icon-symbol="chevrondown"
|
|
49
|
-
slot="control"
|
|
50
|
-
>
|
|
51
|
-
Type
|
|
52
|
-
</dx-button>
|
|
53
|
-
<dx-checkbox-group
|
|
54
|
-
legend="Type"
|
|
55
|
-
options={types}
|
|
56
|
-
slot="content"
|
|
57
|
-
onchange={handleTypeFilterChange}
|
|
58
|
-
value={selectedTypeFilter}
|
|
59
|
-
class="filter-checkbox-group"
|
|
60
|
-
></dx-checkbox-group>
|
|
61
|
-
</dx-popover>
|
|
62
|
-
<dx-popover width="max-content">
|
|
63
|
-
<dx-button
|
|
64
|
-
class="filter-button"
|
|
65
|
-
variant="tertiary"
|
|
66
|
-
icon-symbol="chevrondown"
|
|
67
|
-
slot="control"
|
|
68
|
-
>
|
|
69
|
-
Products
|
|
70
|
-
</dx-button>
|
|
71
|
-
<dx-checkbox-group
|
|
72
|
-
legend="Products"
|
|
73
|
-
options={products}
|
|
74
|
-
slot="content"
|
|
75
|
-
onchange={handleProductFilterChange}
|
|
76
|
-
value={selectedProductFilter}
|
|
77
|
-
class="filter-checkbox-group"
|
|
78
|
-
></dx-checkbox-group>
|
|
79
|
-
</dx-popover>
|
|
80
|
-
</div>
|
|
81
|
-
<dx-input
|
|
82
|
-
size="small"
|
|
83
|
-
placeholder="Search..."
|
|
84
|
-
icon-symbol="search"
|
|
85
|
-
shortcut-key="j"
|
|
86
|
-
class="docs-search-input"
|
|
87
|
-
onchange={handleSearchChange}
|
|
88
|
-
value={searchTerm}
|
|
89
|
-
></dx-input>
|
|
32
|
+
<img
|
|
33
|
+
class="image dx-card-base_image"
|
|
34
|
+
src={featuredCodeSample.img}
|
|
35
|
+
alt={featuredCodeSample.title}
|
|
36
|
+
/>
|
|
90
37
|
</div>
|
|
38
|
+
</dx-section>
|
|
39
|
+
|
|
40
|
+
<dx-section title="Explore the Apps">
|
|
91
41
|
<dx-grid columns={tileColumns} if:false={showEmptyState}>
|
|
92
42
|
<dx-card-docs
|
|
93
|
-
|
|
94
|
-
for:each={currentPageSamples}
|
|
43
|
+
for:each={samples}
|
|
95
44
|
for:item="item"
|
|
96
45
|
for:index="i"
|
|
97
46
|
key={item.id}
|
|
98
47
|
body={item.body}
|
|
99
48
|
label={item.type}
|
|
100
49
|
title={item.title}
|
|
101
|
-
href={item.
|
|
50
|
+
href={item.githubLink}
|
|
51
|
+
img-src={item.img}
|
|
102
52
|
>
|
|
103
53
|
<div class="badge-link-container">
|
|
104
54
|
<div class="badge-container">
|
|
105
55
|
<dx-metadata-badge
|
|
106
|
-
|
|
107
|
-
|
|
56
|
+
for:each={item.tags}
|
|
57
|
+
for:item="tag"
|
|
58
|
+
key={tag}
|
|
59
|
+
value={tag}
|
|
108
60
|
></dx-metadata-badge>
|
|
109
61
|
</div>
|
|
110
62
|
<div class="external-link-container">
|
|
111
63
|
<dx-button
|
|
112
64
|
target={target}
|
|
113
65
|
icon-symbol="new_window"
|
|
114
|
-
variant="
|
|
115
|
-
href={item.
|
|
66
|
+
variant="primary"
|
|
67
|
+
href={item.githubLink}
|
|
116
68
|
onclick={handleReadItClick}
|
|
117
69
|
>
|
|
118
|
-
|
|
70
|
+
Explore on GitHub
|
|
71
|
+
</dx-button>
|
|
72
|
+
<dx-button
|
|
73
|
+
target={target}
|
|
74
|
+
variant="secondary"
|
|
75
|
+
href={item.trailheadLink}
|
|
76
|
+
onclick={handleReadItClick}
|
|
77
|
+
>
|
|
78
|
+
Learn on Trailhead
|
|
119
79
|
</dx-button>
|
|
120
80
|
</div>
|
|
121
81
|
</div>
|
|
122
82
|
</dx-card-docs>
|
|
123
83
|
</dx-grid>
|
|
124
|
-
<div if:false={hidePagination} class="pagination-container">
|
|
125
|
-
<dx-pagination
|
|
126
|
-
if:false={showEmptyState}
|
|
127
|
-
current-page={page}
|
|
128
|
-
total-pages={totalPages}
|
|
129
|
-
pages-to-show={pagesToShow}
|
|
130
|
-
onpagechange={goToPage}
|
|
131
|
-
></dx-pagination>
|
|
132
|
-
</div>
|
|
133
|
-
<dx-empty-state
|
|
134
|
-
variant="alt"
|
|
135
|
-
title="Beep boop. That did not compute."
|
|
136
|
-
subtitle={emptyStateSubtitle}
|
|
137
|
-
body={emptyStateBody}
|
|
138
|
-
suggestions={emptyStateSuggestions}
|
|
139
|
-
if:true={showEmptyState}
|
|
140
|
-
></dx-empty-state>
|
|
141
84
|
</dx-section>
|
|
142
85
|
</template>
|
|
@@ -1,128 +1,20 @@
|
|
|
1
1
|
import { api, LightningElement } from "lwc";
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import orderBy from "lodash.orderby";
|
|
5
|
-
import cloneDeep from "lodash.clonedeep";
|
|
6
|
-
import { DropdownItem, CodeSample } from "typings/custom";
|
|
2
|
+
|
|
3
|
+
import { CodeSample } from "typings/custom";
|
|
7
4
|
import { toJson } from "dxUtils/normalizers";
|
|
8
|
-
import { track } from "dxUtils/analytics";
|
|
9
5
|
|
|
10
|
-
const PRODUCT_FILTER_ALL_PRODUCTS = "all products";
|
|
11
|
-
const WAIT_TIME = 500;
|
|
12
6
|
const DEFAULT_BUTTON_TEXT = "Explore on GitHub";
|
|
13
7
|
export default class CodeSamplesGrid extends LightningElement {
|
|
14
|
-
private searchTerm = "";
|
|
15
|
-
private selectedProductFilter: string[] | null = null;
|
|
16
|
-
private selectedTypeFilter: string[] | null = null;
|
|
17
|
-
private selectedSourceFilter: string[] | null = null;
|
|
18
|
-
private page = 1;
|
|
19
|
-
private pageSize = 9;
|
|
20
|
-
private startingRecord = 1;
|
|
21
|
-
private endingRecord = 24;
|
|
22
|
-
private totalRecountCount = 0;
|
|
23
|
-
private totalPages = 1;
|
|
24
8
|
private _featuredCodeSample?: CodeSample = undefined;
|
|
25
9
|
private _samplesList: CodeSample[] = [];
|
|
26
|
-
private _typesFiltersList: DropdownItem[] = [];
|
|
27
|
-
private _sourceFiltersList: DropdownItem[] = [];
|
|
28
|
-
private _productFiltersList: DropdownItem[] = [];
|
|
29
|
-
private matchDesktop!: MediaQueryList;
|
|
30
|
-
private matchMobile!: MediaQueryList;
|
|
31
|
-
private matchMobileSmall!: MediaQueryList;
|
|
32
10
|
private deviceType: "desktop" | "mobile" | "mobile-small" = "desktop";
|
|
33
|
-
private _searchTimeout?: number;
|
|
34
11
|
private target = "_blank";
|
|
35
12
|
private isDesktop = "(min-width: 1024px)";
|
|
36
13
|
private isMobile = "(min-width: 401px) and (max-width: 1023px)";
|
|
37
14
|
private isMobileSmall = "(max-width: 400px)";
|
|
38
|
-
private showSourcesFilter = false;
|
|
39
|
-
private filteredItemsSelected: boolean = false;
|
|
40
|
-
private filtersDefaultValue = {
|
|
41
|
-
selectedSourceFilter: [] as string[],
|
|
42
|
-
selectedTypeFilter: [] as string[],
|
|
43
|
-
selectedProductFilter: [] as string[],
|
|
44
|
-
searchTerm: "",
|
|
45
|
-
page: "1"
|
|
46
|
-
};
|
|
47
15
|
|
|
48
16
|
connectedCallback(): void {
|
|
49
|
-
|
|
50
|
-
this.matchDesktop.addEventListener("change", this.handleView);
|
|
51
|
-
|
|
52
|
-
this.matchMobile = window.matchMedia(this.isMobile);
|
|
53
|
-
this.matchMobile.addEventListener("change", this.handleView);
|
|
54
|
-
|
|
55
|
-
this.matchMobileSmall = window.matchMedia(this.isMobileSmall);
|
|
56
|
-
this.matchMobileSmall.addEventListener("change", this.handleView);
|
|
57
|
-
window.addEventListener("popstate", this.handleURLStateChange);
|
|
58
|
-
if (this.matchDesktop.matches) {
|
|
59
|
-
this.deviceType = "desktop";
|
|
60
|
-
}
|
|
61
|
-
if (this.matchMobile.matches) {
|
|
62
|
-
this.deviceType = "mobile";
|
|
63
|
-
}
|
|
64
|
-
if (this.matchMobileSmall.matches) {
|
|
65
|
-
this.deviceType = "mobile-small";
|
|
66
|
-
}
|
|
67
|
-
this.evaluateQueryParams(false);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
handleURLStateChange(): void {
|
|
71
|
-
this.evaluateQueryParams(true);
|
|
72
|
-
this.scrollToTop();
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
evaluateQueryParams(resetFilters: boolean): void {
|
|
76
|
-
let page = "1";
|
|
77
|
-
if (resetFilters) {
|
|
78
|
-
this.selectedSourceFilter =
|
|
79
|
-
this.filtersDefaultValue.selectedSourceFilter;
|
|
80
|
-
this.selectedTypeFilter =
|
|
81
|
-
this.filtersDefaultValue.selectedTypeFilter;
|
|
82
|
-
this.selectedProductFilter =
|
|
83
|
-
this.filtersDefaultValue.selectedProductFilter;
|
|
84
|
-
}
|
|
85
|
-
const urlParams = new URLSearchParams(window.location.search);
|
|
86
|
-
if (urlParams.toString()) {
|
|
87
|
-
if (urlParams.has("source")) {
|
|
88
|
-
this.selectedSourceFilter = urlParams.getAll("source");
|
|
89
|
-
}
|
|
90
|
-
if (urlParams.has("type")) {
|
|
91
|
-
this.selectedTypeFilter = urlParams.getAll("type");
|
|
92
|
-
}
|
|
93
|
-
if (urlParams.get("service")) {
|
|
94
|
-
this.selectedProductFilter = urlParams
|
|
95
|
-
.get("service")!
|
|
96
|
-
.split(",");
|
|
97
|
-
}
|
|
98
|
-
if (urlParams.get("filter_text")) {
|
|
99
|
-
this.searchTerm = (
|
|
100
|
-
urlParams.get("filter_text") || ""
|
|
101
|
-
).toLowerCase();
|
|
102
|
-
}
|
|
103
|
-
if (urlParams.has("page")) {
|
|
104
|
-
page = urlParams.get("page")!;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
this.calculatePagination(page, true);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
disconnectedCallback(): void {
|
|
111
|
-
this.matchDesktop.removeEventListener("change", this.handleView);
|
|
112
|
-
this.matchMobile.removeEventListener("change", this.handleView);
|
|
113
|
-
this.matchMobileSmall.removeEventListener("change", this.handleView);
|
|
114
|
-
window.removeEventListener("popstate", this.handleURLStateChange);
|
|
115
|
-
|
|
116
|
-
if (!this.filteredItemsSelected) {
|
|
117
|
-
this.selectedProductFilter?.forEach((filter) => {
|
|
118
|
-
track(document, "custEv_filterAbandoned", {
|
|
119
|
-
click_text: filter,
|
|
120
|
-
element_title: "CodeSamplesGrid",
|
|
121
|
-
element_type: "filter abandoned",
|
|
122
|
-
content_category: "filter"
|
|
123
|
-
});
|
|
124
|
-
});
|
|
125
|
-
}
|
|
17
|
+
console.log(this._samplesList);
|
|
126
18
|
}
|
|
127
19
|
|
|
128
20
|
@api
|
|
@@ -141,12 +33,10 @@ export default class CodeSamplesGrid extends LightningElement {
|
|
|
141
33
|
title: sample.title,
|
|
142
34
|
body: sample.body,
|
|
143
35
|
buttonText: DEFAULT_BUTTON_TEXT,
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
// source: sample.source,
|
|
149
|
-
source: "none",
|
|
36
|
+
githubLink: sample.githubLink,
|
|
37
|
+
trailheadLink: sample.trailheadLink,
|
|
38
|
+
img: sample.img,
|
|
39
|
+
tags: sample.tags,
|
|
150
40
|
target: this.target
|
|
151
41
|
}));
|
|
152
42
|
}
|
|
@@ -155,128 +45,8 @@ export default class CodeSamplesGrid extends LightningElement {
|
|
|
155
45
|
return this._samplesList;
|
|
156
46
|
}
|
|
157
47
|
|
|
158
|
-
@api
|
|
159
|
-
set products(value: string) {
|
|
160
|
-
const productsFilters = toJson(value).map((sample: string) => ({
|
|
161
|
-
label: sample,
|
|
162
|
-
value: sample.toLowerCase()
|
|
163
|
-
}));
|
|
164
|
-
|
|
165
|
-
this._productFiltersList = orderBy(
|
|
166
|
-
uniqBy([...productsFilters] as any, "value"),
|
|
167
|
-
["value"],
|
|
168
|
-
["asc"]
|
|
169
|
-
) as any[];
|
|
170
|
-
this.selectedProductFilter = this._productFiltersList.map(
|
|
171
|
-
(filter) => filter.value
|
|
172
|
-
);
|
|
173
|
-
this.filtersDefaultValue.selectedProductFilter = cloneDeep(
|
|
174
|
-
this.selectedProductFilter
|
|
175
|
-
);
|
|
176
|
-
}
|
|
177
|
-
get products(): DropdownItem[] {
|
|
178
|
-
return this._productFiltersList;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
@api
|
|
182
|
-
set types(value: string) {
|
|
183
|
-
const typesFilter = toJson(value).map((sample: string) => ({
|
|
184
|
-
label: sample,
|
|
185
|
-
value: sample.toLowerCase()
|
|
186
|
-
}));
|
|
187
|
-
|
|
188
|
-
this._typesFiltersList = orderBy(
|
|
189
|
-
uniqBy([...typesFilter] as any, "value"),
|
|
190
|
-
["value"],
|
|
191
|
-
["asc"]
|
|
192
|
-
) as any[];
|
|
193
|
-
this.selectedTypeFilter = this._typesFiltersList.map(
|
|
194
|
-
(filter) => filter.value
|
|
195
|
-
);
|
|
196
|
-
this.filtersDefaultValue.selectedTypeFilter = cloneDeep(
|
|
197
|
-
this.selectedTypeFilter
|
|
198
|
-
);
|
|
199
|
-
}
|
|
200
|
-
get types(): DropdownItem[] {
|
|
201
|
-
return this._typesFiltersList;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
@api
|
|
205
|
-
set sources(value: string) {
|
|
206
|
-
const parsedValues = toJson(value);
|
|
207
|
-
this.showSourcesFilter = parsedValues.length > 0;
|
|
208
|
-
const sourcesFilter = parsedValues.map((sample: string) => ({
|
|
209
|
-
label: sample,
|
|
210
|
-
value: sample.toLowerCase()
|
|
211
|
-
}));
|
|
212
|
-
|
|
213
|
-
this._sourceFiltersList = orderBy(
|
|
214
|
-
uniqBy([...sourcesFilter] as any, "value"),
|
|
215
|
-
["value"],
|
|
216
|
-
["asc"]
|
|
217
|
-
) as any;
|
|
218
|
-
this.selectedSourceFilter = this._sourceFiltersList.map(
|
|
219
|
-
(filter) => filter.value
|
|
220
|
-
);
|
|
221
|
-
this.filtersDefaultValue.selectedSourceFilter = cloneDeep(
|
|
222
|
-
this.selectedSourceFilter
|
|
223
|
-
);
|
|
224
|
-
}
|
|
225
|
-
get sources(): DropdownItem[] {
|
|
226
|
-
return this._sourceFiltersList;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
get filteredSamples(): CodeSample[] {
|
|
230
|
-
return this.filterSamples([...this.samples]);
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
get currentPageSamples(): CodeSample[] {
|
|
234
|
-
return this.filteredSamples.slice(
|
|
235
|
-
this.startingRecord - 1,
|
|
236
|
-
this.endingRecord
|
|
237
|
-
);
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
get typesList(): DropdownItem[] {
|
|
241
|
-
return this._typesFiltersList || [];
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
get productFiltersList(): DropdownItem[] {
|
|
245
|
-
return this._productFiltersList || [];
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
get showEmptyState(): boolean {
|
|
249
|
-
return !this.filteredSamples.length;
|
|
250
|
-
}
|
|
251
|
-
|
|
252
48
|
get tileColumns(): string {
|
|
253
|
-
return this.deviceType === "desktop" ? "
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
get pagesToShow(): number {
|
|
257
|
-
return this.deviceType === "mobile-small" ? 3 : 5;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
get hidePagination(): boolean {
|
|
261
|
-
return this.totalPages < 2;
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
get emptyStateSubtitle() {
|
|
265
|
-
return (
|
|
266
|
-
"Sorry, no results were found for your search" +
|
|
267
|
-
(this.searchTerm !== "" ? ` "${this.searchTerm}"` : "")
|
|
268
|
-
);
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
get emptyStateBody() {
|
|
272
|
-
return "Search Tips:";
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
get emptyStateSuggestions() {
|
|
276
|
-
return JSON.stringify([
|
|
277
|
-
"Please consider misspellings",
|
|
278
|
-
"Try different search keywords"
|
|
279
|
-
]);
|
|
49
|
+
return this.deviceType === "desktop" ? "two" : "one";
|
|
280
50
|
}
|
|
281
51
|
|
|
282
52
|
handleView = (e: MediaQueryListEvent | MediaQueryList): void => {
|
|
@@ -294,169 +64,4 @@ export default class CodeSamplesGrid extends LightningElement {
|
|
|
294
64
|
this.deviceType = "mobile-small";
|
|
295
65
|
}
|
|
296
66
|
};
|
|
297
|
-
|
|
298
|
-
goToPage(e: CustomEvent): void {
|
|
299
|
-
const page = e.detail;
|
|
300
|
-
this.displayRecordsPerPage(page);
|
|
301
|
-
this.setSearchParams("page", page ? page.toString() : "1");
|
|
302
|
-
this.scrollToTop();
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
displayRecordsPerPage(page: number): void {
|
|
306
|
-
this.page = page;
|
|
307
|
-
this.startingRecord =
|
|
308
|
-
page === 1 ? page : (page - 1) * this.pageSize + 1;
|
|
309
|
-
this.endingRecord = this.pageSize * page;
|
|
310
|
-
this.endingRecord =
|
|
311
|
-
this.endingRecord > this.totalRecountCount
|
|
312
|
-
? this.totalRecountCount
|
|
313
|
-
: this.endingRecord;
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
handleSearchChange(event: CustomEvent): void {
|
|
317
|
-
const value = event.detail;
|
|
318
|
-
this.searchTerm = value.toLowerCase();
|
|
319
|
-
window.clearTimeout(this._searchTimeout);
|
|
320
|
-
this._searchTimeout = window.setTimeout(() => {
|
|
321
|
-
this.calculatePagination();
|
|
322
|
-
}, WAIT_TIME);
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
handleSourceFilterChange(event: CustomEvent): void {
|
|
326
|
-
this.selectedSourceFilter = event.detail.value;
|
|
327
|
-
this.calculatePagination();
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
handleTypeFilterChange(event: CustomEvent): void {
|
|
331
|
-
this.selectedTypeFilter = event.detail.value;
|
|
332
|
-
this.calculatePagination();
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
handleProductFilterChange(event: CustomEvent): void {
|
|
336
|
-
if (event.detail.checkedValue === PRODUCT_FILTER_ALL_PRODUCTS) {
|
|
337
|
-
if (event.detail.checked) {
|
|
338
|
-
this.selectedProductFilter = this.productFiltersList.map(
|
|
339
|
-
(filter) => filter.value
|
|
340
|
-
);
|
|
341
|
-
} else {
|
|
342
|
-
this.selectedProductFilter = [];
|
|
343
|
-
}
|
|
344
|
-
} else {
|
|
345
|
-
let newList = event.detail.value;
|
|
346
|
-
if (!event.detail.checked) {
|
|
347
|
-
newList = newList.filter(
|
|
348
|
-
(val: typeof PRODUCT_FILTER_ALL_PRODUCTS) =>
|
|
349
|
-
val !== PRODUCT_FILTER_ALL_PRODUCTS
|
|
350
|
-
);
|
|
351
|
-
}
|
|
352
|
-
this.selectedProductFilter = newList;
|
|
353
|
-
}
|
|
354
|
-
this.calculatePagination();
|
|
355
|
-
this.filteredItemsSelected = false;
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
handleLanguageFilterChange(event: CustomEvent): void {
|
|
359
|
-
this.selectedTypeFilter = event.detail.value;
|
|
360
|
-
this.setSearchParams("type", this.selectedTypeFilter);
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
filterSamples(samples: CodeSample[]): CodeSample[] {
|
|
364
|
-
const filtered = samples
|
|
365
|
-
.filter((contentItem) => {
|
|
366
|
-
const matchesSearchTerm =
|
|
367
|
-
contentItem.body.toLowerCase().includes(this.searchTerm) ||
|
|
368
|
-
contentItem.title.toLowerCase().includes(this.searchTerm);
|
|
369
|
-
const matchesProductFilters =
|
|
370
|
-
!this.selectedProductFilter ||
|
|
371
|
-
!this.selectedProductFilter.length ||
|
|
372
|
-
this.selectedProductFilter.includes(
|
|
373
|
-
PRODUCT_FILTER_ALL_PRODUCTS
|
|
374
|
-
) ||
|
|
375
|
-
(typeof contentItem.product === "string" &&
|
|
376
|
-
this.selectedProductFilter.includes(
|
|
377
|
-
contentItem.product.toLowerCase()
|
|
378
|
-
));
|
|
379
|
-
const matchesTypeFilters =
|
|
380
|
-
!this.selectedTypeFilter ||
|
|
381
|
-
!this.selectedTypeFilter.length ||
|
|
382
|
-
(typeof contentItem.type === "string" &&
|
|
383
|
-
this.selectedTypeFilter.includes(
|
|
384
|
-
contentItem.type.toLowerCase()
|
|
385
|
-
));
|
|
386
|
-
const matchesSourceFilters =
|
|
387
|
-
!this.selectedSourceFilter ||
|
|
388
|
-
!this.selectedSourceFilter.length ||
|
|
389
|
-
(typeof contentItem.source === "string" &&
|
|
390
|
-
this.selectedSourceFilter.includes(
|
|
391
|
-
contentItem.source.toLowerCase()
|
|
392
|
-
));
|
|
393
|
-
|
|
394
|
-
return (
|
|
395
|
-
matchesSearchTerm &&
|
|
396
|
-
matchesProductFilters &&
|
|
397
|
-
matchesTypeFilters &&
|
|
398
|
-
matchesSourceFilters
|
|
399
|
-
);
|
|
400
|
-
})
|
|
401
|
-
.sort((a: CodeSample, b: CodeSample) => {
|
|
402
|
-
return a.title.localeCompare(b.title);
|
|
403
|
-
});
|
|
404
|
-
return filtered;
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
calculatePagination(page?: string, skipSetSearchParams = false): void {
|
|
408
|
-
if (page) {
|
|
409
|
-
this.page = parseInt(page, 10) || 1;
|
|
410
|
-
}
|
|
411
|
-
this.totalRecountCount = this.filteredSamples.length;
|
|
412
|
-
this.totalPages = Math.ceil(this.totalRecountCount / this.pageSize);
|
|
413
|
-
this.displayRecordsPerPage(this.page);
|
|
414
|
-
if (!skipSetSearchParams) {
|
|
415
|
-
this.setSearchParams();
|
|
416
|
-
}
|
|
417
|
-
}
|
|
418
|
-
|
|
419
|
-
scrollToTop(): void {
|
|
420
|
-
this.template
|
|
421
|
-
.querySelector(".docs-grid-container")!
|
|
422
|
-
.scrollIntoView({ behavior: "smooth" });
|
|
423
|
-
}
|
|
424
|
-
|
|
425
|
-
setSearchParams(key?: string | null, val?: string[] | null): void {
|
|
426
|
-
const service =
|
|
427
|
-
this.selectedProductFilter!.length ===
|
|
428
|
-
this.productFiltersList.length
|
|
429
|
-
? ""
|
|
430
|
-
: this.selectedProductFilter!.join(",");
|
|
431
|
-
const params: { [key: string]: any } = {
|
|
432
|
-
filter_text: this.searchTerm,
|
|
433
|
-
service,
|
|
434
|
-
type: this.selectedTypeFilter,
|
|
435
|
-
page: this.page.toString(),
|
|
436
|
-
source: this.selectedSourceFilter
|
|
437
|
-
};
|
|
438
|
-
if (key) {
|
|
439
|
-
params[key] = key === "service" ? val!.join(",") : val;
|
|
440
|
-
}
|
|
441
|
-
for (const _key in params) {
|
|
442
|
-
if (!params[_key]) {
|
|
443
|
-
delete params[_key];
|
|
444
|
-
}
|
|
445
|
-
}
|
|
446
|
-
const searchParams = qs.stringify(params);
|
|
447
|
-
const newurl = `${window.location.pathname}?${searchParams}`;
|
|
448
|
-
window.history.pushState({ path: newurl }, "", newurl);
|
|
449
|
-
}
|
|
450
|
-
|
|
451
|
-
handleReadItClick() {
|
|
452
|
-
this.filteredItemsSelected = true;
|
|
453
|
-
this.selectedProductFilter?.forEach((filter) => {
|
|
454
|
-
track(document, "custEv_filterApplied", {
|
|
455
|
-
click_text: filter,
|
|
456
|
-
click_url: `${window.location.origin}${filter}`,
|
|
457
|
-
element_type: "filter applied",
|
|
458
|
-
content_category: "filter"
|
|
459
|
-
});
|
|
460
|
-
});
|
|
461
|
-
}
|
|
462
67
|
}
|
package/LICENSE
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
Copyright (c) 2020, Salesforce.com, Inc.
|
|
2
|
-
All rights reserved.
|
|
3
|
-
|
|
4
|
-
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
|
|
5
|
-
|
|
6
|
-
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
|
|
7
|
-
|
|
8
|
-
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
|
|
9
|
-
|
|
10
|
-
* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
|
|
11
|
-
|
|
12
|
-
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|