feat: Updated public portal header design (#8089)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/portal/portalHelpers.js

@@ -4,7 +4,7 @@ import Vue from 'vue';
 import PublicArticleSearch from './components/PublicArticleSearch.vue';
 import TableOfContents from './components/TableOfContents.vue';
 
-export const getHeadingsFromTheArticle = () => {
+export const getHeadingsfromTheArticle = () => {
   const rows = [];
   const articleElement = document.getElementById('cw-article-content');
   articleElement.querySelectorAll('h1, h2, h3').forEach(element => {
@@ -68,6 +68,37 @@ export const updateThemeStyles = theme => {
   setPortalClass(theme);
 };
 
+export const toggleAppearanceDropdown = () => {
+  const dropdown = document.getElementById('appearance-dropdown');
+  if (!dropdown) return;
+  dropdown.style.display =
+    dropdown.style.display === 'none' || !dropdown.style.display
+      ? 'flex'
+      : 'none';
+};
+
+export const updateURLParameter = (param, paramVal) => {
+  const urlObj = new URL(window.location);
+  urlObj.searchParams.set(param, paramVal);
+  return urlObj.toString();
+};
+
+export const removeURLParameter = parameter => {
+  const urlObj = new URL(window.location);
+  urlObj.searchParams.delete(parameter);
+  return urlObj.toString();
+};
+
+export const switchTheme = theme => {
+  updateThemeStyles(theme);
+  const newUrl =
+    theme !== 'system'
+      ? updateURLParameter('theme', theme)
+      : removeURLParameter('theme');
+  window.location.href = newUrl;
+  toggleAppearanceDropdown();
+};
+
 export const InitializationHelpers = {
   navigateToLocalePage: () => {
     const allLocaleSwitcher = document.querySelector('.locale-switcher');
@@ -98,7 +129,7 @@ export const InitializationHelpers = {
     if (isOnArticlePage) {
       new Vue({
         components: { TableOfContents },
-        data: { rows: getHeadingsFromTheArticle() },
+        data: { rows: getHeadingsfromTheArticle() },
         template: '<table-of-contents :rows="rows" />',
       }).$mount('#cw-hc-toc');
     }
@@ -131,6 +162,26 @@ export const InitializationHelpers = {
     }
   },
 
+  initializeToggleButton: () => {
+    const toggleButton = document.getElementById('toggle-appearance');
+    if (toggleButton) {
+      toggleButton.addEventListener('click', toggleAppearanceDropdown);
+    }
+  },
+
+  initializeThemeSwitchButtons: () => {
+    const appearanceDropdown = document.getElementById('appearance-dropdown');
+    if (!appearanceDropdown) return;
+    appearanceDropdown.addEventListener('click', event => {
+      const target = event.target.closest('button[data-theme]');
+
+      if (target) {
+        const theme = target.getAttribute('data-theme');
+        switchTheme(theme);
+      }
+    });
+  },
+
   initialize: () => {
     if (window.portalConfig.isPlainLayoutEnabled === 'true') {
       InitializationHelpers.appendPlainParamToURLs();
@@ -138,7 +189,9 @@ export const InitializationHelpers = {
       InitializationHelpers.navigateToLocalePage();
       InitializationHelpers.initializeSearch();
       InitializationHelpers.initializeTableOfContents();
-      // InitializationHelpers.initializeTheme();
+      InitializationHelpers.initializeTheme();
+      InitializationHelpers.initializeToggleButton();
+      InitializationHelpers.initializeThemeSwitchButtons();
     }
   },
 

app/javascript/portal/specs/portal.spec.js

@@ -6,6 +6,9 @@ import {
   setPortalStyles,
   setPortalClass,
   updateThemeStyles,
+  toggleAppearanceDropdown,
+  updateURLParameter,
+  removeURLParameter,
 } from '../portalHelpers';
 
 describe('#navigateToLocalePage', () => {
@@ -126,12 +129,78 @@ describe('Theme Functions', () => {
       document.body.innerHTML = '';
     });
 
-    it('sets portal class based on theme', () => {
+    it('sets portal class to "dark" based on theme', () => {
       setPortalClass('dark');
-
       expect(mockPortalDiv.classList.contains('dark')).toBe(true);
       expect(mockPortalDiv.classList.contains('light')).toBe(false);
     });
+
+    it('sets portal class to "light" based on theme', () => {
+      setPortalClass('light');
+      expect(mockPortalDiv.classList.contains('light')).toBe(true);
+      expect(mockPortalDiv.classList.contains('dark')).toBe(false);
+    });
+  });
+
+  describe('toggleAppearanceDropdown', () => {
+    it('sets dropdown display to flex if initially none', () => {
+      document.body.innerHTML = `<div id="appearance-dropdown" style="display: none;"></div>`;
+      toggleAppearanceDropdown();
+      const dropdown = document.getElementById('appearance-dropdown');
+      expect(dropdown.style.display).toBe('flex');
+    });
+
+    it('sets dropdown display to none if initially flex', () => {
+      document.body.innerHTML = `<div id="appearance-dropdown" style="display: flex;"></div>`;
+      toggleAppearanceDropdown();
+      const dropdown = document.getElementById('appearance-dropdown');
+      expect(dropdown.style.display).toBe('none');
+    });
+
+    it('does nothing if dropdown element does not exist', () => {
+      document.body.innerHTML = ``;
+      expect(() => toggleAppearanceDropdown()).not.toThrow();
+    });
+  });
+
+  describe('updateURLParameter', () => {
+    it('updates a given parameter with a new value', () => {
+      const originalUrl = 'http://example.com?param=oldValue';
+      delete window.location;
+      window.location = new URL(originalUrl);
+
+      const updatedUrl = updateURLParameter('param', 'newValue');
+      expect(updatedUrl).toContain('param=newValue');
+    });
+
+    it('adds a new parameter if it does not exist', () => {
+      const originalUrl = 'http://example.com';
+      delete window.location;
+      window.location = new URL(originalUrl);
+
+      const updatedUrl = updateURLParameter('newParam', 'value');
+      expect(updatedUrl).toContain('newParam=value');
+    });
+  });
+
+  describe('removeURLParameter', () => {
+    it('removes an existing parameter', () => {
+      const originalUrl = 'http://example.com?param=value';
+      delete window.location;
+      window.location = new URL(originalUrl);
+
+      const updatedUrl = removeURLParameter('param');
+      expect(updatedUrl).not.toContain('param=value');
+    });
+
+    it('does nothing if the parameter does not exist', () => {
+      const originalUrl = 'http://example.com/';
+      delete window.location;
+      window.location = new URL(originalUrl);
+
+      const updatedUrl = removeURLParameter('param');
+      expect(updatedUrl).toBe(originalUrl);
+    });
   });
 
   describe('#updateThemeStyles', () => {
@@ -223,4 +292,43 @@ describe('Theme Functions', () => {
       expect(mockPortalDiv.classList.contains('light')).toBe(false);
     });
   });
+
+  describe('initializeToggleButton', () => {
+    it('adds a click listener to the toggle button', () => {
+      document.body.innerHTML = `<button id="toggle-appearance"></button>`;
+      InitializationHelpers.initializeToggleButton();
+      const toggleButton = document.getElementById('toggle-appearance');
+      expect(toggleButton.onclick).toBeDefined();
+    });
+
+    it('does nothing if the toggle button is not present', () => {
+      document.body.innerHTML = ``;
+      expect(() =>
+        InitializationHelpers.initializeToggleButton()
+      ).not.toThrow();
+    });
+  });
+
+  describe('initializeThemeSwitchButtons', () => {
+    it('adds click listeners to theme switch buttons', () => {
+      document.body.innerHTML = `<div id="appearance-dropdown"><button data-theme="dark"></button><button data-theme="light"></button></div>`;
+      InitializationHelpers.initializeThemeSwitchButtons();
+      const buttons = document.querySelectorAll('button[data-theme]');
+      buttons.forEach(button => expect(button.onclick).toBeDefined());
+    });
+
+    it('does nothing if theme switch buttons are not present', () => {
+      document.body.innerHTML = ``;
+      expect(() =>
+        InitializationHelpers.initializeThemeSwitchButtons()
+      ).not.toThrow();
+    });
+
+    it('does nothing if appearance-dropdown is not present', () => {
+      document.body.innerHTML = ``;
+      expect(() =>
+        InitializationHelpers.initializeThemeSwitchButtons()
+      ).not.toThrow();
+    });
+  });
 });