diff --git a/preload.js b/preload.js index 75db891..c1eeebd 100644 --- a/preload.js +++ b/preload.js @@ -5,14 +5,17 @@ const cheerio = require('cheerio'); contextBridge.exposeInMainWorld('electron', { loadPage: url => ipcRenderer.send('load-page', url), maximize: () => ipcRenderer.send('max-app', {}), - closeApp: () => ipcRenderer.send('close-app', {}) + closeApp: () => ipcRenderer.send('close-app', {}), + getAppVersion: () => { + return require('./package.json').version; + } }); contextBridge.exposeInMainWorld('webSupplier', { getTitle: url => { return new Promise((resolve, reject) => { superagent.get(url).then(html => { - resolve(cheerio.load(html.text)('title').text()); + resolve(cheerio.load(html.text)('head>title').text()); }).catch(reject); }); } diff --git a/public/index.html b/public/index.html index 8a075d4..ff478ab 100644 --- a/public/index.html +++ b/public/index.html @@ -10,7 +10,7 @@ + +

diff --git a/public/script.js b/public/script.js index df8504a..0ffccb6 100644 --- a/public/script.js +++ b/public/script.js @@ -12,7 +12,9 @@ const app = Vue.createApp({ url: '', opened: [{ title: null, url: 'about:blank' }], openedIndex: 0, + notice: [], tabsTippy: null, + updateCheckerTippy: null, focusedSearchBar: false } }, @@ -60,6 +62,11 @@ const app = Vue.createApp({ } return ``; }, + getTitle() { + let title = this.opened[this.openedIndex].title; + if(title.length > 12) title = title.substring(0, 12) + '...'; + return title; + }, isHTTPSPage() { return this.url.startsWith('https://'); }, @@ -76,6 +83,44 @@ const app = Vue.createApp({ this.opened[this.openedIndex] = { title: await window.webSupplier.getTitle(this.url), url: this.url }; }); + function updateCheckerTippy(text) { + if(this.updateCheckerTippy != null && this.updateCheckerTippy[0] != null) this.updateCheckerTippy[0].destroy(); + this.updateCheckerTippy = tippy('#update-check', { + content: '
' + text + '
' + }); + } + updateCheckerTippy('Checking for updates...'); + + const updaterIcon = this.$refs['updater-icon']; + + fetch('https://api.yomea.dev') + .then(res => res.json()) + .then(data => { + this.notice = data?.notice; + + updaterIcon.style.animation = 'none'; + if(data?.newestVersion == window.electron.getAppVersion()) { + updateCheckerTippy('Perfect! You\'re running the latest version!'); + updaterIcon.classList.value = 'fas fa-check'; + updaterIcon.style.color = '#4cd964'; + } + else { + updateCheckerTippy('Newer version is available!
Click to download it!'); + updaterIcon.classList.value = 'fas fa-box'; + updaterIcon.style.color = '#007aff'; + updaterIcon.style.cursor = 'pointer'; + updaterIcon.parentNode.addEventListener('click', () => { + this.url = 'https://github.com/YomoSK/yomea'; + window.electron.loadPage(this.url); + }); + } + }) + .catch(() => { + updateCheckerTippy('Could not verify the latest version!'); + updaterIcon.classList.value = 'fas fa-triangle-exclamation'; + }) + .finally(() => updaterIcon.style.animation = 'none'); + _emitter.on('change-tab', data => this.changeTab(data.index)); }, watch: { @@ -87,6 +132,7 @@ const app = Vue.createApp({ if(this.tabsTippy != null && this.tabsTippy[0] != null) this.tabsTippy[0].destroy(); this.tabsTippy = tippy('#tabs-wrapper', { content: this.getTabsTooltip(), + arrow: false, interactive: true }); }, diff --git a/public/styles.css b/public/styles.css index d8cd93b..73eea47 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,4 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Cantarell&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Palanquin+Dark:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); body { @@ -39,6 +40,8 @@ nav > #tabs-wrapper > p { font-family: 'Open Sans', sans-serif; font-size: .85rem; font-weight: 600; + max-width: 5.5rem; + text-wrap: nowrap; position: relative; } @@ -55,6 +58,26 @@ nav > #tabs-wrapper > p::before { z-index: -1; } +nav > #update-check { + margin-left: calc(40% + 1rem); + position: absolute; + transform: translateX(75%); +} + +nav > #update-check > i { + animation: spinning 1s ease infinite; +} + +@keyframes spinning { + from { + transform: rotateX(180deg) rotate(0); + } + + to { + transform: rotateX(180deg) rotate(1turn); + } +} + .tippy-content { padding: .3rem; } @@ -124,4 +147,14 @@ nav > #controls > div { aspect-ratio: 1; border-radius: 50%; cursor: pointer; +} + +p#notice { + margin-top: calc(2rem + 57px); + font-family: 'Palanquin Dark', sans-serif; + font-size: 1.2rem; + font-weight: 700; + letter-spacing: 2px; + text-align: center; + opacity: .4; } \ No newline at end of file