From 09c2fa1e2210598448d73f2aa072e01fadde6302 Mon Sep 17 00:00:00 2001 From: fydne <156155219+zxcnoname666@users.noreply.github.com> Date: Wed, 29 May 2024 22:17:38 +0500 Subject: [PATCH] 1.5.0 Rewritten code of frontend js. - Changed notification structure to classes. - This should reduce the load on RAM, since class methods are used instead of anonymous methods which loaded RAM. --- files/preload.js | 363 ++++++++++++++++++++++++---------------------- files/style.css | 10 +- package-lock.json | 56 ++++--- package.json | 4 +- 4 files changed, 232 insertions(+), 201 deletions(-) diff --git a/files/preload.js b/files/preload.js index d3c87f3..51b7b2c 100644 --- a/files/preload.js +++ b/files/preload.js @@ -11,130 +11,197 @@ electron.contextBridge.exposeInMainWorld('DefocusNotify', (id) => DefocusNotify( let _loaded = false; let position = 1; const focusedNotify = []; +const NotifyList = []; const delay = ms => new Promise(resolve => setTimeout(resolve, ms)); window.addEventListener('DOMContentLoaded', () => _loaded = true); -electron.ipcRenderer.once('load-position', async (_, _position) => { - while (!_loaded) { - await delay(1000); - } +class Notify { + constructor(notify, click) { + const block = document.getElementById('block'); - document.body.className = 'position-' + _position; - position = _position; -}); + const parent = document.createElement('div'); + parent.className = 'notify'; + parent.id = notify.id; + if (click) { + parent.className += ' clickActive'; + } + if (block.children < 1 || position == 2 || position == 3) { + block.appendChild(parent); + } else { + block.insertBefore(parent, block.children[0]); + } + const title = document.createElement('span'); + title.className = 'title'; + title.innerHTML = notify.title; + parent.appendChild(title); -electron.ipcRenderer.once('custom-style', async (_, style) => { - if (!style || `${style}`.length < 1) { - return; - } + const area = document.createElement('div'); + area.style = 'display: flex;'; + parent.appendChild(area); - const element = document.createElement('style'); - element.innerHTML = style; - document.head.appendChild(element); -}); + if (notify.image) { + const img = document.createElement('img'); + img.src = notify.image; + area.appendChild(img); + } + const body = document.createElement('p'); + body.innerHTML = notify.body; + area.appendChild(body); -electron.ipcRenderer.on('show', async (_, notify, click) => { - while (!_loaded) { - await delay(1000); - } - const block = document.getElementById('block'); + this.notify = notify; + this.parent = parent; + this.hideActive = false; + this.blockHide = false; + this.globalLock = false; + this.offsetX = 0; + + + this.isFocus = false; + try { this.isFocus = !(!(parent.querySelector('input, textarea'))); } catch { } - const parent = document.createElement('div'); - parent.className = 'notify'; - parent.id = notify.id; - if (click) { - parent.className += ' clickActive'; - } - if (block.children < 1 || position == 2 || position == 3) { - block.appendChild(parent); - } else { - block.insertBefore(parent, block.children[0]); - } - const title = document.createElement('span'); - title.className = 'title'; - title.innerHTML = notify.title; - parent.appendChild(title); + this.onmousedown = this.mousedown.bind(this); + this.onmouseup = this.mouseup.bind(this); + this.onmousemove = this.mousemove.bind(this); + this.onmouseenter = this.mouseenter.bind(this); + this.onmouseleave = this.mouseleave.bind(this); + this.onclick = this.click.bind(this); - const area = document.createElement('div'); - area.style = 'display: flex;'; - parent.appendChild(area); + parent.addEventListener('mousedown', this.onmousedown, false); + parent.addEventListener('mouseup', this.onmouseup, false); + parent.addEventListener('mousemove', this.onmousemove, false); + parent.addEventListener('mouseenter', this.onmouseenter, false); + parent.addEventListener('mouseleave', this.onmouseleave, false); + parent.addEventListener('click', this.onclick, false); - if (notify.image) { - const img = document.createElement('img'); - img.src = notify.image; - area.appendChild(img); + NotifyList.push(this); + + setTimeout(() => { + if (focusedNotify.some(x => x == notify.id)) { + const interv = setInterval(() => { + if (focusedNotify.some(x => x == notify.id)) { + return; + } + + clearInterval(interv); + this.destroy(); + }, 500); + return; + } + + this.destroy(); + }, notify.time * 1000); + + if (notify.sound) { + const audio = document.querySelector('audio'); + audio.src = notify.sound.url; + try { + audio.volume = notify.sound.volume / 100; + } catch { + audio.volume = 0.5; + } + audio.play(); + } } - const body = document.createElement('p'); - body.innerHTML = notify.body; - area.appendChild(body); + destroy() { + if (this.globalLock) { + return; + } + if (!this.parent) { + return; + } + + this.hideActive = true; + this.blockHide = true; + this.globalLock = true; + this.parent.id = ''; + this.parent.classList.add('hide'); - let hideActive = false; - let blockHide = false; - let globalLock = false; - let offsetX = 0; + this.parent.removeEventListener('mousedown', this.onmousedown, false); + this.parent.removeEventListener('mouseup', this.onmouseup, false); + this.parent.removeEventListener('mousemove', this.onmousemove, false); + this.parent.removeEventListener('mouseenter', this.onmouseenter, false); + this.parent.removeEventListener('mouseleave', this.onmouseleave, false); + this.parent.removeEventListener('click', this.onclick, false); - parent.onmousedown = (ev) => { - if (focusedNotify.some(x => x == notify.id)) { + const index = NotifyList.indexOf(this); + if (index > -1) { + NotifyList.splice(index, 1); + } + + setTimeout(() => { + try { + setTimeout(() => this.parent.remove(), 100); + this.parent.setAttribute('send-height', this.parent.clientHeight + 'px'); + this.parent.classList.add('del'); + } catch { } + electron.ipcRenderer.send('notify-manager-destory', this.notify.id); + }, 750); + + StopAudio(this.notify); + + try { DefocusNotify(this.notify.id); } catch { } + } + + mousedown(ev) { + if (focusedNotify.some(x => x == this.notify.id)) { return; } - if (blockHide) { + if (this.blockHide) { return; } - hideActive = true; - offsetX = parent.offsetLeft - ev.clientX; + this.hideActive = true; + this.offsetX = this.parent.offsetLeft - ev.clientX; }; - parent.onmouseup = () => { - if (globalLock) { + async mouseup() { + if (this.globalLock) { return; } - if (!hideActive) { + if (!this.hideActive) { return; } - hideActive = false; - offsetX = 0; - blockHide = true; + this.hideActive = false; + this.offsetX = 0; + this.blockHide = true; - (async () => { - const pos = parseInt(parent.style.left.replace('px', '')); - if (pos < 1) { - parent.style.left = 0; - blockHide = false; - return; - } - const ms = (pos / 300 * 1000) / 50; - const per = pos / 50; - for (let i = 0; i < 50; i++) { - parent.style.left = (pos - (per * i)) + 'px'; - await new Promise(res => setTimeout(() => res(), ms)); - } - parent.style.left = 0; - blockHide = false; - })(); + const pos = parseInt(this.parent.style.left.replace('px', '')); + if (pos < 1) { + this.parent.style.left = 0; + this.blockHide = false; + return; + } + const ms = (pos / 300 * 1000) / 50; + const per = pos / 50; + for (let i = 0; i < 50; i++) { + this.parent.style.left = (pos - (per * i)) + 'px'; + await delay(ms); + } + this.parent.style.left = 0; + this.blockHide = false; }; - parent.onmousemove = (ev) => { - if (!hideActive) { + mousemove(ev) { + if (!this.hideActive) { return; } - if (focusedNotify.some(x => x == notify.id)) { - parent.onmouseup(); - hideActive = false; + if (focusedNotify.some(x => x == this.notify.id)) { + this.mouseup(); + this.hideActive = false; return; } - const _px = (ev.clientX + offsetX); + const _px = (ev.clientX + this.offsetX); if (_px < 0 && (position == 1 || position == 2)) { return; } @@ -142,116 +209,69 @@ electron.ipcRenderer.on('show', async (_, notify, click) => { return; } + this.parent.style.left = _px + 'px'; + if (_px > 130 || _px < -130) { - hideActive = true; - blockHide = true; - globalLock = true; - parent.id = ''; - parent.classList.add('hide'); - setTimeout(() => { - try { - setTimeout(() => parent.outerHTML = '', 100); - parent.setAttribute('send-height', parent.clientHeight + 'px'); - parent.classList.add('del'); - } catch { } - electron.ipcRenderer.send('notify-manager-destory', notify.id); - }, 750); - StopAudio(notify); - try { DefocusNotify(notify.id); } catch { } - return; + this.destroy(); } - - parent.style.left = _px + 'px'; }; - parent.onmouseenter = () => { - let focus = false; - try { focus = !(!(body.querySelector('input') || body.querySelector('textarea'))); } catch { } - electron.ipcRenderer.send('notify-manager-set-visibly', true, focus); + mouseenter() { + electron.ipcRenderer.send('notify-manager-set-visibly', true, this.isFocus); }; - parent.onmouseleave = () => { + mouseleave() { electron.ipcRenderer.send('notify-manager-set-visibly', false); }; - parent.onclick = () => { - electron.ipcRenderer.send('notify-manager-onclick', notify.id); + click() { + electron.ipcRenderer.send('notify-manager-onclick', this.notify.id); }; +} - setTimeout(() => { - if (focusedNotify.some(x => x == notify.id)) { - const interv = setInterval(() => { - if (focusedNotify.some(x => x == notify.id)) { - return; - } - - clearInterval(interv); - _destroy(); - }, 500); - return; - } - _destroy(); +electron.ipcRenderer.once('load-position', async (_, _position) => { + while (!_loaded) { + await delay(1000); + } - function _destroy() { - if (globalLock) { - return; - } - if (!parent) { - return; - } + document.body.className = 'position-' + _position; + position = _position; +}); - parent.id = ''; - parent.classList.add('hide'); - setTimeout(() => { - try { - setTimeout(() => parent.outerHTML = '', 100); - parent.setAttribute('send-height', parent.clientHeight + 'px'); - parent.classList.add('del'); - } catch { } - electron.ipcRenderer.send('notify-manager-destory', notify.id); - }, 750); +electron.ipcRenderer.once('custom-style', async (_, style) => { + if (!style || typeof (style) != 'string' || style.length < 1) { + return; + } - StopAudio(notify); - } + const element = document.createElement('style'); + element.innerHTML = style; + document.head.appendChild(element); +}); - }, notify.time * 1000); - if (notify.sound) { - const audio = document.querySelector('audio'); - audio.src = notify.sound.url; - try { - audio.volume = notify.sound.volume / 100; - } catch { - audio.volume = 0.5; - } - audio.play(); +const showFn = async (_, notify, click) => { + while (!_loaded) { + await delay(1000); } -}); + new Notify(notify, click); +}; -electron.ipcRenderer.on('destroy', async (_, notify) => { - const parent = document.getElementById(notify.id); - if (!parent) { +const destroyFn = async (_, notify) => { + const notifyObj = NotifyList.find(x => x.notify.id == notify.id); + if (!notifyObj) { console.log('notify of id ' + notify.id + ' not found'); return; } - parent.id = ''; - parent.classList.add('hide'); - - setTimeout(() => { - try { - setTimeout(() => parent.outerHTML = '', 100); - parent.setAttribute('send-height', parent.clientHeight + 'px'); - parent.classList.add('del'); - } catch { } - }, 750); + notifyObj.destroy(); +}; - StopAudio(notify); -}); +electron.ipcRenderer.on('show', showFn); +electron.ipcRenderer.on('destroy', destroyFn); function StopAudio(notify) { @@ -267,11 +287,9 @@ function StopAudio(notify) { return; } - setTimeout(() => { - if (audio.src == notify.sound.url) { - audio.pause(); - } - }, 900); + if (audio.src == notify.sound.url) { + audio.pause(); + } } function FocusNotify(id) { @@ -297,7 +315,7 @@ function DefocusNotify(id) { focusedNotify.splice(index, 1); } -window.addEventListener('keydown', (e) => { +const onKeyDown = (e) => { if (e.code == 'F11') { e.preventDefault(); return false; @@ -306,4 +324,5 @@ window.addEventListener('keydown', (e) => { e.preventDefault(); return false; } -}); \ No newline at end of file +}; +window.addEventListener('keydown', onKeyDown, false); \ No newline at end of file diff --git a/files/style.css b/files/style.css index 23aae35..c559bd3 100644 --- a/files/style.css +++ b/files/style.css @@ -71,14 +71,8 @@ audio { } ::-webkit-scrollbar { - height: 3px; - width: 3px; -} -::-webkit-scrollbar-thumb { - background-color: #99afbd; -} -::-webkit-scrollbar-track { - background-color: #18191c; + height: 0; + width: 0; } body[class="position-1"] .notify, diff --git a/package-lock.json b/package-lock.json index 206eafd..1aa59bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,15 @@ { "name": "notify-manager-electron", - "version": "1.4.0", + "version": "1.5.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "notify-manager-electron", - "version": "1.4.0", + "version": "1.5.0", "license": "MIT", "devDependencies": { - "electron": "^28.1.2" + "electron": "^30.0.8" } }, "node_modules/@electron/get": { @@ -85,10 +85,13 @@ } }, "node_modules/@types/node": { - "version": "18.17.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.1.tgz", - "integrity": "sha512-xlR1jahfizdplZYRU59JlUx9uzF1ARa8jbhM11ccpCJya8kvos5jwdm2ZAgxSCwOl0fq21svP18EVwPBXMQudw==", - "dev": true + "version": "20.12.12", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz", + "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } }, "node_modules/@types/responselike": { "version": "1.0.0", @@ -242,14 +245,14 @@ "optional": true }, "node_modules/electron": { - "version": "28.1.2", - "resolved": "https://registry.npmjs.org/electron/-/electron-28.1.2.tgz", - "integrity": "sha512-rbRuIj5pRn6K16Hx3XYlI2C4jp6s0ZJ4QptQ+wGw0blO5563cXCtZxK/wifVGfuwVfa3n/UqMuUwn3IshjZ8dw==", + "version": "30.0.8", + "resolved": "https://registry.npmjs.org/electron/-/electron-30.0.8.tgz", + "integrity": "sha512-ivzXJJ/9gdb4oOw+5SDuaZpSInz8C+Z021dKZfFLMltKbDa4sSqt5cRBiUg7J36Z2kdus+Jai0bdHWutYE9wAA==", "dev": true, "hasInstallScript": true, "dependencies": { "@electron/get": "^2.0.0", - "@types/node": "^18.11.18", + "@types/node": "^20.9.0", "extract-zip": "^2.0.1" }, "bin": { @@ -774,6 +777,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", @@ -867,10 +876,13 @@ } }, "@types/node": { - "version": "18.17.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.1.tgz", - "integrity": "sha512-xlR1jahfizdplZYRU59JlUx9uzF1ARa8jbhM11ccpCJya8kvos5jwdm2ZAgxSCwOl0fq21svP18EVwPBXMQudw==", - "dev": true + "version": "20.12.12", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz", + "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==", + "dev": true, + "requires": { + "undici-types": "~5.26.4" + } }, "@types/responselike": { "version": "1.0.0", @@ -985,13 +997,13 @@ "optional": true }, "electron": { - "version": "28.1.2", - "resolved": "https://registry.npmjs.org/electron/-/electron-28.1.2.tgz", - "integrity": "sha512-rbRuIj5pRn6K16Hx3XYlI2C4jp6s0ZJ4QptQ+wGw0blO5563cXCtZxK/wifVGfuwVfa3n/UqMuUwn3IshjZ8dw==", + "version": "30.0.8", + "resolved": "https://registry.npmjs.org/electron/-/electron-30.0.8.tgz", + "integrity": "sha512-ivzXJJ/9gdb4oOw+5SDuaZpSInz8C+Z021dKZfFLMltKbDa4sSqt5cRBiUg7J36Z2kdus+Jai0bdHWutYE9wAA==", "dev": true, "requires": { "@electron/get": "^2.0.0", - "@types/node": "^18.11.18", + "@types/node": "^20.9.0", "extract-zip": "^2.0.1" } }, @@ -1390,6 +1402,12 @@ "dev": true, "optional": true }, + "undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", diff --git a/package.json b/package.json index fdd5f02..8a490ec 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "notify-manager-electron", - "version": "1.4.0", + "version": "1.5.0", "description": "Create beautiful and functional notifications on electron", "main": "files/index.js", "types": "files/index.d.ts", @@ -27,6 +27,6 @@ ], "homepage": "https://github.com/zxcnoname666/notify-manager-electron#readme", "devDependencies": { - "electron": "^28.1.2" + "electron": "^30.0.8" } }