mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-06 05:29:02 +00:00
extension: icon sets part 1 (save/reuse recent uploads)
This commit is contained in:
parent
6a84fbec91
commit
96988d67e0
411
repo/icon-sets/app.css
Normal file
411
repo/icon-sets/app.css
Normal file
@ -0,0 +1,411 @@
|
||||
/*
|
||||
* notion-icons
|
||||
* (c) 2019 jayhxmo (https://jaymo.io/)
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
/* tab */
|
||||
|
||||
[hide-active-bar] > :nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notion-icons--tab,
|
||||
.notion-icons--tab > div {
|
||||
color: var(--theme--text) !important;
|
||||
}
|
||||
|
||||
#notion-icons--active-bar {
|
||||
border-bottom: 2px solid var(--theme--text);
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.notion-icons--restore-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: var(--theme--text_ui_info);
|
||||
}
|
||||
|
||||
/* interactive hover */
|
||||
|
||||
.notion-icons--tab > div:hover,
|
||||
.notion-icons--icon:hover,
|
||||
.notion-icons--toggle:hover,
|
||||
.notion-icons--restore-button:hover,
|
||||
.notion-icons--removed-set:hover {
|
||||
background: var(--theme--interactive_hover);
|
||||
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
|
||||
}
|
||||
|
||||
/* container */
|
||||
|
||||
#notion-icons {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
background: var(--theme--card);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* search */
|
||||
|
||||
.notion-icons--search {
|
||||
flex-shrink: 0;
|
||||
height: 28px;
|
||||
min-width: 0px;
|
||||
margin: 9px 14px 10px;
|
||||
padding: 3px 6px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
background: var(--theme--tag_input);
|
||||
box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px inset;
|
||||
user-select: none;
|
||||
cursor: text;
|
||||
}
|
||||
.notion-dark-theme .notion-icons--search {
|
||||
background: rgba(15, 15, 15, 0.3);
|
||||
box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset;
|
||||
}
|
||||
|
||||
.notion-icons--search input {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
display: block;
|
||||
resize: none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.notion-icons--search svg {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
fill: inherit;
|
||||
backface-visibility: hidden;
|
||||
margin-right: 6px;
|
||||
color: rgba(55, 53, 47, 0.8);
|
||||
}
|
||||
.notion-dark-theme .notion-icons--search svg {
|
||||
color: rgb(202, 204, 206);
|
||||
}
|
||||
|
||||
/* scroller */
|
||||
|
||||
.notion-icons--scroller {
|
||||
padding: 8px 12px;
|
||||
overflow: hidden auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* divider */
|
||||
|
||||
.notion-icons--divider {
|
||||
height: 1px;
|
||||
margin-bottom: 9px;
|
||||
border-bottom: 1px solid var(--theme--table-border);
|
||||
}
|
||||
|
||||
/* icon set */
|
||||
|
||||
.notion-icons--icon-set {
|
||||
margin-bottom: 8px;
|
||||
color: var(--theme--text);
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.notion-icons--icon-set.error {
|
||||
color: var(--theme--text_red);
|
||||
background: var(--theme--block_red);
|
||||
border: 1px solid var(--theme--tag_red);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.notion-icons--icon-set.error::after {
|
||||
content: '!';
|
||||
display: block;
|
||||
font-size: 1.6em;
|
||||
line-height: 0.9;
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* icon set header/toggle */
|
||||
|
||||
.notion-icons--toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
padding: 0.25em;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: background 200ms, margin-bottom 200ms ease-in;
|
||||
}
|
||||
.notion-icons--icon-set.alert .notion-icons--toggle {
|
||||
color: var(--theme--block_yellow-text);
|
||||
background: var(--theme--block_yellow);
|
||||
border: 1px solid var(--theme--tag_yellow);
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
.notion-icons--icon-set.alert .notion-icons--toggle:hover {
|
||||
background: var(--theme--tag_yellow);
|
||||
}
|
||||
|
||||
.notion-icons--toggle .triangle {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: 0.9em;
|
||||
height: 1em;
|
||||
margin: 0 0.75em 0 0.5em;
|
||||
transition: transform 200ms ease-out 0s;
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
|
||||
.notion-icons--author {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.notion-icons--author span,
|
||||
.notion-icons--author a {
|
||||
color: var(--theme--text_ui_info);
|
||||
transition: color 20ms ease-in;
|
||||
}
|
||||
.notion-icons--toggle a:hover {
|
||||
color: var(--theme--primary);
|
||||
}
|
||||
|
||||
/* icon set body */
|
||||
|
||||
.notion-icons--body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
flex-grow: 1;
|
||||
margin-left: 1.2em;
|
||||
overflow: hidden;
|
||||
transition: height 200ms ease-in, opacity 200ms ease-in;
|
||||
}
|
||||
|
||||
/* hidden icon set */
|
||||
|
||||
.notion-icons--icon-set[hidden-set] {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.notion-icons--icon-set[hidden-set] .notion-icons--toggle {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.notion-icons--icon-set[hidden-set] .triangle {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
.notion-icons--icon-set[hidden-set] .notion-icons--body {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
|
||||
.notion-icons--icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: background 20ms ease-in;
|
||||
}
|
||||
|
||||
.notion-icons--icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* spritesheet */
|
||||
.notion-icons--icon div {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-size: 32px;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.notion-icons--icon.error {
|
||||
font-size: 20px;
|
||||
background: var(--theme--block_yellow);
|
||||
border: 1px solid var(--theme--tag_yellow);
|
||||
color: var(--theme--text_yellow);
|
||||
}
|
||||
.notion-icons--icon.error:hover {
|
||||
background: var(--theme--tag_yellow);
|
||||
}
|
||||
|
||||
/* tooltip */
|
||||
|
||||
.notion-icons--tooltip {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.notion-icons--tooltip > div {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.notion-icons--tooltip-text {
|
||||
bottom: calc(100% + 6px);
|
||||
padding: 4px 8px;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
max-width: calc(100vw - 24px);
|
||||
background: rgb(15, 15, 15);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notion-dark-theme .notion-icons--tooltip-text {
|
||||
background: rgb(202, 204, 206);
|
||||
color: rgb(15, 15, 15);
|
||||
}
|
||||
|
||||
/* actions */
|
||||
|
||||
.notion-icons--actions {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* spinner */
|
||||
|
||||
.notion-icons--spinner {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
.notion-icons--spinner img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: rotation 1.3s infinite linear;
|
||||
}
|
||||
|
||||
/* remove button */
|
||||
|
||||
.notion-icons--remove-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.notion-icons--remove-button::before {
|
||||
content: 'Hide icon set';
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
padding: 4px 22px 4px 6px;
|
||||
background: var(--theme--main);
|
||||
box-shadow: var(--theme--box-shadow);
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 50ms ease-in;
|
||||
}
|
||||
.notion-icons--remove-button:hover::before {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.notion-icons--remove-button svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--theme--text_ui_info);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* restore icon sets modal */
|
||||
|
||||
.notion-icons--overlay-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notion-icons--restore {
|
||||
max-width: 320px;
|
||||
max-height: 320px;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
padding: 8px 0;
|
||||
box-shadow: var(--theme--box-shadow_strong);
|
||||
background: var(--theme--card);
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.notion-icons--removed-set {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 8px 14px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.4s ease;
|
||||
}
|
||||
|
||||
/* animation */
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
179
repo/icon-sets/client.css
Normal file
179
repo/icon-sets/client.css
Normal file
@ -0,0 +1,179 @@
|
||||
/*
|
||||
* notion-enhancer: icon sets
|
||||
* (c) 2019 jayhxmo (https://jaymo.io/)
|
||||
* (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
.icon_sets--tab_button {
|
||||
position: relative;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.icon_sets--tab_button > .notion-focusable {
|
||||
user-select: none;
|
||||
transition: background 20ms ease-in 0s;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
color: var(--theme--text);
|
||||
}
|
||||
.icon_sets--tab_button:hover > .notion-focusable {
|
||||
background: var(--theme--ui_interactive-hover);
|
||||
}
|
||||
.icon_sets--tab_button:active > .notion-focusable {
|
||||
background: var(--theme--ui_interactive-active);
|
||||
}
|
||||
|
||||
.icon_sets--scroller {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
.icon_sets--actions {
|
||||
display: flex;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.icon_sets--link_input {
|
||||
flex-grow: 1;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
padding: 4px 6px;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
box-shadow: var(--theme--ui_shadow) 0px 0px 0px 1px inset;
|
||||
background: var(--theme--ui_input);
|
||||
cursor: text;
|
||||
height: 28px;
|
||||
}
|
||||
.icon_sets--link_input > input {
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
display: block;
|
||||
resize: none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.icon_sets--link_submit {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.icon_sets--upload,
|
||||
.icon_sets--link_submit {
|
||||
user-select: none;
|
||||
transition: background 20ms ease-in 0s;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: var(--theme--accent_blue);
|
||||
color: var(--theme--accent_blue-text);
|
||||
line-height: 1.2;
|
||||
padding: 6px 8px;
|
||||
height: 28px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.icon_sets--upload:hover,
|
||||
.icon_sets--link_submit:hover {
|
||||
background: var(--theme--accent_blue-hover);
|
||||
}
|
||||
.icon_sets--upload:active,
|
||||
.icon_sets--link_submit:active {
|
||||
background: var(--theme--accent_blue-active);
|
||||
}
|
||||
|
||||
.icon_sets--upload {
|
||||
margin-left: 0.5em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.icon_sets--list {
|
||||
height: 100%;
|
||||
word-break: break-all;
|
||||
overflow: hidden auto;
|
||||
padding: 0 14px 10px 14px;
|
||||
}
|
||||
|
||||
.icon_sets--title {
|
||||
margin: 6px 0 8px 0;
|
||||
color: var(--theme--text_secondary);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
user-select: none;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
padding: 0.25em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.icon_sets--title:hover {
|
||||
background: var(--theme--ui_interactive-hover);
|
||||
}
|
||||
.icon_sets--title:active {
|
||||
background: var(--theme--ui_interactive-active);
|
||||
}
|
||||
.icon_sets--title .info {
|
||||
height: 1em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.icon_sets--title .triangle {
|
||||
height: 1em;
|
||||
width: 0.9em;
|
||||
margin: 0 0.5em 0 0.25em;
|
||||
transition: transform 200ms ease-out 0s;
|
||||
transform: rotateZ(180deg);
|
||||
}
|
||||
.icon_sets--title[data-collapsed='true'] .triangle {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
.icon_sets--title[data-collapsed='true'] + .icon_sets--set {
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.icon_sets--set {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
transition: height 200ms ease-out 0s;
|
||||
}
|
||||
.icon_sets--icon {
|
||||
user-select: none;
|
||||
transition: background 20ms ease-in 0s;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.icon_sets--icon:hover {
|
||||
background: var(--theme--ui_interactive-hover);
|
||||
}
|
||||
.icon_sets--icon:active {
|
||||
background: var(--theme--ui_interactive-active);
|
||||
}
|
||||
.icon_sets--icon > img {
|
||||
max-width: 24px;
|
||||
max-height: 24px;
|
||||
}
|
||||
182
repo/icon-sets/client.mjs
Normal file
182
repo/icon-sets/client.mjs
Normal file
@ -0,0 +1,182 @@
|
||||
/*
|
||||
* notion-enhancer: icon sets
|
||||
* (c) 2019 jayhxmo (https://jaymo.io/)
|
||||
* (c) 2020 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
|
||||
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
export default async function ({ web, components, notion }, db) {
|
||||
const recentUploads = await db.get(['recent_uploads'], []),
|
||||
$triangleSvg = web.html`<svg viewBox="0 0 100 100" class="triangle">
|
||||
<polygon points="5.9,88.2 50,11.8 94.1,88.2" />
|
||||
</svg>`;
|
||||
|
||||
const mediaMenuSelector = '.notion-media-menu',
|
||||
mediaScrollerSelector = '.notion-media-menu > .notion-scroller',
|
||||
mediaFilterSelector = '.notion-media-menu > :first-child > :last-child',
|
||||
mediaLinkInputSelector = '.notion-focusable-within > input[type=url]',
|
||||
tabBtnSelector = (n) =>
|
||||
`.notion-media-menu > :first-child > :first-child > :nth-child(${n})`;
|
||||
|
||||
const renderSetTitle = async (id, title, $tooltip = undefined) => {
|
||||
const isCollapsed = await db.get(['collapsed', id], false),
|
||||
$title = web.html`<p class="icon_sets--title"
|
||||
${isCollapsed ? 'data-collapsed="true"' : ''}></p>`;
|
||||
web.render(
|
||||
$title,
|
||||
$triangleSvg.cloneNode(true),
|
||||
web.html`<span>${web.escape(title)}</span>`
|
||||
);
|
||||
$title.addEventListener('click', () => {
|
||||
const newState = $title.dataset.collapsed !== 'true';
|
||||
db.set(['collapsed', id], newState);
|
||||
$title.dataset.collapsed = newState;
|
||||
});
|
||||
if ($tooltip) {
|
||||
const $infoSvg = web.html`${await components.feather('info', { class: 'info' })}`;
|
||||
components.setTooltip($infoSvg, $tooltip);
|
||||
web.render($title, $infoSvg);
|
||||
}
|
||||
return $title;
|
||||
};
|
||||
|
||||
const $iconsTab = web.html`<div class="icon_sets--tab_button">
|
||||
<div class="notion-focusable" role="button" tabindex="0">Icons</div>
|
||||
</div>`,
|
||||
// actions
|
||||
$iconsLinkInput = web.html`<div class="icon_sets--link_input">
|
||||
<input placeholder="Paste an image link…" type="url">
|
||||
</div>`,
|
||||
$iconsLinkSubmit = web.html`<button class="icon_sets--link_submit">Submit</button>`,
|
||||
$iconsUploadFile = web.html`<input type="file" accept="image/*" style="display:none">`,
|
||||
$iconsUploadSubmit = web.render(
|
||||
web.html`<button class="icon_sets--upload"></button>`,
|
||||
'Upload an image',
|
||||
$iconsUploadFile
|
||||
),
|
||||
// sets
|
||||
$setsList = web.html`<div class="icon_sets--list"></div>`,
|
||||
$recentUploadsTitle = await renderSetTitle(
|
||||
'recent_uploads',
|
||||
'Recent',
|
||||
web.html`<p><b>Click</b> to reuse an icon <br><b>Shift-click</b> to remove it</p>`
|
||||
),
|
||||
$recentUploads = web.html`<div class="icon_sets--set"></div>`,
|
||||
// container
|
||||
$iconsScroller = web.render(
|
||||
web.html`<div class="icon_sets--scroller" style="display:none"></div>`,
|
||||
web.render(
|
||||
web.html`<div class="icon_sets--actions"></div>`,
|
||||
$iconsLinkInput,
|
||||
$iconsLinkSubmit,
|
||||
$iconsUploadSubmit
|
||||
),
|
||||
web.render($setsList, $recentUploadsTitle, $recentUploads)
|
||||
);
|
||||
|
||||
let $mediaMenu, $activeTabUnderline;
|
||||
const insertIconsTab = async (event) => {
|
||||
if (document.contains($mediaMenu)) return;
|
||||
|
||||
// prevent injection into file upload menus
|
||||
$mediaMenu = document.querySelector(mediaMenuSelector);
|
||||
if (!$mediaMenu || !$mediaMenu.textContent.includes('Emoji')) return;
|
||||
|
||||
const $emojiTab = document.querySelector(tabBtnSelector(1)),
|
||||
$emojiScroller = document.querySelector(mediaScrollerSelector),
|
||||
$emojiFilter = document.querySelector(mediaFilterSelector),
|
||||
$uploadTab = document.querySelector(tabBtnSelector(2)),
|
||||
$linkTab = document.querySelector(tabBtnSelector(3));
|
||||
$uploadTab.style.display = 'none';
|
||||
$linkTab.style.display = 'none';
|
||||
if ($activeTabUnderline) $activeTabUnderline.remove();
|
||||
$activeTabUnderline =
|
||||
$emojiTab.children[1] || $uploadTab.children[1] || $linkTab.children[1];
|
||||
$emojiTab.after($iconsTab);
|
||||
$emojiScroller.after($iconsScroller);
|
||||
|
||||
const renderRecentUploads = () => {
|
||||
web.empty($recentUploads);
|
||||
for (let i = recentUploads.length - 1; i >= 0; i--) {
|
||||
const { signed, url } = recentUploads[i],
|
||||
$icon = web.html`<span class="icon_sets--icon">
|
||||
<img src="${web.escape(signed)}">
|
||||
</span>`;
|
||||
web.render($recentUploads, $icon);
|
||||
$icon.addEventListener('click', (event) => {
|
||||
if (event.shiftKey) {
|
||||
recentUploads.splice(i, 1);
|
||||
db.set(['recent_uploads'], recentUploads);
|
||||
$icon.remove();
|
||||
} else setIcon(url);
|
||||
});
|
||||
}
|
||||
$recentUploads.style.height = `${$recentUploads.scrollHeight}px`;
|
||||
},
|
||||
renderSets = async () => {};
|
||||
|
||||
const displayIconsTab = (force = false) => {
|
||||
if ($iconsTab.contains($activeTabUnderline) && !force) return;
|
||||
web.render($iconsTab, $activeTabUnderline);
|
||||
$iconsScroller.style.display = '';
|
||||
$emojiScroller.style.display = 'none';
|
||||
$emojiFilter.style.display = 'none';
|
||||
renderRecentUploads();
|
||||
},
|
||||
displayEmojiTab = (force = false) => {
|
||||
if ($emojiTab.contains($activeTabUnderline) && !force) return;
|
||||
web.render($emojiTab, $activeTabUnderline);
|
||||
$iconsScroller.style.display = 'none';
|
||||
$emojiScroller.style.display = '';
|
||||
$emojiFilter.style.display = '';
|
||||
};
|
||||
// use onclick instead of eventlistener to override prev
|
||||
$iconsTab.onclick = displayIconsTab;
|
||||
$emojiTab.onclick = displayEmojiTab;
|
||||
// otherwise both may be visible on reopen
|
||||
displayEmojiTab(true);
|
||||
|
||||
async function setIcon(iconUrl) {
|
||||
// without this react gets upset
|
||||
displayEmojiTab();
|
||||
$linkTab.firstChild.click();
|
||||
await new Promise(requestAnimationFrame);
|
||||
|
||||
// call native setter, imitate human input
|
||||
const $notionLinkInput = $mediaMenu.querySelector(mediaLinkInputSelector),
|
||||
proto = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
|
||||
proto.set.call($notionLinkInput, iconUrl);
|
||||
const inputEvent = new Event('input', { bubbles: true }),
|
||||
enterKeydownEvent = new KeyboardEvent('keydown', {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
keyCode: 13,
|
||||
});
|
||||
$notionLinkInput.dispatchEvent(inputEvent);
|
||||
$notionLinkInput.dispatchEvent(enterKeydownEvent);
|
||||
}
|
||||
|
||||
const submitLinkIcon = () => {
|
||||
const url = $iconsLinkInput.firstElementChild.value;
|
||||
setIcon(url);
|
||||
recentUploads.push({ signed: notion.sign(url, notion.getPageID()), url: url });
|
||||
db.set(['recent_uploads'], recentUploads);
|
||||
};
|
||||
$iconsLinkInput.onkeyup = (event) => {
|
||||
if (event.code === 13) submitLinkIcon();
|
||||
};
|
||||
$iconsLinkSubmit.onclick = submitLinkIcon;
|
||||
|
||||
// upload file to aws, then submit link
|
||||
$iconsUploadSubmit.onclick = $iconsUploadFile.click;
|
||||
$iconsUploadFile.onchange = async (event) => {
|
||||
const file = event.target.files[0],
|
||||
url = await notion.upload(file);
|
||||
setIcon(url);
|
||||
recentUploads.push({ signed: notion.sign(url, notion.getPageID()), url: url });
|
||||
db.set(['recent_uploads'], recentUploads);
|
||||
};
|
||||
};
|
||||
web.addDocumentObserver(insertIconsTab, [mediaMenuSelector]);
|
||||
}
|
||||
3
repo/icon-sets/icons/remove.svg
Normal file
3
repo/icon-sets/icons/remove.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<polygon class="cls-1" points="18.72 16.6 14.12 12 18.72 7.4 16.6 5.28 12 9.88 7.4 5.28 5.28 7.4 9.88 12 5.28 16.6 7.4 18.72 12 14.12 16.6 18.72 18.72 16.6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 251 B |
3
repo/icon-sets/icons/restore.svg
Normal file
3
repo/icon-sets/icons/restore.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<polygon class="cls-1" points="20 10.5 13.5 10.5 13.5 4 10.5 4 10.5 10.5 4 10.5 4 13.5 10.5 13.5 10.5 20 13.5 20 13.5 13.5 20 13.5 20 10.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 234 B |
3
repo/icon-sets/icons/search.svg
Normal file
3
repo/icon-sets/icons/search.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
|
||||
<path d="M6.78027 13.6729C8.24805 13.6729 9.60156 13.1982 10.709 12.4072L14.875 16.5732C15.0684 16.7666 15.3232 16.8633 15.5957 16.8633C16.167 16.8633 16.5713 16.4238 16.5713 15.8613C16.5713 15.5977 16.4834 15.3516 16.29 15.1582L12.1504 11.0098C13.0205 9.86719 13.5391 8.45215 13.5391 6.91406C13.5391 3.19629 10.498 0.155273 6.78027 0.155273C3.0625 0.155273 0.0214844 3.19629 0.0214844 6.91406C0.0214844 10.6318 3.0625 13.6729 6.78027 13.6729ZM6.78027 12.2139C3.87988 12.2139 1.48047 9.81445 1.48047 6.91406C1.48047 4.01367 3.87988 1.61426 6.78027 1.61426C9.68066 1.61426 12.0801 4.01367 12.0801 6.91406C12.0801 9.81445 9.68066 12.2139 6.78027 12.2139Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
1
repo/icon-sets/icons/triangle.svg
Normal file
1
repo/icon-sets/icons/triangle.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 100 100" class="triangle"><polygon points="5.9,88.2 50,11.8 94.1,88.2" /></svg>
|
||||
|
After Width: | Height: | Size: 97 B |
185
repo/icon-sets/mod.js
Normal file
185
repo/icon-sets/mod.js
Normal file
@ -0,0 +1,185 @@
|
||||
// source => icon data
|
||||
const enhancerIconSets = new Map();
|
||||
getAsync(notionIconsUrl + 'icons.json', (iconsData) => {
|
||||
const data = JSON.parse(iconsData);
|
||||
(data.icons || data).forEach((set) => {
|
||||
enhancerIconSets.set(set.source, set);
|
||||
});
|
||||
});
|
||||
|
||||
// array
|
||||
let customIconSets;
|
||||
if (store().json) {
|
||||
const customData = JSON.parse(fs.readFileSync(store().json));
|
||||
customIconSets = customData.icons || customData;
|
||||
}
|
||||
|
||||
// convert icons data into renderable
|
||||
function loadIconSets() {
|
||||
const iconSets = new DocumentFragment();
|
||||
|
||||
if (customIconSets) {
|
||||
customIconSets.forEach((i) => {
|
||||
iconSets.appendChild(renderIconSet(i));
|
||||
});
|
||||
|
||||
// divider
|
||||
iconSets.appendChild(createElement('<div class="notion-icons--divider"></div>'));
|
||||
}
|
||||
|
||||
if (enhancerIconSets.size > 0) {
|
||||
enhancerIconSets.forEach((i, source) => {
|
||||
// ignore removed icon sets
|
||||
if (store().removedSets?.includes(source)) return;
|
||||
|
||||
i.sourceUrl = i.sourceUrl || notionIconsUrl + source;
|
||||
iconSets.appendChild(renderIconSet(i, true));
|
||||
});
|
||||
}
|
||||
|
||||
return iconSets;
|
||||
}
|
||||
|
||||
// returns icon set element
|
||||
function renderIconSet(iconData, enhancerSet = false) {
|
||||
const iconSet = createElement('<div class="notion-icons--icon-set"></div>');
|
||||
|
||||
try {
|
||||
const author = iconData.author
|
||||
? iconData.authorUrl
|
||||
? ` by <a target="_blank" href="${iconData.authorUrl}">${iconData.author}</a>`
|
||||
: ` by <span>${iconData.author}</span>`
|
||||
: '';
|
||||
|
||||
const toggle = createElement(`
|
||||
<div class="notion-icons--toggle">
|
||||
${menuIcons.triangle}
|
||||
<div class="notion-icons--author">${iconData.name}${author}</div>
|
||||
<div class="notion-icons--actions">
|
||||
<div class="notion-icons--spinner">
|
||||
<img src="/images/loading-spinner.4dc19970.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
const iconSetBody = createElement('<div class="notion-icons--body"></div>');
|
||||
|
||||
iconSet.append(toggle, iconSetBody);
|
||||
|
||||
const promiseArray = [];
|
||||
// render icons
|
||||
for (let i = 0; i < (iconData.count || iconData.source.length); i++) {
|
||||
const iconUrl = iconData.sourceUrl
|
||||
? Array.isArray(iconData.source)
|
||||
? `${iconData.sourceUrl}/${iconData.source[i]}.${iconData.extension}`
|
||||
: `${iconData.sourceUrl}/${iconData.source}_${i}.${iconData.extension}`
|
||||
: iconData.source[i];
|
||||
|
||||
const icon = createElement(`<div class="notion-icons--icon"></div>`);
|
||||
icon.innerHTML = enhancerSet
|
||||
? // load sprite sheet
|
||||
`<div style="background-image: url(${notionIconsUrl}${
|
||||
iconData.source
|
||||
}/sprite.png); background-position: 0 -${i * 32}px;"></div>`
|
||||
: `<img src="${iconUrl}" />`;
|
||||
|
||||
// add filters to filterMap
|
||||
const filters = [];
|
||||
|
||||
if (iconData.filter) {
|
||||
if (iconData.filter === 'source') {
|
||||
const filename = iconUrl.match(/.*\/(.+?)\./);
|
||||
if (filename?.length > 1) {
|
||||
filters.push(...filename[1].split(/[ \-_]/));
|
||||
}
|
||||
} else if (Array.isArray(iconData.filter)) {
|
||||
filters.push(...iconData.filter[i]);
|
||||
}
|
||||
icon.setAttribute('filter', filters.join(' '));
|
||||
}
|
||||
|
||||
// add set name and author to filters
|
||||
filters.push(...iconData.name.toLowerCase().split(' '));
|
||||
if (iconData.author) filters.push(...iconData.author.toLowerCase().split(' '));
|
||||
|
||||
filterMap.set(icon, filters);
|
||||
|
||||
// make sure icons load
|
||||
if (!enhancerSet) {
|
||||
promiseArray.push(
|
||||
new Promise((resolve, reject) => {
|
||||
icon.firstChild.onload = resolve;
|
||||
icon.firstChild.onerror = () => {
|
||||
reject();
|
||||
icon.classList.add('error');
|
||||
icon.innerHTML = '!';
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
garbageCollector.push(icon);
|
||||
icon.addEventListener('click', () => setPageIcon(iconUrl));
|
||||
iconSetBody.appendChild(icon);
|
||||
}
|
||||
|
||||
// hide spinner after all icons finish loading
|
||||
(async () => {
|
||||
const spinner = toggle.querySelector('.notion-icons--spinner'),
|
||||
loadPromise = Promise.all(promiseArray);
|
||||
loadPromise.then(
|
||||
() => spinner.remove(),
|
||||
() => {
|
||||
iconSet.classList.add('alert');
|
||||
spinner.remove();
|
||||
}
|
||||
);
|
||||
})();
|
||||
|
||||
// add remove icon set button
|
||||
if (enhancerSet) {
|
||||
const removeButton = createElement(
|
||||
`<div class="notion-icons--remove-button">${menuIcons.remove}</div>`
|
||||
);
|
||||
removeButton.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
removeIconSet(iconData);
|
||||
});
|
||||
iconSet.querySelector('.notion-icons--actions').appendChild(removeButton);
|
||||
}
|
||||
|
||||
// set up toggle
|
||||
toggle.addEventListener('click', (e) => {
|
||||
if (e.target.nodeName === 'A') return;
|
||||
toggleIconSet(iconSet);
|
||||
});
|
||||
|
||||
// hide by default?
|
||||
if (store().hide) requestAnimationFrame(() => toggleIconSet(iconSet));
|
||||
|
||||
// tooltip
|
||||
let timeout;
|
||||
iconSetBody.addEventListener('mouseover', (e) => {
|
||||
const el = e.target;
|
||||
if (!el.hasAttribute('filter')) return;
|
||||
|
||||
document.querySelector('.notion-icons--tooltip')?.remove();
|
||||
timeout = setTimeout(() => {
|
||||
renderTooltip(el, el.getAttribute('filter'));
|
||||
}, 300);
|
||||
});
|
||||
iconSetBody.addEventListener('mouseout', (e) => {
|
||||
const el = e.target;
|
||||
if (!el.hasAttribute('filter')) return;
|
||||
|
||||
document.querySelector('.notion-icons--tooltip')?.remove();
|
||||
clearTimeout(timeout);
|
||||
});
|
||||
} catch (err) {
|
||||
iconSet.classList.add('error');
|
||||
iconSet.innerHTML = `Invalid Icon Set: ${iconData.name}`;
|
||||
}
|
||||
|
||||
return iconSet;
|
||||
}
|
||||
35
repo/icon-sets/mod.json
Normal file
35
repo/icon-sets/mod.json
Normal file
@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "icon sets",
|
||||
"id": "2d1f4809-9581-40dd-9bf3-4239db406483",
|
||||
"version": "0.4.0",
|
||||
"description": "upload, save and reuse custom icons directly from the icon picker.",
|
||||
"tags": ["integration", "customisation"],
|
||||
"authors": [
|
||||
{
|
||||
"name": "dragonwocky",
|
||||
"email": "thedragonring.bod@gmail.com",
|
||||
"homepage": "https://dragonwocky.me/",
|
||||
"avatar": "https://dragonwocky.me/avatar.jpg"
|
||||
}
|
||||
],
|
||||
"js": {
|
||||
"client": ["client.mjs"]
|
||||
},
|
||||
"css": {
|
||||
"client": ["client.css"]
|
||||
},
|
||||
"options": [
|
||||
{
|
||||
"type": "toggle",
|
||||
"key": "default_sets",
|
||||
"label": "load default icon sets from github",
|
||||
"value": true
|
||||
},
|
||||
{
|
||||
"type": "file",
|
||||
"key": "json",
|
||||
"label": "custom icon sets (.json)",
|
||||
"extensions": ["json"]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -283,7 +283,7 @@ const $modLists = {},
|
||||
$search,
|
||||
web.html`${await components.feather('search', { class: 'input-icon' })}`
|
||||
),
|
||||
message ? web.html`<p class="main-message">${web.escape(message)}</p>` : '',
|
||||
message ? web.render(web.html`<p class="main-message"></p>`, message) : '',
|
||||
$list
|
||||
);
|
||||
}
|
||||
@ -322,7 +322,8 @@ $notionNavItem.addEventListener('click', env.focusNotion);
|
||||
|
||||
const $coreNavItem = web.html`<a href="?view=core" class="nav-item">core</a>`,
|
||||
$extensionsNavItem = web.html`<a href="?view=extensions" class="nav-item">extensions</a>`,
|
||||
$themesNavItem = web.html`<a href="?view=themes" class="nav-item">themes</a>`;
|
||||
$themesNavItem = web.html`<a href="?view=themes" class="nav-item">themes</a>`,
|
||||
$integrationsNavItem = web.html`<a href="?view=integrations" class="nav-item">integrations</a>`;
|
||||
|
||||
web.render(
|
||||
document.body,
|
||||
@ -336,6 +337,7 @@ web.render(
|
||||
$coreNavItem,
|
||||
$extensionsNavItem,
|
||||
$themesNavItem,
|
||||
$integrationsNavItem,
|
||||
web.html`<a href="https://notion-enhancer.github.io" class="nav-item">docs</a>`,
|
||||
web.html`<a href="https://discord.gg/sFWPXtA" class="nav-item">community</a>`
|
||||
),
|
||||
@ -367,10 +369,9 @@ router.addView('core', async () => {
|
||||
|
||||
await generators.modList(
|
||||
'extension',
|
||||
`Extensions modify and extend the functionality
|
||||
or layout of the Notion client. They don't interfere
|
||||
with Notion's data structures, so they can be safely
|
||||
enabled or disabled at any time.`
|
||||
`Extensions build on the functionality and layout of
|
||||
the Notion client, modifying and interacting with
|
||||
existing interfaces.`
|
||||
);
|
||||
router.addView('extensions', async () => {
|
||||
web.empty($main);
|
||||
@ -391,6 +392,18 @@ router.addView('themes', async () => {
|
||||
return web.render($main, await generators.modList('theme'));
|
||||
});
|
||||
|
||||
await generators.modList(
|
||||
'integration',
|
||||
web.html`<span class="danger">Integrations are extensions that use an unofficial API
|
||||
to access and modify content. They are used just like
|
||||
normal extensions, but may be more dangerous to use.</span>`
|
||||
);
|
||||
router.addView('integrations', async () => {
|
||||
web.empty($main);
|
||||
selectNavItem($integrationsNavItem);
|
||||
return web.render($main, await generators.modList('integration'));
|
||||
});
|
||||
|
||||
router.setDefaultView('extensions');
|
||||
|
||||
router.addQueryListener('id', openSidebarMenu);
|
||||
|
||||
@ -86,6 +86,7 @@ const customClasses = {
|
||||
'file-latest': apply`block w-full text-left text-foreground-secondary text-xs mt-2 hover:line-through cursor-pointer`,
|
||||
'search-container': apply`block mx-2.5 my-2.5 relative`,
|
||||
'search': apply`input pr-12`,
|
||||
'danger': apply`bg-red-paragraph text-red-paragraph-text`,
|
||||
};
|
||||
|
||||
setup({
|
||||
|
||||
@ -24,6 +24,7 @@
|
||||
"right-to-left",
|
||||
"simpler-databases",
|
||||
"emoji-sets",
|
||||
"icon-sets",
|
||||
"bypass-preview",
|
||||
"topbar-icons",
|
||||
"word-counter",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user