/*------------------------------------------------------- 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

Cover Lesson on Timetable