FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove theming handler features

This commit is contained in:
Andreas Nedbal 2023-01-17 07:38:02 +01:00
parent 53574ebf03
commit 79fa204897
2 changed files with 0 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/retrospring/features/settings/index.ts
View File

@ -1,13 +1,9 @@
import registerEvents from "utilities/registerEvents"; import registerEvents from "utilities/registerEvents";
import { profileHeaderChangeHandler, profilePictureChangeHandler } from "./crop"; import { profileHeaderChangeHandler, profilePictureChangeHandler } from "./crop";
import { themeDocumentHandler, themeSubmitHandler } from "./theme";
import { userSubmitHandler } from "./password"; import { userSubmitHandler } from "./password";
export default (): void => { export default (): void => {
themeDocumentHandler();
registerEvents([ registerEvents([
{ type: 'submit', target: document.querySelector('form.edit_theme, form.new_theme'), handler: themeSubmitHandler },
{ type: 'submit', target: document.querySelector('#edit_user'), handler: userSubmitHandler }, { type: 'submit', target: document.querySelector('#edit_user'), handler: userSubmitHandler },
{ type: 'change', target: document.querySelector('#user_profile_picture[type=file]'), handler: profilePictureChangeHandler }, { type: 'change', target: document.querySelector('#user_profile_picture[type=file]'), handler: profilePictureChangeHandler },
{ type: 'change', target: document.querySelector('#user_profile_header[type=file]'), handler: profileHeaderChangeHandler } { type: 'change', target: document.querySelector('#user_profile_header[type=file]'), handler: profileHeaderChangeHandler }

115
app/javascript/retrospring/features/settings/theme.ts
View File

@ -1,115 +0,0 @@
import Coloris from "@melloware/coloris";
let previewStyle = null;
let previewTimeout = null;
const previewTheme = (): void => {
const payload = {};
Array.from(document.querySelectorAll('#update .color')).forEach((color: HTMLInputElement) => {
const name = color.name.substring(6, color.name.length - 1);
payload[name] = parseInt(color.value.substr(1, 6), 16);
});
generateTheme(payload);
}
const generateTheme = (payload: Record<string, string>): void => {
const themeAttributeMap = {
'primary_color': 'primary',
'primary_text': 'primary-text',
'danger_color': 'danger',
'danger_text': 'danger-text',
'warning_color': 'warning',
'warning_text': 'warning-text',
'info_color': 'info',
'info_text': 'info-text',
'success_color': 'success',
'success_text': 'success-text',
'dark_color': 'dark',
'dark_text': 'dark-text',
'light_color': 'light',
'light_text': 'light-text',
'raised_background': 'raised-bg',
'raised_accent': 'raised-accent',
'background_color': 'background',
'body_text': 'body-text',
'input_color': 'input-bg',
'input_text': 'input-text',
'input_placeholder': 'input-placeholder',
'muted_text': 'muted-text'
};
let body = ":root {\n";
(Object.keys(payload)).forEach((payloadKey) => {
if (themeAttributeMap[payloadKey]) {
if (themeAttributeMap[payloadKey].includes('text') || themeAttributeMap[payloadKey].includes('placeholder')) {
const hex = getHexColorFromThemeValue(payload[payloadKey]);
body += `--${themeAttributeMap[payloadKey]}: ${getDecimalTripletsFromHex(hex)};\n`;
}
else {
body += `--${themeAttributeMap[payloadKey]}: #${getHexColorFromThemeValue(payload[payloadKey])};\n`;
}
}
});
body += "}";
previewStyle.innerHTML = body;
}
const getHexColorFromThemeValue = (themeValue: string): string => {
return ('000000' + parseInt(themeValue).toString(16)).substr(-6, 6);
}
const getDecimalTripletsFromHex = (hex: string): string => {
return hex.match(/.{1,2}/g).map((value) => parseInt(value, 16)).join(', ');
}
export function themeDocumentHandler(): void {
if (!document.querySelector('[action="/settings/theme"]')) return;
if (document.querySelector('#clr-picker')) return;
previewStyle = document.createElement('style');
previewStyle.setAttribute('data-preview-style', '');
document.body.appendChild(previewStyle);
Coloris.init();
Array.from(document.querySelectorAll('#update .color')).forEach((color: HTMLInputElement) => {
// If there already is a hex-color in the input, skip
if (color.value.startsWith('#')) return;
let colorValue;
// match for value="[digits]" to ALWAYS get a color value
// TODO: Fix this later with rethinking the entire lifecycle, or dropping Turbolinks
colorValue = color.outerHTML.match(/value="(\d+)"/)[1];
// matching failed, or no result was found, we just fallback to the input value
if (colorValue === null) {
colorValue = color.value;
}
color.value = `#${getHexColorFromThemeValue(colorValue)}`;
Coloris({
el: '.color',
wrap: false,
formatToggle: false,
alpha: false
});
color.addEventListener('input', () => {
clearTimeout(previewTimeout);
previewTimeout = setTimeout(previewTheme, 1000);
});
});
}
export function themeSubmitHandler(): void {
Array.from(document.querySelectorAll('#update .color')).forEach((color: HTMLInputElement) => {
color.value = String(parseInt(color.value.substr(1, 6), 16));
});
}