Browse Source

Add script to make embedded iframes autosize (#4853)

master
Eugen Rochko 3 years ago
committed by GitHub
parent
commit
6867681c7c
5 changed files with 76 additions and 10 deletions
  1. +2
    -2
      app/javascript/mastodon/features/ui/components/embed_modal.js
  2. +28
    -6
      app/javascript/packs/public.js
  3. +1
    -0
      app/javascript/styles/basics.scss
  4. +2
    -2
      app/serializers/oembed_serializer.rb
  5. +43
    -0
      public/embed.js

+ 2
- 2
app/javascript/mastodon/features/ui/components/embed_modal.js View File

@@ -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'


+ 28
- 6
app/javascript/packs/public.js View File

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


+ 1
- 0
app/javascript/styles/basics.scss View File

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

.container {
position: absolute;


+ 2
- 2
app/serializers/oembed_serializer.rb View File

@@ -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


+ 43
- 0
public/embed.js 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();
});
});
})();

Loading…
Cancel
Save