menu options: toggles + selects

DOCUMENTATION.md

@@ -41,12 +41,12 @@ module.exports = {
   desc: String of markdown,
   version: String of semver,
   author: String of github_username,
-  options?: {
+  options?: Array<{
     key: String,
     label: String,
     type: String in ['toggle', 'select', 'input', 'file'],
     value: Boolean or Array<String> or String or null
-  },
+  }>,
   hacks?: {
     [k: 'insert-point' (e.g. 'main/createWindow.js')]: function (store) {}
   }
@@ -87,7 +87,7 @@ each "hack" is a function taking 2 arguments.
 1. the **`store`** argument, which allows access to the module
    settings/options defined in `mod.js` (those set in the menu, or used internally by the module).
    each module store is automatically saved to + loaded from `~/.notion-enhancer/id.json`.
-   it can be initialised with `const settings = store({ defaults })`, then used as if it were a normal object.
+   it can be initialised/accessed with `store({ defaults })`, then used as if it were a normal object.
 2. the **`__exports`** argument, which is the `module.exports` of the file being modded.
    this can be used to call or replace functions from notion.
 
@@ -109,8 +109,7 @@ e.g.
 module.exports = function (store, __exports) {
   document.addEventListener('readystatechange', (event) => {
     if (document.readyState !== 'complete') return false;
-    const settings = store({ name: 'dragonwocky' });
+    console.log(store({ name: 'dragonwocky' }).name);
-    console.log(settings.name);
   });
 };
 // mod.js

mods/core/buttons.js

@@ -6,10 +6,8 @@
 
 'use strict';
 
-const __mod = require('./mod.js'),
+module.exports = (store) => {
-  store = require('../../pkg/store.js'),
+  const path = require('path'),
-  settings = store(__mod.id, __mod.defaults),
-  path = require('path'),
     fs = require('fs-extra'),
     browser = require('electron').remote.getCurrentWindow(),
     is_mac = process.platform === 'darwin',
@@ -17,7 +15,7 @@ const __mod = require('./mod.js'),
       element: document.createElement('div'),
       insert: [
         'alwaysontop',
-      ...(settings.frameless && !is_mac
+        ...(store().frameless && !is_mac
           ? ['minimize', 'maximize', 'close']
           : []),
       ],
@@ -31,10 +29,14 @@ const __mod = require('./mod.js'),
               path.resolve(`${__dirname}/icons/alwaysontop_off.svg`)
             ),
           },
-        minimize: fs.readFile(path.resolve(`${__dirname}/icons/minimize.svg`)),
+          minimize: fs.readFile(
+            path.resolve(`${__dirname}/icons/minimize.svg`)
+          ),
           maximize: {
             on: fs.readFile(path.resolve(`${__dirname}/icons/maximize_on.svg`)),
-          off: fs.readFile(path.resolve(`${__dirname}/icons/maximize_off.svg`)),
+            off: fs.readFile(
+              path.resolve(`${__dirname}/icons/maximize_off.svg`)
+            ),
           },
           close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)),
         },
@@ -73,7 +75,7 @@ const __mod = require('./mod.js'),
       },
     };
 
-(async () => {
+  (async () => {
     buttons.element.className = 'window-buttons-area';
     for (let btn of buttons.insert) {
       buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
@@ -86,13 +88,14 @@ const __mod = require('./mod.js'),
         10
       );
     }
-  if (settings.frameless && !is_mac) {
+    if (store().frameless && !is_mac) {
       setInterval(async () => {
         const icon = (await buttons.icons.maximize()).toString(),
           el = buttons.element.querySelector('#btn-maximize');
         if (el.innerHTML != icon) el.innerHTML = icon;
       }, 100);
     }
-})();
+  })();
 
-module.exports = buttons;
+  return buttons;
+};

mods/core/client.js

@@ -7,10 +7,8 @@
 
 'use strict';
 
-module.exports = (defaults) =>
+module.exports = (store, __exports) => {
-  function (store, __exports) {
   const electron = require('electron'),
-      settings = store(defaults),
     helpers = require('../../pkg/helpers.js'),
     __notion = helpers.getNotion(),
     notionIpc = require(`${__notion.replace(
@@ -31,7 +29,7 @@ module.exports = (defaults) =>
     clearInterval(attempt_interval);
 
     // scrollbars
-      if (settings.smooth_scrollbars) {
+    if (store().smooth_scrollbars) {
       document.body.classList.add('smooth-scrollbars');
       // interval_attempts.patchScrollbars = setInterval(patchScrollbars, 100);
       // function patchScrollbars() {
@@ -48,7 +46,7 @@ module.exports = (defaults) =>
     }
 
     // frameless
-      if (settings.frameless) {
+    if (store().frameless) {
       document.body.classList.add('frameless');
       // draggable area
       const dragarea = document.createElement('div');
@@ -56,12 +54,12 @@ module.exports = (defaults) =>
       document.querySelector('.notion-topbar').prepend(dragarea);
       document.documentElement.style.setProperty(
         '--configured-dragarea_height',
-          `${settings.dragarea_height + 2}px`
+        `${store().dragarea_height + 2}px`
       );
     }
 
     // window buttons
-      const buttons = require('./buttons.js');
+    const buttons = require('./buttons.js')(store);
     document
       .querySelector('.notion-topbar > div[style*="display: flex"]')
       .appendChild(buttons.element);
@@ -114,7 +112,7 @@ module.exports = (defaults) =>
 
       // draggable area resizing
       const sidebar = document.querySelector('.notion-sidebar');
-        if (settings.frameless && sidebar) {
+      if (store().frameless && sidebar) {
         let new_sidebar_width =
           sidebar.style.height === 'auto' ? '0px' : sidebar.style.width;
         if (sidebar_width !== new_sidebar_width) {
@@ -128,4 +126,4 @@ module.exports = (defaults) =>
     }
     setInterval(communicationLoop, 500);
   }
-  };
+};

mods/core/create.js

@@ -7,8 +7,7 @@
 
 'use strict';
 
-module.exports = (defaults) =>
+module.exports = (store, __exports) => {
-  function (store, __exports) {
   const electron = require('electron'),
     allWindows = () =>
       electron.BrowserWindow.getAllWindows().filter(
@@ -16,7 +15,6 @@ module.exports = (defaults) =>
       ),
     // createWindow = __exports.createWindow,
     path = require('path'),
-      settings = store(defaults),
     helpers = require('../../pkg/helpers.js'),
     __notion = helpers.getNotion();
 
@@ -46,7 +44,7 @@ module.exports = (defaults) =>
       show: false,
       backgroundColor: '#ffffff',
       titleBarStyle: 'hiddenInset',
-        frame: !settings.frameless,
+      frame: !store().frameless,
       webPreferences: {
         preload: path.resolve(`${__notion}/app/renderer/index.js`),
         webviewTag: true,
@@ -56,12 +54,12 @@ module.exports = (defaults) =>
     });
     window.once('ready-to-show', function () {
       if (
-          !settings.openhidden ||
+        !store().openhidden ||
         allWindows().some((win) => win.isVisible() && win.id != window.id)
       ) {
         window.show();
         window.focus();
-          if (settings.maximized) window.maximize();
+        if (store().maximized) window.maximize();
         if (
           (focused_window && focused_window.isFullScreen()) ||
           window_state.isFullScreen
@@ -71,11 +69,7 @@ module.exports = (defaults) =>
     });
     let intended_quit = false;
     window.on('close', (e) => {
-        if (
+      if (intended_quit || !store().close_to_tray || allWindows().length > 1) {
-          intended_quit ||
-          !settings.close_to_tray ||
-          allWindows().length > 1
-        ) {
         window_state.saveState(window);
         window = null;
       } else {
@@ -87,4 +81,4 @@ module.exports = (defaults) =>
     window.loadURL(__exports.getIndexUrl(relativeUrl));
     return window;
   };
-  };
+};

mods/core/css/menu.css

@@ -60,7 +60,6 @@ main {
 }
 main section {
   border-radius: 2px;
-  padding: 0.75em;
   margin-bottom: 0.75em;
 }
 
@@ -118,6 +117,7 @@ s {
 
 #alerts [role='alert'] {
   display: flex;
+  padding: 0.75em;
 }
 #alerts [role='alert']::before {
   content: '!';
@@ -180,6 +180,12 @@ s {
   background: var(--theme_local--sidebar);
   border: 1px solid var(--theme_local--table-border);
 }
+#modules section > div {
+  padding: 0.75em;
+}
+.notion-light-theme #modules section {
+  background: var(--theme_local--main);
+}
 
 #modules section h3,
 #modules section p {
@@ -187,6 +193,13 @@ s {
   font-size: 1rem;
 }
 
+/* #modules section .meta .toggle input + label .switch:before {
+  background: linear-gradient(
+    90deg,
+    var(--theme_local--text_green),
+    var(--theme_local--bg_green)
+  );
+} */
 #modules section .desc {
   margin: 0.3em 0 0.4em 0;
   font-size: 0.9em;
@@ -236,19 +249,51 @@ s {
 
 /* module options */
 
+#modules .disabled .options {
+  display: none;
+}
+#modules section .options {
+  border-top: 1px solid var(--theme_local--table-border);
+  background: var(--theme_local--card);
+}
+#modules section .options p {
+  font-size: 0.9em;
+}
+#modules section .options p:not(:last-child) {
+  padding-bottom: 0.5em;
+  border-bottom: 0.5px solid var(--theme_local--table-border);
+  margin-bottom: 0.5em;
+}
+
+select {
+  width: 100%;
+  margin: 0.25em 0;
+  font-size: 0.9rem;
+  padding: 0.4rem 0.2rem;
+  border: none;
+  color: var(--theme_local--text);
+  background: var(--theme_local--main);
+}
+
 .toggle * {
   cursor: pointer;
 }
 .toggle input {
   display: none;
 }
+.toggle input + label {
+  display: flex;
+}
+.toggle input + label .name {
+  flex-basis: calc(100% - 2.25em);
+}
 .toggle input + label .switch {
   position: relative;
   margin-top: 0.5em;
   float: right;
   height: 0.65em;
   width: 2em;
-  background: var(--theme_local--card);
+  background: var(--theme_local--main);
   border-radius: 5px;
 }
 .toggle input + label .switch:before {

mods/core/menu.js

@@ -6,14 +6,13 @@
 
 'use strict';
 
-const __mod = require('./mod.js'),
+const store = require('../../pkg/store.js'),
-  store = require('../../pkg/store.js'),
   helpers = require('../../pkg/helpers.js'),
   electron = require('electron'),
   browser = electron.remote.getCurrentWindow();
 
 window['__start'] = async () => {
-  const buttons = require('./buttons.js');
+  const buttons = require('./buttons.js')(() => ({ frameless: true }));
   document.querySelector('#menu-titlebar').appendChild(buttons.element);
 
   document.defaultView.addEventListener('keyup', (event) => {
@@ -61,8 +60,9 @@ window['__start'] = async () => {
   )
     .then((res) => res.json())
     .then((res) => {
-      const version = {
+      const raw_v = require('./mod.js').version,
-        local: __mod.version.split(/[~-]/g)[0],
+        version = {
+          local: raw_v.split(/[~-]/g)[0],
           repo: res.tag_name.slice(1),
         };
       if (version.local == version.repo) return;
@@ -87,7 +87,7 @@ window['__start'] = async () => {
              run <code>npm i -g notion-enhancer</code><br>
              (or <code>yarn global add notion-enhancer</code>),<br>
              <u>and</u> <code>notion-enhancer apply</code>.`
-          : `local build <b>v${__mod.version}</b> is unstable.`
+          : `local build <b>v${raw_v}</b> is unstable.`
       ).prepend();
     });
 
@@ -108,13 +108,12 @@ window['__start'] = async () => {
     ).append();
   }
 
-  // mod options
+  // mod info + options
   function markdown(string) {
     const parsed = string
       .split('\n')
       .map((line) =>
         line
-          // todo: stop e.g. whole chunk of ~~thin~~g~~ being selected
           .trim()
           .replace(/\s+/g, ' ')
           // > quote
@@ -148,36 +147,44 @@ window['__start'] = async () => {
       .join('');
     return parsed;
   }
+
+  let modified_notice;
+  function modified() {
+    if (modified_notice) return;
+    modified_notice = createAlert(
+      'info',
+      `changes may not apply until app restart.`
+    );
+    modified_notice.append();
+  }
+
   const $modules = document.querySelector('#modules');
-  for (let mod of modules.loaded.sort((a, b) => {
+  for (let mod of modules.loaded.sort((a, b) =>
-    return a.tags.includes('core') ||
+    a.tags.includes('core') ||
     store('mods', { [a.id]: { pinned: false } }).pinned
       ? -1
       : b.tags.includes('core') ||
         store('mods', { [b.id]: { pinned: false } }).pinned
       ? 1
-      : a.name.localeCompare(b.name);
+      : a.name.localeCompare(b.name)
-  })) {
+  )) {
     const menuStore = store('mods', { [mod.id]: { enabled: false } });
-    mod.store = store(mod.id);
     mod.elem = createElement(`
       <section class="${
         mod.tags.includes('core') || menuStore[mod.id].enabled
           ? 'enabled'
           : 'disabled'
       }" id="${mod.id}">
+        <div class="meta">
           <h3 ${
             mod.tags.includes('core')
               ? `>${mod.name}`
               : `class="toggle">
-          <input type="checkbox" id="enable_${mod.id}" ${
+            <input type="checkbox" id="enable_${mod.id}"
-                menuStore[mod.id].enabled ? 'checked' : ''
+            ${menuStore[mod.id].enabled ? 'checked' : ''} />
-              } />
             <label for="enable_${mod.id}">
-            ${mod.name}
+              <span class="name">${mod.name}</span>
-            <div class="switch">
+              <span class="switch"><span class="dot"></span></span>
-              <div class="dot"></div>
-            </div>
             </label>`
           }</h3>
           <p class="tags">${mod.tags
@@ -191,13 +198,70 @@ window['__start'] = async () => {
             </a>
             <span class="version">v${mod.version}</span>
           </p>
+        </div>
+        ${
+          mod.options && mod.options.length ? '<div class="options"></div>' : ''
+        }
       </section>
     `);
     const $enable = mod.elem.querySelector(`#enable_${mod.id}`);
     if ($enable)
       $enable.addEventListener('click', (event) => {
         menuStore[mod.id].enabled = $enable.checked;
+        mod.elem.className = menuStore[mod.id].enabled ? 'enabled' : 'disabled';
       });
+    const $options = mod.elem.querySelector('.options');
+    if ($options)
+      for (const opt of mod.options) {
+        let $opt;
+        switch (opt.type) {
+          case 'toggle':
+            $opt = createElement(`
+              <p class="toggle">
+                <input type="checkbox" id="toggle_${mod.id}--${opt.key}"
+                ${store(mod.id)[opt.key] ? 'checked' : ''} />
+                <label for="toggle_${mod.id}--${opt.key}">
+                  <span class="name">${opt.label}</span>
+                  <span class="switch"><span class="dot"></span></span>
+                </label>
+              </p>
+            `);
+            const $opt_checkbox = $opt.querySelector(
+              `#toggle_${mod.id}--${opt.key}`
+            );
+            $opt_checkbox.addEventListener('change', (event) => {
+              store(mod.id)[opt.key] = $opt_checkbox.checked;
+              modified();
+            });
+            $options.appendChild($opt);
+            break;
+          case 'select':
+            $opt = createElement(`
+              <p class="select">
+                <label for="select_${mod.id}--${opt.key}">${opt.label}</label>
+                <select id="select_${mod.id}--${opt.key}">
+                  ${opt.value
+                    .map((val) => `<option value="${val}">${val}</option>`)
+                    .join('')}
+                </select>
+              </p>
+            `);
+            const $opt_select = $opt.querySelector(
+              `#select_${mod.id}--${opt.key}`
+            );
+            $opt_select.value = store(mod.id)[opt.key];
+            $opt_select.addEventListener('change', (event) => {
+              store(mod.id)[opt.key] = $opt_select.value;
+              modified();
+            });
+            $options.appendChild($opt);
+            break;
+          case 'input':
+            break;
+          case 'file':
+            break;
+        }
+      }
     $modules.append(mod.elem);
   }
 };

mods/core/mod.js

@@ -6,16 +6,6 @@
 
 'use strict';
 
-const defaults = {
-  openhidden: false,
-  maximized: false,
-  close_to_tray: true,
-  frameless: true,
-  dragarea_height: 15,
-  smooth_scrollbars: true,
-  hotkey: 'CmdOrCtrl+Shift+A',
-};
-
 module.exports = {
   id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082',
   tags: ['core', 'extension'],
@@ -24,12 +14,54 @@ module.exports = {
     ![](https://preview.redd.it/vtiw9ulqlt951.png?width=1368&format=png&auto=webp&s=733d8b27ec62151c7858b4eca463f809ead6395a)`,
   version: require('../../package.json').version,
   author: 'dragonwocky',
-  options: [],
+  options: [
-  hacks: {
+    {
-    'main/main.js': require('./tray.js')(defaults),
+      key: 'openhidden',
-    'main/createWindow.js': require('./create.js')(defaults),
+      label: 'hide app on open',
-    'renderer/index.js': require('./render.js')(defaults),
+      type: 'toggle',
-    'renderer/preload.js': require('./client.js')(defaults),
+      value: false,
+    },
+    {
+      key: 'maximized',
+      label: 'auto-maximise windows',
+      type: 'toggle',
+      value: false,
+    },
+    {
+      key: 'close_to_tray',
+      label: 'close window to the tray',
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'frameless',
+      label: 'integrate titlebar into notion',
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'dragarea_height',
+      label: 'height of frameless dragarea',
+      type: 'input',
+      value: 15,
+    },
+    {
+      key: 'smooth_scrollbars',
+      label: 'integrate scrollbars into notion',
+      type: 'toggle',
+      value: true,
+    },
+    {
+      key: 'hotkey',
+      label: 'window display hotkey',
+      type: 'input',
+      value: 'CmdOrCtrl+Shift+A',
+    },
+  ],
+  hacks: {
+    'main/main.js': require('./tray.js'),
+    'main/createWindow.js': require('./create.js'),
+    'renderer/index.js': require('./render.js'),
+    'renderer/preload.js': require('./client.js'),
   },
-  defaults,
 };

mods/core/render.js

@@ -6,10 +6,8 @@
 
 'use strict';
 
-module.exports = (defaults) =>
+module.exports = (store, __exports) => {
-  function (store, __exports) {
+  const __start = window['__start'];
-    const __start = window['__start'],
-      settings = store(defaults);
 
   window['__start'] = function () {
     __start();
@@ -26,8 +24,10 @@ module.exports = (defaults) =>
         if (event.channel !== 'enhancer:sidebar-width') return;
         dragarea.setAttribute(
           'style',
-            `${default_styles} top: 2px; height: ${settings.dragarea_height}px; left: ${event.args[0]};`
+          `${default_styles} top: 2px; height: ${
+            store().dragarea_height
+          }px; left: ${event.args[0]};`
         );
       });
   };
-  };
+};

mods/core/tray.js

@@ -9,13 +9,11 @@
 
 let tray, enhancer_menu;
 
-module.exports = (defaults) =>
+module.exports = (store, __exports) => {
-  function (store, __exports) {
   const electron = require('electron'),
     path = require('path'),
     is_mac = process.platform === 'darwin',
     is_win = process.platform === 'win32',
-      settings = store(defaults),
     helpers = require('../../pkg/helpers.js'),
     __notion = helpers.getNotion();
 
@@ -159,7 +157,7 @@ module.exports = (defaults) =>
     function showWindows() {
       const windows = electron.BrowserWindow.getAllWindows();
       if (is_mac) electron.app.show();
-        if (settings.maximized) windows.forEach((win) => [win.maximize()]);
+      if (store().maximized) windows.forEach((win) => [win.maximize()]);
       else windows.forEach((win) => win.show());
       electron.app.focus({ steal: true });
     }
@@ -174,11 +172,11 @@ module.exports = (defaults) =>
       if (windows.some((win) => win.isVisible())) hideWindows();
       else showWindows();
     });
-      electron.globalShortcut.register(settings.hotkey, () => {
+    electron.globalShortcut.register(store().hotkey, () => {
       const windows = electron.BrowserWindow.getAllWindows();
       if (windows.some((win) => win.isFocused() && win.isVisible()))
         hideWindows();
       else showWindows();
     });
   });
-  };
+};

pkg/helpers.js

@@ -127,7 +127,11 @@ function getEnhancements() {
         modules.IDs.includes(mod.id) ||
         !mod.name ||
         !mod.version ||
-        !mod.author
+        !mod.author ||
+        (mod.options &&
+          !mod.options.every((opt) =>
+            ['toggle', 'select', 'input', 'file'].includes(opt.type)
+          ))
       )
         throw Error;
       modules.loaded.push({

pkg/loader.js

@@ -52,14 +52,22 @@ module.exports = function (__file, __exports) {
           document.querySelector('head').appendChild(style);
         });
       }
-      if (mod.hacks && mod.hacks[__file])
+      if (mod.hacks && mod.hacks[__file]) {
+        mod.defaults = {};
+        for (let opt of mod.options || [])
+          mod.defaults[opt.key] = Array.isArray(opt.value)
+            ? opt.value[0]
+            : opt.value;
         mod.hacks[__file](
           (...args) =>
-            args.length === 1
+            !args.length
-              ? store(mod.id, args[0])
+              ? store(mod.id, mod.defaults)
-              : store(args[0], args[1]),
+              : args.length === 1
+              ? store(mod.id, { ...mod.defaults, ...args[0] })
+              : store(args[0], { ...mod.defaults, ...args[1] }),
           __exports
         );
       }
     }
+  }
 };