add ripple for inspector

Neofonie · Jun 19, 2024 · e95f0a1 · e95f0a1
1 parent 2bcea39
commit e95f0a1
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 18 deletions.
diff --git a/src/lib/components/a11y-inspector.svelte b/src/lib/components/a11y-inspector.svelte
@@ -1,13 +1,15 @@
-<script>
+<script lang="ts">
     import { watchedA11yContent, testA11yRules } from '$lib/helpers/a11y-manager';
     import { onMount } from 'svelte';
+    import Ripple from '$lib/components/ripple.svelte';
 
-    let elmIframe,
-        // The URL to test (initial value).
+    let elmIframe: any,
+        isLoading = false,
+        // The URL to test (initial value).let
         src = 'https://google.com/',
         // The URL for the proxy-server we're using to bypass CORS-issues.
         proxy = 'https://a11y.neofonie.de/cors?url=',
-        inputDelay;
+        inputDelay: any;
 
     // As soon 'src' or 'proxy' changes (like when editing text in any input)
     //  this will be triggered. We use `setTimeout` to delay the input
@@ -17,7 +19,7 @@
         if (inputDelay) {
             clearTimeout(inputDelay);
         }
-        inputDelay = setTimeout(() => loadPagePerProxy(), 250);
+        inputDelay = setTimeout(() => loadPagePerProxy(), 500);
     }
 
     /**
@@ -30,6 +32,7 @@
      */
     function loadPagePerProxy() {
         if (src && elmIframe) {
+            isLoading = true;
             fetch(proxy + src)
                 .then((response) => response.json())
                 .then((json) => {
@@ -41,6 +44,8 @@
 
                         watchedA11yContent(doc);
                         testA11yRules();
+
+                        isLoading = false;
                     }
                 });
         }
@@ -51,16 +56,17 @@
     onMount(loadPagePerProxy);
 </script>
 
-<section>
+<section class="h-full w-full">
     <label title="URL to test"><input type="text" bind:value={src} /></label>
-    <iframe bind:this={elmIframe} src="" title="a11y-inspector"></iframe>
+    <div class="relative h-full w-full">
+        <Ripple class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform" show={isLoading} />
+        <iframe bind:this={elmIframe} src="" title="a11y-inspector" class="h-full w-full"></iframe>
+    </div>
 </section>
 
 <style>
     section {
         ---border-radius: 5px;
-        width: 100%;
-        height: 100%;
         box-sizing: border-box;
         padding: 1em;
         position: relative;
@@ -97,8 +103,6 @@
         }
     }
     iframe {
-        width: 100%;
-        height: 100%;
         border: 1px dashed hsl(0deg 0% 0% / 0.1);
         border-radius: var(---border-radius);
         box-shadow: inset 0 0 10px hsl(0deg 0% 0% / 0.2);

diff --git a/src/lib/components/ripple.svelte b/src/lib/components/ripple.svelte
@@ -0,0 +1,63 @@
+<script>
+    export let show = true;
+
+    let cls = undefined;
+    export { cls as class };
+</script>
+
+<div class="ripple {cls} {!show ? 'hidden ' : ''}">
+    <div></div>
+    <div></div>
+</div>
+
+<style>
+    .ripple,
+    .ripple div {
+        box-sizing: border-box;
+    }
+    .ripple {
+        position: absolute;
+        width: 80px;
+        height: 80px;
+    }
+    .ripple div {
+        position: absolute;
+        border: 4px solid currentColor;
+        opacity: 1;
+        border-radius: 50%;
+        animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+    }
+    .ripple div:nth-child(2) {
+        animation-delay: -0.5s;
+    }
+    @keyframes ripple {
+        0% {
+            top: 36px;
+            left: 36px;
+            width: 8px;
+            height: 8px;
+            opacity: 0;
+        }
+        4.9% {
+            top: 36px;
+            left: 36px;
+            width: 8px;
+            height: 8px;
+            opacity: 0;
+        }
+        5% {
+            top: 36px;
+            left: 36px;
+            width: 8px;
+            height: 8px;
+            opacity: 1;
+        }
+        100% {
+            top: 0;
+            left: 0;
+            width: 80px;
+            height: 80px;
+            opacity: 0;
+        }
+    }
+</style>
diff --git a/src/lib/content/common.svelte b/src/lib/content/common.svelte
@@ -1,14 +1,12 @@
 <script>
-import Headline from "$lib/components/headline.svelte";
-import Link from "$lib/components/link.svelte";
-import StoredCheckbox from "$lib/components/stored-checkbox.svelte";
+    import Headline from '$lib/components/headline.svelte';
+    import Link from '$lib/components/link.svelte';
+    import StoredCheckbox from '$lib/components/stored-checkbox.svelte';
 </script>
 
 <Headline tag="h2">Allgemein</Headline>
 
-<StoredCheckbox key="auto-tests">
-    Alle automatischen Accessibility-Tests laufen durch
-</StoredCheckbox>
+<StoredCheckbox key="auto-tests">Alle automatischen Accessibility-Tests laufen durch</StoredCheckbox>
 
 <StoredCheckbox key="axe-chrome-extension" label="Axe Chrome Extension">
     <Link href="https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd">Link</Link>
@@ -21,6 +19,6 @@ import StoredCheckbox from "$lib/components/stored-checkbox.svelte";
         <img src="assets/chrome-devtools.png" alt="Dev Console im Chrome" class="w-20" />
     </Link>
 </StoredCheckbox>
-<StoredCheckbox key="capo" label="Capo Chrome Extension (CleanUp Your <Head>)">
+<StoredCheckbox key="capo" label="Capo Chrome Extension (Get your `<head>` sorted)">
     <Link href="https://rviscomi.github.io/capo.js/user/extension/">Link</Link>
 </StoredCheckbox>