@things-factory/gallery 0.0.0-stage → 10.1.226

package/dist-client/pages/gallery-page.js

@@ -0,0 +1,586 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-file.js';
+import '../components/gallery-forms.js';
+import '../components/gallery-uploader.js';
+import '../components/gallery-viewer.js';
+import { css, html, nothing } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { notify, openPopup } from '@operato/layout';
+import { navigate, PageView, store } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+import { isMobileDevice } from '@operato/utils';
+import { hasPrivilege } from '@things-factory/auth-base/dist-client';
+import { galleryApi } from '../utils/gallery-api.js';
+import { refreshGalleryBadge } from '../utils/gallery-badge.js';
+import { day, days, reasonOf, t } from '../utils/gallery-words.js';
+const TABS = ['company', 'events', 'all', 'mine'];
+const PAGE = 30;
+/**
+ * 갤러리 — the company's photos, its events, everyone's, and one's own (ADR-0165 decisions 2, 6). One page: the tabs are
+ * its ways in, and an event, a person or a tag narrows it (`?event=` · `?author=` · `?tag=`; `?post=` opens one post).
+ * Posting takes only photos - 「사진 올리기」, and on a phone 「찍기」 opens the camera at once.
+ */
+let GalleryPage = class GalleryPage extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.tab = 'company';
+        this.posts = [];
+        this.total = 0;
+        this.events = [];
+        this.tags = [];
+        this.loading = false;
+        this.moderator = false;
+        this.onChanged = () => this.load();
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: block;
+        overflow: auto;
+        padding: var(--spacing-large, 12px) var(--spacing-large, 16px);
+        box-sizing: border-box;
+        background: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+      .tabs {
+        display: flex;
+        gap: var(--spacing-small, 4px);
+        overflow-x: auto;
+        margin-bottom: var(--spacing-medium, 8px);
+      }
+      .tabs button {
+        flex: none;
+        padding: 4px var(--spacing-large, 12px);
+        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+        border-radius: 999px;
+        background: none;
+        color: var(--md-sys-color-on-surface);
+        font: inherit;
+        font-size: var(--ui-t-body, 14px);
+        cursor: pointer;
+      }
+      .tabs button[aria-selected='true'] {
+        border-color: var(--md-sys-color-primary);
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+      }
+      .narrow {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        margin-bottom: var(--spacing-medium, 8px);
+      }
+      .narrow h2 {
+        margin: 0;
+        font-size: var(--ui-t-title, 18px);
+      }
+      .narrow .muted {
+        font-size: var(--ui-t-small, 12px);
+      }
+      .chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-small, 4px);
+        margin-bottom: var(--spacing-medium, 8px);
+      }
+      .chip,
+      .link {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 2px var(--spacing-medium, 8px);
+        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+        border-radius: 999px;
+        background: none;
+        color: var(--md-sys-color-on-surface);
+        font: inherit;
+        font-size: var(--ui-t-small, 12px);
+        line-height: 1.6;
+        cursor: pointer;
+      }
+      .chip[aria-pressed='true'] {
+        border-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-primary);
+      }
+      .chip md-icon,
+      .link md-icon {
+        --md-icon-size: 14px;
+      }
+      .link {
+        border: 0;
+        padding: 0;
+        color: var(--md-sys-color-primary);
+      }
+      .muted {
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        gap: var(--spacing-medium, 8px);
+      }
+      .card {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding: 0;
+        border: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: start;
+        cursor: pointer;
+        min-width: 0;
+      }
+      .picture {
+        position: relative;
+        width: 100%;
+        aspect-ratio: 1;
+        border-radius: var(--border-radius, 6px);
+        overflow: hidden;
+        background: var(--md-sys-color-surface-container-high);
+      }
+      .picture img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+        transition: transform 160ms ease-out;
+      }
+      .card:hover .picture img {
+        transform: scale(1.03);
+      }
+      .badge {
+        position: absolute;
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 0 6px;
+        border-radius: 999px;
+        background: rgb(0 0 0 / 50%);
+        color: #fff;
+        font-size: var(--ui-t-small, 12px);
+        line-height: 1.6;
+      }
+      .badge md-icon {
+        --md-icon-size: 14px;
+      }
+      .badge.likes {
+        bottom: 4px;
+        inset-inline-start: 4px;
+      }
+      .badge.likes md-icon {
+        font-variation-settings: 'FILL' 0;
+      }
+      .badge.likes[liked] md-icon {
+        color: #ff6b6b;
+        font-variation-settings: 'FILL' 1;
+      }
+      .badge.count {
+        top: 4px;
+        inset-inline-end: 4px;
+      }
+      .badge.hidden {
+        top: 4px;
+        inset-inline-start: 4px;
+        background: var(--md-sys-color-error);
+      }
+      .under {
+        display: flex;
+        gap: var(--spacing-small, 4px);
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .under .name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .title {
+        font-size: var(--ui-t-body, 14px);
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+        padding: 48px var(--spacing-large, 16px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+        text-align: center;
+      }
+      .empty md-icon {
+        --md-icon-size: 40px;
+      }
+      .empty button,
+      .more {
+        padding: 6px var(--spacing-large, 16px);
+        border: 1px solid var(--md-sys-color-primary);
+        border-radius: 999px;
+        background: none;
+        color: var(--md-sys-color-primary);
+        font: inherit;
+        cursor: pointer;
+      }
+      .more {
+        display: block;
+        margin: var(--spacing-large, 16px) auto 0;
+      }
+      ox-input-file {
+        display: none;
+      }
+      @media (max-width: 460px) {
+        :host {
+          padding: var(--spacing-medium, 8px);
+        }
+        .grid {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          gap: var(--spacing-small, 4px);
+        }
+      }
+    `
+    ]; }
+    get me() {
+        return store.getState().auth?.user?.id;
+    }
+    get context() {
+        const actions = [];
+        if (this.tag && this.moderator)
+            actions.push({ title: t('gallery.button.rename-tag'), icon: 'sell', action: () => this.renameTag() });
+        if (this.tab === 'events' && !this.eventId && this.moderator)
+            actions.push({ title: t('gallery.button.create-event'), icon: 'event', action: () => this.makeEvent() });
+        if (this.tab !== 'events' || this.eventId) {
+            if (isMobileDevice())
+                actions.push({ title: t('gallery.button.shoot'), icon: 'photo_camera', action: () => this.camera?.pick() });
+            actions.push({
+                title: t('gallery.button.post'),
+                icon: 'add_photo_alternate',
+                emphasis: { raised: true },
+                action: () => this.picker?.pick()
+            });
+        }
+        return { title: t('gallery.title.page'), actions };
+    }
+    render() {
+        return html `
+      <ox-input-file
+        id="pick"
+        quiet
+        outside-trigger
+        hide-filelist
+        multiple
+        accept="image/*"
+        @change=${(e) => this.picked(e)}
+      ></ox-input-file>
+      <ox-input-file
+        id="shoot"
+        quiet
+        outside-trigger
+        hide-filelist
+        accept="image/*"
+        capture="environment"
+        @change=${(e) => this.picked(e)}
+      ></ox-input-file>
+      <div class="tabs" role="tablist">
+        ${TABS.map(tab => html `<button role="tab" aria-selected=${String(this.tab === tab && !this.narrowed)} @click=${() => navigate(`gallery-page?tab=${tab}`)}>${t(`gallery.tab.${tab}`)}</button>`)}
+      </div>
+      ${this.renderNarrowing()} ${this.tab === 'events' && !this.eventId ? this.renderEvents() : this.renderPosts()}
+    `;
+    }
+    get narrowed() {
+        return !!(this.eventId || this.tag || (this.authorId && this.authorId !== this.me));
+    }
+    renderNarrowing() {
+        if (this.eventId) {
+            const event = this.event;
+            return html `<div class="narrow">
+        <h2>${event?.name ?? ''}</h2>
+        ${event ? html `<span class="muted">${days(event.startAt, event.endAt)}${event.location ? ` · ${event.location}` : ''}</span>` : nothing}
+        <button class="link" @click=${() => navigate('gallery-page?tab=events')}>
+          <md-icon>arrow_back</md-icon>${t('gallery.tab.events')}
+        </button>
+      </div>`;
+        }
+        if (this.authorId && this.authorId !== this.me) {
+            const name = this.posts[0]?.creator?.name ?? '';
+            return html `<div class="narrow"><h2>${t('gallery.text.persons-gallery', { name })}</h2></div>`;
+        }
+        if (this.tag) {
+            return html `<div class="narrow">
+        <h2>#${this.tag}</h2>
+        <button class="link" @click=${() => navigate(`gallery-page?tab=${this.tab}`)}>
+          <md-icon>close</md-icon>${t('gallery.button.clear')}
+        </button>
+      </div>`;
+        }
+        if (this.tab === 'events' || !this.tags.length)
+            return nothing;
+        return html `<div class="chips">
+      ${this.tags.map(one => html `<button class="chip" @click=${() => navigate(`gallery-page?tab=${this.tab}&tag=${encodeURIComponent(one.tag)}`)}>#${one.tag}</button>`)}
+    </div>`;
+    }
+    renderPosts() {
+        if (!this.posts.length) {
+            return this.loading
+                ? nothing
+                : html `<div class="empty">
+            <md-icon>photo_library</md-icon>
+            <div>
+              ${this.eventId ? t('gallery.text.empty-event') : this.tab === 'mine' ? t('gallery.text.empty-mine') : t('gallery.text.empty')}
+            </div>
+            <button @click=${() => this.picker?.pick()}>${t('gallery.button.post')}</button>
+          </div>`;
+        }
+        return html `<div class="grid">
+        ${this.posts.map(post => html `<button class="card" @click=${() => this.open(post)}>
+              <div class="picture">
+                ${post.photos[0] ? html `<img loading="lazy" src=${post.photos[0].thumbnail || post.photos[0].fullpath} alt=${post.caption ?? ''} />` : nothing}
+                ${post.hiddenAt ? html `<span class="badge hidden"><md-icon>visibility_off</md-icon>${t('gallery.text.hidden')}</span>` : nothing}
+                ${post.photos.length > 1 ? html `<span class="badge count"><md-icon>photo_library</md-icon>${post.photos.length}</span>` : nothing}
+                ${post.likeCount || post.liked ? html `<span class="badge likes" ?liked=${post.liked}><md-icon>favorite</md-icon>${post.likeCount}</span>` : nothing}
+              </div>
+              <div class="under">
+                <span class="name">${post.creator?.name ?? ''}</span><span>·</span><span>${day(post.takenAt)}</span>
+              </div>
+            </button>`)}
+      </div>
+      ${this.posts.length < this.total ? html `<button class="more" ?disabled=${this.loading} @click=${() => this.load(true)}>${t('gallery.button.more')}</button>` : nothing}`;
+    }
+    renderEvents() {
+        if (!this.events.length) {
+            return this.loading
+                ? nothing
+                : html `<div class="empty">
+            <md-icon>event</md-icon>
+            <div>${t('gallery.text.empty-events')}</div>
+            ${this.moderator ? html `<button @click=${() => this.makeEvent()}>${t('gallery.button.create-event')}</button>` : nothing}
+          </div>`;
+        }
+        return html `<div class="grid">
+      ${this.events.map(event => html `<button class="card" @click=${() => navigate(`gallery-page?event=${event.id}`)}>
+            <div class="picture">
+              ${event.cover ? html `<img loading="lazy" src=${event.cover.thumbnail || event.cover.fullpath} alt="" />` : nothing}
+              <span class="badge count"><md-icon>photo_library</md-icon>${event.postCount}</span>
+            </div>
+            <div class="title">${event.name}</div>
+            <div class="under">
+              <span>${days(event.startAt, event.endAt)}</span
+              >${event.location ? html `<span>·</span><span class="name">${event.location}</span>` : nothing}
+            </div>
+          </button>`)}
+    </div>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('gallery-changed', this.onChanged);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('gallery-changed', this.onChanged);
+        super.disconnectedCallback();
+    }
+    async pageInitialized() {
+        hasPrivilege({ category: 'gallery', privilege: 'mutation', domainOwnerGranted: true }).then(moderator => {
+            this.moderator = !!moderator;
+            this.updateContext();
+        });
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (!this.active || !(changes.active || changes.params))
+            return;
+        const params = lifecycle?.params ?? {};
+        this.eventId = params.event || undefined;
+        this.tag = params.tag || undefined;
+        this.authorId = params.author === 'me' ? this.me : params.author || undefined;
+        this.tab = this.eventId
+            ? 'events'
+            : this.authorId === this.me && this.authorId
+                ? 'mine'
+                : TABS.includes(params.tab)
+                    ? params.tab
+                    : 'company';
+        this.event = undefined;
+        this.posts = [];
+        this.updateContext();
+        await this.load();
+        if (params.post)
+            this.openById(params.post);
+        galleryApi
+            .visit()
+            .then(() => refreshGalleryBadge())
+            .catch(() => { });
+    }
+    filter() {
+        if (this.eventId)
+            return { eventId: this.eventId };
+        const filter = {};
+        if (this.tag)
+            filter.tag = this.tag;
+        if (this.authorId)
+            filter.authorId = this.authorId;
+        else if (this.tab === 'company')
+            filter.space = 'COMPANY';
+        else if (this.tab === 'mine' && this.me)
+            filter.authorId = this.me;
+        return filter;
+    }
+    async load(more = false) {
+        this.loading = true;
+        try {
+            if (this.tab === 'events' && !this.eventId) {
+                this.events = await galleryApi.events();
+                return;
+            }
+            const page = await galleryApi.posts(this.filter(), more ? this.posts.length : 0, PAGE);
+            this.posts = more ? [...this.posts, ...page.items] : page.items;
+            this.total = page.total;
+            if (this.eventId && !this.event)
+                this.event =
+                    page.items.find(one => one.event)?.event ?? (await galleryApi.events()).find(one => one.id === this.eventId);
+            if (!more && !this.narrowed)
+                this.tags = (await galleryApi.tags()).slice(0, 12);
+        }
+        catch (error) {
+            notify({ level: 'error', message: reasonOf(error) });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /** Where a new post goes - the screen it is posted from. */
+    preset() {
+        if (this.eventId)
+            return { space: 'COMPANY', eventId: this.eventId };
+        return { space: this.tab === 'mine' ? 'PERSONAL' : 'COMPANY' };
+    }
+    picked(e) {
+        const files = [...(e.detail ?? [])];
+        /* The picker's own reset says `change` again, with nothing - that one is let go. */
+        if (!files.length)
+            return;
+        e.target.reset?.();
+        this.upload(files);
+    }
+    upload(files = [], post) {
+        const { space, eventId } = this.preset();
+        const popup = openPopup(html `<gallery-uploader
+        .files=${files}
+        .post=${post}
+        space=${space}
+        .eventId=${eventId ?? null}
+        @done=${() => popup.close()}
+      ></gallery-uploader>`, { backdrop: true, size: 'large', title: post ? t('gallery.title.edit') : t('gallery.title.post') });
+    }
+    /* A popup closes by going back in the history: where to go next is taken once it is gone (`result`). */
+    async open(post) {
+        const popup = openPopup(html `<gallery-viewer
+        .post=${post}
+        @done=${(e) => popup.close(e.detail)}
+        @gallery-liked=${(e) => this.replace(e.detail)}
+      ></gallery-viewer>`, { backdrop: true, size: 'large', title: post.event?.name || post.creator?.name || t('gallery.title.page') });
+        const next = await popup.result;
+        if (next?.edit)
+            this.upload([], next.edit);
+        else if (next?.go)
+            navigate(next.go);
+    }
+    async openById(id) {
+        try {
+            const post = this.posts.find(one => one.id === id) ?? (await galleryApi.post(id));
+            if (post)
+                this.open(post);
+            else
+                notify({ level: 'warn', message: t('gallery.text.unknown-post') });
+        }
+        catch (error) {
+            notify({ level: 'error', message: reasonOf(error) });
+        }
+    }
+    replace(post) {
+        this.posts = this.posts.map(one => (one.id === post.id ? post : one));
+    }
+    async makeEvent() {
+        const popup = openPopup(html `<gallery-event-form @done=${(e) => popup.close(e.detail)}></gallery-event-form>`, {
+            backdrop: true,
+            size: 'medium',
+            title: t('gallery.button.create-event')
+        });
+        const made = await popup.result;
+        if (made?.id)
+            navigate(`gallery-page?event=${made.id}`);
+    }
+    async renameTag() {
+        const popup = openPopup(html `<gallery-tag-form .tag=${this.tag} @done=${(e) => popup.close(e.detail)}></gallery-tag-form>`, {
+            backdrop: true,
+            size: 'small',
+            title: t('gallery.button.rename-tag')
+        });
+        const to = await popup.result;
+        if (to)
+            navigate(`gallery-page?tab=${this.tab}&tag=${encodeURIComponent(to)}`);
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], GalleryPage.prototype, "tab", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], GalleryPage.prototype, "eventId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], GalleryPage.prototype, "authorId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], GalleryPage.prototype, "tag", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryPage.prototype, "posts", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryPage.prototype, "total", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryPage.prototype, "events", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryPage.prototype, "tags", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryPage.prototype, "event", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryPage.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryPage.prototype, "moderator", void 0);
+__decorate([
+    query('#pick'),
+    __metadata("design:type", Object)
+], GalleryPage.prototype, "picker", void 0);
+__decorate([
+    query('#shoot'),
+    __metadata("design:type", Object)
+], GalleryPage.prototype, "camera", void 0);
+GalleryPage = __decorate([
+    customElement('gallery-page')
+], GalleryPage);
+export { GalleryPage };
+//# sourceMappingURL=gallery-page.js.map

package/dist-client/pages/gallery-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery-page.js","sourceRoot":"","sources":["../../client/pages/gallery-page.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/input/ox-input-file.js'\nimport '../components/gallery-forms.js'\nimport '../components/gallery-uploader.js'\nimport '../components/gallery-viewer.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { notify, openPopup } from '@operato/layout'\nimport { navigate, PageView, store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { isMobileDevice } from '@operato/utils'\nimport { hasPrivilege } from '@things-factory/auth-base/dist-client'\n\nimport {\n  galleryApi,\n  type EventCard,\n  type EventFacts,\n  type Filter,\n  type Post,\n  type Space\n} from '../utils/gallery-api.js'\nimport { refreshGalleryBadge } from '../utils/gallery-badge.js'\nimport { day, days, reasonOf, t } from '../utils/gallery-words.js'\n\ntype Tab = 'company' | 'events' | 'all' | 'mine'\nconst TABS: Tab[] = ['company', 'events', 'all', 'mine']\nconst PAGE = 30\n\n/**\n * 갤러리 — the company's photos, its events, everyone's, and one's own (ADR-0165 decisions 2, 6). One page: the tabs are\n * its ways in, and an event, a person or a tag narrows it (`?event=` · `?author=` · `?tag=`; `?post=` opens one post).\n * Posting takes only photos - 「사진 올리기」, and on a phone 「찍기」 opens the camera at once.\n */\n@customElement('gallery-page')\nexport class GalleryPage extends localize(i18next)(PageView) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n        overflow: auto;\n        padding: var(--spacing-large, 12px) var(--spacing-large, 16px);\n        box-sizing: border-box;\n        background: var(--md-sys-color-surface);\n        color: var(--md-sys-color-on-surface);\n      }\n      .tabs {\n        display: flex;\n        gap: var(--spacing-small, 4px);\n        overflow-x: auto;\n        margin-bottom: var(--spacing-medium, 8px);\n      }\n      .tabs button {\n        flex: none;\n        padding: 4px var(--spacing-large, 12px);\n        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n        border-radius: 999px;\n        background: none;\n        color: var(--md-sys-color-on-surface);\n        font: inherit;\n        font-size: var(--ui-t-body, 14px);\n        cursor: pointer;\n      }\n      .tabs button[aria-selected='true'] {\n        border-color: var(--md-sys-color-primary);\n        background: var(--md-sys-color-primary-container);\n        color: var(--md-sys-color-on-primary-container);\n      }\n      .narrow {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: baseline;\n        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);\n        margin-bottom: var(--spacing-medium, 8px);\n      }\n      .narrow h2 {\n        margin: 0;\n        font-size: var(--ui-t-title, 18px);\n      }\n      .narrow .muted {\n        font-size: var(--ui-t-small, 12px);\n      }\n      .chips {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--spacing-small, 4px);\n        margin-bottom: var(--spacing-medium, 8px);\n      }\n      .chip,\n      .link {\n        display: inline-flex;\n        align-items: center;\n        gap: 2px;\n        padding: 2px var(--spacing-medium, 8px);\n        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));\n        border-radius: 999px;\n        background: none;\n        color: var(--md-sys-color-on-surface);\n        font: inherit;\n        font-size: var(--ui-t-small, 12px);\n        line-height: 1.6;\n        cursor: pointer;\n      }\n      .chip[aria-pressed='true'] {\n        border-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-primary);\n      }\n      .chip md-icon,\n      .link md-icon {\n        --md-icon-size: 14px;\n      }\n      .link {\n        border: 0;\n        padding: 0;\n        color: var(--md-sys-color-primary);\n      }\n      .muted {\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n      }\n      .grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n        gap: var(--spacing-medium, 8px);\n      }\n      .card {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        padding: 0;\n        border: 0;\n        background: none;\n        color: inherit;\n        font: inherit;\n        text-align: start;\n        cursor: pointer;\n        min-width: 0;\n      }\n      .picture {\n        position: relative;\n        width: 100%;\n        aspect-ratio: 1;\n        border-radius: var(--border-radius, 6px);\n        overflow: hidden;\n        background: var(--md-sys-color-surface-container-high);\n      }\n      .picture img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n        display: block;\n        transition: transform 160ms ease-out;\n      }\n      .card:hover .picture img {\n        transform: scale(1.03);\n      }\n      .badge {\n        position: absolute;\n        display: inline-flex;\n        align-items: center;\n        gap: 2px;\n        padding: 0 6px;\n        border-radius: 999px;\n        background: rgb(0 0 0 / 50%);\n        color: #fff;\n        font-size: var(--ui-t-small, 12px);\n        line-height: 1.6;\n      }\n      .badge md-icon {\n        --md-icon-size: 14px;\n      }\n      .badge.likes {\n        bottom: 4px;\n        inset-inline-start: 4px;\n      }\n      .badge.likes md-icon {\n        font-variation-settings: 'FILL' 0;\n      }\n      .badge.likes[liked] md-icon {\n        color: #ff6b6b;\n        font-variation-settings: 'FILL' 1;\n      }\n      .badge.count {\n        top: 4px;\n        inset-inline-end: 4px;\n      }\n      .badge.hidden {\n        top: 4px;\n        inset-inline-start: 4px;\n        background: var(--md-sys-color-error);\n      }\n      .under {\n        display: flex;\n        gap: var(--spacing-small, 4px);\n        font-size: var(--ui-t-small, 12px);\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n        overflow: hidden;\n        white-space: nowrap;\n      }\n      .under .name {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .title {\n        font-size: var(--ui-t-body, 14px);\n        font-weight: 600;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .empty {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: var(--spacing-medium, 8px);\n        padding: 48px var(--spacing-large, 16px);\n        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));\n        text-align: center;\n      }\n      .empty md-icon {\n        --md-icon-size: 40px;\n      }\n      .empty button,\n      .more {\n        padding: 6px var(--spacing-large, 16px);\n        border: 1px solid var(--md-sys-color-primary);\n        border-radius: 999px;\n        background: none;\n        color: var(--md-sys-color-primary);\n        font: inherit;\n        cursor: pointer;\n      }\n      .more {\n        display: block;\n        margin: var(--spacing-large, 16px) auto 0;\n      }\n      ox-input-file {\n        display: none;\n      }\n      @media (max-width: 460px) {\n        :host {\n          padding: var(--spacing-medium, 8px);\n        }\n        .grid {\n          grid-template-columns: repeat(2, minmax(0, 1fr));\n          gap: var(--spacing-small, 4px);\n        }\n      }\n    `\n  ]\n\n  @state() private tab: Tab = 'company'\n  @state() private eventId?: string\n  @state() private authorId?: string\n  @state() private tag?: string\n  @state() private posts: Post[] = []\n  @state() private total = 0\n  @state() private events: EventCard[] = []\n  @state() private tags: { tag: string; count: number }[] = []\n  @state() private event?: EventFacts\n  @state() private loading = false\n  @state() private moderator = false\n\n  @query('#pick') private picker!: any\n  @query('#shoot') private camera!: any\n\n  private onChanged = () => this.load()\n\n  private get me(): string | undefined {\n    return (store.getState() as any).auth?.user?.id\n  }\n\n  get context() {\n    const actions: any[] = []\n    if (this.tag && this.moderator)\n      actions.push({ title: t('gallery.button.rename-tag'), icon: 'sell', action: () => this.renameTag() })\n    if (this.tab === 'events' && !this.eventId && this.moderator)\n      actions.push({ title: t('gallery.button.create-event'), icon: 'event', action: () => this.makeEvent() })\n    if (this.tab !== 'events' || this.eventId) {\n      if (isMobileDevice())\n        actions.push({ title: t('gallery.button.shoot'), icon: 'photo_camera', action: () => this.camera?.pick() })\n      actions.push({\n        title: t('gallery.button.post'),\n        icon: 'add_photo_alternate',\n        emphasis: { raised: true },\n        action: () => this.picker?.pick()\n      })\n    }\n    return { title: t('gallery.title.page'), actions }\n  }\n\n  render() {\n    return html`\n      <ox-input-file\n        id=\"pick\"\n        quiet\n        outside-trigger\n        hide-filelist\n        multiple\n        accept=\"image/*\"\n        @change=${(e: CustomEvent) => this.picked(e)}\n      ></ox-input-file>\n      <ox-input-file\n        id=\"shoot\"\n        quiet\n        outside-trigger\n        hide-filelist\n        accept=\"image/*\"\n        capture=\"environment\"\n        @change=${(e: CustomEvent) => this.picked(e)}\n      ></ox-input-file>\n      <div class=\"tabs\" role=\"tablist\">\n        ${TABS.map(tab => html`<button role=\"tab\" aria-selected=${String(this.tab === tab && !this.narrowed)} @click=${() => navigate(`gallery-page?tab=${tab}`)}>${t(`gallery.tab.${tab}`)}</button>`)}\n      </div>\n      ${this.renderNarrowing()} ${this.tab === 'events' && !this.eventId ? this.renderEvents() : this.renderPosts()}\n    `\n  }\n\n  private get narrowed() {\n    return !!(this.eventId || this.tag || (this.authorId && this.authorId !== this.me))\n  }\n\n  private renderNarrowing() {\n    if (this.eventId) {\n      const event = this.event\n      return html`<div class=\"narrow\">\n        <h2>${event?.name ?? ''}</h2>\n        ${event ? html`<span class=\"muted\">${days(event.startAt, event.endAt)}${event.location ? ` · ${event.location}` : ''}</span>` : nothing}\n        <button class=\"link\" @click=${() => navigate('gallery-page?tab=events')}>\n          <md-icon>arrow_back</md-icon>${t('gallery.tab.events')}\n        </button>\n      </div>`\n    }\n    if (this.authorId && this.authorId !== this.me) {\n      const name = this.posts[0]?.creator?.name ?? ''\n      return html`<div class=\"narrow\"><h2>${t('gallery.text.persons-gallery', { name })}</h2></div>`\n    }\n    if (this.tag) {\n      return html`<div class=\"narrow\">\n        <h2>#${this.tag}</h2>\n        <button class=\"link\" @click=${() => navigate(`gallery-page?tab=${this.tab}`)}>\n          <md-icon>close</md-icon>${t('gallery.button.clear')}\n        </button>\n      </div>`\n    }\n    if (this.tab === 'events' || !this.tags.length) return nothing\n    return html`<div class=\"chips\">\n      ${this.tags.map(one => html`<button class=\"chip\" @click=${() => navigate(`gallery-page?tab=${this.tab}&tag=${encodeURIComponent(one.tag)}`)}>#${one.tag}</button>`)}\n    </div>`\n  }\n\n  private renderPosts() {\n    if (!this.posts.length) {\n      return this.loading\n        ? nothing\n        : html`<div class=\"empty\">\n            <md-icon>photo_library</md-icon>\n            <div>\n              ${this.eventId ? t('gallery.text.empty-event') : this.tab === 'mine' ? t('gallery.text.empty-mine') : t('gallery.text.empty')}\n            </div>\n            <button @click=${() => this.picker?.pick()}>${t('gallery.button.post')}</button>\n          </div>`\n    }\n    return html`<div class=\"grid\">\n        ${this.posts.map(\n          post =>\n            html`<button class=\"card\" @click=${() => this.open(post)}>\n              <div class=\"picture\">\n                ${post.photos[0] ? html`<img loading=\"lazy\" src=${post.photos[0].thumbnail || post.photos[0].fullpath} alt=${post.caption ?? ''} />` : nothing}\n                ${post.hiddenAt ? html`<span class=\"badge hidden\"><md-icon>visibility_off</md-icon>${t('gallery.text.hidden')}</span>` : nothing}\n                ${post.photos.length > 1 ? html`<span class=\"badge count\"><md-icon>photo_library</md-icon>${post.photos.length}</span>` : nothing}\n                ${post.likeCount || post.liked ? html`<span class=\"badge likes\" ?liked=${post.liked}><md-icon>favorite</md-icon>${post.likeCount}</span>` : nothing}\n              </div>\n              <div class=\"under\">\n                <span class=\"name\">${post.creator?.name ?? ''}</span><span>·</span><span>${day(post.takenAt)}</span>\n              </div>\n            </button>`\n        )}\n      </div>\n      ${this.posts.length < this.total ? html`<button class=\"more\" ?disabled=${this.loading} @click=${() => this.load(true)}>${t('gallery.button.more')}</button>` : nothing}`\n  }\n\n  private renderEvents() {\n    if (!this.events.length) {\n      return this.loading\n        ? nothing\n        : html`<div class=\"empty\">\n            <md-icon>event</md-icon>\n            <div>${t('gallery.text.empty-events')}</div>\n            ${this.moderator ? html`<button @click=${() => this.makeEvent()}>${t('gallery.button.create-event')}</button>` : nothing}\n          </div>`\n    }\n    return html`<div class=\"grid\">\n      ${this.events.map(\n        event =>\n          html`<button class=\"card\" @click=${() => navigate(`gallery-page?event=${event.id}`)}>\n            <div class=\"picture\">\n              ${event.cover ? html`<img loading=\"lazy\" src=${event.cover.thumbnail || event.cover.fullpath} alt=\"\" />` : nothing}\n              <span class=\"badge count\"><md-icon>photo_library</md-icon>${event.postCount}</span>\n            </div>\n            <div class=\"title\">${event.name}</div>\n            <div class=\"under\">\n              <span>${days(event.startAt, event.endAt)}</span\n              >${event.location ? html`<span>·</span><span class=\"name\">${event.location}</span>` : nothing}\n            </div>\n          </button>`\n      )}\n    </div>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    window.addEventListener('gallery-changed', this.onChanged)\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('gallery-changed', this.onChanged)\n    super.disconnectedCallback()\n  }\n\n  async pageInitialized() {\n    hasPrivilege({ category: 'gallery', privilege: 'mutation', domainOwnerGranted: true }).then(moderator => {\n      this.moderator = !!moderator\n      this.updateContext()\n    })\n  }\n\n  async pageUpdated(changes: any, lifecycle: any) {\n    if (!this.active || !(changes.active || changes.params)) return\n    const params = lifecycle?.params ?? {}\n    this.eventId = params.event || undefined\n    this.tag = params.tag || undefined\n    this.authorId = params.author === 'me' ? this.me : params.author || undefined\n    this.tab = this.eventId\n      ? 'events'\n      : this.authorId === this.me && this.authorId\n        ? 'mine'\n        : TABS.includes(params.tab)\n          ? params.tab\n          : 'company'\n    this.event = undefined\n    this.posts = []\n    this.updateContext()\n    await this.load()\n    if (params.post) this.openById(params.post)\n    galleryApi\n      .visit()\n      .then(() => refreshGalleryBadge())\n      .catch(() => {})\n  }\n\n  private filter(): Filter {\n    if (this.eventId) return { eventId: this.eventId }\n    const filter: Filter = {}\n    if (this.tag) filter.tag = this.tag\n    if (this.authorId) filter.authorId = this.authorId\n    else if (this.tab === 'company') filter.space = 'COMPANY'\n    else if (this.tab === 'mine' && this.me) filter.authorId = this.me\n    return filter\n  }\n\n  private async load(more = false) {\n    this.loading = true\n    try {\n      if (this.tab === 'events' && !this.eventId) {\n        this.events = await galleryApi.events()\n        return\n      }\n      const page = await galleryApi.posts(this.filter(), more ? this.posts.length : 0, PAGE)\n      this.posts = more ? [...this.posts, ...page.items] : page.items\n      this.total = page.total\n      if (this.eventId && !this.event)\n        this.event =\n          page.items.find(one => one.event)?.event ?? (await galleryApi.events()).find(one => one.id === this.eventId)\n      if (!more && !this.narrowed) this.tags = (await galleryApi.tags()).slice(0, 12)\n    } catch (error) {\n      notify({ level: 'error', message: reasonOf(error) })\n    } finally {\n      this.loading = false\n    }\n  }\n\n  /** Where a new post goes - the screen it is posted from. */\n  private preset(): { space: Space; eventId?: string } {\n    if (this.eventId) return { space: 'COMPANY', eventId: this.eventId }\n    return { space: this.tab === 'mine' ? 'PERSONAL' : 'COMPANY' }\n  }\n\n  private picked(e: CustomEvent) {\n    const files = [...((e.detail as File[]) ?? [])]\n    /* The picker's own reset says `change` again, with nothing - that one is let go. */\n    if (!files.length) return\n    ;(e.target as any).reset?.()\n    this.upload(files)\n  }\n\n  private upload(files: File[] = [], post?: Post) {\n    const { space, eventId } = this.preset()\n    const popup: any = openPopup(\n      html`<gallery-uploader\n        .files=${files}\n        .post=${post}\n        space=${space}\n        .eventId=${eventId ?? null}\n        @done=${() => popup.close()}\n      ></gallery-uploader>`,\n      { backdrop: true, size: 'large', title: post ? t('gallery.title.edit') : t('gallery.title.post') }\n    )\n  }\n\n  /* A popup closes by going back in the history: where to go next is taken once it is gone (`result`). */\n  private async open(post: Post) {\n    const popup: any = openPopup(\n      html`<gallery-viewer\n        .post=${post}\n        @done=${(e: CustomEvent) => popup.close(e.detail)}\n        @gallery-liked=${(e: CustomEvent) => this.replace(e.detail)}\n      ></gallery-viewer>`,\n      { backdrop: true, size: 'large', title: post.event?.name || post.creator?.name || t('gallery.title.page') }\n    )\n    const next = await popup.result\n    if (next?.edit) this.upload([], next.edit)\n    else if (next?.go) navigate(next.go)\n  }\n\n  private async openById(id: string) {\n    try {\n      const post = this.posts.find(one => one.id === id) ?? (await galleryApi.post(id))\n      if (post) this.open(post)\n      else notify({ level: 'warn', message: t('gallery.text.unknown-post') })\n    } catch (error) {\n      notify({ level: 'error', message: reasonOf(error) })\n    }\n  }\n\n  private replace(post: Post) {\n    this.posts = this.posts.map(one => (one.id === post.id ? post : one))\n  }\n\n  private async makeEvent() {\n    const popup: any = openPopup(\n      html`<gallery-event-form @done=${(e: CustomEvent) => popup.close(e.detail)}></gallery-event-form>`,\n      {\n        backdrop: true,\n        size: 'medium',\n        title: t('gallery.button.create-event')\n      }\n    )\n    const made = await popup.result\n    if (made?.id) navigate(`gallery-page?event=${made.id}`)\n  }\n\n  private async renameTag() {\n    const popup: any = openPopup(\n      html`<gallery-tag-form .tag=${this.tag} @done=${(e: CustomEvent) => popup.close(e.detail)}></gallery-tag-form>`,\n      {\n        backdrop: true,\n        size: 'small',\n        title: t('gallery.button.rename-tag')\n      }\n    )\n    const to = await popup.result\n    if (to) navigate(`gallery-page?tab=${this.tab}&tag=${encodeURIComponent(to)}`)\n  }\n}\n"]}

package/dist-client/route.d.ts

@@ -0,0 +1 @@
+export default function route(page: string): "gallery-page" | undefined;

package/dist-client/route.js

@@ -0,0 +1,9 @@
+/* The page this module brings to an application that puts it in its menu (ADR-0165 decision 6). */
+export default function route(page) {
+    switch (page) {
+        case 'gallery-page':
+            import('./pages/gallery-page.js');
+            return page;
+    }
+}
+//# sourceMappingURL=route.js.map