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.'); - })); - }); - 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); - // } - // }); - // }); - // }); - 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 IconFolderPlugin 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 IconFolderPlugin 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; - } - const value = iconData[1]; - if (typeof value !== 'string' && typeof value !== 'object') { - return; - } - let iconName; - if (typeof value === 'object') { - const v = value; - if (v.iconName === null) { - return; - } - iconName = v.iconName; - } - else { - iconName = value; - } - dom.setIconForNode(plugin, iconName, iconContainer, iconColor); - // TODO: Refactor to include option to `insertIconToNode` function. - iconContainer.style.margin = null; -}); -/** - * Updates the icon in the tab and container by setting calling the `setIconForNode` - * function and removing the margin from the icon container. - * @param plugin IconFolderPlugin instance. - * @param iconName String of the icon name to update to. - * @param iconContainer HTMLElement where the icon is located and will be updated. - */ -const update = (plugin, iconName, iconContainer) => { - dom.setIconForNode(plugin, iconName, iconContainer); - // TODO: Refactor to include option to `insertIconToNode` function. - iconContainer.style.margin = null; -}; -/** - * Removes the icon from the tab and container by setting the `display` style property - * to `none`. Optionally, the icon can be replaced with the default obsidian icon. - * @param iconContainer HTMLElement where the icon is located and will be removed from. - * @param options RemoveOptions for the remove function which can optionally be used. - */ -const remove$1 = (iconContainer, options) => { - if (!(options === null || options === void 0 ? void 0 : options.replaceWithDefaultIcon)) { - // Removes the display of the icon container to remove the icons from the tabs. - iconContainer.style.display = 'none'; - } - else { - iconContainer.innerHTML = DEFAULT_FILE_ICON; - } -}; -var iconTabs = { - add: add$1, - update, - remove: remove$1, - 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, - }); - } - } - } - }); - } - 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) - .setName('Add icon rule') - .setDesc('Will add the icon based on the defined rule (as a plain string or in regex format).') - .addText((text) => { - text.onChange((value) => { - this.chooseIconBtn.setDisabled(value.length === 0); - this.chooseIconBtn.buttonEl.style.cursor = - value.length === 0 ? 'not-allowed' : 'default'; - this.chooseIconBtn.buttonEl.style.opacity = - value.length === 0 ? '50%' : '100%'; - }); - text.setPlaceholder('regex or simple string'); - this.textComponent = text; - }) - .addButton((btn) => { - btn.setDisabled(true); - btn.setButtonText('Choose icon'); - btn.onClick(() => __awaiter(this, void 0, void 0, function* () { - if (this.textComponent.getValue().length === 0) { - return; - } - const modal = new IconsPickerModal(this.app, this.plugin, ''); - modal.onChooseItem = (item) => __awaiter(this, void 0, void 0, function* () { - const icon = getNormalizedName(typeof item === 'object' ? item.displayName : item); - const rule = { - rule: this.textComponent.getValue(), - icon, - for: 'everything', - order: this.plugin.getSettings().rules.length, - }; - this.plugin.getSettings().rules = [ - ...this.plugin.getSettings().rules, - rule, - ]; - yield this.plugin.saveIconFolderData(); - this.refreshDisplay(); - new obsidian.Notice('Icon rule added.'); - this.textComponent.setValue(''); - saveIconToIconPack(this.plugin, rule.icon); - yield customRule.addToAllFiles(this.plugin, rule); - this.updateIconTabs(rule, false); - }); - modal.open(); - })); - this.chooseIconBtn = btn; - }); - this.plugin.getSettings().rules.forEach((rule) => { - // Keeping track of the old rule so that we can get a reference to it for old values. - const oldRule = Object.assign({}, rule); - const settingRuleEl = new obsidian.Setting(this.containerEl) - .setName(rule.rule) - .setDesc(`Icon: ${rule.icon}`); - const currentOrder = rule.order; - /** - * Re-orders the custom rule based on the value that is passed in. - * @param valueForReorder Number that will be used to determine whether to swap the - * custom rule with the next rule or the previous rule. - */ - const orderCustomRules = (valueForReorder) => __awaiter(this, void 0, void 0, function* () { - const otherRule = this.plugin.getSettings().rules[currentOrder + valueForReorder]; - // Swap the current rule with the next rule. - otherRule.order = otherRule.order - valueForReorder; - rule.order = currentOrder + valueForReorder; - // Refreshes the DOM. - yield customRule.removeFromAllFiles(this.plugin, oldRule); - yield this.plugin.saveIconFolderData(); - const addedPaths = []; - for (const fileExplorer of this.plugin.getRegisteredFileExplorers()) { - const files = Object.values(fileExplorer.fileItems); - for (const rule of customRule.getSortedRules(this.plugin)) { - // Removes the icon tabs from all opened files. - this.updateIconTabs(rule, true, addedPaths); - // Adds the icon tabs to all opened files. - this.updateIconTabs(rule, false, addedPaths); - for (const fileItem of files) { - if (addedPaths.includes(fileItem.file.path)) { - continue; - } - const added = yield customRule.add(this.plugin, rule, fileItem.file, getFileItemTitleEl(fileItem)); - if (added) { - addedPaths.push(fileItem.file.path); - } - } - } - } - this.refreshDisplay(); - }); - // Add the move down custom rule button to re-order the custom rule. - settingRuleEl.addExtraButton((btn) => { - const isFirstOrder = currentOrder === 0; - btn.setDisabled(isFirstOrder); - btn.extraSettingsEl.style.cursor = isFirstOrder - ? 'not-allowed' - : 'default'; - btn.extraSettingsEl.style.opacity = isFirstOrder ? '50%' : '100%'; - btn.setIcon('arrow-up'); - btn.setTooltip('Prioritize the custom rule'); - btn.onClick(() => __awaiter(this, void 0, void 0, function* () { - yield orderCustomRules(-1); - })); - }); - // Add the move up custom rule button to re-order the custom rule. - settingRuleEl.addExtraButton((btn) => { - const isLastOrder = currentOrder === this.plugin.getSettings().rules.length - 1; - btn.setDisabled(isLastOrder); - btn.extraSettingsEl.style.cursor = isLastOrder - ? 'not-allowed' - : 'default'; - btn.extraSettingsEl.style.opacity = isLastOrder ? '50%' : '100%'; - btn.setIcon('arrow-down'); - btn.setTooltip('Deprioritize the custom rule'); - btn.onClick(() => __awaiter(this, void 0, void 0, function* () { - yield orderCustomRules(1); - })); - }); - // Add the edit custom rule button. - settingRuleEl.addButton((btn) => { - btn.setIcon('pencil'); - btn.setTooltip('Edit the custom rule'); - btn.onClick(() => { - var _a, _b; - // Create modal and its children elements. - const modal = new obsidian.Modal(this.plugin.app); - modal.contentEl.style.display = 'block'; - modal.modalEl.classList.add('iconize-custom-modal'); - modal.titleEl.setText('Edit custom rule'); - // Create the input for the rule. - this.createDescriptionEl(modal.contentEl, 'Regex or simple string'); - const input = new obsidian.TextComponent(modal.contentEl); - input.setValue(rule.rule); - input.onChange((value) => __awaiter(this, void 0, void 0, function* () { - rule.rule = value; - })); - const useFilePathContainer = modal.contentEl.createDiv(); - useFilePathContainer.style.display = 'flex'; - useFilePathContainer.style.alignItems = 'center'; - useFilePathContainer.style.justifyContent = 'space-between'; - useFilePathContainer.style.marginTop = 'var(--size-4-5)'; - const useFilePathDescription = useFilePathContainer.createEl('p', { - text: 'Include folders and files that are part of the path.', - cls: 'setting-item-description', - }); - useFilePathDescription.style.margin = '0'; - useFilePathDescription.style.marginBottom = 'var(--size-2-2)'; - new obsidian.ToggleComponent(useFilePathContainer) - .setValue(rule.useFilePath === true) - .onChange((value) => { - rule.useFilePath = value; - }); - // Create the toggle for changing the rule type. - const ruleTypeContainer = modal.contentEl.createDiv(); - ruleTypeContainer.style.display = 'flex'; - ruleTypeContainer.style.alignItems = 'center'; - ruleTypeContainer.style.justifyContent = 'space-between'; - ruleTypeContainer.style.marginTop = 'var(--size-4-5)'; - const ruleTypeDescription = ruleTypeContainer.createEl('p', { - text: 'Where the custom rule gets applied to.', - cls: 'setting-item-description', - }); - ruleTypeDescription.style.margin = '0'; - ruleTypeDescription.style.marginBottom = 'var(--size-2-2)'; - const ruleTypeButton = new obsidian.ButtonComponent(ruleTypeContainer); - const setButtonContent = (isFor) => { - if (isFor === 'folders') { - ruleTypeButton.setIcon('folder'); - } - else if (isFor === 'files') { - ruleTypeButton.setIcon('document'); - } - else { - ruleTypeButton.setIcon('documents'); - } - ruleTypeButton.setTooltip(`Icon applicable to: ${isFor}`); - }; - setButtonContent((_a = rule.for) !== null && _a !== void 0 ? _a : 'everything'); - ruleTypeButton.onClick(() => __awaiter(this, void 0, void 0, function* () { - var _c; - const isFor = (_c = rule.for) !== null && _c !== void 0 ? _c : 'everything'; - this.updateIconTabs(rule, true); - yield customRule.removeFromAllFiles(this.plugin, Object.assign(Object.assign({}, rule), { for: isFor })); - if (isFor === 'folders') { - rule.for = 'everything'; - } - else if (isFor === 'files') { - rule.for = 'folders'; - } - else { - rule.for = 'files'; - } - setButtonContent(rule.for); - })); - // Create the change icon button with icon preview. - this.createDescriptionEl(modal.contentEl, 'Custom rule icon'); - const iconContainer = modal.contentEl.createDiv(); - iconContainer.style.display = 'flex'; - iconContainer.style.alignItems = 'center'; - iconContainer.style.justifyContent = 'space-between'; - const iconEl = iconContainer.createDiv(); - const iconPreviewEl = iconEl.createDiv(); - dom.setIconForNode(this.plugin, rule.icon, iconPreviewEl); - iconEl.style.display = 'flex'; - iconEl.style.alignItems = 'center'; - iconEl.style.justifyContent = 'space-between'; - iconEl.style.margin = null; - iconPreviewEl.innerHTML = svg.setFontSize(iconPreviewEl.innerHTML, 20); - const iconNameEl = iconEl.createEl('div', { - cls: 'setting-item-description', - }); - iconNameEl.style.paddingTop = '0'; - iconNameEl.style.marginLeft = 'var(--size-2-2)'; - iconNameEl.innerText = rule.icon; - const changeIconBtn = new obsidian.ButtonComponent(iconContainer); - changeIconBtn.setButtonText('Change icon'); - changeIconBtn.onClick(() => __awaiter(this, void 0, void 0, function* () { - const modal = new IconsPickerModal(this.app, this.plugin, rule.icon); - modal.onChooseItem = (item) => __awaiter(this, void 0, void 0, function* () { - const icon = typeof item === 'object' ? item.displayName : item; - rule.icon = icon; - dom.setIconForNode(this.plugin, rule.icon, iconPreviewEl); - iconPreviewEl.innerHTML = svg.setFontSize(iconPreviewEl.innerHTML, 20); - iconNameEl.innerText = getNormalizedName(rule.icon); - }); - modal.open(); - })); - // Create the color picker for the rule. - this.createDescriptionEl(modal.contentEl, 'Color of the icon'); - const colorContainer = modal.contentEl.createDiv(); - colorContainer.style.display = 'flex'; - colorContainer.style.alignItems = 'center'; - colorContainer.style.justifyContent = 'space-between'; - const colorPicker = new obsidian.ColorComponent(colorContainer) - .setValue((_b = rule.color) !== null && _b !== void 0 ? _b : '#000000') - .onChange((value) => { - rule.color = value; - }); - const defaultColorButton = new obsidian.ButtonComponent(colorContainer); - defaultColorButton.setTooltip('Set color to the default one'); - defaultColorButton.setButtonText('Default'); - defaultColorButton.onClick(() => { - colorPicker.setValue('#000000'); - rule.color = undefined; - }); - // Create the save button. - const button = new obsidian.ButtonComponent(modal.contentEl); - button.buttonEl.style.marginTop = 'var(--size-4-4)'; - button.buttonEl.style.float = 'right'; - button.setButtonText('Save Changes'); - button.onClick(() => __awaiter(this, void 0, void 0, function* () { - if (!emoji.isEmoji(oldRule.icon)) { - // Tries to remove the previously used icon from the icon pack. - removeIconFromIconPack(this.plugin, oldRule.icon); - } - if (!emoji.isEmoji(rule.icon)) { - // Tries to add the newly used icon to the icon pack. - saveIconToIconPack(this.plugin, rule.icon); - rule.icon = getNormalizedName(rule.icon); - } - this.refreshDisplay(); - new obsidian.Notice('Custom rule updated.'); - // Refresh the DOM. - yield customRule.removeFromAllFiles(this.plugin, oldRule); - this.updateIconTabs(rule, true); - this.plugin.getSettings().rules.forEach((rule) => __awaiter(this, void 0, void 0, function* () { - yield customRule.addToAllFiles(this.plugin, rule); - this.updateIconTabs(rule, false); - })); - yield this.plugin.saveIconFolderData(); - modal.close(); - })); - modal.open(); - }); - }); - // Add the delete custom rule button. - settingRuleEl.addButton((btn) => { - btn.setIcon('trash'); - btn.setTooltip('Remove the custom rule'); - btn.onClick(() => __awaiter(this, void 0, void 0, function* () { - const newRules = this.plugin - .getSettings() - .rules.filter((r) => rule.rule !== r.rule || - rule.color !== r.color || - rule.icon !== r.icon || - rule.for !== r.for); - this.plugin.getSettings().rules = newRules; - yield this.plugin.saveIconFolderData(); - this.refreshDisplay(); - new obsidian.Notice('Custom rule deleted.'); - yield customRule.removeFromAllFiles(this.plugin, rule); - removeIconFromIconPack(this.plugin, rule.icon); - this.updateIconTabs(rule, true); - const previousRules = this.plugin - .getSettings() - .rules.filter((r) => rule.for === r.for); - previousRules.forEach((previousRule) => __awaiter(this, void 0, void 0, function* () { - yield customRule.addToAllFiles(this.plugin, previousRule); - this.updateIconTabs(previousRule, false); - })); - })); - }); - }); - } -} - -const getTitleIcon = (leaf) => { - return leaf.querySelector(`.${config.TITLE_ICON_CLASS}`); -}; -const add = (plugin, inlineTitleEl, svgElement, options) => { - var _a; - if (!inlineTitleEl.parentElement) { - return; - } - if (options === null || options === void 0 ? void 0 : options.fontSize) { - svgElement = svg.setFontSize(svgElement, options.fontSize); - } - let titleIcon = getTitleIcon(inlineTitleEl.parentElement); - if (!titleIcon) { - titleIcon = document.createElement('div'); - } - const isInline = plugin.getSettings().iconInTitlePosition === IconInTitlePosition.Inline; - if (isInline) { - titleIcon.style.display = 'inline-block'; - titleIcon.style.removeProperty('margin-inline'); - titleIcon.style.removeProperty('width'); - } - else { - titleIcon.style.display = 'block'; - titleIcon.style.width = 'var(--line-width)'; - titleIcon.style.marginInline = '0'; - } - titleIcon.classList.add(config.TITLE_ICON_CLASS); - // Checks if the passed element is an emoji. - if (emoji.isEmoji(svgElement) && options.fontSize) { - svgElement = - (_a = emoji.parseEmoji(plugin.getSettings().emojiStyle, svgElement, options.fontSize)) !== null && _a !== void 0 ? _a : svgElement; - titleIcon.style.fontSize = `${options.fontSize}px`; - } - titleIcon.innerHTML = svgElement; - let wrapperElement = inlineTitleEl.parentElement; - // Checks the parent and selects the correct wrapper element. - // This should only happen in the beginning. - if (wrapperElement && - !wrapperElement.classList.contains(config.INLINE_TITLE_WRAPPER_CLASS)) { - wrapperElement = wrapperElement.querySelector(`.${config.INLINE_TITLE_WRAPPER_CLASS}`); - } - // Whenever there is no correct wrapper element, we create one. - if (!wrapperElement) { - wrapperElement = inlineTitleEl.parentElement.createDiv(); - wrapperElement.classList.add(config.INLINE_TITLE_WRAPPER_CLASS); - } - // Avoiding adding the same nodes together when changing the title. - if (wrapperElement !== inlineTitleEl.parentElement) { - inlineTitleEl.parentElement.prepend(wrapperElement); - } - if (isInline) { - wrapperElement.style.display = 'flex'; - wrapperElement.style.alignItems = 'flex-start'; - if (emoji.isEmoji(svgElement)) { - titleIcon.style.transform = 'translateY(-9%)'; - } - else { - titleIcon.style.transform = 'translateY(9%)'; - } - } - else { - wrapperElement.style.display = 'block'; - titleIcon.style.transform = 'translateY(9%)'; - } - wrapperElement.append(titleIcon); - wrapperElement.append(inlineTitleEl); -}; -const updateStyle = (inlineTitleEl, options) => { - if (!inlineTitleEl.parentElement) { - return; - } - const titleIcon = getTitleIcon(inlineTitleEl.parentElement); - if (!titleIcon) { - return; - } - if (options.fontSize) { - if (!emoji.isEmoji(titleIcon.innerHTML)) { - titleIcon.innerHTML = svg.setFontSize(titleIcon.innerHTML, options.fontSize); - } - else { - titleIcon.style.fontSize = `${options.fontSize}px`; - } - } -}; -/** - * Hides the title icon from the provided HTMLElement. - * @param contentEl HTMLElement to hide the title icon from. - */ -const hide = (inlineTitleEl) => { - if (!inlineTitleEl.parentElement) { - return; - } - const titleIconContainer = getTitleIcon(inlineTitleEl.parentElement); - if (!titleIconContainer) { - return; - } - titleIconContainer.style.display = 'none'; -}; -const remove = (inlineTitleEl) => { - if (!inlineTitleEl.parentElement) { - return; - } - const titleIconContainer = getTitleIcon(inlineTitleEl.parentElement); - if (!titleIconContainer) { - return; - } - titleIconContainer.remove(); -}; -var titleIcon = { - add, - updateStyle, - hide, - remove, -}; - -const calculateFontTextSize = () => { - var _a; - let fontSize = parseFloat((_a = getComputedStyle(document.body).getPropertyValue('--font-text-size')) !== null && _a !== void 0 ? _a : '0'); - if (!fontSize) { - fontSize = parseFloat(getComputedStyle(document.documentElement).fontSize); - } - return fontSize; -}; -const calculateInlineTitleSize = () => { - const fontSize = calculateFontTextSize(); - const inlineTitleSize = parseFloat(getComputedStyle(document.body).getPropertyValue('--inline-title-size')); - return fontSize * inlineTitleSize; -}; -const isHeader = (value) => { - return /^h[1-6]$/.test(value); -}; -const calculateHeaderSize = (header) => { - const fontSize = calculateFontTextSize(); - const headerSize = parseFloat(getComputedStyle(document.body).getPropertyValue(`--${header}-size`)); - return fontSize * headerSize; -}; - -class EmojiStyleSetting extends IconFolderSetting { - display() { - const emojiStyle = new obsidian.Setting(this.containerEl) - .setName('Emoji style') - .setDesc('Change the style of your emojis.'); - emojiStyle.addDropdown((dropdown) => { - dropdown.addOption('native', 'Native'); - dropdown.addOption('twemoji', 'Twemoji'); - dropdown.setValue(this.plugin.getSettings().emojiStyle); - dropdown.onChange((value) => __awaiter(this, void 0, void 0, function* () { - this.plugin.getSettings().emojiStyle = value; - this.updateDOM(); - yield this.plugin.saveIconFolderData(); - })); - }); - } - updateDOM() { - for (const fileExplorer of this.plugin.getRegisteredFileExplorers()) { - const fileItems = Object.entries(fileExplorer.fileItems); - for (const [path, _] of fileItems) { - let iconName = this.plugin.getData()[path]; - if (!iconName) { - continue; - } - const data = this.plugin.getData()[path]; - if (typeof data === 'object') { - const data = this.plugin.getData()[path]; - if (data.iconName) { - iconName = data.iconName; - } - } - if (emoji.isEmoji(iconName)) { - dom.createIconNode(this.plugin, path, iconName); - if (this.plugin.getSettings().iconInTabsEnabled) { - const tabLeaves = iconTabs.getTabLeavesOfFilePath(this.plugin, path); - for (const tabLeaf of tabLeaves) { - iconTabs.update(this.plugin, iconName, tabLeaf.tabHeaderInnerIconEl); - } - } - if (this.plugin.getSettings().iconInTitleEnabled) { - for (const openedFile of getAllOpenedFiles(this.plugin)) { - const activeView = openedFile.leaf.view; - if (activeView instanceof obsidian.MarkdownView && - openedFile.path === path) { - titleIcon.add(this.plugin, activeView.inlineTitleEl, iconName, { - fontSize: calculateInlineTitleSize(), - }); - } - } - } - } - } - } - for (const rule of customRule.getSortedRules(this.plugin)) { - customRule.addToAllFiles(this.plugin, rule); - } - } -} - -/** - * Helper function that refreshes the style of all the icons that are defined - * or in a custom rule involved. - * @param plugin Instance of the IconFolderPlugin. - */ -const refreshStyleOfIcons = (plugin) => __awaiter(void 0, void 0, void 0, function* () { - // Refreshes the icon style for all normally added icons. - style.refreshIconNodes(plugin); - // Refreshes the icon style for all custom icon rules, when the color of the rule is - // not defined. - for (const rule of customRule.getSortedRules(plugin)) { - const fileItems = yield customRule.getFileItems(plugin, rule); - for (const fileItem of fileItems) { - const titleEl = getFileItemTitleEl(fileItem); - const iconNode = titleEl.querySelector('.iconize-icon'); - let iconContent = iconNode.innerHTML; - iconContent = style.applyAll(plugin, iconContent, iconNode); - if (rule.color) { - iconContent = svg.colorize(iconContent, rule.color); - iconNode.style.color = rule.color; - } - iconNode.innerHTML = iconContent; - } - } -}); -var helper = { - refreshStyleOfIcons, -}; - -class ExtraMarginSetting extends IconFolderSetting { - display() { - var _a, _b; - const extraMarginSetting = new obsidian.Setting(this.containerEl) - .setName('Extra margin (in pixels)') - .setDesc('Change the margin of the icons.') - .setClass('iconize-setting'); - const extraMarginDropdown = new obsidian.DropdownComponent(extraMarginSetting.controlEl).addOptions({ - top: 'Top', - right: 'Right', - bottom: 'Bottom', - left: 'Left', - }); - const extraMarginSlider = new obsidian.SliderComponent(extraMarginSetting.controlEl) - .setLimits(-24, 24, 1) - .setDynamicTooltip() - .setValue((_b = (_a = this.plugin.getSettings().extraMargin) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : 2) - .onChange((val) => __awaiter(this, void 0, void 0, function* () { - const dropdownValue = extraMarginDropdown.getValue(); - if (this.plugin.getSettings().extraMargin) { - this.plugin.getSettings().extraMargin[dropdownValue] = val; - } - else { - this.plugin.getSettings().extraMargin = { - [dropdownValue]: val, - }; - } - yield this.plugin.saveIconFolderData(); - helper.refreshStyleOfIcons(this.plugin); - })); - extraMarginDropdown.onChange((val) => { - var _a; - if (this.plugin.getSettings().extraMargin) { - extraMarginSlider.setValue((_a = this.plugin.getSettings().extraMargin[val]) !== null && _a !== void 0 ? _a : 2); - } - else { - extraMarginSlider.setValue(2); - } - }); - extraMarginSetting.components.push(extraMarginDropdown, extraMarginSlider); - } -} - -class IconColorSetting extends IconFolderSetting { - display() { - var _a; - const colorCustomization = new obsidian.Setting(this.containerEl) - .setName('Icon color') - .setDesc('Change the color of the displayed icons.'); - const colorPicker = new obsidian.ColorComponent(colorCustomization.controlEl) - .setValue((_a = this.plugin.getSettings().iconColor) !== null && _a !== void 0 ? _a : '#000000') - .onChange((value) => __awaiter(this, void 0, void 0, function* () { - this.plugin.getSettings().iconColor = value; - yield this.plugin.saveIconFolderData(); - helper.refreshStyleOfIcons(this.plugin); - })); - colorCustomization.addButton((button) => { - button - .setButtonText('Default') - .setTooltip('Set color to the default one') - .onClick(() => __awaiter(this, void 0, void 0, function* () { - colorPicker.setValue('#000000'); - this.plugin.getSettings().iconColor = null; - yield this.plugin.saveIconFolderData(); - helper.refreshStyleOfIcons(this.plugin); - })); - }); - colorCustomization.components.push(colorPicker); - } -} - -class IconFontSizeSetting extends IconFolderSetting { - display() { - new obsidian.Setting(this.containerEl) - .setName('Icon font size (in pixels)') - .setDesc('Change the font size of the displayed icons.') - .addSlider((slider) => { - var _a; - slider - .setLimits(10, 24, 1) - .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 = `