From 65eaa4610cfe7a1bf08259323c5af807098e2f5e Mon Sep 17 00:00:00 2001 From: FlorianWoelki Date: Sun, 28 Jul 2024 12:22:21 +0200 Subject: [PATCH] refactor: add options for setIconForNode function --- src/internal-plugins/bookmark.ts | 2 +- src/lib/api.ts | 2 +- src/lib/icon-tabs.test.ts | 24 +++++++++--------------- src/lib/icon-tabs.ts | 13 ++++++++++--- src/lib/icon.ts | 4 +++- src/lib/util/dom.test.ts | 15 ++++++++++++++- src/lib/util/dom.ts | 27 +++++++++++++++++---------- 7 files changed, 55 insertions(+), 32 deletions(-) diff --git a/src/internal-plugins/bookmark.ts b/src/internal-plugins/bookmark.ts index 1eb658da..05196482 100644 --- a/src/internal-plugins/bookmark.ts +++ b/src/internal-plugins/bookmark.ts @@ -71,7 +71,7 @@ export default class BookmarkInternalPlugin extends InternalPluginInjector { const defaultMargin = iconNode.style.margin; const iconColor = this.plugin.getIconColor(filePath) ?? this.plugin.getSettings().iconColor; - dom.setIconForNode(this.plugin, iconName, iconNode, iconColor); + dom.setIconForNode(this.plugin, iconName, iconNode, { color: iconColor }); // Reset the margin to the default value to prevent overlapping with the text. iconNode.style.margin = defaultMargin; } diff --git a/src/lib/api.ts b/src/lib/api.ts index 62ad698e..763b8a34 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -50,7 +50,7 @@ export function getApi(plugin: IconizePlugin): IconizeAPI { getIconByName: (iconNameWithPrefix: string) => icon.getIconByName(iconNameWithPrefix), setIconForNode: (iconName: string, node: HTMLElement, color?: string) => - dom.setIconForNode(plugin, iconName, node, color), + dom.setIconForNode(plugin, iconName, node, { color }), saveIconToIconPack: (iconNameWithPrefix) => saveIconToIconPack(plugin, iconNameWithPrefix), removeIconFromIconPack: (iconNameWithPrefix) => diff --git a/src/lib/icon-tabs.test.ts b/src/lib/icon-tabs.test.ts index 9fea8cf3..fc663969 100644 --- a/src/lib/icon-tabs.test.ts +++ b/src/lib/icon-tabs.test.ts @@ -94,7 +94,7 @@ describe('add', () => { plugin, 'IbTest', iconContainer, - 'purple', + { color: 'purple' }, ); }); @@ -108,7 +108,7 @@ describe('add', () => { plugin, 'IbTest', iconContainer, - 'blue', + { color: 'blue' }, ); }); @@ -117,13 +117,10 @@ describe('add', () => { await iconTabs.add(plugin, file, iconContainer); expect(iconContainer.style.margin).toBe(''); expect(setIconForNode).toBeCalledTimes(1); - expect(setIconForNode).toBeCalledWith( - plugin, - 'test', - iconContainer, - 'purple', - false, - ); + expect(setIconForNode).toBeCalledWith(plugin, 'test', iconContainer, { + color: 'purple', + shouldApplyAllStyles: false, + }); }); it('should not call `dom.setIconForNode` when icon is not found in data', async () => { @@ -156,12 +153,9 @@ describe('add', () => { await iconTabs.add(plugin, file, iconContainer); expect(iconContainer.style.margin).toBe(''); expect(setIconForNode).toBeCalledTimes(1); - expect(setIconForNode).toBeCalledWith( - plugin, - 'IbTest', - iconContainer, - undefined, - ); + expect(setIconForNode).toBeCalledWith(plugin, 'IbTest', iconContainer, { + color: undefined, + }); getSortedRules.mockRestore(); isApplicable.mockRestore(); diff --git a/src/lib/icon-tabs.ts b/src/lib/icon-tabs.ts index 983b0478..f6269270 100644 --- a/src/lib/icon-tabs.ts +++ b/src/lib/icon-tabs.ts @@ -59,7 +59,9 @@ const add = async ( // Only add the icon name manually when it is defined in the options. if (options?.iconName) { - dom.setIconForNode(plugin, options.iconName, iconContainer, iconColor); + dom.setIconForNode(plugin, options.iconName, iconContainer, { + color: iconColor, + }); // TODO: Refactor to include option to `insertIconToNode` function. iconContainer.style.margin = null; return; @@ -69,7 +71,9 @@ const add = async ( for (const rule of customRule.getSortedRules(plugin)) { const isApplicable = await customRule.isApplicable(plugin, rule, file); if (isApplicable) { - dom.setIconForNode(plugin, rule.icon, iconContainer, rule.color); + dom.setIconForNode(plugin, rule.icon, iconContainer, { + color: rule.color, + }); // TODO: Refactor to include option to `insertIconToNode` function. iconContainer.style.margin = null; break; @@ -98,7 +102,10 @@ const add = async ( iconName = value; } - dom.setIconForNode(plugin, iconName, iconContainer, iconColor, false); + dom.setIconForNode(plugin, iconName, iconContainer, { + color: iconColor, + shouldApplyAllStyles: false, + }); // TODO: Refactor to include option to `insertIconToNode` function. iconContainer.style.margin = null; }; diff --git a/src/lib/icon.ts b/src/lib/icon.ts index 0703f780..fe5d147a 100644 --- a/src/lib/icon.ts +++ b/src/lib/icon.ts @@ -235,7 +235,9 @@ const addAll = ( IconCache.getInstance().set(dataPath, { iconNameWithPrefix: iconName, }); - dom.setIconForNode(plugin, iconName, iconNode, iconColor); + dom.setIconForNode(plugin, iconName, iconNode, { + color: iconColor, + }); titleEl.insertBefore(iconNode, titleInnerEl); } diff --git a/src/lib/util/dom.test.ts b/src/lib/util/dom.test.ts index 7f640b5e..34f5d572 100644 --- a/src/lib/util/dom.test.ts +++ b/src/lib/util/dom.test.ts @@ -114,7 +114,7 @@ describe('setIconForNode', () => { .spyOn(svg, 'colorize') .mockImplementationOnce((icon) => icon); - dom.setIconForNode(plugin, 'IbTest', node, 'purple'); + dom.setIconForNode(plugin, 'IbTest', node, { color: 'purple' }); expect(colorize).toBeCalledTimes(2); // 2 times because of `applyAll` and `colorize`. colorize.mockRestore(); @@ -150,6 +150,19 @@ describe('setIconForNode', () => { parse.mockRestore(); applyAll.mockRestore(); }); + + it('should set `shouldApplyAllStyles` to `true` by default', () => { + const applyAll = vi + .spyOn(style, 'applyAll') + .mockImplementationOnce(() => ''); + + const node = document.createElement('div'); + dom.setIconForNode(plugin, 'IbTest', node, { color: 'blue' }); + expect(applyAll).toBeCalledTimes(1); + + dom.setIconForNode(plugin, 'IbTest', node); + expect(applyAll).toBeCalledTimes(2); + }); }); describe('createIconNode', () => { diff --git a/src/lib/util/dom.ts b/src/lib/util/dom.ts index cbe7bbab..3839aa85 100644 --- a/src/lib/util/dom.ts +++ b/src/lib/util/dom.ts @@ -43,21 +43,28 @@ const removeIconInPath = (path: string, options?: RemoveOptions): void => { removeIconInNode(node); }; +interface SetIconForNodeOptions { + color?: string; + shouldApplyAllStyles?: boolean; +} + /** * Sets an icon or emoji for an HTMLElement based on the specified icon name and color. * The function manipulates the specified node inline. * @param plugin Instance of the IconizePlugin. * @param iconName Name of the icon or emoji to add. * @param node HTMLElement to which the icon or emoji will be added. - * @param color Optional color of the icon to add. + * @param options Options for adjusting settings while the icon is being set. */ const setIconForNode = ( plugin: IconizePlugin, iconName: string, node: HTMLElement, - color?: string, - applyAllStyles: boolean = true, // TODO: Needs some refactor. + options?: SetIconForNodeOptions, ): void => { + options ??= {}; + options.shouldApplyAllStyles ??= true; + // Gets the possible icon based on the icon name. const iconNextIdentifier = nextIdentifier(iconName); const possibleIcon = getSvgFromLoadedIcon( @@ -67,18 +74,18 @@ const setIconForNode = ( if (possibleIcon) { // The icon is possibly not an emoji. - let iconContent = applyAllStyles + let iconContent = options?.shouldApplyAllStyles ? style.applyAll(plugin, possibleIcon, node) : possibleIcon; - if (color) { - node.style.color = color; - iconContent = svg.colorize(iconContent, color); + if (options?.color) { + node.style.color = options.color; + iconContent = svg.colorize(iconContent, options.color); } node.innerHTML = iconContent; } else { const parsedEmoji = emoji.parseEmoji(plugin.getSettings().emojiStyle, iconName) ?? iconName; - node.innerHTML = applyAllStyles + node.innerHTML = options?.shouldApplyAllStyles ? style.applyAll(plugin, parsedEmoji, node) : parsedEmoji; } @@ -134,14 +141,14 @@ const createIconNode = ( let iconNode: HTMLDivElement = node.querySelector('.iconize-icon'); // If the icon is already set in the path, we do not need to create a new div element. if (iconNode) { - setIconForNode(plugin, iconName, iconNode, options?.color); + setIconForNode(plugin, iconName, iconNode, { color: options?.color }); } else { // Creates a new icon node and inserts it to the DOM. iconNode = document.createElement('div'); iconNode.setAttribute(config.ICON_ATTRIBUTE_NAME, iconName); iconNode.classList.add('iconize-icon'); - setIconForNode(plugin, iconName, iconNode, options?.color); + setIconForNode(plugin, iconName, iconNode, { color: options?.color }); node.insertBefore(iconNode, titleNode); }