import emojify from 'mastodon/emoji'; import { length } from 'stringz'; import { default as dateFormat } from 'date-fns/format'; import distanceInWordsStrict from 'date-fns/distance_in_words_strict'; import { delegate } from 'rails-ujs'; require.context('../images/', true); const parseFormat = (format) => format.replace(/%(\w)/g, (_, modifier) => { switch (modifier) { case '%': return '%'; case 'a': return 'ddd'; case 'A': return 'ddd'; case 'b': return 'MMM'; case 'B': return 'MMMM'; case 'd': return 'DD'; case 'H': return 'HH'; case 'I': return 'hh'; case 'l': return 'H'; case 'm': return 'M'; case 'M': return 'mm'; case 'p': return 'A'; case 'S': return 'ss'; case 'w': return 'd'; case 'y': return 'YY'; case 'Y': return 'YYYY'; default: return `%${modifier}`; } }); document.addEventListener('DOMContentLoaded', () => { [].forEach.call(document.querySelectorAll('.emojify'), (content) => { content.innerHTML = emojify(content.innerHTML); }); [].forEach.call(document.querySelectorAll('time[data-format]'), (content) => { const format = parseFormat(content.dataset.format); const formattedDate = dateFormat(content.getAttribute('datetime'), format); content.textContent = formattedDate; }); [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => { const timeAgo = distanceInWordsStrict(new Date(), content.getAttribute('datetime'), { addSuffix: true, }); content.textContent = timeAgo; }); }); delegate(document, '.video-player video', 'click', ({ target }) => { if (target.paused) { target.play(); } else { target.pause(); } }); delegate(document, '.media-spoiler', 'click', ({ target }) => { target.style.display = 'none'; }); delegate(document, '.webapp-btn', 'click', ({ target, button }) => { if (button !== 0) { return true; } window.location.href = target.href; return false; }); 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; } else { 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); } }); delegate(document, '.account_note', 'input', ({ target }) => { const noteCounter = document.querySelector('.note-counter'); if (noteCounter) { noteCounter.textContent = 160 - length(target.value); } });