WIP static themeing

This commit is contained in:
kibigo! 2017-11-18 15:12:52 -08:00
parent 92cc79be72
commit a9ed857171
18 changed files with 135 additions and 36 deletions

View file

@ -0,0 +1 @@
// This file will be loaded on about pages, regardless of theme.

View file

@ -1,3 +1,5 @@
// This file will be loaded on admin pages, regardless of theme.
import { delegate } from 'rails-ujs';
function handleDeleteStatus(event) {

View file

@ -0,0 +1,5 @@
// This file will be loaded on all pages, regardless of theme.
import { start } from 'rails-ujs';
start();

View file

@ -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);
}
});

View file

@ -0,0 +1 @@
// This file will be loaded on home pages, regardless of theme.

View file

@ -0,0 +1 @@
// This file will be loaded on public pages, regardless of theme.

View file

@ -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);
});

View file

@ -0,0 +1 @@
// This file will be loaded on share pages, regardless of theme.

View file

@ -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);

View file

@ -1,6 +0,0 @@
import { start } from 'rails-ujs';
import 'font-awesome/css/font-awesome.css';
require.context('../images/', true);
start();

View file

@ -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);
});

View file

@ -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');

View file

@ -0,0 +1,3 @@
import 'font-awesome/css/font-awesome.css';
require.context('../../images/', true);
import './styles/index.scss';

View file

@ -0,0 +1,7 @@
import loadPolyfills from './util/load_polyfills';
loadPolyfills().then(() => {
require('./util/main').default();
}).catch(e => {
console.error(e);
});

View file

@ -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');

View file

@ -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

View file

@ -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