You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

254 lines
8.0 KiB

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