scroll into view when clicking on tab.

github-tijlxyz · github-tijlxyz · Sep 2, 2023 · Sep 2, 2023 · Sep 2, 2023 · Sep 2, 2023
commit d3306da81f0d6fdb792a405fa761a5f647246802
diff --git a/src/app.html b/src/app.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/src/components/Article.svelte b/src/components/Article.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { ndk } from "$lib/ndk";
-  import { afterUpdate, onMount } from "svelte";
-  import type { NDKEvent } from "@nostr-dev-kit/ndk";
-  import { formatDate } from "$lib/utils";
-  import { parse } from "$lib/articleParser.js";
-  import type { TabType } from "$lib/types";
+  import { ndk } from '$lib/ndk';
+  import { afterUpdate, onMount } from 'svelte';
+  import type { NDKEvent } from '@nostr-dev-kit/ndk';
+  import { formatDate } from '$lib/utils';
+  import { parse } from '$lib/articleParser.js';
+  import type { TabType } from '$lib/types';
 
   export let eventid: string;
   export let createChild: (type: TabType, data: string) => void;
@@ -14,10 +14,10 @@
     const elements = document.querySelectorAll('[id^="wikilink-v0-"]');
 
     elements.forEach((element) => {
-      element.addEventListener("click", () => {
+      element.addEventListener('click', () => {
         //alert(`Clicked element with ID: ${element.id}`);
         let a = element.id.slice(12);
-        createChild("articlefind", a);
+        createChild('articlefind', a);
       });
     });
   }
@@ -35,19 +35,18 @@
   <article class="prose font-sans mx-auto p-6 lg:max-w-4xl lg:pt-6 lg:pb-28">
     {#if event !== null}
       <h1 class="mb-0">
-        {#if event?.tags.find((e) => e[0] == "title")?.[0] && event?.tags.find((e) => e[0] == "title")?.[1]}
-          {event.tags.find((e) => e[0] == "title")?.[1]}
+        {#if event?.tags.find((e) => e[0] == 'title')?.[0] && event?.tags.find((e) => e[0] == 'title')?.[1]}
+          {event.tags.find((e) => e[0] == 'title')?.[1]}
         {:else}
-          {event.tags.find((e) => e[0] == "d")?.[1]}
+          {event.tags.find((e) => e[0] == 'd')?.[1]}
         {/if}
       </h1>
       <span>
         {#await event.author?.fetchProfile()}
           by <a href={`nostr:${event.author.npub}`}>...</a>,
         {:then profile}
           by <a href={`nostr:${event.author.npub}`}
-            >{profile !== null &&
-              JSON.parse(Array.from(profile)[0]?.content)?.name}</a
+            >{profile !== null && JSON.parse(Array.from(profile)[0]?.content)?.name}</a
           >,
         {/await}
         {#if event.created_at}

diff --git a/src/components/Search.svelte b/src/components/Search.svelte
@@ -36,14 +36,14 @@
     </p>
   </div>
   {#each results as result}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
     <div
       on:click={() => replaceSelf('article', result.id)}
       class="cursor-pointer px-4 py-5 bg-white border border-gray-300 hover:bg-slate-50 rounded-lg mt-2 min-h-[48px]"
     >
       <h1>
-        {result.tags.find((e) => e[0] == 'title')?.[0] && result.tags.find((e) => e[0] == 'title')?.[1]
+        {result.tags.find((e) => e[0] == 'title')?.[0] &&
+        result.tags.find((e) => e[0] == 'title')?.[1]
           ? result.tags.find((e) => e[0] == 'title')?.[1]
           : result.tags.find((e) => e[0] == 'd')?.[1]}
       </h1>
@@ -67,9 +67,7 @@
               192
             )}{#if String(result.tags.find((e) => e[0] == 'summary')?.[1])?.length > 192}...{/if}
         {:else}
-          {result.content.length <= 192
-            ? result.content
-            : result.content.slice(0, 189) + '...'}
+          {result.content.length <= 192 ? result.content : result.content.slice(0, 189) + '...'}
         {/if}
       </p>
     </div>

diff --git a/src/components/Searchbar.svelte b/src/components/Searchbar.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-  import { tabs } from "$lib/state";
-  import { generateRandomNumber, scrollTabIntoView } from "$lib/utils";
-  import type { Tab } from "$lib/types";
+  import { tabs } from '$lib/state';
+  import { generateRandomNumber, scrollTabIntoView } from '$lib/utils';
+  import type { Tab } from '$lib/types';
 
-  let query = "";
+  let query = '';
 
   function search() {
     if (query) {
       let newTabs = $tabs;
       const newTab: Tab = {
         id: generateRandomNumber(),
-        type: "articlefind",
-        data: query.toLowerCase().replaceAll(" ", "-"),
+        type: 'articlefind',
+        data: query.toLowerCase().replaceAll(' ', '-')
       };
       newTabs.push(newTab);
       tabs.set(newTabs);

diff --git a/src/components/Tab.svelte b/src/components/Tab.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { tabs } from '$lib/state';
   import type { Tab, TabType } from '$lib/types';
-  import { generateRandomNumber, scrollTabIntoView } from '$lib/utils';
+  import { generateRandomNumber, scrollTabIntoView, isElementInViewport } from '$lib/utils';
   import Article from './Article.svelte';
   import Search from './Search.svelte';
   export let tab: Tab;
@@ -61,8 +61,13 @@
   } else if (tab.type == 'article') {
     idtoload = tab.data;
   }
+
+  function handleClick(ev: { currentTarget: HTMLElement }) {
+    if (!isElementInViewport(ev.currentTarget)) scrollTabIntoView(ev.currentTarget);
+  }
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
 <div
   id={`wikitab-v0-${tab.id}`}
   class="
@@ -72,6 +77,7 @@
   min-w-[365px] max-w-[365px] lg:min-w-[32rem] lg:max-w-[32rem]
   rounded-lg border border-slate-500 bg-slate-50
   h-[calc(100vh_-_64px_-_32px)]"
+  on:click={handleClick}
 >
   <button on:click={removeSelf}
     ><svg

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -36,13 +36,26 @@ export function generateRandomNumber(): number {
   return randomNumber;
 }
 
-export function scrollTabIntoView(id: string) {
+export function scrollTabIntoView(el: string | HTMLElement) {
   setTimeout(() => {
-    const elements = document.querySelectorAll(`[id^="wikitab-v0-${id}"]`);
-    if (!elements[0]) return;
-    elements[0].scrollIntoView({
+    const element =
+      typeof el === 'string' ? document.querySelector(`[id^="wikitab-v0-${el}"]`) : el;
+    if (!element) return;
+
+    element.scrollIntoView({
       behavior: 'smooth',
       inline: 'start'
     });
   }, 1);
 }
+
+export function isElementInViewport(el: HTMLElement) {
+  const rect = el.getBoundingClientRect();
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -45,7 +45,6 @@
             /></svg
           >
         </button>
-        <!-- <Searchbar /> -->
       </div>
       <div class="ml-6 flex items-center">
         <button

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,22 +1,25 @@
 <script lang="ts">
-  import Tab from "../components/Tab.svelte";
-  import { tabs } from "$lib/state";
-  import Searchbar from "../components/Searchbar.svelte";
+  import Tab from '../components/Tab.svelte';
+  import { tabs } from '$lib/state';
+  import Searchbar from '../components/Searchbar.svelte';
+  import { scrollTabIntoView } from '$lib/utils';
 </script>
 
 <div class="flex overflow-x-scroll pb-2 scroll-smooth">
   {#each $tabs as tab (tab.id)}
     <Tab {tab} />
   {/each}
+  <!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
   <div
     id={`wikitab-v0-special-search`}
     class="
-overflow-y-scroll
+overflow-y-auto
 overflow-x-hidden
 mx-2 p-4 mt-2
 min-w-[365px] max-w-[365px] lg:min-w-[32rem] lg:max-w-[32rem]
 rounded-lg border border-slate-500 bg-slate-50
 h-[calc(100vh_-_64px_-_32px)]"
+    on:click={(ev) => scrollTabIntoView(ev.currentTarget)}
   >
     <div class="p-6"><Searchbar /></div>
   </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,6 @@ @@
                 /></svg
               >
             </button>
-            <!-- <Searchbar /> -->
           </div>
           <div class="ml-6 flex items-center">
             <button
@@ Expand Down @@