From 89bc02fed5d668d3c78095048df6ceed33b37898 Mon Sep 17 00:00:00 2001 From: ALegendsTale Date: Tue, 6 Aug 2024 04:37:12 -0400 Subject: [PATCH] New setting, typo fixes + New `ColorFormat` setting #16 + Fix various typos + Update readme --- .markdownlint.json | 6 ---- documentation/Colors.md | 2 +- documentation/PaletteSettings.md | 3 +- documentation/Settings.md | 10 +++++- src/components/EditorModal.ts | 2 +- src/components/Palette.ts | 15 ++++---- src/components/PaletteMRC.ts | 2 +- src/components/PaletteMenu.ts | 6 ++-- src/settings.ts | 59 ++++++++++++++++++++++---------- src/utils/basicUtils.ts | 15 +++++--- src/utils/imageUtils.ts | 2 +- 11 files changed, 74 insertions(+), 48 deletions(-) delete mode 100644 .markdownlint.json diff --git a/.markdownlint.json b/.markdownlint.json deleted file mode 100644 index e44fd24..0000000 --- a/.markdownlint.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "MD033": { - "allowed_elements": ["pre"] - }, - "MD018": false -} diff --git a/documentation/Colors.md b/documentation/Colors.md index 37fb366..45e85d5 100644 --- a/documentation/Colors.md +++ b/documentation/Colors.md @@ -90,4 +90,4 @@ Semicolon delimiters can be used with the `RGB` and `HSL` formats. ```palette rgb(123, 555, 777); rgb(122, 222, 772); ``` - \ No newline at end of file + diff --git a/documentation/PaletteSettings.md b/documentation/PaletteSettings.md index f5be5c8..9e0a85a 100644 --- a/documentation/PaletteSettings.md +++ b/documentation/PaletteSettings.md @@ -108,7 +108,6 @@ rgba(var(--color-green-rgb), .5) ``` - ## Aliases Aliases are names which accompany colors. @@ -123,4 +122,4 @@ Skipping colors is possible by using empty quotes "". #322 { "aliases": ["grey","black","brown"] } ``` - \ No newline at end of file + diff --git a/documentation/Settings.md b/documentation/Settings.md index 2da832c..a1a4d0b 100644 --- a/documentation/Settings.md +++ b/documentation/Settings.md @@ -37,7 +37,7 @@ Purely aesthetic change which toggles whether the corners on palettes are rounde Toggles whether hover is active while editing. -## Reload Delay +### Reload Delay > Default: 5 @@ -45,6 +45,14 @@ Modifies the speed at which the palette will reload when resizing or changing. Smaller values means the palette will be more responsive, but require more processing. It is recommended to keep this value between 0 - 1000. +### Copy Format + +> Default: Raw + +Changes the format that colors are copied in. `Raw` format copies the entire color as show. +`Value` format copies only the value contained within a color. +Example: `RGBA(12, 200, 50);` Only `12, 200, 50` is copied. + ## Palette Defaults The default values of [Palette Settings](./PaletteSettings.md) if the user does not directly modify them. diff --git a/src/components/EditorModal.ts b/src/components/EditorModal.ts index adf4d7e..5a04f25 100644 --- a/src/components/EditorModal.ts +++ b/src/components/EditorModal.ts @@ -338,7 +338,7 @@ export class EditorModal extends Modal { }) } - // Set intiial selectedInput + // Set initial selectedInput changeSelectedInput(this.selectedInput); let palettePreview = previewContainer.appendChild(createDiv()); diff --git a/src/components/Palette.ts b/src/components/Palette.ts index c6b2e4e..3f33d0a 100644 --- a/src/components/Palette.ts +++ b/src/components/Palette.ts @@ -186,7 +186,7 @@ export class Palette { } /** - * @returns `user` OR `auto` width based on which is more approperiate + * @returns `user` OR `auto` width based on which is more appropriate */ public getPaletteWidth(resizeOffset = 0) { const paletteOffset = resizeOffset !== 0 ? resizeOffset : this.dropzone.offsetWidth; @@ -236,7 +236,7 @@ export class Palette { this.settings.gradient ? this.createGradientPalette(this.dropzone, colors) : - this.createColorPalette(this.dropzone, colors, settings, this.pluginSettings.aliasMode); + this.createColorPalette(this.dropzone, colors, settings); // Set width of palettes this.setWidth(this.getPaletteWidth()); @@ -251,14 +251,14 @@ export class Palette { if(colors.length <= 1) throw new PaletteError(Status.INVALID_GRADIENT); this.paletteCanvas = new Canvas(container); - this.paletteCanvas.emitter.on('click', (hex) => copyToClipboard(hex)); + this.paletteCanvas.emitter.on('click', async (color) => await copyToClipboard(color.toUpperCase(), this.pluginSettings.copyFormat)); } - private createColorPalette(container: HTMLElement, colors: string[], settings: PaletteSettings, aliasMode: AliasMode){ + private createColorPalette(container: HTMLElement, colors: string[], settings: PaletteSettings){ for(const [i, color] of colors.entries()){ const paletteItem = new PaletteItem(container, color, { - aliasMode: aliasMode, + aliasMode: this.pluginSettings.aliasMode, editMode: this.editMode, hoverWhileEditing: this.pluginSettings.hoverWhileEditing, height: settings.height, @@ -269,10 +269,7 @@ export class Palette { } ); - paletteItem.emitter.on('click', (e: MouseEvent) => { - this.createNotice(`Copied ${color}`); - navigator.clipboard.writeText(color); - }) + paletteItem.emitter.on('click', async (e: MouseEvent) => await copyToClipboard(color.toUpperCase(), this.pluginSettings.copyFormat)); paletteItem.emitter.on('trash', (e: MouseEvent) => { e.stopPropagation(); diff --git a/src/components/PaletteMRC.ts b/src/components/PaletteMRC.ts index 90ef405..f29b7f0 100644 --- a/src/components/PaletteMRC.ts +++ b/src/components/PaletteMRC.ts @@ -130,7 +130,7 @@ export class PaletteMRC extends MarkdownRenderChild { * Calculates colors and settings based on codeblock contents */ private calcColorsAndSettings(input: string) { - // Splits input by newline creaitng an array + // Splits input by newline creating an array const split = input.split('\n') // Returns true if palette settings are defined const hasSettings = split.some((val) => val.includes(('{'))); diff --git a/src/components/PaletteMenu.ts b/src/components/PaletteMenu.ts index eaeb000..528de64 100644 --- a/src/components/PaletteMenu.ts +++ b/src/components/PaletteMenu.ts @@ -4,7 +4,7 @@ import colorsea from "colorsea"; import { App, MarkdownPostProcessorContext, Menu, Notice } from "obsidian"; import { Palette, PaletteSettings } from "./Palette"; import { Direction } from "settings"; -import { createPaletteBlock, getModifiedSettings } from "utils/basicUtils"; +import { copyToClipboard, createPaletteBlock, getModifiedSettings } from "utils/basicUtils"; export class PaletteMenu extends Menu { app: App; @@ -124,7 +124,7 @@ export class PaletteMenu extends Menu { .setIcon("scissors") .onClick(async () => { // Copy palette to clipboard - await navigator.clipboard.writeText(input); + await copyToClipboard(input, this.palette.pluginSettings.copyFormat); // Remove palette this.onChange(undefined, undefined); }) @@ -136,7 +136,7 @@ export class PaletteMenu extends Menu { .setIcon("copy") .onClick(async () => { // Copy palette to clipboard - await navigator.clipboard.writeText(input); + await copyToClipboard(input, this.palette.pluginSettings.copyFormat); }) }); } diff --git a/src/settings.ts b/src/settings.ts index 04ddf30..1583165 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -13,6 +13,11 @@ export enum AliasMode { Alias = 'Prefer Alias' } +export enum CopyFormat { + Raw = 'Raw', + Value = 'Value' +} + export interface ColorPaletteSettings { noticeDuration: number; errorPulse: boolean; @@ -20,6 +25,7 @@ export interface ColorPaletteSettings { corners: boolean; hoverWhileEditing: boolean; reloadDelay: number; + copyFormat: CopyFormat; height: number; width: number; direction: Direction, @@ -35,6 +41,7 @@ export const defaultSettings: ColorPaletteSettings = { corners: true, hoverWhileEditing: false, reloadDelay: 5, + copyFormat: CopyFormat.Raw, height: 150, width: 700, direction: Direction.Column, @@ -63,7 +70,7 @@ export class SettingsTab extends PluginSettingTab { new Setting(containerEl) .setName("Palette Error Pulse") - .setDesc("Whether the affected palette should pulse when encountering an error") + .setDesc("Whether the affected palette should pulse when encountering an error.") .addToggle((toggle) => { toggle .setValue(settings.errorPulse) @@ -75,7 +82,7 @@ export class SettingsTab extends PluginSettingTab { new Setting(containerEl) .setName("Notice Duration") - .setDesc("How long palette error messages are show for in seconds (0 for indefinite)") + .setDesc("How long palette error messages are show for in seconds (0 for indefinite).") .addText((text) => { text .setValue((settings.noticeDuration / 1000).toString()) @@ -133,25 +140,39 @@ export class SettingsTab extends PluginSettingTab { }) new Setting(containerEl) - .setName("Reload Delay") - .setDesc("How long it takes in milliseconds for palettes to be updated after changes have been made (Larger values are less responsive).") - .addText((text) => { - text - .setValue(settings.reloadDelay.toString()) - .onChange(async (value) => { - try { - // Check if valid number - if(!Number.isNaN(Number(value))) { - settings.reloadDelay = Number(value); - await this.plugin.saveSettings(); + .setName("Reload Delay") + .setDesc("How long it takes in milliseconds for palettes to be updated after changes have been made (Larger values are less responsive).") + .addText((text) => { + text + .setValue(settings.reloadDelay.toString()) + .onChange(async (value) => { + try { + // Check if valid number + if(!Number.isNaN(Number(value))) { + settings.reloadDelay = Number(value); + await this.plugin.saveSettings(); + } + else throw new Error('Please enter a number.'); } - else throw new Error('Please enter a number.'); - } - catch(e) { - new Notice(e); - } + catch(e) { + new Notice(e); + } + }); }); - }); + + new Setting(containerEl) + .setName('Copy Format') + .setDesc('Choice of format when copying colors.') + .addDropdown((dropdown) => { + dropdown + .addOption(CopyFormat.Raw, CopyFormat.Raw) + .addOption(CopyFormat.Value, CopyFormat.Value) + .setValue(this.plugin.settings.copyFormat) + .onChange(async (value) => { + settings.copyFormat = value as CopyFormat; + await this.plugin.saveSettings(); + }) + }) containerEl.createEl('h2').setText('Palette Defaults'); diff --git a/src/utils/basicUtils.ts b/src/utils/basicUtils.ts index db7b7dc..4bee411 100644 --- a/src/utils/basicUtils.ts +++ b/src/utils/basicUtils.ts @@ -1,7 +1,7 @@ import colorsea from "colorsea"; import { PaletteSettings } from "components/Palette"; import { Notice } from "obsidian"; -import { ColorPaletteSettings, defaultSettings } from "settings"; +import { ColorPaletteSettings, CopyFormat, defaultSettings } from "settings"; /** * Get settings without their default values @@ -124,7 +124,14 @@ export function toNString(array: string[]) { return result.trim(); } -export function copyToClipboard(text: string) { - new Notice(`Copied ${text.toUpperCase()}`); - navigator.clipboard.writeText(text.toUpperCase()); +export async function copyToClipboard(text: string, copyFormat?: CopyFormat) { + let copiedText = text; + + // Copy only color value if CopyFormat is set to value & when not a codeblock + if(copyFormat === CopyFormat.Value && !text.includes('`')) { + if(copiedText.includes('#')) copiedText = copiedText.split('#')[1]; + else if(copiedText.includes('(')) copiedText = copiedText.split('(')[1].split(')')[0]; + } + new Notice(`Copied ${copiedText}`); + await navigator.clipboard.writeText(copiedText); } \ No newline at end of file diff --git a/src/utils/imageUtils.ts b/src/utils/imageUtils.ts index 22cccc7..030e99b 100644 --- a/src/utils/imageUtils.ts +++ b/src/utils/imageUtils.ts @@ -61,7 +61,7 @@ export default class CanvasImage extends Canvas { */ public async getPalette(numColors = 7, quality = 10) { /* - Quanitze has an issue with number of colors which has been addressed here https://github.com/olivierlesnicki/quantize/issues/9 + Quantize has an issue with number of colors which has been addressed here https://github.com/olivierlesnicki/quantize/issues/9 `nColors` is a simple fix for this. */ const nColors = numColors <= 7 ? numColors : numColors + 1;