snegov/notif-visa-ext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Smooth transitions for text on popup

Browse Source
This commit is contained in:
Maks Snegov 2024-04-25 23:52:53 -07:00
parent 616367a796
commit c4307472ca
3 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
popup/popup.css
View File

@ -18,6 +18,14 @@
opacity: 1;
}
.smooth-text {
transition: opacity 0.5s;
opacity: 1;
}
.smooth-text.hide {
opacity: 0;
}
body {
min-width: 375px;

2
popup/popup.html
View File

@ -88,7 +88,7 @@
</div>
<div class="row">
<div class="col">
Status: <span id="status">Inactive</span>
Status: <span class="smooth-text" id="status">Inactive</span>
</div>
</div>
<div class="row">

31
popup/popup.js
View File

@ -1,3 +1,13 @@
function smoothTextChange(element, newText) {
// Temporarily hide the element
element.classList.add('hide');
setTimeout(() => {
element.innerText = newText;
element.classList.remove('hide');
}, 500); // Wait for the transition to finish
}
(async function() {
const $version = await new Promise(r => chrome.management.getSelf(self => r(self.version)));
@ -25,7 +35,8 @@
// update status
chrome.storage.onChanged.addListener((changes, area) => {
if (changes.__status)
document.getElementById("status").innerText = changes.__status.newValue;
// document.getElementById("status").innerText = changes.__status.newValue;
smoothTextChange(document.getElementById("status"), changes.__status.newValue);
});
// activate checkbox
@ -113,8 +124,8 @@
</div>
</td>
<td style="white-space: nowrap;">${c}</td>
<td style="white-space: nowrap;"><span id="currentDate-${cId}">${consulates[c].currentDate || "-"}</span></td>
<td style="white-space: nowrap;"><span id="bestDate-${cId}">${consulates[c].bestDate || "-"}</span></td>
<td style="white-space: nowrap;"><span class="smooth-text" id="currentDate-${cId}">${consulates[c].currentDate || "-"}</span></td>
<td style="white-space: nowrap;"><span class="smooth-text" id="bestDate-${cId}">${consulates[c].bestDate || "-"}</span></td>
<td>
<div class="form-check form-switch" style="text-align: left;">
<input class="form-check-input" type="checkbox" role="switch" id="autobook-${cId}" ${cAutobook}>
@ -139,10 +150,16 @@
});
// update current & best dates
chrome.storage.onChanged.addListener((changes, area) => {
if (changes.__consulates && changes.__consulates.newValue[c].currentDate)
document.getElementById(`currentDate-${cId}`).innerText = changes.__consulates.newValue[c].currentDate;
if (changes.__consulates && changes.__consulates.newValue[c].bestDate)
document.getElementById(`bestDate-${cId}`).innerText = changes.__consulates.newValue[c].bestDate;
if (changes.__consulates && changes.__consulates.newValue[c].currentDate) {
let el = document.getElementById(`currentDate-${cId}`);
if (el.innerText != changes.__consulates.newValue[c].currentDate)
smoothTextChange(document.getElementById(`currentDate-${cId}`), changes.__consulates.newValue[c].currentDate);
}
if (changes.__consulates && changes.__consulates.newValue[c].bestDate) {
let el = document.getElementById(`bestDate-${cId}`);
if (el.innerText != changes.__consulates.newValue[c].bestDate)
smoothTextChange(document.getElementById(`bestDate-${cId}`), changes.__consulates.newValue[c].bestDate);
}
});
}