notion-icons: toggleable community icon packs

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);

mods/notion-icons/icons/remove.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <polygon class="cls-1" points="18.72 16.6 14.12 12 18.72 7.4 16.6 5.28 12 9.88 7.4 5.28 5.28 7.4 9.88 12 5.28 16.6 7.4 18.72 12 14.12 16.6 18.72 18.72 16.6"/>
+</svg>

mods/notion-icons/icons/restore.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <polygon class="cls-1" points="20 10.5 13.5 10.5 13.5 4 10.5 4 10.5 10.5 4 10.5 4 13.5 10.5 13.5 10.5 20 13.5 20 13.5 13.5 20 13.5 20 10.5"/>
+</svg>

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(
-          '<div class="notion-icons--icon-set"></div>'
-        )
 
-        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 <a target="_blank" href="${iconData.authorUrl}" style="opacity: 0.6;">${iconData.author}</a>`
-            : ` by <span style="opacity: 0.6;">${iconData.author}</span>`
-          : '';
+      function renderRestoreOverlay() {
+        if (!store().removedSets) return;
 
-          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--spinner" style="margin-left: auto; margin-right: 8px; width: 1.2em; height: 1.2em;">
-                <img src="/images/loading-spinner.4dc19970.svg" />
-              </div>
-            </div>`
-          );
+        store().removedSets.sort((a, b) => {
+          const setA = a.name.toLowerCase(),
+            setB = b.name.toLowerCase();
   
-          const iconSetBody = createElement(
-            '<div class="notion-icons--body"></div>'
-          );
+          if (setA < setB) return -1;
+          if (setA > setB) return 1;
+          return 0;
+        });
 
-          iconSet.append(iconSetToggle);
-          iconSet.append(iconSetBody);
+        const overlayContainer = createElement(`
+          <div class="notion-icons--overlay-container"></div>
+        `);
+        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(`
+          <div style="position: fixed; top: ${rect.top}px; left: ${rect.left}px; height: ${rect.height}px;">
+            <div style="position: relative; top: 100%; pointer-events: auto;"></div>
+          </div>
+        `);
 
-            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(`
+          <div class="notion-icons--restore"></div>
+        `)
 
-            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 = '!';
-                  };
-                })
-              );
-            }
+        overlayContainer.appendChild(div);
+        div.firstElementChild.appendChild(restoreOverlay);
 
-            iconSetBody.append(icon);
-            garbageCollector.push(icon);
-            icon.addEventListener('click', () => setPageIcon(iconUrl));
-          }
+        // Fade in
+        restoreOverlay.animate(
+          [ {opacity: 0}, {opacity: 1} ],
+          { duration: 200 }
+        );
 
-          // 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();
-              }
-            )
-          })();
+        store().removedSets.forEach(iconData => {
+          const restoreItem = renderRestoreItem(iconData);
+          restoreOverlay.appendChild(restoreItem);
+        })
+      }
 
-          // Set up Toggle
-          requestAnimationFrame(() => {
-            iconSetBody.style.height = iconSetBody.style.maxHeight = `${iconSetBody.offsetHeight}px`;
-            if (store().hide) iconSetToggle.click();
-          });
+      function renderRestoreItem(iconData) {
+        const iconUrl = `${iconData.sourceUrl}/${iconData.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;">
+              <img style="width: 100%; height: 100%" src="${iconUrl}" />
+            </div>
+            <span style="margin: 0 8px;">${iconData.name}</span>
+          </div>
+        `)
+        restoreItem.addEventListener('click', () => restoreIconSet(iconData));
+        return restoreItem;
+      }
 
-          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 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(
             `<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.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(
             '<div id="notion-icons"></div>'
           );
-          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('<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>`
+          );
+        
+          const iconSetBody = createElement(
+            '<div class="notion-icons--body"></div>'
+          );
+
+          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();
+        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;