Remove jquery-ujs (#2939)

* Remove jquery-ujs

* fix for eslint

3 files changed, 48 insertions, 45 deletions

diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js
index 8bae411c1..7f8050330 100644
--- a/app/javascript/mastodon/actions/notifications.js
+++ b/app/javascript/mastodon/actions/notifications.js
@@ -1,7 +1,7 @@
 import api, { getLinks } from '../api'
 import Immutable from 'immutable';
 import IntlMessageFormat from 'intl-messageformat';
-
+import { unescape } from 'lodash';
 import { fetchRelationships } from './accounts';
 
 export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
@@ -25,6 +25,8 @@ const fetchRelatedRelationships = (dispatch, notifications) => {
   }
 };
 
+const unescapeHTML = (html) => unescape(html).replace(/<\/?\w+(?:\s[^>]*)?>/g, '');
+
 export function updateNotifications(notification, intlMessages, intlLocale) {
   return (dispatch, getState) => {
     const showAlert = getState().getIn(['settings', 'notifications', 'alerts', notification.type], true);
@@ -43,7 +45,7 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
     // Desktop notifications
     if (typeof window.Notification !== 'undefined' && showAlert) {
       const title = new IntlMessageFormat(intlMessages[`notification.${notification.type}`], intlLocale).format({ name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username });
-      const body  = (notification.status && notification.status.spoiler_text.length > 0) ? notification.status.spoiler_text : $('<p>').html(notification.status ? notification.status.content : '').text();
+      const body  = (notification.status && notification.status.spoiler_text.length > 0) ? notification.status.spoiler_text : unescapeHTML(notification.status ? notification.status.content : '');
 
       new Notification(title, { body, icon: notification.account.avatar, tag: notification.id });
     }
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index cfd134a9b..247ac3922 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -1,6 +1,7 @@
 import Mastodon from 'mastodon/containers/mastodon';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import Rails from 'rails-ujs';
 import 'font-awesome/css/font-awesome.css';
 import '../styles/application.scss';
 
@@ -9,10 +10,10 @@ if (!window.Intl) {
   require('intl/locale-data/jsonp/en.js');
 }
 
-window.jQuery = window.$ = require('jquery');
 window.Perf = require('react-addons-perf');
 
-require('jquery-ujs');
+Rails.start();
+
 require.context('../images/', true);
 
 const customContext = require.context('../../assets/stylesheets/', false);
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index 9a3f6c90b..6aef2ffee 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -2,9 +2,8 @@ import emojify from 'mastodon/emoji';
 import { length } from 'stringz';
 import { default as dateFormat } from 'date-fns/format';
 import distanceInWordsStrict from 'date-fns/distance_in_words_strict';
+import { delegate } from 'rails-ujs';
 
-window.jQuery = window.$ = require('jquery');
-require('jquery-ujs');
 require.context('../images/', true);
 
 const parseFormat = (format) => format.replace(/%(\w)/g, (_, modifier) => {
@@ -46,62 +45,63 @@ const parseFormat = (format) => format.replace(/%(\w)/g, (_, modifier) => {
   }
 });
 
-$(() => {
-  $.each($('.emojify'), (_, content) => {
-    const $content = $(content);
-    $content.html(emojify($content.html()));
-  });
+document.addEventListener('DOMContentLoaded', () => {
+  for (const content of document.getElementsByClassName('emojify')) {
+    content.innerHTML = emojify(content.innerHTML);
+  }
 
-  $('time[data-format]').each((_, content) => {
-    const $content = $(content);
-    const format = parseFormat($content.data('format'));
-    const formattedDate = dateFormat($content.attr('datetime'), format);
-    $content.text(formattedDate);
-  });
+  for (const content of document.querySelectorAll('time[data-format]')) {
+    const format = parseFormat(content.dataset.format);
+    const formattedDate = dateFormat(content.getAttribute('datetime'), format);
+    content.textContent = formattedDate;
+  }
 
-  $('time.time-ago').each((_, content) => {
-    const $content = $(content);
-    const timeAgo = distanceInWordsStrict(new Date(), $content.attr('datetime'), { addSuffix: true });
-    $content.text(timeAgo);
-  });
+  for (const content of document.querySelectorAll('time.time-ago')) {
+    const timeAgo = distanceInWordsStrict(new Date(), content.getAttribute('datetime'), {
+      addSuffix: true,
+    });
+    content.textContent = timeAgo;
+  }
 
-  $('.video-player video').on('click', e => {
-    if (e.target.paused) {
-      e.target.play();
+  delegate(document, '.video-player video', 'click', ({ target }) => {
+    if (target.paused) {
+      target.play();
     } else {
-      e.target.pause();
+      target.pause();
     }
   });
 
-  $('.media-spoiler').on('click', e => {
-    $(e.target).hide();
+  delegate(document, '.media-spoiler', 'click', ({ target }) => {
+    target.style.display = 'none';
   });
 
-  $('.webapp-btn').on('click', e => {
-    if (e.button === 0) {
-      e.preventDefault();
-      window.location.href = $(e.target).attr('href');
+  delegate(document, '.webapp-btn', 'click', ({ target, button }) => {
+    if (button !== 0) {
+      return true;
     }
+    window.location.href = target.href;
+    return false;
   });
 
-  $('.status__content__spoiler-link').on('click', e => {
-    e.preventDefault();
-    const contentEl = $(e.target).parent().parent().find('div');
-
-    if (contentEl.is(':visible')) {
-      contentEl.hide();
-      $(e.target).parent().attr('style', 'margin-bottom: 0');
+  delegate(document, '.status__content__spoiler-link', 'click', ({ target }) => {
+    const contentEl = target.parentNode.parentNode.querySelector('.e-content');
+    if (contentEl.style.display === 'block') {
+      contentEl.style.display = 'none';
+      target.parentNode.style.marginBottom = 0;
     } else {
-      contentEl.show();
-      $(e.target).parent().attr('style', null);
+      contentEl.style.display = 'block';
+      target.parentNode.style.marginBottom = null;
     }
+    return false;
   });
 
-  $('.account_display_name').on('input', e => {
-    $('.name-counter').text(30 - length($(e.target).val()));
+  delegate(document, '.account_display_name', 'input', ({ target }) => {
+    const [nameCounter, ] = document.getElementsByClassName('name-counter');
+    nameCounter.textContent = 30 - length(target.value);
   });
 
-  $('.account_note').on('input', e => {
-    $('.note-counter').text(160 - length($(e.target).val()));
+  delegate(document, '.account_note', 'input', ({ target }) => {
+    const [noteCounter, ] = document.getElementsByClassName('.note-counter');
+    noteCounter.textContent = 160 - length(target.value);
   });
 });