From 1fa87fd31509873c82bf84ba4fe02e153fe9f10e Mon Sep 17 00:00:00 2001 From: Dimi Ansari Date: Sun, 25 Feb 2018 23:05:39 +0530 Subject: [PATCH 1/5] added night mode --- code/css/popup.css | 2 +- code/js/popup.js | 129 +++++++++++++++++++++++++++++++++++++++++---- code/popup.html | 23 ++++---- 3 files changed, 131 insertions(+), 23 deletions(-) diff --git a/code/css/popup.css b/code/css/popup.css index 0b6cc55..acb39e0 100644 --- a/code/css/popup.css +++ b/code/css/popup.css @@ -7,7 +7,7 @@ html { position: relative; font-family: 'Roboto Mono', monospace; margin-bottom: 60px; - + background-color: rgb(255, 255, 255) } article { diff --git a/code/js/popup.js b/code/js/popup.js index aa224ef..751e771 100644 --- a/code/js/popup.js +++ b/code/js/popup.js @@ -51,6 +51,7 @@ $(function() { $('#error-message').empty(); $('#no_of_results').empty(); dumpBookmarks($('#search').val()); + current_query = $('#search').val(); }); }); @@ -62,12 +63,15 @@ $(function() { $('#error-message').empty(); $('#no_of_results').empty(); dumpBookmarks($(this).val()); + current_query = $(this).val(); }); }); var current_fname; -function dumpBookmarks(query) +var current_query; +function dumpBookmarks(current_query) { + var query = current_query; $('#search').val(query); $("#front").hide(); $("#favorites").hide(); @@ -82,8 +86,8 @@ function dumpBookmarks(query) for(var pos in single_query) { - current_query = single_query[pos]; - if(current_query != "") + curr_query = single_query[pos]; + if(curr_query != "") { found_word = 1; break; @@ -165,20 +169,30 @@ function dumpBookmarks(query) var card = document.createElement('div'); card.setAttribute("class", "card"); card.setAttribute("style","margin-bottom: 8px"); - + if( sessionStorage.getItem('bg') === 'rgb(51, 51, 51)') { + card.setAttribute("style","margin-bottom: 8px; background-color: #142634"); + } + var card_title = document.createElement('div'); card_title.setAttribute("class","card-title"); + if( sessionStorage.getItem('bg') === 'rgb(51, 51, 51)') { + card_title.setAttribute("style","background-color: #CC9A06"); + } card_title.innerHTML = str; var card_body = document.createElement('div'); card_body.setAttribute("class","card-body"); card_body.innerHTML = inside_text; + if( sessionStorage.getItem('bg') === 'rgb(51, 51, 51)') { + card_body.setAttribute("style","margin-bottom: 8px; background-color: #142634"); + } card.appendChild(card_title); card.appendChild(card_body); //Adding Card to Brick Layer bricklayer.append(card); + } } } @@ -190,8 +204,10 @@ function dumpBookmarks(query) else res="result"; if(total!=0) - $('#no_of_results').append(""); - + { + $('#no_of_results').empty(); + $('#no_of_results').append(""); + } if (found == 0 && found_word!=0) { @@ -212,12 +228,18 @@ function addtags() { var tags_display_number = 10 ; var display_ele = ''; - var style = 'margin: 2px;border-radius: 5px;'; + var style; + if ( sessionStorage.getItem('bg') === 'rgb(255, 255, 255)') { //light mode + style = 'margin: 2px;border-radius: 5px; filter:brightness(100%);'; + } else { //dark mode + style = 'margin: 2px;border-radius: 5px; filter:brightness(80%);'; + } for (var i =0 ;i' } + $('#pop-tags').empty(); $('#pop-tags').append(display_ele); } @@ -291,22 +313,109 @@ function initialize() } } +function dark() { + if ( sessionStorage.getItem('bg') === 'rgb(255, 255, 255)') { //light mode to dark mode + sessionStorage.setItem('bg', 'rgb(51, 51, 51)'); + sessionStorage.setItem('cc', '#EEEEEE'); + document.getElementById('logo').style.filter = "brightness(80%)"; + document.getElementById('fact').style.filter = "brightness(80%)"; + document.getElementById('search').style.filter = "brightness(80%)"; + elements = document.getElementsByClassName("footer"); + for (var i = 0; i < elements.length; i++) { + elements[i].style.backgroundColor="#adadad"; + } + document.getElementById("dark_light").innerHTML ="Light Mode"; + + addtags(); + if(current_query!=""){ dumpBookmarks(current_query);} + } + else if (sessionStorage.getItem('bg') == null || undefined) { //initial + sessionStorage.setItem('bg', 'rgb(51, 51, 51)'); + sessionStorage.setItem('cc', '#EEEEEE'); + document.getElementById('logo').style.filter = "brightness(80%)"; + document.getElementById('fact').style.filter = "brightness(80%)"; + document.getElementById('search').style.filter = "brightness(80%)"; + elements = document.getElementsByClassName("footer"); + for (var i = 0; i < elements.length; i++) { + elements[i].style.backgroundColor="#adadad"; + } + document.getElementById("dark_light").innerHTML ="Light Mode"; + } + else if( sessionStorage.getItem('bg') === 'rgb(51, 51, 51)') { //dark mode to light mode + sessionStorage.setItem('bg', 'rgb(255, 255, 255)'); + sessionStorage.setItem('cc', '#333'); + document.getElementById('logo').style.filter = "brightness(100%)"; + document.getElementById('fact').style.filter = "brightness(100%)"; + document.getElementById('search').style.filter = "brightness(100%)"; + elements = document.getElementsByClassName("footer"); + for (var i = 0; i < elements.length; i++) { + elements[i].style.backgroundColor="#f5f5f5"; + } + document.getElementById("dark_light").innerHTML ="Dark Mode"; + addtags(); + if(current_query!=""){ dumpBookmarks(current_query);} + } + document.body.style.backgroundColor = sessionStorage.getItem('bg'); + document.body.style.color = sessionStorage.getItem('cc'); +} + +function init_dark() { + current_query=""; + if ( sessionStorage.getItem('bg') === 'rgb(255, 255, 255)') { //light mode + sessionStorage.setItem('bg', 'rgb(255, 255, 255)'); + sessionStorage.setItem('cc', '#333'); + } + else if (sessionStorage.getItem('bg') == null || undefined) { //initial + sessionStorage.setItem('bg', 'rgb(255, 255, 255)'); + sessionStorage.setItem('cc', '#333'); + } + else if( sessionStorage.getItem('bg') === 'rgb(51, 51, 51)') { //dark mode + sessionStorage.setItem('bg', 'rgb(51, 51, 51)'); + sessionStorage.setItem('cc', '#EEEEEE'); + document.getElementById('logo').style.filter = "brightness(80%)"; + document.getElementById('fact').style.filter = "brightness(80%)"; + document.getElementById('search').style.filter = "brightness(80%)"; + elements = document.getElementsByClassName("footer"); + for (var i = 0; i < elements.length; i++) { + elements[i].style.backgroundColor="#adadad"; + } + document.getElementById("dark_light").innerHTML ="Light Mode"; + } + //document.getElementById("dark_light").innerHTML ="changed"; + document.body.style.backgroundColor = sessionStorage.getItem('bg'); + document.body.style.color = sessionStorage.getItem('cc'); +} document.addEventListener('DOMContentLoaded', function () { + init_dark(); + document.getElementById('help').addEventListener('click', function(event){ - help_show(); + if ( sessionStorage.getItem('bg') === 'rgb(51, 51, 51)') { + //$('#help_popup').append(''); + var elem = document.getElementById("form"); + elem.setAttribute("style","background-color: #142634;"); + elem = document.getElementById("welcome_heading"); + elem.setAttribute("style","background-color: #CC9A06;"); + } + + help_show(); + }); document.getElementById('close').addEventListener('click', function(event){ - help_hide(); + help_hide(); + }); + + + document.getElementById('dark_light').addEventListener('click', function(event){ + dark(); }); document.getElementById('favButton').addEventListener('click', function(event){ - console.log("favvvvvv") $('#favorites').show(); $('#front').hide(); $('#no_of_results').hide(); diff --git a/code/popup.html b/code/popup.html index 2cf5d4c..1c7ba17 100644 --- a/code/popup.html +++ b/code/popup.html @@ -20,24 +20,23 @@
- +
-
- -
-
+
+ +
+
- Help - - Favorites - - GitHub + Dark Mode + Help + Favorites + GitHub
@@ -51,7 +50,7 @@

World's first Offline Search Engine

- Enjoy our daily code fact + Enjoy our daily code fact
@@ -78,7 +77,7 @@

World's first Offline Search Engine