Skip to content

Commit 3915176

Browse files
longy2klongy2k
committed
Exposed CSS variables for consistent styling
1 parent 9e59a45 commit 3915176

File tree

2 files changed

+71
-133
lines changed

2 files changed

+71
-133
lines changed

‎src/settings.ts‎

Lines changed: 59 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { App, Notice, PluginSettingTab, Setting, ColorComponent, requestUrl } from 'obsidian';
1+
import { App, Notice, PluginSettingTab, Setting, ColorComponent, requestUrl, TextComponent } from 'obsidian';
22
import { BMOSettings, DEFAULT_SETTINGS } from './main';
33
import { colorToHex } from "./view";
44
import BMOGPT from './main';
@@ -196,9 +196,8 @@ export class BMOSettingTab extends PluginSettingTab {
196196
})
197197
);
198198

199-
let colorPicker: ColorComponent;
200-
let pollingInterval: string | number | NodeJS.Timer | undefined;
201-
199+
let textInput: TextComponent;
200+
202201
new Setting(containerEl)
203202
.setName('Background Color for Chatbot Container')
204203
.setDesc('Modify the background color of the chatbotContainer element.')
@@ -208,42 +207,34 @@ export class BMOSettingTab extends PluginSettingTab {
208207
.setClass("clickable-icon")
209208
.onClick(async () => {
210209
let defaultValue = colorToHex(getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.chatbotContainerBackgroundColor).trim());
211-
colorPicker.setValue(defaultValue);
212-
210+
213211
const chatbotContainer = document.querySelector('.chatbotContainer') as HTMLElement;
214212
if (chatbotContainer) {
215213
chatbotContainer.style.backgroundColor = defaultValue;
216214
}
217-
215+
216+
textInput.setValue(defaultValue);
217+
218218
this.plugin.settings.chatbotContainerBackgroundColor = defaultValue;
219219
await this.plugin.saveSettings();
220220
})
221-
)
222-
.addColorPicker((color) => {
223-
colorPicker = color;
224-
color.setValue(colorToHex(this.plugin.settings.chatbotContainerBackgroundColor) || colorToHex(getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.chatbotContainerBackgroundColor).trim()))
225-
.onChange(async (value) => {
226-
this.plugin.settings.chatbotContainerBackgroundColor = colorToHex(value);
227-
const chatbotContainer = document.querySelector('.chatbotContainer') as HTMLElement;
228-
if (chatbotContainer) {
229-
chatbotContainer.style.backgroundColor = colorToHex(value);
230-
}
231-
await this.plugin.saveSettings();
232-
});
233-
234-
let previousDefaultColor = colorToHex(getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.chatbotContainerBackgroundColor).trim());
235-
pollingInterval = setInterval(() => {
236-
const currentDefaultColor = colorToHex(getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.chatbotContainerBackgroundColor).trim());
237-
if (currentDefaultColor !== previousDefaultColor) {
238-
// If the default color has changed (i.e., the theme has changed), reset the color picker
239-
colorPicker.setValue(currentDefaultColor);
240-
previousDefaultColor = currentDefaultColor;
221+
)
222+
.addText(text => {
223+
textInput = text;
224+
text
225+
.setPlaceholder('')
226+
.setValue(this.plugin.settings.chatbotContainerBackgroundColor)
227+
.onChange(async (value) => {
228+
this.plugin.settings.chatbotContainerBackgroundColor = value;
229+
const chatbotContainer = document.querySelector('.chatbotContainer') as HTMLElement;
230+
if (chatbotContainer) {
231+
chatbotContainer.style.backgroundColor = value;
241232
}
242-
}, 1000); // Poll every second
233+
await this.plugin.saveSettings();
234+
})
243235
});
244236

245-
let colorPicker1: ColorComponent;
246-
let pollingInterval1: string | number | NodeJS.Timer | undefined;
237+
let textInput2: TextComponent;
247238

248239
new Setting(containerEl)
249240
.setName('Background color for User Message')
@@ -254,7 +245,6 @@ export class BMOSettingTab extends PluginSettingTab {
254245
.setClass("clickable-icon")
255246
.onClick(async () => {
256247
const defaultValue = colorToHex(getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.userMessageBackgroundColor).trim());
257-
colorPicker1.setValue(defaultValue);
258248

259249
const messageContainer = document.querySelector('#messageContainer');
260250
if (messageContainer) {
@@ -263,56 +253,33 @@ export class BMOSettingTab extends PluginSettingTab {
263253
const element = userMessage as HTMLElement;
264254
element.style.backgroundColor = defaultValue;
265255
});
256+
textInput2.setValue(defaultValue);
257+
this.plugin.settings.userMessageBackgroundColor = defaultValue;
266258
await this.plugin.saveSettings();
267259
}
268260
})
269261
)
270-
.addColorPicker((color) => {
271-
colorPicker1 = color;
272-
const defaultValue = colorToHex(this.plugin.settings.userMessageBackgroundColor) || colorToHex(getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.userMessageBackgroundColor).trim());
273-
color.setValue(defaultValue)
274-
.onChange(async (value) => {
275-
const hexValue = colorToHex(value);
276-
this.plugin.settings.userMessageBackgroundColor = hexValue;
277-
const messageContainer = document.querySelector('#messageContainer');
278-
if (messageContainer) {
279-
const userMessages = messageContainer.querySelectorAll('.userMessage');
280-
userMessages.forEach((userMessage) => {
281-
const element = userMessage as HTMLElement;
282-
element.style.backgroundColor = hexValue;
283-
});
284-
285-
const observer = new MutationObserver((mutations) => {
286-
mutations.forEach((mutation) => {
287-
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
288-
mutation.addedNodes.forEach((node) => {
289-
if ((node as HTMLElement).classList.contains('userMessage')) {
290-
(node as HTMLElement).style.backgroundColor = hexValue;
291-
}
292-
});
293-
}
294-
});
295-
});
296-
297-
observer.observe(messageContainer, { childList: true });
298-
}
262+
.addText(text => {
263+
textInput2 = text;
264+
text
265+
.setPlaceholder('')
266+
.setValue(this.plugin.settings.userMessageBackgroundColor)
267+
.onChange(async (value) => {
268+
this.plugin.settings.userMessageBackgroundColor = value;
269+
const messageContainer = document.querySelector('#messageContainer') as HTMLElement;
270+
if (messageContainer) {
271+
const userMessages = messageContainer.querySelectorAll('.userMessage');
272+
userMessages.forEach((userMessage) => {
273+
const element = userMessage as HTMLElement;
274+
element.style.backgroundColor = value;
275+
})
299276
await this.plugin.saveSettings();
300-
});
301-
302-
let previousDefaultColor = colorToHex(getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.userMessageBackgroundColor).trim());
303-
pollingInterval1 = setInterval(() => {
304-
const currentDefaultColor = colorToHex(getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.userMessageBackgroundColor).trim());
305-
if (currentDefaultColor !== previousDefaultColor) {
306-
// If the default color has changed (i.e., the theme has changed), reset the color picker
307-
colorPicker1.setValue(currentDefaultColor);
308-
previousDefaultColor = currentDefaultColor;
309277
}
310-
}, 1000); // Poll every second
311-
});
312-
313-
let colorPicker2: ColorComponent;
314-
let pollingInterval2: string | number | NodeJS.Timer | undefined;
278+
});
279+
});
315280

281+
let textInput3: TextComponent;
282+
316283
new Setting(containerEl)
317284
.setName('Background color for Bot Message')
318285
.setDesc('Modify the background color of the botMessage element.')
@@ -322,68 +289,39 @@ export class BMOSettingTab extends PluginSettingTab {
322289
.setClass("clickable-icon")
323290
.onClick(async () => {
324291
const defaultValue = colorToHex(getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.botMessageBackgroundColor).trim());
325-
colorPicker2.setValue(defaultValue);
326292

327293
const messageContainer = document.querySelector('#messageContainer');
328294
if (messageContainer) {
329295
const botMessages = messageContainer.querySelectorAll('.botMessage');
330296
botMessages.forEach((botMessage) => {
331297
const element = botMessage as HTMLElement;
332298
element.style.backgroundColor = defaultValue;
333-
});
299+
})
300+
textInput3.setValue(defaultValue);
301+
this.plugin.settings.botMessageBackgroundColor = defaultValue;
334302
await this.plugin.saveSettings();
335303
}
336304
})
337305
)
338-
.addColorPicker((color) => {
339-
colorPicker2 = color;
340-
const defaultValue = colorToHex(this.plugin.settings.botMessageBackgroundColor || getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.botMessageBackgroundColor).trim());
341-
color.setValue(defaultValue)
342-
.onChange(async (value) => {
343-
const hexValue = colorToHex(value);
344-
this.plugin.settings.botMessageBackgroundColor = hexValue;
345-
const messageContainer = document.querySelector('#messageContainer');
346-
if (messageContainer) {
347-
const botMessages = messageContainer.querySelectorAll('.botMessage');
348-
botMessages.forEach((botMessage) => {
349-
const element = botMessage as HTMLElement;
350-
element.style.backgroundColor = hexValue;
351-
});
352-
353-
const observer = new MutationObserver((mutations) => {
354-
mutations.forEach((mutation) => {
355-
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
356-
mutation.addedNodes.forEach((node) => {
357-
if ((node as HTMLElement).classList.contains('botMessage')) {
358-
(node as HTMLElement).style.backgroundColor = hexValue;
359-
}
360-
});
361-
}
362-
});
363-
});
364-
365-
observer.observe(messageContainer, { childList: true });
366-
}
306+
.addText(text => {
307+
textInput3 = text;
308+
text
309+
.setPlaceholder('')
310+
.setValue(this.plugin.settings.botMessageBackgroundColor)
311+
.onChange(async (value) => {
312+
this.plugin.settings.botMessageBackgroundColor = value;
313+
const messageContainer = document.querySelector('#messageContainer') as HTMLElement;
314+
if (messageContainer) {
315+
const userMessages = messageContainer.querySelectorAll('.botMessage');
316+
userMessages.forEach((botMessage) => {
317+
const element = botMessage as HTMLElement;
318+
element.style.backgroundColor = value;
319+
})
367320
await this.plugin.saveSettings();
368-
});
369-
370-
let previousDefaultColor = colorToHex(getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.botMessageBackgroundColor).trim());
371-
pollingInterval2 = setInterval(() => {
372-
const currentDefaultColor = colorToHex(getComputedStyle(document.body).getPropertyValue(DEFAULT_SETTINGS.botMessageBackgroundColor).trim());
373-
if (currentDefaultColor !== previousDefaultColor) {
374-
// If the default color has changed (i.e., the theme has changed), reset the color picker
375-
colorPicker2.setValue(currentDefaultColor);
376-
previousDefaultColor = currentDefaultColor;
377321
}
378-
}, 1000); // Poll every second
322+
});
379323
});
380324

381-
// Be sure to clear the interval when the settings pane is closed to avoid memory leaks
382-
onunload = () => {
383-
clearInterval(pollingInterval);
384-
clearInterval(pollingInterval1);
385-
clearInterval(pollingInterval2);
386-
}
387325

388326
containerEl.createEl('h2', {text: 'Advanced'});
389327

‎src/view.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ export function setMessageHistory(newMessageHistory: string) {
1414
export function colorToHex(colorValue: string): string {
1515
if (colorValue.startsWith("hsl")) {
1616
// Convert HSL to HEX
17-
var match = colorValue.match(/(\d+(\.\d+)?)%?/g);
17+
let match = colorValue.match(/(\d+(\.\d+)?)%?/g);
1818
if (match === null || match.length < 3) {
1919
throw new Error("Invalid HSL value");
2020
}
21-
var h = parseInt(match[0]) / 360;
22-
var s = parseInt(match[1]) / 100;
23-
var l = parseInt(match[2]) / 100;
21+
let h = parseInt(match[0]) / 360;
22+
let s = parseInt(match[1]) / 100;
23+
let l = parseInt(match[2]) / 100;
2424

2525
function hue2rgb(p: number, q: number, t: number) {
2626
if (t < 0) t += 1;
@@ -31,18 +31,18 @@ export function colorToHex(colorValue: string): string {
3131
return p;
3232
}
3333

34-
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
35-
var p = 2 * l - q;
36-
var r = hue2rgb(p, q, h + 1 / 3);
37-
var g = hue2rgb(p, q, h);
38-
var b = hue2rgb(p, q, h - 1 / 3);
34+
let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
35+
let p = 2 * l - q;
36+
let r = hue2rgb(p, q, h + 1 / 3);
37+
let g = hue2rgb(p, q, h);
38+
let b = hue2rgb(p, q, h - 1 / 3);
3939

40-
var toHex = function (c: number) {
41-
var hex = Math.round(c * 255).toString(16);
40+
let toHex = function (c: number) {
41+
let hex = Math.round(c * 255).toString(16);
4242
return hex.length === 1 ? "0" + hex : hex;
4343
};
4444

45-
var hex = "#" + toHex(r) + toHex(g) + toHex(b);
45+
let hex = "#" + toHex(r) + toHex(g) + toHex(b);
4646
return hex;
4747
} else if (colorValue.startsWith("rgb")) {
4848
// Convert RGB to HEX

0 commit comments

Comments
 (0)