/*------------------------------------------------------- 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 iSAMS Sandbox 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 === "" || window.location.pathname === "/ideas/") { // 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", `

Sandbox Ideas

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

` ); } } // Check if the URL contains the specified section - Idea Subpage (MIS-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", `

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/7407754510411327185")) { // 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", `

iSAMS 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", `

iSAMS 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", `

iSAMS 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(); /*------------------------------------------------------- Statuspage Widget -------------------------------------------------------*/ var sp = new StatusPage.page({ page: "xjc7zffx5ccy" }); sp.summary({ success: function (data) { // adds the text description to the dropdown $(".color-description").text(data.status.description); // appends the status indicator as a class name so we can use the right color for the status light thing $(".color-dot").addClass(data.status.indicator); }, }); (StatusPage = "undefined" == typeof StatusPage ? {} : StatusPage), (StatusPage.page = function (e) { if (((e = e || {}), !e.page)) throw new Error("A pageId is required to initialize."); (this.apiKey = e.apiKey || null), (this.error = e.error || this.error), (this.format = e.format || "json"), (this.pageId = e.page), (this.version = e.version || "v2"), (this.secure = !("secure" in e) || e.secure), (this.protocol = this.secure ? "https" : "http"), (this.host = e.host || "statuspage.io"), (this.host_with_port_and_protocol = e.test ? "" : this.protocol + "://" + this.pageId + "." + this.host); }), (StatusPage.page.prototype.serialize = function (e, t) { var s = [], r = { sms: "email_sms", webhook: "endpoint", }; for (var o in e) if ("to_sentence" !== o) { var i = o; o = o in r ? r[o] : o; var a = t ? t + "[" + o + "]" : o, n = e[i]; s.push("object" == typeof n ? this.serialize(n, a) : encodeURIComponent(a) + "=" + encodeURIComponent(n)); } return s.join("&"); }), (StatusPage.page.prototype.createStatusPageCORSRequest = function (e, t) { var s = new XMLHttpRequest(); return "withCredentials" in s ? s.open(e, t, !0) : "undefined" != typeof XDomainRequest ? ((s = new XDomainRequest()), s.open(e, t)) : (s = null), s; }), (StatusPage.page.prototype.executeRequestAndCallbackWithResponse = function (e) { if (!e.path) throw new Error("A path is required to make a request"); var t = e.path, s = e.method || "GET", r = e.success || null, o = e.error || this.error, i = this.host_with_port_and_protocol + "/api/" + this.version + "/" + t + "." + this.format, a = this.createStatusPageCORSRequest(s, i); if (a) if ( (this.apiKey && (console.log("!!! API KEY IN USE - REMOVE BEFORE DEPLOYING TO PRODUCTION !!!"), console.log("!!! API KEY IN USE - REMOVE BEFORE DEPLOYING TO PRODUCTION !!!"), console.log("!!! API KEY IN USE - REMOVE BEFORE DEPLOYING TO PRODUCTION !!!"), a.setRequestHeader("Authorization", "OAuth " + this.apiKey)), (a.onload = function () { var e = JSON.parse(a.responseText); r && r(e); }), (a.error = o), "POST" === s || "DELETE" === s) ) { var n = e.data || {}; a.setRequestHeader("Content-type", "application/x-www-form-urlencoded"), a.send(this.serialize(n)); } else a.send(); }), (StatusPage.page.prototype.get = function (e, t) { if (((t = t || {}), !e)) throw new Error("Path is required."); if (!t.success) throw new Error("Success Callback is required."); var s = t.success || {}, r = t.error || {}; this.executeRequestAndCallbackWithResponse({ path: e, success: s, error: r, method: "GET", }); }), (StatusPage.page.prototype.post = function (e, t) { if (((t = t || {}), !e)) throw new Error("Path is required."); var s = {}; if ("subscribers" === e) { if (!t.subscriber) throw new Error("Subscriber is required to post."); s.subscriber = t.subscriber; } else { if (!t.data) throw new Error("Data is required to post."); s = t.data; } var r = t.success || {}, o = t.error || {}; this.executeRequestAndCallbackWithResponse({ data: s, path: e, success: r, error: o, method: "POST", }); }), (StatusPage.page.prototype["delete"] = function (e, t) { if (((t = t || {}), !e)) throw new Error("Path is required."); if (!t.subscriber) throw new Error("Data is required to delete."); var s = {}; "subscribers" === e ? (s.subscriber = t.subscriber) : (s = t.data); var r = t.success || {}, o = t.error || {}; this.executeRequestAndCallbackWithResponse({ data: s, path: e, success: r, error: o, method: "DELETE", }); }), (StatusPage.page.prototype.error = function () { console.log("There was an error with your request"); }), (StatusPage.page.prototype.summary = function (e) { this.get("summary", e); }), (StatusPage.page.prototype.status = function (e) { this.get("status", e); }), (StatusPage.page.prototype.components = function (e) { this.get("components", e); }), (StatusPage.page.prototype.incidents = function (e) { switch (e.filter) { case "unresolved": this.get("incidents/unresolved", e); break; case "resolved": this.get("incidents/resolved", e); break; default: this.get("incidents", e); } }), (StatusPage.page.prototype.scheduled_maintenances = function (e) { switch (e.filter) { case "active": this.get("scheduled-maintenances/active", e); break; case "upcoming": this.get("scheduled-maintenances/upcoming", e); break; default: this.get("scheduled-maintenances", e); } }), (StatusPage.page.prototype.subscribe = function (e) { if (!e || !e.subscriber) throw new Error("A subscriber object is required."); this.post("subscribers", e); }), (StatusPage.page.prototype.unsubscribe = function (e) { if (!e || !e.subscriber) throw new Error("A subscriber object is required."); if (!e.subscriber.id) throw new Error("You must supply a subscriber.id in order to cancel a subscription."); this["delete"]("subscribers", e); }); // set search query placeholder regardless of screen size $(window) .on("resize", function () { var inputElement = $("#query"); inputElement.attr("placeholder", "Search iSAMS Ideas"); }) .resize();

Please enter your email address

Sandbox Ideas

RELATED IDEAS

Proof reading general comments