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

Commit65b898d

Browse files
Dan docs left nav manage state w js update (#1417)
1 parent2b83a11 commit65b898d

File tree

4 files changed

+138
-37
lines changed

4 files changed

+138
-37
lines changed

‎pgml-dashboard/src/components/cms/index_link/mod.rs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ pub struct IndexLink {
1212
pubopen:bool,
1313
pubactive:bool,
1414
publevel:i32,
15+
pubid_suffix:String,
1516
}
1617

1718
implIndexLink{
@@ -25,6 +26,7 @@ impl IndexLink {
2526
open:false,
2627
active:false,
2728
level,
29+
id_suffix:"".to_owned(),
2830
}
2931
}
3032

@@ -70,4 +72,12 @@ impl IndexLink {
7072
}
7173
self
7274
}
75+
76+
// Adds a suffix to this and all children ids.
77+
// this prevents id collision with multiple naves on one screen
78+
// like d-none for mobile nav
79+
pubfnid_suffix(mutself,id_suffix:&str) ->IndexLink{
80+
self.id_suffix = id_suffix.to_owned();
81+
self
82+
}
7383
}

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
<spanclass="text-wrap"><%- title %></span>
4747
</a>
4848
<divclass="pt-2">
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>
49+
<spanclass="material-symbols-outlined rotate-on-aria-expanded text-white"href="#doc-<%= id %><%- id_suffix %>"role="button"aria-expanded="<%- aria %>"aria-controls="doc-<%= id %><%- id_suffix %>"data-action="click->navigation-left-nav-docs#toggle">expand_more</span>
5050
</div>
5151
</div>
5252
</div>
@@ -56,15 +56,16 @@
5656
<spanclass="text-wrap"><%- title %></span>
5757
</a>
5858
<divclass="pt-2">
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>
59+
<spanclass="material-symbols-outlined rotate-on-aria-expanded"href="#doc-<%= id %><%- id_suffix %>"role="button"aria-expanded="<%- aria %>"aria-controls="doc-<%= id %><%- id_suffix %>"data-action="click->navigation-left-nav-docs#toggle">expand_more</span>
6060
</div>
6161
</span>
6262
<% } %>
6363

64-
<divclass="collapse <%- show %>"id="doc-<%= id %>">
64+
<divclass="collapse <%- show %>"id="doc-<%= id %><%- id_suffix %>">
6565
<divclass='nav flex-column level-<%- level %>-list'role="tablist"aria-orentation="vertical">
6666
<% for child in children.into_iter() { %>
67-
<%- child.render_once().unwrap() %>
67+
<% let child = child.id_suffix(&id_suffix); %>
68+
<%- child.render_once().unwrap() %>
6869
<% } %>
6970
</div>
7071
</div>
Lines changed: 118 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,154 @@
11
import{Controller}from"@hotwired/stimulus";
22

33
exportdefaultclassextendsController{
4-
statictargets=["level1Container","level1Link","highLevels"];
4+
statictargets=["level1Container","level1Link","highLevels","leftNav"];
55

6-
// After page update we reset scroll position of nave back to where it was
6+
// After page update we reset scroll position of nav back to where it
7+
// was and ensure left nave and window location match.
78
connect(){
89
letnav=document.getElementsByClassName("doc-leftnav");
910
if(nav.length>0){
1011
letposition=nav[0].getAttribute("data-scroll");
1112
nav[0].scrollTop=position;
1213
}
14+
15+
this.callback=()=>{
16+
this.setNavToLocation();
17+
};
18+
19+
document.addEventListener("turbo:load",this.callback);
1320
}
1421

15-
// trubo-frame permanent breakes bootstrap data attribute collapse for aria
16-
// so we manually controll collapse
17-
expand(e){
18-
letaria=e.currentTarget.getAttribute("aria-expanded");
19-
letid=e.currentTarget.getAttribute("aria-controls");
22+
// The active tags should always be set to the current page location
23+
setNavToLocation(){
24+
consttag="a[href='"+window.location.pathname+"']";
25+
26+
letlink=this.element.querySelectorAll(tag);
27+
if(link.length>0){
28+
if(
29+
link[0].getAttribute("data-navigation-left-nav-docs-target")==
30+
"highLevels"
31+
){
32+
this.setHighLevelLeftNav(link[0]);
33+
}else{
34+
this.setLevel1LeftNav(link[0]);
35+
}
36+
}
37+
}
2038

21-
letbsCollapse=bootstrap.Collapse.getOrCreateInstance(
22-
document.getElementById(id),
39+
expandSubmenuIfExists(containerEl){
40+
constcontrollerEl=containerEl.querySelector(
41+
"[data-action='click->navigation-left-nav-docs#toggle']",
2342
);
43+
controllerEl ?this.expand(controllerEl) :null;
44+
}
45+
46+
// Finds all parent submenus this element is in and expands them. Takes
47+
// the element containing the current level
48+
expandAllParents(element){
49+
letlevel=element.getAttribute("data-level");
50+
51+
this.expandSubmenuIfExists(element);
52+
if(level>1){
53+
letnext="div[data-level='"+(parseInt(level)-1)+"']";
54+
this.expandAllParents(element.closest(next));
55+
}
56+
}
57+
58+
// turbo-frame-permanent breaks bootstrap data attribute collapse for aria
59+
// so we manually control collapse
60+
toggle(event){
61+
letaria=event.currentTarget.getAttribute("aria-expanded");
62+
2463
if(aria==="true"){
25-
bsCollapse.hide();
26-
e.currentTarget.setAttribute("aria-expanded","false");
64+
this.collapse(event.currentTarget);
2765
}else{
66+
this.expand(event.currentTarget);
67+
}
68+
}
69+
70+
// Expands the submenu, takes submenu control element.
71+
expand(element){
72+
letid=element.getAttribute("aria-controls");
73+
letaria=element.getAttribute("aria-expanded");
74+
75+
if(aria==="false"){
76+
letbsCollapse=bootstrap.Collapse.getOrCreateInstance(
77+
document.getElementById(id),
78+
);
2879
bsCollapse.show();
29-
e.currentTarget.setAttribute("aria-expanded","true");
80+
element.setAttribute("aria-expanded","true");
3081
}
3182
}
3283

33-
// Activly manage nav state for level 1 links
34-
onNavigateManageLevel1(e){
84+
// Collapses the submenu, takes submenu control element.
85+
collapse(element){
86+
letid=element.getAttribute("aria-controls");
87+
letaria=element.getAttribute("aria-expanded");
88+
89+
if(aria==="true"){
90+
letbsCollapse=bootstrap.Collapse.getOrCreateInstance(
91+
document.getElementById(id),
92+
);
93+
bsCollapse.hide();
94+
element.setAttribute("aria-expanded","false");
95+
}
96+
}
97+
98+
// Actively manage nav state for high level links.
99+
setHighLevelLeftNav(element){
35100
this.removeAllActive();
36101

37-
letcontainer=e.currentTarget.closest("div");
38-
container.classList.add("active");
102+
constparentContainer=element.closest('div[data-level="1"]');
103+
constparentMenu=parentContainer.querySelector(".menu-item");
104+
constparentLink=parentMenu.querySelector(
105+
".doc-left-nav-level1-link-container",
106+
);
39107

40-
e.currentTarget.classList.add("active");
108+
parentLink.classList.add("active");
109+
element.classList.add("purple");
110+
111+
constcontainer=element.parentElement;
112+
this.expandSubmenuIfExists(container);
113+
114+
constlevelEl=container.closest("div[data-level]");
115+
this.expandAllParents(levelEl);
41116

42117
this.preventScrollOnNav();
43118
}
44119

45-
//Activly manage nav state forhighlevel links
46-
onNavigateManageHighLevels(e){
120+
//Actively manage nav state for level 1 links
121+
setLevel1LeftNav(element){
47122
this.removeAllActive();
48123

49-
letcontainer=e.currentTarget.closest('div[data-level="1"]');
50-
letmenu=container.querySelector(".menu-item");
51-
letlink=menu.querySelector(".doc-left-nav-level1-link-container");
124+
constcontainer=element.closest("div");
125+
container.classList.add("active");
126+
127+
element.classList.add("active");
52128

53-
link.classList.add("active");
129+
this.expandSubmenuIfExists(container);
54130

55-
e.currentTarget.classList.add("purple");
131+
this.preventScrollOnNav();
132+
}
133+
134+
// Actions to take when nav link is clicked
135+
// currently just gets the scroll position before state change
136+
onNavigateManageLevel1(){
137+
this.preventScrollOnNav();
138+
}
56139

140+
// Actions to take when nav link is clicked
141+
// currently just gets the scroll position before state change
142+
onNavigateManageHighLevels(){
57143
this.preventScrollOnNav();
58144
}
59145

60-
//trubo-frame permanentscrolles nav to top on navigation so we capture thescrroll position prior
146+
//turbo-frame permanentscrolls nav to top on navigation so we capture thescroll position prior
61147
// to updating the page so after we can set the scroll position back to where it was
62148
preventScrollOnNav(){
63-
letnav=document.getElementsByClassName("doc-leftnav");
64-
if(nav.length>0){
65-
letposition=nav[0].scrollTop;
66-
nav[0].setAttribute("data-scroll",position);
149+
if(this.hasLeftNavTarget){
150+
letposition=this.leftNavTarget.scrollTop;
151+
this.leftNavTarget.setAttribute("data-scroll",position);
67152
}
68153
}
69154

@@ -81,4 +166,8 @@ export default class extends Controller {
81166
this.level1LinkTargets[i].classList.remove("active");
82167
}
83168
}
169+
170+
disconnect(){
171+
document.removeEventListener("turbo:load",this.callback);
172+
}
84173
}

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

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

2626
<% if !mobile { %>
27-
<divclass="doc-leftnav-container"id="cart-counter"data-controller="navigation-left-nav-docs"data-turbo-permanent>
28-
<navclass="doc-leftnav"data-scroll="0">
27+
<divclass="doc-leftnav-container"id="doc-leftnav-container"data-controller="navigation-left-nav-docs"data-turbo-permanent>
28+
<navclass="doc-leftnav"data-scroll="0"data-navigation-left-nav-docs-target="leftNav">
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">
@@ -52,7 +52,7 @@
5252
<navclass="navbar px-0">
5353
<divclass="card nav guides rounded-0 w-100">
5454
<divclass="card-body py-2 py-xl-4">
55-
<aclass="my-1 d-flex justify-content-between align-items-center text-white"role="button"data-bs-toggle="collapse"href="#guides"aria-expanded="false"aria-congrols="guides">
55+
<aclass="my-1 d-flex justify-content-between align-items-center text-white"role="button"data-bs-toggle="collapse"href="#guides"aria-expanded="false"aria-controls="guides">
5656
<span>Docs</span><spanclass="material-symbols-outlined rotate-on-aria-expanded">expand_more</span>
5757
</a>
5858
<divclass="collapse border-top pt-2"id="guides">
@@ -61,9 +61,10 @@
6161
<%+ doc_link %>
6262
<% } else { %>
6363
<divclass="d-flex flex-column pt-2">
64-
<%- title(doc_link.title) %>
64+
<%- title(doc_link.title.to_uppercase()) %>
6565

6666
<% for item in doc_link.children {%>
67+
<% let item = item.id_suffix("mobile"); %>
6768
<%+ item %>
6869
<% } %>
6970
</div>

0 commit comments

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