Merge pull request #18 from hirasso/feat/document-mirroring

feat: mirror html elements with the `:root`'s scroll position
hirasso · Dec 26, 2023 · 208bd24 · 208bd24
2 parents 70568ed + 161d596
commit 208bd24
Show file tree

Hide file tree

Showing 17 changed files with 277 additions and 307 deletions.
diff --git a/README.md b/README.md
@@ -59,7 +59,7 @@ Suppose you have the following HTML:
 </style>
 ```
 
-This is how you can mirror the scroll position between the two `div.scroller`:
+This is how you would mirror the scroll position between the two `div.scroller`:
 
 ```js
 import ScrollMirror from "scrollmirror";
@@ -69,6 +69,16 @@ new ScrollMirror(document.querySelectorAll(".scroller"));
 
 See also this [minimal example on CodePen](https://codepen.io/rassohilber/pen/JjxwJpo)
 
+💡 To mirror the scroll position from and to the `window`, you would have to add one of `:root`, `html` or `body` to the selector:
+
+```js
+new ScrollMirror(document.querySelectorAll(':root, .scroller'));
+/** or */
+new ScrollMirror(document.querySelectorAll('html, .scroller'));
+/** or */
+new ScrollMirror(document.querySelectorAll('body, .scroller'));
+```
+
 ## Options
 
 You can pass in a few additional options to ScrollMirror as the second argument:

diff --git a/docs/src/components/Footer.astro b/docs/src/components/Footer.astro
@@ -1,6 +1,2 @@
 ---
 ---
-
-<script>
-	import "../js/global.js";
-</script>
diff --git a/docs/src/components/Head.astro b/docs/src/components/Head.astro
@@ -3,11 +3,12 @@ export interface Props {
 	title: string;
 	description: string;
 	image?: string;
+	noindex?: boolean;
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = '/social.png' } = Astro.props;
+const { title, description, noindex, image = '/social.png' } = Astro.props;
 ---
 
 <!-- Global Metadata -->
@@ -16,6 +17,8 @@ const { title, description, image = '/social.png' } = Astro.props;
 <link rel="icon" type="image/png" href="/favicon.png" />
 <meta name="generator" content={Astro.generator} />
 
+{noindex && <meta name="robots" content="noindex, nofollow" />}
+
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />
 

diff --git a/docs/src/components/Sidebar.astro b/docs/src/components/Sidebar.astro
diff --git a/docs/src/components/examples/Table.astro b/docs/src/components/examples/Table.astro
@@ -49,7 +49,7 @@ const getLabel = (colIndex: number, rowIndex: number): string => {
   }
   .cell {
     aspect-ratio: 1;
-    width: 5rem;
+    width: 10rem;
     background: yellow;
     display: grid;
     place-content: center;

diff --git a/docs/src/components/examples/Tiles.astro b/docs/src/components/examples/Tiles.astro
@@ -49,6 +49,7 @@ const getLabel = (index: number): string => {
   }
   .tiles--horizontal {
     display: flex;
+    width: max-content;
   }
   .tiles--horizontal .tile {
     flex: none;

diff --git a/docs/src/components/examples/WindowExample.astro b/docs/src/components/examples/WindowExample.astro
diff --git a/docs/src/js/global.ts b/docs/src/js/global.ts
@@ -1,24 +0,0 @@
-import ScrollMirror from "../../../src/index.js";
-
-const $ = document.querySelector.bind(document);
-const $$ = document.querySelectorAll.bind(document);
-
-/** Vertical mirroring */
-new ScrollMirror($$(".scroller.--vertical"));
-/** Horizontal mirroring */
-new ScrollMirror($$(".scroller.--horizontal"));
-/** Mirroring in both directions */
-new ScrollMirror($$(".scroller.--both"));
-
-/** Mirroring with the window */
-new ScrollMirror([window, $<HTMLElement>(".scroller.--sidebar")]);
-
-/**
- * The UI for the window example
- */
-function windowExampleUI() {
-  $('[data-action=toggle-sidebar]')?.addEventListener("click", () => {
-    $('.scroller.--sidebar')?.classList.toggle('--show');
-  });
-}
-windowExampleUI();

diff --git a/docs/src/js/helpers.ts b/docs/src/js/helpers.ts
@@ -0,0 +1,2 @@
+export const $ = document.querySelector.bind(document);
+export const $$ = document.querySelectorAll.bind(document);
diff --git a/docs/src/layouts/Default.astro → docs/src/layouts/Layout.astro b/docs/src/layouts/Default.astro → docs/src/layouts/Layout.astro
@@ -3,35 +3,49 @@ import "../styles/reset.css";
 import "../styles/fonts.css";
 import "../styles/global.css";
 
+import { ArrowLeftIcon } from "astro-feather";
+
 import Head from "../components/Head.astro";
 import Footer from "../components/Footer.astro";
 interface Props {
   title?: string;
   description?: string;
   isFrontPage?: boolean;
+  noindex?: boolean;
+  intro?: string;
 }
 import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
-const { title, description } = Astro.props;
+const { title, description, noindex, isFrontPage, intro } = Astro.props;
 ---
 
 <!doctype html>
 <html lang="en">
   <Head
     title={title ? `${title} - ${SITE_TITLE}` : SITE_TITLE}
     description={description ?? SITE_DESCRIPTION}
+    noindex={noindex}
   />
   <body>
     <div class="container">
       <header>
         <h1 class="site-title">ScrollMirror</h1>
-        <p class="is-h2">
-          Sync the scroll position of multiple elements on your page
-        </p>
+        <slot name="after-header"/>
         <nav>
           <ul class="navlist">
-            <!-- <li class="navlist_item"><a class="button" href="/scrollmirror">Demo</a></li>
-            <li class="navlist_item"><a class="button" href="/scrollmirror/docs">Docs</a></li> -->
-            <li class="navlist_item"><a class="button" href="https://github.com/hirasso/scrollmirror">GitHub</a></li>
+            {
+              !isFrontPage && (
+                <li class="navlist_item">
+                  <a class="button" href="/">
+                    <ArrowLeftIcon />
+                    <span>Back</span>
+                  </a>
+                </li>
+              )
+            }
+            <li class="navlist_item">
+              <a class="button" href="https://github.com/hirasso/scrollmirror"
+                >GitHub</a>
+            </li>
           </ul>
         </nav>
       </header>
@@ -42,12 +56,15 @@ const { title, description } = Astro.props;
     <style>
       header {
         text-align: center;
-        padding: 5vw var(--gap);
+        padding: 5vw 4vw;
+        display: grid;
+        gap: var(--half-gap);
       }
       .site-title {
-        font-size: clamp(3rem, 12vw, 8rem);
+        font-size: min(120px, 12vw);
         --_offset: 0.02em;
         font-weight: 200;
+        line-height: 0.9;
       }
       .is-h2 {
         padding-block: 0;

diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
@@ -1,13 +1,14 @@
 ---
-import Layout from "../layouts/Default.astro";
+import Layout from "../layouts/Layout.astro";
 import VerticalExample from "../components/examples/Vertical.astro";
 import HorizontalExample from "../components/examples/Horizontal.astro";
 import BothDirectionsExample from "../components/examples/BothDirections.astro";
 import WindowExample from "../components/examples/WindowExample.astro";
+import { ArrowRightIcon } from "astro-feather";
 ---
 
 <Layout isFrontPage={true}>
-
+  <p class="is-h2" slot="after-header">Sync the scroll position of multiple elements on your page</p>
   <section id="vertical">
     <header class="section_header">
       <h2 class="is-h2"><a href="#vertical">Vertical</a></h2>
@@ -29,24 +30,29 @@ import WindowExample from "../components/examples/WindowExample.astro";
     <BothDirectionsExample />
   </section>
 
-  <section id="window">
+  <section id="footer">
     <header class="section_header">
-      <h2 class="is-h2"><a href="#window">Between the window and DOM elements</a></h2>
-      <button type="button" class="button" data-action=toggle-sidebar>Show me!</button>
+      <h2 class="is-h2">Experimental: Between the root and HTML elements</h2>
+      <a href="/root" class="button"><span>View Demo</span> <ArrowRightIcon /></a>
     </header>
-    <WindowExample />
   </section>
 </Layout>
 
 <style>
-  .section_header {
-    padding: var(--gap);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--half-gap);
-  }
-  #window {
-    display: none;
+  #footer {
+    margin-block: 5%;
   }
-</style>
+</style>
+
+<script>
+  import ScrollMirror from "../../../src/index.js";
+
+  import { $$ } from "../js/helpers";
+  /** Vertical mirroring */
+  new ScrollMirror($$(".scroller.--vertical"));
+  /** Horizontal mirroring */
+  new ScrollMirror($$(".scroller.--horizontal"));
+  /** Mirroring in both directions */
+  new ScrollMirror($$(".scroller.--both"));
+
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const $ = document.querySelector.bind(document);
		export const $$ = document.querySelectorAll.bind(document);