app/javascript/packs/public.js

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