app/javascript/packs/public.js

   1 import escapeTextContentForBrowser from 'escape-html';
   2 import loadPolyfills from '../mastodon/load_polyfills';
   3 import ready from '../mastodon/ready';
   4 import { start } from '../mastodon/common';
   5
   6 start();
   7
   8 window.addEventListener('message', e => {
   9   const data = e.data || {};
  10
  11   if (!window.parent || data.type !== 'setHeight') {
  12     return;
  13   }
  14
  15   ready(() => {
  16     window.parent.postMessage({
  17       type: 'setHeight',
  18       id: data.id,
  19       height: document.getElementsByTagName('html')[0].scrollHeight,
  20     }, '*');
  21   });
  22 });
  23
  24 function main() {
  25   const IntlMessageFormat = require('intl-messageformat').default;
  26   const { timeAgoString } = require('../mastodon/components/relative_timestamp');
  27   const { delegate } = require('rails-ujs');
  28   const emojify = require('../mastodon/features/emoji/emoji').default;
  29   const { getLocale } = require('../mastodon/locales');
  30   const { messages } = getLocale();
  31   const React = require('react');
  32   const ReactDOM = require('react-dom');
  33   const Rellax = require('rellax');
  34   const createHistory = require('history').createBrowserHistory;
  35
  36   const scrollToDetailedStatus = () => {
  37     const history = createHistory();
  38     const detailedStatuses = document.querySelectorAll('.public-layout .detailed-status');
  39     const location = history.location;
  40
  41     if (detailedStatuses.length === 1 && (!location.state || !location.state.scrolledToDetailedStatus)) {
  42       detailedStatuses[0].scrollIntoView();
  43       history.replace(location.pathname, { ...location.state, scrolledToDetailedStatus: true });
  44     }
  45   };
  46
  47   ready(() => {
  48     const locale = document.documentElement.lang;
  49
  50     const dateTimeFormat = new Intl.DateTimeFormat(locale, {
  51       year: 'numeric',
  52       month: 'long',
  53       day: 'numeric',
  54       hour: 'numeric',
  55       minute: 'numeric',
  56     });
  57
  58     [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
  59       content.innerHTML = emojify(content.innerHTML);
  60     });
  61
  62     [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
  63       const datetime = new Date(content.getAttribute('datetime'));
  64       const formattedDate = dateTimeFormat.format(datetime);
  65
  66       content.title = formattedDate;
  67       content.textContent = formattedDate;
  68     });
  69
  70     [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
  71       const datetime = new Date(content.getAttribute('datetime'));
  72       const now      = new Date();
  73
  74       content.title = dateTimeFormat.format(datetime);
  75       content.textContent = timeAgoString({
  76         formatMessage: ({ id, defaultMessage }, values) => (new IntlMessageFormat(messages[id] || defaultMessage, locale)).format(values),
  77         formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
  78       }, datetime, now, now.getFullYear());
  79     });
  80
  81     const reactComponents = document.querySelectorAll('[data-component]');
  82
  83     if (reactComponents.length > 0) {
  84       import(/* webpackChunkName: "containers/media_container" */ '../mastodon/containers/media_container')
  85         .then(({ default: MediaContainer }) => {
  86           const content = document.createElement('div');
  87
  88           ReactDOM.render(<MediaContainer locale={locale} components={reactComponents} />, content);
  89           document.body.appendChild(content);
  90           scrollToDetailedStatus();
  91         })
  92         .catch(error => {
  93           console.error(error);
  94           scrollToDetailedStatus();
  95         });
  96     } else {
  97       scrollToDetailedStatus();
  98     }
  99
 100     const parallaxComponents = document.querySelectorAll('.parallax');
 101
 102     if (parallaxComponents.length > 0 ) {
 103       new Rellax('.parallax', { speed: -1 });
 104     }
 105   });
 106
 107   delegate(document, '.webapp-btn', 'click', ({ target, button }) => {
 108     if (button !== 0) {
 109       return true;
 110     }
 111     window.location.href = target.href;
 112     return false;
 113   });
 114
 115   delegate(document, '.status__content__spoiler-link', 'click', ({ target }) => {
 116     const contentEl = target.parentNode.parentNode.querySelector('.e-content');
 117
 118     if (contentEl.style.display === 'block') {
 119       contentEl.style.display = 'none';
 120       target.parentNode.style.marginBottom = 0;
 121     } else {
 122       contentEl.style.display = 'block';
 123       target.parentNode.style.marginBottom = null;
 124     }
 125
 126     return false;
 127   });
 128
 129   delegate(document, '.modal-button', 'click', e => {
 130     e.preventDefault();
 131
 132     let href;
 133
 134     if (e.target.nodeName !== 'A') {
 135       href = e.target.parentNode.href;
 136     } else {
 137       href = e.target.href;
 138     }
 139
 140     window.open(href, 'mastodon-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
 141   });
 142
 143   delegate(document, '#account_display_name', 'input', ({ target }) => {
 144     const name = document.querySelector('.card .display-name strong');
 145     if (name) {
 146       if (target.value) {
 147         name.innerHTML = emojify(escapeTextContentForBrowser(target.value));
 148       } else {
 149         name.textContent = document.querySelector('#default_account_display_name').textContent;
 150       }
 151     }
 152   });
 153
 154   delegate(document, '#account_avatar', 'change', ({ target }) => {
 155     const avatar = document.querySelector('.card .avatar img');
 156     const [file] = target.files || [];
 157     const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
 158
 159     avatar.src = url;
 160   });
 161
 162   delegate(document, '#account_header', 'change', ({ target }) => {
 163     const header = document.querySelector('.card .card__img img');
 164     const [file] = target.files || [];
 165     const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc;
 166
 167     header.src = url;
 168   });
 169
 170   delegate(document, '#account_locked', 'change', ({ target }) => {
 171     const lock = document.querySelector('.card .display-name i');
 172
 173     if (target.checked) {
 174       lock.style.display = 'inline';
 175     } else {
 176       lock.style.display = 'none';
 177     }
 178   });
 179
 180   delegate(document, '.input-copy input', 'click', ({ target }) => {
 181     target.select();
 182   });
 183
 184   delegate(document, '.input-copy button', 'click', ({ target }) => {
 185     const input = target.parentNode.querySelector('.input-copy__wrapper input');
 186
 187     input.focus();
 188     input.select();
 189
 190     try {
 191       if (document.execCommand('copy')) {
 192         input.blur();
 193         target.parentNode.classList.add('copied');
 194
 195         setTimeout(() => {
 196           target.parentNode.classList.remove('copied');
 197         }, 700);
 198       }
 199     } catch (err) {
 200       console.error(err);
 201     }
 202   });
 203 }
 204
 205 loadPolyfills().then(main).catch(error => {
 206   console.error(error);
 207 });