Add script to make embedded iframes autosize (#4853)

This commit is contained in:
Eugen Rochko 2017-09-09 16:23:44 +02:00 committed by GitHub
parent bdc8b4fd91
commit 6867681c7c
5 changed files with 76 additions and 10 deletions

View File

@ -33,7 +33,8 @@ export default class EmbedModal extends ImmutablePureComponent {
iframeDocument.close(); iframeDocument.close();
iframeDocument.body.style.margin = 0; iframeDocument.body.style.margin = 0;
this.iframe.height = iframeDocument.body.scrollHeight + 'px'; this.iframe.width = iframeDocument.body.scrollWidth;
this.iframe.height = iframeDocument.body.scrollHeight;
}); });
} }
@ -71,7 +72,6 @@ export default class EmbedModal extends ImmutablePureComponent {
<iframe <iframe
className='embed-modal__iframe' className='embed-modal__iframe'
scrolling='no'
frameBorder='0' frameBorder='0'
ref={this.setIframeRef} ref={this.setIframeRef}
title='preview' title='preview'

View File

@ -1,4 +1,21 @@
import loadPolyfills from '../mastodon/load_polyfills'; import loadPolyfills from '../mastodon/load_polyfills';
import ready from '../mastodon/ready';
window.addEventListener('message', e => {
const data = e.data || {};
if (!window.parent || data.type !== 'setHeight') {
return;
}
ready(() => {
window.parent.postMessage({
type: 'setHeight',
id: data.id,
height: document.getElementsByTagName('html')[0].scrollHeight,
}, '*');
});
});
function main() { function main() {
const { length } = require('stringz'); const { length } = require('stringz');
@ -6,13 +23,13 @@ function main() {
const { delegate } = require('rails-ujs'); const { delegate } = require('rails-ujs');
const emojify = require('../mastodon/emoji').default; const emojify = require('../mastodon/emoji').default;
const { getLocale } = require('../mastodon/locales'); const { getLocale } = require('../mastodon/locales');
const ready = require('../mastodon/ready').default;
const { localeData } = getLocale(); const { localeData } = getLocale();
localeData.forEach(IntlRelativeFormat.__addLocaleData); localeData.forEach(IntlRelativeFormat.__addLocaleData);
ready(() => { ready(() => {
const locale = document.documentElement.lang; const locale = document.documentElement.lang;
const dateTimeFormat = new Intl.DateTimeFormat(locale, { const dateTimeFormat = new Intl.DateTimeFormat(locale, {
year: 'numeric', year: 'numeric',
month: 'long', month: 'long',
@ -20,6 +37,7 @@ function main() {
hour: 'numeric', hour: 'numeric',
minute: 'numeric', minute: 'numeric',
}); });
const relativeFormat = new IntlRelativeFormat(locale); const relativeFormat = new IntlRelativeFormat(locale);
[].forEach.call(document.querySelectorAll('.emojify'), (content) => { [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
@ -29,12 +47,14 @@ function main() {
[].forEach.call(document.querySelectorAll('time.formatted'), (content) => { [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
const datetime = new Date(content.getAttribute('datetime')); const datetime = new Date(content.getAttribute('datetime'));
const formattedDate = dateTimeFormat.format(datetime); const formattedDate = dateTimeFormat.format(datetime);
content.title = formattedDate; content.title = formattedDate;
content.textContent = formattedDate; content.textContent = formattedDate;
}); });
[].forEach.call(document.querySelectorAll('time.time-ago'), (content) => { [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
const datetime = new Date(content.getAttribute('datetime')); const datetime = new Date(content.getAttribute('datetime'));
content.title = dateTimeFormat.format(datetime); content.title = dateTimeFormat.format(datetime);
content.textContent = relativeFormat.format(datetime); content.textContent = relativeFormat.format(datetime);
}); });
@ -45,10 +65,6 @@ function main() {
window.open(e.target.href, 'mastodon-intent', 'width=400,height=400,resizable=no,menubar=no,status=no,scrollbars=yes'); window.open(e.target.href, 'mastodon-intent', 'width=400,height=400,resizable=no,menubar=no,status=no,scrollbars=yes');
}); });
}); });
if (window.parent) {
window.parent.postMessage(['setHeight', document.getElementsByTagName('html')[0].scrollHeight], '*');
}
}); });
delegate(document, '.video-player video', 'click', ({ target }) => { delegate(document, '.video-player video', 'click', ({ target }) => {
@ -77,6 +93,7 @@ function main() {
delegate(document, '.status__content__spoiler-link', 'click', ({ target }) => { delegate(document, '.status__content__spoiler-link', 'click', ({ target }) => {
const contentEl = target.parentNode.parentNode.querySelector('.e-content'); const contentEl = target.parentNode.parentNode.querySelector('.e-content');
if (contentEl.style.display === 'block') { if (contentEl.style.display === 'block') {
contentEl.style.display = 'none'; contentEl.style.display = 'none';
target.parentNode.style.marginBottom = 0; target.parentNode.style.marginBottom = 0;
@ -84,11 +101,13 @@ function main() {
contentEl.style.display = 'block'; contentEl.style.display = 'block';
target.parentNode.style.marginBottom = null; target.parentNode.style.marginBottom = null;
} }
return false; return false;
}); });
delegate(document, '.account_display_name', 'input', ({ target }) => { delegate(document, '.account_display_name', 'input', ({ target }) => {
const nameCounter = document.querySelector('.name-counter'); const nameCounter = document.querySelector('.name-counter');
if (nameCounter) { if (nameCounter) {
nameCounter.textContent = 30 - length(target.value); nameCounter.textContent = 30 - length(target.value);
} }
@ -96,6 +115,7 @@ function main() {
delegate(document, '.account_note', 'input', ({ target }) => { delegate(document, '.account_note', 'input', ({ target }) => {
const noteCounter = document.querySelector('.note-counter'); const noteCounter = document.querySelector('.note-counter');
if (noteCounter) { if (noteCounter) {
noteCounter.textContent = 160 - length(target.value); noteCounter.textContent = 160 - length(target.value);
} }
@ -105,6 +125,7 @@ function main() {
const avatar = document.querySelector('.card.compact .avatar img'); const avatar = document.querySelector('.card.compact .avatar img');
const [file] = target.files || []; const [file] = target.files || [];
const url = URL.createObjectURL(file); const url = URL.createObjectURL(file);
avatar.src = url; avatar.src = url;
}); });
@ -112,6 +133,7 @@ function main() {
const header = document.querySelector('.card.compact'); const header = document.querySelector('.card.compact');
const [file] = target.files || []; const [file] = target.files || [];
const url = URL.createObjectURL(file); const url = URL.createObjectURL(file);
header.style.backgroundImage = `url(${url})`; header.style.backgroundImage = `url(${url})`;
}); });
} }

View File

@ -45,6 +45,7 @@ body {
&.embed { &.embed {
background: transparent; background: transparent;
margin: 0; margin: 0;
padding-bottom: 0;
.container { .container {
position: absolute; position: absolute;

View File

@ -40,12 +40,12 @@ class OEmbedSerializer < ActiveModel::Serializer
attributes = { attributes = {
src: embed_short_account_status_url(object.account, object), src: embed_short_account_status_url(object.account, object),
class: 'mastodon-embed', class: 'mastodon-embed',
style: 'max-width: 100%; border: none;', style: 'max-width: 100%; border: 0',
width: width, width: width,
height: height, height: height,
} }
content_tag :iframe, nil, attributes content_tag(:iframe, nil, attributes) + content_tag(:script, nil, src: full_asset_url('embed.js'), async: true)
end end
def width def width

43
public/embed.js Normal file
View File

@ -0,0 +1,43 @@
(function() {
'use strict';
var ready = function(loaded) {
if (['interactive', 'complete'].indexOf(document.readyState) !== -1) {
loaded();
} else {
document.addEventListener('DOMContentLoaded', loaded);
}
};
ready(function() {
var iframes = [];
window.addEventListener('message', function(e) {
var data = e.data || {};
if (data.type !== 'setHeight' || !iframes[data.id]) {
return;
}
iframes[data.id].height = data.height;
});
[].forEach.call(document.querySelectorAll('iframe.mastodon-embed'), function(iframe) {
iframe.scrolling = 'no';
iframe.style.overflow = 'hidden';
iframes.push(iframe);
var id = iframes.length - 1;
iframe.onload = function() {
iframe.contentWindow.postMessage({
type: 'setHeight',
id: id,
}, '*');
};
iframe.onload();
});
});
})();