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.path); + if (!applicable) { + continue; + } + const leaf = openedFile.leaf; + if (remove) { + iconTabs.remove(leaf.tabHeaderInnerIconEl, { + replaceWithDefaultIcon: true, + }); + } + else { + iconTabs.add(this.plugin, openedFile.path, 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 _a; + const isFor = (_a = rule.for) !== null && _a !== void 0 ? _a : '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'; + const inlineTitlePaddingTop = getComputedStyle(inlineTitleEl, null).getPropertyValue('padding-top'); + titleIcon.style.paddingTop = inlineTitlePaddingTop; + 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, +}; + +// Cache for font size +let cachedFontSize = null; +let fontSizeCacheTime = 0; +const calculateFontTextSize = () => { + var _a; + // get cached font size if available + const now = Date.now(); + if (cachedFontSize !== null && now - fontSizeCacheTime < 2000) { + return cachedFontSize; + } + 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); + } + // set font size cache + cachedFontSize = fontSize; + fontSizeCacheTime = now; + return fontSize; +}; +const calculateInlineTitleSize = () => { + const fontSize = calculateFontTextSize(); + const inlineTitleSizeValue = getComputedStyle(document.body).getPropertyValue('--inline-title-size'); + const unit = inlineTitleSizeValue.replace(/[\d.]/g, ''); + let inlineTitleSize = parseFloat(inlineTitleSizeValue); + if (unit === 'px') { + inlineTitleSize /= 16; + } + return fontSize * inlineTitleSize; +}; +const isHeader = (value) => { + return /^h[1-6]$/.test(value); +}; +const getHTMLHeaderByToken = (header) => { + for (let i = 1; i <= 6; i++) { + if (header === `header-${i}`) { + return `h${i}`; + } + } + return null; +}; +const calculateHeaderSize = (header) => { + var _a; + const fontSize = calculateFontTextSize(); + const htmlHeader = (_a = getHTMLHeaderByToken(header)) !== null && _a !== void 0 ? _a : header; + 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() { + 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 IconizePlugin. + */ +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 ResetButtonComponent extends obsidian.ButtonComponent { + constructor(contentEl) { + super(contentEl); + this.contentEl = contentEl; + this.setTooltip('Restore default'); + 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 = `