commit: 6867681c7c0b4a5ec48511c013c3f3aa8684bdae
parent: bdc8b4fd91aa90c624bca6cd6fe202876b4f654f
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 9 Sep 2017 16:23:44 +0200
Add script to make embedded iframes autosize (#4853)
Diffstat:
5 files changed, 76 insertions(+), 10 deletions(-)
diff --git a/app/javascript/mastodon/features/ui/components/embed_modal.js b/app/javascript/mastodon/features/ui/components/embed_modal.js
@@ -33,7 +33,8 @@ export default class EmbedModal extends ImmutablePureComponent {
iframeDocument.close();
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
className='embed-modal__iframe'
- scrolling='no'
frameBorder='0'
ref={this.setIframeRef}
title='preview'
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
@@ -1,4 +1,21 @@
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() {
const { length } = require('stringz');
@@ -6,13 +23,13 @@ function main() {
const { delegate } = require('rails-ujs');
const emojify = require('../mastodon/emoji').default;
const { getLocale } = require('../mastodon/locales');
- const ready = require('../mastodon/ready').default;
-
const { localeData } = getLocale();
+
localeData.forEach(IntlRelativeFormat.__addLocaleData);
ready(() => {
const locale = document.documentElement.lang;
+
const dateTimeFormat = new Intl.DateTimeFormat(locale, {
year: 'numeric',
month: 'long',
@@ -20,6 +37,7 @@ function main() {
hour: 'numeric',
minute: 'numeric',
});
+
const relativeFormat = new IntlRelativeFormat(locale);
[].forEach.call(document.querySelectorAll('.emojify'), (content) => {
@@ -29,12 +47,14 @@ function main() {
[].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
const datetime = new Date(content.getAttribute('datetime'));
const formattedDate = dateTimeFormat.format(datetime);
+
content.title = formattedDate;
content.textContent = formattedDate;
});
[].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
const datetime = new Date(content.getAttribute('datetime'));
+
content.title = dateTimeFormat.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');
});
});
-
- if (window.parent) {
- window.parent.postMessage(['setHeight', document.getElementsByTagName('html')[0].scrollHeight], '*');
- }
});
delegate(document, '.video-player video', 'click', ({ target }) => {
@@ -77,6 +93,7 @@ function main() {
delegate(document, '.status__content__spoiler-link', 'click', ({ target }) => {
const contentEl = target.parentNode.parentNode.querySelector('.e-content');
+
if (contentEl.style.display === 'block') {
contentEl.style.display = 'none';
target.parentNode.style.marginBottom = 0;
@@ -84,11 +101,13 @@ function main() {
contentEl.style.display = 'block';
target.parentNode.style.marginBottom = null;
}
+
return false;
});
delegate(document, '.account_display_name', 'input', ({ target }) => {
const nameCounter = document.querySelector('.name-counter');
+
if (nameCounter) {
nameCounter.textContent = 30 - length(target.value);
}
@@ -96,6 +115,7 @@ function main() {
delegate(document, '.account_note', 'input', ({ target }) => {
const noteCounter = document.querySelector('.note-counter');
+
if (noteCounter) {
noteCounter.textContent = 160 - length(target.value);
}
@@ -105,6 +125,7 @@ function main() {
const avatar = document.querySelector('.card.compact .avatar img');
const [file] = target.files || [];
const url = URL.createObjectURL(file);
+
avatar.src = url;
});
@@ -112,6 +133,7 @@ function main() {
const header = document.querySelector('.card.compact');
const [file] = target.files || [];
const url = URL.createObjectURL(file);
+
header.style.backgroundImage = `url(${url})`;
});
}
diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss
@@ -45,6 +45,7 @@ body {
&.embed {
background: transparent;
margin: 0;
+ padding-bottom: 0;
.container {
position: absolute;
diff --git a/app/serializers/oembed_serializer.rb b/app/serializers/oembed_serializer.rb
@@ -40,12 +40,12 @@ class OEmbedSerializer < ActiveModel::Serializer
attributes = {
src: embed_short_account_status_url(object.account, object),
class: 'mastodon-embed',
- style: 'max-width: 100%; border: none;',
+ style: 'max-width: 100%; border: 0',
width: width,
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
def width
diff --git a/public/embed.js b/public/embed.js
@@ -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();
+ });
+ });
+})();
