WIP PWA for Grain
feat: add focus photo support to comment sheet
+23
-3
+23
-3
src/components/organisms/grain-comment-sheet.js
+23
-3
src/components/organisms/grain-comment-sheet.js
···
12
12
static properties = {
13
13
open: { type: Boolean, reflect: true },
14
14
galleryUri: { type: String },
15
+
focusPhotoUri: { type: String },
16
+
focusPhotoUrl: { type: String },
15
17
_comments: { state: true },
16
18
_loading: { state: true },
17
19
_loadingMore: { state: true },
···
20
22
_replyToUri: { state: true },
21
23
_replyToHandle: { state: true },
22
24
_pageInfo: { state: true },
23
-
_totalCount: { state: true }
25
+
_totalCount: { state: true },
26
+
_focusPhotoUri: { state: true },
27
+
_focusPhotoUrl: { state: true }
24
28
};
25
29
26
30
static styles = css`
···
134
138
this._replyToHandle = null;
135
139
this._pageInfo = { hasNextPage: false, endCursor: null };
136
140
this._totalCount = 0;
141
+
this._focusPhotoUri = null;
142
+
this._focusPhotoUrl = null;
137
143
}
138
144
139
145
updated(changedProps) {
140
146
if (changedProps.has('open') && this.open && this.galleryUri) {
141
147
this.#loadComments();
148
+
this._focusPhotoUri = this.focusPhotoUri || null;
149
+
this._focusPhotoUrl = this.focusPhotoUrl || null;
142
150
}
143
151
}
144
152
···
228
236
const commentUri = await mutations.createComment(
229
237
this.galleryUri,
230
238
text,
231
-
this._replyToUri
239
+
this._replyToUri,
240
+
this._focusPhotoUri
232
241
);
233
242
234
243
// Add new comment to list
···
240
249
displayName: auth.user?.displayName || '',
241
250
avatarUrl: auth.user?.avatar?.url || '',
242
251
replyToUri: this._replyToUri,
243
-
isReply: !!this._replyToUri
252
+
isReply: !!this._replyToUri,
253
+
focusImageUrl: this._focusPhotoUrl || null,
254
+
focusImageAlt: ''
244
255
};
245
256
246
257
if (this._replyToUri) {
···
275
286
this._inputValue = '';
276
287
this._replyToUri = null;
277
288
this._replyToHandle = null;
289
+
this._focusPhotoUri = null;
290
+
this._focusPhotoUrl = null;
278
291
this.shadowRoot.querySelector('grain-comment-input')?.clear();
279
292
} catch (err) {
280
293
console.error('Failed to post comment:', err);
···
295
308
296
309
// Focus input
297
310
this.shadowRoot.querySelector('grain-comment-input')?.focus();
311
+
}
312
+
313
+
#handleClearFocus() {
314
+
this._focusPhotoUri = null;
315
+
this._focusPhotoUrl = null;
298
316
}
299
317
300
318
async #handleDelete(e) {
···
370
388
avatarUrl=${userAvatarUrl}
371
389
.value=${this._inputValue}
372
390
?loading=${this._posting}
391
+
focusPhotoUrl=${this._focusPhotoUrl || ''}
373
392
@input-change=${this.#handleInputChange}
374
393
@send=${this.#handleSend}
394
+
@clear-focus=${this.#handleClearFocus}
375
395
></grain-comment-input>
376
396
</div>
377
397
</div>