Drop to add icon.
'; +/** + * Gets the tab leaves of a specific file path by looping through all opened files and + * checking if the file path matches. + * @param plugin IconizePlugin instance. + * @param path String of the file path to get the tab leaf of. + * @returns TabHeaderLeaf array that includes all tab leaves of the file path. + */ +const getTabLeavesOfFilePath = (plugin, path) => { + const openedFiles = getAllOpenedFiles(plugin); + const openedFile = openedFiles.filter((openedFile) => openedFile.path === path); + const leaves = openedFile.map((openedFile) => openedFile.leaf); + return leaves; +}; +/** + * Adds an icon to the tab and its container. This function respects the + * custom rules and individually icon set. + * @param plugin IconizePlugin instance. + * @param file TFile instance of the file to add the icon to. + * @param iconContainer HTMLElement where the icon will be added to. + * @param options AddOptions for the add function which can optionally be used. + */ +const add$1 = (plugin, file, iconContainer, options) => __awaiter(void 0, void 0, void 0, function* () { + var _a; + const iconColor = (_a = options === null || options === void 0 ? void 0 : options.iconColor) !== null && _a !== void 0 ? _a : plugin.getSettings().iconColor; + const data = Object.entries(plugin.getData()); + // Removes the `display: none` from the obsidian styling. + iconContainer.style.display = 'flex'; + // Only add the icon name manually when it is defined in the options. + if (options === null || options === void 0 ? void 0 : options.iconName) { + dom.setIconForNode(plugin, options.iconName, iconContainer, iconColor); + // TODO: Refactor to include option to `insertIconToNode` function. + iconContainer.style.margin = null; + return; } - normalizeIconPackName(value) { - return value.toLowerCase().replace(/\s/g, '-'); + // Add icons to tabs if a custom rule is applicable. + for (const rule of customRule.getSortedRules(plugin)) { + const isApplicable = yield customRule.isApplicable(plugin, rule, file); + if (isApplicable) { + dom.setIconForNode(plugin, rule.icon, iconContainer, rule.color); + // TODO: Refactor to include option to `insertIconToNode` function. + iconContainer.style.margin = null; + break; + } } - preventDefaults(event) { - event.preventDefault(); - event.stopPropagation(); - } - highlight(el) { - clearTimeout(this.closeTimer); - if (!this.dragTargetElement) { - el.appendChild(this.dragOverElement); - el.classList.add('iconize-dragover'); - this.dragTargetElement = el; - } - } - unhighlight(target, el) { - if (this.dragTargetElement && this.dragTargetElement !== target) { - this.dragTargetElement.removeChild(this.dragOverElement); - this.dragTargetElement.classList.remove('iconize-dragover'); - this.dragTargetElement = undefined; - } - clearTimeout(this.closeTimer); - this.closeTimer = setTimeout(() => { - if (this.dragTargetElement) { - el.removeChild(this.dragOverElement); - el.classList.remove('iconize-dragover'); - this.dragTargetElement = undefined; - } - }, 100); - } - display() { - new obsidian.Setting(this.containerEl) - .setName('Add custom icon pack') - .setDesc('Add a custom icon pack.') - .addText((text) => { - text.setPlaceholder('Your icon pack name'); - this.textComponent = text; - }) - .addButton((btn) => { - btn.setButtonText('Add icon pack'); - btn.onClick(() => __awaiter(this, void 0, void 0, function* () { - const name = this.textComponent.getValue(); - if (name.length === 0) { - return; - } - const normalizedName = this.normalizeIconPackName(this.textComponent.getValue()); - if (yield doesIconPackExist(this.plugin, normalizedName)) { - new obsidian.Notice('Icon pack already exists.'); - return; - } - yield createCustomIconPackDirectory(this.plugin, normalizedName); - this.textComponent.setValue(''); - this.refreshDisplay(); - new obsidian.Notice('Icon pack successfully created.'); - })); - }); - getAllIconPacks().forEach((iconPack) => { - const iconPackSetting = new obsidian.Setting(this.containerEl) - .setName(`${iconPack.name} (${iconPack.prefix})`) - .setDesc(`Total icons: ${iconPack.icons.length}`); - // iconPackSetting.addButton((btn) => { - // btn.setIcon('broken-link'); - // btn.setTooltip('Try to fix icon pack'); - // btn.onClick(async () => { - // new Notice('Try to fix icon pack...'); - // getIconPack(iconPack.name).icons = []; - // const icons = await getFilesInDirectory(this.plugin, `${getPath()}/${iconPack.name}`); - // for (let i = 0; i < icons.length; i++) { - // const filePath = icons[i]; - // const fileName = filePath.split('/').pop(); - // const file = await this.plugin.app.vault.adapter.read(filePath); - // const iconContent = file - // .replace(/stroke="#fff"/g, 'stroke="currentColor"') - // .replace(/fill="#fff"/g, 'fill="currentColor"'); - // await this.plugin.app.vault.adapter.write(filePath, iconContent); - // await normalizeFileName(this.plugin, filePath); - // addIconToIconPack(iconPack.name, fileName, iconContent); - // } - // new Notice('...tried to fix icon pack'); - // // Refreshes the DOM. - // Object.entries(this.plugin.getData()).forEach(async ([k, v]) => { - // const doesPathExist = await this.plugin.app.vault.adapter.exists(k, true); - // if (doesPathExist && typeof v === 'string') { - // // dom.removeIconInPath(k); - // dom.createIconNode(this.plugin, k, v); - // } - // }); - // }); - // }); - if (iconPack.name === NATIVE_LUCIDE_ICON_PACK_NAME) { - return; - } - iconPackSetting.addButton((btn) => { - btn.setIcon('plus'); - btn.setTooltip('Add an icon'); - btn.onClick(() => __awaiter(this, void 0, void 0, function* () { - const fileSelector = document.createElement('input'); - fileSelector.setAttribute('type', 'file'); - fileSelector.setAttribute('multiple', 'multiple'); - fileSelector.setAttribute('accept', '.svg'); - fileSelector.click(); - fileSelector.onchange = (e) => __awaiter(this, void 0, void 0, function* () { - const target = e.target; - for (let i = 0; i < target.files.length; i++) { - const file = target.files[i]; - const content = yield readFileSync(file); - yield createFile(this.plugin, iconPack.name, file.name, content); - addIconToIconPack(iconPack.name, file.name, content); - iconPackSetting.setDesc(`Total icons: ${iconPack.icons.length} (added: ${file.name})`); - } - new obsidian.Notice('Icons successfully added.'); - }); - })); - }); - iconPackSetting.addButton((btn) => { - btn.setIcon('trash'); - btn.setTooltip('Remove the icon pack'); - btn.onClick(() => __awaiter(this, void 0, void 0, function* () { - yield deleteIconPack(this.plugin, iconPack.name); - this.refreshDisplay(); - new obsidian.Notice('Icon pack successfully deleted.'); - })); - }); - ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((event) => { - iconPackSetting.settingEl.addEventListener(event, this.preventDefaults, false); - }); - ['dragenter', 'dragover'].forEach((event) => { - iconPackSetting.settingEl.addEventListener(event, () => this.highlight(iconPackSetting.settingEl), false); - }); - ['dragleave', 'drop'].forEach((event) => { - iconPackSetting.settingEl.addEventListener(event, (event) => this.unhighlight(event.currentTarget, iconPackSetting.settingEl), false); - }); - iconPackSetting.settingEl.addEventListener('drop', (event) => __awaiter(this, void 0, void 0, function* () { - const files = event.dataTransfer.files; - let successful = false; - for (let i = 0; i < files.length; i++) { - const file = files[i]; - if (file.type !== 'image/svg+xml') { - new obsidian.Notice(`File ${file.name} is not a SVG file.`); - continue; - } - successful = true; - const content = yield readFileSync(file); - yield createFile(this.plugin, iconPack.name, file.name, content); - addIconToIconPack(iconPack.name, file.name, content); - iconPackSetting.setDesc(`Total icons: ${iconPack.icons.length} (added: ${file.name})`); - } - if (successful) { - new obsidian.Notice('Icons successfully added.'); - } - }), false); - }); - } -} - -/** - * Gets the tab leaves of a specific file path by looping through all opened files and - * checking if the file path matches. - * @param plugin IconizePlugin instance. - * @param path String of the file path to get the tab leaf of. - * @returns TabHeaderLeaf array that includes all tab leaves of the file path. - */ -const getTabLeavesOfFilePath = (plugin, path) => { - const openedFiles = getAllOpenedFiles(plugin); - const openedFile = openedFiles.filter((openedFile) => openedFile.path === path); - const leaves = openedFile.map((openedFile) => openedFile.leaf); - return leaves; -}; -/** - * Adds an icon to the tab and its container. This function respects the - * custom rules and individually icon set. - * @param plugin IconizePlugin instance. - * @param file TFile instance of the file to add the icon to. - * @param iconContainer HTMLElement where the icon will be added to. - * @param options AddOptions for the add function which can optionally be used. - */ -const add$1 = (plugin, file, iconContainer, options) => __awaiter(void 0, void 0, void 0, function* () { - var _a; - const iconColor = (_a = options === null || options === void 0 ? void 0 : options.iconColor) !== null && _a !== void 0 ? _a : plugin.getSettings().iconColor; - const data = Object.entries(plugin.getData()); - // Removes the `display: none` from the obsidian styling. - iconContainer.style.display = 'flex'; - // Only add the icon name manually when it is defined in the options. - if (options === null || options === void 0 ? void 0 : options.iconName) { - dom.setIconForNode(plugin, options.iconName, iconContainer, iconColor); - // TODO: Refactor to include option to `insertIconToNode` function. - iconContainer.style.margin = null; - return; - } - // Add icons to tabs if a custom rule is applicable. - for (const rule of customRule.getSortedRules(plugin)) { - const isApplicable = yield customRule.isApplicable(plugin, rule, file); - if (isApplicable) { - dom.setIconForNode(plugin, rule.icon, iconContainer, rule.color); - // TODO: Refactor to include option to `insertIconToNode` function. - iconContainer.style.margin = null; - break; - } - } - // Add icons to tabs if there is an icon set. - const iconData = data.find(([dataPath]) => dataPath === file.path); - if (!iconData) { - return; + // Add icons to tabs if there is an icon set. + const iconData = data.find(([dataPath]) => dataPath === file.path); + if (!iconData) { + return; } const value = iconData[1]; if (typeof value !== 'string' && typeof value !== 'object') { @@ -3733,50 +3601,507 @@ var iconTabs = { getTabLeavesOfFilePath, }; -class CustomIconRuleSetting extends IconFolderSetting { - constructor(plugin, containerEl, app, refreshDisplay) { - super(plugin, containerEl); - this.app = app; - this.refreshDisplay = refreshDisplay; - } - /** - * Updates all the open files based on the custom rule that was specified. - * @param rule Rule that will be used to update all the icons for all opened files. - * @param remove Whether to remove the icons that are applicable to the rule or not. - */ - updateIconTabs(rule_1, remove_1) { - return __awaiter(this, arguments, void 0, function* (rule, remove, cachedPaths = []) { - if (this.plugin.getSettings().iconInTabsEnabled) { - for (const openedFile of getAllOpenedFiles(this.plugin)) { - if (cachedPaths.includes(openedFile.path)) { - continue; - } - const applicable = yield customRule.isApplicable(this.plugin, rule, openedFile); - if (!applicable) { - continue; - } - const leaf = openedFile.leaf; - if (remove) { - iconTabs.remove(leaf.tabHeaderInnerIconEl, { - replaceWithDefaultIcon: true, - }); - } - else { - iconTabs.add(this.plugin, openedFile, leaf.tabHeaderInnerIconEl, { - iconName: rule.icon, - iconColor: rule.color, - }); - } - } +const checkMissingIcons = (plugin, data) => __awaiter(void 0, void 0, void 0, function* () { + const missingIcons = new Set(); + const allIcons = new Map(); + const getMissingIcon = (iconNameWithPrefix) => __awaiter(void 0, void 0, void 0, function* () { + const iconNextIdentifier = nextIdentifier(iconNameWithPrefix); + const iconName = iconNameWithPrefix.substring(iconNextIdentifier); + const iconPrefix = iconNameWithPrefix.substring(0, iconNextIdentifier); + const iconPackName = getIconPackNameByPrefix(iconPrefix); + if (iconPackName === LUCIDE_ICON_PACK_NAME && + !plugin.doesUseCustomLucideIconPack()) { + return; + } + const icon = getIconFromIconPack(iconPackName, iconPrefix, iconName); + if (!icon) { + logger.error(`Icon file with name ${iconNameWithPrefix} could not be found`); + return null; + } + const doesIconFileExists = yield plugin.app.vault.adapter.exists(`${getPath()}/${iconPackName}/${iconName}.svg`); + if (!doesIconFileExists) { + const possibleIcon = getSvgFromLoadedIcon(iconPrefix, iconName); + if (!possibleIcon) { + logger.error(`Icon SVG with name ${iconNameWithPrefix} could not be found`); + return null; } - }); - } - createDescriptionEl(container, text) { - const description = container.createEl('p', { - text, - cls: 'setting-item-description', - }); - description.style.marginBottom = 'var(--size-2-2)'; + yield extractIconToIconPack(plugin, icon, possibleIcon); + return icon; + } + return null; + }); + for (const rule of plugin.getSettings().rules) { + if (!emoji.isEmoji(rule.icon)) { + allIcons.set(rule.icon, true); + const icon = yield getMissingIcon(rule.icon); + if (icon) { + missingIcons.add(icon); + } + } + } + for (const [_, value] of data) { + // Check for missing icon names. + let iconNameWithPrefix = value; + if (typeof value === 'object') { + iconNameWithPrefix = value.iconName; + } + if (iconNameWithPrefix && !emoji.isEmoji(iconNameWithPrefix)) { + allIcons.set(iconNameWithPrefix, true); + const icon = yield getMissingIcon(iconNameWithPrefix); + if (icon) { + missingIcons.add(icon); + } + } + } + // Show notice that background check is running. + if (missingIcons.size !== 0) { + new obsidian.Notice(`[${config.PLUGIN_NAME}] Background Check: found missing icons. Adding missing icons...`, 10000); + } + // Iterates over all the missing icons with its path and adds the icon to the node. + for (const icon of missingIcons) { + const normalizedName = getNormalizedName(icon.prefix + icon.name); + const nodesWithIcon = document.querySelectorAll(`[${config.ICON_ATTRIBUTE_NAME}="${normalizedName}"]`); + nodesWithIcon.forEach((node) => { + dom.setIconForNode(plugin, normalizedName, node); + }); + } + // Show notice that background check was finished. + if (missingIcons.size !== 0) { + new obsidian.Notice(`[${config.PLUGIN_NAME}] Background Check: added missing icons`, 10000); + } + // Remove all icon files that can not be found in the data. + for (const iconPack of getAllIconPacks()) { + // Checks if the icon pack exists. + const doesIconPackExist = yield plugin.app.vault.adapter.exists(`${getPath()}/${iconPack.name}`); + if (!doesIconPackExist) { + continue; + } + const iconFiles = yield plugin.app.vault.adapter.list(`${getPath()}/${iconPack.name}`); + for (const iconFilePath of iconFiles.files) { + const iconNameWithExtension = iconFilePath.split('/').pop(); + // Removes the file extension. + const iconName = iconNameWithExtension === null || iconNameWithExtension === void 0 ? void 0 : iconNameWithExtension.substring(0, iconNameWithExtension.length - 4); + const iconNameWithPrefix = iconPack.prefix + iconName; + const doesIconExist = allIcons.get(iconNameWithPrefix); + if (!doesIconExist) { + const path = `${getPath()}/${iconPack.name}/${iconName}.svg`; + const doesPathExist = yield plugin.app.vault.adapter.exists(path); + if (doesPathExist) { + logger.info(`Removing icon with path '${path}' because it is not used anymore`); + // Removes the icon file. + yield plugin.app.vault.adapter.remove(`${getPath()}/${iconPack.name}/${iconName}.svg`); + } + } + } + } +}); +/** + * This function adds all the possible icons to the corresponding nodes. It + * adds the icons, that are defined in the data as a basic string to the nodes + * and the custom rule icons. + * @param plugin Instance of IconizePlugin. + * @param data Data that will be used to add all the icons to the nodes. + * @param registeredFileExplorers A WeakSet of file explorers that are being used as a + * cache for already handled file explorers. + * @param callback Callback is being called whenever the icons are added to one file + * explorer. + */ +const addAll = (plugin, data, registeredFileExplorers, callback) => { + const fileExplorers = plugin.app.workspace.getLeavesOfType('file-explorer'); + for (const fileExplorer of fileExplorers) { + if (registeredFileExplorers.has(fileExplorer.view)) { + continue; + } + registeredFileExplorers.add(fileExplorer.view); + // Adds icons to already open file tabs. + if (plugin.getSettings().iconInTabsEnabled) { + for (const leaf of plugin.app.workspace.getLeavesOfType('markdown')) { + const file = leaf.view.file; + if (file) { + const tabHeaderLeaf = leaf; + const iconColor = plugin.getIconColor(file.path); + iconTabs.add(plugin, file, tabHeaderLeaf.tabHeaderInnerIconEl, { + iconColor, + }); + } + } + } + for (const [dataPath, value] of data) { + const fileItem = fileExplorer.view.fileItems[dataPath]; + if (fileItem) { + const titleEl = getFileItemTitleEl(fileItem); + const titleInnerEl = getFileItemInnerTitleEl(fileItem); + // Need to check this because refreshing the plugin will duplicate all the icons. + if (titleEl.children.length === 2 || titleEl.children.length === 1) { + const iconName = typeof value === 'string' ? value : value.iconName; + const iconColor = typeof value === 'string' ? undefined : value.iconColor; + if (iconName) { + // Removes a possible existing icon. + const existingIcon = titleEl.querySelector('.iconize-icon'); + if (existingIcon) { + existingIcon.remove(); + } + // Creates the new node with the icon inside. + const iconNode = titleEl.createDiv(); + iconNode.setAttribute(config.ICON_ATTRIBUTE_NAME, iconName); + iconNode.classList.add('iconize-icon'); + IconCache.getInstance().set(dataPath, { + iconNameWithPrefix: iconName, + }); + dom.setIconForNode(plugin, iconName, iconNode, iconColor); + titleEl.insertBefore(iconNode, titleInnerEl); + } + } + } + } + // Callback function to register other events to this file explorer. + callback === null || callback === void 0 ? void 0 : callback(); + } + // Handles the custom rules. + for (const rule of customRule.getSortedRules(plugin)) { + customRule.addToAllFiles(plugin, rule); + } +}; +/** + * Gets the icon of a given path. This function returns the first occurrence of an icon. + * @param plugin Instance of the IconizePlugin. + * @param path Path to get the icon of. + * @returns The icon of the path if it exists, undefined otherwise. + */ +const getByPath = (plugin, path) => { + if (path === 'settings' || path === 'migrated') { + return undefined; + } + const value = plugin.getData()[path]; + if (typeof value === 'string') { + // If the value is a plain icon name, return it. + return value; + } + else if (typeof value === 'object') { + const v = value; + if (v.iconName !== null) { + return v.iconName; + } + } + // Tries to get the custom rule for the path and returns its icon if it exists. + const rule = customRule.getSortedRules(plugin).find((rule) => { + return customRule.doesMatchPath(rule, path); + }); + if (rule) { + return rule.icon; + } + return undefined; +}; +/** + * Gets all the icons with their paths as an object. + * @param plugin Instance of the IconizePlugin. + * @returns An object that consists of the path and the icon name for the data + * or custom rule. + */ +const getAllWithPath = (plugin) => { + const result = []; + Object.keys(plugin.getData()).forEach((path) => { + if (path === 'settings' || path === 'migrated') { + return; + } + const icon = getByPath(plugin, path); + if (icon && !emoji.isEmoji(icon)) { + result.push({ path, icon }); + } + }); + // Add all icons for the custom rules with the rule as the path. + for (const rule of plugin.getSettings().rules) { + if (!emoji.isEmoji(rule.icon)) { + result.push({ path: rule.rule, icon: rule.icon }); + } + } + return result; +}; +/** + * Returns the {@link Icon} for the given icon name. It is important, that the icon name + * contains the icon pack prefix. + * @param iconNameWithPrefix String that contains the icon pack prefix combined with the + * icon name. + * @returns Icon if it exists, `null` otherwise. + */ +const getIconByName = (iconNameWithPrefix) => { + const iconNextIdentifier = nextIdentifier(iconNameWithPrefix); + const iconName = iconNameWithPrefix.substring(iconNextIdentifier); + const iconPrefix = iconNameWithPrefix.substring(0, iconNextIdentifier); + const iconPackName = getIconPackNameByPrefix(iconPrefix); + const icon = getIconFromIconPack(iconPackName, iconPrefix, iconName); + if (!icon) { + return null; + } + return icon; +}; +/** + * Returns the {@link Icon} for the given path. + * @param plugin IconizePlugin instance. + * @param path String which is the path to get the icon of. + * @returns Icon or Emoji as string if it exists, `null` otherwise. + */ +const getIconByPath = (plugin, path) => { + const iconNameWithPrefix = getByPath(plugin, path); + if (!iconNameWithPrefix) { + return null; + } + if (emoji.isEmoji(iconNameWithPrefix)) { + return iconNameWithPrefix; + } + return getIconByName(iconNameWithPrefix); +}; +var icon = { + addAll, + getByPath, + getAllWithPath, + getIconByPath, + getIconByName, + checkMissingIcons, +}; + +class CustomIconPackSetting extends IconFolderSetting { + constructor(plugin, containerEl, refreshDisplay) { + super(plugin, containerEl); + this.refreshDisplay = refreshDisplay; + this.dragOverElement = document.createElement('div'); + this.dragOverElement.addClass('iconize-dragover-el'); + this.dragOverElement.style.display = 'hidden'; + this.dragOverElement.innerHTML = 'Drop to add icon.
'; + } + normalizeIconPackName(value) { + return value.toLowerCase().replace(/\s/g, '-'); + } + preventDefaults(event) { + event.preventDefault(); + event.stopPropagation(); + } + highlight(el) { + clearTimeout(this.closeTimer); + if (!this.dragTargetElement) { + el.appendChild(this.dragOverElement); + el.classList.add('iconize-dragover'); + this.dragTargetElement = el; + } + } + unhighlight(target, el) { + if (this.dragTargetElement && this.dragTargetElement !== target) { + this.dragTargetElement.removeChild(this.dragOverElement); + this.dragTargetElement.classList.remove('iconize-dragover'); + this.dragTargetElement = undefined; + } + clearTimeout(this.closeTimer); + this.closeTimer = setTimeout(() => { + if (this.dragTargetElement) { + el.removeChild(this.dragOverElement); + el.classList.remove('iconize-dragover'); + this.dragTargetElement = undefined; + } + }, 100); + } + display() { + new obsidian.Setting(this.containerEl) + .setName('Add custom icon pack') + .setDesc('Add a custom icon pack.') + .addText((text) => { + text.setPlaceholder('Your icon pack name'); + this.textComponent = text; + }) + .addButton((btn) => { + btn.setButtonText('Add icon pack'); + btn.onClick(() => __awaiter(this, void 0, void 0, function* () { + const name = this.textComponent.getValue(); + if (name.length === 0) { + return; + } + const normalizedName = this.normalizeIconPackName(this.textComponent.getValue()); + if (yield doesIconPackExist(this.plugin, normalizedName)) { + new obsidian.Notice('Icon pack already exists.'); + return; + } + yield createCustomIconPackDirectory(this.plugin, normalizedName); + this.textComponent.setValue(''); + this.refreshDisplay(); + new obsidian.Notice('Icon pack successfully created.'); + })); + }); + // Sorts lucide icon pack always to the top. + const iconPacks = [...getAllIconPacks()].sort((a, b) => { + if (a.name === LUCIDE_ICON_PACK_NAME) + return -1; + if (b.name === LUCIDE_ICON_PACK_NAME) + return 1; + return a.name.localeCompare(b.name); + }); + iconPacks.forEach((iconPack) => { + const isLucideIconPack = iconPack.name === LUCIDE_ICON_PACK_NAME; + const additionalLucideDescription = '(Native Pack has fewer icons but 100% Obsidian Sync support)'; + const iconPackSetting = new obsidian.Setting(this.containerEl) + .setName(`${iconPack.name} (${iconPack.prefix})`) + .setDesc(`Total icons: ${iconPack.icons.length}${isLucideIconPack ? ` ${additionalLucideDescription}` : ''}`); + // iconPackSetting.addButton((btn) => { + // btn.setIcon('broken-link'); + // btn.setTooltip('Try to fix icon pack'); + // btn.onClick(async () => { + // new Notice('Try to fix icon pack...'); + // getIconPack(iconPack.name).icons = []; + // const icons = await getFilesInDirectory(this.plugin, `${getPath()}/${iconPack.name}`); + // for (let i = 0; i < icons.length; i++) { + // const filePath = icons[i]; + // const fileName = filePath.split('/').pop(); + // const file = await this.plugin.app.vault.adapter.read(filePath); + // const iconContent = file + // .replace(/stroke="#fff"/g, 'stroke="currentColor"') + // .replace(/fill="#fff"/g, 'fill="currentColor"'); + // await this.plugin.app.vault.adapter.write(filePath, iconContent); + // await normalizeFileName(this.plugin, filePath); + // addIconToIconPack(iconPack.name, fileName, iconContent); + // } + // new Notice('...tried to fix icon pack'); + // // Refreshes the DOM. + // Object.entries(this.plugin.getData()).forEach(async ([k, v]) => { + // const doesPathExist = await this.plugin.app.vault.adapter.exists(k, true); + // if (doesPathExist && typeof v === 'string') { + // // dom.removeIconInPath(k); + // dom.createIconNode(this.plugin, k, v); + // } + // }); + // }); + // }); + if (isLucideIconPack) { + iconPackSetting.addDropdown((dropdown) => { + dropdown.addOptions({ + native: 'Native', + custom: 'Custom', + none: 'None', + }); + dropdown.setValue(this.plugin.getSettings().lucideIconPackType); + dropdown.onChange((value) => __awaiter(this, void 0, void 0, function* () { + dropdown.setDisabled(true); + new obsidian.Notice('Changing icon packs...'); + this.plugin.getSettings().lucideIconPackType = value; + yield this.plugin.saveIconFolderData(); + if (value === 'native' || value === 'none') { + yield removeCustomLucideIconPack(this.plugin); + addLucideIconsPack(this.plugin); + } + else { + yield addCustomLucideIconPack(this.plugin); + yield icon.checkMissingIcons(this.plugin, Object.entries(this.plugin.getData())); + } + dropdown.setDisabled(false); + new obsidian.Notice('Done. This change requires a restart of Obsidian'); + })); + }); + return; + } + iconPackSetting.addButton((btn) => { + btn.setIcon('plus'); + btn.setTooltip('Add an icon'); + btn.onClick(() => __awaiter(this, void 0, void 0, function* () { + const fileSelector = document.createElement('input'); + fileSelector.setAttribute('type', 'file'); + fileSelector.setAttribute('multiple', 'multiple'); + fileSelector.setAttribute('accept', '.svg'); + fileSelector.click(); + fileSelector.onchange = (e) => __awaiter(this, void 0, void 0, function* () { + const target = e.target; + for (let i = 0; i < target.files.length; i++) { + const file = target.files[i]; + const content = yield readFileSync(file); + yield createFile(this.plugin, iconPack.name, file.name, content); + addIconToIconPack(iconPack.name, file.name, content); + iconPackSetting.setDesc(`Total icons: ${iconPack.icons.length} (added: ${file.name})`); + } + new obsidian.Notice('Icons successfully added.'); + }); + })); + }); + iconPackSetting.addButton((btn) => { + btn.setIcon('trash'); + btn.setTooltip('Remove the icon pack'); + btn.onClick(() => __awaiter(this, void 0, void 0, function* () { + yield deleteIconPack(this.plugin, iconPack.name); + this.refreshDisplay(); + new obsidian.Notice('Icon pack successfully deleted.'); + })); + }); + ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((event) => { + iconPackSetting.settingEl.addEventListener(event, this.preventDefaults, false); + }); + ['dragenter', 'dragover'].forEach((event) => { + iconPackSetting.settingEl.addEventListener(event, () => this.highlight(iconPackSetting.settingEl), false); + }); + ['dragleave', 'drop'].forEach((event) => { + iconPackSetting.settingEl.addEventListener(event, (event) => this.unhighlight(event.currentTarget, iconPackSetting.settingEl), false); + }); + iconPackSetting.settingEl.addEventListener('drop', (event) => __awaiter(this, void 0, void 0, function* () { + const files = event.dataTransfer.files; + let successful = false; + for (let i = 0; i < files.length; i++) { + const file = files[i]; + if (file.type !== 'image/svg+xml') { + new obsidian.Notice(`File ${file.name} is not a SVG file.`); + continue; + } + successful = true; + const content = yield readFileSync(file); + yield createFile(this.plugin, iconPack.name, file.name, content); + addIconToIconPack(iconPack.name, file.name, content); + iconPackSetting.setDesc(`Total icons: ${iconPack.icons.length} (added: ${file.name})`); + } + if (successful) { + new obsidian.Notice('Icons successfully added.'); + } + }), false); + }); + } +} + +class CustomIconRuleSetting extends IconFolderSetting { + constructor(plugin, containerEl, app, refreshDisplay) { + super(plugin, containerEl); + this.app = app; + this.refreshDisplay = refreshDisplay; + } + /** + * Updates all the open files based on the custom rule that was specified. + * @param rule Rule that will be used to update all the icons for all opened files. + * @param remove Whether to remove the icons that are applicable to the rule or not. + */ + updateIconTabs(rule_1, remove_1) { + return __awaiter(this, arguments, void 0, function* (rule, remove, cachedPaths = []) { + if (this.plugin.getSettings().iconInTabsEnabled) { + for (const openedFile of getAllOpenedFiles(this.plugin)) { + if (cachedPaths.includes(openedFile.path)) { + continue; + } + const applicable = yield customRule.isApplicable(this.plugin, rule, openedFile); + if (!applicable) { + continue; + } + const leaf = openedFile.leaf; + if (remove) { + iconTabs.remove(leaf.tabHeaderInnerIconEl, { + replaceWithDefaultIcon: true, + }); + } + else { + iconTabs.add(this.plugin, openedFile, leaf.tabHeaderInnerIconEl, { + iconName: rule.icon, + iconColor: rule.color, + }); + } + } + } + }); + } + createDescriptionEl(container, text) { + const description = container.createEl('p', { + text, + cls: 'setting-item-description', + }); + description.style.marginBottom = 'var(--size-2-2)'; } display() { new obsidian.Setting(this.containerEl) @@ -4232,9 +4557,32 @@ const calculateHeaderSize = (header) => { var _a; const fontSize = calculateFontTextSize(); const htmlHeader = (_a = getHTMLHeaderByToken(header)) !== null && _a !== void 0 ? _a : header; - const headerSize = parseFloat(getComputedStyle(document.body).getPropertyValue(`--${htmlHeader}-size`)); + const headerComputedStyle = getComputedStyle(document.body).getPropertyValue(`--${htmlHeader}-size`); + let headerSize = parseFloat(headerComputedStyle); + if (isPx(headerComputedStyle)) { + headerSize = pxToRem(headerSize, fontSize); + } + // If there is some `calc` operation going on, it has to be evaluated. + if (headerComputedStyle.includes('calc')) { + const temp = document.createElement('div'); + temp.style.setProperty('font-size', `var(--${htmlHeader}-size)`); + document.body.appendChild(temp); + const computedStyle = window.getComputedStyle(temp); + const computedValue = computedStyle.getPropertyValue('font-size'); + headerSize = parseFloat(computedValue); + if (isPx(computedValue)) { + headerSize = pxToRem(headerSize, fontSize); + } + document.body.removeChild(temp); + } return fontSize * headerSize; }; +const pxToRem = (px, baseSize = 16) => { + return px / baseSize; +}; +const isPx = (value) => { + return /^-?\d+(\.\d+)?px$/.test(value); +}; class EmojiStyleSetting extends IconFolderSetting { display() { @@ -4375,487 +4723,229 @@ class ResetButtonComponent extends obsidian.ButtonComponent { this.setIcon('rotate-ccw'); this.render(); } - render() { - this.buttonEl.classList.add('clickable-icon'); - this.buttonEl.classList.add('extra-setting-button'); - } -} - -const DEFAULT_VALUE = DEFAULT_SETTINGS.iconColor; -class IconColorSetting extends IconFolderSetting { - display() { - var _a; - const setting = new obsidian.Setting(this.containerEl) - .setName('Icon color') - .setDesc('Change the color of the displayed icons.'); - new ResetButtonComponent(setting.controlEl).onClick(() => __awaiter(this, void 0, void 0, function* () { - colorPicker.setValue(DEFAULT_VALUE); - this.plugin.getSettings().iconColor = null; - // Custom saving to not save the color black in the data. - yield this.plugin.saveIconFolderData(); - helper.refreshStyleOfIcons(this.plugin); - })); - const colorPicker = new obsidian.ColorComponent(setting.controlEl) - .setValue((_a = this.plugin.getSettings().iconColor) !== null && _a !== void 0 ? _a : DEFAULT_VALUE) - .onChange((value) => __awaiter(this, void 0, void 0, function* () { - this.plugin.getSettings().iconColor = value; - yield this.plugin.saveIconFolderData(); - helper.refreshStyleOfIcons(this.plugin); - })); - } -} - -const values = { - min: 10, - max: 64, - default: DEFAULT_SETTINGS.fontSize, - step: 1, -}; -class IconFontSizeSetting extends IconFolderSetting { - display() { - const setting = new obsidian.Setting(this.containerEl) - .setName('Icon font size (in pixels)') - .setDesc('Change the font size of the displayed icons.'); - new ResetButtonComponent(setting.controlEl).onClick(() => { - this.slider.setValue(values.default); - }); - setting.addSlider((slider) => { - var _a; - this.slider = slider; - slider - .setLimits(values.min, values.max, values.step) - .setDynamicTooltip() - .setValue((_a = this.plugin.getSettings().fontSize) !== null && _a !== void 0 ? _a : DEFAULT_SETTINGS.fontSize) - .onChange((val) => __awaiter(this, void 0, void 0, function* () { - this.plugin.getSettings().fontSize = val; - yield this.plugin.saveIconFolderData(); - helper.refreshStyleOfIcons(this.plugin); - })); - }); - } -} - -class IconPacksPathSetting extends IconFolderSetting { - display() { - const iconPacksPathSetting = new obsidian.Setting(this.containerEl) - .setName('Icon packs folder path') - .setDesc('Change the default icon packs folder path.'); - iconPacksPathSetting.addText((text) => { - this.iconPacksSettingTextComp = text; - text.setValue(this.plugin.getSettings().iconPacksPath); - }); - iconPacksPathSetting.addButton((btn) => { - btn.setButtonText('Save'); - btn.onClick(() => __awaiter(this, void 0, void 0, function* () { - const newPath = this.iconPacksSettingTextComp.getValue(); - const oldPath = this.plugin.getSettings().iconPacksPath; - if (oldPath === this.iconPacksSettingTextComp.getValue()) { - return; - } - new obsidian.Notice('Saving in progress...'); - setPath(newPath); - yield createDefaultDirectory(this.plugin); - yield moveIconPackDirectories(this.plugin, oldPath, newPath); - this.plugin.getSettings().iconPacksPath = newPath; - yield this.plugin.saveIconFolderData(); - new obsidian.Notice('...saved successfully'); - })); - }); - } -} - -class IconPacksBackgroundChecker extends IconFolderSetting { - display() { - new obsidian.Setting(this.containerEl) - .setName('Icons background check') - .setDesc('Check in the background on every load of Obsidian, if icons are missing and it will try to add them to the specific icon pack.') - .addToggle((toggle) => { - toggle - .setValue(this.plugin.getSettings().iconsBackgroundCheckEnabled) - .onChange((enabled) => __awaiter(this, void 0, void 0, function* () { - this.plugin.getSettings().iconsBackgroundCheckEnabled = enabled; - yield this.plugin.saveIconFolderData(); - if (enabled) { - new obsidian.Notice('You need to reload Obsidian for this to take effect.', 10000); - } - })); - }); - } -} - -class IconPackBrowserModal extends obsidian.FuzzySuggestModal { - constructor(app, plugin) { - super(app); - this.plugin = plugin; - this.resultContainerEl.classList.add('iconize-browse-modal'); - this.inputEl.placeholder = 'Select to download icon pack'; - } - // eslint-disable-next-line - onAddedIconPack() { } - onOpen() { - super.onOpen(); - } - onClose() { - this.contentEl.empty(); - } - getItemText(item) { - const prefix = createIconPackPrefix(item.name); - return `${item.displayName} (${prefix})`; - } - getItems() { - const predefinedIconPacks = Object.values(iconPacks$1); - const allIconPacks = getAllIconPacks(); - return predefinedIconPacks.filter((iconPack) => allIconPacks.find((ip) => iconPack.name === ip.name) === undefined); - } - onChooseItem(item, _event) { - return __awaiter(this, void 0, void 0, function* () { - new obsidian.Notice(`Adding ${item.displayName}...`); - const arrayBuffer = yield downloadZipFile(item.downloadLink); - yield createZipFile(this.plugin, `${item.name}.zip`, arrayBuffer); - yield registerIconPack(item.name, arrayBuffer); - new obsidian.Notice(`...${item.displayName} added`); - this.onAddedIconPack(); - }); - } - renderSuggestion(item, el) { - super.renderSuggestion(item, el); - el.innerHTML = `| Type | " + + + "" + this.type + " |
| Online Rating | " + + + "" + this.onlineRating + " |
| Duration | " + + + "" + this.duration + " |
| Premiered | " + + + "" + this.premiere + " |
| Producer | " + + + "" + this.producer + " |
| Type | " + + + "" + this.type + " |
| Online Rating | " + + + "" + this.onlineRating + " |
| Duration | " + + + "" + this.duration + " |
| Premiered | " + + + "" + this.premiere + " |
| Producer | " + + + "" + this.producer + " |