Add bridge example

README.md

@@ -1,6 +1,10 @@
 A custom element`<gem-panel>`, let you easily create layout similar to Adobe After Effects.
 
-[Demo](https://gem-panel.vercel.app/)
+## Demo
+
+- [Hello](https://gem-panel.vercel.app/)
+- [Custom style](https://gem-panel-example-style.vercel.app/)
+- [Adobe Bridge simulation](https://gem-panel-example-bridge.vercel.app/)
 
 ## Docs
 
@@ -13,7 +17,7 @@ A custom element`<gem-panel>`, let you easily create layout similar to Adobe Aft
 - Drag and drop to adjust the panel sorting
 - Add commands to the panel
 - Cache layout
-- Custom style, [example](./screenshots/style.png)
+- Custom style, [screenshot](./screenshots/style.png)
 - Async load panel content
 - Typescript support
 - Lightweight, ~20kb(br)

src/examples/bridge/elements/navigation.ts

@@ -0,0 +1,41 @@
+import { connectStore, customElement, GemElement, html } from '@mantou/gem';
+import { bridgeStore, updatePath } from '../store';
+
+import { theme } from '../../../';
+
+@connectStore(bridgeStore)
+@customElement('bridge-navigation')
+export class BridgenNvigationElement extends GemElement {
+ #clickHandle = (index: number) => {
+ updatePath(bridgeStore.path.slice(0, index + 1));
+ };
+
+ render() {
+ const path = bridgeStore.path;
+ return html`
+ <style>
+ :host {
+ cursor: default;
+ display: flex;
+ gap: 1em;
+ background: ${theme.backgroundColor};
+ font-size: 0.75em;
+ font-family: ${theme.fontFamily};
+ padding: 0.5em;
+ color: ${theme.primaryColor};
+ border-bottom: 1px solid ${theme.darkBackgroundColor};
+ }
+ .fragment:last-of-type {
+ font-weight: bolder;
+ }
+ </style>
+ <div class="fragment" @click=${() => this.#clickHandle(-1)}>Home</div>
+ ${path.map(
+ (fragment, index) => html`
+ <div>${'>'}</div>
+ <div class="fragment" @click=${() => this.#clickHandle(index)}>${fragment}</div>
+ `,
+ )}
+ `;
+ }
+}

src/examples/bridge/elements/panel-content.ts

@@ -0,0 +1,59 @@
+import { connectStore, customElement, GemElement, html } from '@mantou/gem';
+import '../../../';
+import { theme } from '../../../lib/theme';
+
+import { bridgeStore, getCurrentFolder, Item, updatePath, updateSelection } from '../store';
+import './thumbnail';
+
+@connectStore(bridgeStore)
+@customElement('bridge-panel-content')
+export class BridgePanelContentElement extends GemElement {
+ #clickHandle = (item: Item) => {
+ if (bridgeStore.selection.has(item)) {
+ updateSelection([]);
+ } else {
+ updateSelection([item]);
+ }
+ };
+
+ #dbClickHandle = (item: Item) => {
+ if (item.type === 'folder') {
+ updatePath([...bridgeStore.path, item.filename]);
+ }
+ };
+
+ mounted = () => {
+ this.effect(
+ () => updatePath(bridgeStore.path),
+ () => [bridgeStore.path],
+ );
+ };
+
+ render() {
+ const folder = getCurrentFolder();
+ if (!folder.content) return html`<gem-panel-placeholder></gem-panel-placeholder>`;
+ const items = Object.values(folder.content);
+ return html`
+ <style>
+ :host {
+ display: grid;
+ padding: 0.2em;
+ gap: 1em;
+ grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+ }
+ .selected {
+ outline: 2px solid ${theme.focusColor};
+ }
+ </style>
+ ${items.map(
+ (item) =>
+ html`<bridge-thumbnail
+ class=${bridgeStore.selection.has(item) ? 'selected' : ''}
+ @click=${() => this.#clickHandle(item)}
+ @dblclick=${() => this.#dbClickHandle(item)}
+ .data=${item}
+ ></bridge-thumbnail>`,
+ )}
+ `;
+ }
+}

src/examples/bridge/elements/panel-favorites.ts

@@ -0,0 +1,10 @@
+import { connectStore, customElement, GemElement, html } from '@mantou/gem';
+import { bridgeStore } from '../store';
+
+@connectStore(bridgeStore)
+@customElement('bridge-panel-favorites')
+export class BridgePanelFavoritesElement extends GemElement {
+ render() {
+ return html``;
+ }
+}

src/examples/bridge/elements/panel-filter.ts

@@ -0,0 +1,37 @@
+import { connectStore, customElement, GemElement, html } from '@mantou/gem';
+import { bridgeStore, getCurrentFolder, Type } from '../store';
+
+const orientations = ['landscape', 'portrait'] as const;
+type Orientation = typeof orientations[number];
+
+@connectStore(bridgeStore)
+@customElement('bridge-panel-filter')
+export class BridgePanelFilterElement extends GemElement {
+ render() {
+ const folder = getCurrentFolder();
+ if (!folder.content) return null;
+ const items = Object.values(folder.content);
+ const types: Set<Type> = new Set();
+ const orientations: Set<Orientation> = new Set();
+ items.forEach((item) => {
+ types.add(item.type);
+ if (item.type === 'image') {
+ orientations.add(item.width! > item.height! ? 'landscape' : 'portrait');
+ }
+ });
+ return html`
+ <details>
+ <summary>File type</summary>
+ <ul>
+ ${[...types].map((type) => html`<li>${type}</li>`)}
+ </ul>
+ </details>
+ <details>
+ <summary>Orientation</summary>
+ <ul>
+ ${[...orientations].map((orientation) => html`<li>${orientation}</li>`)}
+ </ul>
+ </details>
+ `;
+ }
+}

src/examples/bridge/elements/panel-folders.ts

@@ -0,0 +1,10 @@
+import { connectStore, customElement, GemElement, html } from '@mantou/gem';
+import { bridgeStore } from '../store';
+
+@connectStore(bridgeStore)
+@customElement('bridge-panel-folders')
+export class BridgePanelFoldersElement extends GemElement {
+ render() {
+ return html`folders`;
+ }
+}

src/examples/bridge/elements/panel-libraries.ts

@@ -0,0 +1,10 @@
+import { connectStore, customElement, GemElement, html } from '@mantou/gem';
+import { bridgeStore } from '../store';
+
+@connectStore(bridgeStore)
+@customElement('bridge-panel-libraries')
+export class BridgePanelLibrariesElement extends GemElement {
+ render() {
+ return html`libraries`;
+ }
+}

src/examples/bridge/elements/panel-metadata.ts

@@ -0,0 +1,13 @@
+import { connectStore, customElement, GemElement, html } from '@mantou/gem';
+import { bridgeStore, Item } from '../store';
+
+@connectStore(bridgeStore)
+@customElement('bridge-panel-metadata')
+export class BridgePanelMetadataElement extends GemElement {
+ render() {
+ const [item] = [...bridgeStore.selection];
+ if (!item) return null;
+ const keys: (keyof Item)[] = ['filename', 'type', 'modifiedTime'];
+ return html` ${keys.map((key) => html`<div>${key}: ${item[key]}</div>`)} `;
+ }
+}

src/examples/bridge/elements/panel-preview.ts

@@ -0,0 +1,36 @@
+import { connectStore, customElement, GemElement, html } from '@mantou/gem';
+import { bridgeStore } from '../store';
+
+@connectStore(bridgeStore)
+@customElement('bridge-panel-preview')
+export class BridgePanelPreviewElement extends GemElement {
+ render() {
+ const [item] = [...bridgeStore.selection];
+ if (!item) return null;
+ return html`
+ <style>
+ :host {
+ display: grid;
+ grid-template-rows: 1fr auto;
+ height: 100%;
+ box-sizing: border-box;
+ padding: 0.2em;
+ justify-content: center;
+ align-items: center;
+ }
+ img {
+ overflow: hidden;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ .title {
+ text-align: center;
+ padding: 0.2em 1em;
+ }
+ </style>
+ <img src=${item.src || `https://via.placeholder.com/60x60?text=${item.type}`} />
+ <div class="title">${item.filename}</div>
+ `;
+ }
+}