diff --git a/beastify/popup/choose_beast.css b/beastify/popup/choose_beast.css index e7276e6..1b5aef6 100644 --- a/beastify/popup/choose_beast.css +++ b/beastify/popup/choose_beast.css @@ -25,3 +25,8 @@ html, body { .clear:hover { background-color: #C0392B; } + +.inactive { + opacity: 0; + pointer-events: none; +} diff --git a/beastify/popup/choose_beast.html b/beastify/popup/choose_beast.html index edeaea1..dfd3043 100644 --- a/beastify/popup/choose_beast.html +++ b/beastify/popup/choose_beast.html @@ -10,8 +10,8 @@
Frog
Turtle
Snake
-
Blank
-
Reload
+
Reload
+
Blank
diff --git a/beastify/popup/choose_beast.js b/beastify/popup/choose_beast.js index b41d716..c4787e4 100644 --- a/beastify/popup/choose_beast.js +++ b/beastify/popup/choose_beast.js @@ -1,6 +1,30 @@ /* Given the name of a beast, get the URL to the corresponding image. */ + +/* +updateButtons(): +* looks in the self.beast variable to see if the page is beastified or not, +* updates the buttons with the inactive property if the page is not beastified +* does tho opposite in the case it is beastified +*/ +function updateButtons() { + if (self.beast) { + var list = document.getElementsByClassName("clear"); + for (var i = 0; i < list.length; i++) { + list[i].className = "button clear"; + } + } + else { + var list = document.getElementsByClassName("clear"); + for (var i = 0; i < list.length; i++) { + list[i].className = "button clear inactive"; + } + } +} + +updateButtons(); + function beastNameToURL(beastName) { switch (beastName) { case "Frog": @@ -12,7 +36,6 @@ function beastNameToURL(beastName) { } } - /* Listen for clicks in the popup. @@ -44,6 +67,10 @@ document.addEventListener("click", function(e) { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL}); }); + + self.beast = true; + + updateButtons(); } else if (e.target.classList.contains("clear")) { var chosenMethod = e.target.textContent; @@ -55,6 +82,10 @@ document.addEventListener("click", function(e) { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {type: chosenMethod}); }); + + self.beast = false; + + updateButtons(); } return;