diff options
18 files changed, 135 insertions, 36 deletions
diff --git a/app/javascript/core/about.js b/app/javascript/core/about.js new file mode 100644 index 000000000..6ed0e4ad3 --- /dev/null +++ b/app/javascript/core/about.js @@ -0,0 +1 @@ +// This file will be loaded on about pages, regardless of theme. diff --git a/app/javascript/packs/admin.js b/app/javascript/core/admin.js index 993827db5..c0bd09bdd 100644 --- a/app/javascript/packs/admin.js +++ b/app/javascript/core/admin.js @@ -1,3 +1,5 @@ +// This file will be loaded on admin pages, regardless of theme. + import { delegate } from 'rails-ujs'; function handleDeleteStatus(event) { diff --git a/app/javascript/core/common.js b/app/javascript/core/common.js new file mode 100644 index 000000000..24c0fdf61 --- /dev/null +++ b/app/javascript/core/common.js @@ -0,0 +1,5 @@ +// This file will be loaded on all pages, regardless of theme. + +import { start } from 'rails-ujs'; + +start(); diff --git a/app/javascript/core/embed.js b/app/javascript/core/embed.js new file mode 100644 index 000000000..8167706a3 --- /dev/null +++ b/app/javascript/core/embed.js @@ -0,0 +1,23 @@ +// This file will be loaded on embed pages, regardless of theme. + +window.addEventListener('message', e => { + const data = e.data || {}; + + if (!window.parent || data.type !== 'setHeight') { + return; + } + + function setEmbedHeight () { + window.parent.postMessage({ + type: 'setHeight', + id: data.id, + height: document.getElementsByTagName('html')[0].scrollHeight, + }, '*'); + }); + + if (['interactive', 'complete'].includes(document.readyState)) { + setEmbedHeight(); + } else { + document.addEventListener('DOMContentLoaded', setEmbedHeight); + } +}); diff --git a/app/javascript/core/home.js b/app/javascript/core/home.js new file mode 100644 index 000000000..3c2e01590 --- /dev/null +++ b/app/javascript/core/home.js @@ -0,0 +1 @@ +// This file will be loaded on home pages, regardless of theme. diff --git a/app/javascript/core/public.js b/app/javascript/core/public.js new file mode 100644 index 000000000..1a36b7a5f --- /dev/null +++ b/app/javascript/core/public.js @@ -0,0 +1 @@ +// This file will be loaded on public pages, regardless of theme. diff --git a/app/javascript/core/settings.js b/app/javascript/core/settings.js new file mode 100644 index 000000000..91332ed5a --- /dev/null +++ b/app/javascript/core/settings.js @@ -0,0 +1,65 @@ +// This file will be loaded on settings pages, regardless of theme. + +function main() { + const { length } = require('stringz'); + const { delegate } = require('rails-ujs'); + + delegate(document, '.webapp-btn', 'click', ({ target, button }) => { + if (button !== 0) { + return true; + } + window.location.href = target.href; + return false; + }); + + 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.style.display = 'block'; + target.parentNode.style.marginBottom = null; + } + + return false; + }); + + delegate(document, '.account_display_name', 'input', ({ target }) => { + const nameCounter = document.querySelector('.name-counter'); + + if (nameCounter) { + nameCounter.textContent = 30 - length(target.value); + } + }); + + delegate(document, '.account_note', 'input', ({ target }) => { + const noteCounter = document.querySelector('.note-counter'); + + if (noteCounter) { + const noteWithoutMetadata = processBio(target.value).text; + noteCounter.textContent = 500 - length(noteWithoutMetadata); + } + }); + + delegate(document, '#account_avatar', 'change', ({ target }) => { + const avatar = document.querySelector('.card.compact .avatar img'); + const [file] = target.files || []; + const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc; + + avatar.src = url; + }); + + delegate(document, '#account_header', 'change', ({ target }) => { + const header = document.querySelector('.card.compact'); + const [file] = target.files || []; + const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc; + + header.style.backgroundImage = `url(${url})`; + }); +} + +loadPolyfills().then(main).catch(error => { + console.error(error); +}); diff --git a/app/javascript/core/share.js b/app/javascript/core/share.js new file mode 100644 index 000000000..98a413632 --- /dev/null +++ b/app/javascript/core/share.js @@ -0,0 +1 @@ +// This file will be loaded on share pages, regardless of theme. diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 21dc78986..ee5bf244c 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -5,8 +5,7 @@ import loadPolyfills from '../mastodon/load_polyfills'; // import default stylesheet with variables -require('font-awesome/css/font-awesome.css'); - +import 'font-awesome/css/font-awesome.css'; import '../styles/application.scss'; require.context('../images/', true); diff --git a/app/javascript/packs/common.js b/app/javascript/packs/common.js deleted file mode 100644 index 96e6f4b16..000000000 --- a/app/javascript/packs/common.js +++ /dev/null @@ -1,6 +0,0 @@ -import { start } from 'rails-ujs'; -import 'font-awesome/css/font-awesome.css'; - -require.context('../images/', true); - -start(); diff --git a/app/javascript/themes/glitch/index.js b/app/javascript/themes/glitch/index.js deleted file mode 100644 index 407e1f767..000000000 --- a/app/javascript/themes/glitch/index.js +++ /dev/null @@ -1,14 +0,0 @@ -import loadPolyfills from './util/load_polyfills'; - -// import default stylesheet with variables -require('font-awesome/css/font-awesome.css'); - -import './styles/index.scss'; - -require.context('../../images/', true); - -loadPolyfills().then(() => { - require('./util/main').default(); -}).catch(e => { - console.error(e); -}); diff --git a/app/javascript/packs/about.js b/app/javascript/themes/glitch/packs/about.js index 6ce8757dc..9639d5453 100644 --- a/app/javascript/packs/about.js +++ b/app/javascript/themes/glitch/packs/about.js @@ -1,7 +1,5 @@ import loadPolyfills from 'themes/glitch/util/load_polyfills'; -require.context('../images/', true); - function loaded() { const TimelineContainer = require('themes/glitch/containers/timeline_container').default; const React = require('react'); diff --git a/app/javascript/themes/glitch/packs/common.js b/app/javascript/themes/glitch/packs/common.js new file mode 100644 index 000000000..3a62700bd --- /dev/null +++ b/app/javascript/themes/glitch/packs/common.js @@ -0,0 +1,3 @@ +import 'font-awesome/css/font-awesome.css'; +require.context('../../images/', true); +import './styles/index.scss'; diff --git a/app/javascript/themes/glitch/packs/home.js b/app/javascript/themes/glitch/packs/home.js new file mode 100644 index 000000000..dada28317 --- /dev/null +++ b/app/javascript/themes/glitch/packs/home.js @@ -0,0 +1,7 @@ +import loadPolyfills from './util/load_polyfills'; + +loadPolyfills().then(() => { + require('./util/main').default(); +}).catch(e => { + console.error(e); +}); diff --git a/app/javascript/packs/public.js b/app/javascript/themes/glitch/packs/public.js index 6adacad98..6adacad98 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/themes/glitch/packs/public.js diff --git a/app/javascript/packs/share.js b/app/javascript/themes/glitch/packs/share.js index 9cd95bcee..dc2e677e4 100644 --- a/app/javascript/packs/share.js +++ b/app/javascript/themes/glitch/packs/share.js @@ -1,7 +1,5 @@ import loadPolyfills from 'themes/glitch/util/load_polyfills'; -require.context('../images/', true); - function loaded() { const ComposeContainer = require('themes/glitch/containers/compose_container').default; const React = require('react'); diff --git a/app/javascript/themes/glitch/theme.yml b/app/javascript/themes/glitch/theme.yml index 49fba8f40..cf3fa32c2 100644 --- a/app/javascript/themes/glitch/theme.yml +++ b/app/javascript/themes/glitch/theme.yml @@ -1,16 +1,23 @@ -# (REQUIRED) The location of the pack file inside `pack_directory`. -pack: index.js +# (REQUIRED) The location of the pack files. +pack: + about: packs/about.js + admin: null + common: packs/common.js + embed: null + home: packs/home.js + public: packs/public.js + settings: null + share: packs/share.js -# (OPTIONAL) The directory which contains the pack file. +# (OPTIONAL) The directory which contains the pack files. # Defaults to the theme directory (`app/javascript/themes/[theme]`), -# but in the case of the vanilla Mastodon theme the pack file is -# somewhere else. +# which should be sufficient for like 99% of use-cases lol. # pack_directory: app/javascript/packs # (OPTIONAL) Additional javascript resources to preload, for use with # lazy-loaded components. It is **STRONGLY RECOMMENDED** that you # derive these pathnames from `themes/[your-theme]` to ensure that -# they stay unique. (Of course, vanilla doesn't do this ^^;;) +# they stay unique. preload: - themes/glitch/async/getting_started - themes/glitch/async/compose diff --git a/app/javascript/themes/vanilla/theme.yml b/app/javascript/themes/vanilla/theme.yml index 0b262cc82..b4a1598fc 100644 --- a/app/javascript/themes/vanilla/theme.yml +++ b/app/javascript/themes/vanilla/theme.yml @@ -1,9 +1,17 @@ -# (REQUIRED) The location of the pack file inside `pack_directory`. -pack: application.js +# (REQUIRED) The location of the pack files inside `pack_directory`. +pack: + about: about.js + admin: null + common: common.js + embed: null + home: application.js + public: public.js + settings: null + share: share.js -# (OPTIONAL) The directory which contains the pack file. +# (OPTIONAL) The directory which contains the pack files. # Defaults to the theme directory (`app/javascript/themes/[theme]`), -# but in the case of the vanilla Mastodon theme the pack file is +# but in the case of the vanilla Mastodon theme the pack files are # somewhere else. pack_directory: app/javascript/packs |