From f5bf5ebb82e3af420dcd23d602b1be6cc86838e1 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 3 May 2017 02:04:16 +0200 Subject: Replace sprockets/browserify with Webpack (#2617) * Replace browserify with webpack * Add react-intl-translations-manager * Do not minify in development, add offline-plugin for ServiceWorker background cache updates * Adjust tests and dependencies * Fix production deployments * Fix tests * More optimizations * Improve travis cache for npm stuff * Re-run travis * Add back support for custom.scss as before * Remove offline-plugin and babili * Fix issue with Immutable.List().unshift(...values) not working as expected * Make travis load schema instead of running all migrations in sequence * Fix missing React import in WarningContainer. Optimize rendering performance by using ImmutablePureComponent instead of React.PureComponent. ImmutablePureComponent uses Immutable.is() to compare props. Replace dynamic callback bindings in * Add react definitions to places that use JSX * Add Procfile.dev for running rails, webpack and streaming API at the same time --- app/javascript/packs/application.js | 29 ++++++++++++++++++++ app/javascript/packs/public.js | 53 +++++++++++++++++++++++++++++++++++++ 2 files changed, 82 insertions(+) create mode 100644 app/javascript/packs/application.js create mode 100644 app/javascript/packs/public.js (limited to 'app/javascript/packs') diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js new file mode 100644 index 000000000..cfd134a9b --- /dev/null +++ b/app/javascript/packs/application.js @@ -0,0 +1,29 @@ +import Mastodon from 'mastodon/containers/mastodon'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import 'font-awesome/css/font-awesome.css'; +import '../styles/application.scss'; + +if (!window.Intl) { + require('intl'); + require('intl/locale-data/jsonp/en.js'); +} + +window.jQuery = window.$ = require('jquery'); +window.Perf = require('react-addons-perf'); + +require('jquery-ujs'); +require.context('../images/', true); + +const customContext = require.context('../../assets/stylesheets/', false); + +if (customContext.keys().indexOf('./custom.scss') !== -1) { + customContext('./custom.scss'); +} + +document.addEventListener('DOMContentLoaded', () => { + const mountNode = document.getElementById('mastodon'); + const props = JSON.parse(mountNode.getAttribute('data-props')); + + ReactDOM.render(, mountNode); +}); diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js new file mode 100644 index 000000000..24e7d0189 --- /dev/null +++ b/app/javascript/packs/public.js @@ -0,0 +1,53 @@ +import emojify from 'mastodon/emoji'; +import { length } from 'stringz'; + +window.jQuery = window.$ = require('jquery'); +require('jquery-ujs'); +require.context('../images/', true); + +$(() => { + $.each($('.emojify'), (_, content) => { + const $content = $(content); + $content.html(emojify($content.html())); + }); + + $('.video-player video').on('click', e => { + if (e.target.paused) { + e.target.play(); + } else { + e.target.pause(); + } + }); + + $('.media-spoiler').on('click', e => { + $(e.target).hide(); + }); + + $('.webapp-btn').on('click', e => { + if (e.button === 0) { + e.preventDefault(); + window.location.href = $(e.target).attr('href'); + } + }); + + $('.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'); + } else { + contentEl.show(); + $(e.target).parent().attr('style', null); + } + }); + + $('.account_display_name').on('input', e => { + $('.name-counter').text(30 - length($(e.target).val())); + }); + + $('.account_note').on('input', e => { + $('.note-counter').text(160 - length($(e.target).val())); + }); +}); -- cgit