This commit is contained in:
Kevin Röbert 2017-08-06 18:23:52 +02:00
parent c12214a912
commit 762e604cee
5 changed files with 140 additions and 20 deletions

View File

@ -24,7 +24,8 @@
"*://*/*",
"webRequest",
"webRequestBlocking",
"management"
"management",
"storage"
],
"background": {
"scripts": [

View File

@ -3,8 +3,9 @@
<head>
<title>ClearURLs Add-on</title>
<link rel="stylesheet" type="text/css" href="popup_style.css">
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="switchButtons.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<div id="main">
@ -13,12 +14,17 @@
<div id="default">
<div id="global">
Enable globally:<br>
<button class="status statusEnabled"></button>
<button id="globalStatus" class="status statusEnabled"></button>
</div>
<div id="individual">
Enable individually:<br>
<div id="presets">
<div class="element"><button class="switch switchEnabled"></button><div class="textElement">---placeholder---</div><br></div>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
<label>Google</label>
</label>
<!--<div class="element"><button class="switch switchEnabled"></button><div class="textElement">---placeholder---</div><br></div>-->
<!-- <button id="exception" class="enable" onclick="handleException()">Enable on page</button><br> -->
</div>
</div>

View File

@ -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);
});

View File

@ -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;

67
switchButtons.css Normal file
View File

@ -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;
}