1
Fork 0

Add the Themed Logo feature (#7).

This commit is contained in:
Bauke 2022-02-27 22:51:54 +01:00
parent 7d2a25815e
commit da27a37af0
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
7 changed files with 72 additions and 0 deletions

View File

@ -11,6 +11,7 @@ import {
runAnonymizeUsernamesFeature, runAnonymizeUsernamesFeature,
runHideVotesFeature, runHideVotesFeature,
runMarkdownToolbarFeature, runMarkdownToolbarFeature,
runThemedLogoFeature,
runUsernameColorsFeature, runUsernameColorsFeature,
} from './scripts/exports.js'; } from './scripts/exports.js';
import Settings from './settings.js'; import Settings from './settings.js';
@ -48,6 +49,7 @@ async function initialize() {
function startObserver() { function startObserver() {
observer.observe(document.body, { observer.observe(document.body, {
attributes: true,
childList: true, childList: true,
subtree: true, subtree: true,
}); });
@ -71,6 +73,12 @@ async function initialize() {
}); });
} }
if (settings.features.themedLogo) {
observerFeatures.push(() => {
runThemedLogoFeature();
});
}
if (settings.features.usernameColors) { if (settings.features.usernameColors) {
observerFeatures.push(() => { observerFeatures.push(() => {
runUsernameColorsFeature(settings); runUsernameColorsFeature(settings);

View File

@ -5,5 +5,6 @@ export {BackToTopSetting} from './back-to-top.js';
export {HideVotesSetting} from './hide-votes.js'; export {HideVotesSetting} from './hide-votes.js';
export {JumpToNewCommentSetting} from './jump-to-new-comment.js'; export {JumpToNewCommentSetting} from './jump-to-new-comment.js';
export {MarkdownToolbarSetting} from './markdown-toolbar.js'; export {MarkdownToolbarSetting} from './markdown-toolbar.js';
export {ThemedLogoSetting} from './themed-logo.js';
export {UserLabelsSetting} from './user-labels.js'; export {UserLabelsSetting} from './user-labels.js';
export {UsernameColorsSetting} from './username-colors.js'; export {UsernameColorsSetting} from './username-colors.js';

View File

@ -0,0 +1,14 @@
import {html} from 'htm/preact';
import {Setting, SettingProps} from './index.js';
export function ThemedLogoSetting(props: SettingProps): TRXComponent {
return html`
<${Setting} ...${props}>
<p class="info">
Replaces the Tildes logo in the site header with a dynamic one that uses
the colors of your chosen Tildes theme.
</p>
<//>
`;
}

View File

@ -7,6 +7,7 @@ import {
HideVotesSetting, HideVotesSetting,
JumpToNewCommentSetting, JumpToNewCommentSetting,
MarkdownToolbarSetting, MarkdownToolbarSetting,
ThemedLogoSetting,
UserLabelsSetting, UserLabelsSetting,
UsernameColorsSetting, UsernameColorsSetting,
} from './components/exports.js'; } from './components/exports.js';
@ -62,6 +63,13 @@ export const features: Feature[] = [
title: 'Markdown Toolbar', title: 'Markdown Toolbar',
component: () => MarkdownToolbarSetting, component: () => MarkdownToolbarSetting,
}, },
{
availableSince: new Date('2022-02-27'),
index: 0,
key: 'themedLogo',
title: 'Themed Logo',
component: () => ThemedLogoSetting,
},
{ {
availableSince: new Date('2019-11-10'), availableSince: new Date('2019-11-10'),
index: 0, index: 0,

View File

@ -4,5 +4,6 @@ export * from './back-to-top.js';
export * from './hide-votes.js'; export * from './hide-votes.js';
export * from './jump-to-new-comment.js'; export * from './jump-to-new-comment.js';
export * from './markdown-toolbar.js'; export * from './markdown-toolbar.js';
export * from './themed-logo.js';
export * from './user-labels.js'; export * from './user-labels.js';
export * from './username-colors.js'; export * from './username-colors.js';

View File

@ -0,0 +1,38 @@
import {log, querySelector} from '../utilities/exports.js';
export function runThemedLogoFeature() {
themedLogo();
log('Themed Logo: Initialized.');
}
const tildesLogo = `
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 100 100">
<rect fill="var(--background-primary-color)" width="100" height="100"/>
<rect fill="var(--comment-label-joke-color)" width="12.5" height="12.5" x="0" y="50"/>
<rect fill="var(--comment-label-offtopic-color)" width="12.5" height="12.5" x="12.5" y="37.5"/>
<rect fill="var(--comment-label-exemplary-color)" width="12.5" height="12.5" x="25" y="25"/>
<rect fill="var(--stripe-mine-color)" width="12.5" height="12.5" x="37.5" y="37.5"/>
<rect fill="var(--button-used-color)" width="12.5" height="12.5" x="50" y="50"/>
<rect fill="var(--comment-label-malice-color)" width="12.5" height="12.5" x="62.5" y="62.5"/>
<rect fill="var(--alert-color)" width="12.5" height="12.5" x="75" y="50"/>
<rect fill="var(--comment-label-noise-color)" width="12.5" height="12.5" x="87.5" y="37.5"/>
</svg>
`;
function themedLogo() {
let themedLogo = tildesLogo;
for (const customProperty of tildesLogo.match(/var\(--.+\)/g) ?? []) {
let color = window
.getComputedStyle(document.body)
.getPropertyValue(customProperty.slice('var('.length, -1));
if (color === '') {
color = '#f0f';
}
themedLogo = themedLogo.replace(customProperty, color);
}
const encodedSvg = encodeURIComponent(themedLogo);
const siteHeader = querySelector<HTMLElement>('.site-header-logo');
siteHeader.style.backgroundImage = `url("data:image/svg+xml,${encodedSvg}")`;
}

View File

@ -68,6 +68,7 @@ export default class Settings {
hideVotes: boolean; hideVotes: boolean;
jumpToNewComment: boolean; jumpToNewComment: boolean;
markdownToolbar: boolean; markdownToolbar: boolean;
themedLogo: boolean;
userLabels: boolean; userLabels: boolean;
usernameColors: boolean; usernameColors: boolean;
}; };
@ -131,6 +132,7 @@ export default class Settings {
hideVotes: false, hideVotes: false,
jumpToNewComment: true, jumpToNewComment: true,
markdownToolbar: true, markdownToolbar: true,
themedLogo: false,
userLabels: true, userLabels: true,
usernameColors: false, usernameColors: false,
}; };