WIP PWA for Grain
feat: add share button to engagement bar
+38
-3
+2
-2
src/components/atoms/grain-icon.js
+2
-2
src/components/atoms/grain-icon.js
···
5
5
heart: 'fa-regular fa-heart',
6
6
heartFilled: 'fa-solid fa-heart',
7
7
comment: 'fa-regular fa-comment',
8
-
share: 'fa-solid fa-paper-plane',
9
8
back: 'fa-solid fa-arrow-left',
10
9
home: 'fa-solid fa-house',
11
10
homeLine: 'fa-regular fa-house',
···
21
20
ellipsisVertical: 'fa-solid fa-ellipsis-vertical',
22
21
download: 'fa-solid fa-download',
23
22
share: 'fa-solid fa-arrow-up-from-bracket',
24
-
camera: 'fa-solid fa-camera'
23
+
camera: 'fa-solid fa-camera',
24
+
paperPlane: 'fa-regular fa-paper-plane'
25
25
};
26
26
27
27
export class GrainIcon extends LitElement {
+36
-1
src/components/organisms/grain-engagement-bar.js
+36
-1
src/components/organisms/grain-engagement-bar.js
···
1
1
import { LitElement, html, css } from 'lit';
2
+
import { share } from '../../services/share.js';
2
3
import '../molecules/grain-stat-count.js';
4
+
import '../atoms/grain-icon.js';
5
+
import '../atoms/grain-toast.js';
3
6
4
7
export class GrainEngagementBar extends LitElement {
5
8
static properties = {
6
9
favoriteCount: { type: Number },
7
-
commentCount: { type: Number }
10
+
commentCount: { type: Number },
11
+
url: { type: String }
8
12
};
9
13
10
14
static styles = css`
···
20
24
padding-right: 0;
21
25
}
22
26
}
27
+
.share-button {
28
+
display: flex;
29
+
align-items: center;
30
+
justify-content: center;
31
+
background: none;
32
+
border: none;
33
+
padding: var(--space-sm);
34
+
margin: calc(-1 * var(--space-sm));
35
+
cursor: pointer;
36
+
color: var(--color-text-primary);
37
+
border-radius: var(--border-radius);
38
+
transition: opacity 0.2s;
39
+
}
40
+
.share-button:hover {
41
+
opacity: 0.7;
42
+
}
43
+
.share-button:active {
44
+
transform: scale(0.95);
45
+
}
23
46
`;
24
47
25
48
constructor() {
26
49
super();
27
50
this.favoriteCount = 0;
28
51
this.commentCount = 0;
52
+
this.url = '';
53
+
}
54
+
55
+
async #handleShare() {
56
+
const result = await share(this.url || window.location.href);
57
+
if (result.success && result.method === 'clipboard') {
58
+
this.shadowRoot.querySelector('grain-toast').show('Link copied');
59
+
}
29
60
}
30
61
31
62
render() {
···
38
69
icon="comment"
39
70
count=${this.commentCount}
40
71
></grain-stat-count>
72
+
<button class="share-button" type="button" aria-label="Share" @click=${this.#handleShare}>
73
+
<grain-icon name="paperPlane" size="16"></grain-icon>
74
+
</button>
75
+
<grain-toast></grain-toast>
41
76
`;
42
77
}
43
78
}