Add the Themed Logo feature (#7).
This commit is contained in:
parent
7d2a25815e
commit
da27a37af0
|
@ -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);
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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>
|
||||||
|
<//>
|
||||||
|
`;
|
||||||
|
}
|
|
@ -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,
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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}")`;
|
||||||
|
}
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue