From a9ed85717163040fb202d49b0342e9e350cb12ba Mon Sep 17 00:00:00 2001 From: kibigo! Date: Sat, 18 Nov 2017 15:12:52 -0800 Subject: WIP static themeing --- app/javascript/core/about.js | 1 + app/javascript/core/admin.js | 42 ++++++++ app/javascript/core/common.js | 5 + app/javascript/core/embed.js | 23 +++++ app/javascript/core/home.js | 1 + app/javascript/core/public.js | 1 + app/javascript/core/settings.js | 65 ++++++++++++ app/javascript/core/share.js | 1 + app/javascript/packs/about.js | 24 ----- app/javascript/packs/admin.js | 40 ------- app/javascript/packs/application.js | 3 +- app/javascript/packs/common.js | 6 -- app/javascript/packs/public.js | 149 --------------------------- app/javascript/packs/share.js | 24 ----- app/javascript/themes/glitch/index.js | 14 --- app/javascript/themes/glitch/packs/about.js | 22 ++++ app/javascript/themes/glitch/packs/common.js | 3 + app/javascript/themes/glitch/packs/home.js | 7 ++ app/javascript/themes/glitch/packs/public.js | 149 +++++++++++++++++++++++++++ app/javascript/themes/glitch/packs/share.js | 22 ++++ app/javascript/themes/glitch/theme.yml | 19 ++-- app/javascript/themes/vanilla/theme.yml | 16 ++- 22 files changed, 368 insertions(+), 269 deletions(-) create mode 100644 app/javascript/core/about.js create mode 100644 app/javascript/core/admin.js create mode 100644 app/javascript/core/common.js create mode 100644 app/javascript/core/embed.js create mode 100644 app/javascript/core/home.js create mode 100644 app/javascript/core/public.js create mode 100644 app/javascript/core/settings.js create mode 100644 app/javascript/core/share.js delete mode 100644 app/javascript/packs/about.js delete mode 100644 app/javascript/packs/admin.js delete mode 100644 app/javascript/packs/common.js delete mode 100644 app/javascript/packs/public.js delete mode 100644 app/javascript/packs/share.js delete mode 100644 app/javascript/themes/glitch/index.js create mode 100644 app/javascript/themes/glitch/packs/about.js create mode 100644 app/javascript/themes/glitch/packs/common.js create mode 100644 app/javascript/themes/glitch/packs/home.js create mode 100644 app/javascript/themes/glitch/packs/public.js create mode 100644 app/javascript/themes/glitch/packs/share.js (limited to 'app') 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/core/admin.js b/app/javascript/core/admin.js new file mode 100644 index 000000000..c0bd09bdd --- /dev/null +++ b/app/javascript/core/admin.js @@ -0,0 +1,42 @@ +// This file will be loaded on admin pages, regardless of theme. + +import { delegate } from 'rails-ujs'; + +function handleDeleteStatus(event) { + const [data] = event.detail; + const element = document.querySelector(`[data-id="${data.id}"]`); + if (element) { + element.parentNode.removeChild(element); + } +} + +[].forEach.call(document.querySelectorAll('.trash-button'), (content) => { + content.addEventListener('ajax:success', handleDeleteStatus); +}); + +const batchCheckboxClassName = '.batch-checkbox input[type="checkbox"]'; + +delegate(document, '#batch_checkbox_all', 'change', ({ target }) => { + [].forEach.call(document.querySelectorAll(batchCheckboxClassName), (content) => { + content.checked = target.checked; + }); +}); + +delegate(document, batchCheckboxClassName, 'change', () => { + const checkAllElement = document.querySelector('#batch_checkbox_all'); + if (checkAllElement) { + checkAllElement.checked = [].every.call(document.querySelectorAll(batchCheckboxClassName), (content) => content.checked); + } +}); + +delegate(document, '.media-spoiler-show-button', 'click', () => { + [].forEach.call(document.querySelectorAll('.activity-stream .media-spoiler-wrapper'), (content) => { + content.classList.add('media-spoiler-wrapper__visible'); + }); +}); + +delegate(document, '.media-spoiler-hide-button', 'click', () => { + [].forEach.call(document.querySelectorAll('.activity-stream .media-spoiler-wrapper'), (content) => { + content.classList.remove('media-spoiler-wrapper__visible'); + }); +}); 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/about.js b/app/javascript/packs/about.js deleted file mode 100644 index 6ce8757dc..000000000 --- a/app/javascript/packs/about.js +++ /dev/null @@ -1,24 +0,0 @@ -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'); - const ReactDOM = require('react-dom'); - const mountNode = document.getElementById('mastodon-timeline'); - - if (mountNode !== null) { - const props = JSON.parse(mountNode.getAttribute('data-props')); - ReactDOM.render(, mountNode); - } -} - -function main() { - const ready = require('themes/glitch/util/ready').default; - ready(loaded); -} - -loadPolyfills().then(main).catch(error => { - console.error(error); -}); diff --git a/app/javascript/packs/admin.js b/app/javascript/packs/admin.js deleted file mode 100644 index 993827db5..000000000 --- a/app/javascript/packs/admin.js +++ /dev/null @@ -1,40 +0,0 @@ -import { delegate } from 'rails-ujs'; - -function handleDeleteStatus(event) { - const [data] = event.detail; - const element = document.querySelector(`[data-id="${data.id}"]`); - if (element) { - element.parentNode.removeChild(element); - } -} - -[].forEach.call(document.querySelectorAll('.trash-button'), (content) => { - content.addEventListener('ajax:success', handleDeleteStatus); -}); - -const batchCheckboxClassName = '.batch-checkbox input[type="checkbox"]'; - -delegate(document, '#batch_checkbox_all', 'change', ({ target }) => { - [].forEach.call(document.querySelectorAll(batchCheckboxClassName), (content) => { - content.checked = target.checked; - }); -}); - -delegate(document, batchCheckboxClassName, 'change', () => { - const checkAllElement = document.querySelector('#batch_checkbox_all'); - if (checkAllElement) { - checkAllElement.checked = [].every.call(document.querySelectorAll(batchCheckboxClassName), (content) => content.checked); - } -}); - -delegate(document, '.media-spoiler-show-button', 'click', () => { - [].forEach.call(document.querySelectorAll('.activity-stream .media-spoiler-wrapper'), (content) => { - content.classList.add('media-spoiler-wrapper__visible'); - }); -}); - -delegate(document, '.media-spoiler-hide-button', 'click', () => { - [].forEach.call(document.querySelectorAll('.activity-stream .media-spoiler-wrapper'), (content) => { - content.classList.remove('media-spoiler-wrapper__visible'); - }); -}); 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/packs/public.js b/app/javascript/packs/public.js deleted file mode 100644 index 6adacad98..000000000 --- a/app/javascript/packs/public.js +++ /dev/null @@ -1,149 +0,0 @@ -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 { 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 React = require('react'); - const ReactDOM = require('react-dom'); - - localeData.forEach(IntlRelativeFormat.__addLocaleData); - - ready(() => { - const locale = document.documentElement.lang; - - const dateTimeFormat = new Intl.DateTimeFormat(locale, { - year: 'numeric', - month: 'long', - day: 'numeric', - hour: 'numeric', - minute: 'numeric', - }); - - const relativeFormat = new IntlRelativeFormat(locale); - - [].forEach.call(document.querySelectorAll('.emojify'), (content) => { - content.innerHTML = emojify(content.innerHTML); - }); - - [].forEach.call(document.querySelectorAll('time.formatted'), (content) => { - const datetime = new Date(content.getAttribute('datetime')); - const formattedDate = dateTimeFormat.format(datetime); - - content.title = formattedDate; - content.textContent = formattedDate; - }); - - [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => { - const datetime = new Date(content.getAttribute('datetime')); - - content.title = dateTimeFormat.format(datetime); - content.textContent = relativeFormat.format(datetime); - }); - - [].forEach.call(document.querySelectorAll('.logo-button'), (content) => { - content.addEventListener('click', (e) => { - e.preventDefault(); - window.open(e.target.href, 'mastodon-intent', 'width=400,height=400,resizable=no,menubar=no,status=no,scrollbars=yes'); - }); - }); - - [].forEach.call(document.querySelectorAll('[data-component="Video"]'), (content) => { - const props = JSON.parse(content.getAttribute('data-props')); - ReactDOM.render(, content); - }); - - [].forEach.call(document.querySelectorAll('[data-component="MediaGallery"]'), (content) => { - const props = JSON.parse(content.getAttribute('data-props')); - ReactDOM.render(, content); - }); - - [].forEach.call(document.querySelectorAll('[data-component="Card"]'), (content) => { - const props = JSON.parse(content.getAttribute('data-props')); - 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 => { - console.error(error); -}); diff --git a/app/javascript/packs/share.js b/app/javascript/packs/share.js deleted file mode 100644 index 9cd95bcee..000000000 --- a/app/javascript/packs/share.js +++ /dev/null @@ -1,24 +0,0 @@ -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'); - const ReactDOM = require('react-dom'); - const mountNode = document.getElementById('mastodon-compose'); - - if (mountNode !== null) { - const props = JSON.parse(mountNode.getAttribute('data-props')); - ReactDOM.render(, mountNode); - } -} - -function main() { - const ready = require('themes/glitch/util/ready').default; - ready(loaded); -} - -loadPolyfills().then(main).catch(error => { - console.error(error); -}); 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/themes/glitch/packs/about.js b/app/javascript/themes/glitch/packs/about.js new file mode 100644 index 000000000..9639d5453 --- /dev/null +++ b/app/javascript/themes/glitch/packs/about.js @@ -0,0 +1,22 @@ +import loadPolyfills from 'themes/glitch/util/load_polyfills'; + +function loaded() { + const TimelineContainer = require('themes/glitch/containers/timeline_container').default; + const React = require('react'); + const ReactDOM = require('react-dom'); + const mountNode = document.getElementById('mastodon-timeline'); + + if (mountNode !== null) { + const props = JSON.parse(mountNode.getAttribute('data-props')); + ReactDOM.render(, mountNode); + } +} + +function main() { + const ready = require('themes/glitch/util/ready').default; + ready(loaded); +} + +loadPolyfills().then(main).catch(error => { + console.error(error); +}); 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/themes/glitch/packs/public.js b/app/javascript/themes/glitch/packs/public.js new file mode 100644 index 000000000..6adacad98 --- /dev/null +++ b/app/javascript/themes/glitch/packs/public.js @@ -0,0 +1,149 @@ +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 { 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 React = require('react'); + const ReactDOM = require('react-dom'); + + localeData.forEach(IntlRelativeFormat.__addLocaleData); + + ready(() => { + const locale = document.documentElement.lang; + + const dateTimeFormat = new Intl.DateTimeFormat(locale, { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + }); + + const relativeFormat = new IntlRelativeFormat(locale); + + [].forEach.call(document.querySelectorAll('.emojify'), (content) => { + content.innerHTML = emojify(content.innerHTML); + }); + + [].forEach.call(document.querySelectorAll('time.formatted'), (content) => { + const datetime = new Date(content.getAttribute('datetime')); + const formattedDate = dateTimeFormat.format(datetime); + + content.title = formattedDate; + content.textContent = formattedDate; + }); + + [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => { + const datetime = new Date(content.getAttribute('datetime')); + + content.title = dateTimeFormat.format(datetime); + content.textContent = relativeFormat.format(datetime); + }); + + [].forEach.call(document.querySelectorAll('.logo-button'), (content) => { + content.addEventListener('click', (e) => { + e.preventDefault(); + window.open(e.target.href, 'mastodon-intent', 'width=400,height=400,resizable=no,menubar=no,status=no,scrollbars=yes'); + }); + }); + + [].forEach.call(document.querySelectorAll('[data-component="Video"]'), (content) => { + const props = JSON.parse(content.getAttribute('data-props')); + ReactDOM.render(, content); + }); + + [].forEach.call(document.querySelectorAll('[data-component="MediaGallery"]'), (content) => { + const props = JSON.parse(content.getAttribute('data-props')); + ReactDOM.render(, content); + }); + + [].forEach.call(document.querySelectorAll('[data-component="Card"]'), (content) => { + const props = JSON.parse(content.getAttribute('data-props')); + 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 => { + console.error(error); +}); diff --git a/app/javascript/themes/glitch/packs/share.js b/app/javascript/themes/glitch/packs/share.js new file mode 100644 index 000000000..dc2e677e4 --- /dev/null +++ b/app/javascript/themes/glitch/packs/share.js @@ -0,0 +1,22 @@ +import loadPolyfills from 'themes/glitch/util/load_polyfills'; + +function loaded() { + const ComposeContainer = require('themes/glitch/containers/compose_container').default; + const React = require('react'); + const ReactDOM = require('react-dom'); + const mountNode = document.getElementById('mastodon-compose'); + + if (mountNode !== null) { + const props = JSON.parse(mountNode.getAttribute('data-props')); + ReactDOM.render(, mountNode); + } +} + +function main() { + const ready = require('themes/glitch/util/ready').default; + ready(loaded); +} + +loadPolyfills().then(main).catch(error => { + console.error(error); +}); 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 -- cgit