Skip to content

Dan doc nav no scroll #1388

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 26, 2024
Merged

Dan doc nav no scroll #1388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a49f690
doc lev nav maintain state
chillenberger Mar 20, 2024
f691f54
fix turbo bug
chillenberger Mar 26, 2024
59d7b24
Merge branch 'master' into dan-doc-nav-no-scroll
chillenberger Mar 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions pgml-dashboard/src/components/cms/index_link/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<%
let turbo_action_level_1 = r#"data-action="click->navigation-left-nav-docs#onNavigateManageLevel1" "#;
let turbo_action_high_levels = r#"data-action="click->navigation-left-nav-docs#onNavigateManageHighLevels" "#;
%>

<div class="nav flex-column" role="tablist" aria-orientation="vertical" data-controller="cms-index-link">
<div class="nav flex-column cms-level-<%- level %>" role="tablist" aria-orientation="vertical" data-controller="cms-index-link" data-level="<%- level %>">
<%
let color = if active {
"purple"
Expand All @@ -11,14 +15,14 @@
%>
<% if level == 1 {%>
<div class="d-flex flex-row gap-2 align-items-center">
<div class="menu-item flex-grow-1">
<a class='d-block p-2 <% if active {%><%- String::from("active") %><% } %>' href="<%- href %>">
<div class="menu-item flex-grow-1" data-navigation-left-nav-docs-target="level1Container">
<a data-turbo-is-visitable class='d-block p-2 <% if active {%><%- String::from("active") %><% } %>' href="<%- href %>" <%- turbo_action_level_1 %> data-navigation-left-nav-docs-target="level1Link">
<span class="text-wrap"><%- title %></span>
</a>
</div>
</div>
<% } else {%>
<a class="nav-link ps-1 text-break <%- color %>" href="<%- href %>"><%- title %></a>
<a data-turbo-is-visitable class="nav-link ps-1 text-break <%- color %>" href="<%- href %>" <%- turbo_action_high_levels %> data-navigation-left-nav-docs-target="highLevels"><%- title %></a>
<% } %>

<% } else {
Expand All @@ -37,22 +41,22 @@

<% if level == 1 {%>
<div class="menu-item flex-grow-1 d-flex flex-row align-items-center">
<div class='w-100 d-flex flex-row gap-2 align-items-start <% if active || open {%><%- String::from("active") %><% } %> justify-content-between'>
<a class='d-block p-2' href="<%- href %>">
<div class='w-100 d-flex flex-row gap-2 align-items-start <% if active || open {%><%- String::from("active") %><% } %> justify-content-between doc-left-nav-level1-link-container' data-navigation-left-nav-docs-target="level1Container">
<a data-turbo-is-visitable class='d-block p-2' href="<%- href %>" <%- turbo_action_level_1 %> data-navigation-left-nav-docs-target="level1Link">
<span class="text-wrap"><%- title %></span>
</a>
<div class="pt-2">
<span class="material-symbols-outlined rotate-on-aria-expanded text-white" data-bs-toggle="collapse" href="#doc-<%= id %>" role="button" aria-expanded="<%- aria %>" aria-controls="doc-<%= id %>">expand_more</span>
<span class="material-symbols-outlined rotate-on-aria-expanded text-white" href="#doc-<%= id %>" role="button" aria-expanded="<%- aria %>" aria-controls="doc-<%= id %>" data-action="click->navigation-left-nav-docs#expand">expand_more</span>
</div>
</div>
</div>
<% } else {%>
<span class="ps-1 py-0 d-flex justify-content-between align-items-start text-break" >
<a class="nav-link px-0 text-break <%- color %>" href="<%- href %>">
<a data-turbo-is-visitable class="nav-link px-0 text-break <%- color %>" href="<%- href %>" <%- turbo_action_high_levels %> data-navigation-left-nav-docs-target="highLevels">
<span class="text-wrap"><%- title %></span>
</a>
<div class="pt-2">
<span class="material-symbols-outlined rotate-on-aria-expanded" data-bs-toggle="collapse" href="#doc-<%= id %>" role="button" aria-expanded="<%- aria %>" aria-controls="doc-<%= id %>">expand_more</span>
<span class="material-symbols-outlined rotate-on-aria-expanded" href="#doc-<%= id %>" role="button" aria-expanded="<%- aria %>" aria-controls="doc-<%= id %>" data-action="click->navigation-left-nav-docs#expand">expand_more</span>
</div>
</span>
<% } %>
Expand Down
2 changes: 1 addition & 1 deletion pgml-dashboard/src/components/layouts/head/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<script async type="nomodule" src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script defer type="module" src="/dashboard/static/js/libs/turbo-7.3.0.min.js"></script>
<script defer type="module" src="/dashboard/static/js/libs/turbo-7.3.0.custom.min.js"></script>

<!-- Code Mirror -->
<script defer type="module" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
Expand Down
86 changes: 86 additions & 0 deletions pgml-dashboard/src/components/navigation/left_nav/docs/docs_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
static targets = [
"level1Container",
"level1Link",
"highLevels"
];

// After page update we reset scroll position of nave back to where it was
connect() {
let nav = document.getElementsByClassName("doc-leftnav")
if (nav.length > 0) {
let position = nav[0].getAttribute("data-scroll")
nav[0].scrollTop = position
}
}

// trubo-frame permanent breakes bootstrap data attribute collapse for aria
// so we manually controll collapse
expand(e) {
let aria = e.currentTarget.getAttribute("aria-expanded")
let id = e.currentTarget.getAttribute("aria-controls")

let bsCollapse = bootstrap.Collapse.getOrCreateInstance(document.getElementById(id))
if (aria === "true") {
bsCollapse.hide()
e.currentTarget.setAttribute("aria-expanded", "false")
} else {
bsCollapse.show()
e.currentTarget.setAttribute("aria-expanded", "true")
}
}

// Activly manage nav state for level 1 links
onNavigateManageLevel1(e) {
this.removeAllActive()

let container = e.currentTarget.closest("div")
container.classList.add("active")

e.currentTarget.classList.add("active")

this.preventScrollOnNav()
}

// Activly manage nav state for high level links
onNavigateManageHighLevels(e) {
this.removeAllActive()

let container = e.currentTarget.closest('div[data-level="1"]')
let menu = container.querySelector(".menu-item")
let link = menu.querySelector(".doc-left-nav-level1-link-container")

link.classList.add("active")

e.currentTarget.classList.add("purple")

this.preventScrollOnNav()
}

// trubo-frame permanent scrolles nav to top on navigation so we capture the scrroll position prior
// to updating the page so after we can set the scroll position back to where it was
preventScrollOnNav() {
let nav = document.getElementsByClassName("doc-leftnav")
if (nav.length > 0) {
let position = nav[0].scrollTop;
nav[0].setAttribute("data-scroll", position)
}
}

// Helper function to quickly remove all state styling
removeAllActive() {
for(let i = 0; i < this.highLevelsTargets.length; i++) {
this.highLevelsTargets[i].classList.remove("purple")
}

for (let i = 0; i < this.level1ContainerTargets.length; i++) {
this.level1ContainerTargets[i].classList.remove("active")
}

for (let i = 0; i < this.level1LinkTargets.length; i++) {
this.level1LinkTargets[i].classList.remove("active")
}
}
}
4 changes: 2 additions & 2 deletions pgml-dashboard/src/components/navigation/left_nav/docs/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
%>

<% if !mobile { %>
<div class="doc-leftnav-container" data-controller="navigation-left-nav-docs">
<nav class="doc-leftnav" data-action="scroll->navigation-left-nav-docs#showScrollbar">
<div class="doc-leftnav-container" id="cart-counter" data-controller="navigation-left-nav-docs" data-turbo-permanent>
<nav class="doc-leftnav" data-scroll="0">
<div class="d-flex flex-column justify-content-between">
<div class="d-xl-flex flex-column py-4">
<div class="pt-2 ps-2 d-flex flex-column gap-4_5">
Expand Down
24 changes: 24 additions & 0 deletions pgml-dashboard/static/js/libs/turbo-7.3.0.custom.min.js
View file
Open in desktop

Large diffs are not rendered by default.

24 changes: 0 additions & 24 deletions pgml-dashboard/static/js/libs/turbo-7.3.0.min.js
View file
Open in desktop

This file was deleted.