1
Fork 0
tildes-reextended/source/ts/utilities.ts

271 lines
7.4 KiB
TypeScript
Raw Normal View History

2019-11-10 17:38:47 +00:00
import {browser, Manifest} from 'webextension-polyfill-ts';
export interface UserLabel {
color: string;
id: number;
text: string;
priority: number;
username: string;
}
export interface Settings {
data: {
2019-11-12 21:18:48 +00:00
hideVotes: {
comments: boolean;
topics: boolean;
ownComments: boolean;
ownTopics: boolean;
[index: string]: boolean;
};
2019-11-10 17:38:47 +00:00
latestActiveFeatureTab: string;
userLabels: UserLabel[];
version?: string;
};
features: {
backToTop: boolean;
debug: boolean;
2019-11-12 21:18:48 +00:00
hideVotes: boolean;
2019-11-10 17:38:47 +00:00
jumpToNewComment: boolean;
markdownToolbar: boolean;
2019-11-10 17:38:47 +00:00
userLabels: boolean;
[index: string]: boolean;
};
}
export const defaultSettings: Settings = {
data: {
2019-11-12 21:18:48 +00:00
hideVotes: {
comments: true,
topics: true,
ownComments: true,
ownTopics: true
},
2019-11-10 17:38:47 +00:00
latestActiveFeatureTab: 'debug',
userLabels: []
},
features: {
backToTop: true,
debug: false,
2019-11-12 21:18:48 +00:00
hideVotes: false,
2019-11-10 17:38:47 +00:00
jumpToNewComment: true,
markdownToolbar: true,
2019-11-10 17:38:47 +00:00
userLabels: true
}
};
// Keep a local variable here for the debug logging, this way we don't have to
// call `getSettings()` each time we potentially want to log something. It gets
// set each time `getSettings()` is called so it's always accurate.
let debug = true;
export async function getSettings(): Promise<Settings> {
const syncSettings: any = await browser.storage.sync.get(defaultSettings);
2019-11-10 17:38:47 +00:00
const settings: Settings = {
data: {...defaultSettings.data, ...syncSettings.data},
features: {...defaultSettings.features, ...syncSettings.features}
2019-11-10 17:38:47 +00:00
};
debug = settings.features.debug;
2019-11-10 17:38:47 +00:00
// If we're in development, force debug output.
if (getManifest().nodeEnv === 'development') {
debug = true;
}
return settings;
}
export async function setSettings(
newSettings: Partial<Settings>
): Promise<void> {
return browser.storage.sync.set(newSettings);
2019-11-10 17:38:47 +00:00
}
export function log(message: any, override = false): void {
let overrideStyle = '';
let prefix = '[TRX]';
if (override) {
prefix = '%c' + prefix;
overrideStyle = 'background-color: #dc322f; margin-right: 9px;';
}
if (debug || override) {
if (overrideStyle.length > 0) {
console.debug(prefix, overrideStyle, message);
} else {
console.debug(prefix, message);
}
2019-11-10 17:38:47 +00:00
}
}
// Helper function to convert kebab-case strings to camelCase ones.
// Primarily for converting element IDs to Object keys.
export function kebabToCamel(input: string): string {
let output = '';
for (const part of input.split('-')) {
output += part[0].toUpperCase();
output += part.slice(1);
}
return output[0].toLowerCase() + output.slice(1);
}
// The opposite of `kebabToCamel()`.
export function camelToKebab(input: string): string {
const uppercaseMatches: RegExpMatchArray | null = input.match(/[A-Z]/g);
// If there are no uppercase letters in the input, just return it.
if (uppercaseMatches === null) {
return input;
}
// Find all the indexes of where uppercase letters are.
const uppercaseIndexes: number[] = [];
for (const match of uppercaseMatches) {
const latestIndex: number =
typeof uppercaseIndexes[uppercaseIndexes.length - 1] === 'undefined'
? 0
: uppercaseIndexes[uppercaseIndexes.length - 1];
uppercaseIndexes.push(input.indexOf(match, latestIndex + 1));
}
// Convert each section up to the next uppercase letter to lowercase with
// a dash between each section.
let output = '';
let previousIndex = 0;
for (const index of uppercaseIndexes) {
output += input.slice(previousIndex, index).toLowerCase();
output += '-';
previousIndex = index;
}
output += input.slice(previousIndex).toLowerCase();
return output;
}
// This utility function should only be used in cases where we know for certain
// that the wanted element is going to exist.
export function querySelector<T extends Element>(selector: string): T {
return document.querySelector<T>(selector)!;
}
export function querySelectorAll<T extends Element>(selector: string): T[] {
const elements: T[] = [];
for (const element of document.querySelectorAll<T>(selector)) {
elements.push(element);
}
return elements;
}
2019-11-10 17:38:47 +00:00
export function createElementFromString<T extends Element>(input: string): T {
const template: HTMLTemplateElement = document.createElement('template');
template.innerHTML = input.trim();
return template.content.firstElementChild! as T;
}
export function isInTopicListing(): boolean {
return document.querySelector('.topic-listing') !== null;
}
export function getManifest(): {nodeEnv?: string} & Manifest.ManifestBase {
const manifest: Manifest.ManifestBase = browser.runtime.getManifest();
return {...manifest};
}
export function getCSSCustomPropertyValue(property: string): string {
return getComputedStyle(document.body).getPropertyValue(property);
2019-11-10 17:38:47 +00:00
}
// Adapted from https://stackoverflow.com/a/12043228/12251171.
export function isColorBright(color: string): boolean {
if (color.startsWith('#')) {
color = color.slice(1);
}
if (color.length === 4) {
color = color.slice(0, 3);
}
if (color.length === 8) {
color = color.slice(0, 6);
}
if (color.length === 3) {
color = color
.split('')
2020-06-05 21:55:11 +00:00
.map((value) => value.repeat(2))
2019-11-10 17:38:47 +00:00
.join('');
}
2020-06-05 21:55:11 +00:00
const red: number = Number.parseInt(color.slice(0, 2), 16);
const green: number = Number.parseInt(color.slice(2, 4), 16);
const blue: number = Number.parseInt(color.slice(4, 6), 16);
2019-11-10 17:38:47 +00:00
const brightness: number = 0.2126 * red + 0.7152 * green + 0.0722 * blue;
return brightness > 128;
}
export function appendStyleAttribute(element: Element, styles: string): void {
const existingStyles: string | null = element.getAttribute('style');
if (existingStyles === null) {
element.setAttribute('style', styles);
} else {
element.setAttribute('style', `${existingStyles} ${styles}`);
}
}
export function isValidHexColor(color: string): boolean {
// Overly verbose validation for 3/4/6/8-character hex colors.
if (
2020-06-05 21:55:11 +00:00
/^#[a-f\d]{6}$/i.exec(color) === null &&
/^#[a-f\d]{3}$/i.exec(color) === null &&
/^#[a-f\d]{8}$/i.exec(color) === null &&
/^#[a-f\d]{4}$/i.exec(color) === null
2019-11-10 17:38:47 +00:00
) {
return false;
}
return true;
}
export function flashMessage(message: string, error = false): void {
if (document.querySelector('.trx-flash-message') !== null) {
log(
`A flash message already exists, skipping requested one with message:\n${message}`
);
return;
}
const messageElement: HTMLDivElement = createElementFromString(
`<div class="trx-flash-message">${message}</div>`
);
if (error) {
messageElement.classList.add('trx-flash-error');
}
let isRemoved = false;
messageElement.addEventListener('click', (): void => {
messageElement.remove();
isRemoved = true;
});
document.body.append(messageElement);
setTimeout(() => {
messageElement.classList.add('trx-opaque');
}, 50);
setTimeout(() => {
if (!isRemoved) {
messageElement.classList.remove('trx-opaque');
setTimeout(() => {
messageElement.remove();
}, 500);
}
}, 5000);
}
// Validation copied from Tildes source code:
// https://gitlab.com/tildes/tildes/blob/master/tildes/tildes/schemas/user.py
export function isValidTildesUsername(username: string): boolean {
return (
username.length >= 3 &&
username.length <= 20 &&
2020-06-05 21:55:11 +00:00
/^[a-z\d]([a-z\d]|[_-](?![_-]))*[a-z\d]$/i.exec(username) !== null
);
}