chore: add social sourcesdemo page

uploadcare · Oct 23, 2024 · 7a657da · 7a657da
1 parent a74ce0e
commit 7a657da
Showing 1 changed file with 84 additions and 0 deletions.
diff --git a/demo/new-social-sources-test.html b/demo/new-social-sources-test.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<base href="../../" />
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="./solutions/file-uploader/regular/index.css" />
+  <style>
+    body.dark {
+      background-color: #121213;
+      color: #fff;
+    }
+    body.light {
+      background-color: #fff;
+      color: #121213;
+    }
+  </style>
+  <script
+    async=""
+    src="https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=raw,min/dist/es-module-shims.js"
+  ></script>
+  <script type="importmap">
+    {
+      "imports": {
+        "@symbiotejs/symbiote": "./node_modules/@symbiotejs/symbiote/build/symbiote.js",
+        "@uploadcare/upload-client": "./node_modules/@uploadcare/upload-client/dist/esm/index.browser.mjs",
+        "@uploadcare/image-shrink": "./node_modules/@uploadcare/image-shrink/dist/esm/index.browser.mjs",
+        "keyux": "./node_modules/keyux/index.js"
+      }
+    }
+  </script>
+  <script src="./index.js" type="module"></script>
+  <script type="module">
+    import * as UC from './index.js';
+
+    UC.defineComponents(UC);
+
+    const darkMode = document.getElementById('dark-mode');
+    const multiple = document.getElementById('multiple');
+    const imagesOnly = document.getElementById('images-only');
+
+    darkMode.addEventListener('change', () => {
+      const uploader = document.querySelector('uc-file-uploader-regular');
+      uploader.classList.toggle('uc-dark', darkMode.checked);
+      uploader.classList.toggle('uc-light', !darkMode.checked);
+
+      document.body.classList.toggle('dark', darkMode.checked);
+      document.body.classList.toggle('light', !darkMode.checked);
+    });
+
+    multiple.addEventListener('change', () => {
+      document.querySelector('uc-config').setAttribute('multiple', multiple.checked);
+    });
+
+    imagesOnly.addEventListener('change', () => {
+      document.querySelector('uc-config').setAttribute('img-only', imagesOnly.checked);
+    });
+  </script>
+</head>
+
+<uc-file-uploader-regular ctx-name="my-uploader" class="uc-light"></uc-file-uploader-regular>
+<uc-config
+  ctx-name="my-uploader"
+  pubkey="8ae495b8b715101b5119"
+  social-base-url="https://neutral-jolly-heron.ngrok-free.app"
+  source-list="dropbox, gphotos, gdrive"
+  multiple="true"
+></uc-config>
+<uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider>
+
+<fieldset>
+  <legend>Options</legend>
+  <label>
+    <input id="dark-mode" type="checkbox" />
+    Dark Mode
+  </label>
+  <label>
+    <input id="multiple" type="checkbox" checked />
+    Multiple
+  </label>
+  <label>
+    <input id="images-only" type="checkbox" />
+    Images Only
+  </label>
+</fieldset>