obsidian-plugin/alberti42_obsidian-plugins-annotations
1
0
Fork 0
mirror of https://github.com/alberti42/obsidian-plugins-annotations.git synced 2026-07-22 10:10:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Gray out placeholders

Browse source
This commit is contained in:
Andrea Alberti 2024-06-01 22:51:47 +02:00
parent 4d48790965
commit 044ade629c
2 changed files with 42 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/main.ts
View file

@ -96,12 +96,33 @@ export default class PluginComment extends Plugin {
comment_container.appendChild(label);
const comment = document.createElement('div');
comment.className = 'plugin-comment';
comment.className = 'plugin-comment-annotation';
comment.contentEditable = 'true';
comment.innerText = this.annotations[pluginId] || `Add your personal comment about '${pluginName}' here...`;
const placeholder = `Add your personal comment about '${pluginName}' here...`;
let isPlaceholder = this.annotations[pluginId] ? false : true;
const initialText = this.annotations[pluginId] || placeholder;
comment_container.addEventListener('click', (event) => {
event.stopPropagation();
if(isPlaceholder) {
comment.addClass('plugin-comment-placeholder');
}
comment.innerText = initialText;
// Remove placeholder class when user starts typing
comment.addEventListener('focus', () => {
if (isPlaceholder) {
comment.innerText = '';
comment.classList.remove('plugin-comment-placeholder');
isPlaceholder = false;
}
});
comment.addEventListener('blur', () => {
if (comment.innerText.trim() === '') {
comment.innerText = placeholder;
comment.classList.add('plugin-comment-placeholder');
isPlaceholder = true;
}
});
// Prevent click event propagation to parent
@ -111,8 +132,16 @@ export default class PluginComment extends Plugin {
// Save the comment on input change
comment.addEventListener('input', () => {
this.annotations[pluginId] = comment.innerText;
saveAnnotations(this.app.vault, this.annotations);
if (comment.innerText.trim() === '') {
delete this.annotations[pluginId];
comment.classList.add('plugin-comment-placeholder');
isPlaceholder = true;
} else {
this.annotations[pluginId] = comment.innerText;
comment.classList.remove('plugin-comment-placeholder');
isPlaceholder = false;
}
saveAnnotations(this.app.vault, this.annotations);
});
comment_container.appendChild(comment);
@ -124,6 +153,7 @@ export default class PluginComment extends Plugin {
});
}
onunload() {
console.log('Unloading Plugin Comment');

12
styles/styles.css
View file

@ -11,18 +11,18 @@
box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
}
.plugin-comment-annotation.plugin-comment-placeholder {
color: #CCCCCC; /* Standard placeholder color */
font-style: italic;
}
/* Additional styles for consistency */
.plugin-comment-label {
padding-top: 5px;
}
.plugin-comment-annotation {
padding-top: 5px;
font-style: italic;
width: 100%;
margin-top: 5px;
border: 1px solid var(--background-modifier-border);
padding: 5px;
font-style: italic;
}