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

Commit790e4f9

Browse files
Dan doc nav no scroll (#1388)
1 parentc0fdeb0 commit790e4f9

File tree

6 files changed

+126
-36
lines changed

6 files changed

+126
-36
lines changed

‎pgml-dashboard/src/components/cms/index_link/template.html

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1+
<%
2+
let turbo_action_level_1 = r#"data-action="click->navigation-left-nav-docs#onNavigateManageLevel1" "#;
3+
let turbo_action_high_levels = r#"data-action="click->navigation-left-nav-docs#onNavigateManageHighLevels" "#;
4+
%>
15

2-
<divclass="nav flex-column"role="tablist"aria-orientation="vertical"data-controller="cms-index-link">
6+
<divclass="nav flex-column cms-level-<%- level %>"role="tablist"aria-orientation="vertical"data-controller="cms-index-link"data-level="<%- level %>">
37
<%
48
let color = if active {
59
"purple"
@@ -11,14 +15,14 @@
1115
%>
1216
<% if level == 1 {%>
1317
<divclass="d-flex flex-row gap-2 align-items-center">
14-
<divclass="menu-item flex-grow-1">
15-
<aclass='d-block p-2 <% if active {%><%- String::from("active") %><% } %>'href="<%- href %>">
18+
<divclass="menu-item flex-grow-1"data-navigation-left-nav-docs-target="level1Container">
19+
<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">
1620
<spanclass="text-wrap"><%- title %></span>
1721
</a>
1822
</div>
1923
</div>
2024
<% } else {%>
21-
<aclass="nav-link ps-1 text-break <%- color %>"href="<%- href %>"><%- title %></a>
25+
<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>
2226
<% } %>
2327

2428
<% } else {
@@ -37,22 +41,22 @@
3741

3842
<% if level == 1 {%>
3943
<divclass="menu-item flex-grow-1 d-flex flex-row align-items-center">
40-
<divclass='w-100 d-flex flex-row gap-2 align-items-start <% if active || open {%><%- String::from("active") %><% } %> justify-content-between'>
41-
<aclass='d-block p-2'href="<%- href %>">
44+
<divclass='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">
45+
<adata-turbo-is-visitableclass='d-block p-2'href="<%- href %>"<%- turbo_action_level_1 %> data-navigation-left-nav-docs-target="level1Link">
4246
<spanclass="text-wrap"><%- title %></span>
4347
</a>
4448
<divclass="pt-2">
45-
<spanclass="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>
49+
<spanclass="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>
4650
</div>
4751
</div>
4852
</div>
4953
<% } else {%>
5054
<spanclass="ps-1 py-0 d-flex justify-content-between align-items-start text-break">
51-
<aclass="nav-link px-0 text-break <%- color %>"href="<%- href %>">
55+
<adata-turbo-is-visitableclass="nav-link px-0 text-break <%- color %>"href="<%- href %>"<%- turbo_action_high_levels %> data-navigation-left-nav-docs-target="highLevels">
5256
<spanclass="text-wrap"><%- title %></span>
5357
</a>
5458
<divclass="pt-2">
55-
<spanclass="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>
59+
<spanclass="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>
5660
</div>
5761
</span>
5862
<% } %>

‎pgml-dashboard/src/components/layouts/head/template.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
<linkrel="stylesheet"href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"/>
7474

7575
<scriptasynctype="nomodule"src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
76-
<scriptdefertype="module"src="/dashboard/static/js/libs/turbo-7.3.0.min.js"></script>
76+
<scriptdefertype="module"src="/dashboard/static/js/libs/turbo-7.3.0.custom.min.js"></script>
7777

7878
<!-- Code Mirror -->
7979
<scriptdefertype="module"src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import{Controller}from"@hotwired/stimulus";
2+
3+
exportdefaultclassextendsController{
4+
statictargets=[
5+
"level1Container",
6+
"level1Link",
7+
"highLevels"
8+
];
9+
10+
// After page update we reset scroll position of nave back to where it was
11+
connect(){
12+
letnav=document.getElementsByClassName("doc-leftnav")
13+
if(nav.length>0){
14+
letposition=nav[0].getAttribute("data-scroll")
15+
nav[0].scrollTop=position
16+
}
17+
}
18+
19+
// trubo-frame permanent breakes bootstrap data attribute collapse for aria
20+
// so we manually controll collapse
21+
expand(e){
22+
letaria=e.currentTarget.getAttribute("aria-expanded")
23+
letid=e.currentTarget.getAttribute("aria-controls")
24+
25+
letbsCollapse=bootstrap.Collapse.getOrCreateInstance(document.getElementById(id))
26+
if(aria==="true"){
27+
bsCollapse.hide()
28+
e.currentTarget.setAttribute("aria-expanded","false")
29+
}else{
30+
bsCollapse.show()
31+
e.currentTarget.setAttribute("aria-expanded","true")
32+
}
33+
}
34+
35+
// Activly manage nav state for level 1 links
36+
onNavigateManageLevel1(e){
37+
this.removeAllActive()
38+
39+
letcontainer=e.currentTarget.closest("div")
40+
container.classList.add("active")
41+
42+
e.currentTarget.classList.add("active")
43+
44+
this.preventScrollOnNav()
45+
}
46+
47+
// Activly manage nav state for high level links
48+
onNavigateManageHighLevels(e){
49+
this.removeAllActive()
50+
51+
letcontainer=e.currentTarget.closest('div[data-level="1"]')
52+
letmenu=container.querySelector(".menu-item")
53+
letlink=menu.querySelector(".doc-left-nav-level1-link-container")
54+
55+
link.classList.add("active")
56+
57+
e.currentTarget.classList.add("purple")
58+
59+
this.preventScrollOnNav()
60+
}
61+
62+
// trubo-frame permanent scrolles nav to top on navigation so we capture the scrroll position prior
63+
// to updating the page so after we can set the scroll position back to where it was
64+
preventScrollOnNav(){
65+
letnav=document.getElementsByClassName("doc-leftnav")
66+
if(nav.length>0){
67+
letposition=nav[0].scrollTop;
68+
nav[0].setAttribute("data-scroll",position)
69+
}
70+
}
71+
72+
// Helper function to quickly remove all state styling
73+
removeAllActive(){
74+
for(leti=0;i<this.highLevelsTargets.length;i++){
75+
this.highLevelsTargets[i].classList.remove("purple")
76+
}
77+
78+
for(leti=0;i<this.level1ContainerTargets.length;i++){
79+
this.level1ContainerTargets[i].classList.remove("active")
80+
}
81+
82+
for(leti=0;i<this.level1LinkTargets.length;i++){
83+
this.level1LinkTargets[i].classList.remove("active")
84+
}
85+
}
86+
}

‎pgml-dashboard/src/components/navigation/left_nav/docs/template.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
%>
2525

2626
<% if !mobile { %>
27-
<divclass="doc-leftnav-container"data-controller="navigation-left-nav-docs">
28-
<navclass="doc-leftnav"data-action="scroll->navigation-left-nav-docs#showScrollbar">
27+
<divclass="doc-leftnav-container"id="cart-counter"data-controller="navigation-left-nav-docs"data-turbo-permanent>
28+
<navclass="doc-leftnav"data-scroll="0">
2929
<divclass="d-flex flex-column justify-content-between">
3030
<divclass="d-xl-flex flex-column py-4">
3131
<divclass="pt-2 ps-2 d-flex flex-column gap-4_5">

‎pgml-dashboard/static/js/libs/turbo-7.3.0.custom.min.js

Lines changed: 24 additions & 0 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎pgml-dashboard/static/js/libs/turbo-7.3.0.min.js

Lines changed: 0 additions & 24 deletions
This file was deleted.

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp