Skip to content

Commit 43880b1

Browse files
chrismoroneychrismoroney
committed
remove any fixes to arm-top-nav and arm-footer-nav
1 parent 5aed18b commit 43880b1

3 files changed

Lines changed: 2 additions & 296 deletions

File tree

‎assets/css/cross-page.css‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -221,14 +221,6 @@ table tbody td {
221221
background-color: #010101;
222222
}
223223

224-
arm-top-navigation.lp-top-navigation {
225-
--arm-green: var(--lp-accent-secondary);
226-
--arm-web-safe-green: var(--lp-accent-secondary);
227-
--ads-ui-green-65: var(--lp-accent-secondary);
228-
--ads-ui-green-70: var(--lp-accent-secondary);
229-
--ads-ui-green-80: var(--lp-accent-secondary);
230-
}
231-
232224
/* Fix Masthead Height */
233225
#expanded-masthead {
234226
background-color: transparent;

‎themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<!-- No masthead on homepage, as that has a special gradient look/feel -->
99
{{ if .IsHome }}
1010
<div id="global-nav-height-fixer" class="nav-black">
11-
<arm-top-navigation class="lp-top-navigation" observe="#breadcrumb-element"></arm-top-navigation> <!-- to set to all black all the time: observe="head" -->
11+
<arm-top-navigation observe="#breadcrumb-element"></arm-top-navigation> <!-- to set to all black all the time: observe="head" -->
1212
</div>
1313
<div id="only-breadcrumb-masthead">
1414
<div class="is-responsive-width">
@@ -20,7 +20,7 @@
2020
<div id="nav-masthead-breadcrumbs">
2121
<!-- Global Nav -->
2222
<div id="global-nav-height-fixer" class="nav-transparent">
23-
<arm-top-navigation class="lp-top-navigation" observe="#breadcrumb-element"></arm-top-navigation>
23+
<arm-top-navigation observe="#breadcrumb-element"></arm-top-navigation>
2424
</div>
2525
<!-- Masthead -->
2626
<div id="expanded-masthead">

‎themes/arm-design-system-hugo-theme/static/js/authentication.js‎

Lines changed: 0 additions & 286 deletions
Original file line numberDiff line numberDiff line change
@@ -243,270 +243,6 @@ function renderAuthInTopNav() {
243243

244244
}
245245

246-
function setArmAccountLoginButtonLevel() {
247-
const shadowRoot = document.querySelector("arm-top-navigation")?.shadowRoot;
248-
if (!shadowRoot) return;
249-
250-
const loginButton = shadowRoot.querySelector(".c-utility-navigation-login__sign-in-button") ||
251-
Array.from(shadowRoot.querySelectorAll("ads-button, button, a, [role='button']")).find((element) => {
252-
return (element.textContent || "").trim() === "Login";
253-
});
254-
if (!loginButton) return;
255-
256-
if (loginButton.tagName.toLowerCase() === "ads-button") {
257-
loginButton.classList.add("learning-paths-account-login-button");
258-
loginButton.setAttribute("level", "primary");
259-
loginButton.setAttribute("sr-label", "Login");
260-
return;
261-
}
262-
263-
if (loginButton.dataset.learningPathsAdsButtonProxy === "true") return;
264-
265-
const adsButton = document.createElement("ads-button");
266-
adsButton.classList.add("learning-paths-account-login-button");
267-
adsButton.setAttribute("level", "primary");
268-
adsButton.setAttribute("sr-label", "Login");
269-
adsButton.textContent = "Login";
270-
adsButton.addEventListener("click", () => {
271-
document.dispatchEvent(new CustomEvent("arm-account-signin"));
272-
});
273-
274-
loginButton.dataset.learningPathsAdsButtonProxy = "true";
275-
loginButton.replaceWith(adsButton);
276-
}
277-
278-
function setArmAccountLinkColors() {
279-
const shadowRoot = document.querySelector("arm-top-navigation")?.shadowRoot;
280-
if (!shadowRoot) return;
281-
282-
shadowRoot.querySelectorAll(".learning-paths-account-link").forEach((element) => {
283-
element.classList.remove("learning-paths-account-link");
284-
});
285-
286-
const accountHeading = Array.from(shadowRoot.querySelectorAll("*")).find((element) => {
287-
return (element.textContent || "").trim() === "ARM ACCOUNT";
288-
});
289-
if (!accountHeading) return;
290-
291-
let panel = null;
292-
let candidate = accountHeading.parentElement;
293-
while (candidate && candidate !== shadowRoot) {
294-
const text = candidate.textContent || "";
295-
const isAccountPanel = text.includes("ARM ACCOUNT") &&
296-
text.includes("Quick Links") &&
297-
text.includes("Manage Your Account");
298-
const isWholeNavigation = text.includes("Blogs") &&
299-
text.includes("CPU & Hardware") &&
300-
text.includes("Documentation");
301-
302-
if (isAccountPanel && !isWholeNavigation) {
303-
panel = candidate;
304-
break;
305-
}
306-
307-
candidate = candidate.parentElement;
308-
}
309-
if (!panel) return;
310-
311-
panel.querySelectorAll("a, [role='link']").forEach((element) => {
312-
element.classList.add("learning-paths-account-link");
313-
});
314-
}
315-
316-
function scheduleArmAccountPanelUpdates() {
317-
[0, 100, 250, 500, 1000].forEach((delay) => {
318-
window.setTimeout(setArmAccountLoginButtonLevel, delay);
319-
window.setTimeout(setArmAccountLinkColors, delay);
320-
});
321-
}
322-
323-
function applyTopNavHighlightColor() {
324-
const topnav = document.querySelector("arm-top-navigation");
325-
const shadowRoot = topnav?.shadowRoot;
326-
if (!shadowRoot) return;
327-
328-
const highlightColor = "#D1BAFC";
329-
const isArmGreen = (color) => {
330-
const normalizedColor = (color || "").trim().toLowerCase();
331-
if (["#95d600", "#a4da00", "#b8e600"].includes(normalizedColor)) return true;
332-
333-
const rgbMatch = normalizedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
334-
if (!rgbMatch) return false;
335-
336-
const red = Number(rgbMatch[1]);
337-
const green = Number(rgbMatch[2]);
338-
const blue = Number(rgbMatch[3]);
339-
return green >= 180 && red >= 90 && red <= 190 && blue <= 90 && green > red;
340-
};
341-
342-
const styleId = "learning-paths-top-nav-highlight-color";
343-
if (!shadowRoot.getElementById(styleId)) {
344-
const style = document.createElement("style");
345-
style.id = styleId;
346-
style.textContent = `
347-
:host {
348-
--arm-green: ${highlightColor};
349-
--arm-web-safe-green: ${highlightColor};
350-
--ads-ui-green-65: ${highlightColor};
351-
--ads-ui-green-70: ${highlightColor};
352-
--ads-ui-green-80: ${highlightColor};
353-
--ads-search-border-color: ${highlightColor};
354-
--ads-search-border-color-focus: ${highlightColor};
355-
--ads-search-border-color-hover: ${highlightColor};
356-
--ads-search-button-color: ${highlightColor};
357-
--ads-search-button-color-hover: ${highlightColor};
358-
--ads-search-input-color-focus: ${highlightColor};
359-
}
360-
361-
a:hover,
362-
button:hover,
363-
[role="button"]:hover,
364-
[role="link"]:hover,
365-
[role="menuitem"]:hover,
366-
a:hover *,
367-
button:hover *,
368-
[role="button"]:hover *,
369-
[role="link"]:hover *,
370-
[role="menuitem"]:hover *,
371-
a:focus-visible,
372-
button:focus-visible,
373-
[role="button"]:focus-visible,
374-
[role="link"]:focus-visible,
375-
[role="menuitem"]:focus-visible,
376-
a:focus-visible *,
377-
button:focus-visible *,
378-
[role="button"]:focus-visible *,
379-
[role="link"]:focus-visible *,
380-
[role="menuitem"]:focus-visible * {
381-
color: ${highlightColor} !important;
382-
-webkit-text-fill-color: ${highlightColor} !important;
383-
-webkit-text-stroke-color: ${highlightColor} !important;
384-
fill: ${highlightColor} !important;
385-
stroke: ${highlightColor} !important;
386-
}
387-
388-
button[aria-expanded="true"],
389-
button[aria-pressed="true"],
390-
[role="button"][aria-expanded="true"],
391-
[role="button"][aria-pressed="true"],
392-
button[aria-expanded="true"] > svg,
393-
button[aria-expanded="true"] > svg *,
394-
button[aria-pressed="true"] > svg,
395-
button[aria-pressed="true"] > svg *,
396-
[role="button"][aria-expanded="true"] > svg,
397-
[role="button"][aria-expanded="true"] > svg *,
398-
[role="button"][aria-pressed="true"] > svg,
399-
[role="button"][aria-pressed="true"] > svg *,
400-
button[aria-expanded="true"] > i,
401-
button[aria-pressed="true"] > i,
402-
[role="button"][aria-expanded="true"] > i,
403-
[role="button"][aria-pressed="true"] > i {
404-
color: ${highlightColor} !important;
405-
-webkit-text-fill-color: ${highlightColor} !important;
406-
-webkit-text-stroke-color: ${highlightColor} !important;
407-
fill: ${highlightColor} !important;
408-
stroke: ${highlightColor} !important;
409-
}
410-
411-
a:hover::before,
412-
a:hover::after,
413-
button:hover::before,
414-
button:hover::after,
415-
[role="button"]:hover::before,
416-
[role="button"]:hover::after,
417-
[role="link"]:hover::before,
418-
[role="link"]:hover::after,
419-
[role="menuitem"]:hover::before,
420-
[role="menuitem"]:hover::after,
421-
button[aria-expanded="true"]::before,
422-
button[aria-expanded="true"]::after,
423-
button[aria-pressed="true"]::before,
424-
button[aria-pressed="true"]::after,
425-
[role="button"][aria-expanded="true"]::before,
426-
[role="button"][aria-expanded="true"]::after,
427-
[role="button"][aria-pressed="true"]::before,
428-
[role="button"][aria-pressed="true"]::after {
429-
background-color: ${highlightColor} !important;
430-
border-color: ${highlightColor} !important;
431-
}
432-
433-
ads-button.learning-paths-account-login-button {
434-
display: block;
435-
margin-top: 1rem;
436-
margin-bottom: 1.5rem;
437-
width: 100%;
438-
}
439-
440-
.learning-paths-account-link,
441-
.learning-paths-account-link * {
442-
color: ${highlightColor} !important;
443-
-webkit-text-fill-color: ${highlightColor} !important;
444-
}
445-
446-
.learning-paths-account-link:hover,
447-
.learning-paths-account-link:hover *,
448-
.learning-paths-account-link:focus-visible,
449-
.learning-paths-account-link:focus-visible * {
450-
color: #00C1DE !important;
451-
-webkit-text-fill-color: #00C1DE !important;
452-
}
453-
454-
[class*="search"] input,
455-
[class*="search"] input:focus,
456-
[class*="search"] [role="searchbox"],
457-
[class*="search"] [role="searchbox"]:focus {
458-
border-bottom-color: ${highlightColor} !important;
459-
caret-color: ${highlightColor} !important;
460-
outline-color: ${highlightColor} !important;
461-
}
462-
463-
[class*="search"] svg,
464-
[class*="search"] svg *,
465-
[class*="search"] i,
466-
[class*="search"] button,
467-
[class*="search"] button *,
468-
[class*="search"] [role="button"],
469-
[class*="search"] [role="button"] * {
470-
color: ${highlightColor} !important;
471-
-webkit-text-fill-color: ${highlightColor} !important;
472-
fill: ${highlightColor} !important;
473-
stroke: ${highlightColor} !important;
474-
}
475-
`;
476-
shadowRoot.appendChild(style);
477-
}
478-
479-
shadowRoot.querySelectorAll("*").forEach((element) => {
480-
const styles = window.getComputedStyle(element);
481-
if (
482-
isArmGreen(styles.color) ||
483-
isArmGreen(styles.webkitTextFillColor) ||
484-
isArmGreen(styles.webkitTextStrokeColor) ||
485-
isArmGreen(styles.fill) ||
486-
isArmGreen(styles.stroke) ||
487-
isArmGreen(styles.borderColor) ||
488-
isArmGreen(styles.backgroundColor)
489-
) {
490-
element.style.setProperty("color", highlightColor, "important");
491-
element.style.setProperty("-webkit-text-fill-color", highlightColor, "important");
492-
element.style.setProperty("-webkit-text-stroke-color", highlightColor, "important");
493-
element.style.setProperty("fill", highlightColor, "important");
494-
element.style.setProperty("stroke", highlightColor, "important");
495-
element.style.setProperty("border-color", highlightColor, "important");
496-
}
497-
});
498-
499-
if (!topnav.learningPathsHighlightListenersAttached) {
500-
topnav.addEventListener("mouseover", () => window.requestAnimationFrame(applyTopNavHighlightColor));
501-
topnav.addEventListener("focusin", () => window.requestAnimationFrame(applyTopNavHighlightColor));
502-
topnav.addEventListener("click", () => scheduleTopNavHighlightColor());
503-
topnav.learningPathsHighlightListenersAttached = true;
504-
}
505-
}
506-
507-
508-
509-
510246
// ----------------------------------------------------------------------
511247
// Auth Callback hooks in top nav
512248
// ----------------------------------------------------------------------
@@ -559,31 +295,9 @@ document.addEventListener("arm-top-navigation-ready", function (e) {
559295
const htmlElement = document.documentElement;
560296
htmlElement.setAttribute("theme", "dark");
561297

562-
window.requestAnimationFrame(applyTopNavHighlightColor);
563-
window.setTimeout(applyTopNavHighlightColor, 250);
564-
window.requestAnimationFrame(setArmAccountLoginButtonLevel);
565-
window.requestAnimationFrame(setArmAccountLinkColors);
566-
scheduleArmAccountPanelUpdates();
567298
renderAuthInTopNav();
568299
});
569300

570-
document.addEventListener("click", function (event) {
571-
if (!event.target.closest("arm-top-navigation")) return;
572-
scheduleArmAccountPanelUpdates();
573-
});
574-
575-
function scheduleTopNavHighlightColor() {
576-
[0, 250, 1000].forEach((delay) => {
577-
window.setTimeout(applyTopNavHighlightColor, delay);
578-
});
579-
}
580-
581-
if (document.readyState === "loading") {
582-
document.addEventListener("DOMContentLoaded", scheduleTopNavHighlightColor);
583-
} else {
584-
scheduleTopNavHighlightColor();
585-
}
586-
587301

588302

589303
// ----------------------------------------------------------------------

0 commit comments

Comments
 (0)