+ ${menuIcons.triangle}
+
+
+ `);
+
+ const iconSetBody = createElement(
+ ''
+ );
+
+ 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(``);
+ icon.innerHTML = enhancerSet
+ // load sprite sheet
+ ? ``
+ : `
+
+
+ 
+
+
+
@@ -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(
- ``
- )
- 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(
- ''
- )
- )
- }
-
- 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(
- ''
+ 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('')
-
- try {
- const authorText = iconData.author
- ? iconData.authorUrl
- ? ` by ${iconData.author}`
- : ` by ${iconData.author}`
- : '';
-
- const iconSetToggle = createElement(
- `
`;
- // 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(
- ''
- );
- 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(`
+
+ `), tooltipText = createElement(
+ ``
+ );
+
+ 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;
+ }
},
},
};
-
-
-
`
+ requestAnimationFrame(
+ () => body.style.height = height + 'px'
);
-
- const iconSetBody = createElement(
- ''
+ 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(``);
- if (iconData.enhancerIcons) {
- // Load sprite sheet
- icon.innerHTML = `
-
-
-
-
-
-
-
-
- `;
- } else {
- icon.innerHTML = `