sightshooton I want to hide the blog tag, but doing so breaks other extensions - including the "tag" extension in the same manner. I'm just going to target that specific tag with CSS and set it to display: none;
It can be done.
function tweakMobiletab() {
let mobileTab, mobileTabTags, mobileTabLoggedIn, mobileTabCategories, mobileTabPrivateDiscussions;
try {
mobileTab = document.getElementsByClassName("MobileTab")[0];
try { mobileTabTags = mobileTab.getElementsByClassName("item-tags")[0]; }catch{}
try { mobileTabLoggedIn = mobileTab.getElementsByClassName("item-session")[0]; }catch{}
if(mobileTabTags != undefined || mobileTabTags != null) {
if(mobileTabLoggedIn != undefined || mobileTabLoggedIn != null) {
mobileTabPrivateDiscussions = document.createElement('li');
mobileTabPrivateDiscussions.classList.add('item-private-discussions');
mobileTabPrivateDiscussions.innerHTML = '<a class="hasIcon" aria-label="Private Discussions" href="/private" active="false"><i aria-hidden="true" class="icon fas fa-comment Button-icon"></i><span class="Button-label">Private Discussions</span></a>';
mobileTabTags.insertAdjacentElement("afterend", mobileTabPrivateDiscussions);
mobileTabPrivateDiscussions.getElementsByTagName("a")[0].addEventListener('click',function(e){e.preventDefault();m.route.set('/private');});
mobileTabCategories = document.createElement('li');
mobileTabCategories.classList.add('item-categories');
mobileTabCategories.innerHTML = '<a class="hasIcon" aria-label="Categories" href="/categories" active="false"><i aria-hidden="true" class="icon fas fa-th-list Button-icon"></i><span class="Button-label">Categories</span></a>';
mobileTabTags.insertAdjacentElement("afterend", mobileTabCategories);
mobileTabCategories.getElementsByTagName("a")[0].addEventListener('click',function(e){e.preventDefault();m.route.set('/categories');});
}
mobileTabTags.remove();
}
}catch{}
}
function classChanged(){
const url = self.location.href;
if (url === 'https://forum.example.org/tags') m.route.set('/categories');
let tagLinks, i, j;
try {
tagLinks = document.body.querySelectorAll('*[href="/tags"]');
if(tagLinks != undefined || tagLinks != null)
for(i=0, j=tagLinks.length; i<j; i++)
tagLinks[i].href='/categories';
}catch{}
tweakMobiletab();
try{
let mobileTabItems = document.getElementsByClassName("MobileTab-items")[0].getElementsByTagName("li");
if(mobileTabItems != undefined || mobileTabItems != null)
for(i=0, j=5; i<5; i++){
if(mobileTabItems[i].getElementsByTagName("a")[0].href === url)
mobileTabItems[i].getElementsByTagName("a")[0].setAttribute('active','true');
else
mobileTabItems[i].getElementsByTagName("a")[0].setAttribute('active','false');
}
}catch{}
}
let appF = document.getElementById("app"), ob = new MutationObserver(function(){classChanged();});
ob.observe(appF,{attributes: true, attributeFilter: ["class"]});
That changes the Tag link to Categories for example, while preserving the highlighted tab and single-page web app. You could change the URL of Home to /tags/ in the same way if that's what you're doing, etc.
