🌐 AI搜索 & 代理 主页
Skip to content

Commit b01f9d7

Browse files
chillenbergerchillenberger
committed
fix current product nav to maintain state on FE
1 parent 2123430 commit b01f9d7

File tree

10 files changed

+88
-9
lines changed

10 files changed

+88
-9
lines changed

‎pgml-dashboard/src/components/left_nav_menu/left-nav-menu.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Controller } from "@hotwired/stimulus";
2+
3+
export default class extends Controller {
4+
static targets = [
5+
"link",
6+
];
7+
8+
// When page reloads we need to set the left nav to the current window
9+
// location since left nave is turbo permanent. Trigger this on event
10+
// rather than on connect since on connect() will fire prior to backend
11+
// redirects.
12+
connect() {
13+
this.callback = () => {
14+
this.setLeftNavToLocation();
15+
}
16+
17+
document.addEventListener("turbo:load", this.callback);
18+
}
19+
20+
setLeftNavToLocation() {
21+
this.removeAllActive();
22+
23+
let tag = "a[href='" + window.location.pathname + "']";
24+
console.log("tag: " + tag)
25+
let elements = this.element.querySelectorAll(tag);
26+
27+
if (elements.length > 0) {
28+
console.log("found element " + elements[0].href)
29+
elements[0].classList.add("active");
30+
}
31+
}
32+
33+
// Helper function to quickly remove all state styling
34+
removeAllActive() {
35+
for (let i = 0; i < this.linkTargets.length; i++) {
36+
this.linkTargets[i].classList.remove("active");
37+
}
38+
}
39+
40+
disconnect() {
41+
document.removeEventListener("turbo:load", this.callback);
42+
}
43+
}

‎pgml-dashboard/src/components/left_nav_menu/template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<% if !link.hide_for_lg_screens { %>
55
<li class="menu-item leftnav-collapse-affect expanded <% if link.disabled { %>disabled<% } %>" >
66
<a
7-
data-left-nav-menu-target="<%- link.name.to_lowercase() %>"
7+
data-left-nav-menu-target="link"
88
class="d-flex align-items-center justify-content-start gap-2 <% if link.disabled { %> disabled <% } %> <% if link.active { %> active <% } %>"
99
href="<%= link.href %>"
1010
>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
<nav class="navbar px-0">
5353
<div class="card nav guides rounded-0 w-100">
5454
<div class="card-body py-2 py-xl-4">
55-
<a class="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+
<a class="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><span class="material-symbols-outlined rotate-on-aria-expanded">expand_more</span>
5757
</a>
5858
<div class="collapse border-top pt-2" id="guides">

‎pgml-dashboard/src/components/navigation/left_nav/web_app/mod.rs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ pub struct WebApp {
88
pub upper_nav: StaticNav,
99
pub lower_nav: StaticNav,
1010
pub dropdown_nav: StaticNav,
11+
pub id: Option<String>,
1112
}
1213

1314
impl WebApp {
@@ -16,8 +17,14 @@ impl WebApp {
1617
upper_nav,
1718
lower_nav,
1819
dropdown_nav,
20+
id: None
1921
}
2022
}
23+
24+
pub fn id(mut self, id: &str) -> WebApp {
25+
self.id = Some(id.to_string());
26+
self
27+
}
2128
}
2229

2330
component!(WebApp);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
<% use crate::components::{LeftNavMenu, Dropdown}; %>
3-
<div class="leftnav-container py-3 font-family-primary" data-controller="navigation-left-nav-web-app">
3+
<div class="leftnav-container py-3 font-family-primary" data-controller="navigation-left-nav-web-app" data-turbo-permanent id='<%- id.unwrap_or_else(|| String::from("defaultId"))%>'>
44
<nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
55
<div class="d-flex flex-column justify-content-between h-100 menu-container leftnav-collapse-affect expanded">
66
<div class="d-flex flex-column">

‎pgml-dashboard/src/components/navigation/left_nav/web_app/web_app_controller.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Controller } from "@hotwired/stimulus";
2+
3+
export default class extends Controller {
4+
static targets = [];
5+
6+
connect() {}
7+
8+
}

‎pgml-dashboard/src/components/static_nav/mod.rs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
use crate::components::StaticNavLink;
2+
use std::hash::{DefaultHasher, Hash, Hasher};
23

34
#[derive(Debug, Clone, Default)]
45
pub struct StaticNav {
@@ -16,4 +17,17 @@ impl StaticNav {
1617
None => StaticNavLink::default(),
1718
}
1819
}
20+
21+
pub fn unique_id(&self) -> String {
22+
let mut id = String::new();
23+
for link in &self.links {
24+
id.push_str(&link.name);
25+
id.push_str(&link.disabled.to_string());
26+
id.push_str(&link.href);
27+
}
28+
29+
let mut s = DefaultHasher::new();
30+
id.hash(&mut s);
31+
format!("nav{}", s.finish().to_string())
32+
}
1933
}

‎pgml-dashboard/static/css/scss/components/_navs.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@
184184
}
185185
}
186186

187-
&:active, &:focus, &:target, .active {
187+
&:active:not(.disabled), &:focus:not(.disabled), &:target:not(.disabled), .active:not(.disabled) {
188188
background-color: #{$neon-tint-100};
189189
color: #{$gray-100};
190190
border-radius: calc($border-radius / 2);

‎pgml-dashboard/static/js/extend-bs-collapse.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// extends bootstraps collapse component by adding collapse state class to any
22
// html element you like. This is useful for adding style changes to elements
3-
// that do not need to collapse, when a collapse state change occures.
3+
// that do not need to collapse, when a collapse state change occurs.
44
import {
55
Controller
66
} from '@hotwired/stimulus'
@@ -19,10 +19,12 @@ export default class extends Controller {
1919
this.navStates = ['collapsing', 'collapsed', 'expanding', 'expanded']
2020
this.events = ['hide.bs.collapse', 'hidden.bs.collapse', 'show.bs.collapse', 'shown.bs.collapse']
2121

22+
this.callback = () => {
23+
this.getAllAffected().forEach(item => this.toggle(item))
24+
}
25+
2226
this.events.forEach(event => {
23-
this.stateReferenceTarget.addEventListener(event, () => {
24-
this.getAllAffected().forEach(item => this.toggle(item))
25-
})
27+
this.stateReferenceTarget.addEventListener(event, this.callback)
2628
})
2729
}
2830

@@ -44,4 +46,9 @@ export default class extends Controller {
4446
item.classList.add(eClass)
4547
}
4648

49+
disconnect() {
50+
this.events.forEach(event => {
51+
this.stateReferenceTarget.removeEventListener(event, this.callback)
52+
})
53+
}
4754
}

‎pgml-dashboard/templates/layout/web_app_base.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<%+ WebAppNavbar::new(left_nav_links, account_management_nav) %>
2828

2929
<div class="d-flex">
30-
<%+ WebAppLeftNav::new( upper_left_nav, lower_left_nav, dropdown_nav ) %>
30+
<%+ WebAppLeftNav::new( upper_left_nav.clone(), lower_left_nav, dropdown_nav ).id(&upper_left_nav.unique_id()) %>
3131

3232
<div class="clear-from-under-navbar flex-grow-1 min-vw-0">
3333
<div class="px-4 px-sm-5 py-3" style="position: absolute">

0 commit comments

Comments
 (0)