From c0112737dce20d793f3c79e27db6664178430762 Mon Sep 17 00:00:00 2001 From: Zach Daniel Date: Thu, 31 Mar 2022 16:59:53 -0400 Subject: [PATCH] WIP --- assets/js/app.js | 78 +++++++++++++++++++++++- lib/ash_hq_web/components/doc_sidebar.ex | 12 ++-- lib/ash_hq_web/components/right_nav.ex | 11 ++-- lib/ash_hq_web/pages/docs.ex | 49 +++++++-------- lib/ash_hq_web/views/app_view_live.ex | 8 +-- 5 files changed, 119 insertions(+), 39 deletions(-) diff --git a/assets/js/app.js b/assets/js/app.js index 962cf90..a220d51 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -48,6 +48,77 @@ Hooks.Docs = { } } +function onScrollChange() { + const docs = document.getElementById("docs-window"); + if(docs) { + const scrollTop = docs.scrollTop; + const topEl = Array.from(document.getElementsByClassName("nav-anchor")).filter((el) => { + return (el.offsetTop + el.clientHeight) >= scrollTop; + })[0]; + let hash; + if(window.location.hash){ + hash = window.location.hash.substring(1); + } + if(topEl && topEl.id !== hash){ + history.replaceState(null, null, `#${topEl.id}`) + window.location.hash = topEl.id; + const newTarget = document.getElementById(`right-nav-${topEl.id}`); + Array.from(document.getElementsByClassName("currently-active-nav")).forEach((el) => { + el.classList.remove("currently-active-nav"); + el.classList.remove("text-orange-600"); + el.classList.remove("dark:text-orange-400"); + }) + if(newTarget) { + newTarget.classList.add("dark:text-orange-400"); + newTarget.classList.add("text-orange-600"); + newTarget.classList.add("currently-active-nav") + } + } + } +} + +function handleHashChange(clear) { + if (window.location.hash) { + const el = document.getElementById("right-nav-" + window.location.hash.substring(1)) + if(el) { + if (clear) { + Array.from(document.getElementsByClassName("currently-active-nav")).forEach((el) => { + el.classList.remove("currently-active-nav"); + el.classList.remove("text-orange-600"); + el.classList.remove("dark:text-orange-400"); + }) + } + el.classList.add("dark:text-orange-400"); + el.classList.add("text-orange-600"); + el.classList.add("currently-active-nav") + scrollIntoView(el, { + behavior: 'smooth', + block: 'center' + }) + } + } +} + +Hooks.RightNav = { + mounted() { + handleHashChange(false); + const docs = document.getElementById("docs-window"); + if (docs) { + docs.addEventListener("scroll", () => onScrollChange()) + if(this.interval) { + clearInterval(this.interval) + }; + + this.interval = setInterval(() => handleHashChange(true), 100); + } + }, + destroyed() { + if(this.interval) { + clearInterval(this.interval) + } + } +} + let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") let liveSocket = new LiveSocket("/live", Socket, { params: {_csrf_token: csrfToken}, @@ -94,9 +165,14 @@ window.addEventListener("phx:js:scroll-to", (e) => { let scrolled = false; +window.addEventListener("phx:page-loading-start", () => { + scrolled = false; +}) + window.addEventListener("phx:page-loading-stop", ({detail}) => { if(detail.kind === "initial" && window.location.hash && !scrolled){ let hashEl = document.getElementById(window.location.hash.substring(1)); + console.log(hashEl); hashEl && hashEl.scrollIntoView(); scrolled = true; } @@ -109,14 +185,12 @@ window.addEventListener("phx:selected-versions", (e) => { }); window.addEventListener("phx:selected-types", (e) => { - console.log(e.detail); const cookie = e.detail.types.join(','); document.cookie = 'selected_types' + '=' + cookie + ';path=/'; }); window.addEventListener("keydown", (event) => { if(event.metaKey && event.key === "k") { - console.log("here3") document.getElementById("search-button").click() } }) diff --git a/lib/ash_hq_web/components/doc_sidebar.ex b/lib/ash_hq_web/components/doc_sidebar.ex index e56490c..5831034 100644 --- a/lib/ash_hq_web/components/doc_sidebar.ex +++ b/lib/ash_hq_web/components/doc_sidebar.ex @@ -17,7 +17,7 @@ defmodule AshHqWeb.Components.DocSidebar do def render(assigns) do ~F""" -