Ultra commit

jeeeeez
2017-08-06 18:34:02 +02:00 · 2017-08-06 18:34:02 +02:00 · 2287c7041f
commit 2287c7041f
parent 762e604cee
11 changed files with 96 additions and 117 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 Add-on",
+    "default_title": "ClearURLs",
    "default_popup": "popup.html"
  },
  "permissions": [
    "*://*/*",
    "webRequest",
    "webRequestBlocking",
-    "management",
-    "storage"
+    "management"
  ],
  "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">
-    <link rel="stylesheet" type="text/css" href="switchButtons.css">
-    <script src="jquery-3.2.1.min.js"></script>
-    <script src="popup.js"></script>
+    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
+    <script type="text/javascript" src="popup.js"></script>
  </head>
  <body>
    <div id="main">
@ -13,18 +13,18 @@
      <div id="content">
        <div id="default">
          <div id="global">
-            Enable globally:<br>
-            <button id="globalStatus" class="status statusEnabled"></button>
+            <span id="statusText">En</span>able globally:<br>
+            <button id="statusBtn" class="status statusEnabled"></button>
          </div>
          <div id="individual">
            Enable individually:<br>
            <div id="presets">
-              <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>-->
+              <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>
    <!--      <button id="exception" class="enable" onclick="handleException()">Enable on page</button><br> -->
            </div>
          </div>
@ -32,12 +32,17 @@
        <div id="custom">
          My rules (advanced):<br>
          <div id="rules">
-            ---placeholder---<br>
+            <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>
          </div>
          <div id="addRuleOuter">
            Add new rule:<br>
            <div id="addRuleInner">
-              <div id="addRuleField"><input type="text"></div><button id="addRuleBtn"><img src="plus.png"></button>
+              <div id="addRuleField"><input id="inputField" type="text"></div><button id="addRuleBtn"><img src="plus.png"></button>
            </div>
          </div>
        </div>
--- a/popup.js
+++ b/popup.js
@ -1,67 +1,47 @@
-var exception = "off";
-var resultFormRestore;
+var status = "enabled";
+var exception = "false";

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

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


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

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

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

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


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

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

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

-#addRuleField input {
-  width: 100%;
-  height: 100%;
+#inputField {
+  margin: 0px;
+  padding: 0px 5px 0px 5px;
+  width: calc(100% - 10px);
+  height: calc(100% - 2px);
  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: 3px;
-  height: 30px;
+  border-radius: 5px;
 }
-
-#addRuleBtn:active {
-  background-color:  #96d160;
+#addRuleBtn:hover {
+  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 {
-  clear: right;
+  width: calc(100% - 60px);
+  margin-left: 10px;
+  float: right;
+  overflow: hidden;
  text-overflow: ellipsis;
 }