Revert "Ultra commit"

This reverts commit 2287c7041f.
2017-08-06 18:34:23 +02:00 · 2017-08-06 18:34:23 +02:00 · bf19420a2b
commit bf19420a2b
parent 2287c7041f
11 changed files with 117 additions and 96 deletions
--- a/icon128.psd
+++ b/icon128.psd
--- a/icon128_g.png
+++ b/icon128_g.png
--- a/icon16.png
+++ b/icon16.png
--- a/icon16_g.png
+++ b/icon16_g.png
--- a/icon19_g.png
+++ b/icon19_g.png
--- a/icon38_g.png
+++ b/icon38_g.png
--- a/jquery-3.2.1.min.js
+++ b/jquery-3.2.1.min.js
--- a/manifest.json
+++ b/manifest.json
@ -14,18 +14,18 @@
  "browser_action": {
    "browser_style": true,
    "default_icon": {
-      "16": "icon16.png",
      "19": "icon19.png",
      "38": "icon38.png"
    },
-    "default_title": "ClearURLs",
+    "default_title": "ClearURLs Add-on",
    "default_popup": "popup.html"
  },
  "permissions": [
    "*://*/*",
    "webRequest",
    "webRequestBlocking",
-    "management"
+    "management",
+    "storage"
  ],
  "background": {
    "scripts": [
--- a/popup.html
+++ b/popup.html
@ -2,10 +2,10 @@
 <html>
  <head>
    <title>ClearURLs Add-on</title>
-    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="popup_style.css">
-    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
-    <script type="text/javascript" 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,18 +13,18 @@
      <div id="content">
        <div id="default">
          <div id="global">
-            <span id="statusText">En</span>able globally:<br>
-            <button id="statusBtn" class="status statusEnabled"></button>
+            Enable globally:<br>
+            <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---<br></div></div>
-              <div class="element"><button class="switch switchEnabled"></button><div class="textElement">---placeholder---<br></div></div>
-              <div class="element"><button class="switch switchDisabled"></button><div class="textElement">---placeholder---<br></div></div>
-              <div class="element"><button class="switch switchEnabled"></button><div class="textElement">---placeholderrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr---<br></div></div>
-              <div class="element"><button class="switch switchEnabled"></button><div class="textElement">---placeholder---<br></div></div>
-              <div class="element"><button class="switch switchEnabled"></button><div class="textElement">---placeholder---<br></div></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>
@ -32,17 +32,12 @@
        <div id="custom">
          My rules (advanced):<br>
          <div id="rules">
-            <div class="element"><button class="switch switchEnabled"></button><div class="textElement">---placeholder---<br></div></div>
-            <div class="element"><button class="switch switchEnabled"></button><div class="textElement">---placeholder---<br></div></div>
-            <div class="element"><button class="switch switchEnabled"></button><div class="textElement">---placeholdeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeer---<br></div></div>
-            <div class="element"><button class="switch switchEnabled"></button><div class="textElement">---placeholder---<br></div></div>
-            <div class="element"><button class="switch switchEnabled"></button><div class="textElement">---placeholder---<br></div></div>
-            <div class="element"><button class="switch switchDisabled"></button><div class="textElement">---placeholder---<br></div></div>
+            ---placeholder---<br>
          </div>
          <div id="addRuleOuter">
            Add new rule:<br>
            <div id="addRuleInner">
-              <div id="addRuleField"><input id="inputField" type="text"></div><button id="addRuleBtn"><img src="plus.png"></button>
+              <div id="addRuleField"><input type="text"></div><button id="addRuleBtn"><img src="plus.png"></button>
            </div>
          </div>
        </div>
--- a/popup.js
+++ b/popup.js
@ -1,47 +1,67 @@
-var status = "enabled";
-var exception = "false";
+var exception = "off";
+var resultFormRestore;

-function changeStatus() {
-    var text = $("#statusText");
-    var button = $("#statusBtn");
-    if(status == "enabled") {
-		console.log("was enabled");
-        text.html("Dis");
-        button.removeClass("statusEnabled").addClass("statusDisabled");
-        status = "disabled";
-		console.log("is disabled");
-    }
-    else {
-		console.log("was disabled");
-        text.html("En");
-        button.removeClass("statusDisabled").addClass("statusEnabled");
-        status = "enabled";
-		console.log("is enabled");
-    }
+function saveOptions(key, result) {
+   console.log("Save with key"+key+" the result: "+result);
+    browser.storage.local.set({
+      key: result
+    });
 };
-/*
-function handleException() {
+
+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 status = restoreOptions("globalStatus");
+    console.log("status: "+status);
+    var element = $("#globalStatus");
+
+    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");
+    }
+  };
+
+  function handleException(){
    var element = $("#exception");
    var val = "Enable on page";
-    
-    if(exception == false) {
-        val = "Disable on page";
-        exception = "true";
-        element.removeClass().addClass("disable");
-    }
-    else {
-        exception = "false";
-        element.removeClass().addClass("enable");
+
+    if(exception == "off"){
+      val = "Disable on page";
+      exception = "on";
+      element.removeClass().addClass("disable");
+    }else{
+      exception = "off";
+      element.removeClass().addClass("enable");
    }
    element.html(val);
-};
-*/
-/*
-$(document).ready(function() {
-    $("#statusBtn").on("click", changeStatus);
-    //$("#exception").on("click", handleException);
-});
-*/
-document.addEventListener("DOMContentLoaded", function() {
-    $("#statusBtn").on("click", changeStatus);
+  };
+
+$(document).ready(function(){
+  $("#globalStatus").on("click", changeStatus);
+  $("#exception").on("click", handleException);
 });
--- a/popup_style.css
+++ b/popup_style.css
@ -3,9 +3,6 @@ body {
  background: #fff;
  min-width: 500px;
  max-width: 600px;
-  max-height: 400px;
-  overflow-y: auto;
-  overflow-x: hidden;
  font-family: "Arial";
 }

@ -19,12 +16,16 @@ img {


 #main {
+  max-width: 500px;
+  max-height: 400px;
+  overflow-y: auto;
+  overflow-x: hidden;
  white-space: nowrap;
 }

 #content {
  display: inline-block;
-  margin: 10px 10px 20px 10px;
+  padding: 10px 10px 20px 10px;
  width: calc(100% - 20px);
  font-size: 14pt;
 }
@ -50,7 +51,7 @@ img {
 }

 #global {
-  width: 165px;
+  width: 50%;
  float: left;
 }

@ -58,8 +59,9 @@ img {
  display: block;
  width: 145px;
  height: 145px;
-  margin: 15px auto;
-  padding: 0px;
+  margin-top: 10px;
+  margin-left: 10px;
+  padding: 0;
  background: none;
  border: none;
 }
@ -76,8 +78,7 @@ img {


 #individual {
-  width: calc(100% - 185px);
-  margin-left: 20px;
+  width: 50%;
  float: right;
 }

@ -101,60 +102,65 @@ img {
 }

 #addRuleField {
+  overflow: hidden;
  float: left;
  width: calc(100% - 55px);
-  height: 23px;
-  margin-top: 1px;
-  outline: 1px solid #000;
+  height: 25px;
+  border-radius: 3px;
+  height: 30px;
 }

-#inputField {
-  margin: 0px;
-  padding: 0px 5px 0px 5px;
-  width: calc(100% - 10px);
-  height: calc(100% - 2px);
+#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 {
  width: 45px;
-  height: 25px;
  padding: 3px 0px 3px 0px;
  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;
 }





-.element {
-  margin-top: 10px;
-}
 .switch {
+  margin-right: 10px;
  width: 50px;
  height: 26px;
-  padding: 0px;
  float: left;
  background: none;
  border: none;
-}
+}/*
 .switchEnabled {
  background-image: url("switchEnabled.png");
 }
 .switchDisabled {
  background-image: url("switchDisabled.png");
-}
+}*/

 .textElement {
-  width: calc(100% - 60px);
-  margin-left: 10px;
-  float: right;
-  overflow: hidden;
+  clear: right;
  text-overflow: ellipsis;
 }