mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 05:09:03 +00:00
notion-icons: add search bar (notion-enhancer/icons#4)
+ overall optimizations
This commit is contained in:
CloudHill
parent
2245f8ccdd
commit
2b18b2ef68
@ -6,7 +6,9 @@
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.hide-active-bar > :nth-child(2) {
|
||||
/* tab */
|
||||
|
||||
[hide-active-bar] > :nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -15,6 +17,22 @@
|
||||
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,
|
||||
@ -24,6 +42,8 @@
|
||||
box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important;
|
||||
}
|
||||
|
||||
/* container */
|
||||
|
||||
#notion-icons {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
@ -36,17 +56,82 @@
|
||||
align-items: stretch;
|
||||
background: var(--theme--card);
|
||||
border-radius: 3px;
|
||||
padding: 8px 12px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
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--select_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;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 600;
|
||||
border-radius: 2px;
|
||||
@ -66,33 +151,19 @@
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* icon set header/toggle */
|
||||
|
||||
.notion-icons--toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
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--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--toggle a {
|
||||
color: var(--theme-text);
|
||||
transition: color 20ms ease-in;
|
||||
}
|
||||
.notion-icons--toggle a:hover {
|
||||
color: var(--theme--primary);
|
||||
}
|
||||
|
||||
.notion-icons--icon-set.alert .notion-icons--toggle {
|
||||
color: var(--theme--line_yellow-text);
|
||||
background: var(--theme--line_yellow);
|
||||
@ -104,6 +175,32 @@
|
||||
background: var(--theme--select_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;
|
||||
@ -114,34 +211,49 @@
|
||||
transition: height 200ms ease-in, opacity 200ms ease-in;
|
||||
}
|
||||
|
||||
.hidden-set {
|
||||
/* hidden icon set */
|
||||
|
||||
.notion-icons--icon-set[hidden-set] {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.hidden-set .notion-icons--toggle {
|
||||
.notion-icons--icon-set[hidden-set] .notion-icons--toggle {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.hidden-set .triangle {
|
||||
.notion-icons--icon-set[hidden-set] .triangle {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
.hidden-set .notion-icons--body {
|
||||
.notion-icons--icon-set[hidden-set] .notion-icons--body {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* icons */
|
||||
|
||||
.notion-icons--icon {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background 20ms ease-in;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
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 {
|
||||
@ -154,8 +266,53 @@
|
||||
background: var(--theme--select_yellow);
|
||||
}
|
||||
|
||||
/* tooltip */
|
||||
|
||||
.notion-icons--extra {
|
||||
.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;
|
||||
@ -163,6 +320,8 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* spinner */
|
||||
|
||||
.notion-icons--spinner {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
@ -173,6 +332,8 @@
|
||||
animation: rotation 1.3s infinite linear;
|
||||
}
|
||||
|
||||
/* remove button */
|
||||
|
||||
.notion-icons--remove-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -201,15 +362,11 @@
|
||||
.notion-icons--remove-button svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: inherit;
|
||||
fill: var(--theme--text_ui_info);
|
||||
z-index: 1;
|
||||
}
|
||||
.notion-icons--restore-button svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: inherit;
|
||||
}
|
||||
|
||||
/* restore icon sets modal */
|
||||
|
||||
.notion-icons--overlay-container {
|
||||
position: fixed;
|
||||
@ -242,6 +399,8 @@
|
||||
transition: background 0.4s ease;
|
||||
}
|
||||
|
||||
/* animation */
|
||||
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
|
||||
3
mods/notion-icons/icons/search.svg
Normal file
3
mods/notion-icons/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
mods/notion-icons/icons/triangle.svg
Normal file
1
mods/notion-icons/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 |
@ -1,6 +1,6 @@
|
||||
/*
|
||||
* notion-icons
|
||||
* (c) 2019 jayhxmo (https://jaymo.io/)
|
||||
* (c) 2020 jayhxmo (https://jaymo.io/)
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
@ -10,7 +10,8 @@
|
||||
|
||||
const { createElement } = require('../../pkg/helpers.js'),
|
||||
fs = require('fs-extra'),
|
||||
path = require('path');
|
||||
path = require('path'),
|
||||
notionIconsUrl = 'https://raw.githubusercontent.com/notion-enhancer/icons/main/';
|
||||
|
||||
module.exports = {
|
||||
id: '2d1f4809-9581-40dd-9bf3-4239db406483',
|
||||
@ -18,7 +19,7 @@ module.exports = {
|
||||
name: 'notion icons',
|
||||
desc:
|
||||
'use custom icon sets directly in notion.',
|
||||
version: '1.0.0',
|
||||
version: '1.2.0',
|
||||
author: 'jayhxmo',
|
||||
options: [
|
||||
{
|
||||
@ -36,9 +37,9 @@ module.exports = {
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
let garbageCollector = [];
|
||||
const iconsUrl = 'https://raw.githubusercontent.com/notion-enhancer/icons/main/';
|
||||
|
||||
let garbageCollector = [],
|
||||
filterMap = new WeakMap();
|
||||
|
||||
function getAsync(urlString, callback) {
|
||||
let httpReq = new XMLHttpRequest();
|
||||
httpReq.onreadystatechange = function() {
|
||||
@ -48,120 +49,358 @@ module.exports = {
|
||||
httpReq.send(null);
|
||||
}
|
||||
|
||||
let modalIcons;
|
||||
const menuIcons = {};
|
||||
(async () => {
|
||||
modalIcons = {
|
||||
remove: await fs.readFile( path.resolve(__dirname, 'icons/remove.svg') ),
|
||||
restore: await fs.readFile( path.resolve(__dirname, 'icons/restore.svg') ),
|
||||
}
|
||||
menuIcons.triangle = await fs.readFile( path.resolve(__dirname, 'icons/triangle.svg') );
|
||||
menuIcons.remove = await fs.readFile( path.resolve(__dirname, 'icons/remove.svg' ) );
|
||||
menuIcons.restore = await fs.readFile( path.resolve(__dirname, 'icons/restore.svg' ) );
|
||||
menuIcons.search = await fs.readFile( path.resolve(__dirname, 'icons/search.svg' ) );
|
||||
})();
|
||||
|
||||
// Retrieve icons data
|
||||
let notionIconsData;
|
||||
getAsync(iconsUrl + 'icons.json', iconsData => {
|
||||
notionIconsData = JSON.parse(iconsData);
|
||||
// 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);
|
||||
})
|
||||
});
|
||||
|
||||
// Retrieve custom icons data
|
||||
let customIconsData;
|
||||
// array
|
||||
let customIconSets;
|
||||
if (store().json) {
|
||||
customIconsData = JSON.parse(
|
||||
const customData = JSON.parse(
|
||||
fs.readFileSync(store().json)
|
||||
)
|
||||
customIconSets = customData.icons || customData;
|
||||
}
|
||||
|
||||
function getTab(n, button = false) {
|
||||
return document.querySelector(
|
||||
`.notion-media-menu > :first-child > :first-child > :nth-child(${n}) ${button ? 'div' : ''}`
|
||||
);
|
||||
}
|
||||
|
||||
function isCurrentTab(n) {
|
||||
return getTab(n).childNodes.length > 1;
|
||||
}
|
||||
|
||||
// Submits the icon's url as an image link
|
||||
function setPageIcon(iconUrl) {
|
||||
const input = document.querySelector('input[type=url]');
|
||||
|
||||
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
|
||||
window.HTMLInputElement.prototype, 'value'
|
||||
).set;
|
||||
nativeInputValueSetter.call(input, iconUrl);
|
||||
|
||||
input.dispatchEvent(
|
||||
new Event('input', { bubbles: true })
|
||||
);
|
||||
|
||||
input.dispatchEvent(
|
||||
new KeyboardEvent('keydown', { bubbles: true, cancelable: true, keyCode: 13 })
|
||||
);
|
||||
|
||||
removeIcons();
|
||||
}
|
||||
// notion icons overlay
|
||||
|
||||
function addIconsTab() {
|
||||
// Prevent icons tab duplication
|
||||
if (getTab(5)) {
|
||||
removeIcons();
|
||||
return;
|
||||
}
|
||||
// Change 'Upload an image' to 'Upload'
|
||||
// prevent icons tab duplication
|
||||
if (getTab(5))
|
||||
return removeIconsOverlay();
|
||||
|
||||
// change 'Upload an image' to 'Upload'
|
||||
getTab(2, true).innerText = 'Upload';
|
||||
|
||||
// Initialize icons tab
|
||||
// initialize icons tab
|
||||
const iconsTab = getTab(3).cloneNode(true);
|
||||
iconsTab.className = 'notion-icons--tab';
|
||||
iconsTab.firstChild.innerText = 'Icons';
|
||||
iconsTab.firstChild.addEventListener('click', renderIconsOverlay);
|
||||
|
||||
// Insert icons tab
|
||||
// insert icons tab
|
||||
const tabStrip = getTab(1).parentElement;
|
||||
tabStrip.insertBefore(iconsTab, tabStrip.lastChild);
|
||||
|
||||
// Remove the icons overlay when clicking...
|
||||
const closeTriggers = [
|
||||
// The fog layer
|
||||
initCloseTriggers();
|
||||
}
|
||||
|
||||
function renderIconsOverlay() {
|
||||
if (!isCurrentTab(4)) {
|
||||
// switch to 3rd tab so that the link can be input in the underlay
|
||||
if (!isCurrentTab(3)) getTab(3, true).click();
|
||||
|
||||
if (
|
||||
store().removedSets?.length > 0 &&
|
||||
enhancerIconSets.size > 0
|
||||
)
|
||||
addRestoreButton();
|
||||
|
||||
// set active bar on icons tab
|
||||
const iconsTab = getTab(4),
|
||||
activeBar = createElement(
|
||||
`<div id="notion-icons--active-bar"></div>`
|
||||
);
|
||||
iconsTab.style.position = 'relative';
|
||||
iconsTab.appendChild(activeBar);
|
||||
getTab(3).setAttribute('hide-active-bar', '');
|
||||
|
||||
// create icons overlay
|
||||
const notionIcons = createElement(
|
||||
'<div id="notion-icons"></div>'
|
||||
);
|
||||
|
||||
// render search bar
|
||||
const search = createElement(`
|
||||
<div class="notion-icons--search notion-focusable">
|
||||
${menuIcons.search}
|
||||
<input placeholder="Filter…" type="text">
|
||||
</div>
|
||||
`),
|
||||
searchInput = search.lastElementChild;
|
||||
|
||||
searchInput.addEventListener('input', () => {
|
||||
filterIcons(searchInput.value);
|
||||
});
|
||||
|
||||
// render scroller and icon sets
|
||||
const scroller = createElement(`
|
||||
<div class="notion-icons--scroller"></div>
|
||||
`);
|
||||
scroller.appendChild( loadIconSets() );
|
||||
|
||||
notionIcons.append(search, scroller);
|
||||
|
||||
// insert icons overlay
|
||||
document.querySelector('.notion-media-menu > .notion-scroller')
|
||||
.appendChild(notionIcons);
|
||||
|
||||
// focus on search bar
|
||||
requestAnimationFrame(() => {
|
||||
searchInput.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
function removeIconsOverlay() {
|
||||
const elements = [
|
||||
document.getElementById('notion-icons'),
|
||||
document.getElementById('notion-icons--active-bar'),
|
||||
document.querySelector('.notion-icons--restore-button'),
|
||||
document.querySelector('.notion-icons--tooltip'),
|
||||
]
|
||||
elements.forEach(el => {
|
||||
if (el) el.remove();
|
||||
})
|
||||
|
||||
getTab(4).style.position = '';
|
||||
|
||||
if (getTab(3))
|
||||
getTab(3).removeAttribute('hide-active-bar');
|
||||
|
||||
if (
|
||||
document.querySelector('.notion-icons--overlay-container')
|
||||
) closeRestoreOverlay();
|
||||
|
||||
if (garbageCollector.length) {
|
||||
for (let i = 0; i < garbageCollector.length; i++) {
|
||||
garbageCollector[i] = null;
|
||||
}
|
||||
garbageCollector = [];
|
||||
}
|
||||
}
|
||||
|
||||
function initCloseTriggers() {
|
||||
// remove the icons overlay when clicking...
|
||||
const triggers = [
|
||||
// the fog layer
|
||||
document.querySelector('.notion-overlay-container [style*="width: 100vw; height: 100vh;"]'),
|
||||
// The first three buttons
|
||||
...Array.from( Array(3), (e, i) => getTab(i + 1, true) ),
|
||||
// The remove button
|
||||
getTab(5).lastChild,
|
||||
// the first three buttons
|
||||
...[1, 2, 3].map( n => getTab(n, true) ),
|
||||
// the remove button
|
||||
(getTab(5) || getTab(4)).lastElementChild,
|
||||
];
|
||||
|
||||
closeTriggers.forEach(trigger => {
|
||||
trigger.addEventListener('click', removeIcons);
|
||||
garbageCollector.push(trigger);
|
||||
triggers.forEach(t => {
|
||||
t.addEventListener('click', removeIconsOverlay);
|
||||
garbageCollector.push(t);
|
||||
})
|
||||
|
||||
// Remove the icons overlay when pressing the Escape key
|
||||
// remove the icons overlay when pressing the Escape key
|
||||
document.querySelector('.notion-media-menu')
|
||||
.addEventListener('keydown', e => {
|
||||
if (e.keyCode === 27) removeIcons();
|
||||
if (e.keyCode === 27) removeIconsOverlay();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// restore overlay
|
||||
|
||||
function addRestoreButton() {
|
||||
const buttons = getTab(5) ? getTab(5) : getTab(4);
|
||||
const restoreButton = buttons.lastChild.cloneNode(true);
|
||||
const buttons = getTab(1).parentElement.lastElementChild;
|
||||
|
||||
const restoreButton = buttons.lastElementChild.cloneNode(true);
|
||||
restoreButton.className = 'notion-icons--restore-button';
|
||||
restoreButton.innerHTML = modalIcons.restore;
|
||||
buttons.prepend(restoreButton);
|
||||
restoreButton.innerHTML = menuIcons.restore;
|
||||
restoreButton.addEventListener('click', renderRestoreOverlay);
|
||||
|
||||
buttons.prepend(restoreButton);
|
||||
}
|
||||
|
||||
function renderRestoreOverlay() {
|
||||
if (!store().removedSets) return;
|
||||
|
||||
store().removedSets.sort((a, b) => {
|
||||
const setA = a.name.toLowerCase(),
|
||||
setB = b.name.toLowerCase();
|
||||
|
||||
if (setA < setB) return -1;
|
||||
if (setA > setB) return 1;
|
||||
return 0;
|
||||
});
|
||||
store().removedSets.sort();
|
||||
|
||||
const overlayContainer = createElement(`
|
||||
<div class="notion-icons--overlay-container"></div>
|
||||
@ -181,23 +420,25 @@ module.exports = {
|
||||
<div class="notion-icons--restore"></div>
|
||||
`)
|
||||
|
||||
store().removedSets.forEach(source => {
|
||||
restoreOverlay.appendChild( renderRestoreItem(source) );
|
||||
})
|
||||
|
||||
overlayContainer.appendChild(div);
|
||||
div.firstElementChild.appendChild(restoreOverlay);
|
||||
|
||||
// Fade in
|
||||
// fade in
|
||||
restoreOverlay.animate(
|
||||
[ {opacity: 0}, {opacity: 1} ],
|
||||
{ duration: 200 }
|
||||
);
|
||||
|
||||
store().removedSets.forEach(iconData => {
|
||||
const restoreItem = renderRestoreItem(iconData);
|
||||
restoreOverlay.appendChild(restoreItem);
|
||||
})
|
||||
}
|
||||
|
||||
function renderRestoreItem(iconData) {
|
||||
const iconUrl = `${iconData.sourceUrl}/${iconData.source}_${0}.${iconData.extension}`;
|
||||
function renderRestoreItem(source) {
|
||||
const iconData = enhancerIconSets.get(source);
|
||||
const iconUrl = `
|
||||
${iconData.sourceUrl || (notionIconsUrl + source)}/${source}_${0}.${iconData.extension}
|
||||
`;
|
||||
const restoreItem = createElement(`
|
||||
<div class="notion-icons--removed-set">
|
||||
<div style="flex-grow: 0; flex-shrink: 0; width: 32px; height: 32px;">
|
||||
@ -213,245 +454,161 @@ module.exports = {
|
||||
function closeRestoreOverlay() {
|
||||
const overlayContainer = document.querySelector('.notion-icons--overlay-container');
|
||||
overlayContainer.removeEventListener('click', closeRestoreOverlay);
|
||||
// Fade out
|
||||
// fade out
|
||||
document.querySelector('.notion-icons--restore').animate(
|
||||
[ {opacity: 1}, {opacity: 0} ],
|
||||
{ duration: 200 }
|
||||
).onfinish = () => overlayContainer.remove();
|
||||
}
|
||||
|
||||
function renderIconsOverlay() {
|
||||
if (!isCurrentTab(4)) {
|
||||
// Switch to 3rd tab so that the link can be inputed in the underlay
|
||||
if (!isCurrentTab(3)) getTab(3, true).click();
|
||||
// icon set actions
|
||||
|
||||
if (
|
||||
store().removedSets &&
|
||||
store().removedSets.length > 0
|
||||
) {
|
||||
addRestoreButton();
|
||||
}
|
||||
function toggleIconSet(iconSet, hide) {
|
||||
const isHidden = iconSet.hasAttribute('hidden-set');
|
||||
if (hide == null) hide = !isHidden;
|
||||
|
||||
// Set active bar on icons tab
|
||||
const iconsTab = getTab(4);
|
||||
const activeBar = createElement(
|
||||
`<div id="notion-icons--active-bar"></div>`
|
||||
)
|
||||
activeBar.style = 'border-bottom: 2px solid var(--theme--text); position: absolute; bottom: -1px; left: 8px; right: 8px;';
|
||||
iconsTab.appendChild(activeBar);
|
||||
getTab(4).style.position = 'relative';
|
||||
getTab(3).className = 'hide-active-bar';
|
||||
|
||||
// Convert icons data into renderable
|
||||
const iconSets = [];
|
||||
|
||||
if (customIconsData && customIconsData.icons) {
|
||||
customIconsData.icons.forEach(i => {
|
||||
iconSets.push( renderIconSet(i) );
|
||||
});
|
||||
|
||||
// Divider
|
||||
iconSets.push(
|
||||
createElement(
|
||||
'<div style="height: 1px; margin-bottom: 9px; border-bottom: 1px solid var(--theme--table-border);"></div>'
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
if (notionIconsData && notionIconsData.icons) {
|
||||
notionIconsData.icons.forEach(i => {
|
||||
i.sourceUrl = i.sourceUrl || (iconsUrl + i.source);
|
||||
if ( store().removedSets ) {
|
||||
for (let iconData of store().removedSets) {
|
||||
if (iconData.source === i.source) return;
|
||||
}
|
||||
}
|
||||
|
||||
i.enhancerIcons = true;
|
||||
iconSets.push( renderIconSet(i) );
|
||||
});
|
||||
}
|
||||
|
||||
// Create icons overlay
|
||||
const notionIcons = createElement(
|
||||
'<div id="notion-icons"></div>'
|
||||
const body = iconSet.lastChild;
|
||||
if (hide && !isHidden) {
|
||||
iconSet.setAttribute('hidden-set', '');
|
||||
body.style.height = body.offsetHeight + 'px';
|
||||
requestAnimationFrame(
|
||||
() => body.style.height = 0
|
||||
);
|
||||
iconSets.forEach( set => notionIcons.appendChild(set) );
|
||||
|
||||
// Insert icons overlay
|
||||
document.querySelector('.notion-media-menu > .notion-scroller')
|
||||
.appendChild(notionIcons);
|
||||
}
|
||||
}
|
||||
else if (!hide && isHidden) {
|
||||
iconSet.removeAttribute('hidden-set');
|
||||
// get height
|
||||
body.style.height = '';
|
||||
const height = body.offsetHeight;
|
||||
body.style.height = 0;
|
||||
|
||||
function renderIconSet(iconData) {
|
||||
const iconSet = createElement('<div class="notion-icons--icon-set"></div>')
|
||||
|
||||
try {
|
||||
const authorText = iconData.author
|
||||
? iconData.authorUrl
|
||||
? ` by <a target="_blank" href="${iconData.authorUrl}" style="opacity: 0.6;">${iconData.author}</a>`
|
||||
: ` by <span style="opacity: 0.6;">${iconData.author}</span>`
|
||||
: '';
|
||||
|
||||
const iconSetToggle = createElement(
|
||||
`<div class="notion-icons--toggle">
|
||||
<svg viewBox="0 0 100 100" class="triangle"><polygon points="5.9,88.2 50,11.8 94.1,88.2"></polygon></svg>
|
||||
<div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${iconData.name}${authorText}</div>
|
||||
<div class="notion-icons--extra">
|
||||
<div class="notion-icons--spinner">
|
||||
<img src="/images/loading-spinner.4dc19970.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
requestAnimationFrame(
|
||||
() => body.style.height = height + 'px'
|
||||
);
|
||||
|
||||
const iconSetBody = createElement(
|
||||
'<div class="notion-icons--body"></div>'
|
||||
setTimeout(
|
||||
() => body.style.height = '', 200
|
||||
);
|
||||
|
||||
iconSet.appendChild(iconSetToggle);
|
||||
iconSet.appendChild(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>`);
|
||||
if (iconData.enhancerIcons) {
|
||||
// Load sprite sheet
|
||||
icon.innerHTML = `
|
||||
<div style="width: 32px; height: 32px; background: url(${iconsUrl}${iconData.source}/sprite.png) 0 -${i * 32}px no-repeat; background-size: 32px;">
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
icon.innerHTML = `<img src="${iconUrl}" />`;
|
||||
// Make sure icons load
|
||||
promiseArray.push(
|
||||
new Promise((resolve, reject) => {
|
||||
icon.firstChild.onload = resolve;
|
||||
icon.firstChild.onerror = () => {
|
||||
reject();
|
||||
icon.classList.add('error');
|
||||
icon.innerHTML = '!';
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
iconSetBody.appendChild(icon);
|
||||
garbageCollector.push(icon);
|
||||
icon.addEventListener('click', () => setPageIcon(iconUrl));
|
||||
}
|
||||
|
||||
// Hide spinner after all icons finish loading
|
||||
(async () => {
|
||||
const spinner = iconSetToggle.querySelector('.notion-icons--spinner'),
|
||||
loadPromise = Promise.all(promiseArray);
|
||||
loadPromise.then(
|
||||
() => spinner.remove(),
|
||||
() => {
|
||||
iconSet.classList.add('alert')
|
||||
spinner.remove();
|
||||
}
|
||||
)
|
||||
})();
|
||||
|
||||
// Add hide icon set button
|
||||
if (iconData.enhancerIcons) {
|
||||
const removeButton = createElement(
|
||||
'<div class="notion-icons--remove-button"></div>'
|
||||
);
|
||||
removeButton.innerHTML = modalIcons.remove;
|
||||
removeButton.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
removeIconSet(iconData)
|
||||
});
|
||||
iconSet.querySelector('.notion-icons--extra')
|
||||
.appendChild(removeButton);
|
||||
}
|
||||
|
||||
// Set up Toggle
|
||||
requestAnimationFrame(() => {
|
||||
iconSetBody.style.height = iconSetBody.style.maxHeight = `${iconSetBody.offsetHeight}px`;
|
||||
if (store().removed) iconSetToggle.click();
|
||||
});
|
||||
|
||||
iconSetToggle.addEventListener('click', e => {
|
||||
if (e.target.nodeName === 'A') return;
|
||||
toggleIconSet(iconSet);
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
iconSet.classList.add('error');
|
||||
iconSet.innerHTML = `Invalid Icon Set: ${iconData.name}`;
|
||||
}
|
||||
|
||||
return iconSet;
|
||||
}
|
||||
|
||||
function toggleIconSet(iconSet) {
|
||||
iconSet.classList.toggle('hidden-set');
|
||||
const iconSetBody = iconSet.lastChild;
|
||||
if (iconSetBody) {
|
||||
iconSetBody.style.height = iconSet.classList.contains('hidden-set')
|
||||
? 0
|
||||
: iconSetBody.style.maxHeight;
|
||||
}
|
||||
}
|
||||
|
||||
function removeIconSet(iconData) {
|
||||
if (!store().removedSets) store().removedSets = [];
|
||||
for (const hiddenIconData of store().removedSets) {
|
||||
if (hiddenIconData.source === iconData.source) return;
|
||||
}
|
||||
store().removedSets.push(iconData);
|
||||
removeIcons();
|
||||
if (!store().removedSets.includes(iconData.source))
|
||||
store().removedSets.push(iconData.source);
|
||||
removeIconsOverlay();
|
||||
renderIconsOverlay();
|
||||
}
|
||||
|
||||
function restoreIconSet(iconData) {
|
||||
if (!store().removedSets) return;
|
||||
for (let i = 0; i < store().removedSets.length; i++) {
|
||||
if (store().removedSets[i].source === iconData.source)
|
||||
store().removedSets.splice(i, 1);
|
||||
}
|
||||
removeIcons();
|
||||
store().removedSets = store().removedSets
|
||||
.filter(source => source !== iconData.source);
|
||||
removeIconsOverlay();
|
||||
renderIconsOverlay();
|
||||
}
|
||||
|
||||
function removeIcons() {
|
||||
const notionIcons = document.getElementById('notion-icons'),
|
||||
activeBar = document.getElementById('notion-icons--active-bar'),
|
||||
restoreButton = document.querySelector('.notion-icons--restore-button'),
|
||||
overlayContainer = document.querySelector('.notion-icons--overlay-container');
|
||||
// other actions
|
||||
|
||||
if (notionIcons)
|
||||
notionIcons.remove();
|
||||
// submit the icon's url as an image link
|
||||
function setPageIcon(iconUrl) {
|
||||
const input = document.querySelector('.notion-media-menu input[type=url]');
|
||||
|
||||
if (activeBar) {
|
||||
activeBar.remove();
|
||||
getTab(4).style.position = '';
|
||||
}
|
||||
if (getTab(3)) getTab(3).className = '';
|
||||
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
|
||||
window.HTMLInputElement.prototype, 'value'
|
||||
).set;
|
||||
nativeInputValueSetter.call(input, iconUrl);
|
||||
|
||||
if (restoreButton)
|
||||
restoreButton.remove();
|
||||
input.dispatchEvent(
|
||||
new Event('input', { bubbles: true })
|
||||
);
|
||||
|
||||
if (overlayContainer)
|
||||
closeRestoreOverlay();
|
||||
input.dispatchEvent(
|
||||
new KeyboardEvent('keydown', { bubbles: true, cancelable: true, keyCode: 13 })
|
||||
);
|
||||
|
||||
if (garbageCollector.length) {
|
||||
for (let i = 0; i < garbageCollector.length; i++) {
|
||||
garbageCollector[i] = null;
|
||||
removeIconsOverlay();
|
||||
}
|
||||
|
||||
function filterIcons(input) {
|
||||
const iconSets = document.querySelectorAll('.notion-icons--icon-set');
|
||||
if (!iconSets) return;
|
||||
|
||||
// show all sets and icons
|
||||
if (!input) return iconSets.forEach(set => {
|
||||
set.style.display = '';
|
||||
set.querySelectorAll('.notion-icons--icon')
|
||||
.forEach(i => i.style.display = '');
|
||||
});
|
||||
// split input into an array
|
||||
else input = input.toLowerCase().trim().split(' ');
|
||||
|
||||
const findMatch = icon => {
|
||||
const iconFilters = filterMap.get(icon).slice();
|
||||
|
||||
// match whole words for the first terms
|
||||
if (input.length > 1) {
|
||||
let index;
|
||||
for (let i of input.slice(0, -1)) {
|
||||
if (
|
||||
( index = iconFilters.indexOf(i) ) >= 0
|
||||
) {
|
||||
iconFilters.splice(index, 1);
|
||||
continue;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
garbageCollector = [];
|
||||
|
||||
// match partially for the last term
|
||||
for (let iconFilter of iconFilters) {
|
||||
if (iconFilter.includes(input[input.length - 1])) {
|
||||
return true;
|
||||
};
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
iconSets.forEach(set => {
|
||||
let found = false;
|
||||
|
||||
set.querySelectorAll('.notion-icons--icon')
|
||||
.forEach(i => {
|
||||
// hide icon set
|
||||
if (!filterMap.has(i)) return;
|
||||
|
||||
if (findMatch(i)) {
|
||||
i.style.display = '';
|
||||
found = true;
|
||||
} else i.style.display = 'none';
|
||||
});
|
||||
|
||||
if (!found) set.style.display = 'none';
|
||||
else {
|
||||
set.style.display = '';
|
||||
toggleIconSet(set, false);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function renderTooltip(el, text) {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const overlayContainer = document.querySelector('.notion-overlay-container')
|
||||
|
||||
const tooltip = createElement(`
|
||||
<div class="notion-icons--tooltip" style="left: ${rect.left}px; top: ${rect.top}px;">
|
||||
<div></div>
|
||||
</div>
|
||||
`), tooltipText = createElement(
|
||||
`<div class="notion-icons--tooltip-text">${text}</div>`
|
||||
);
|
||||
|
||||
tooltip.firstElementChild.appendChild(tooltipText);
|
||||
overlayContainer.appendChild(tooltip);
|
||||
|
||||
// prevent tooltip from rendering outside the window
|
||||
const left = (tooltipText.offsetWidth / 2) - (rect.width / 2) - rect.left + 4;
|
||||
if (left > 0) tooltipText.style.left = left + 'px';
|
||||
}
|
||||
|
||||
document.addEventListener('readystatechange', () => {
|
||||
@ -465,16 +622,11 @@ module.exports = {
|
||||
const observer = new MutationObserver((list, observer) => {
|
||||
for ( let { addedNodes } of list) {
|
||||
if (
|
||||
addedNodes[0] &&
|
||||
addedNodes[0].style &&
|
||||
document.querySelector('.notion-media-menu')
|
||||
addedNodes[0]?.querySelector?.('.notion-media-menu') &&
|
||||
/^pointer-events: auto; position: relative; z-index: \d;$/
|
||||
.test(addedNodes[0].style.cssText)
|
||||
) {
|
||||
for (let i = 0; i <= 3; i++) {
|
||||
if (addedNodes[0].style.cssText === `pointer-events: auto; position: relative; z-index: ${i};`) {
|
||||
addIconsTab();
|
||||
return;
|
||||
}
|
||||
}
|
||||
addIconsTab();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -484,6 +636,18 @@ module.exports = {
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// helpers
|
||||
|
||||
function getTab(n, button = false) {
|
||||
return document.querySelector(
|
||||
`.notion-media-menu > :first-child > :first-child > :nth-child(${n}) ${button ? 'div' : ''}`
|
||||
);
|
||||
}
|
||||
|
||||
function isCurrentTab(n) {
|
||||
return getTab(n).childNodes.length > 1;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user