re-orderable mods: order is saved + mods are loaded according to priority

CHANGELOG.md

@@ -6,16 +6,20 @@
 - [improved responsiveness](https://chrome.google.com/webstore/detail/notion%20%20-responsiveness-f/leadcilhbmibbkgbnjgmmnfgnnhmeddk)
 - [highlight/mark viewer](https://chrome.google.com/webstore/detail/notion%2B-mark-manager/hipgmnlpnimedfepbfbfiaobohhffcfc)
 - [advanced math editor](https://github.com/Manueloccorso/NotionMathEditor_BrowserExtension)
-- re-orderable extensions
 
 ### v0.?.? (wip)
 
+- new: mods can be reordered in the menu to control what order styling/scripts are added/executed in.
+  higher up on the list = higher priority of application = loaded last in order to override others.
+  (excluding core, which though pinned to the top of the list is always loaded first so theming
+  variables can be modified.)
 - bugfix: removed messenger emoji set as the provider no longer supports it.
 - bugfix: remove shadow around light mode board headers
   \+ minor text colour fixes for night shift theming.
 - bugfix: properly detect/respond to `EACCES` errors.
 - bugfix: night shift checks every interaction,
   will respond to system changes without any manual changes.
+- extension: "material ocean" = an oceanic colour palette.
 
 ### v0.9.1 (2020-09-26)
 

README.md

@@ -164,7 +164,8 @@ on top of other windows even if it's not focused.
 
 **tags:** #extension
 
-**description:** link files for small client-side tweaks.
+**description:** link files for small client-side tweaks. (not sure how to do something? check out the
+[tweaks](https://github.com/dragonwocky/notion-enhancer/blob/master/TWEAKS.md) collection.)
 
 **author**: [dragonwocky](https://github.com/dragonwocky/)
 

mods/core/css/menu.css

@@ -231,7 +231,7 @@ s {
   background: var(--theme--option-background);
   color: var(--theme--option-color);
   border-radius: 2px;
-  transition: color 200ms, background 200ms;
+  transition: color 200ms, background 200ms, opacity 200ms;
   user-select: none;
 }
 #search #tags > span:not(:last-child) {
@@ -618,37 +618,38 @@ s {
   font-weight: bold;
 }
 
-#modules.reorder section {
-  margin-bottom: 0.4em;
+.reorder #search #tags > span,
+.reorder #search #tags > span:hover {
+  opacity: 0.7;
+  background: var(--theme--option-background);
 }
-#modules.reorder [draggable] {
-  margin-bottom: 1.15em;
+.reorder #search #tags > .selected,
+.reorder #search #tags > .selected:hover {
+  background: var(--tag_color, var(--theme--option_active-background));
 }
-#modules.reorder [draggable]::after {
+
+.reorder #modules .dragged-over::after {
   content: '';
-  height: 0.3em;
+  height: 0.25em;
   width: 99%;
   position: absolute;
-  margin: 0.5em 0;
+  margin: 0.3em 0;
   opacity: 0.7;
-  background: var(--theme--table-border);
-}
-#modules.reorder [draggable].dragged-over::after {
   background: var(--theme--selected);
 }
 
-#modules.reorder .switch,
-#modules.reorder .tags,
-#modules.reorder .desc,
-#modules.reorder .options,
-#modules.reorder .author,
-#modules.reorder .version {
+.reorder #modules .switch,
+.reorder #modules .tags,
+.reorder #modules .desc,
+.reorder #modules .options,
+.reorder #modules .author,
+.reorder #modules .version {
   display: none;
 }
-#modules.reorder label {
+.reorder #modules label {
   cursor: pointer;
 }
-#modules.reorder label::before {
+.reorder #modules label::before {
   content: '::';
   margin-right: 0.4em;
   color: var(--theme--text_ui);

mods/core/menu.js

@@ -7,12 +7,10 @@
 'use strict';
 
 const store = require('../../pkg/store.js'),
-  { id } = require('./mod.js'),
   helpers = require('../../pkg/helpers.js'),
   fs = require('fs-extra'),
   path = require('path'),
-  electron = require('electron'),
-  browser = electron.remote.getCurrentWindow();
+  electron = require('electron');
 
 window['__start'] = async () => {
   const buttons = require('./buttons.js')(() => ({
@@ -197,13 +195,15 @@ window['__start'] = async () => {
     modules.loaded.forEach((mod) => {
       const $search_input = document.querySelector('#search > input');
       if (
-        (mod.elem.classList.contains('enabled') && !search_filters.enabled) ||
-        (mod.elem.classList.contains('disabled') && !search_filters.disabled) ||
+        !document.body.classList.contains('reorder') &&
+        ((mod.elem.classList.contains('enabled') && !search_filters.enabled) ||
+          (mod.elem.classList.contains('disabled') &&
+            !search_filters.disabled) ||
           !mod.tags.some((tag) => search_filters.tags.has(tag)) ||
           ($search_input.value &&
             !innerText(mod.elem)
               .toLowerCase()
-            .includes($search_input.value.toLowerCase().trim()))
+              .includes($search_input.value.toLowerCase().trim())))
       )
         return (mod.elem.style.display = 'none');
       mod.elem.style.display = 'block';
@@ -223,21 +223,20 @@ window['__start'] = async () => {
     );
     document.querySelector('#tags').append(el);
     el.addEventListener('click', (event) => {
+      if (!document.body.classList.contains('reorder')) {
         el.className = el.className === 'selected' ? '' : 'selected';
         onclick(el.className === 'selected');
+      }
     });
     return el;
   }
-  createTag(
-    'enabled',
-    (state) => [(search_filters.enabled = state), search()]
-    // 'var(--theme--bg_green)'
-  );
-  createTag(
-    'disabled',
-    (state) => [(search_filters.disabled = state), search()]
-    // 'var(--theme--bg_red)'
-  );
+  createTag('enabled', (state) => [
+    ((search_filters.enabled = state), search()),
+  ]);
+  createTag('disabled', (state) => [
+    (search_filters.disabled = state),
+    search(),
+  ]);
   for (let tag of search_filters.tags)
     createTag(`#${tag}`, (state) => [
       state ? search_filters.tags.add(tag) : search_filters.tags.delete(tag),
@@ -541,9 +540,10 @@ window['__start'] = async () => {
     document
       .querySelectorAll('.dragged-over')
       .forEach((el) => el.classList.remove('dragged-over'));
-    const $node = draggable.list.find(
-      (node) => node.innerText === event.target.innerText
-    );
+    const $node = [
+      draggable.list[0].previousElementSibling,
+      ...draggable.list,
+    ].find((node) => node.innerText === event.target.innerText);
     if ($node) $node.classList.add('dragged-over');
   });
   document.addEventListener('drop', (event) => {
@@ -558,18 +558,21 @@ window['__start'] = async () => {
       const from = draggable.list.findIndex(
           (node) => node.innerText === draggable.target.innerText
         ),
-        to = draggable.list.findIndex(
+        to =
+          event.target.innerText ===
+          draggable.list[0].previousElementSibling.innerText
+            ? 0
+            : draggable.list.findIndex(
                 (node) => node.innerText === event.target.innerText
+              ) + 1;
+      if (to >= 0) {
+        draggable.list.splice(
+          to > from ? to - 1 : to,
+          0,
+          draggable.list.splice(from, 1)[0]
         );
-      // [draggable.list[from], draggable.list[to]] = [
-      //   draggable.list[to],
-      //   draggable.list[from],
-      // ]; -- swap
-      if (to >= draggable.list.length) {
-        let k = to - draggable.list.length;
-        while (k--) draggable.list.push(undefined);
+        store('mods').priority = draggable.list.map((m) => m.id);
       }
-      draggable.list.splice(to, 0, draggable.list.splice(from, 1)[0]);
     }
     draggable.render();
   });
@@ -582,9 +585,10 @@ window['__start'] = async () => {
       <${draggable.tags[0]} data-bolded="configure">configure</${draggable.tags[0]}> |
       <${draggable.tags[1]} data-bolded="reorder">reorder</${draggable.tags[1]}>
       `;
-    $modules.classList[draggable.state ? 'add' : 'remove']('reorder');
+    document.body.classList[draggable.state ? 'add' : 'remove']('reorder');
     $modules
       .querySelectorAll('input')
       .forEach((input) => (input.disabled = draggable.state));
+    search();
   });
 };

mods/custom-inserts/mod.js

@@ -12,8 +12,9 @@ module.exports = {
   id: 'b4b0aced-2059-43bf-8d1d-ccd757ee5ebb',
   tags: ['extension'],
   name: 'custom inserts',
-  desc: 'link files for small client-side tweaks.',
-  version: '0.1.2',
+  desc: `link files for small client-side tweaks. (not sure how to do something? check out the
+      [tweaks](https://github.com/dragonwocky/notion-enhancer/blob/master/TWEAKS.md) collection.)`,
+  version: '0.1.3',
   author: 'dragonwocky',
   options: [
     {

mods/material-ocean/mod.js

@@ -1,16 +1,16 @@
 /*
- * Material Ocean
+ * material ocean
  * (c) 2020 Abubakar Yagoub <i@blacksuan19.me> (https://blacksuan19.tk)
- * under GNU's GPL3 license
+ * under the MIT license
  */
 
-"use strict";
+'use strict';
 
 module.exports = {
-  id: "69e7ccb2-4aef-484c-876d-3de1b433d2b9",
-  tags: ["theme", "dark"],
-  name: "Material Ocean",
-  desc: "a Material theme with oceanic colors",
-  version: "0.1",
-  author: "blacksuan19",
+  id: '69e7ccb2-4aef-484c-876d-3de1b433d2b9',
+  tags: ['theme', 'dark'],
+  name: 'material ocean',
+  desc: 'an oceanic colour palette.',
+  version: '0.1',
+  author: 'blacksuan19',
 };

mods/material-ocean/styles.css

@@ -1,8 +1,10 @@
-/* Copyright © Blacksuan19 @ 2020 */
-/* part of Material Ocean Color Scheme */
+/*
+ * material ocean
+ * (c) 2020 Abubakar Yagoub <i@blacksuan19.me> (https://blacksuan19.tk)
+ * under the MIT license
+ */
 
 :root {
-  /* material ocean colors */
   --ocean-main: #0f111a;
   --ocean-sec: #00010a;
   --ocean-accent: #ff4151;

mods/night-shift/mod.js

@@ -12,7 +12,7 @@ module.exports = {
   name: 'night shift',
   desc:
     'sync dark/light theme with the system (overrides normal theme setting).',
-  version: '0.1.0',
+  version: '0.1.1',
   author: 'dragonwocky',
   hacks: {
     'renderer/preload.js'(store, __exports) {

pkg/apply.js

@@ -117,7 +117,7 @@ module.exports = async function ({ overwrite_version, friendly_errors } = {}) {
         `file access forbidden - ${
           process.platform === 'win32'
             ? 'make sure your user has elevated permissions.'
-            : `try running "chown -R ${err.path}"`
+            : `try running "chown -R $USER ${err.path}"`
         }`
       );
     } else if (err.code === 'EIO' && friendly_errors) {

pkg/helpers.js

@@ -140,13 +140,17 @@ function getEnhancements() {
       modules.invalid.push(dir);
     }
   }
-  modules.loaded = modules.loaded.sort((a, b) =>
-    a.tags.includes('core')
-      ? -1
-      : b.tags.includes('core')
-      ? 1
-      : a.name.localeCompare(b.name)
-  );
+  modules.loaded = modules.loaded.sort((a, b) => a.name.localeCompare(b.name));
+  const priority = require('./store.js')('mods', { priority: [] }).priority;
+  modules.loaded = [
+    ...modules.loaded.filter((m) => m.tags.includes('core')),
+    ...modules.loaded.filter(
+      (m) => !m.tags.includes('core') && !priority.includes(m.id)
+    ),
+    ...priority
+      .map((id) => modules.loaded.find((m) => m.id === id))
+      .filter((m) => m),
+  ];
   return modules;
 }
 

pkg/loader.js

@@ -55,7 +55,10 @@ module.exports = function (__file, __exports) {
   }
 
   const modules = helpers.getEnhancements();
-  for (let mod of modules.loaded) {
+  for (let mod of [
+    ...modules.loaded.filter((m) => m.tags.includes('core')),
+    ...modules.loaded.filter((m) => !m.tags.includes('core')).reverse(),
+  ]) {
     if (
       (mod.tags || []).includes('core') ||
       store('mods', { [mod.id]: { enabled: false } })[mod.id].enabled

pkg/remove.js

@@ -119,7 +119,7 @@ module.exports = async function ({
         `file access forbidden - ${
           process.platform === 'win32'
             ? 'make sure your user has elevated permissions.'
-            : `try running "chown -R ${err.path}"`
+            : `try running "chown -R $USER ${err.path}"`
         }`
       );
     } else if (err.code === 'EIO' && friendly_errors) {