feat(fetch): update demo

Alwatr · Nov 5, 2022 · 441c084 · 441c084
1 parent 6207b48
commit 441c084
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 59 deletions.
diff --git a/demo/fetch/index.html b/demo/fetch/index.html
@@ -5,28 +5,43 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@alwatr/fetch</title>
     <link rel="stylesheet" href="style.css" />
-    <script type="module" src="./index.js"></script>
+    <script type="module" src="index.js"></script>
   </head>
 
   <body>
-
     <h1>@alwatr/fetch</h1>
 
-    <label for="cacheSelect">Cache Strategy:</label>
-    <select name="caches" id="cacheSelect">
-      <option value="network_only">Network Only</option>
-      <option value="network_first">Network First</option>
-      <option value="cache_only">Cache Only</option>
-      <option value="cache_first">Cache First</option>
-      <option value="stale_while_revalidate">Stale While Revalidate</option>
-    </select>
+    <div class="option-container">
+      <label for="cacheStrategy">Cache Strategy:</label>
+      <select id="cacheStrategy">
+        <option value="stale_while_revalidate">Stale While Revalidate</option>
+        <option value="cache_first">Cache First</option>
+        <option value="cache_only">Cache Only</option>
+        <option value="network_first">Network First</option>
+        <option value="network_only">Network Only</option>
+      </select>
+
+      <label for="removeDuplicate">Remove duplicate:</label>
+      <select id="removeDuplicate">
+        <option value="auto">Auto</option>
+        <option value="until_load">Until Load</option>
+        <option value="always">Always</option>
+        <option value="never">Never</option>
+      </select>
 
+      <label for="timeout">Timeout:</label>
+      <select id="timeout">
+        <option value="3000">3,000</option>
+        <option value="5000">5,000</option>
+        <option value="10000">10,000</option>
+      </select>
+    </div>
 
-    <div class="buttons">
-      <button class="success" data-url="//httpbin.org/uuid">200 Random Response</button>
-      <button class="success" data-url="//httpbin.org/delay/1">1s Delay</button>
-      <button class="fail" data-url="//httpbin.org/status/503">503 Response</button>
-      <button class="fail" data-url="//httpbin.org/delay/5">5s Delay</button>
+    <div class="button-container">
+      <button data-url="//httpbin.org/uuid">Random UUID</button>
+      <button data-url="//httpbin.org/status/503">Error 503</button>
+      <button data-url="//httpbin.org/delay/1">With 1s Delay</button>
+      <button data-url="//httpbin.org/delay/5">With 5s Delay</button>
     </div>
 
     <h3>Check the console for result</h3>

diff --git a/demo/fetch/index.ts b/demo/fetch/index.ts
@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import {fetch} from '@alwatr/fetch';
 
-import type {CacheStrategy} from '@alwatr/fetch';
+import type {CacheStrategy, CacheDuplicate} from '@alwatr/fetch';
 
 const buttons = document.querySelectorAll('button') as NodeListOf<HTMLButtonElement>;
 
@@ -9,24 +10,19 @@ for (const button of buttons) {
 
   if (button && url) {
     button.addEventListener('click', async () => {
-      if (button.classList.contains('loading')) return;
-
-      button.classList.add('loading');
       try {
         const response = await fetch({
           url,
-          timeout: 2000,
-          retry: 2,
           mode: 'cors',
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          cacheStrategy: document.querySelector<HTMLSelectElement>('#cacheSelect')!.value as CacheStrategy,
+          timeout: +document.querySelector<HTMLSelectElement>('#timeout')!.value,
+          cacheStrategy: document.querySelector<HTMLSelectElement>('#cacheStrategy')!.value as CacheStrategy,
+          removeDuplicate: document.querySelector<HTMLSelectElement>('#removeDuplicate')!.value as CacheDuplicate,
         });
         console.log('Demo response: %o', {url, response, text: await response.text()});
       }
       catch (error) {
         console.warn('Demo catch error: %o', {url, error});
       }
-      button.classList.remove('loading');
     });
   }
 }
diff --git a/demo/fetch/style.css b/demo/fetch/style.css
@@ -1,45 +1,63 @@
-* {
-  margin: 0;
-  box-sizing: border-box;
+html {
+  color-scheme: light dark;
 }
 
-.buttons {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  gap: 24px;
-  padding: 24px;
+body {
+  font-family: system-ui;
+  width: 20em;
+  margin: 5em auto 0;
 }
 
-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 1;
-  border-radius: 8px;
-  border: 1px solid #000;
-  position: relative;
-  background-color: #0d6efd;
-  color: #fff;
-  overflow: hidden;
-  padding: 24px 12px;
+h1, h3 {
   text-align: center;
-  margin: 0;
-  min-width: 200px;
 }
-button.success {
-  background-color: #198754;
+
+button {
+  --border-size: 3px;
+  --corner-size: .45em; /* size of the corner */
+  --color: #373B44;
+
+  margin: var(--corner-size);
+  padding: calc(.5em + var(--corner-size)) calc(.9em + var(--corner-size));
+  color: var(--color);
+  --_p: var(--corner-size);
+  background:
+    conic-gradient(from 90deg at var(--border-size) var(--border-size),#0000 90deg,var(--color) 0)
+    var(--_p) var(--_p)/calc(100% - var(--border-size) - 2*var(--_p)) calc(100% - var(--border-size) - 2*var(--_p));
+  transition: .3s linear, color 0s, background-color 0s;
+  outline: var(--border-size) solid #0000;
+  outline-offset: .6em;
+  font-size: 16px;
+  border: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+button:hover,
+button:focus-visible{
+  --_p: 0px;
+  outline-color: var(--color);
+  outline-offset: .05em;
 }
-button.fail {
-  background-color: #dc3545;
+
+button:active {
+  background: var(--color);
+  color: #fff;
 }
-button.loading::before {
-  content: 'Loading ...';
+
+.option-container,
+.button-container {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  inset: 0;
-  background-color: #0006;
-  backdrop-filter: blur(2px);
+  flex-direction: column;
+  margin: 1em;
+}
+
+@media (prefers-color-scheme: dark) {
+  button {
+    --color: #d8dbdf;
+  }
+  button:active {
+    background: #373B44;
+  }
 }