Change embedded posts to use web UI (#31766)
Co-authored-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
f2a92c2d22
commit
3d46f47817
115 changed files with 710 additions and 1928 deletions
105
public/embed.js
105
public/embed.js
|
@ -1,5 +1,7 @@
|
|||
// @ts-check
|
||||
|
||||
const allowedPrefixes = (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT' && document.currentScript.dataset.allowedPrefixes) ? document.currentScript.dataset.allowedPrefixes.split(' ') : [];
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
|
@ -18,45 +20,71 @@
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {Map} map
|
||||
*/
|
||||
var generateId = function (map) {
|
||||
var id = 0, failCount = 0, idBuffer = new Uint32Array(1);
|
||||
|
||||
while (id === 0 || map.has(id)) {
|
||||
id = crypto.getRandomValues(idBuffer)[0];
|
||||
failCount++;
|
||||
|
||||
if (failCount > 100) {
|
||||
// give up and assign (easily guessable) unique number if getRandomValues is broken or no luck
|
||||
id = -(map.size + 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return id;
|
||||
};
|
||||
|
||||
ready(function () {
|
||||
/** @type {Map<number, HTMLIFrameElement>} */
|
||||
var iframes = new Map();
|
||||
/** @type {Map<number, HTMLQuoteElement | HTMLIFrameElement>} */
|
||||
var embeds = new Map();
|
||||
|
||||
window.addEventListener('message', function (e) {
|
||||
var data = e.data || {};
|
||||
|
||||
if (typeof data !== 'object' || data.type !== 'setHeight' || !iframes.has(data.id)) {
|
||||
if (typeof data !== 'object' || data.type !== 'setHeight' || !embeds.has(data.id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
var iframe = iframes.get(data.id);
|
||||
var embed = embeds.get(data.id);
|
||||
|
||||
if(!iframe) return;
|
||||
|
||||
if ('source' in e && iframe.contentWindow !== e.source) {
|
||||
return;
|
||||
if (embed instanceof HTMLIFrameElement) {
|
||||
embed.height = data.height;
|
||||
}
|
||||
|
||||
iframe.height = data.height;
|
||||
if (embed instanceof HTMLQuoteElement) {
|
||||
var iframe = embed.querySelector('iframe');
|
||||
|
||||
if (!iframe || ('source' in e && iframe.contentWindow !== e.source)) {
|
||||
return;
|
||||
}
|
||||
|
||||
iframe.height = data.height;
|
||||
|
||||
var placeholder = embed.querySelector('a');
|
||||
|
||||
if (!placeholder) return;
|
||||
|
||||
embed.removeChild(placeholder);
|
||||
}
|
||||
});
|
||||
|
||||
// Legacy embeds
|
||||
document.querySelectorAll('iframe.mastodon-embed').forEach(iframe => {
|
||||
// select unique id for each iframe
|
||||
var id = 0, failCount = 0, idBuffer = new Uint32Array(1);
|
||||
while (id === 0 || iframes.has(id)) {
|
||||
id = crypto.getRandomValues(idBuffer)[0];
|
||||
failCount++;
|
||||
if (failCount > 100) {
|
||||
// give up and assign (easily guessable) unique number if getRandomValues is broken or no luck
|
||||
id = -(iframes.size + 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
var id = generateId(embeds);
|
||||
|
||||
iframes.set(id, iframe);
|
||||
embeds.set(id, iframe);
|
||||
|
||||
iframe.scrolling = 'no';
|
||||
iframe.allow = 'fullscreen';
|
||||
iframe.sandbox = 'allow-scripts allow-same-origin';
|
||||
iframe.style.border = 0;
|
||||
iframe.style.overflow = 'hidden';
|
||||
iframe.style.display = 'block';
|
||||
|
||||
iframe.onload = function () {
|
||||
iframe.contentWindow.postMessage({
|
||||
|
@ -65,7 +93,38 @@
|
|||
}, '*');
|
||||
};
|
||||
|
||||
iframe.onload();
|
||||
iframe.onload(); // In case the script is executing after the iframe has already loaded
|
||||
});
|
||||
|
||||
// New generation of embeds
|
||||
document.querySelectorAll('blockquote.mastodon-embed').forEach(container => {
|
||||
var id = generateId(embeds);
|
||||
|
||||
embeds.set(id, container);
|
||||
|
||||
var iframe = document.createElement('iframe');
|
||||
var embedUrl = new URL(container.getAttribute('data-embed-url'));
|
||||
|
||||
if (embedUrl.protocol !== 'https:' && embedUrl.protocol !== 'http:') return;
|
||||
if (allowedPrefixes.every((allowedPrefix) => !embedUrl.toString().startsWith(allowedPrefix))) return;
|
||||
|
||||
iframe.src = embedUrl.toString();
|
||||
iframe.width = container.clientWidth;
|
||||
iframe.height = 0;
|
||||
iframe.allow = 'fullscreen';
|
||||
iframe.sandbox = 'allow-scripts allow-same-origin';
|
||||
iframe.style.border = 0;
|
||||
iframe.style.overflow = 'hidden';
|
||||
iframe.style.display = 'block';
|
||||
|
||||
iframe.onload = function () {
|
||||
iframe.contentWindow.postMessage({
|
||||
type: 'setHeight',
|
||||
id: id,
|
||||
}, '*');
|
||||
};
|
||||
|
||||
container.appendChild(iframe);
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue