Skip to content

Commit

Permalink
feat: Adds setting to use CSS snippet to manage custom callouts
Browse files Browse the repository at this point in the history
  • Loading branch information
@valentine195
valentine195 committed Mar 15, 2022
1 parent c47d5f0 commit cdd5b85
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 32 deletions.
1 change: 1 addition & 0 deletions src/@types/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export interface AdmonitionSettings {
};
msDocConverted: boolean;
useSnippet: boolean;
snippetPath: string;
}

export type AdmonitionIconDefinition = {
Expand Down
78 changes: 62 additions & 16 deletions src/callout/manager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,21 @@ type Heights = Partial<{
}>;

export default class CalloutManager extends Component {
ruleMap: Map<Admonition, number> = new Map();
/* ruleMap: Map<string, number> = new Map(); */
constructor(public plugin: ObsidianAdmonition) {
super();
}

onload() {
//build sheet for custom admonitions

for (const admonition of Object.values(
this.plugin.data.userAdmonitions
)) {
this.addAdmonition(admonition);
}

this.setUseSnippet();

this.plugin.registerEditorSuggest(new CalloutSuggest(this.plugin));

this.plugin.registerMarkdownPostProcessor(
Expand Down Expand Up @@ -139,7 +140,15 @@ export default class CalloutManager extends Component {
this.heightMap.set(el, heights);
return heights;
}

generateCssString() {
const sheet = [
`/* This snippet was auto-generated by the Admonitions plugin on ${new Date().toLocaleString()} */\n\n`
];
for (const rule of Array.from(this.sheet.cssRules)) {
sheet.push(rule.cssText);
}
return sheet.join("\n\n");
}
addAdmonition(admonition: Admonition) {
if (!admonition.icon) return;
let rule: string;
Expand All @@ -148,10 +157,6 @@ export default class CalloutManager extends Component {
--callout-color: ${admonition.color}; /* RGB Tuple (just like admonitions) */
--callout-icon: '${admonition.icon.name}'; /* Icon name from the Obsidian Icon Set */
}`;
this.ruleMap.set(
admonition,
this.sheet.insertRule(rule, this.sheet.cssRules.length)
);
} else {
addIcon(
`ADMONITION_ICON_MANAGER_${admonition.type}`,
Expand All @@ -174,18 +179,26 @@ export default class CalloutManager extends Component {
)}'; /* Icon name from the Obsidian Icon Set */
}`;
}
this.ruleMap.set(
admonition,
this.sheet.insertRule(rule, this.sheet.cssRules.length)
);
console.log(
"🚀 ~ file: manager.ts ~ line 180 ~ this.sheet",
this.sheet
if (this.indexing.contains(admonition.type)) {
this.sheet.deleteRule(this.indexing.indexOf(admonition.type));
}
const index = this.sheet.insertRule(
rule,
this.indexing.contains(admonition.type)
? this.indexing.indexOf(admonition.type)
: this.sheet.cssRules.length
);
this.indexing.splice(index, 1, admonition.type);

this.updateSnippet();
}
indexing: string[] = [];
removeAdmonition(admonition: Admonition) {
if (!this.ruleMap.has(admonition)) return;
this.sheet.deleteRule(this.ruleMap.get(admonition));
if (!this.indexing.contains(admonition.type)) return;
const index = this.indexing.indexOf(admonition.type);
this.sheet.deleteRule(index);
this.indexing.splice(index, 1);
this.updateSnippet();
}
style = document.head.createEl("style", {
attr: { id: "ADMONITIONS_CUSTOM_STYLE_SHEET" }
Expand All @@ -195,4 +208,37 @@ export default class CalloutManager extends Component {
unload() {
this.style.detach();
}

get snippetPath() {
return this.plugin.app.customCss.getSnippetPath(
this.plugin.data.snippetPath
);
}
setUseSnippet() {
if (this.plugin.data.useSnippet) {
this.style.detach();
this.updateSnippet();
} else {
document.head.appendChild(this.style);
}
}
async updateSnippet() {
if (!this.plugin.data.useSnippet) return;
if (await this.plugin.app.vault.adapter.exists(this.snippetPath)) {
await this.plugin.app.vault.adapter.write(
this.snippetPath,
this.generateCssString()
);
} else {
await this.plugin.app.vault.create(
this.snippetPath,
this.generateCssString()
);
}
this.plugin.app.customCss.setCssEnabledStatus(
this.plugin.data.snippetPath,
true
);
this.plugin.app.customCss.readCssFolders();
}
}
6 changes: 3 additions & 3 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -592,15 +592,15 @@ ${selection.split("\n").join("\n> ")}
}
}
get admonitions() {
return { ...ADMONITION_MAP, ...this.data.userAdmonitions}
return { ...ADMONITION_MAP, ...this.data.userAdmonitions };
}
async addAdmonition(admonition: Admonition): Promise<void> {
this.data.userAdmonitions = {
...this.data.userAdmonitions,
[admonition.type]: admonition
};

this.registerCommandsFor(admonition);
this.registerType(admonition);

/** Create the admonition type in CSS */
this.calloutManager.addAdmonition(admonition);
Expand Down Expand Up @@ -808,7 +808,7 @@ ${editor.getDoc().getSelection()}
this.data.rpgDownloadedOnce = true;
} catch (e) {}
}

await this.saveSettings();
}

Expand Down
58 changes: 45 additions & 13 deletions src/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,12 @@ export default class AdmonitionSetting extends PluginSettingTab {
const sheet = [
`/* This snippet was auto-generated by the Admonitions plugin */\n\n`
];
for (const rule of Array.from(
this.plugin.calloutManager.sheet.cssRules
)) {
sheet.push(rule.cssText);
}
const file = new Blob([sheet.join("\n")], {
type: "text/css"
});
const file = new Blob(
[this.plugin.calloutManager.generateCssString()],
{
type: "text/css"
}
);
createEl("a", {
attr: {
download: "custom_callouts.css",
Expand All @@ -86,9 +84,25 @@ export default class AdmonitionSetting extends PluginSettingTab {
!Object.keys(this.plugin.data.userAdmonitions).length
)
);

new Setting(admonitionEl)
.setName("Use CSS Snippet for Custom Callouts")
.setDesc(
"Instead of managing it internally, Admonitions will maintain a CSS snippet to enable your custom types for callouts."
)
.addToggle((t) =>
t.setValue(this.plugin.data.useSnippet).onChange((v) => {
this.plugin.data.useSnippet = v;
this.plugin.saveSettings();
this.plugin.calloutManager.setUseSnippet();
})
);

new Setting(admonitionEl)
.setName(t("Add New"))
.setDesc(t("Add a new Admonition type."))
.setDesc(
"Add a new Admonition type. All custom Admonitions will also be usable as callouts."
)
.addButton((button: ButtonComponent): ButtonComponent => {
let b = button
.setTooltip(t("Add Additional"))
Expand All @@ -98,7 +112,7 @@ export default class AdmonitionSetting extends PluginSettingTab {

modal.onClose = async () => {
if (modal.saved) {
this.plugin.addAdmonition({
const admonition = {
type: modal.type,
color: modal.color,
icon: modal.icon,
Expand All @@ -107,7 +121,12 @@ export default class AdmonitionSetting extends PluginSettingTab {
injectColor: modal.injectColor,
noTitle: modal.noTitle,
copy: modal.copy
});
};
this.plugin.addAdmonition(admonition);

this.plugin.calloutManager.addAdmonition(
admonition
);
this.display();
}
};
Expand Down Expand Up @@ -785,8 +804,9 @@ export default class AdmonitionSetting extends PluginSettingTab {
] = modalAdmonition;
}

/* this.plugin.removeAdmonition(admonition);
this.plugin.addAdmonition(modalAdmonition); */
this.plugin.calloutManager.addAdmonition(
modalAdmonition
);

this.display();
}
Expand Down Expand Up @@ -818,12 +838,14 @@ class SettingsModal extends Modal {
noTitle: boolean = false;
admonitionPreview: HTMLElement;
copy: boolean;
originalType: string;
constructor(public plugin: ObsidianAdmonition, admonition?: Admonition) {
super(plugin.app);
if (admonition) {
this.color = admonition.color;
this.icon = admonition.icon;
this.type = admonition.type;
this.originalType = admonition.type;
this.title = admonition.title;
this.injectColor = admonition.injectColor ?? this.injectColor;
this.noTitle = admonition.noTitle ?? false;
Expand Down Expand Up @@ -1089,6 +1111,16 @@ class SettingsModal extends Modal {
);
error = true;
}
if (
this.type != this.originalType &&
this.type in this.plugin.data.userAdmonitions
) {
SettingsModal.setValidationError(
typeText,
"That Admonition type already exists."
);
error = true;
}

if (!isSelectorValid(typeText.inputEl.value)) {
SettingsModal.setValidationError(
Expand Down

0 comments on commit cdd5b85

Please sign in to comment.