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/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 ++-- 7 files changed, 216 insertions(+), 20 deletions(-) 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/javascript/themes/glitch') 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 -- cgit