From afd7879ec66aa7d42de4bd14ff59bdc8d2bcc2a5 Mon Sep 17 00:00:00 2001 From: Ryo Hilmawan <54142180+CloudHill@users.noreply.github.com> Date: Sat, 14 Nov 2020 05:29:50 +0700 Subject: [PATCH] Extension: Notion Icons (#250) * Upload mod.js, styles.css, and icons.json * Move icon.json to notion-enhancer/icons * Update mod.js to work with the new icons repo --- mods/notion-icons/mod.js | 364 +++++++++++++++++++++++++++++++++++ mods/notion-icons/styles.css | 170 ++++++++++++++++ 2 files changed, 534 insertions(+) create mode 100644 mods/notion-icons/mod.js create mode 100644 mods/notion-icons/styles.css diff --git a/mods/notion-icons/mod.js b/mods/notion-icons/mod.js new file mode 100644 index 0000000..c065d00 --- /dev/null +++ b/mods/notion-icons/mod.js @@ -0,0 +1,364 @@ +/* + * notion-icons + * (c) 2019 jayhxmo (https://jaymo.io/) + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 CloudHill + * under the MIT license + */ + +'use strict'; + +const { createElement } = require('../../pkg/helpers.js'), + fs = require('fs-extra'); + +module.exports = { + id: '2d1f4809-9581-40dd-9bf3-4239db406483', + tags: ['extension'], + name: 'notion icons', + desc: + 'Use custom icon sets directly in Notion.', + version: '1.0.0', + author: 'jayhxmo', + options: [ + { + key: 'hide', + label: 'hide icon sets by default.', + type: 'toggle', + value: false, + }, + { + key: 'json', + label: 'insert custom json', + type: 'file', + extensions: ['json'], + }, + ], + hacks: { + 'renderer/preload.js'(store, __exports) { + let garbageCollector = []; + const iconsUrl = 'https://raw.githubusercontent.com/notion-enhancer/icons/main/'; + + function getAsync(urlString, callback) { + let httpReq = new XMLHttpRequest(); + httpReq.onreadystatechange = function() { + if (httpReq.readyState == 4 && httpReq.status == 200) callback(httpReq.responseText); + }; + httpReq.open('GET', urlString, true); + httpReq.send(null); + } + + // Retrieve Icons data + let notionIconsData; + getAsync(iconsUrl + 'icons.json', iconsData => { + notionIconsData = JSON.parse(iconsData); + }); + + // Retrieve custom Icons data + let customIconsData; + if (store().json) { + customIconsData = JSON.parse( + fs.readFileSync(store().json) + ) + } + + 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(); + } + + function addIconsTab() { + // Disconnect observer if the modal is open. + if (document.querySelector('.notion-overlay-container')) + overlayContainerObserver.disconnect(); + + // Prevent Icons tab duplication + if (getTab(5)) { + removeIcons(); + return; + } + + // Change 'Upload an image' to 'Upload' + getTab(2, true).innerText = 'Upload'; + + // 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 + const tabStrip = getTab(1).parentElement; + tabStrip.insertBefore(iconsTab, tabStrip.lastChild); + + // Remove the Icons overlay when clicking... + const closeTriggers = [ + // 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, + ]; + + closeTriggers.forEach(trigger => { + trigger.addEventListener('click', removeIcons); + garbageCollector.push(trigger); + }) + + // 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 { + + const authorText = iconData.author + ? iconData.authorUrl + ? ` by ${iconData.author}` + : ` by ${iconData.author}` + : ''; + + const iconSetToggle = createElement( + `
+ +
${iconData.name}${authorText}
+ +
` + ); + + const iconSetBody = createElement( + '
' + ); + + iconSet.append(iconSetToggle); + iconSet.append(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(`
`); + + iconSetBody.append(icon); + garbageCollector.push(icon); + icon.addEventListener('click', () => setPageIcon(iconUrl)); + console.log(iconUrl) + + // Make sure elements load + promiseArray.push( + new Promise((resolve, reject) => { + icon.firstChild.onload = resolve; + icon.firstChild.onerror = () => { + reject(); + icon.classList.add('error'); + icon.innerHTML = '!'; + }; + }) + ); + } + + // 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(); + } + ) + })(); + + // 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}`; + } + + return iconSet; + } + + 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(); + + // 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); + 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); + iconSets.push( renderIconSet(i) ); + }); + } + + // Create Icons overlay + const notionIcons = createElement( + '
' + ); + iconSets.forEach( set => notionIcons.append(set) ); + + // Insert Icons overlay + document.querySelector('.notion-media-menu > .notion-scroller') + .append(notionIcons); + } + } + + function removeIcons() { + const notionIcons = document.getElementById('notion-icons'), + activeBar = document.getElementById('notion-icons--active-bar'); + + if (notionIcons) + notionIcons.remove(); + + if (activeBar) { + activeBar.remove(); + getTab(4).style.position = ''; + } + getTab(3).className = ''; + + if (garbageCollector.length) { + for (let i = 0; i < garbageCollector.length; i++) { + garbageCollector[i] = null; + } + garbageCollector = []; + } + } + + // 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', () => { + if (document.readyState !== 'complete') return false; + let queue = []; + const observer = new MutationObserver((list, observer) => { + if (!queue.length) requestAnimationFrame(() => process(queue)); + queue.push(...list); + }); + observer.observe(document.body, { + childList: true, + subtree: true, + }); + function process(list) { + queue = []; + for (let { addedNodes } of list) { + if ( + addedNodes[0] && ( + ( + addedNodes[0].classList && ( + 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(); + } + } + } + }); + }, + }, +}; diff --git a/mods/notion-icons/styles.css b/mods/notion-icons/styles.css new file mode 100644 index 0000000..1277dda --- /dev/null +++ b/mods/notion-icons/styles.css @@ -0,0 +1,170 @@ +/* + * notion-icons + * (c) 2019 jayhxmo (https://jaymo.io/) + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 CloudHill + * under the MIT license + */ + +.hide-active-bar > :nth-child(2) { + display: none; +} + +.notion-icons--tab, +.notion-icons--tab > div { + color: var(--theme--text) !important; +} + +.notion-icons--tab > div:hover, +.notion-icons--icon:hover, +.notion-icons--toggle:hover { + background: var(--theme--interactive_hover); + box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border) !important; +} + +#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; + padding: 8px 12px; + overflow-x: hidden; + overflow-y: scroll; +} + +.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; +} + + +.notion-icons--icon-set.error { + color: var(--theme--text_red); + background: var(--theme--line_red); + border: 1px solid var(--theme--select_red); + padding: 8px 16px; +} +.notion-icons--icon-set.error::after { + content: '!'; + display: block; + font-size: 1.6em; + line-height: 0.9; + 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; + user-select: none; + cursor: pointer; + margin-bottom: 8px; + padding: 0.25em; + border-radius: 2px; + transition: background 200ms, margin-bottom 200ms ease-in; +} + +.notion-icons--toggle .triangle { + 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--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-set { + padding-bottom: 0; +} +.hidden-set .notion-icons--toggle { + margin-bottom: 0; +} +.hidden-set .triangle { + transform: rotateZ(90deg); +} + +.hidden-set .notion-icons--body { + opacity: 0; +} + +.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; +} + +.notion-icons--icon.error { + font-size: 20px; + background: var(--theme--line_yellow); + 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--spinner img { + animation: rotation 1.3s infinite linear; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} \ No newline at end of file