PUSH
This commit is contained in:
Kevin Röbert
parent
c12214a912
commit
762e604cee
|
|
@ -24,7 +24,8 @@
|
|||
"*://*/*",
|
||||
"webRequest",
|
||||
"webRequestBlocking",
|
||||
"management"
|
||||
"management",
|
||||
"storage"
|
||||
],
|
||||
"background": {
|
||||
"scripts": [
|
||||
|
|
|
|||
12
popup.html
12
popup.html
|
|
@ -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>
|
||||
|
|
|
|||
54
popup.js
54
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");
|
||||
}else{
|
||||
status = "on";
|
||||
element.removeClass().addClass("enable");
|
||||
if(status == null){
|
||||
saveOptions("globalStatus", true);
|
||||
status = true;
|
||||
}
|
||||
|
||||
if(status){
|
||||
status = saveOptions("globalStatus", false);
|
||||
element.removeClass().addClass("status statusDisabled");
|
||||
}else{
|
||||
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);
|
||||
});
|
||||
|
|
@ -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,9 +133,11 @@ img {
|
|||
float: right;
|
||||
background-color: #b5e61d;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 3px;
|
||||
height: 30px;
|
||||
}
|
||||
#addRuleBtn:hover {
|
||||
|
||||
#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
67
switchButtons.css
Normal 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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user