@social-mail/social-mail-client 1.2.329 → 1.2.331

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.329",
+  "version": "1.2.331",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/common/controls/drag-drop/FilesDragDrop.ts

@@ -50,7 +50,7 @@ const eventDrop = (e: DragEvent) => {
         .filter((item) => item.kind === "file")
         .map((item) =>
             supportsFileSystemAccessAPI
-            ? item.getAsFileSystemHandle()
+            ? item.getAsFileSystemHandle().then((f) => f ?? item.getAsFile())
             : supportsWebkitGetAsEntry
             ? item.webkitGetAsEntry()
             : item.getAsFile()
@@ -79,7 +79,7 @@ const eventDrop = (e: DragEvent) => {
             if (handle.kind === "directory" || handle.isDirectory) {
                 files.push(... await getFiles(handle));
             } else {
-                files.push(await handle.getFile());
+                files.push(handle.getFile ? await handle.getFile(): handle);
             }
         }
         const detail = {

package/src/public/store/StoreItemDetailView.tsx

@@ -12,11 +12,12 @@ import Action from "@web-atoms/core/dist/view-model/Action";
 import styled from "@web-atoms/core/dist/style/styled";
 import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
 import { formatCurrency, formatPrice } from "../../common/currency";
+import ToggleButtonBar from "@web-atoms/web-controls/dist/basic/ToggleButtonBar";
 
 const url = (window as any).pageUrl as URL;
 
 
-let {1: storeID = "1", 2: itemID = "5" } = /^\/store\/([^\/]+)\/([^\/]+)\//.exec(url?.pathname) ?? {} as any;
+let {1: storeID = "4", 2: itemID = "1w" } = /^\/store\/([^\/]+)\/([^\/]+)\//.exec(url?.pathname) ?? {} as any;
 
 storeID = parseInt(storeID, 36);
 itemID = parseInt(itemID, 36);
@@ -70,6 +71,11 @@ const css = styled.css `
                 -webkit-user-drag: none;
             }
         }
+
+    }
+
+    & img {
+        max-width: 90vw;
     }
 `.installLocal();
 
@@ -81,13 +87,29 @@ export default class StoreItemDetailView extends AtomControl {
 
     model: IStoreItem;
 
+    selectedVarient: IStoreItem = null;
+
+    selectedSize: IStoreItem = null;
+
     selectedFile: IStoreMediaFile = null;
 
+    images: IStoreMediaFile[] = [];
+
     constructor(app, e) {
         super(app, e);
         this.runAfterInit(() => this.app.runAsync(() => this.init()));
     }
 
+    getFiles(item: IStoreItem, varient: IStoreItem, size: IStoreItem) {
+        const varientFiles = varient?.mediaFiles?.filter((x) => x.isPreview);
+        const files = varientFiles ?? item.mediaFiles.filter((x) => x.isPreview);
+        if (size?.mediaFiles) {
+            files.push(... size.mediaFiles.filter((x) => x.isPreview));
+        }
+        this.selectedFile = files[0];
+        return files;
+    }
+
     async init() {
 
         this.renderer = <div>
@@ -110,25 +132,32 @@ export default class StoreItemDetailView extends AtomControl {
             specifications ? FetchBuilder.get(signedUrl(specifications)).responseAsText() : Promise.resolve("")
         ]);
 
-        this.renderer = <div class={css}>
+        this.selectedSize = this.model.sizes?.[0] ?? null;
+        this.selectedVarient = this.model.variants?.[0] ?? null;
+
+        this.renderer = <div
+            class={css}
+            images={Bind.oneWay(() => this.getFiles(this.model, this.selectedVarient, this.selectedSize))}>
             <h2>{this.model.name}</h2>
 
             <section class="photos">
-                <div class="thumbnails">
-                    { ... images.map((x) =>
-                        <img
-                            class="thumbnail"
-                            data-click-event="change-image"
-                            data-id={x.appFileID}
-                            src={signedImageUrl(x, 150)} />)}
-                </div>
+                <AtomRepeater
+                    selectOnClick={true}
+                    items={Bind.oneWay(() => this.images)}
+                    selectedItem={Bind.twoWaysImmediate(() => this.selectedFile)}
+                    itemRenderer={(x) => <img
+                        class="thumbnail"
+                        data-click-event="change-image"
+                        data-id={x.appFileID}
+                        src={signedImageUrl(x, 150)} />}
+                    class="thumbnails"/>
                 <PinchZoomView
                     class="preview"
                     source={Bind.oneWay(() => signedImageUrl(this.selectedFile, 720))}
                     />
             </section>
 
-            <section>
+            <section data-layout="vertical-flex">
 
                 { /* Display Offers */ }
                 {
@@ -143,6 +172,18 @@ export default class StoreItemDetailView extends AtomControl {
                     <label text={ formatPrice(price) }/>
                 </p>
                 <button>Buy</button>
+
+                { this.model.sizes?.length && <ToggleButtonBar
+                    items={this.model.sizes}
+                    selectedItem={Bind.twoWaysImmediate(() => this.selectedSize)}
+                    itemRenderer={(x: IStoreItem) => <div data-item-type="toggle-button"><label text={x.name}/></div>}
+                    />}
+                { this.model.variants?.length && <ToggleButtonBar
+                    items={this.model.variants}
+                    selectedItem={Bind.twoWaysImmediate(() => this.selectedVarient)}
+                    itemRenderer={(x: IStoreItem) => <div data-item-type="toggle-button"><label text={x.name}/></div>}
+                    />}
+
             </section>
 
             {/* This should be html */}
@@ -165,6 +206,8 @@ export default class StoreItemDetailView extends AtomControl {
             .include((x) => [
                 x.storeItemPrices,
                 x.storeItemTags.forEach((t) => t.tag),
+                x.variants.forEach((t) => [ t.mediaFiles, t.storeItemPrices]),
+                x.sizes.forEach((t) => [ t.mediaFiles, t.storeItemPrices]),
                 x.mediaFiles,
             ])
             .firstOrDefault();