From 5309a722334342eb93b8b4fee468b045e07c4eb9 Mon Sep 17 00:00:00 2001 From: Cian Hughes Date: Tue, 13 May 2025 10:47:01 +0100 Subject: [PATCH] Added react component to keep logo hover state synced --- .../js/invenio_theme_iform/theme.js | 36 +++++++++++++++++-- .../invenio_theme_iform/iform_logo.svg | 3 +- 2 files changed, 35 insertions(+), 4 deletions(-) diff --git a/invenio_theme_iform/assets/semantic-ui/js/invenio_theme_iform/theme.js b/invenio_theme_iform/assets/semantic-ui/js/invenio_theme_iform/theme.js index 81260f6..26a987d 100644 --- a/invenio_theme_iform/assets/semantic-ui/js/invenio_theme_iform/theme.js +++ b/invenio_theme_iform/assets/semantic-ui/js/invenio_theme_iform/theme.js @@ -6,8 +6,9 @@ import ReactDOM from "react-dom"; import React from "react"; // called on document ready -$(function() { +$(function () { importZammadScript(); + syncLogoHover(); }); function importZammadScript() { @@ -45,10 +46,41 @@ window.toggleVisibility = toggleVisibility; const headerSearchbar = document.getElementById("header-search-bar"); const searchBarOptions = JSON.parse(headerSearchbar.dataset.options); +// Synchronises the hover states of the subcomponents of the logo +export function syncLogoHover() { + const logoGrad = document.getElementById("int-header-logo-grad"); + const logoText = document.getElementById("int-header-logo-text"); + + const originalFillGrad = logoGrad.getAttribute("fill"); + const originalColorGrad = logoGrad.getAttribute("color"); + const originalFillText = logoText.getAttribute("fill"); + const originalColorText = logoText.getAttribute("color"); + + logoGrad.addEventListener("mouseover", () => { + logoText.setAttribute("fill", "@primaryLinkHoverBackground"); + logoText.setAttribute("color", "@primaryLinkHoverBackground"); + }); + logoGrad.addEventListener("mouseout", () => { + logoText.setAttribute("fill", originalFillText); + logoText.setAttribute("color", originalColorText); + }); + + logoText.addEventListener("mouseover", () => { + logoGrad.setAttribute("fill", "@primaryLinkHoverBackground"); + logoGrad.setAttribute("color", "@primaryLinkHoverBackground"); + }); + logoText.addEventListener("mouseout", () => { + logoGrad.setAttribute("fill", originalFillGrad); + logoGrad.setAttribute("color", originalColorGrad); + }); +} + +window.syncLogoHover = syncLogoHover; + ReactDOM.render( , - headerSearchbar + headerSearchbar, ); diff --git a/invenio_theme_iform/templates/invenio_theme_iform/iform_logo.svg b/invenio_theme_iform/templates/invenio_theme_iform/iform_logo.svg index c8fe0d2..671e2f1 100644 --- a/invenio_theme_iform/templates/invenio_theme_iform/iform_logo.svg +++ b/invenio_theme_iform/templates/invenio_theme_iform/iform_logo.svg @@ -1,2 +1 @@ - - +