Embed js height fix (#22141)

* only begin iframe reheight once document state is complete

* format

* lint fixes

* Update public/embed.js to use readystatechange event listener

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

* Call loaded() if ready, otherwise add listenter

* lint fix

Co-authored-by: Claire <claire.github-309c@sitedethib.com>
master
Matt Hodges 2022-12-15 09:18:59 -06:00 committed by GitHub
parent 04c611daa1
commit 4114a7088a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 9 deletions

View File

@ -1,24 +1,28 @@
// @ts-check // @ts-check
(function() { (function () {
'use strict'; 'use strict';
/** /**
* @param {() => void} loaded * @param {() => void} loaded
*/ */
var ready = function(loaded) { var ready = function (loaded) {
if (['interactive', 'complete'].indexOf(document.readyState) !== -1) { if (document.readyState === 'complete') {
loaded(); loaded();
} else { } else {
document.addEventListener('DOMContentLoaded', loaded); document.addEventListener('readystatechange', function () {
if (document.readyState === 'complete') {
loaded();
}
});
} }
}; };
ready(function() { ready(function () {
/** @type {Map<number, HTMLIFrameElement>} */ /** @type {Map<number, HTMLIFrameElement>} */
var iframes = new Map(); var iframes = new Map();
window.addEventListener('message', function(e) { window.addEventListener('message', function (e) {
var data = e.data || {}; var data = e.data || {};
if (typeof data !== 'object' || data.type !== 'setHeight' || !iframes.has(data.id)) { if (typeof data !== 'object' || data.type !== 'setHeight' || !iframes.has(data.id)) {
@ -34,7 +38,7 @@
iframe.height = data.height; iframe.height = data.height;
}); });
[].forEach.call(document.querySelectorAll('iframe.mastodon-embed'), function(iframe) { [].forEach.call(document.querySelectorAll('iframe.mastodon-embed'), function (iframe) {
// select unique id for each iframe // select unique id for each iframe
var id = 0, failCount = 0, idBuffer = new Uint32Array(1); var id = 0, failCount = 0, idBuffer = new Uint32Array(1);
while (id === 0 || iframes.has(id)) { while (id === 0 || iframes.has(id)) {
@ -49,10 +53,10 @@
iframes.set(id, iframe); iframes.set(id, iframe);
iframe.scrolling = 'no'; iframe.scrolling = 'no';
iframe.style.overflow = 'hidden'; iframe.style.overflow = 'hidden';
iframe.onload = function() { iframe.onload = function () {
iframe.contentWindow.postMessage({ iframe.contentWindow.postMessage({
type: 'setHeight', type: 'setHeight',
id: id, id: id,