From a9ed85717163040fb202d49b0342e9e350cb12ba Mon Sep 17 00:00:00 2001
From: kibigo! <marrus-sh@users.noreply.github.com>
Date: Sat, 18 Nov 2017 15:12:52 -0800
Subject: [PATCH] WIP static themeing

---
 app/javascript/core/about.js                  |  1 +
 app/javascript/{packs => core}/admin.js       |  2 +
 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/application.js           |  3 +-
 app/javascript/packs/common.js                |  6 --
 app/javascript/themes/glitch/index.js         | 14 ----
 .../{ => themes/glitch}/packs/about.js        |  2 -
 app/javascript/themes/glitch/packs/common.js  |  3 +
 app/javascript/themes/glitch/packs/home.js    |  7 ++
 .../{ => themes/glitch}/packs/public.js       |  0
 .../{ => themes/glitch}/packs/share.js        |  2 -
 app/javascript/themes/glitch/theme.yml        | 19 ++++--
 app/javascript/themes/vanilla/theme.yml       | 16 +++--
 18 files changed, 135 insertions(+), 36 deletions(-)
 create mode 100644 app/javascript/core/about.js
 rename app/javascript/{packs => core}/admin.js (95%)
 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/common.js
 delete mode 100644 app/javascript/themes/glitch/index.js
 rename app/javascript/{ => themes/glitch}/packs/about.js (94%)
 create mode 100644 app/javascript/themes/glitch/packs/common.js
 create mode 100644 app/javascript/themes/glitch/packs/home.js
 rename app/javascript/{ => themes/glitch}/packs/public.js (100%)
 rename app/javascript/{ => themes/glitch}/packs/share.js (94%)

diff --git a/app/javascript/core/about.js b/app/javascript/core/about.js
new file mode 100644
index 0000000000..6ed0e4ad38
--- /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
similarity index 95%
rename from app/javascript/packs/admin.js
rename to app/javascript/core/admin.js
index 993827db59..c0bd09bdda 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 0000000000..24c0fdf612
--- /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 0000000000..8167706a35
--- /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 0000000000..3c2e015909
--- /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 0000000000..1a36b7a5fd
--- /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 0000000000..91332ed5a5
--- /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 0000000000..98a413632b
--- /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 21dc789863..ee5bf244c2 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 96e6f4b16f..0000000000
--- 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 407e1f767d..0000000000
--- 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
similarity index 94%
rename from app/javascript/packs/about.js
rename to app/javascript/themes/glitch/packs/about.js
index 6ce8757dc9..9639d5453a 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 0000000000..3a62700bd1
--- /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 0000000000..dada28317a
--- /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
similarity index 100%
rename from app/javascript/packs/public.js
rename to app/javascript/themes/glitch/packs/public.js
diff --git a/app/javascript/packs/share.js b/app/javascript/themes/glitch/packs/share.js
similarity index 94%
rename from app/javascript/packs/share.js
rename to app/javascript/themes/glitch/packs/share.js
index 9cd95bcee5..dc2e677e4f 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 49fba8f40c..cf3fa32c2d 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 0b262cc820..b4a1598fc2 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