mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-06 05:29:02 +00:00
extension: view scale by @SP12893678
This commit is contained in:
parent
eca85f7a7d
commit
2ec9808e34
@ -6,6 +6,7 @@
|
||||
"integrated-titlebar",
|
||||
"tray",
|
||||
"always-on-top",
|
||||
"view-scale",
|
||||
|
||||
"tweaks",
|
||||
"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