Refactoring and add build-tools

2026-03-26 21:05:16 +00:00 · 2020-04-18 17:27:15 +03:00
parent 708cb72028
commit b0b79e46a6
26 changed files with 7896 additions and 172 deletions
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -0,0 +1,94 @@
+body {
+    min-width: 80px;
+}
+/* The switch - the box around the slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* The slider */
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+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%;
+}
+
+.header {
+    background-color: #2196F3;
+    color: white;
+    width: 100vw;
+    position: relative;
+    margin-left: -50vw;
+    left: 50%;
+    margin-top: -20vw;
+    margin-bottom: 10vw;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+#idToHide {
+    margin: 10px;
+}
+
+.id_list {
+    background-color: #dcdfde;
+    color: black;
+    width: 100vw;
+    position: relative;
+    margin-left: -50vw;
+    left: 50%;
+    margin-top: 10vw;
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <div class="header">
+      <h3 align="center" id="status"></h3>
+    </div>
+    <!--<button id="disableButton">Toggle</button>-->
+    <div style="text-align: center;">
+      <label class="switch">
+        <input type="checkbox" id="disableCheckbox">
+        <span class="slider round"></span>
+      </label>
+    </div>
+    <div class="id_list">
+      <div id="idToHide"></div>
+    </div>
+  </body>
+</html>
--- a/src/popup/popup.js
+++ b/src/popup/popup.js
@@ -0,0 +1,47 @@
+import './popup.css'
+
+//let disableButton = document.getElementById('disableButton');
+let disableCheckbox = document.getElementById('disableCheckbox');
+let idToHideDisplay = document.getElementById('idToHide');
+let status = document.getElementById('status');
+var isExtensionOn;
+var idToHide;
+
+var enableText = "Кринж офф";
+var disableText = "Кринж он";
+
+chrome.storage.sync.get('isExtensionOn', function(data) {
+    isExtensionOn = data.isExtensionOn;
+
+    disableCheckbox.checked = isExtensionOn;
+    if (isExtensionOn) {
+        status.innerHTML = enableText;
+    } else {
+        status.innerHTML = disableText;
+    }
+});
+
+chrome.storage.sync.get('idToHide', function(data) {
+    idToHide = data.idToHide;
+    idToHideDisplay.innerText = idToHide;
+});
+
+disableCheckbox.addEventListener('change', (event) => {
+    isExtensionOn = event.target.checked;
+    if (event.target.checked) {
+        status.innerHTML = enableText;
+    } else {
+        status.innerHTML = disableText;
+    }
+
+    chrome.storage.sync.set({isExtensionOn}, function() {
+        console.log('isExtensionOn: '+isExtensionOn);
+    });
+});
+
+idToHideDisplay.addEventListener('click', function() {
+    chrome.storage.sync.set({idToHide: ''}, function() {
+        idToHideDisplay.innerText = '';
+        console.log('Cleared idToHide');
+    });
+});