public.js 8.6 KB

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