From d2292137da4796e69a25b524e5ebf36d8000d633 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Tue, 20 Apr 2021 17:19:26 +1000 Subject: [PATCH] move svg icons into own files, add dep to manifest --- extension/helpers.js | 7 + extension/icons/blackwhite.svg | 2 +- extension/icons/colour.svg | 2 +- extension/icons/fontawesome/caret-down.svg | 2 + extension/icons/fontawesome/code.svg | 2 + extension/icons/fontawesome/file.svg | 2 + .../icons/fontawesome/long-arrow-alt-left.svg | 2 + .../fontawesome/long-arrow-alt-right.svg | 2 + extension/manifest.json | 2 +- .../menu.css | 6 +- .../menu.js | 245 ++++++++++++------ 11 files changed, 192 insertions(+), 82 deletions(-) create mode 100644 extension/icons/fontawesome/caret-down.svg create mode 100644 extension/icons/fontawesome/code.svg create mode 100644 extension/icons/fontawesome/file.svg create mode 100644 extension/icons/fontawesome/long-arrow-alt-left.svg create mode 100644 extension/icons/fontawesome/long-arrow-alt-right.svg diff --git a/extension/helpers.js b/extension/helpers.js index 50ae2c4..81ad92b 100644 --- a/extension/helpers.js +++ b/extension/helpers.js @@ -53,6 +53,13 @@ web.createElement = (html) => { .join(''); return template.content.firstElementChild; }; +web.htmlEscape = (str) => + str + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/'/g, ''') + .replace(/"/g, '"'); /** * @param {string} sheet diff --git a/extension/icons/blackwhite.svg b/extension/icons/blackwhite.svg index 12da3b0..0176e24 100644 --- a/extension/icons/blackwhite.svg +++ b/extension/icons/blackwhite.svg @@ -1,4 +1,4 @@ - + diff --git a/extension/icons/colour.svg b/extension/icons/colour.svg index 958c24b..a56e457 100644 --- a/extension/icons/colour.svg +++ b/extension/icons/colour.svg @@ -1,4 +1,4 @@ - + diff --git a/extension/icons/fontawesome/caret-down.svg b/extension/icons/fontawesome/caret-down.svg new file mode 100644 index 0000000..b8b0772 --- /dev/null +++ b/extension/icons/fontawesome/caret-down.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/extension/icons/fontawesome/code.svg b/extension/icons/fontawesome/code.svg new file mode 100644 index 0000000..62763ca --- /dev/null +++ b/extension/icons/fontawesome/code.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/extension/icons/fontawesome/file.svg b/extension/icons/fontawesome/file.svg new file mode 100644 index 0000000..89a009e --- /dev/null +++ b/extension/icons/fontawesome/file.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/extension/icons/fontawesome/long-arrow-alt-left.svg b/extension/icons/fontawesome/long-arrow-alt-left.svg new file mode 100644 index 0000000..e680e12 --- /dev/null +++ b/extension/icons/fontawesome/long-arrow-alt-left.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/extension/icons/fontawesome/long-arrow-alt-right.svg b/extension/icons/fontawesome/long-arrow-alt-right.svg new file mode 100644 index 0000000..13a4808 --- /dev/null +++ b/extension/icons/fontawesome/long-arrow-alt-right.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/extension/manifest.json b/extension/manifest.json index d8c8acb..5b8ba40 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -17,7 +17,7 @@ }, "web_accessible_resources": [ { - "resources": ["icons/*", "repo/*", "helpers.js"], + "resources": ["helpers.js", "repo/*", "icons/*", "dep/*"], "matches": ["https://*.notion.so/*"] } ], 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 da95868..7b2e43f 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css @@ -88,9 +88,6 @@ main section[data-container] article { main section[data-container] article img { max-width: 100%; } -main section[data-container] article > img { - border-bottom: 1px solid var(--theme--divider); -} main section[data-container] article > div { padding: 1rem; } @@ -132,6 +129,9 @@ main section[data-container] article > div { fill: var(--theme--text_property); } +.library--preview { + border-bottom: 1px solid var(--theme--divider); +} .library--version { font-weight: normal; font-size: 0.8rem; 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 470faaa..e555aa8 100644 --- a/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js +++ b/extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js @@ -14,65 +14,79 @@ for (let mod of await registry.get()) { } } -const components = { - preview({ preview }) { - if (!preview) return ''; - const element = web.createElement( - `` - ); - return element; - }, - name({ name, id, version }) { - const element = web.createElement(``); - return element; - }, - tags({ tags }) { - if (!tags || !tags.length) return ''; - const element = web.createElement( - `` - ); - return element; - }, - description({ description }) { - const element = web.createElement( - `

${markdown.renderInline(description)}

` - ); - return element; - }, - authors({ authors }) { - const element = web.createElement( - ``, + async expand({ id }) { + const element = web.createElement( + `

${await fs.getText( + 'icons/fontawesome/long-arrow-alt-right.svg' + )} settings & documentation

` ); return element; }, - expand({ id }) { - const element = web.createElement(`

- - - settings & documentation

`); - return element; - }, + }, + options: { toggle(id, { key, label, value }) { const element = web.createElement(``); return element; }, - select(id, { key, label, values }) { + async select(id, { key, label, values }) { const element = web.createElement(``); @@ -92,61 +106,139 @@ const components = {

${label}

`); return element; }, - file(id, { key, label, extensions }) { + }, +}; + +const components = { + preview: ({ preview = '' }) => + web.createElement( + html`` + ), + name: ({ name, id, version }) => + web.createElement(``), + tags({ tags }) { + if (!tags || !tags.length) return ''; + const element = web.createElement( + `` + ); + return element; + }, + description({ description }) { + const element = web.createElement( + `

${markdown.renderInline(description)}

` + ); + return element; + }, + authors: ({ authors }) => + html``, + async expand({ id }) { + const element = web.createElement( + `

${await fs.getText( + 'icons/fontawesome/long-arrow-alt-right.svg' + )} settings & documentation

` + ); + return element; + }, + toggle(id, { key, label, value }) { + const element = web.createElement(``); + return element; + }, + async select(id, { key, label, values }) { + const element = web.createElement(``); + return element; + }, + text(id, { key, label, value }) { + const element = web.createElement(``); + element.querySelector('textarea').addEventListener('input', (ev) => { + ev.target.style.removeProperty('--txt--scroll-height'); + ev.target.style.setProperty('--txt--scroll-height', ev.target.scrollHeight + 'px'); + }); + return element; + }, + number(id, { key, label, value }) { + const element = web.createElement(``); + return element; + }, + async file(id, { key, label, extensions }) { const accept = extensions && extensions.length ? ` accept="${extensions.join(',')}"` : ''; const element = web.createElement(``); +

${await fs.getText( + 'icons/fontawesome/file.svg' + )}choose file...

`); element.querySelector('input[type="file"]').addEventListener('change', (ev) => { element.querySelector('.library--file_path').innerText = ev.target.files[0].name; }); return element; }, - documentation_buttons({ _dir }) { + async documentation_buttons({ _dir }) { const element = web.createElement(`

- - - back to library + + + ${await fs.getText( + 'icons/fontawesome/long-arrow-alt-left.svg' + )} back to library - - view source code + )}"> + + ${await fs.getText( + 'icons/fontawesome/code.svg' + )} view source code

`); return element; }, }, generators = { - summary_card(mod) { + async summary_card(mod) { const article = web.createElement('
'), body = web.createElement('
'); - article.append(components.preview(mod)); - body.append(components.name(mod)); - body.append(components.tags(mod)); - body.append(components.description(mod)); - body.append(components.authors(mod)); - body.append(components.expand(mod)); + article.append(await components.preview(mod)); + body.append(await components.name(mod)); + body.append(await components.tags(mod)); + body.append(await components.description(mod)); + body.append(await components.authors(mod)); + body.append(await components.expand(mod)); article.append(body); return article; }, - full_card(mod) { + async full_card(mod) { const article = web.createElement('
'), body = web.createElement('
'); - article.append(components.preview(mod)); - body.append(components.name(mod)); - body.append(components.tags(mod)); - body.append(components.description(mod)); - body.append(components.authors(mod)); + article.append(await components.preview(mod)); + body.append(await components.name(mod)); + body.append(await components.tags(mod)); + body.append(await components.description(mod)); + body.append(await components.authors(mod)); article.append(body); if (mod.options && mod.options.length) { const options = web.createElement(`
`); - mod.options.forEach((opt) => options.append(components[opt.type](mod.id, opt))); + ( + await Promise.all(mod.options.map((opt) => components[opt.type](mod.id, opt))) + ).map((opt) => options.append(opt)); article.append(options); } return article; @@ -170,7 +262,8 @@ const components = { const $container = document.querySelector('[data-container]'); $container.dataset.container = 'library'; $container.innerHTML = ''; - for (let mod of await registry.get()) $container.append(generators.summary_card(mod)); + for (let mod of await registry.get()) + $container.append(await generators.summary_card(mod)); }, }, mod: { @@ -181,8 +274,8 @@ const components = { const $container = document.querySelector('[data-container]'); $container.dataset.container = 'page'; $container.innerHTML = ''; - $container.append(components.documentation_buttons(mod)); - $container.append(generators.full_card(mod)); + $container.append(await components.documentation_buttons(mod)); + $container.append(await generators.full_card(mod)); $container.append(await generators.documentation(mod)); }, },