From 42eb841dc2b217d66cf7c62108049b60eeb6d916 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Tue, 9 May 2017 21:50:43 +0900 Subject: [PATCH] Remove jquery-ujs (#2939) * Remove jquery-ujs * fix for eslint --- .../mastodon/actions/notifications.js | 6 +- app/javascript/packs/application.js | 5 +- app/javascript/packs/public.js | 82 +++++++++---------- package.json | 2 +- yarn.lock | 14 +--- 5 files changed, 53 insertions(+), 56 deletions(-) diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js index 8bae411c1e..7f80503309 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 : $('

').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 cfd134a9ba..247ac3922f 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 9a3f6c90b7..6aef2ffeef 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); }); }); diff --git a/package.json b/package.json index 11c5aa6750..bfabdfeceb 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,6 @@ "http-link-header": "^0.8.0", "immutable": "^3.8.1", "intl": "^1.2.5", - "jquery-ujs": "^1.2.2", "js-yaml": "^3.8.3", "lodash": "^4.17.4", "node-sass": "^4.5.2", @@ -70,6 +69,7 @@ "prop-types": "^15.5.8", "punycode": "^2.1.0", "rails-erb-loader": "^5.0.0", + "rails-ujs": "^5.1.0", "react": "^15.5.4", "react-addons-perf": "^15.4.2", "react-addons-shallow-compare": "^15.5.2", diff --git a/yarn.lock b/yarn.lock index bb0a6aae18..b38b94cfb4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3639,16 +3639,6 @@ jodid25519@^1.0.0: dependencies: jsbn "~0.1.0" -jquery-ujs@^1.2.2: - version "1.2.2" - resolved "https://registry.yarnpkg.com/jquery-ujs/-/jquery-ujs-1.2.2.tgz#6a8ef1020e6b6dda385b90a4bddc128c21c56397" - dependencies: - jquery ">=1.8.0" - -jquery@>=1.8.0: - version "3.2.1" - resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787" - js-base64@^2.1.9: version "2.1.9" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce" @@ -5404,6 +5394,10 @@ rails-erb-loader@^5.0.0: loader-utils "^1.1.0" lodash.defaults "^4.2.0" +rails-ujs@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/rails-ujs/-/rails-ujs-5.1.0.tgz#23ff5ce4bf21e09b33c4d6d7f8d1a51af05edde7" + randomatic@^1.1.3: version "1.1.5" resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.5.tgz#5e9ef5f2d573c67bd2b8124ae90b5156e457840b"