diff --git a/extension/gdpr_page.css b/extension/gdpr_page.css index a63268d..02fd16c 100644 --- a/extension/gdpr_page.css +++ b/extension/gdpr_page.css @@ -1,6 +1,9 @@ .chakramagic-button { vertical-align: middle; padding: 1px; + width: 48px; + height: 48px; + color: white; background: black; cursor: pointer; border: none; @@ -93,7 +96,20 @@ } .chakramagic-image { - width: 28px; - height: 28px; 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; +} \ No newline at end of file diff --git a/extension/gdpr_page.js b/extension/gdpr_page.js index 983272e..deba41e 100644 --- a/extension/gdpr_page.js +++ b/extension/gdpr_page.js @@ -1,5 +1,6 @@ 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 = () => { // Get player name, use this to match it to player name from API response @@ -75,25 +76,41 @@ function illuminate() { watch_load_more(); }; - chakraElement.setAttribute("disabled", ""); - chakraElement.setAttribute("onclick", ""); - chakraElement.setAttribute("class", "chakramagic-button chakramagic-running") + illuminateButton.setAttribute("disabled", ""); + illuminateButton.onclick = null; + illuminateButton.setAttribute("class", "chakramagic-button chakramagic-running") + + illuminateText.nodeValue = "Loading all data..." load_all_data(); } 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"); - parentElement.appendChild(chakraElement); - chakraElement.onclick = illuminate; - chakraElement.setAttribute("class", "chakramagic-button"); + let chakraElement = document.createElement("div"); + parentElement.insertBefore(chakraElement, beforeElement); + chakraElement.setAttribute("class", "chakramagic-container"); - let imageElement = document.createElement("img"); - chakraElement.appendChild(imageElement); - imageElement.setAttribute("src", "http://cdn.dota2.com/apps/dota2/images/abilities/keeper_of_the_light_illuminate_hp2.png"); - imageElement.setAttribute("class", "chakramagic-image"); + let illuminateElement = document.createElement("div"); + chakraElement.appendChild(illuminateElement); + illuminateElement.setAttribute("class", "chakramagic-service chakramagic-illuminate"); + + 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(); diff --git a/extension/manifest.json b/extension/manifest.json index 0aa3a98..d916bb0 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -8,7 +8,7 @@ }, "name": "Chakra Magic", - "version": "2019.10.2.1", + "version": "2019.10.4.1", "developer": { "name": "Stefano Pigozzi", "url": "https://github.com/Steffo99/chakra-magic"