@xuda.io/xuda-widget-plugin-xuda-drive 1.0.12 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xuda.io/xuda-widget-plugin-xuda-drive",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "Xuda Drive widget plugin",
   "scripts": {
     "pub": "npm version patch --force && npm publish  --access public"

package/runtime.mjs

@@ -573,40 +573,89 @@ export async function viewer(fields, e) {
   };
 
   let viewer_type = fields.default_view_type || "gallery";
-
   let opt = { app_id, type: "file", search_string: "a" };
 
-  try {
-    const ret = await search_drive();
+  const render_view = async function () {
+    const expand = function (e) {
+      console.log(e);
+      alert("aaa");
+    };
+
+    e.$containerP.find(".drive_view_wrapper").empty();
+
+    try {
+      const ret = await search_drive();
+
+      let $wrapper;
 
-    for (let file of ret.data) {
       switch (viewer_type) {
         case "gallery": {
-          e.$containerP.append(` 
-              <section class="mt-8 pb-16" aria-labelledby="gallery-heading">
+          $wrapper = `  
+      <div class="drive_view_wrapper"> 
+        <section class="mt-8 pb-16" aria-labelledby="gallery-heading">
           <h2 id="gallery-heading" class="sr-only">Recently viewed</h2>
-          <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8 [&>li>div>img]:aspect-[3/2]">
-            <li class="relative">
-              <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 ring-2 ring-indigo-500 ring-offset-2" x-state:on="Current" x-state:off="Default" x-state-description='Current: "ring-2 ring-indigo-500 ring-offset-2", Default: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
-                <img src="${file.file_url}" alt="${file.name}" class="pointer-events-none object-cover" x-state:on="Current" x-state:off="Default" x-state-description='Current: "", Default: "group-hover:opacity-75"' />
-                <button type="button" class="absolute inset-0 focus:outline-none">
-                  <span class="sr-only">View details for IMG_4985.HEIC</span>
-                </button>
-              </div>
-              <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4985.HEIC</p>
-              <p class="pointer-events-none block text-sm font-medium text-gray-500">3.9 MB</p>
-            </li>
-           
-          </ul>
-        </section>
-`);
+          <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8 [&>li>div>img]:aspect-[3/2]">`;
           break;
         }
         default:
           break;
       }
+      let $item;
+      for (let file of ret.data) {
+        switch (viewer_type) {
+          case "gallery": {
+            $item = `  
+            <li class="relative">
+                <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 ring-2 ring-indigo-500 ring-offset-2" x-state:on="Current" x-state:off="Default" x-state-description='Current: "ring-2 ring-indigo-500 ring-offset-2", Default: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
+                  <img src="${file.file_url}" alt="${file.name}" class="pointer-events-none object-cover" x-state:on="Current" x-state:off="Default" x-state-description='Current: "", Default: "group-hover:opacity-75"' />
+                  <button type="button" class="absolute inset-0 focus:outline-none">
+                    <span class="sr-only">View details for IMG_4985.HEIC</span>
+                  </button>
+                </div>
+                <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4985.HEIC</p>
+                <p class="pointer-events-none block text-sm font-medium text-gray-500">3.9 MB</p>
+            </li> `.on("click", (e) => {
+              expand(e);
+            });
+
+            $wrapper.append($item);
+            break;
+          }
+          default:
+            break;
+        }
+      }
+
+      e.$containerP.append($wrapper);
+    } catch (err) {
+      console.error(err);
     }
-  } catch (err) {
-    console.error(err);
-  }
+  };
+
+  render_view();
 }
+
+// `
+
+//         <div class="drive_view_wrapper">
+
+//           <section class="mt-8 pb-16" aria-labelledby="gallery-heading">
+//             <h2 id="gallery-heading" class="sr-only">Recently viewed</h2>
+//             <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8 [&>li>div>img]:aspect-[3/2]">
+
+//             <li class="relative">
+//                 <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 ring-2 ring-indigo-500 ring-offset-2" x-state:on="Current" x-state:off="Default" x-state-description='Current: "ring-2 ring-indigo-500 ring-offset-2", Default: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
+//                   <img src="${file.file_url}" alt="${file.name}" class="pointer-events-none object-cover" x-state:on="Current" x-state:off="Default" x-state-description='Current: "", Default: "group-hover:opacity-75"' />
+//                   <button type="button" class="absolute inset-0 focus:outline-none">
+//                     <span class="sr-only">View details for IMG_4985.HEIC</span>
+//                   </button>
+//                 </div>
+//                 <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4985.HEIC</p>
+//                 <p class="pointer-events-none block text-sm font-medium text-gray-500">3.9 MB</p>
+//             </li>
+
+//             </ul>
+//           </section>
+
+//         <div>
+// `