27 lines
1.1 KiB
JavaScript
27 lines
1.1 KiB
JavaScript
document.addEventListener('DOMContentLoaded', (event) => {
|
|
// Only load the map viewer when it's visible (and javascript is enabled).
|
|
const setMap = () => { document.querySelector('#map').src = 'map/' }
|
|
const details = document.querySelector('details:last-child')
|
|
|
|
// If <details> is not supported (looking at you, Edge), the frame will be
|
|
// visible by default, so just set the target immediately.
|
|
if ('open' in details)
|
|
details.addEventListener('toggle', setMap, { once: true })
|
|
else
|
|
setMap()
|
|
|
|
|
|
// For custom (dark) CSS themes, set the <details> background to the inverse of
|
|
// the text colour.
|
|
const parseColour = (str) => str.match(/([0-9.]+)/g).map(parseFloat)
|
|
const dumpColour = (col) => `rgba(${col.join(',')})`
|
|
const textColour = parseColour(window.getComputedStyle(document.body).getPropertyValue('color'))
|
|
const invertedColour = [255-textColour[0], 255-textColour[1], 255-textColour[2], 0.8]
|
|
const sheet = document.styleSheets[0]
|
|
sheet.insertRule(`
|
|
details {
|
|
background-color: ${dumpColour(invertedColour)} !important;
|
|
}`
|
|
)
|
|
})
|