+
+
HISTORY
++
diff --git a/.eslintrc b/.eslintrc index b1f0e35..ee19b25 100644 --- a/.eslintrc +++ b/.eslintrc @@ -11,6 +11,11 @@ "no-var": "off", "indent": ["error", 4], "quotes": ["error", "double"], - "linebreak-style": "off" + "linebreak-style": "off", + "max-len": ["error", { "code": 80 }], + "no-restricted-globals": "warn", + "no-unused-vars": "warn", + "no-shadow":"warn", + "vars-on-top":"warn" } } diff --git a/Gruntfile.js b/Gruntfile.js index a181651..cbdeb47 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -5,7 +5,7 @@ module.exports = function (grunt) { options: { fix: false }, - target: ["*.js"] + target: ["**/*.js", "!node_module/**/*.js"] } }); diff --git a/options/css/options.css b/options/css/options.css index 382a014..3f479f2 100644 --- a/options/css/options.css +++ b/options/css/options.css @@ -1,4 +1,149 @@ + .main { - width: 200px; - height: 200px; -} \ No newline at end of file + width: 360px; + height: 500px; +} +#backButton +{ + background-color: white +} +#backButton:hover +{ + padding: 0px; + background-color: white; + opacity: 1; +} + +#searchHistory +{ + text-align: center; + background: white; + border: none; + width: 340px; + margin-left: 10px; + padding-bottom: 10px; + padding-top: 2px; +} +#historyHead +{ + font-family: 'Titillium Web', sans-serif; + color: grey; + text-align: left; +} +#themeHead +{ + font-family: 'Titillium Web', sans-serif; + color: grey; + text-align: left; + margin-left: 10px; + +} +#historyList +{ + text-align: left; + list-style: none; + font-family: "sans-serif", Arial, Helvetica; +} + +#clearButton +{ + border-radius: 7px; + font-style: "sans-serif", Arial, Helvetica; + font-weight: 600; + color: grey; + background-color: white; + border: none; + padding-top: 3px; +} +#clearButton:hover +{ + box-shadow: 0px 0px 7px 0px grey; +} +#clearHist +{ + text-align: right; +} + +ul li +{ + margin: 5px; + border-bottom: 1px solid grey; + padding-left: 10px; + padding-top: 2px; + padding-bottom: 2px; + width: 245px; + color: #5e605b; +} +a +{ + color: grey; + text-decoration: none; + +} +a:hover +{ + color: white; + background-color: grey; + padding: 8px; + opacity: .8; +} + +.switch { + margin-left: 10px; + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: grey; + -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: #102c7c; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} \ No newline at end of file diff --git a/options/images2/backbutton.jpg b/options/images2/backbutton.jpg new file mode 100644 index 0000000..46ed9d4 Binary files /dev/null and b/options/images2/backbutton.jpg differ diff --git a/options/js/options.js b/options/js/options.js index 27a46e9..7194e4a 100644 --- a/options/js/options.js +++ b/options/js/options.js @@ -1,29 +1,51 @@ +var recentSearchQueries = []; +var recentSearchQueryUrls = []; +var historyListElement; +var clearHistory; +var count; +var themeToggle = document.getElementById("theme"); -var radios = document.getElementsByName('theme'); +if (!localStorage.getItem("theme")) localStorage.setItem("theme", "light"); -if(!localStorage.getItem('theme')) - localStorage.setItem('theme', 'light'); - -if(localStorage.getItem('theme') == 'light') -{ - console.log("light"); - radios[0].checked = true; -} -else -{ - console.log("dark"); - radios[1].checked = true; +if (localStorage.getItem("theme") === "light") { + themeToggle.checked = false; +} else { + themeToggle.checked = true; } function handleThemeChange(event) { - if(event.target.value == 'light') - localStorage.setItem('theme', 'light'); - else - localStorage.setItem('theme', 'dark'); + if (themeToggle.checked === false) localStorage.setItem("theme", "light"); + else localStorage.setItem("theme", "dark"); } document.addEventListener("DOMContentLoaded", function () { - var radios = document.getElementsByName('theme'); - radios[0].addEventListener('click', handleThemeChange); - radios[1].addEventListener('click', handleThemeChange); + themeToggle = document.getElementById("theme"); + themeToggle.addEventListener("click", handleThemeChange); +}); + +historyListElement = document.getElementById("historyList"); +clearHistory = document.querySelector("#clearButton"); + +recentSearchQueries = (JSON.parse(localStorage.getItem("search"))); +recentSearchQueryUrls = (JSON.parse(localStorage.getItem("link"))); + +historyListElement.textContent = ""; +count = 0; +recentSearchQueries.forEach(function (entr) { + var aTag = document.createElement("a"); + aTag.setAttribute("target", "_blank"); + aTag.setAttribute("href", recentSearchQueryUrls[count]); + aTag.innerHTML = entr; + historyListElement.appendChild(aTag); + var br = document.createElement("br"); + historyListElement.appendChild(br); + var hr = document.createElement("hr"); + historyListElement.appendChild(hr); + count += 1; +}); + + +clearHistory.addEventListener("click", function () { + localStorage.clear(); + location.reload(); }); diff --git a/options/options.html b/options/options.html index 2eff85c..a44044e 100644 --- a/options/options.html +++ b/options/options.html @@ -4,21 +4,36 @@