From 0d37708ad8a798b19b679644065ef2297c228cec Mon Sep 17 00:00:00 2001 From: CloudHill Date: Tue, 24 Nov 2020 13:53:06 +0700 Subject: [PATCH] notion-icons: toggleable community icon packs --- mods/notion-icons/app.css | 119 +++++++-- mods/notion-icons/icons/remove.svg | 3 + mods/notion-icons/icons/restore.svg | 3 + mods/notion-icons/mod.js | 363 ++++++++++++++++++++-------- 4 files changed, 361 insertions(+), 127 deletions(-) create mode 100644 mods/notion-icons/icons/remove.svg create mode 100644 mods/notion-icons/icons/restore.svg diff --git a/mods/notion-icons/app.css b/mods/notion-icons/app.css index adfd424..9e15269 100644 --- a/mods/notion-icons/app.css +++ b/mods/notion-icons/app.css @@ -17,7 +17,9 @@ .notion-icons--tab > div:hover, .notion-icons--icon:hover, -.notion-icons--toggle: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; } @@ -50,7 +52,6 @@ border-radius: 2px; } - .notion-icons--icon-set.error { color: var(--theme--text_red); background: var(--theme--line_red); @@ -65,17 +66,6 @@ float: right; } -.notion-icons--icon-set.alert .notion-icons--toggle { - color: var(--theme--line_yellow-text); - background: var(--theme--line_yellow); - border: 1px solid var(--theme--select_yellow); - margin-left: -1px; - margin-right: -1px; -} -.notion-icons--icon-set.alert .notion-icons--toggle:hover { - background: var(--theme--select_yellow); -} - .notion-icons--toggle { display: flex; align-items: center; @@ -86,7 +76,6 @@ border-radius: 2px; transition: background 200ms, margin-bottom 200ms ease-in; } - .notion-icons--toggle .triangle { width: 0.9em; height: 1em; @@ -94,7 +83,6 @@ transition: transform 200ms ease-out 0s; transform: rotateZ(180deg); } - .notion-icons--toggle a { color: var(--theme-text); transition: color 20ms ease-in; @@ -103,6 +91,17 @@ color: var(--theme--primary); } +.notion-icons--icon-set.alert .notion-icons--toggle { + color: var(--theme--line_yellow-text); + background: var(--theme--line_yellow); + border: 1px solid var(--theme--select_yellow); + margin-left: -1px; + margin-right: -1px; +} +.notion-icons--icon-set.alert .notion-icons--toggle:hover { + background: var(--theme--select_yellow); +} + .notion-icons--body { display: flex; flex-wrap: wrap; @@ -122,7 +121,6 @@ .hidden-set .triangle { transform: rotateZ(90deg); } - .hidden-set .notion-icons--body { opacity: 0; } @@ -139,6 +137,10 @@ height: 40px; padding: 4px; } +.notion-icons--icon img { + width: 100%; + height: 100%; +} .notion-icons--icon.error { font-size: 20px; @@ -146,20 +148,97 @@ border: 1px solid var(--theme--select_yellow); color: var(--theme--text_yellow); } - .notion-icons--icon.error:hover { background: var(--theme--select_yellow); } -.notion-icons--icon img { - width: 100%; - height: 100%; + +.notion-icons--extra { + margin-left: auto; + margin-right: 8px; + display: flex; + align-items: center; } +.notion-icons--spinner { + width: 12px; + height: 12px; +} .notion-icons--spinner img { + width: 100%; + height: 100%; animation: rotation 1.3s infinite linear; } +.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: inherit; + z-index: 1; +} +.notion-icons--restore-button svg { + width: 16px; + height: 16px; + fill: inherit; +} + + +.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; +} + @keyframes rotation { from { transform: rotate(0deg); diff --git a/mods/notion-icons/icons/remove.svg b/mods/notion-icons/icons/remove.svg new file mode 100644 index 0000000..b6a57a6 --- /dev/null +++ b/mods/notion-icons/icons/remove.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/mods/notion-icons/icons/restore.svg b/mods/notion-icons/icons/restore.svg new file mode 100644 index 0000000..2e41e4c --- /dev/null +++ b/mods/notion-icons/icons/restore.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/mods/notion-icons/mod.js b/mods/notion-icons/mod.js index 367b2c8..8c1dfc7 100644 --- a/mods/notion-icons/mod.js +++ b/mods/notion-icons/mod.js @@ -9,14 +9,15 @@ 'use strict'; const { createElement } = require('../../pkg/helpers.js'), - fs = require('fs-extra'); + fs = require('fs-extra'), + path = require('path'); module.exports = { id: '2d1f4809-9581-40dd-9bf3-4239db406483', tags: ['extension'], name: 'notion icons', desc: - 'use custom icon sets directly in Notion.', + 'use custom icon sets directly in notion.', version: '1.0.0', author: 'jayhxmo', options: [ @@ -47,13 +48,21 @@ module.exports = { httpReq.send(null); } - // Retrieve Icons data + let modalIcons; + (async () => { + modalIcons = { + remove: await fs.readFile( path.resolve(__dirname, 'icons/remove.svg') ), + restore: await fs.readFile( path.resolve(__dirname, 'icons/restore.svg') ), + } + })(); + + // Retrieve icons data let notionIconsData; getAsync(iconsUrl + 'icons.json', iconsData => { notionIconsData = JSON.parse(iconsData); }); - // Retrieve custom Icons data + // Retrieve custom icons data let customIconsData; if (store().json) { customIconsData = JSON.parse( @@ -92,26 +101,25 @@ module.exports = { } function addIconsTab() { - // Prevent Icons tab duplication + // Prevent icons tab duplication if (getTab(5)) { removeIcons(); return; } - // 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.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... + // Remove the icons overlay when clicking... const closeTriggers = [ // The fog layer document.querySelector('.notion-overlay-container [style*="width: 100vw; height: 100vh;"]'), @@ -126,111 +134,90 @@ module.exports = { garbageCollector.push(trigger); }) - // 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(); }); } - function renderIconSet(iconData) { - const iconSet = createElement( - '
' - ) - try { + function addRestoreButton() { + const buttons = getTab(5) ? getTab(5) : getTab(4); + const restoreButton = buttons.lastChild.cloneNode(true); + restoreButton.className = 'notion-icons--restore-button'; + restoreButton.innerHTML = modalIcons.restore; + buttons.prepend(restoreButton); + restoreButton.addEventListener('click', renderRestoreOverlay); + } - const authorText = iconData.author - ? iconData.authorUrl - ? ` by ${iconData.author}` - : ` by ${iconData.author}` - : ''; + function renderRestoreOverlay() { + if (!store().removedSets) return; - const iconSetToggle = createElement( - `
- -
${iconData.name}${authorText}
- -
` - ); - - const iconSetBody = createElement( - '
' - ); + 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; + }); - iconSet.append(iconSetToggle); - iconSet.append(iconSetBody); + const overlayContainer = createElement(` +
+ `); + overlayContainer.addEventListener('click', closeRestoreOverlay); + document.querySelector('.notion-app-inner').appendChild(overlayContainer); - const promiseArray = []; - // Render Icons - for (let i = 0; i < (iconData.count || iconData.source.length); i++) { + const rect = document.querySelector('.notion-icons--restore-button') + .getBoundingClientRect(); + const div = createElement(` +
+
+
+ `); - 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 restoreOverlay = createElement(` +
+ `) - const icon = createElement(`
`); - if (iconData.enhancerIcons) { - // Load sprite sheet - icon.innerHTML = - `
`; - } else { - icon.innerHTML = ``; - // Make sure icons load - promiseArray.push( - new Promise((resolve, reject) => { - icon.firstChild.onload = resolve; - icon.firstChild.onerror = () => { - reject(); - icon.classList.add('error'); - icon.innerHTML = '!'; - }; - }) - ); - } + overlayContainer.appendChild(div); + div.firstElementChild.appendChild(restoreOverlay); - iconSetBody.append(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(); - } - ) - })(); + // Fade in + restoreOverlay.animate( + [ {opacity: 0}, {opacity: 1} ], + { duration: 200 } + ); - // Set up Toggle - requestAnimationFrame(() => { - iconSetBody.style.height = iconSetBody.style.maxHeight = `${iconSetBody.offsetHeight}px`; - if (store().hide) iconSetToggle.click(); - }); - - iconSetToggle.addEventListener('click', e => { - if (e.target.nodeName === 'A') return; - iconSet.classList.toggle('hidden-set') - iconSetBody.style.height = iconSet.classList.contains('hidden-set') - ? 0 - : iconSetBody.style.maxHeight; - }); - - } catch (err) { - iconSet.classList.add('error'); - iconSet.innerHTML = `Invalid Icon Set: ${iconData.name}`; - } + store().removedSets.forEach(iconData => { + const restoreItem = renderRestoreItem(iconData); + restoreOverlay.appendChild(restoreItem); + }) + } - return iconSet; + function renderRestoreItem(iconData) { + const iconUrl = `${iconData.sourceUrl}/${iconData.source}_${0}.${iconData.extension}`; + const restoreItem = createElement(` +
+
+ +
+ ${iconData.name} +
+ `) + restoreItem.addEventListener('click', () => restoreIconSet(iconData)); + return restoreItem; + } + + function closeRestoreOverlay() { + const overlayContainer = document.querySelector('.notion-icons--overlay-container'); + overlayContainer.removeEventListener('click', closeRestoreOverlay); + // Fade out + document.querySelector('.notion-icons--restore').animate( + [ {opacity: 1}, {opacity: 0} ], + { duration: 200 } + ).onfinish = () => overlayContainer.remove(); } function renderIconsOverlay() { @@ -238,17 +225,24 @@ module.exports = { // Switch to 3rd tab so that the link can be inputed in the underlay if (!isCurrentTab(3)) getTab(3, true).click(); - // Set active bar on Icons Tab + if ( + store().removedSets && + store().removedSets.length > 0 + ) { + addRestoreButton(); + } + + // 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.append(activeBar); + iconsTab.appendChild(activeBar); getTab(4).style.position = 'relative'; getTab(3).className = 'hide-active-bar'; - // Convert Icons data into renderable + // Convert icons data into renderable const iconSets = []; if (customIconsData && customIconsData.icons) { @@ -267,26 +261,175 @@ module.exports = { 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 + // Create icons overlay const notionIcons = createElement( '
' ); - iconSets.forEach( set => notionIcons.append(set) ); + iconSets.forEach( set => notionIcons.appendChild(set) ); - // Insert Icons overlay + // Insert icons overlay document.querySelector('.notion-media-menu > .notion-scroller') - .append(notionIcons); + .appendChild(notionIcons); } } + function renderIconSet(iconData) { + const iconSet = createElement('
') + + try { + const authorText = iconData.author + ? iconData.authorUrl + ? ` by ${iconData.author}` + : ` by ${iconData.author}` + : ''; + + const iconSetToggle = createElement( + `
+ +
${iconData.name}${authorText}
+
+ +
+
` + ); + + const iconSetBody = createElement( + '
' + ); + + 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 = ``; + // 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(); + 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(); + renderIconsOverlay(); + } + function removeIcons() { const notionIcons = document.getElementById('notion-icons'), - activeBar = document.getElementById('notion-icons--active-bar'); + activeBar = document.getElementById('notion-icons--active-bar'), + restoreButton = document.querySelector('.notion-icons--restore-button'), + overlayContainer = document.querySelector('.notion-icons--overlay-container'); if (notionIcons) notionIcons.remove(); @@ -297,6 +440,12 @@ module.exports = { } if (getTab(3)) getTab(3).className = ''; + if (restoreButton) + restoreButton.remove(); + + if (overlayContainer) + closeRestoreOverlay(); + if (garbageCollector.length) { for (let i = 0; i < garbageCollector.length; i++) { garbageCollector[i] = null;