wowtoken-app/wowtoken.app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added CSS 'loader' animation

Browse Source
This commit is contained in:
Emily Doherty 2022-12-11 15:53:13 -08:00
parent efc8a0d83f
commit 30f72f91ac
3 changed files with 93 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/index.html
View File

@ -15,7 +15,8 @@
<body> <body>
<div class="flex-container"> <div class="flex-container">
<div><h1>1 Token = <u id="token">0</u> Gold</h1></div> <div><h1>1 Token = <u id="token">0</u> Gold</h1></div>
<div> <div id="chart-frame">
<div class="lds-ripple" id="loader"><div></div><div></div></div>
<canvas id="token-chart"></canvas> <canvas id="token-chart"></canvas>
<div id="option_select"> <div id="option_select">
<label for="region">Region:</label> <label for="region">Region:</label>

41
src/index.js
View File

@ -98,17 +98,41 @@ function add_data_to_chart(region, data) {
} }
} }
function addLoader() {
let loader = document.getElementById('loader');
if (!loader) {
const blank_div = document.createElement('div');
let loaderNode = blank_div.cloneNode();
loaderNode.id = 'loader';
loaderNode.className = 'lds-ripple';
loaderNode.appendChild(blank_div.cloneNode());
loaderNode.appendChild(blank_div.cloneNode());
let chartNode = document.getElementById('token-chart');
chartNode.before(loaderNode);
}
}
function removeLoader () {
let loader = document.getElementById('loader');
if (loader) {
loader.remove();
}
}
export function updateRegionPreference(newRegion) { export function updateRegionPreference(newRegion) {
if (newRegion !== current_region_selection) { if (newRegion !== current_region_selection) {
token_chart.destroy(); token_chart.destroy();
addLoader();
current_region_selection = newRegion; current_region_selection = newRegion;
} }
formatToken(); formatToken();
pullChartData().then(populateChart); pullChartData().then(populateChart);
} }
export function updateTimePreference(newTime) { export function updateTimePreference(newTime) {
if (newTime !== current_time_selection) { if (newTime !== current_time_selection) {
token_chart.destroy(); token_chart.destroy();
addLoader();
current_time_selection = newTime; current_time_selection = newTime;
} }
pullChartData().then(populateChart); pullChartData().then(populateChart);
@ -126,6 +150,7 @@ async function pullChartData() {
new_chart_js_data.push(datum); new_chart_js_data.push(datum);
} }
chart_js_data = new_chart_js_data; chart_js_data = new_chart_js_data;
removeLoader();
} }
async function updateChartData() { async function updateChartData() {
@ -143,6 +168,12 @@ function detectURLQuery() {
if (urlSearchParams.has('region')) { if (urlSearchParams.has('region')) {
if (allowedRegions.includes(urlSearchParams.get('region').toLowerCase())) { if (allowedRegions.includes(urlSearchParams.get('region').toLowerCase())) {
current_region_selection = urlSearchParams.get('region').toLowerCase() current_region_selection = urlSearchParams.get('region').toLowerCase()
let region_ddl = document.getElementById('region')
for (let i = 0; i < region_ddl.options.length; i++){
if (region_ddl.options[i].value === current_region_selection) {
region_ddl.options[i].selected = true;
}
}
} else { } else {
console.log("An incorrect or malformed region selection was made in the query string") console.log("An incorrect or malformed region selection was made in the query string")
} }
@ -150,10 +181,16 @@ function detectURLQuery() {
// In the future, we will allow all the times to be selected, // In the future, we will allow all the times to be selected,
// once I come up with a good reduction algorithm. // once I come up with a good reduction algorithm.
// For larger time selections, it's currently hardcoded into the backend // For larger time selections, it's currently hardcoded into the backend
const allowedTimes = ['72h', '168h', '336h', '720h', '30d', '90d', '1y', '2y', '6m', 'all']; const validTimes = ['72h', '168h', '336h', '720h', '30d', '90d', '1y', '2y', '6m', 'all'];
if (urlSearchParams.has('time')) { if (urlSearchParams.has('time')) {
if (allowedTimes.includes(urlSearchParams.get('time').toLowerCase())) { if (validTimes.includes(urlSearchParams.get('time').toLowerCase())) {
current_time_selection = urlSearchParams.get('time').toLowerCase(); current_time_selection = urlSearchParams.get('time').toLowerCase();
let time_ddl = document.getElementById('time')
for (let i = 0; i < time_ddl.options.length; i++){
if (time_ddl.options[i].value === current_time_selection) {
time_ddl.options[i].selected = true;
}
}
} else { } else {
console.log("An incorrect or malformed time selection was made in the query string"); console.log("An incorrect or malformed time selection was made in the query string");
} }

52
src/style.css
View File

@ -347,3 +347,55 @@ p {
color: white; color: white;
} }
#chart-frame {
display: flex;
flex-direction: column;
}
.lds-ripple {
position: relative;
align-self: center;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #fff;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}