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