@dosgato/dialog 0.0.1

package/chooser/Asset.svelte

@@ -0,0 +1,77 @@
+<script >import { modifierKey } from '@txstate-mws/svelte-components';
+import { createEventDispatcher, getContext } from 'svelte';
+import { hashid } from 'txstate-utils';
+import { ASSET_STORE_CONTEXT } from './ChooserStore';
+import FileIcon from '../FileIcon.svelte';
+export let asset;
+export let level;
+export let posinset;
+export let setsize;
+export let next;
+export let prev;
+export let parent = undefined;
+const store = getContext(ASSET_STORE_CONTEXT);
+$: id = hashid(asset.id);
+$: haveFocus = $store?.focus === asset.id;
+$: isPreview = $store.preview?.id === asset.id;
+const dispatch = createEventDispatcher();
+function onKeyDown(e) {
+    if (modifierKey(e))
+        return;
+    if (['Enter', ' '].includes(e.key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        if ($store.preview?.id === asset.id)
+            dispatch('choose', asset);
+        else
+            store.preview(asset);
+    }
+    else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (next) {
+            store.setFocus(next);
+            document.getElementById(hashid(next.id)).focus();
+        }
+    }
+    else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        const anyprev = prev;
+        const myprev = anyprev?.open && anyprev.children?.length && anyprev.path === asset.path ? anyprev.children[anyprev.children.length - 1] : prev;
+        if (myprev) {
+            store.setFocus(myprev);
+            document.getElementById(hashid(myprev.id)).focus();
+        }
+    }
+    else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (parent) {
+            store.setFocus(parent);
+            document.getElementById(hashid(parent.id)).focus();
+        }
+    }
+}
+</script>
+
+<li
+  {id}
+  role="treeitem"
+  tabindex={haveFocus ? 0 : -1}
+  aria-setsize={setsize}
+  aria-posinset={posinset}
+  aria-level={level}
+  class="dialog-asset-file"
+  class:isPreview
+  on:keydown={onKeyDown}
+  on:click={() => store.preview(asset)}
+>
+  <FileIcon mime={asset.mime} inline /> {asset.name}
+</li>
+
+<style>
+  li {
+    cursor: pointer;
+  }
+</style>

package/chooser/Asset.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { UIAsset, UIFolder, AnyUIItem } from './ChooserStore';
+declare const __propDef: {
+    props: {
+        asset: UIAsset;
+        level: number;
+        posinset: number;
+        setsize: number;
+        next: AnyUIItem | undefined;
+        prev: AnyUIItem | undefined;
+        parent?: UIFolder | undefined;
+    };
+    events: {
+        choose: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AssetProps = typeof __propDef.props;
+export declare type AssetEvents = typeof __propDef.events;
+export declare type AssetSlots = typeof __propDef.slots;
+export default class Asset extends SvelteComponentTyped<AssetProps, AssetEvents, AssetSlots> {
+}
+export {};

package/chooser/AssetFolder.svelte

@@ -0,0 +1,124 @@
+<script >import folderOutline from '@iconify/icons-mdi/folder-outline.js';
+import folderOpenOutline from '@iconify/icons-mdi/folder-open-outline.js';
+import folderSyncOutline from '@iconify/icons-mdi/folder-sync-outline.js';
+import { modifierKey } from '@txstate-mws/svelte-components';
+import { createEventDispatcher, getContext } from 'svelte';
+import { hashid } from 'txstate-utils';
+import { ASSET_STORE_CONTEXT } from './ChooserStore';
+import Asset from './Asset.svelte';
+import Icon from '../Icon.svelte';
+export let folder;
+export let level;
+export let posinset;
+export let setsize;
+export let next;
+export let prev;
+export let parent = undefined;
+const store = getContext(ASSET_STORE_CONTEXT);
+$: open = folder.open && folder.children?.length;
+$: nextlevel = level + 1;
+$: id = hashid(folder.id);
+$: haveFocus = $store.focus === folder.id;
+$: isPreview = $store.preview?.id === folder.id;
+const dispatch = createEventDispatcher();
+function onKeyDown(e) {
+    if (modifierKey(e))
+        return;
+    if (['Enter', ' '].includes(e.key)) {
+        onClick(e);
+        if ($store.preview?.id === folder.id)
+            dispatch('choose', folder);
+        else
+            store.preview(folder);
+    }
+    else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (folder.open && folder.children?.length) {
+            const child = folder.children[0];
+            store.setFocus(child);
+            document.getElementById(hashid(child.id)).focus();
+        }
+        else {
+            store.open(folder);
+        }
+    }
+    else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (folder.open) {
+            store.close(folder);
+        }
+        else if (parent) {
+            store.setFocus(parent);
+            document.getElementById(hashid(parent.id)).focus();
+        }
+    }
+    else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        const mynext = open ? folder.children[0] : next;
+        if (mynext) {
+            store.setFocus(mynext);
+            document.getElementById(hashid(mynext.id)).focus();
+        }
+    }
+    else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        const anyprev = prev;
+        const myprev = anyprev?.open && anyprev.children?.length && anyprev.path === folder.path ? anyprev.children[anyprev.children.length - 1] : prev;
+        if (myprev) {
+            store.setFocus(myprev);
+            document.getElementById(hashid(myprev.id)).focus();
+        }
+    }
+}
+function onClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    store.preview(folder);
+    store.toggle(folder);
+}
+</script>
+
+<li
+  {id}
+  role="treeitem"
+  class:isPreview
+  aria-expanded={!!folder.open}
+  aria-level={level}
+  aria-setsize={setsize}
+  aria-posinset={posinset}
+  aria-busy={folder.loading}
+  tabindex={haveFocus ? 0 : -1}
+  on:keydown={onKeyDown}
+  on:click={onClick}
+>
+  <Icon icon={folder.open ? folderOpenOutline : (folder.loading ? folderSyncOutline : folderOutline)} inline /> {folder.name}
+</li>
+{#if open}
+  <ul role="group" class="dialog-asset-sublist">
+    {#each folder.children as child, i (child.id)}
+      {@const setsize = folder.children.length}
+      {@const posinset = i + 1}
+      {@const subprev = i === 0 ? folder : folder.children[i - 1]}
+      {@const subnext = i === setsize - 1 ? next : folder.children[i + 1]}
+      {#if child.type === 'folder'}
+        <svelte:self folder={child} {setsize} {posinset} level={nextlevel} prev={subprev} next={subnext} parent={folder} on:choose />
+      {:else}
+        <Asset asset={child} {setsize} {posinset} level={nextlevel} prev={subprev} next={subnext} parent={folder} on:choose />
+      {/if}
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .dialog-asset-sublist {
+    list-style: none;
+    padding-left: 1em;
+  }
+  li {
+    cursor: pointer;
+  }
+</style>

package/chooser/AssetFolder.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { UIFolder, AnyUIItem } from './ChooserStore';
+declare const __propDef: {
+    props: {
+        folder: UIFolder;
+        level: number;
+        posinset: number;
+        setsize: number;
+        next: AnyUIItem | undefined;
+        prev: AnyUIItem | undefined;
+        parent?: UIFolder | undefined;
+    };
+    events: {
+        choose: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AssetFolderProps = typeof __propDef.props;
+export declare type AssetFolderEvents = typeof __propDef.events;
+export declare type AssetFolderSlots = typeof __propDef.slots;
+export default class AssetFolder extends SvelteComponentTyped<AssetFolderProps, AssetFolderEvents, AssetFolderSlots> {
+}
+export {};

package/chooser/Chooser.svelte

@@ -0,0 +1,169 @@
+<script >import fileTree from '@iconify/icons-mdi/file-tree.js';
+import viewGrid from '@iconify/icons-mdi/view-grid.js';
+import { Loading, Modal } from '@txstate-mws/svelte-components';
+import { derivedStore } from '@txstate-mws/svelte-store';
+import { createEventDispatcher, getContext, onMount, setContext } from 'svelte';
+import { hashid, randomid } from 'txstate-utils';
+import Asset from './Asset.svelte';
+import AssetFolder from './AssetFolder.svelte';
+import ButtonGroup from '../ButtonGroup.svelte';
+import { ASSET_STORE_CONTEXT, ChooserStore } from './ChooserStore';
+import Details from './Details.svelte';
+import Icon from '../Icon.svelte';
+import Page from './Page.svelte';
+import Thumbnail from './Thumbnail.svelte';
+import { ASSET_API_CONTEXT } from '../Form.svelte';
+const chooserClient = getContext(ASSET_API_CONTEXT);
+export let label = undefined;
+export let images = false;
+export let pages = false;
+export let assets = images;
+export let folders = false;
+export let initialType = undefined;
+export let initialSource = undefined;
+export let initialPath = undefined;
+export let activeSources = undefined;
+export let store = new ChooserStore(chooserClient);
+setContext(ASSET_STORE_CONTEXT, store);
+$: if (!pages && !assets)
+    assets = true;
+$: activeTypes = [...(assets ? ['asset'] : []), ...(pages ? ['page'] : [])];
+const dispatch = createEventDispatcher();
+const sources = derivedStore(store, v => v.sources?.[v.activetype] ?? []);
+const source = derivedStore(store, v => store.getSource(v));
+const preview = derivedStore(store, 'preview');
+const chooserheadid = randomid();
+const listid = randomid();
+function onChoose() {
+    dispatch('change', $store.preview);
+}
+onMount(async () => {
+    await store.init({ activeTypes, activeSources, initialType, initialSource, initialPath, onlyImages: images, chooseFolder: folders });
+    if ($store.focus)
+        document.getElementById(hashid($store.focus))?.scrollIntoView();
+});
+</script>
+
+<Modal on:escape>
+  <section class="dialog-chooser-window">
+    <header>
+      <div class="dialog-chooser-controls">
+        {#if activeTypes.length > 1}
+          <ButtonGroup value={$store.activetype} choices={[{ value: 'asset', label: 'Assets' }, { value: 'page', label: 'Pages' }]} ariaControls={listid} on:change={e => store.setActiveType(e.detail)} />
+        {/if}
+        {#if $sources.length > 1}
+          <div class="dialog-chooser-source">
+            <select on:change={function () { store.changeSource(Number(this.value)) }}>
+              {#each $sources as source, i}
+                <option value={i}>{source.name}</option>
+              {/each}
+            </select>
+          </div>
+        {/if}
+      </div>
+      <div id={chooserheadid} class="dialog-chooser-label">
+        {label}
+      </div>
+      {#if $source?.type === 'asset'}
+        <div class="dialog-chooser-view">
+          <button type="button"><Icon icon={fileTree} /></button>
+          <button type="button"><Icon icon={viewGrid} /></button>
+        </div>
+      {/if}
+    </header>
+    <section class="dialog-chooser-chooser">
+      <Loading loading={!$source || !$source.children}>
+        <ul id={listid} class="dialog-chooser-list" role="tree" aria-labelledby={chooserheadid}>
+          {#each $source.children as child, i (child.id)}
+            {@const setsize = $source.children.length}
+            {@const posinset = i + 1}
+            {@const prev = $source.children[i - 1]}
+            {@const next = $source.children[i + 1]}
+            {#if child.type === 'folder'}
+              <AssetFolder folder={child} {setsize} {posinset} level={1} {prev} {next} on:choose={onChoose} />
+            {:else if child.type === 'page'}
+              <Page page={child} {setsize} {posinset} level={1} {prev} {next} on:choose={onChoose} />
+            {:else}
+              <Asset asset={child} {setsize} {posinset} level={1} {prev} {next} on:choose={onChoose} />
+            {/if}
+          {/each}
+        </ul>
+      </Loading>
+    </section>
+    <section class="dialog-chooser-preview" tabindex={$preview ? 0 : -1}>
+      {#if $preview}
+        <Thumbnail item={$preview} />
+        <Details item={$preview}>
+          {#if $preview.type === 'folder'}
+            <li>{$preview.children?.length || 0} sub-items</li>
+          {/if}
+        </Details>
+      {/if}
+    </section>
+    <footer>
+      <button type="button" on:click={() => dispatch('escape')}>Cancel</button>
+      <button type="button" disabled={!$store.preview} on:click={onChoose}>Choose</button>
+    </footer>
+  </section>
+</Modal>
+
+<style>
+  .dialog-chooser-window {
+    position: relative;
+    width: 80vw;
+    height: 80vh;
+    background-color: lightgray;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    justify-content: flex-end;
+    padding: 1em;
+    overflow: hidden;
+  }
+  .dialog-chooser-window * {
+    box-sizing: border-box;
+  }
+  .dialog-chooser-chooser {
+    position: relative;
+    width: 70%;
+    height: calc(100% - 4em);
+    background-color: white;
+    padding: 0.5em;
+    overflow: auto;
+  }
+  .dialog-chooser-preview {
+    width: 30%;
+    height: calc(100% - 4em);
+    padding: 1em;
+    overflow-y: auto;
+  }
+  header {
+    width: 100%;
+    height: 2em;
+    text-align: center;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+  }
+  .dialog-chooser-label {
+    flex-grow: 1;
+  }
+  .dialog-chooser-controls {
+    display: flex;
+  }
+  .dialog-chooser-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .dialog-chooser-list :global(li) {
+    line-height: 1;
+    padding: 0.25em 0;
+    border-bottom: 1px solid var(--asset-chooser-border, #AAAAAA);
+  }
+  .dialog-chooser-list :global(.isPreview) {
+    background-color: var(--asset-chooser-active-bg, #333333);
+    color: var(--asset-chooser-active, #FFFFFF);
+  }
+
+</style>

package/chooser/Chooser.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ChooserType } from './ChooserAPI';
+import { ChooserStore } from './ChooserStore';
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        images?: boolean;
+        pages?: boolean;
+        assets?: boolean;
+        folders?: boolean;
+        initialType?: ChooserType | undefined;
+        initialSource?: string | undefined;
+        initialPath?: string | undefined;
+        activeSources?: string[] | undefined;
+        store?: ChooserStore;
+    };
+    events: {
+        escape: CustomEvent<any>;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ChooserProps = typeof __propDef.props;
+export declare type ChooserEvents = typeof __propDef.events;
+export declare type ChooserSlots = typeof __propDef.slots;
+export default class Chooser extends SvelteComponentTyped<ChooserProps, ChooserEvents, ChooserSlots> {
+}
+export {};

package/chooser/ChooserAPI.d.ts

@@ -0,0 +1,48 @@
+export declare type ChooserType = 'asset' | 'page';
+export declare type AnyItem = Asset | Folder | Page;
+export interface Client {
+    getSources: (type: ChooserType) => Promise<Source[]>;
+    getChildren: (source: string, path: string, filter: (assetOrFolder: AnyItem) => boolean | Promise<boolean>) => Promise<(AnyItem)[]>;
+    find: (source: string, path: string, searchstring: string, filter: (asset: AnyItem) => boolean | Promise<boolean>) => Promise<(AnyItem)[]>;
+    findById: (id: string) => Promise<AnyItem>;
+    findByUrl?: (url: string) => Promise<AnyItem>;
+    urlToValue?: (url: string) => string;
+    upload: (source: string, path: string, files: FileList) => Promise<void>;
+}
+export interface Source {
+    type: ChooserType;
+    name: string;
+    rootAcceptsUpload?: boolean;
+}
+interface Item {
+    /**
+     * this is the identifier that will be added to the form's JSON payload
+     * when this folder is selected by the user
+     * for DosGato it will be a stringified AssetLink, AssetFolderLink, or
+     * PageLink (see dosgato-templating/src/links.ts)
+     */
+    id: string;
+    path: string;
+    name: string;
+}
+export interface Folder extends Item {
+    type: 'folder';
+    acceptsUpload: boolean;
+}
+export interface Page extends Item {
+    type: 'page';
+    url: string;
+    title: string;
+}
+export interface Asset extends Item {
+    type: 'asset';
+    mime: string;
+    bytes: number;
+    url: string;
+    image?: {
+        width: number;
+        height: number;
+        thumbnailUrl?: string;
+    };
+}
+export {};

package/chooser/ChooserAPI.js

@@ -0,0 +1 @@
+export {};

package/chooser/ChooserStore.d.ts

@@ -0,0 +1,72 @@
+import { SafeStore } from '@txstate-mws/svelte-store';
+import type { AnyItem, Asset, Client, ChooserType, Folder, Page, Source } from './ChooserAPI.js';
+export interface UISource extends Source {
+    children?: AnyUIItem[];
+}
+export interface UIFolder extends Folder {
+    children?: (UIFolder | UIAsset)[];
+    open?: boolean;
+    loading?: boolean;
+}
+export interface UIPage extends Page {
+    children?: UIPage[];
+    open?: boolean;
+    loading?: boolean;
+}
+export interface UIAsset extends Asset {
+}
+export interface RawURL {
+    type: 'raw';
+    id: string;
+    url: string;
+}
+export declare type AnyUIItem = UIPage | UIFolder | UIAsset;
+export interface IAssetStore {
+    sources?: {
+        page: UISource[];
+        asset: UISource[];
+    };
+    activetype: ChooserType;
+    activesource: number;
+    preview?: AnyUIItem;
+    focus?: string;
+    focusPath?: string;
+}
+export interface ChooserStoreOptions {
+    filter?: (itm: AnyItem) => boolean | Promise<boolean>;
+    activeTypes?: ChooserType[];
+    activeSources?: string[];
+    initialType?: ChooserType;
+    initialSource?: string;
+    initialPath?: string;
+    chooseFolder?: boolean;
+    onlyImages?: boolean;
+}
+interface InternalStoreOptions extends Omit<ChooserStoreOptions, 'activeSources'> {
+    activeSources?: Set<string>;
+}
+export declare const ASSET_STORE_CONTEXT: {};
+export declare function combinePath(path: string, name: string): string;
+export declare function bytesToHuman(bytes: number): string;
+export declare class ChooserStore extends SafeStore<IAssetStore> {
+    client: Client;
+    options: InternalStoreOptions;
+    constructor(client: Client);
+    setOptions(options: ChooserStoreOptions): void;
+    getSource(state?: IAssetStore): UISource;
+    getSourceIndex(name: string, state?: IAssetStore, type?: ChooserType): number;
+    init(options: ChooserStoreOptions): Promise<void>;
+    itemByPath(state: IAssetStore, path: string): AnyUIItem;
+    open(folder: UIFolder | UIPage): Promise<void>;
+    openPath(path: string): Promise<void>;
+    openPathRecursive(path: string): Promise<void>;
+    close(folder: UIFolder | UIPage): Promise<void>;
+    closePath(path: string): Promise<void>;
+    toggle(folder: UIFolder | UIPage): Promise<void>;
+    preview(item?: AnyUIItem): void;
+    clearPreview(): void;
+    changeSource(idx: number): Promise<void>;
+    setActiveType(type: ChooserType): Promise<void>;
+    setFocus(itm: AnyUIItem): void;
+}
+export {};