@xuda.io/xuda-widget-plugin-xuda-drive 1.0.6 → 1.0.8

package/index.mjs

@@ -153,8 +153,8 @@ export const methods = {
             value: "",
           },
           {
-            label: "Thumbnails",
-            value: "thumbnails",
+            label: "Gallery",
+            value: "gallery",
           },
           {
             label: "List",
@@ -208,6 +208,22 @@ export const methods = {
           },
         ],
       },
+      show_toolbar: {
+        label: "Show Toolbar",
+        type: "string",
+        render: "segment",
+        tooltip: "",
+        options: [
+          {
+            label: "No",
+            value: "",
+          },
+          {
+            label: "Yes",
+            value: "yes",
+          },
+        ],
+      },
     },
     response: { uploaded_files: "" },
   },

package/package.json

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

package/runtime.mjs

@@ -530,28 +530,16 @@ export async function viewer(fields, e) {
           </svg>
           <span class="sr-only">Use grid view</span>
         </button>
+        <button type="button" class="ml-0.5 rounded-md bg-white p-1.5 text-gray-400 shadow-sm focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M200,64V192a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H192A8,8,0,0,1,200,64Z" opacity="0.2"></path><path d="M192,48H64A16,16,0,0,0,48,64V192a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64A16,16,0,0,0,192,48Zm0,144H64V64H192V192ZM240,56V200a8,8,0,0,1-16,0V56a8,8,0,0,1,16,0ZM32,56V200a8,8,0,0,1-16,0V56a8,8,0,0,1,16,0Z"></path></svg>
+          <span class="sr-only">Use grid view</span>
+        </button>
       </div>
     </div>
 
     <!-- Tabs -->
 
-    <!-- Gallery -->
-    <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="https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" 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>
 </main>
 
@@ -559,9 +547,7 @@ export async function viewer(fields, e) {
 
   e.$containerP.html(html);
 
-  let opt = { app_id };
-
-  try {
+  const search_drive = async function () {
     let domain =
       e._session.engine_mode === "live_preview" ? `dev.xuda.io` : `xuda.io`;
 
@@ -584,6 +570,42 @@ export async function viewer(fields, e) {
     }
     const json = await response.json();
     return json;
+  };
+
+  let viewer_type = fields.default_view_type || "gallery";
+
+  let opt = { app_id, type: "file", search_string: "a" };
+
+  try {
+    const ret = search_drive();
+
+    for (let file of ret.data.docs) {
+      switch (viewer_type) {
+        case "gallery": {
+          e.$containerP.append(` 
+              <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="https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" 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>
+`);
+          break;
+        }
+        default:
+          break;
+      }
+    }
   } catch (err) {
     console.error(err);
   }