michael/clear-urls-browser-extension
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

PUSH

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
manifest.json
View File

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

12
popup.html
View File

@ -3,8 +3,9 @@
<head> <head>
<title>ClearURLs Add-on</title> <title>ClearURLs Add-on</title>
<link rel="stylesheet" type="text/css" href="popup_style.css"> <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="jquery-3.2.1.min.js"></script>
<script src="popup.js"></script>
</head> </head>
<body> <body>
<div id="main"> <div id="main">
@ -13,12 +14,17 @@
<div id="default"> <div id="default">
<div id="global"> <div id="global">
Enable globally:<br> Enable globally:<br>
<button class="status statusEnabled"></button> <button id="globalStatus" class="status statusEnabled"></button>
</div> </div>
<div id="individual"> <div id="individual">
Enable individually:<br> Enable individually:<br>
<div id="presets"> <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> --> <!-- <button id="exception" class="enable" onclick="handleException()">Enable on page</button><br> -->
</div> </div>
</div> </div>

52
popup.js
View File

@ -1,19 +1,49 @@
var status = "on";
var exception = "off"; 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(){ function changeStatus(){
var element = $("#statusBtn"); var status = restoreOptions("globalStatus");
var val = "Global Enable"; console.log("status: "+status);
var element = $("#globalStatus");
if(status == "on"){ if(status == null){
val = " Global Disable"; saveOptions("globalStatus", true);
status = "off"; status = true;
element.removeClass().addClass("disable"); }
if(status){
status = saveOptions("globalStatus", false);
element.removeClass().addClass("status statusDisabled");
}else{ }else{
status = "on"; status = saveOptions("globalStatus", true);
element.removeClass().addClass("enable"); element.removeClass().addClass("status statusEnabled");
} }
element.html(val);
}; };
function handleException(){ function handleException(){
@ -32,6 +62,6 @@ var exception = "off";
}; };
$(document).ready(function(){ $(document).ready(function(){
$("#status").on("click", changeStatus); $("#globalStatus").on("click", changeStatus);
$("#exception").on("click", handleException); $("#exception").on("click", handleException);
}); });

26
popup_style.css
View File

@ -106,11 +106,25 @@ img {
float: left; float: left;
width: calc(100% - 55px); width: calc(100% - 55px);
height: 25px; height: 25px;
border-radius: 3px;
height: 30px;
} }
#addRuleField input { #addRuleField input {
width: 100%; width: 100%;
height: 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 { #addRuleBtn {
@ -119,10 +133,12 @@ img {
float: right; float: right;
background-color: #b5e61d; background-color: #b5e61d;
border: none; 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; float: left;
background: none; background: none;
border: none; border: none;
} }/*
.switchEnabled { .switchEnabled {
background-image: url("switchEnabled.png"); background-image: url("switchEnabled.png");
} }
.switchDisabled { .switchDisabled {
background-image: url("switchDisabled.png"); background-image: url("switchDisabled.png");
} }*/
.textElement { .textElement {
clear: right; 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;
}