Add script to make embedded iframes autosize (#4853)

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'

app/javascript/packs/public.js

 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})`;
   });
 }

app/javascript/styles/basics.scss

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

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

public/embed.js

+(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();
+    });
+  });
+})();