diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css
index e23d35f..524007d 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css
@@ -21,6 +21,7 @@ html[class] {
body {
padding: 2rem 2.5rem;
+ position: relative;
margin: 0;
background: var(--theme--sidebar);
color: var(--theme--text);
@@ -39,7 +40,7 @@ header > * {
margin: 0 1.25rem 0 0;
font-size: var(--theme--font_heading1-size);
}
-header h1 a:not([data-active]) {
+header h1 a:not([data-view-active]) {
text-decoration: none;
}
header h1 img {
@@ -61,7 +62,7 @@ header h1 svg[data-icon='code'] {
margin-right: 0.3em;
}
-img[data-target='notion'] {
+img[data-view-target='notion'] {
cursor: pointer;
}
@@ -95,8 +96,9 @@ img[data-target='notion'] {
[data-container='mod'] > .documentation--body {
grid-column: span 2;
}
- body {
+ [data-container='mod'] {
overflow: hidden;
+ max-height: calc(100vh);
}
}
@media (min-width: 1350px) {
@@ -372,6 +374,21 @@ label > span:not([class]) {
overflow-x: auto;
}
+.tooltip--list > div {
+ position: absolute;
+ background: var(--theme--tooltip);
+ color: var(--theme--tooltip-text);
+ font-size: var(--theme--font_ui_small-size);
+ padding: 0.5rem;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+ border-radius: 3px;
+ max-width: 20rem;
+ display: none;
+}
+.tooltip--list p {
+ margin: 0.25rem 0;
+}
+
.notification--list {
position: absolute;
bottom: 1.5rem;
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html
index 43d89a0..5ea8727 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html
@@ -8,11 +8,8 @@
-
-
-
+
+
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js
index d6de78d..d62cb1e 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js
@@ -15,9 +15,30 @@ for (let mod of await registry.get()) {
}
}
-document.querySelector('img[data-target="notion"]').addEventListener('click', env.focusNotion);
+document
+ .querySelector('img[data-view-target="notion"]')
+ .addEventListener('click', env.focusNotion);
web.hotkeyListener(['Ctrl', 'Alt', 'E'], env.focusNotion);
+const tooltips = {
+ $list: document.querySelector('.tooltip--list'),
+ _generate($target, text) {
+ const $tooltip = web.createElement(web.html`${fmt.md.render(text)}
`);
+ this.$list.appendChild($tooltip);
+ $target.addEventListener('mouseover', (event) => {
+ $tooltip.style.display = 'block';
+ });
+ $target.addEventListener('mousemove', (event) => {
+ $tooltip.style.top = event.clientY - $tooltip.clientHeight + 'px';
+ $tooltip.style.left =
+ event.clientX < window.innerWidth / 2 ? event.clientX + 20 + 'px' : '';
+ });
+ $target.addEventListener('mouseout', (event) => {
+ $tooltip.style.display = '';
+ });
+ },
+};
+
const components = {};
components.card = {
preview: ({ preview = '' }) =>
@@ -87,25 +108,26 @@ components.card = {
},
};
components.options = {
- async toggle(id, { key, label }) {
+ async toggle(id, { key, label, description }) {
const state = await storage.get(id, key),
opt = web.createElement(web.html``);
+ >`);
opt.addEventListener('change', (event) => storage.set(id, key, event.target.checked));
+ tooltips._generate(opt, description);
return opt;
},
- async select(id, { key, label, values }) {
+ async select(id, { key, label, description, values }) {
const state = await storage.get(id, key),
opt = web.createElement(web.html``);
opt.addEventListener('change', (event) => storage.set(id, key, event.target.value));
+ tooltips._generate(opt, description);
return opt;
},
- async text(id, { key, label }) {
+ async text(id, { key, label, description }) {
const state = await storage.get(id, key),
opt = web.createElement(web.html``);
@@ -136,26 +159,28 @@ components.options = {
event.target.style.setProperty('--txt--scroll-height', event.target.scrollHeight + 'px');
});
opt.addEventListener('change', (event) => storage.set(id, key, event.target.value));
+ tooltips._generate(opt, description);
return opt;
},
- async number(id, { key, label }) {
+ async number(id, { key, label, description }) {
const state = await storage.get(id, key),
opt = web.createElement(web.html``);
opt.addEventListener('change', (event) => storage.set(id, key, event.target.value));
+ tooltips._generate(opt, description);
return opt;
},
- async file(id, { key, label, extensions }) {
+ async file(id, { key, label, description, extensions }) {
const state = await storage.get(id, key),
opt = web.createElement(web.html``);
opt.addEventListener('change', (event) => {
const file = event.target.files[0],
@@ -189,6 +209,12 @@ components.options = {
opt.addEventListener('click', (event) => {
document.documentElement.scrollTop = 0;
});
+ tooltips._generate(
+ opt,
+ `${description}\n\n**warning:** browser extensions do not have true filesystem access,
+ so the content of the file is saved on selection. after editing it,
+ the file will need to be re-selected.`
+ );
return opt;
},
async _generate(mod) {
@@ -270,7 +296,9 @@ const views = {
this.$container.innerHTML = '';
this.$container.style.opacity = '';
this.$container.dataset.container = '';
- document.querySelector('[data-target][data-active]')?.removeAttribute('data-active');
+ document
+ .querySelector('[data-view-target][data-view-active]')
+ ?.removeAttribute('data-view-active');
res();
}, 200);
});
@@ -326,14 +354,14 @@ const views = {
},
async mod(mod) {
this.$container.dataset.container = 'mod';
- document.querySelector('header [data-target="library"]').dataset.active = true;
+ document.querySelector('header [data-view-target="library"]').dataset.active = true;
this.$container.append(await components.documentation.buttons(mod));
this.$container.append(await components.options._generate(mod));
this.$container.append(await components.documentation.readme(mod));
},
async library() {
this.$container.dataset.container = 'library';
- document.querySelector('header [data-target="library"]').dataset.active = true;
+ document.querySelector('header [data-view-target="library"]').dataset.active = true;
for (let mod of await registry.get())
this.$container.append(await components.card._generate(mod));
},
diff --git a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json
index ca9e365..7653ee1 100644
--- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json
+++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/mod.json
@@ -25,31 +25,36 @@
"type": "toggle",
"key": "toggle",
"label": "toggle",
- "value": true
+ "value": true,
+ "description": "a toggle"
},
{
"type": "select",
"key": "select",
"label": "select",
- "values": ["option a", "option b", "option c"]
+ "values": ["option a", "option b", "option c"],
+ "description": "a select"
},
{
"type": "text",
"key": "text",
"label": "text",
- "value": "default"
+ "value": "default",
+ "description": "a text input"
},
{
"type": "number",
"key": "number",
"label": "number",
- "value": 0
+ "value": 0,
+ "description": "a number input"
},
{
"type": "file",
"key": "file",
"label": "file picker (.css only)",
- "extensions": [".css"]
+ "extensions": [".css"],
+ "description": "a file picker"
}
]
}
library
+