steffo/chakra-magic
steffo/chakra-magic
1
Fork 0
mirror of https://github.com/Steffo99/chakra-magic.git synced 2024-12-23 07:04:18 +00:00
Code Activity

Add loading animation

Browse source
This commit is contained in:
Steffo 2019-10-02 18:47:00 +02:00
parent f7471b24ea
commit fcec848725
2 changed files with 89 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
extension/gdpr_page.css
View file

@ -1,17 +1,95 @@
.chakramagic-button { .chakramagic-button {
vertical-align: middle; vertical-align: middle;
padding: 0; padding: 1px;
border: 1px solid black; background: black;
background-color: black;
cursor: pointer; cursor: pointer;
border: none;
} }
.chakramagic-button:not([disabled]):hover { .chakramagic-button:not(.chakramagic-running):hover {
border: 1px solid gray; background: grey;
} }
.chakramagic-button:not([disabled]):active { .chakramagic-button:not(.chakramagic-running):active {
border: 1px solid white; background: white;
}
@keyframes running {
0% {
background: linear-gradient(0deg, orangered, yellow);
}
6.25% {
background: linear-gradient(22.5deg, orangered, yellow);
}
12.5% {
background: linear-gradient(45deg, orangered, yellow);
}
18.75% {
background: linear-gradient(67.5deg, orangered, yellow);
}
25% {
background: linear-gradient(90deg, orangered, yellow);
}
31.25% {
background: linear-gradient(112.5deg, orangered, yellow);
}
37.5% {
background: linear-gradient(135deg, orangered, yellow);
}
43.75% {
background: linear-gradient(157.5deg, orangered, yellow);
}
50% {
background: linear-gradient(180deg, orangered, yellow);
}
56.25% {
background: linear-gradient(202.5deg, orangered, yellow);
}
62.5% {
background: linear-gradient(225deg, orangered, yellow);
}
68.75% {
background: linear-gradient(247.5deg, orangered, yellow);
}
75% {
background: linear-gradient(270deg, orangered, yellow);
}
81.25% {
background: linear-gradient(292.5deg, orangered, yellow);
}
87.5% {
background: linear-gradient(315deg, orangered, yellow);
}
93.75% {
background: linear-gradient(337.5deg, orangered, yellow);
}
100% {
background: linear-gradient(-0deg, orangered, yellow);
}
}
.chakramagic-button.chakramagic-running {
animation-name: running;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
cursor: wait;
} }
.chakramagic-image { .chakramagic-image {

15
extension/gdpr_page.js
View file

@ -1,4 +1,6 @@
function illuminate() { function illuminate() {
let chakraElement = document.querySelector(".chakramagic-button");
const read_data = () => { const read_data = () => {
// Get player name, use this to match it to player name from API response // Get player name, use this to match it to player name from API response
const player_name = document.getElementsByClassName("profile_small_header_name")[0].children[0].textContent; const player_name = document.getElementsByClassName("profile_small_header_name")[0].children[0].textContent;
@ -68,23 +70,14 @@ function illuminate() {
} }
}, 100); }, 100);
}; };
// Just visual indicator that the script is working
const b3 = document.getElementById("personaldata_elements_container");
if (!b3) return alert("Data table not found, make sure you are on steam GDPR page");
const h1 = document.createElement("h1");
const h1text = document.createTextNode("Loading more data ");
const h1spinner = document.createElement("img");
h1spinner.src = "https://steamcommunity-a.akamaihd.net/public/images/login/throbber.gif";
h1.appendChild(h1text);
h1.appendChild(h1spinner);
b3.insertBefore(h1, b3.childNodes[0]);
// Start checking loop // Start checking loop
watch_load_more(); watch_load_more();
}; };
let chakraElement = document.querySelector(".chakramagic-button");
chakraElement.setAttribute("disabled", ""); chakraElement.setAttribute("disabled", "");
chakraElement.setAttribute("onclick", ""); chakraElement.setAttribute("onclick", "");
chakraElement.setAttribute("class", "chakramagic-button chakramagic-running")
load_all_data(); load_all_data();
} }