I want to share sneak peak of the proof of concept of the idea. The idea is to have a library with a lot of CSS snippets which can be turned on/off as you need/want them.
Current implementation parse the styles which was added from obsidian.css and takes comments as headers. So, they can be turned on/off as you need them.
Other stuff:
@mrjackphil: very interesting idea. The GIF is very small and double clicking it does not enlarge it. Is there any way to enlarge?
very interested as half my file is custom stuff from the forums, how can we get this tool?
@Klaas I’ve uploaded a GIF with higher resolution (but lower quality)
@tallguyjenks it needs some polishing before it can be usable. Right now you can execute this snippet in console
(function () {
var dq = function (query) { return document.querySelectorAll(query); };
dq.create = function (el) { return document.createElement(el); };
function drawModal() {
var modal = document.createElement('div');
modal.classList.add('modal-container');
modal.innerHTML = "<div class=\"modal\"><div class=\"modal-close-button\"></div><div class=\"modal-title\"></div><div class=\"modal-content\"></div></div>";
modal.querySelector('.modal-close-button').addEventListener('click', function () { return modal.remove(); });
document.body.appendChild(modal);
var modal_content = modal.querySelector('.modal-content');
modal_content.style.maxHeight = '70vh';
modal_content.style.overflow = 'auto';
return {
el: modal,
addParagraph: function (text) {
var paragraph = document.createElement('p');
paragraph.innerHTML = text;
modal.querySelector('.modal-content').appendChild(paragraph);
},
addCheckbox: function (name) {
var input = dq.create('input');
input.setAttribute('type', 'checkbox');
input.setAttribute('name', name);
modal.querySelector('.modal-content').appendChild(input);
},
addLink: function (text, event) {
var link = document.createElement('a');
link.innerHTML = text;
link.addEventListener('click', function () { return event(modal); });
modal.querySelector('.modal-content').appendChild(link);
modal.querySelector('.modal-content').appendChild(dq.create('br'));
}
};
}
function run(el) {
var regexpParts = /\/\*.+\*\//gi;
var regexpHeaders = /\/\*(.+)\*\//gi;
var text = el.innerText;
var headers = text.match(regexpHeaders);
var parts = text.split(regexpParts).filter(function (e) { return e; });
if (!headers || headers.length === 0) {
alert('Headers not found');
return;
}
var togglerData = headers.map(function (el, i) { return ({
header: headers[i].replace(/(\/\*|\*\/)/gi, '').trim(),
content: parts[i],
enabled: true
}); });
var build = function (data) { return el.innerHTML = data.filter(function (e) { return e.enabled; }).map(function (e) { return e.content; }).join(''); };
var interface = drawModal();
togglerData.forEach(function (el, index) {
interface.addCheckbox(el.header);
interface.addLink(el.header, function (modal) {
el.enabled = !el.enabled;
modal.querySelector('input[name="' + el.header + '"').checked = el.enabled;
build(togglerData);
});
var input = interface.el.querySelector('input[name="' + el.header + '"');
input.checked = el.enabled;
});
interface.addLink('refresh', function (modal) {
modal.remove();
run(el);
});
}
run(document.head.querySelector('style:last-child'));
})();
to get the very first scratch of that thing.
How to run snippets and warnings - here
This is an excellent idea, @mrjackphil ! I’ve been collecting CSS snippets from various posts and wondering how best to organize them. Then applying them to different themes becomes tedious.
I love this solution! Happy to help test when you’re ready.