larlet-fr-david/david/2024/_sources/2024-03-25 - Inclusion.html

<style type="text/css">
  o-embed {
    /* Size of the oembed + paragraph + margins. */
    height: calc(300px + 1rem + 3rem);
  }
</style>

<o-embed url="https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457">
  <p>
    Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,
    il est probable que cela ne s’exécute pas dans un agrégateur par exemple.
  </p>
</o-embed>

<script type="module">
  class OEmbed extends HTMLElement {
    static tagName = 'o-embed'

    static register(tagName, registry) {
      if(!registry && ('customElements' in globalThis)) {
        registry = globalThis.customElements
      }
      registry?.define(tagName || this.tagName, this)
    }

    get url() {
      return this.getAttribute('url') || ''
    }

    constructor() {
      super()
      this.attachShadow({ mode: 'open' })
    }

    async connectedCallback() {
      let slot = document.createElement('slot')
      this.shadowRoot.appendChild(slot)

      const html = await this.fetchText(this.url)
      const oEmbedLink = this.extractOembedLink(html)
      const oEmbedJson = await this.fetchJson(oEmbedLink)
      this.innerHTML = oEmbedJson.html
    }

    fetchText(url) {
      return fetch(url)
        .then((data) => data.text())
        .catch(console.error.bind(this))
    }

    fetchJson(url) {
      return fetch(url, { type: 'json' })
        .then((data) => data.json())
        .catch(console.error.bind(this))
    }

    extractOembedLink(html) {
      const parser = new DOMParser()
      const htmlDocument = parser.parseFromString(html, "text/html")
      const oEmbedMeta = htmlDocument.documentElement.querySelector(
        'link[type="application/json+oembed"]'
      )
      return oEmbedMeta.href
    }
  }

  OEmbed.register()
</script>