1
Fork 0
mirror of https://github.com/Steffo99/chakra-magic.git synced 2024-10-16 06:27:27 +00:00

Improve illuminate button visibility

This commit is contained in:
Steffo 2019-10-04 01:57:14 +02:00
parent 13e735814b
commit c05e0db53b
3 changed files with 49 additions and 16 deletions

View file

@ -1,6 +1,9 @@
.chakramagic-button { .chakramagic-button {
vertical-align: middle; vertical-align: middle;
padding: 1px; padding: 1px;
width: 48px;
height: 48px;
color: white;
background: black; background: black;
cursor: pointer; cursor: pointer;
border: none; border: none;
@ -93,7 +96,20 @@
} }
.chakramagic-image { .chakramagic-image {
width: 28px;
height: 28px;
vertical-align: middle; vertical-align: middle;
width: 100%;
height: 100%;
} }
.chakramagic-text {
margin-left: 4px;
}
.chakramagic-service {
display: flex;
align-items: center;
}
.chakramagic-button[disabled] {
opacity: 0.5;
}

View file

@ -1,5 +1,6 @@
function illuminate() { function illuminate() {
let chakraElement = document.querySelector(".chakramagic-button"); let illuminateButton = document.querySelector(".chakramagic-illuminate .chakramagic-button");
let illuminateText = document.querySelector(".chakramagic-illuminate .chakramagic-text").childNodes[0];
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
@ -75,25 +76,41 @@ function illuminate() {
watch_load_more(); watch_load_more();
}; };
chakraElement.setAttribute("disabled", ""); illuminateButton.setAttribute("disabled", "");
chakraElement.setAttribute("onclick", ""); illuminateButton.onclick = null;
chakraElement.setAttribute("class", "chakramagic-button chakramagic-running") illuminateButton.setAttribute("class", "chakramagic-button chakramagic-running")
illuminateText.nodeValue = "Loading all data..."
load_all_data(); load_all_data();
} }
function chakraMagic() { function chakraMagic() {
let parentElement = document.querySelector(".profile_private_info_dropdowns"); let parentElement = document.querySelector("#mainContents");
let beforeElement = document.querySelector("#personaldata_elements_container")
let chakraElement = document.createElement("button"); let chakraElement = document.createElement("div");
parentElement.appendChild(chakraElement); parentElement.insertBefore(chakraElement, beforeElement);
chakraElement.onclick = illuminate; chakraElement.setAttribute("class", "chakramagic-container");
chakraElement.setAttribute("class", "chakramagic-button");
let imageElement = document.createElement("img"); let illuminateElement = document.createElement("div");
chakraElement.appendChild(imageElement); chakraElement.appendChild(illuminateElement);
imageElement.setAttribute("src", "http://cdn.dota2.com/apps/dota2/images/abilities/keeper_of_the_light_illuminate_hp2.png"); illuminateElement.setAttribute("class", "chakramagic-service chakramagic-illuminate");
imageElement.setAttribute("class", "chakramagic-image");
let illuminateButton = document.createElement("div");
illuminateElement.appendChild(illuminateButton);
illuminateButton.setAttribute("class", "chakramagic-button");
illuminateButton.onclick = illuminate;
let illuminateImage = document.createElement("img");
illuminateButton.appendChild(illuminateImage);
illuminateImage.setAttribute("src", "http://cdn.dota2.com/apps/dota2/images/abilities/keeper_of_the_light_illuminate_hp2.png");
illuminateImage.setAttribute("class", "chakramagic-image");
let illuminateText = document.createElement("span");
illuminateElement.appendChild(illuminateText);
illuminateText.appendChild(document.createTextNode("Parse data with Illuminate"));
illuminateText.setAttribute("class", "chakramagic-text chakramagic-illuminate");
} }
chakraMagic(); chakraMagic();

View file

@ -8,7 +8,7 @@
}, },
"name": "Chakra Magic", "name": "Chakra Magic",
"version": "2019.10.2.1", "version": "2019.10.4.1",
"developer": { "developer": {
"name": "Stefano Pigozzi", "name": "Stefano Pigozzi",
"url": "https://github.com/Steffo99/chakra-magic" "url": "https://github.com/Steffo99/chakra-magic"