MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
// Create image preview block
const imagePreviewElem = document.createElement('div')
imagePreviewElem.innerHTML = '<div class="imagePreview"> <div class="imagePreview-background"></div> <div class="imagePreview-image"> <img class="imagePreview-image-element" style="cursor: pointer"> <a target="_blank" class="imagePreview-image-caption">Open image page</a> </div> </div>'

const bodyElem = document.querySelector('body')
bodyElem.insertBefore(imagePreviewElem.firstChild, bodyElem.firstChild)

initChanges()
window.navigation.addEventListener("navigate", (event) => {
    initChanges()
})

function initChanges() {
    makeImagesClickable()
    //headerStyling()
}

function makeImagesClickable() {
    const background = document.querySelector('.imagePreview-background')
    background.addEventListener('click', hideImagePreview)
    
    const images = document.querySelectorAll("figure[typeof~='mw:File/Thumb'] a, .hedgedocs-infobox-image a")
    
    for(let i = 0; i < images.length; i++) {
        const imageClickable = images[i]
        const image = imageClickable.querySelector('img')
        
        let originalLocation = imageClickable.getAttribute('data-image-page')
        if (!originalLocation) {
            let originalLocation = imageClickable.href
            imageClickable.href = '#'
            imageClickable.setAttribute('data-image-page', originalLocation)
        }

        imageClickable.setAttribute('style', 'cursor: pointer')
        imageClickable.addEventListener('click', () => imageClicked(originalLocation, image))
    }
}

function hideImagePreview(event) {
    const imageDiv = document.querySelector('.imagePreview-image')
    imageDiv.classList.add('scaledown')
    imageDiv.classList.remove('scaleup')

    const background = document.querySelector('.imagePreview')
    background.style.opacity = '0%'
    setTimeout(() => {
        background.style.display = 'none'
        const imageElem = document.querySelector('.imagePreview-image-element')
        imageElem.src = ''
    }, 250)
    makeImagesClickable()
}

function imageClicked(originalLocation, image) {
    const background = document.querySelector('.imagePreview')
    background.style.display = 'inherit'
    setTimeout(() => {
        background.style.opacity = '100%'

        const imageDiv = document.querySelector('.imagePreview-image')
        imageDiv.style.display = 'flex'
        imageDiv.classList.add('scaleup')
        imageDiv.classList.remove('scaledown')
        const imageElem = document.querySelector('.imagePreview-image-element')

        // Get non-thumbnail version
        let originalImageSource = image.src
        if (originalImageSource.includes('thumb/')) {
            originalImageSource = image.src.replace('thumb/', '')
            originalImageSource = originalImageSource.substring(0, originalImageSource.lastIndexOf('/'))
        }

        imageElem.src = originalImageSource
        imageElem.alt = image.alt

        const imageCaption = document.querySelector('.imagePreview-image-caption')
        imageCaption.href = originalLocation
    }, 20)
}

function headerStyling() {
    const header = document.querySelector('body > div:nth-child(3) > header > div.vector-header-start > a > span')

    if (header && header.children.length == 1) {
        const div = document.createElement('span')
        div.classList.add('logo-text')
        div.innerHTML = '<span class="md-ellipsis" style="font-weight: 900;">Hedge</span><span class="md-ellipsis" style="font-weight: 100;">Docs</span>'

        header.replaceChildren(div)
    }
}