+16
src/components/pages/grain-timeline.js
+16
src/components/pages/grain-timeline.js
···
8
import '../organisms/grain-comment-sheet.js';
9
import '../molecules/grain-pull-to-refresh.js';
10
import '../atoms/grain-spinner.js';
11
12
export class GrainTimeline extends LitElement {
13
static properties = {
···
205
this._showScrollTop = window.scrollY > 150;
206
}
207
208
render() {
209
return html`
210
<grain-feed-layout>
···
238
@close=${this.#handleCommentSheetClose}
239
></grain-comment-sheet>
240
</grain-feed-layout>
241
`;
242
}
243
}
···
8
import '../organisms/grain-comment-sheet.js';
9
import '../molecules/grain-pull-to-refresh.js';
10
import '../atoms/grain-spinner.js';
11
+
import '../atoms/grain-scroll-to-top.js';
12
13
export class GrainTimeline extends LitElement {
14
static properties = {
···
206
this._showScrollTop = window.scrollY > 150;
207
}
208
209
+
async #handleScrollTop() {
210
+
if (this._refreshing) return;
211
+
212
+
window.scrollTo({ top: 0, behavior: 'smooth' });
213
+
214
+
// Wait for scroll to complete before refreshing
215
+
await new Promise(resolve => setTimeout(resolve, 400));
216
+
217
+
await this.#handleRefresh();
218
+
}
219
+
220
render() {
221
return html`
222
<grain-feed-layout>
···
250
@close=${this.#handleCommentSheetClose}
251
></grain-comment-sheet>
252
</grain-feed-layout>
253
+
<grain-scroll-to-top
254
+
?visible=${this._showScrollTop}
255
+
@scroll-top=${this.#handleScrollTop}
256
+
></grain-scroll-to-top>
257
`;
258
}
259
}