dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-06 21:49:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

icon sets: encode imgs to data url to prevent quality reduction

Browse Source
This commit is contained in:
dragonwocky 2021-11-30 22:46:41 +11:00
parent da85adcd33
commit 8f8dafeb70
2 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
repo/icon-sets/client.mjs
View File

@ -6,8 +6,17 @@
* (https://notion-enhancer.github.io/) under the MIT license * (https://notion-enhancer.github.io/) under the MIT license
*/ */
const getImgData = (url) =>
new Promise(async (res, rej) => {
const blob = await fetch(url).then((res) => res.blob()),
reader = new FileReader();
reader.onload = (e) => res(e.target.result);
reader.readAsDataURL(blob);
});
export default async function ({ web, fs, components, notion }, db) { export default async function ({ web, fs, components, notion }, db) {
const recentUploads = await db.get(['recent_uploads'], []), const recentUploads = await db.get(['recent_uploads'], []),
preventQualityReduction = await db.get(['prevent_quality_reduction']),
$triangleSvg = web.html`<svg viewBox="0 0 100 100" class="triangle"> $triangleSvg = web.html`<svg viewBox="0 0 100 100" class="triangle">
<polygon points="5.9,88.2 50,11.8 94.1,88.2" /> <polygon points="5.9,88.2 50,11.8 94.1,88.2" />
</svg>`; </svg>`;
@ -131,7 +140,7 @@ export default async function ({ web, fs, components, notion }, db) {
recentUploads.splice(i, 1); recentUploads.splice(i, 1);
db.set(['recent_uploads'], recentUploads); db.set(['recent_uploads'], recentUploads);
$icon.remove(); $icon.remove();
} else setIcon(url); } else setIcon({ signed, url });
}); });
loadPromises.push( loadPromises.push(
new Promise((res, rej) => { new Promise((res, rej) => {
@ -174,7 +183,7 @@ export default async function ({ web, fs, components, notion }, db) {
$icon = web.render(web.html`<span class="icon_sets--icon"></span>`, $img); $icon = web.render(web.html`<span class="icon_sets--icon"></span>`, $img);
web.render($set, $icon); web.render($set, $icon);
$icon.addEventListener('click', (event) => { $icon.addEventListener('click', (event) => {
if (!event.shiftKey) setIcon(iconUrl); if (!event.shiftKey) setIcon({ signed: iconUrl, url: iconUrl });
}); });
if (!sprite) { if (!sprite) {
loadPromises.push( loadPromises.push(
@ -253,12 +262,15 @@ export default async function ({ web, fs, components, notion }, db) {
// otherwise both may be visible on reopen // otherwise both may be visible on reopen
displayEmojiTab(true); displayEmojiTab(true);
async function setIcon(iconUrl) { async function setIcon({ signed, url }) {
// without this react gets upset // without this react gets upset
displayEmojiTab(); displayEmojiTab();
$linkTab.firstChild.click(); $linkTab.firstChild.click();
await new Promise(requestAnimationFrame); await new Promise(requestAnimationFrame);
$mediaMenu.parentElement.style.opacity = '0';
const iconUrl = preventQualityReduction ? await getImgData(signed) : url;
// call native setter, imitate human input // call native setter, imitate human input
const $notionLinkInput = $mediaMenu.querySelector(mediaLinkInputSelector), const $notionLinkInput = $mediaMenu.querySelector(mediaLinkInputSelector),
proto = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value'); proto = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value');
@ -276,8 +288,9 @@ export default async function ({ web, fs, components, notion }, db) {
const submitLinkIcon = () => { const submitLinkIcon = () => {
const url = $iconsLinkInput.firstElementChild.value; const url = $iconsLinkInput.firstElementChild.value;
if (!url) return; if (!url) return;
setIcon(url); const icon = { signed: notion.sign(url, notion.getPageID()), url: url };
recentUploads.push({ signed: notion.sign(url, notion.getPageID()), url: url }); setIcon(icon);
recentUploads.push(icon);
db.set(['recent_uploads'], recentUploads); db.set(['recent_uploads'], recentUploads);
}; };
$iconsLinkInput.onkeyup = (event) => { $iconsLinkInput.onkeyup = (event) => {
@ -289,9 +302,10 @@ export default async function ({ web, fs, components, notion }, db) {
$iconsUploadSubmit.onclick = () => $iconsUploadFile.click(); $iconsUploadSubmit.onclick = () => $iconsUploadFile.click();
$iconsUploadFile.onchange = async (event) => { $iconsUploadFile.onchange = async (event) => {
const file = event.target.files[0], const file = event.target.files[0],
url = await notion.upload(file); url = await notion.upload(file),
setIcon(url); icon = { signed: notion.sign(url, notion.getPageID()), url: url };
recentUploads.push({ signed: notion.sign(url, notion.getPageID()), url: url }); setIcon(icon);
recentUploads.push(icon);
db.set(['recent_uploads'], recentUploads); db.set(['recent_uploads'], recentUploads);
}; };
}; };

7
repo/icon-sets/mod.json
View File

@ -26,6 +26,13 @@
"label": "load default icon sets from github", "label": "load default icon sets from github",
"value": true "value": true
}, },
{
"type": "toggle",
"key": "prevent_quality_reduction",
"label": "prevent icon quality reduction",
"tooltip": "**this may break icons in widgets** - encodes and submits images as data urls to prevent notion from optimising them (reduces image quality by ~20%)",
"value": true
},
{ {
"type": "file", "type": "file",
"key": "json", "key": "json",