app/javascript/packs/public.js

   1 import emojify from 'mastodon/emoji';
   2 import { length } from 'stringz';
   3 import { default as dateFormat } from 'date-fns/format';
   4 import distanceInWordsStrict from 'date-fns/distance_in_words_strict';
   5 import { delegate } from 'rails-ujs';
   6
   7 require.context('../images/', true);
   8
   9 const parseFormat = (format) => format.replace(/%(\w)/g, (_, modifier) => {
  10   switch (modifier) {
  11   case '%':
  12     return '%';
  13   case 'a':
  14     return 'ddd';
  15   case 'A':
  16     return 'ddd';
  17   case 'b':
  18     return 'MMM';
  19   case 'B':
  20     return 'MMMM';
  21   case 'd':
  22     return 'DD';
  23   case 'H':
  24     return 'HH';
  25   case 'I':
  26     return 'hh';
  27   case 'l':
  28     return 'H';
  29   case 'm':
  30     return 'M';
  31   case 'M':
  32     return 'mm';
  33   case 'p':
  34     return 'A';
  35   case 'S':
  36     return 'ss';
  37   case 'w':
  38     return 'd';
  39   case 'y':
  40     return 'YY';
  41   case 'Y':
  42     return 'YYYY';
  43   default:
  44     return `%${modifier}`;
  45   }
  46 });
  47
  48 document.addEventListener('DOMContentLoaded', () => {
  49   for (const content of document.querySelectorAll('.emojify')) {
  50     content.innerHTML = emojify(content.innerHTML);
  51   }
  52
  53   for (const content of document.querySelectorAll('time[data-format]')) {
  54     const format = parseFormat(content.dataset.format);
  55     const formattedDate = dateFormat(content.getAttribute('datetime'), format);
  56     content.textContent = formattedDate;
  57   }
  58
  59   for (const content of document.querySelectorAll('time.time-ago')) {
  60     const timeAgo = distanceInWordsStrict(new Date(), content.getAttribute('datetime'), {
  61       addSuffix: true,
  62     });
  63     content.textContent = timeAgo;
  64   }
  65
  66   delegate(document, '.video-player video', 'click', ({ target }) => {
  67     if (target.paused) {
  68       target.play();
  69     } else {
  70       target.pause();
  71     }
  72   });
  73
  74   delegate(document, '.media-spoiler', 'click', ({ target }) => {
  75     target.style.display = 'none';
  76   });
  77
  78   delegate(document, '.webapp-btn', 'click', ({ target, button }) => {
  79     if (button !== 0) {
  80       return true;
  81     }
  82     window.location.href = target.href;
  83     return false;
  84   });
  85
  86   delegate(document, '.status__content__spoiler-link', 'click', ({ target }) => {
  87     const contentEl = target.parentNode.parentNode.querySelector('.e-content');
  88     if (contentEl.style.display === 'block') {
  89       contentEl.style.display = 'none';
  90       target.parentNode.style.marginBottom = 0;
  91     } else {
  92       contentEl.style.display = 'block';
  93       target.parentNode.style.marginBottom = null;
  94     }
  95     return false;
  96   });
  97
  98   delegate(document, '.account_display_name', 'input', ({ target }) => {
  99     const [nameCounter ] = document.getElementsByClassName('name-counter');
 100     nameCounter.textContent = 30 - length(target.value);
 101   });
 102
 103   delegate(document, '.account_note', 'input', ({ target }) => {
 104     const [noteCounter ] = document.getElementsByClassName('note-counter');
 105     noteCounter.textContent = 160 - length(target.value);
 106   });
 107 });