diff options
-rw-r--r-- | app/javascript/mastodon/features/ui/components/embed_modal.js | 4 | ||||
-rw-r--r-- | app/javascript/packs/public.js | 34 | ||||
-rw-r--r-- | app/javascript/styles/basics.scss | 1 | ||||
-rw-r--r-- | app/serializers/oembed_serializer.rb | 4 | ||||
-rw-r--r-- | public/embed.js | 43 |
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 index 992aed8a3fa..1afffb51bc9 100644 --- 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 index 7b90aa2b8fe..1a274c4cbd7 100644 --- 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 index 05c93b42e72..c5f98750cdd 100644 --- 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 index bd05da585a7..af03fd47aca 100644 --- 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 new file mode 100644 index 00000000000..dac50745376 --- /dev/null +++ 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(); + }); + }); +})(); |