mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-09 15:09:02 +00:00
extension: view scale by @SP12893678
This commit is contained in:
parent
eca85f7a7d
commit
2ec9808e34
@ -6,6 +6,7 @@
|
|||||||
"integrated-titlebar",
|
"integrated-titlebar",
|
||||||
"tray",
|
"tray",
|
||||||
"always-on-top",
|
"always-on-top",
|
||||||
|
"view-scale",
|
||||||
|
|
||||||
"tweaks",
|
"tweaks",
|
||||||
"font-chooser",
|
"font-chooser",
|
||||||
|
|||||||
88
repo/view-scale/client.css
Normal file
88
repo/view-scale/client.css
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
/*
|
||||||
|
* notion-enhancer: view scale
|
||||||
|
* (c) 2021 SP12893678 (https://sp12893678.tk/)
|
||||||
|
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (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;
|
||||||
|
}
|
||||||
82
repo/view-scale/client.mjs
Normal file
82
repo/view-scale/client.mjs
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
/*
|
||||||
|
* notion-enhancer: view scale
|
||||||
|
* (c) 2021 SP12893678 (https://sp12893678.tk/)
|
||||||
|
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (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`<div class="view_scale--container"></div>`,
|
||||||
|
$scaleSlider = web.html`<input class="view_scale--slider" type="range" min="50" max="200" value="100"></input>`,
|
||||||
|
$scaleCounter = web.html`<span class="view_scale--counter">100%</span>`,
|
||||||
|
$scalePlus = web.html`<button class="view_scale--button">
|
||||||
|
${await components.feather('zoom-in')}
|
||||||
|
</button>`,
|
||||||
|
$scaleMinus = web.html`<button class="view_scale--button">
|
||||||
|
${await components.feather('zoom-out')}
|
||||||
|
</button>`;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
46
repo/view-scale/mod.json
Normal file
46
repo/view-scale/mod.json
Normal file
@ -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 --"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user