Notion-icons: better popup modal detection (#274)

* Update mod.js

* Fix modal detection on preview pages
This commit is contained in:
Ryo Hilmawan 2020-11-19 11:03:00 +07:00 committed by GitHub
parent 7d239e6c0f
commit ca9788136c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -92,10 +92,6 @@ module.exports = {
} }
function addIconsTab() { function addIconsTab() {
// Disconnect observer if the modal is open.
if (document.querySelector('.notion-overlay-container'))
overlayContainerObserver.disconnect();
// Prevent Icons tab duplication // Prevent Icons tab duplication
if (getTab(5)) { if (getTab(5)) {
removeIcons(); removeIcons();
@ -299,7 +295,7 @@ module.exports = {
activeBar.remove(); activeBar.remove();
getTab(4).style.position = ''; getTab(4).style.position = '';
} }
getTab(3).className = ''; if (getTab(3)) getTab(3).className = '';
if (garbageCollector.length) { if (garbageCollector.length) {
for (let i = 0; i < garbageCollector.length; i++) { for (let i = 0; i < garbageCollector.length; i++) {
@ -309,60 +305,30 @@ module.exports = {
} }
} }
// Wait for DOM change before adding the Icons tab
// (React does not render immediately on click)
const overlayContainerObserver = new MutationObserver(list => {
if (list) addIconsTab()
});
function initializeIcons() {
overlayContainerObserver.observe(
document.querySelector('.notion-overlay-container'),
{ attributes: true, childList: true, characterData: true }
);
}
// Initialize icons tab when clicking on notion page icons
function initializeIconTriggerListener() {
const iconTriggers = document.querySelectorAll('.notion-record-icon[aria-disabled="false"]');
iconTriggers.forEach(trigger => {
trigger.removeEventListener('click', initializeIcons);
trigger.addEventListener('click', initializeIcons);
garbageCollector.push(trigger);
});
}
document.addEventListener('readystatechange', () => { document.addEventListener('readystatechange', () => {
if (document.readyState !== 'complete') return false; if (document.readyState !== 'complete') return false;
let queue = []; const attempt_interval = setInterval(enhance, 500);
const observer = new MutationObserver((list, observer) => { function enhance() {
if (!queue.length) requestAnimationFrame(() => process(queue)); const overlay = document.querySelector('.notion-overlay-container');
queue.push(...list); if (!overlay) return;
}); clearInterval(attempt_interval);
observer.observe(document.body, {
childList: true, const observer = new MutationObserver((list, observer) => {
subtree: true, for ( let { addedNodes } of list) {
}); if (addedNodes[0] &&
function process(list) { addedNodes[0].style &&
queue = []; (addedNodes[0].style.cssText === 'pointer-events: auto; position: relative; z-index: 0;' ||
for (let { addedNodes } of list) { addedNodes[0].style.cssText === 'pointer-events: auto; position: relative; z-index: 1;' ||
if ( addedNodes[0].style.cssText === 'pointer-events: auto; position: relative; z-index: 2;') &&
addedNodes[0] && ( document.querySelector('.notion-media-menu')
( )
addedNodes[0].classList && ( addIconsTab();
addedNodes[0].className === 'notion-page-content' ||
addedNodes[0].classList.contains('notion-record-icon') ||
addedNodes[0].classList.contains('notion-page-block') ||
addedNodes[0].classList.contains('notion-callout-block')
)
) || addedNodes[0].nodeName === 'A'
)
) {
initializeIconTriggerListener();
} }
} });
observer.observe(overlay, {
childList: true,
subtree: true,
});
} }
}); });
}, },