mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 20:59:02 +00:00
extension: view-scale (#532)
* add a mod that can use to scale the notion view * fix bugs and add hotkey & mouse wheel options * add select_modifier option and add resize event to fix bugs * add silder ui to scale view
This commit is contained in:
SP12893678
GitHub
parent
895334c640
commit
e79de360f1
88
mods/view-scale/app.css
Normal file
88
mods/view-scale/app.css
Normal file
@ -0,0 +1,88 @@
|
||||
/*
|
||||
* view-scale
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 SP12893678
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.notion-topbar-actions{
|
||||
display: flex;
|
||||
align-items: center !important;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.notion-scale-container{
|
||||
border: 1px solid rgba(200, 200, 200, 0.5);
|
||||
border-radius: 9999px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0px 4px;
|
||||
}
|
||||
|
||||
.notion-scale-container div{
|
||||
margin: 2px 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notion-scale-view{
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.notion-scale-button{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 9999px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.notion-scale-button:hover{
|
||||
background: var(--theme--interactive_hover);
|
||||
}
|
||||
|
||||
.notion-scale-slider{
|
||||
margin-left: 8px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.notion-scale-slider[type="range"]{
|
||||
-webkit-appearance: none;
|
||||
outline: 0;
|
||||
border: 0px;
|
||||
overflow:hidden;
|
||||
width:150px;
|
||||
height:20px;
|
||||
cursor: ew-resize;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.notion-scale-slider[type="range"]::-webkit-slider-runnable-track {
|
||||
height:20px;
|
||||
-webkit-appearance: none;
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.notion-scale-slider[type="range"]::-webkit-slider-thumb{
|
||||
-webkit-appearance: none;
|
||||
position: relative;
|
||||
width:20px;
|
||||
height:20px;
|
||||
border-radius: 9999px;
|
||||
border: 0px;
|
||||
background: #1597ff;
|
||||
box-shadow: -100px 0 0 90px #1597ff, inset 0 0 0 20px #1597ff;
|
||||
filter: drop-shadow(0px 0px 2px rgba(87, 50, 50, 0.3));
|
||||
transition:.2s;
|
||||
}
|
||||
|
||||
.notion-scale-slider[type=range]:active::-webkit-slider-thumb {
|
||||
background: #fff;
|
||||
box-shadow: -100px 0 0 90px #1597ff, inset 0 0 0 2px #1597ff;
|
||||
}
|
||||
186
mods/view-scale/mod.js
Normal file
186
mods/view-scale/mod.js
Normal file
@ -0,0 +1,186 @@
|
||||
/*
|
||||
* view-scale
|
||||
* (c) 2020 SP12893678 (https://github.com/SP12893678)
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
const electron = require('electron');
|
||||
const { createElement } = require('../../pkg/helpers.js');
|
||||
|
||||
module.exports = {
|
||||
id: 'e71ce1e0-024c-435e-a25e-7dd50448d1df',
|
||||
tags: ['extension'],
|
||||
name: 'view-scale',
|
||||
desc: 'scale the notion view',
|
||||
version: '1.0.0',
|
||||
author: 'SP12893678',
|
||||
options: [
|
||||
{
|
||||
key: 'show_ui',
|
||||
label: 'show scale ui',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
key: 'offset',
|
||||
label: 'set scale plus and minus offset',
|
||||
type: 'input',
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
key: 'zoom',
|
||||
label: 'set scale default value',
|
||||
type: 'input',
|
||||
value: 100,
|
||||
},
|
||||
{
|
||||
key: 'can_hotkey',
|
||||
label: 'use keyboard hotkey to scale',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
key: 'keyboard_select_modifier',
|
||||
label:
|
||||
'keyboard hotkey select modifier',
|
||||
type: 'select',
|
||||
value: [
|
||||
'Control',
|
||||
'Alt',
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'can_mouse_wheel',
|
||||
label: 'use mouse wheel to scale',
|
||||
type: 'toggle',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
key: 'mouse_wheel_select_modifier',
|
||||
label:
|
||||
'mouse wheel select modifier',
|
||||
type: 'select',
|
||||
value: [
|
||||
'Control',
|
||||
'Alt',
|
||||
'Command',
|
||||
'Shift',
|
||||
],
|
||||
},
|
||||
],
|
||||
hacks: {
|
||||
'renderer/preload.js'(store, __exports) {
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
|
||||
const attempt_interval = setInterval(enhance, 500);
|
||||
function enhance() {
|
||||
if (!document.querySelector('.notion-frame')) return;
|
||||
if (!document.querySelector('.notion-topbar-actions')) return;
|
||||
clearInterval(attempt_interval);
|
||||
|
||||
electron.webFrame.setZoomFactor(store().zoom / 100)
|
||||
let zoom = store().zoom / 100
|
||||
let offset = store().offset / 100
|
||||
let minZoom = 0.5
|
||||
let maxZoom = 2
|
||||
|
||||
const $topBarActionShareMenu = document.querySelector('.notion-topbar-share-menu');
|
||||
const $scaleSet = createElement('<div class="notion-scale-container"></div>');
|
||||
const $scaleSilder = createElement('<input class="notion-scale-slider" type="range" min="50" max="200" value="100"></input>');
|
||||
const $scaleView = createElement('<div class="notion-scale-view">100%</div>');
|
||||
const $scalePlusButton = createElement('<div class="notion-scale-button">＋</div>');
|
||||
const $scaleMinusButton = createElement('<div class="notion-scale-button">－</div>');
|
||||
|
||||
|
||||
if(store().show_ui){
|
||||
$scaleSilder.addEventListener('input',()=>{
|
||||
zoom = $scaleSilder.value/100
|
||||
changeScaleViewUIValue()
|
||||
})
|
||||
$scaleSilder.addEventListener('change',()=> electron.webFrame.setZoomFactor(zoom))
|
||||
$scalePlusButton.addEventListener('click',()=> zoomPlus())
|
||||
$scaleMinusButton.addEventListener('click',()=> zoomMinus())
|
||||
|
||||
$scaleSet.append($scaleSilder)
|
||||
$scaleSet.append($scaleView)
|
||||
$scaleSet.append($scalePlusButton)
|
||||
$scaleSet.append($scaleMinusButton)
|
||||
|
||||
$topBarActionShareMenu.before($scaleSet);
|
||||
changeScaleViewUIValue()
|
||||
}
|
||||
|
||||
if(store().can_mouse_wheel){
|
||||
document.defaultView.addEventListener('wheel', (event)=>{
|
||||
let key = getSelectModifierInKeyBoradKey(store().mouse_wheel_select_modifier)
|
||||
if (event[key] && event.deltaY < 0) zoomPlus()
|
||||
if (event[key] && event.deltaY > 0) zoomMinus()
|
||||
});
|
||||
}
|
||||
|
||||
if(store().can_hotkey){
|
||||
document.defaultView.addEventListener('keyup', (event) => {
|
||||
let key = getSelectModifierInKeyBoradKey(store().keyboard_select_modifier)
|
||||
if (event[key] && event.key == '+') zoomPlus()
|
||||
if (event[key] && event.key == '-') zoomMinus()
|
||||
})
|
||||
}
|
||||
|
||||
document.defaultView.addEventListener('resize',(event) =>{
|
||||
zoom = electron.webFrame.getZoomFactor()
|
||||
if(store().show_ui) changeScaleViewUIValue()
|
||||
});
|
||||
|
||||
const observer = new MutationObserver((list, observer) => {
|
||||
electron.webFrame.setZoomFactor(zoom)
|
||||
});
|
||||
|
||||
observer.observe(document.querySelector('.notion-frame'), {
|
||||
childList: true
|
||||
});
|
||||
|
||||
function zoomPlus() {
|
||||
zoom = electron.webFrame.getZoomFactor()
|
||||
if(zoom + offset > maxZoom) return
|
||||
zoom += offset
|
||||
electron.webFrame.setZoomFactor(zoom)
|
||||
}
|
||||
|
||||
function zoomMinus() {
|
||||
zoom = electron.webFrame.getZoomFactor()
|
||||
if(zoom + offset < minZoom) return
|
||||
zoom -= offset
|
||||
electron.webFrame.setZoomFactor(zoom)
|
||||
}
|
||||
|
||||
function changeScaleViewUIValue() {
|
||||
$scaleView.innerHTML = Math.round(zoom * 100) + "%"
|
||||
}
|
||||
|
||||
function getSelectModifierInKeyBoradKey(select_modifier) {
|
||||
let key = 'ctrlKey'
|
||||
switch (select_modifier) {
|
||||
case 'Control':
|
||||
key = 'ctrlKey'
|
||||
break;
|
||||
case 'Alt':
|
||||
key = 'altKey'
|
||||
break;
|
||||
case 'Command':
|
||||
key = 'metaKey'
|
||||
break;
|
||||
case 'Shift':
|
||||
key = 'shiftKey'
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return key
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user