Enable globally:
- +
- +
Enable individually:
diff --git a/popup.js b/popup.js
index 6e78573..6390515 100644
--- a/popup.js
+++ b/popup.js
@@ -1,19 +1,49 @@
-var status = "on";
var exception = "off";
+var resultFormRestore;
+
+function saveOptions(key, result) {
+ console.log("Save with key"+key+" the result: "+result);
+ browser.storage.local.set({
+ key: result
+ });
+};
+
+function restoreOptions(key)
+{
+ resultFormRestore = null;
+ function setCurrentChoise(_result)
+ {
+ console.log("Reload config with key: "+key+" and result: ");
+ resultFormRestore = _result;
+ console.log(resultFormRestore);
+ };
+
+ function onError(error) {
+ console.log(`Error: ${error}`);
+ };
+
+ var getting = browser.storage.local.get(key);
+ getting.then(setCurrentChoise, onError);
+ return resultFormRestore;
+}
function changeStatus(){
- var element = $("#statusBtn");
- var val = "Global Enable";
+ var status = restoreOptions("globalStatus");
+ console.log("status: "+status);
+ var element = $("#globalStatus");
- if(status == "on"){
- val = " Global Disable";
- status = "off";
- element.removeClass().addClass("disable");
+ if(status == null){
+ saveOptions("globalStatus", true);
+ status = true;
+ }
+
+ if(status){
+ status = saveOptions("globalStatus", false);
+ element.removeClass().addClass("status statusDisabled");
}else{
- status = "on";
- element.removeClass().addClass("enable");
+ status = saveOptions("globalStatus", true);
+ element.removeClass().addClass("status statusEnabled");
}
- element.html(val);
};
function handleException(){
@@ -32,6 +62,6 @@ var exception = "off";
};
$(document).ready(function(){
- $("#status").on("click", changeStatus);
+ $("#globalStatus").on("click", changeStatus);
$("#exception").on("click", handleException);
});
\ No newline at end of file
diff --git a/popup_style.css b/popup_style.css
index 6c100c7..c0934ab 100644
--- a/popup_style.css
+++ b/popup_style.css
@@ -106,11 +106,25 @@ img {
float: left;
width: calc(100% - 55px);
height: 25px;
+ border-radius: 3px;
+ height: 30px;
}
#addRuleField input {
width: 100%;
height: 100%;
+ border: none;
+ background-color: #d7d6db;
+ -webkit-transition: .4s;
+ transition: .4s;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+
+#addRuleField input:focus {
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
}
#addRuleBtn {
@@ -119,10 +133,12 @@ img {
float: right;
background-color: #b5e61d;
border: none;
- border-radius: 5px;
+ border-radius: 3px;
+ height: 30px;
}
-#addRuleBtn:hover {
- background-color: #96d160;
+
+#addRuleBtn:active {
+ background-color: #96d160;
}
@@ -136,13 +152,13 @@ img {
float: left;
background: none;
border: none;
-}
+}/*
.switchEnabled {
background-image: url("switchEnabled.png");
}
.switchDisabled {
background-image: url("switchDisabled.png");
-}
+}*/
.textElement {
clear: right;
diff --git a/switchButtons.css b/switchButtons.css
new file mode 100644
index 0000000..2c21c96
--- /dev/null
+++ b/switchButtons.css
@@ -0,0 +1,67 @@
+/*
+ * Stylesheet for the switch buttons.
+ */
+
+/* Box around the slider */
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 50px;
+ height: 24px;
+}
+
+.switch input {
+ display: none;
+}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #FF7800;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 16px;
+ width: 16px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+input:checked + .slider {
+ background-color: #B5E61D;
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #B5E61D;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
+
+.switch label {
+ position: absolute;
+ left: 60px;
+}
\ No newline at end of file
-
+
+
---placeholder---