Add script to make embedded iframes autosize (#4853)
This commit is contained in:
parent
bdc8b4fd91
commit
6867681c7c
5 changed files with 76 additions and 10 deletions
|
@ -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})`;
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue