🗺️ OSM Deep History integration

osm-deep-history-integration.user.js

// ==UserScript==
// @name        🗺️ OSM Deep History integration
// @namespace   Violentmonkey Scripts
// @match       https://www.openstreetmap.org/*
// @grant       none
// @version     1.0.3
// @license     GNU Affero General Public License v3.0
// @author      Zaczero
// @updateURL   https://gist.github.com/Zaczero/5e65ccd6c5a26c19d2a83130bc450ae1/raw/osm-deep-history-integration.user.js
// @downloadURL https://gist.github.com/Zaczero/5e65ccd6c5a26c19d2a83130bc450ae1/raw/osm-deep-history-integration.user.js
// ==/UserScript==


(() => {
  'use strict'

  const pattern = /^https?:\/\/(www\.)?(osm\.org|openstreetmap\.org)\/(node|way|relation)\/(\d+)$/g

  const addHistoryButton = linkElement => {
    if (linkElement.getAttribute('data-history-button')) return

    const matched = linkElement.href.match(pattern)
    if (!matched) return

    const [_, __, ___, type, id] = matched[0].split('/')
    const historyLink = `https://osm.mapki.com/history/${type}/${id}`

    const button = document.createElement('a')
    button.href = historyLink
    button.target = '_blank'
    button.textContent = '🅗'
    button.style.paddingLeft = '0.2ch'
    button.style.paddingRight = '0.45ch'
    button.style.position = 'relative'
    button.style.display = 'inline-block'
    button.style.transform = 'scale(1.4)'
    button.style.lineHeight = 1
    button.style.overflow = 'hidden'

    button.addEventListener('click', event => {
      event.stopPropagation()
    })

    linkElement.insertAdjacentElement('afterbegin', button)
    linkElement.setAttribute('data-history-button', 'true')
  }

  const scanLinks = () => {
    const links = document.querySelectorAll('a')
    links.forEach(addHistoryButton)
  }

  const observer = new MutationObserver(scanLinks)
  observer.observe(document.body, {
      childList: true,
      subtree: true
  })

  scanLinks()
})()