CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Using JS to not pollute the history when using modal hashes  (Read 346 times)

AndrewTraub

  • Jr. Member
  • **
  • Posts: 80
  • Karma: +0/-0
I'm sure this is very simple but what is the code to use to avoid polluting the browser history when using the modal hashtag technique?

Thanks,

Andrew

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Using JS to not pollute the history when using modal hashes
« Reply #1 on: 12 Jul 2022, 01:21:57 pm »
To be brutally frank -- Yeah, I know, me? Shocking! -- it's not something I would even worry about. Why? Because it's not something actual users do.

In testing, or as web development geeks, we might sit there opening and closing them going "ooh, neato" and so forth, but it's not something a normal user would do, and/or would even care about. If they're opening and closing them that much as a USER, there's something wrong with your UI.

Like pulling some sort of idiotic "wah wah teh pageluds r teh evilz" SPA rubbish.

All that said, you can cut down on the history pollution thus:

Code: [Select]
{

const

modalIds = [ "mainMenu" ],

isModal = (hash) => {
if (hash.length < 2) return false;
let e = document.getElementById(hash.substr(1));
return e && (
e.classList.contains("modal") ||
modalIds.includes(e.id)
) ? hash : false;
}, // isModal

modalClose = (e) => {
e.preventDefault();
if (depth < 0) {
history.go(depth);
depth = 0;
}
if (
location.hash.length > 1 ||
depthZeroHash
) {
history.replaceState(undefined, undefined, "");
depthZeroHash = false;
depth = 0;
}
}, // modalClose

modalOpen = (e) => {  depth--; },

nonModalOpen = (e) => { depth = 0; };

let
depth = 0,
depthZeroHash = location.hash.length > 1;

for (let anchor of document.querySelectorAll("a[href^='#']")) {
if (anchor.classList.contains("modalClose")) {
anchor.addEventListener("click", modalClose);
} else {
let href = anchor.getAttribute("href");
if (href.length > 1) anchor.addEventListener("click",
isModal(href) ? modalOpen : nonModalOpen
);
}
}

}

Not 100% reliable, but it helps a lot. So many little corner cases to test for.

This assumes that your modals are either named .modal or have their ID in the array at the start, that your closing anchors are .modalClose. It will auto detect if your anchors are on-page links vs. modal on-page links.
« Last Edit: 12 Jul 2022, 01:33:30 pm by Jason Knight »
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

 

SMF spam blocked by CleanTalk

Advertisement