Compare commits

..

7 commits

Author SHA1 Message Date
755efe3cd6 Tabber code size and quality 2024-06-05 23:07:05 +12:00
47d92d3a37 Merge PR #15 2024-06-05 21:53:03 +12:00
2b3a8fe108
Fix scrolling to sections if a tab's hash coincides with one
ben10/wiki/Alien_X_(Classic)#Appearances
2023-11-13 14:35:35 +11:00
dcb8a8a590
Prevent making duplicate history entries 2023-11-06 20:31:20 +11:00
f5399524b1
Prevent linking to tabs with no IDs 2023-11-06 20:15:18 +11:00
ead6896818
Add the ability to specify/open the last open tab in the URL 2023-11-06 20:15:18 +11:00
9773e62c46
Add better support for tabs
Some pages break without actual tab support, such as
https://breezewiki.com/ben10/wiki/Ultimatrix_(Original)#Modes

This change aims to work with old browsers (such as Firefox for Android 68)
and browsers with Javascript disabled (by showing all tab contents and hiding
the tab bar, i.e. how tabs work before this change).
2023-11-06 20:15:15 +11:00
3 changed files with 46 additions and 5 deletions

View file

@ -172,7 +172,7 @@
(define styles
(list
(format "~a/wikia.php?controller=ThemeApi&method=themeVariables&variant=~a" origin (user-cookies^-theme user-cookies))
(format "~a/load.php?lang=en&modules=site.styles%7Cskin.fandomdesktop.styles%7Cext.fandom.PortableInfoboxFandomDesktop.css%7Cext.fandom.GlobalComponents.CommunityHeaderBackground.css%7Cext.gadget.site-styles%2Csound-styles&only=styles&skin=fandomdesktop" origin)))
(format "~a/load.php?lang=en&modules=site.styles%7Cskin.fandomdesktop.styles%7Cext.fandom.PortableInfoboxFandomDesktop.css%7Cext.fandom.GlobalComponents.CommunityHeaderBackground.css%7Cext.fandom.photoGallery.gallery.css%7Cext.gadget.site-styles%2Csound-styles&only=styles&skin=fandomdesktop" origin)))
(if (config-true? 'strict_proxy)
(map u-proxy-url styles)
styles)]
@ -200,10 +200,11 @@
`(script (@ (type "module") (src ,(get-static-url "search-suggestions.js"))))
"")
(script (@ (type "module") (src ,(get-static-url "countdown.js"))))
(script (@ (defer) (src ,(get-static-url "tabs.js"))))
(link (@ (rel "icon") (href ,(u (λ (v) (config-true? 'strict_proxy))
(λ (v) (u-proxy-url v))
(head-data^-icon-url head-data))))))
(body (@ (class ,(head-data^-body-class head-data)))
(body (@ (class ,(head-data^-body-class head-data) " bw-tabs-nojs"))
,(let ([extension-eligible?
(cond/var
[(not req) #f]

View file

@ -202,11 +202,11 @@ figcaption, .lightbox-caption, .thumbcaption {
padding: 0;
}
/* show tabs always */
.wds-tabs__wrapper {
/* show tabs if tabs.js isn't loaded */
.bw-tabs-nojs .wds-tabs__wrapper {
display: none;
}
.wds-tab__content {
.bw-tabs-nojs .wds-tab__content {
display: block;
}

40
static/tabs.js Normal file
View file

@ -0,0 +1,40 @@
"use strict";
const tabFromHash = location.hash.length > 1 ? location.hash.substring(1) : null
for (const tabber of document.body.querySelectorAll(".wds-tabber")) {
for (const [tab, content] of getTabberTabs(tabber)) {
// set up click listener on every tab
tab.addEventListener("click", e => {
setCurrentTab(tabber, tab, content)
e.preventDefault()
})
// re-open a specific tab on page load based on the URL hash
if (tab.dataset.hash === tabFromHash) {
setCurrentTab(tabber, tab, content)
tab.scrollIntoView()
}
}
}
function getTabberTabs(tabber) {
// need to scope the selector to handle nested tabs. see /unturned/wiki/Crate for an example
const tabs = [...tabber.querySelectorAll(":scope > .wds-tabs__wrapper .wds-tabs__tab")]
const contents = [...tabber.querySelectorAll(":scope > .wds-tab__content")]
return tabs.map((_, index) => [tabs[index], contents[index]]) // transpose arrays into [[tab, content], ...]
}
function setCurrentTab(tabber, tab, content) {
// clear currently selected tab
getTabberTabs(tabber).flat().forEach(e => e.classList.remove("wds-is-current"))
// select new tab
tab.classList.add("wds-is-current")
content.classList.add("wds-is-current")
if (tab.dataset.hash) {
history.replaceState(null, "", `#${tab.dataset.hash}`)
}
}
document.body.classList.remove("bw-tabs-nojs")