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; opacity: 1;
} }
.smooth-text {
transition: opacity 0.5s;
opacity: 1;
}
.smooth-text.hide {
opacity: 0;
}
body { body {
min-width: 375px; min-width: 375px;

2
popup/popup.html
View File

@ -88,7 +88,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
Status: <span id="status">Inactive</span> Status: <span class="smooth-text" id="status">Inactive</span>
</div> </div>
</div> </div>
<div class="row"> <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() { (async function() {
const $version = await new Promise(r => chrome.management.getSelf(self => r(self.version))); const $version = await new Promise(r => chrome.management.getSelf(self => r(self.version)));
@ -25,7 +35,8 @@
// update status // update status
chrome.storage.onChanged.addListener((changes, area) => { chrome.storage.onChanged.addListener((changes, area) => {
if (changes.__status) 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 // activate checkbox
@ -113,8 +124,8 @@
</div> </div>
</td> </td>
<td style="white-space: nowrap;">${c}</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 class="smooth-text" 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="bestDate-${cId}">${consulates[c].bestDate || "-"}</span></td>
<td> <td>
<div class="form-check form-switch" style="text-align: left;"> <div class="form-check form-switch" style="text-align: left;">
<input class="form-check-input" type="checkbox" role="switch" id="autobook-${cId}" ${cAutobook}> <input class="form-check-input" type="checkbox" role="switch" id="autobook-${cId}" ${cAutobook}>
@ -139,10 +150,16 @@
}); });
// update current & best dates // update current & best dates
chrome.storage.onChanged.addListener((changes, area) => { chrome.storage.onChanged.addListener((changes, area) => {
if (changes.__consulates && changes.__consulates.newValue[c].currentDate) if (changes.__consulates && changes.__consulates.newValue[c].currentDate) {
document.getElementById(`currentDate-${cId}`).innerText = changes.__consulates.newValue[c].currentDate; let el = document.getElementById(`currentDate-${cId}`);
if (changes.__consulates && changes.__consulates.newValue[c].bestDate) if (el.innerText != changes.__consulates.newValue[c].currentDate)
document.getElementById(`bestDate-${cId}`).innerText = changes.__consulates.newValue[c].bestDate; 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);
}
}); });
} }