diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2018-07-28 19:25:33 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-07-28 19:25:33 +0200 |
commit | bb71538bb503159177d46d8956bd466973c0876b (patch) | |
tree | 41e39f53b365d91f83cfe393d75ddf8a1624ded9 /app/javascript/packs | |
parent | e23b26178a71f90d64fe2a3e9e4468f265ecc71c (diff) |
Redesign public profiles and toots (#8068)
Diffstat (limited to 'app/javascript/packs')
-rw-r--r-- | app/javascript/packs/public.js | 45 |
1 files changed, 32 insertions, 13 deletions
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index 4b1e87ae3..855e56ee6 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -22,15 +22,15 @@ window.addEventListener('message', e => { function main() { const { length } = require('stringz'); - const IntlRelativeFormat = require('intl-relativeformat').default; + const IntlMessageFormat = require('intl-messageformat').default; + const { timeAgoString } = require('../mastodon/components/relative_timestamp'); const { delegate } = require('rails-ujs'); const emojify = require('../mastodon/features/emoji/emoji').default; const { getLocale } = require('../mastodon/locales'); - const { localeData } = getLocale(); + const { messages } = getLocale(); const React = require('react'); const ReactDOM = require('react-dom'); - - localeData.forEach(IntlRelativeFormat.__addLocaleData); + const Rellax = require('rellax'); ready(() => { const locale = document.documentElement.lang; @@ -43,8 +43,6 @@ function main() { minute: 'numeric', }); - const relativeFormat = new IntlRelativeFormat(locale); - [].forEach.call(document.querySelectorAll('.emojify'), (content) => { content.innerHTML = emojify(content.innerHTML); }); @@ -59,12 +57,16 @@ function main() { [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => { const datetime = new Date(content.getAttribute('datetime')); + const now = new Date(); content.title = dateTimeFormat.format(datetime); - content.textContent = relativeFormat.format(datetime); + content.textContent = timeAgoString({ + formatMessage: ({ id, defaultMessage }, values) => (new IntlMessageFormat(messages[id] || defaultMessage, locale)).format(values), + formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date), + }, datetime, now, datetime.getFullYear()); }); - [].forEach.call(document.querySelectorAll('.logo-button'), (content) => { + [].forEach.call(document.querySelectorAll('.modal-button'), (content) => { content.addEventListener('click', (e) => { e.preventDefault(); window.open(e.target.href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes'); @@ -82,6 +84,8 @@ function main() { }) .catch(error => console.error(error)); } + + new Rellax('.parallax', { speed: -1 }); }); delegate(document, '.webapp-btn', 'click', ({ target, button }) => { @@ -106,15 +110,20 @@ function main() { return false; }); - delegate(document, '.account_display_name', 'input', ({ target }) => { + delegate(document, '#account_display_name', 'input', ({ target }) => { const nameCounter = document.querySelector('.name-counter'); + const name = document.querySelector('.card .display-name strong'); if (nameCounter) { nameCounter.textContent = 30 - length(target.value); } + + if (name) { + name.innerHTML = emojify(target.value); + } }); - delegate(document, '.account_note', 'input', ({ target }) => { + delegate(document, '#account_note', 'input', ({ target }) => { const noteCounter = document.querySelector('.note-counter'); if (noteCounter) { @@ -123,7 +132,7 @@ function main() { }); delegate(document, '#account_avatar', 'change', ({ target }) => { - const avatar = document.querySelector('.card.compact .avatar img'); + const avatar = document.querySelector('.card .avatar img'); const [file] = target.files || []; const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc; @@ -131,11 +140,21 @@ function main() { }); delegate(document, '#account_header', 'change', ({ target }) => { - const header = document.querySelector('.card.compact'); + const header = document.querySelector('.card .card__img img'); const [file] = target.files || []; const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc; - header.style.backgroundImage = `url(${url})`; + header.src = url; + }); + + delegate(document, '#account_locked', 'change', ({ target }) => { + const lock = document.querySelector('.card .display-name i'); + + if (target.checked) { + lock.style.display = 'inline'; + } else { + lock.style.display = 'none'; + } }); } |