Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/improsocial/impro
An extensible Bluesky client for web impro.social
Something went wrong. Try again.
15 kB · 462 lines
JavaScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463import { html, render } from "/js/lib/lit-html.js";import { Component } from "/js/components/component.js";import { scrollLocks } from "/js/scrollLocks.js";import { closeWithAnimation, resetScrollOnBlur } from "/js/dialogHelpers.js";import { enableDragToDismiss } from "/js/dragHelpers.js";import { classnames, graphemeCount, readFileAsDataUrl } from "/js/utils.js";import { ImageCompressor } from "/js/imageCompressor.js";import "/js/components/app-icon.js";import "/js/components/image-cropper.js";import "/js/components/context-menu.js";import "/js/components/context-menu-item.js";import "/js/components/context-menu-item-group.js";import { confirmModal } from "/js/modals/confirm.modal.js";
const MAX_NAME_LENGTH = 64;const MAX_DESCRIPTION_LENGTH = 300;const CURATE_LIST_PURPOSE = "app.bsky.graph.defs#curatelist";const MOD_LIST_PURPOSE = "app.bsky.graph.defs#modlist";
class CreateListDialog extends Component { connectedCallback() { if (this.initialized) { return; } this.setAttribute("data-dialog-wrapper", ""); this.scrollLock = null; this._name = ""; this._description = ""; this._newAvatarDataUrl = null; this._purpose = CURATE_LIST_PURPOSE; this._saving = false; this._error = null; this._croppingImageSrc = null; this._isOpen = false; this.innerHTML = ""; this.render(); this.initialized = true; }
get _isDirty() { return ( this._name.length > 0 || this._description.length > 0 || this._newAvatarDataUrl !== null ); }
get _isNameTooLong() { return graphemeCount(this._name) > MAX_NAME_LENGTH; }
get _isNameEmpty() { return this._name.trim().length === 0; }
get _isDescriptionTooLong() { return graphemeCount(this._description) > MAX_DESCRIPTION_LENGTH; }
get _canSave() { return ( !this._saving && !this._isNameEmpty && !this._isNameTooLong && !this._isDescriptionTooLong ); }
render() { const isCropping = !!this._croppingImageSrc;
const nameCount = graphemeCount(this._name); const descriptionCount = graphemeCount(this._description); const avatarSrc = this._newAvatarDataUrl;
render( html`<dialog autofocus class="bottom-sheet bottom-sheet-fullscreen no-handle form-dialog create-list-dialog" @click=${async (event) => { if (!isCropping && event.target === event.currentTarget) { if (await this.confirmClose()) { this.close(); } } }} @cancel=${async (event) => { event.preventDefault(); if (isCropping) { this._croppingImageSrc = null; this.render(); } else if (await this.confirmClose()) { this.close(); } }} @close=${() => { this.scrollLock?.release(); this.scrollLock = null; this.dispatchEvent(new CustomEvent("create-list-closed")); }} > ${isCropping ? html`<div class="form-dialog-content form-dialog-cropper-content sheet-scroll-region" > <div class="form-dialog-header"> <button class="form-dialog-header-button" data-testid="create-list-crop-cancel-button" @click=${() => { this._croppingImageSrc = null; this.render(); }} > Cancel </button> <h2>Edit image</h2> <button class="form-dialog-header-button form-dialog-save-button" data-testid="create-list-crop-apply-button" @click=${() => this._applyCrop()} > Apply </button> </div> <div class="form-dialog-cropper-container"> <image-cropper src="${this._croppingImageSrc}" aspect-ratio="1" shape="rounded-square" ></image-cropper> </div> </div>` : html`<div class="form-dialog-content sheet-scroll-region"> <div class="form-dialog-header"> <button class="form-dialog-header-button" data-testid="create-list-cancel-button" @click=${async () => { if (await this.confirmClose()) { this.close(); } }} .disabled=${this._saving} > Cancel </button> <h2>New list</h2> <button class=${classnames( "form-dialog-header-button form-dialog-save-button", { saving: this._saving }, )} @click=${() => this._save()} .disabled=${!this._canSave} data-testid="create-list-save-button" > <span>Create</span> ${this._saving ? html`<div class="loading-spinner"></div>` : ""} </button> </div>
<div class="form-dialog-body"> <div class="form-dialog-field"> <div class="field-caption">List Avatar</div> <div class="form-dialog-images-section"> <div class="form-dialog-avatar-wrapper" @click=${() => this._openAvatarMenu()} > <div class="form-dialog-avatar-preview"> ${avatarSrc ? html`<img src="${avatarSrc}" alt="Avatar preview" />` : html`<img class="form-dialog-avatar-placeholder" src="/img/list-avatar-fallback.svg" alt="" />`} <div class="form-dialog-image-overlay"></div> </div> <div class="form-dialog-camera-button form-dialog-camera-button-avatar" > <app-icon icon="camera"></app-icon> </div> </div> </div> </div>
<context-menu class="create-list-avatar-menu"> <context-menu-item-group> <context-menu-item data-testid="menu-action-list-avatar-upload" icon="image-line" @click=${() => this._pickImage()} > Upload from Files </context-menu-item> </context-menu-item-group> ${avatarSrc ? html`<context-menu-item-group> <context-menu-item data-testid="menu-action-list-avatar-remove" icon="delete-bin-line" @click=${() => { this._newAvatarDataUrl = null; this.render(); }} > Remove Avatar </context-menu-item> </context-menu-item-group>` : ""} </context-menu>
<div class="form-dialog-field"> <div class="field-caption">List Type</div> <div class="pill-radio-group" data-testid="create-list-purpose" @change=${(event) => { this._purpose = event.target.value; this.render(); }} > <label> <input type="radio" name="create-list-purpose" value=${CURATE_LIST_PURPOSE} ?checked=${this._purpose === CURATE_LIST_PURPOSE} /> User list </label> <label> <input type="radio" name="create-list-purpose" value=${MOD_LIST_PURPOSE} ?checked=${this._purpose === MOD_LIST_PURPOSE} /> Moderation list </label> </div> </div>
<div class="form-dialog-field"> <label for="create-list-name">List Name</label> <input id="create-list-name" type="text" placeholder="e.g. My List" class="form-dialog-input" .value=${this._name} @input=${(event) => { this._name = event.target.value; this.render(); }} data-testid="create-list-name" /> <div class=${classnames("form-dialog-char-count", { overflow: this._isNameTooLong, })} > ${nameCount}/${MAX_NAME_LENGTH} </div> </div>
<div class="form-dialog-field"> <label for="create-list-description">Description</label> <textarea id="create-list-description" class="form-dialog-textarea" .value=${this._description} @input=${(event) => { this._description = event.target.value; this.render(); }} rows="4" data-testid="create-list-description" ></textarea> <div class=${classnames("form-dialog-char-count", { overflow: this._isDescriptionTooLong, })} > ${descriptionCount}/${MAX_DESCRIPTION_LENGTH} </div> </div>
${this._error ? html`<div class="form-dialog-error">${this._error}</div>` : ""} </div> </div>`}
<input type="file" accept="image/*" style="display: none;" class="create-list-file-input" @change=${(event) => this._handleFileSelect(event)} @cancel=${(event) => { event.stopPropagation(); }} /> </dialog>`, this, );
if (this._isOpen) { const dialog = this.querySelector(".create-list-dialog"); if (dialog && !dialog.open) { dialog.showModal(); } } }
_openAvatarMenu() { const menu = this.querySelector(".create-list-avatar-menu"); const cameraButton = this.querySelector( ".form-dialog-camera-button-avatar", ); if (menu && cameraButton) { const rect = cameraButton.getBoundingClientRect(); const x = rect.left + rect.width / 2; const y = rect.bottom; menu.open(x, y); } }
_pickImage() { const input = this.querySelector(".create-list-file-input"); if (input) { input.click(); } }
async _handleFileSelect(event) { const file = event.target.files?.[0]; if (!file || !file.type.startsWith("image/")) { event.target.value = ""; return; }
const dataUrl = await readFileAsDataUrl(file); event.target.value = "";
this._croppingImageSrc = dataUrl; this.render(); }
async _applyCrop() { const cropper = this.querySelector("image-cropper"); if (!cropper) return;
const croppedDataUrl = cropper.cropImage(); if (!croppedDataUrl) return;
this._newAvatarDataUrl = croppedDataUrl; this._croppingImageSrc = null; this.render(); }
async _save() { this._saving = true; this._error = null; this.render();
try { let avatarBlob = null; if (this._newAvatarDataUrl) { const compressed = await new ImageCompressor().compressImage( this._newAvatarDataUrl, ); avatarBlob = compressed.blob; }
const successCallback = () => { this.close(); }; const errorCallback = (error) => { console.error("Failed to create list:", error); this._error = "Failed to create list. Please try again."; this._saving = false; this.render(); };
this.dispatchEvent( new CustomEvent("list-create", { detail: { listData: { purpose: this._purpose, name: this._name, description: this._description, avatarBlob, }, successCallback, errorCallback, }, }), ); } catch (error) { console.error("Error creating list:", error); this._error = "Failed to create list. Please try again."; this._saving = false; this.render(); } }
open() { this._isOpen = true; this.scrollLock ??= scrollLocks.acquire({ target: this }); const dialog = this.querySelector(".create-list-dialog"); if (dialog?.open) return; if (dialog) { dialog.showModal(); this.querySelector("#create-list-name")?.focus({ preventScroll: true }); enableDragToDismiss(dialog, { confirmDismiss: () => this.confirmClose(), onDismiss: () => this.close(), scrollContainer: this.querySelector(".form-dialog-content"), dragHandle: this.querySelector(".form-dialog-header"), ignoreTouchTarget: (el) => !!el.closest("button") || el.tagName === "INPUT" || el.tagName === "TEXTAREA" || !!el.closest("image-cropper"), disableWhenKeyboardOpen: true, });
resetScrollOnBlur(dialog, this.querySelector(".form-dialog-content")); } }
async confirmClose() { if (!this._isDirty || !!this._croppingImageSrc || this._saving) return true; return confirmModal("Are you sure you want to discard this list?", { title: "Discard list?", confirmButtonStyle: "danger", confirmButtonText: "Discard", }); }
close() { this._isOpen = false; return closeWithAnimation(this.querySelector(".create-list-dialog")); }
disconnectedCallback() { this.scrollLock?.release(); this.scrollLock = null; }}
CreateListDialog.register();