Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Merged
chillenberger merged 3 commits intomasterfromdan-doc-nav-no-scroll
Mar 26, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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 deletionspgml-dashboard/src/components/cms/index_link/template.html
View file
Open in desktop
Original file line numberDiff line numberDiff 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">
<adata-turbo-is-visitableclass='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>
<adata-turbo-is-visitableclass="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">
<adata-turbo-is-visitableclass='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 %>">
<adata-turbo-is-visitableclass="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
View file
Open in desktop
Original file line numberDiff line numberDiff 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
View file
Open in desktop
Original file line numberDiff line numberDiff 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")
}
}
}
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionspgml-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 deletionspgml-dashboard/static/js/libs/turbo-7.3.0.min.js
View file
Open in desktop

This file was deleted.


[8]ページ先頭

©2009-2025 Movatter.jp