From bdbbd06dad298dc3e1a5f568f4a3ff3635b48f22 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Mon, 20 Nov 2017 22:13:37 -0800 Subject: Finalized theme loading and stuff --- .../themes/glitch/containers/mastodon.js | 2 +- app/javascript/themes/glitch/packs/common.js | 4 +- app/javascript/themes/glitch/packs/home.js | 4 +- app/javascript/themes/glitch/packs/public.js | 83 ++-------------------- app/javascript/themes/glitch/theme.yml | 39 ++++++---- app/javascript/themes/vanilla/theme.yml | 35 +++++---- app/javascript/themes/win95/index.js | 10 +++ app/javascript/themes/win95/theme.yml | 23 ++++++ 8 files changed, 88 insertions(+), 112 deletions(-) create mode 100644 app/javascript/themes/win95/index.js create mode 100644 app/javascript/themes/win95/theme.yml (limited to 'app/javascript/themes') diff --git a/app/javascript/themes/glitch/containers/mastodon.js b/app/javascript/themes/glitch/containers/mastodon.js index 348470637..755b5564a 100644 --- a/app/javascript/themes/glitch/containers/mastodon.js +++ b/app/javascript/themes/glitch/containers/mastodon.js @@ -9,7 +9,7 @@ import UI from 'themes/glitch/features/ui'; import { hydrateStore } from 'themes/glitch/actions/store'; import { connectUserStream } from 'themes/glitch/actions/streaming'; import { IntlProvider, addLocaleData } from 'react-intl'; -import { getLocale } from 'mastodon/locales'; +import { getLocale } from 'locales'; import initialState from 'themes/glitch/util/initial_state'; const { localeData, messages } = getLocale(); diff --git a/app/javascript/themes/glitch/packs/common.js b/app/javascript/themes/glitch/packs/common.js index 3a62700bd..f4fa129e1 100644 --- a/app/javascript/themes/glitch/packs/common.js +++ b/app/javascript/themes/glitch/packs/common.js @@ -1,3 +1,3 @@ import 'font-awesome/css/font-awesome.css'; -require.context('../../images/', true); -import './styles/index.scss'; +require.context('images/', true); +import 'themes/glitch/styles/index.scss'; diff --git a/app/javascript/themes/glitch/packs/home.js b/app/javascript/themes/glitch/packs/home.js index dada28317..69dddf51c 100644 --- a/app/javascript/themes/glitch/packs/home.js +++ b/app/javascript/themes/glitch/packs/home.js @@ -1,7 +1,7 @@ -import loadPolyfills from './util/load_polyfills'; +import loadPolyfills from 'themes/glitch/util/load_polyfills'; loadPolyfills().then(() => { - require('./util/main').default(); + require('themes/glitch/util/main').default(); }).catch(e => { console.error(e); }); diff --git a/app/javascript/themes/glitch/packs/public.js b/app/javascript/themes/glitch/packs/public.js index 6adacad98..d9a1b9655 100644 --- a/app/javascript/themes/glitch/packs/public.js +++ b/app/javascript/themes/glitch/packs/public.js @@ -2,32 +2,14 @@ import loadPolyfills from 'themes/glitch/util/load_polyfills'; import { processBio } from 'themes/glitch/util/bio_metadata'; import ready from 'themes/glitch/util/ready'; -window.addEventListener('message', e => { - const data = e.data || {}; - - if (!window.parent || data.type !== 'setHeight') { - return; - } - - ready(() => { - window.parent.postMessage({ - type: 'setHeight', - id: data.id, - height: document.getElementsByTagName('html')[0].scrollHeight, - }, '*'); - }); -}); - function main() { - const { length } = require('stringz'); const IntlRelativeFormat = require('intl-relativeformat').default; - const { delegate } = require('rails-ujs'); - const emojify = require('../themes/glitch/util/emoji').default; - const { getLocale } = require('mastodon/locales'); + const emojify = require('themes/glitch/util/emoji').default; + const { getLocale } = require('locales'); const { localeData } = getLocale(); - const VideoContainer = require('../themes/glitch/containers/video_container').default; - const MediaGalleryContainer = require('../themes/glitch/containers/media_gallery_container').default; - const CardContainer = require('../themes/glitch/containers/card_container').default; + const VideoContainer = require('themes/glitch/containers/video_container').default; + const MediaGalleryContainer = require('themes/glitch/containers/media_gallery_container').default; + const CardContainer = require('themes/glitch/containers/card_container').default; const React = require('react'); const ReactDOM = require('react-dom'); @@ -87,61 +69,6 @@ function main() { ReactDOM.render(, content); }); }); - - 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 => { diff --git a/app/javascript/themes/glitch/theme.yml b/app/javascript/themes/glitch/theme.yml index cf3fa32c2..ac6f57546 100644 --- a/app/javascript/themes/glitch/theme.yml +++ b/app/javascript/themes/glitch/theme.yml @@ -1,25 +1,34 @@ # (REQUIRED) The location of the pack files. pack: about: packs/about.js - admin: null - common: packs/common.js - embed: null - home: packs/home.js + admin: + auth: + common: + filename: packs/common.js + stylesheet: true + embed: packs/public.js + error: + home: + filename: packs/home.js + preload: + - themes/glitch/async/getting_started + - themes/glitch/async/compose + - themes/glitch/async/home_timeline + - themes/glitch/async/notifications + stylesheet: true + modal: public: packs/public.js - settings: null + settings: share: packs/share.js # (OPTIONAL) The directory which contains the pack files. # Defaults to the theme directory (`app/javascript/themes/[theme]`), # 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. -preload: -- themes/glitch/async/getting_started -- themes/glitch/async/compose -- themes/glitch/async/home_timeline -- themes/glitch/async/notifications +# pack_directory: app/javascript/packs + +# (OPTIONAL) By default the theme will fallback to the default theme +# if a particular pack is not provided. You can specify different +# fallbacks here, or disable fallback behaviours altogether by +# specifying a `null` value. +fallback: diff --git a/app/javascript/themes/vanilla/theme.yml b/app/javascript/themes/vanilla/theme.yml index b4a1598fc..67fd9723e 100644 --- a/app/javascript/themes/vanilla/theme.yml +++ b/app/javascript/themes/vanilla/theme.yml @@ -1,12 +1,23 @@ # (REQUIRED) The location of the pack files inside `pack_directory`. pack: about: about.js - admin: null - common: common.js - embed: null - home: application.js + admin: + auth: + common: + filename: common.js + stylesheet: true + embed: public.js + error: + home: + filename: application.js + preload: + - features/getting_started + - features/compose + - features/home_timeline + - features/notifications + modal: public: public.js - settings: null + settings: share: share.js # (OPTIONAL) The directory which contains the pack files. @@ -15,12 +26,8 @@ pack: # somewhere else. 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 ^^;;) -preload: -- features/getting_started -- features/compose -- features/home_timeline -- features/notifications +# (OPTIONAL) By default the theme will fallback to the default theme +# if a particular pack is not provided. You can specify different +# fallbacks here, or disable fallback behaviours altogether by +# specifying a `null` value. +fallback: diff --git a/app/javascript/themes/win95/index.js b/app/javascript/themes/win95/index.js new file mode 100644 index 000000000..bed6a1ef3 --- /dev/null +++ b/app/javascript/themes/win95/index.js @@ -0,0 +1,10 @@ +// These lines are the same as in glitch: +import 'font-awesome/css/font-awesome.css'; +require.context('../../images/', true); + +// …But we want to use our own styles instead. +import 'styles/win95.scss'; + +// Be sure to make this style file import from +// `themes/glitch/styles/index.scss` (the glitch styling), and not +// `application.scss` (which are the vanilla styles). diff --git a/app/javascript/themes/win95/theme.yml b/app/javascript/themes/win95/theme.yml new file mode 100644 index 000000000..43af38198 --- /dev/null +++ b/app/javascript/themes/win95/theme.yml @@ -0,0 +1,23 @@ +# win95 theme. + +# Ported over from `cybrespace:mastodon/theme_win95`. +# + +# You can use this theme file as inspiration for porting over +# a preëxisting Mastodon theme. + +# We only modify the `common` pack, which contains our styling. +pack: + common: + filename: index.js + stylesheet: true + # All unspecified packs will inherit from glitch. + +# By default, the glitch preloads will also be used here. You can +# disable them by setting `preload` to `null`. + +# preload: + +# The `fallback` parameter tells us to use glitch files for everything +# we haven't specified. +fallback: glitch -- cgit