logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

public.js (5066B)


  1. import loadPolyfills from '../mastodon/load_polyfills';
  2. import ready from '../mastodon/ready';
  3. window.addEventListener('message', e => {
  4. const data = e.data || {};
  5. if (!window.parent || data.type !== 'setHeight') {
  6. return;
  7. }
  8. ready(() => {
  9. window.parent.postMessage({
  10. type: 'setHeight',
  11. id: data.id,
  12. height: document.getElementsByTagName('html')[0].scrollHeight,
  13. }, '*');
  14. });
  15. });
  16. function main() {
  17. const { length } = require('stringz');
  18. const IntlRelativeFormat = require('intl-relativeformat').default;
  19. const { delegate } = require('rails-ujs');
  20. const emojify = require('../mastodon/features/emoji/emoji').default;
  21. const { getLocale } = require('../mastodon/locales');
  22. const { localeData } = getLocale();
  23. const VideoContainer = require('../mastodon/containers/video_container').default;
  24. const CardContainer = require('../mastodon/containers/card_container').default;
  25. const React = require('react');
  26. const ReactDOM = require('react-dom');
  27. localeData.forEach(IntlRelativeFormat.__addLocaleData);
  28. ready(() => {
  29. const locale = document.documentElement.lang;
  30. const dateTimeFormat = new Intl.DateTimeFormat(locale, {
  31. year: 'numeric',
  32. month: 'long',
  33. day: 'numeric',
  34. hour: 'numeric',
  35. minute: 'numeric',
  36. });
  37. const relativeFormat = new IntlRelativeFormat(locale);
  38. [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
  39. content.innerHTML = emojify(content.innerHTML);
  40. });
  41. [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
  42. const datetime = new Date(content.getAttribute('datetime'));
  43. const formattedDate = dateTimeFormat.format(datetime);
  44. content.title = formattedDate;
  45. content.textContent = formattedDate;
  46. });
  47. [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
  48. const datetime = new Date(content.getAttribute('datetime'));
  49. content.title = dateTimeFormat.format(datetime);
  50. content.textContent = relativeFormat.format(datetime);
  51. });
  52. [].forEach.call(document.querySelectorAll('.logo-button'), (content) => {
  53. content.addEventListener('click', (e) => {
  54. e.preventDefault();
  55. window.open(e.target.href, 'mastodon-intent', 'width=400,height=400,resizable=no,menubar=no,status=no,scrollbars=yes');
  56. });
  57. });
  58. [].forEach.call(document.querySelectorAll('[data-component="Video"]'), (content) => {
  59. const props = JSON.parse(content.getAttribute('data-props'));
  60. ReactDOM.render(<VideoContainer locale={locale} {...props} />, content);
  61. });
  62. [].forEach.call(document.querySelectorAll('[data-component="Card"]'), (content) => {
  63. const props = JSON.parse(content.getAttribute('data-props'));
  64. ReactDOM.render(<CardContainer locale={locale} {...props} />, content);
  65. });
  66. const mediaGalleries = document.querySelectorAll('[data-component="MediaGallery"]');
  67. if (mediaGalleries.length > 0) {
  68. const MediaGalleriesContainer = require('../mastodon/containers/media_galleries_container').default;
  69. const content = document.createElement('div');
  70. ReactDOM.render(<MediaGalleriesContainer locale={locale} galleries={mediaGalleries} />, content);
  71. document.body.appendChild(content);
  72. }
  73. });
  74. delegate(document, '.webapp-btn', 'click', ({ target, button }) => {
  75. if (button !== 0) {
  76. return true;
  77. }
  78. window.location.href = target.href;
  79. return false;
  80. });
  81. delegate(document, '.status__content__spoiler-link', 'click', ({ target }) => {
  82. const contentEl = target.parentNode.parentNode.querySelector('.e-content');
  83. if (contentEl.style.display === 'block') {
  84. contentEl.style.display = 'none';
  85. target.parentNode.style.marginBottom = 0;
  86. } else {
  87. contentEl.style.display = 'block';
  88. target.parentNode.style.marginBottom = null;
  89. }
  90. return false;
  91. });
  92. delegate(document, '.account_display_name', 'input', ({ target }) => {
  93. const nameCounter = document.querySelector('.name-counter');
  94. if (nameCounter) {
  95. nameCounter.textContent = 30 - length(target.value);
  96. }
  97. });
  98. delegate(document, '.account_note', 'input', ({ target }) => {
  99. const noteCounter = document.querySelector('.note-counter');
  100. if (noteCounter) {
  101. noteCounter.textContent = 160 - length(target.value);
  102. }
  103. });
  104. delegate(document, '#account_avatar', 'change', ({ target }) => {
  105. const avatar = document.querySelector('.card.compact .avatar img');
  106. const [file] = target.files || [];
  107. const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
  108. avatar.src = url;
  109. });
  110. delegate(document, '#account_header', 'change', ({ target }) => {
  111. const header = document.querySelector('.card.compact');
  112. const [file] = target.files || [];
  113. const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc;
  114. header.style.backgroundImage = `url(${url})`;
  115. });
  116. }
  117. loadPolyfills().then(main).catch(error => {
  118. console.error(error);
  119. });