Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

2024-03-25 - Inclusion.html 1.8KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <style type="text/css">
  2. o-embed {
  3. /* Size of the oembed + paragraph + margins. */
  4. height: calc(300px + 1rem + 3rem);
  5. }
  6. </style>
  7. <o-embed url="https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457">
  8. <p>
  9. Vous devriez voir s’afficher une carte de mon « Grand Tour de la forêt de Ouareau »,
  10. il est probable que cela ne s’exécute pas dans un agrégateur par exemple.
  11. </p>
  12. </o-embed>
  13. <script type="module">
  14. class OEmbed extends HTMLElement {
  15. static tagName = 'o-embed'
  16. static register(tagName, registry) {
  17. if(!registry && ('customElements' in globalThis)) {
  18. registry = globalThis.customElements
  19. }
  20. registry?.define(tagName || this.tagName, this)
  21. }
  22. get url() {
  23. return this.getAttribute('url') || ''
  24. }
  25. constructor() {
  26. super()
  27. this.attachShadow({ mode: 'open' })
  28. }
  29. async connectedCallback() {
  30. let slot = document.createElement('slot')
  31. this.shadowRoot.appendChild(slot)
  32. const html = await this.fetchText(this.url)
  33. const oEmbedLink = this.extractOembedLink(html)
  34. const oEmbedJson = await this.fetchJson(oEmbedLink)
  35. this.innerHTML = oEmbedJson.html
  36. }
  37. fetchText(url) {
  38. return fetch(url)
  39. .then((data) => data.text())
  40. .catch(console.error.bind(this))
  41. }
  42. fetchJson(url) {
  43. return fetch(url, { type: 'json' })
  44. .then((data) => data.json())
  45. .catch(console.error.bind(this))
  46. }
  47. extractOembedLink(html) {
  48. const parser = new DOMParser()
  49. const htmlDocument = parser.parseFromString(html, "text/html")
  50. const oEmbedMeta = htmlDocument.documentElement.querySelector(
  51. 'link[type="application/json+oembed"]'
  52. )
  53. return oEmbedMeta.href
  54. }
  55. }
  56. OEmbed.register()
  57. </script>