mirror of
https://github.com/Steffo99/chakra-magic.git
synced 2025-01-02 19:44:21 +00:00
Improve illuminate button visibility
This commit is contained in:
parent
13e735814b
commit
c05e0db53b
3 changed files with 49 additions and 16 deletions
|
@ -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;
|
||||||
|
}
|
|
@ -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();
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue