From 2ec9808e34d434a9f2b731d0e2154735db22580b Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 4 Dec 2021 13:10:41 +1100 Subject: [PATCH] extension: view scale by @SP12893678 --- repo/registry.json | 1 + repo/view-scale/client.css | 88 ++++++++++++++++++++++++++++++++++++++ repo/view-scale/client.mjs | 82 +++++++++++++++++++++++++++++++++++ repo/view-scale/mod.json | 46 ++++++++++++++++++++ 4 files changed, 217 insertions(+) create mode 100644 repo/view-scale/client.css create mode 100644 repo/view-scale/client.mjs create mode 100644 repo/view-scale/mod.json diff --git a/repo/registry.json b/repo/registry.json index 14a79d7..0656bd5 100644 --- a/repo/registry.json +++ b/repo/registry.json @@ -6,6 +6,7 @@ "integrated-titlebar", "tray", "always-on-top", + "view-scale", "tweaks", "font-chooser", diff --git a/repo/view-scale/client.css b/repo/view-scale/client.css new file mode 100644 index 0000000..72ade4c --- /dev/null +++ b/repo/view-scale/client.css @@ -0,0 +1,88 @@ +/* + * notion-enhancer: view scale + * (c) 2021 SP12893678 (https://sp12893678.tk/) + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +.view_scale--container { + border: 1px solid var(--theme--ui_divider); + border-radius: 9999px !important; + margin: 0 4px; + padding: 0 4px; + align-items: center; + justify-content: center; + display: flex; +} + +.view_scale--slider { + appearance: none; + outline: 0; + border: 0px; + overflow: hidden; + width: 150px; + height: 20px; + margin: auto 4px auto 0; + cursor: ew-resize; + border-radius: 9999px; +} +.view_scale--slider::-webkit-slider-runnable-track { + appearance: none; + height: 20px; + background-color: var(--theme--ui_toggle-off); +} +.view_scale--slider::-webkit-slider-thumb { + appearance: none; + position: relative; + width: 20px; + height: 20px; + border-radius: 9999px; + border: 0px; + background: var(--theme--ui_toggle-on); + box-shadow: -100px 0 0 90px var(--theme--ui_toggle-on), + inset 0 0 0 20px var(--theme--ui_toggle-on); + transition: 0.2s; +} +.view_scale--slider:active::-webkit-slider-thumb { + background: var(--theme--ui_toggle-feature); + box-shadow: -100px 0 0 90px var(--theme--ui_toggle-on), + inset 0 0 0 2px var(--theme--ui_toggle-on); +} + +.view_scale--counter { + font-size: 14px; + margin: auto 0; + width: 5ch; + text-align: right; +} + +.view_scale--button { + user-select: none; + transition: background 20ms ease-in 0s; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + border-radius: 3px; + height: 28px; + width: 33px; + padding: 0 0.25px 0 0; + + margin-left: 2px; + border: none; + background: transparent; + font-size: 18px; +} +.view_scale--button:focus, +.view_scale--button:hover { + background: var(--theme--ui_interactive-hover); +} +.view_scale--button:active { + background: var(--theme--ui_interactive-active); +} +.view_scale--button svg { + display: block; + width: 20px; + height: 20px; +} diff --git a/repo/view-scale/client.mjs b/repo/view-scale/client.mjs new file mode 100644 index 0000000..d48aa9b --- /dev/null +++ b/repo/view-scale/client.mjs @@ -0,0 +1,82 @@ +/* + * notion-enhancer: view scale + * (c) 2021 SP12893678 (https://sp12893678.tk/) + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +export default async function ({ web, components }, db) { + let zoomFactor = (await db.get(['default_zoom'])) / 100, + updateScale = () => {}; + __enhancerElectronApi.webFrame.setZoomFactor(zoomFactor); + + const zoomOffset = (await db.get(['offset'])) / 100, + zoomMin = 0.5, + zoomMax = 2, + getZoomFactor = () => __enhancerElectronApi.webFrame.getZoomFactor(), + setZoomFactor = (zoomFactor) => __enhancerElectronApi.webFrame.setZoomFactor(zoomFactor), + zoomPlus = (multiplier = 1) => { + zoomFactor = Math.min(getZoomFactor() + zoomOffset * multiplier, zoomMax); + setZoomFactor(zoomFactor); + updateScale(); + }, + zoomMinus = (multiplier = 1) => { + zoomFactor = Math.max(getZoomFactor() - zoomOffset * multiplier, zoomMin); + setZoomFactor(zoomFactor); + updateScale(); + }; + + const mousewheelModifier = await db.get(['mousewheel']); + if (mousewheelModifier !== '-- none --') { + const mousewheelModifierKey = { + Control: 'ctrlKey', + Alt: 'altKey', + Command: 'metaKey', + Shift: 'shiftKey', + }[mousewheelModifier]; + document.addEventListener('wheel', (event) => { + if (event[mousewheelModifierKey] && event.deltaY < 0) zoomPlus(); + if (event[mousewheelModifierKey] && event.deltaY > 0) zoomMinus(); + }); + } + + const showVisualSlider = await db.get(['ui']); + if (showVisualSlider) { + const topbarActionsSelector = '.notion-topbar-action-buttons'; + await web.whenReady([topbarActionsSelector]); + + const $topbarActions = document.querySelector(topbarActionsSelector), + $scaleContainer = web.html`
`, + $scaleSlider = web.html``, + $scaleCounter = web.html`100%`, + $scalePlus = web.html``, + $scaleMinus = web.html``; + updateScale = () => { + if (getZoomFactor() !== zoomFactor) zoomFactor = getZoomFactor(); + $scaleSlider.value = Math.round(zoomFactor * 100); + $scaleCounter.innerHTML = Math.round(zoomFactor * 100) + '%'; + }; + updateScale(); + + $scaleSlider.addEventListener('input', () => { + zoomFactor = $scaleSlider.value / 100; + $scaleCounter.innerHTML = Math.round(zoomFactor * 100) + '%'; + }); + $scaleSlider.addEventListener('change', () => setZoomFactor(zoomFactor)); + $scalePlus.addEventListener('click', () => zoomPlus()); + $scaleMinus.addEventListener('click', () => zoomMinus()); + + $topbarActions.prepend( + web.render($scaleContainer, $scaleSlider, $scaleCounter, $scalePlus, $scaleMinus) + ); + + web.addHotkeyListener(['Ctrl', '+'], updateScale); + web.addHotkeyListener(['Ctrl', '-'], updateScale); + web.addHotkeyListener(['Command', '+'], updateScale); + web.addHotkeyListener(['Command', '-'], updateScale); + } +} diff --git a/repo/view-scale/mod.json b/repo/view-scale/mod.json new file mode 100644 index 0000000..0520a1e --- /dev/null +++ b/repo/view-scale/mod.json @@ -0,0 +1,46 @@ +{ + "name": "view scale", + "id": "e71ce1e0-024c-435e-a25e-7dd50448d1df", + "version": "0.1.0", + "description": "zoom in/out of the notion window with the mousewheel or a visual slider (`ctrl/cmd +/-` are available in-app by default).", + "tags": ["extension", "shortcut"], + "authors": [ + { + "name": "SP12893678", + "homepage": "https://sp12893678.tk/", + "avatar": "https://sp12893678.tk/img/avatar.jpg" + } + ], + "js": { + "client": ["client.mjs"] + }, + "css": { + "client": ["client.css"] + }, + "options": [ + { + "type": "number", + "key": "offset", + "label": "scale +/- offset (%)", + "value": 10 + }, + { + "type": "number", + "key": "default_zoom", + "label": "default scale (%)", + "value": 100 + }, + { + "type": "toggle", + "key": "ui", + "label": "visual slider", + "value": true + }, + { + "type": "select", + "key": "mousewheel", + "label": "mousewheel scaling keyboard modifier", + "values": ["Control", "Alt", "Command", "Shift", "-- none --"] + } + ] +}