From 7a657da46cea1c9f4f48ceead315af6a3b756269 Mon Sep 17 00:00:00 2001
From: nd0ut <nd0ut@users.noreply.github.com>
Date: Wed, 23 Oct 2024 16:40:17 +0300
Subject: [PATCH] chore: add social sourcesdemo page

---
 demo/new-social-sources-test.html | 84 +++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 demo/new-social-sources-test.html
diff --git a/demo/new-social-sources-test.html b/demo/new-social-sources-test.html
new file mode 100644
index 00000000..98b7690a
--- /dev/null
+++ 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/-/es-module-shims@v1.5.8-O0uWfhbenfjMbv6D3d8E/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>
\ No newline at end of file
