/*------------------------------------------------------- Hero / Navigation -------------------------------------------------------*/ // Function to handle the mutation (e.g., when the target element is added) function handleMutation(mutationsList, observer) { for (const mutation of mutationsList) { if (mutation.type === "childList") { // Re-position search form (Hero) outside the .search-bar const searchbar = document.querySelector(".search-bar"); const searchform = document.querySelector(".search-bar__search"); // Re-position username within the navigation bar const flushTabsList = document.querySelector(".flush-tabs__list"); const userMenu = document.querySelector(".user-menu"); // Check if flushTabsList is not null if (flushTabsList) { searchbar.after(searchform); // !!! Re-position outside .search-bar flushTabsList.appendChild(userMenu); // Add Signin/Signout To Main Navigation. // Reposition search within header all pages excluding homepage if (window.location.href) { const searchform = document.querySelector(".search-bar__search"); searchform.classList.add("header__search"); // Isolate the style from the homapage. const headerItem = document.querySelector(".header__item"); if (searchform) { headerItem.insertBefore(searchform, headerItem.firstChild); document.querySelector(".search-query").placeholder = "Search IRIS Every Ideas"; } } observer.disconnect(); // Stop observing once the action is performed } } } } // Create a MutationObserver with the handleMutation callback const heroObserver = new MutationObserver(handleMutation); // Specify the target node and the type of mutations to observe const heroTarget = document.body; // You can change this to a more specific container if needed const heroConfig = { childList: true, subtree: true }; // Start observing the target node for configured mutations heroObserver.observe(heroTarget, heroConfig); /*------------------------------------------------------- Pages -------------------------------------------------------*/ // Select the node that will be observed for mutations const pageTarget = document.body; // Options for the observer (which mutations to observe) const pageConfig = { childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = function (mutationsList, observer) { // Remove Hero all page other than Homepage // Check if the URL contains the specified section - Homepage // Check if the URL contains the specified section - New Idea if (window.location.pathname.endsWith("/ideas") || window.location.pathname === "/" || window.location.pathname === "") { // console.log("PNG Idea Overview"); // Insert HTML section with an h1 title of "test" in .idea-portal-section const ideaPortalSection = document.querySelector(".column-with-sidebar"); if (ideaPortalSection) { ideaPortalSection.classList.add("idea-overview"); ideaPortalSection.insertAdjacentHTML( "beforebegin", `

Every Sandbox
Ideas

Sandbox Ideas

Your ideas allow us to crowdsource feedback, gain customer insight and prioritise our roadmaps.

` ); } // Current Page State const currentPage = document.querySelector('.footer-menu__link[title~="Ideas"]'); if (currentPage) { currentPage.setAttribute("aria-current", "page"); } } // Check if the URL contains the specified section - Idea Subpage (ELI-I) if (window.location.toString().indexOf("/ideas/MIS-I-") != -1) { // console.log("PING Idea Subpage"); // Insert HTML section in .idea-portal-section const ideaPortalSection = document.querySelector(".idea"); if (ideaPortalSection) { ideaPortalSection.classList.add("idea-subpage"); ideaPortalSection.insertAdjacentHTML( "beforebegin", `

Every Sandbox
Ideas

Sandbox Ideas

Your ideas allow us to crowdsource feedback, gain customer insight and prioritise our roadmaps.

` ); } } // Check if the URL contains the specified section - New Idea if (window.location.pathname.endsWith("/ideas/new")) { // console.log("PING New Idea"); const mainContent = document.querySelector(".idea-form"); mainContent.classList.add("idea-new-form"); } // Check if the URL contains the specified section - FAQ if (window.location.pathname.endsWith("/sections/7407754061681680705")) { // console.log("PING FAQ"); // Insert HTML section with an h1 title of "test" in .idea-portal-section const ideaPortalSection = document.querySelector(".idea-portal-section"); if (ideaPortalSection) { ideaPortalSection.classList.add("faq"); ideaPortalSection.insertAdjacentHTML( "beforebegin", `

Every Sandbox
FAQ

Frequently Asked Questions

Below you'll find a list of helpful answers to commonly asked questions.

` ); } } // Check if the URL contains the specified section - Polls if (window.location.href.endsWith("/sections/7305051148433402489")) { // console.log("PING POLLS"); // Insert HTML section with an h1 title of "test" in .idea-portal-section const ideaPortalSection = document.querySelector(".idea-portal-section"); if (ideaPortalSection) { ideaPortalSection.classList.add("polls"); ideaPortalSection.insertAdjacentHTML( "beforebegin", `

Every Sandbox
Polls

Polls

Our polls help to uncover ideas about what to build next and where we can improve.

` ); } } // Check if the URL contains the specified section - Polls Subpage if (window.location.toString().indexOf("poll_id") != -1) { // console.log("PING POLLS Subpage"); // Insert HTML section with an h1 title of "test" in .idea-portal-section const ideaPortalSection = document.querySelector(".idea-portal-section"); if (ideaPortalSection) { ideaPortalSection.classList.add("polls-subpage"); ideaPortalSection.insertAdjacentHTML( "beforebegin", `

Polls

Our polls help to uncover ideas about what to build next and where we can improve.

` ); } } // Check if the URL contains the specified section - Search if (window.location.toString().indexOf("search?query=") != -1) { // Insert HTML section in .idea-portal-section const ideaPortalSection = document.querySelector(".column-with-sidebar"); if (ideaPortalSection) { ideaPortalSection.classList.add("idea-search"); ideaPortalSection.insertAdjacentHTML( "beforebegin", `

Every Sandbox
Search

Sandbox Ideas

Your ideas allow us to crowdsource feedback, gain customer insight and prioritise our roadmaps.

` ); } } // Disconnect the observer since the mutation has been handled observer.disconnect(); }; // Create an observer instance linked to the callback function const overviewObserver = new MutationObserver(callback); // Start observing the target node for configured mutations overviewObserver.observe(pageTarget, pageConfig); /*------------------------------------------------------- Navigation Dropdown -------------------------------------------------------*/ const menuToggle = document.querySelector(".header__nav-menu"); const siteNavigation = document.querySelector(".search-bar"); const siteHeader = document.querySelector(".header"); const sitebody = document.querySelector("body"); menuToggle.addEventListener("click", () => { const isOpened = menuToggle.getAttribute("aria-expanded") === "true"; if (isOpened ? closeMenu() : openMenu()); }); function openMenu() { menuToggle.setAttribute("aria-expanded", "true"); siteNavigation.setAttribute("data-navigation", "expanded"); siteHeader.setAttribute("data-header", "true"); sitebody.setAttribute("style", "overflow: hidden; touch-action: none;"); } function closeMenu() { menuToggle.setAttribute("aria-expanded", "false"); siteNavigation.setAttribute("data-navigation", "collapse"); siteHeader.setAttribute("data-header", "false"); sitebody.removeAttribute("style"); // siteNavigation.addEventListener( // "animationend", // () => { // siteNavigation.setAttribute("data-navigation", "collapse"); // }, // { once: true } // ); } // # Reset Mobile when viewport is greater than 1024 // https://css-tricks.com/working-with-javascript-media-queries/ // Create a media condition that targets viewports at least 1024px wide const navreset = window.matchMedia("(min-width: 1024px)"); function handleNavigationChange(e) { // Check if the media query is true if (e.matches) { menuToggle.setAttribute("aria-expanded", "false"); siteNavigation.setAttribute("data-navigation", "collapse"); siteHeader.setAttribute("data-header", "false"); sitebody.removeAttribute("style"); } } // Register event listener navreset.addEventListener("change", handleNavigationChange); // Initial check handleNavigationChange(navreset); // # Navigation Accessibility // Create a media condition that targets viewports at least 1023.999px wide const mediaQuery = window.matchMedia("(max-width: 1023.999px)"); function handleTabletChange(e) { // Check if the media query is true if (e.matches) { menuToggle.setAttribute("aria-expanded", "false"); menuToggle.setAttribute("aria-hidden", "false"); // Scroll Sticky document.querySelector(".section-tabs").removeAttribute("data-scroll"); } else { menuToggle.setAttribute("aria-hidden", "true"); // Scroll Sticky window.addEventListener("scroll", function () { if (window.scrollY > 168) { document.querySelector(".section-tabs").setAttribute("data-scroll", "sticky"); } else { document.querySelector(".section-tabs").removeAttribute("data-scroll"); } }); } } // Register event listener mediaQuery.addEventListener("change", handleTabletChange); // Initial check handleTabletChange(mediaQuery); // set search query placeholder regardless of screen size $(window) .on("resize", function () { var inputElement = $("#query"); inputElement.attr("placeholder", "Search all ideas..."); }) .resize();

Please enter your email address

RELATED IDEAS

To be able to restrict access to PARTS of pages, i.e. other staff to see name, photo etc but not personal details like dates of birth