From 28afa863409a9443a4e04d80e1acdaddc6e09c7b Mon Sep 17 00:00:00 2001 From: Stefan Marjanov <7655575+stefanmm@users.noreply.github.com> Date: Wed, 28 Aug 2024 17:10:31 +0200 Subject: [PATCH] Uskladjen novni mod sa novim KP nocnim modom --- src/changelog.txt | 3 ++ src/content.js | 123 ++++++---------------------------------------- src/manifest.json | 2 +- src/options.html | 25 ++-------- src/options.js | 24 --------- src/style.css | 92 +++------------------------------- 6 files changed, 29 insertions(+), 240 deletions(-) diff --git a/src/changelog.txt b/src/changelog.txt index bcc3897..0e252d8 100644 --- a/src/changelog.txt +++ b/src/changelog.txt @@ -1,3 +1,6 @@ +v2.1.0 +- Ažurirano: KP je dobio svoj noćni mod koji ulogovani korisnici mogu da menjaju. Dodak sada ima opciju za neprijavljene korisnike da forsiraju noćni mod. + v2.0.9 - Ispravljeno: sitne ispravke za noćni mod diff --git a/src/content.js b/src/content.js index 9d622cb..a4762a4 100644 --- a/src/content.js +++ b/src/content.js @@ -11,112 +11,23 @@ browser.storage.sync.get({ night_mode: true, bigimg: true, floatInfo: true, - night_mode_auto: true, - night_mode_addad: false, wideSite: true },(items) => { - init([items.quick_view, items.night_mode, items.bigimg, items.floatInfo, items.night_mode_auto, items.night_mode_addad, items.wideSite]); + init([items.quick_view, items.night_mode, items.bigimg, items.floatInfo, items.wideSite]); }); -function applyColors(tip = "dark"){ - if(tip == "dark"){ - document.documentElement.classList.add('kpp_night'); - $(":root").css({ - "--kp-color-bg-primary": "#181818", - "--kp-color-bg-secondary": "#383838", - "--kp-color-border-default": "#393939", - "--kp-color-content-interactive-secondary": "#dddddd", - "--kp-color-content-interactive-primary": "#8acaef", - "--kp-color-content-regular-primary": "#dddddd", - "--kp-color-content-accent-secondary": "#007dff", - "--kp-color-brand-logo-navy-blue": "#dddddd", - "--kp-color-form-bg-input": "#272727", - "--kp-color-form-border-default": "#424242", - "--kp-color-form-bg-control": "#424242", - "--kp-color-form-bg-control-hover": "#585858", - "--kp-color-form-bg-selected": "#585858", - "--kp-color-fill-neutral": "#2f2f2f", - "--kp-color-fill-neutral-dim": "#4f4f4f", - "--kp-color-fill-interactive-secondary": "#1e5676", - "--kp-color-fill-interactive-secondary-hover": "#3589b9", - "--kp-color-bg-info": "#0d1920", - "--kp-color-fill-skeleton-dim": "#464646", - "--kp-color-bg-warning": "#372c00", - "--kp-color-fill-ZO-dim": "#574208", - "--kp-color-content-ZO": "#fed388", - "--kp-color-content-regular-secondary": "#979797", - "--kp-color-bg-alert": "#411d19", - "--color-primary-black": "#fff", - "--color-primary-white": "#000", - "--color-secondary-bg-blue": "#034263", - "--color-grayscale-elm-1": "#275386", - "--color-primary-navy-blue": "#5594d6", - "--color-primary-gray": "#303030", - "--kp-color-brand-monogram-navy-blue": "#2d94ff", - "--kp-color-fill-poslovi": " #487111", - "--kp-color-bg-base": " #4e4e4e", - "--kp-color-bg-tertiary": " #4a617c", - - }); - - } else { - document.documentElement.classList.remove('kpp_night'); - $(":root").css({ - "--kp-color-bg-primary": "", - "--kp-color-bg-secondary": "", - "--kp-color-border-default": "", - "--kp-color-content-interactive-secondary": "", - "--kp-color-content-interactive-primary": "", - "--kp-color-content-regular-primary": "", - "--kp-color-content-accent-secondary": "", - "--kp-color-brand-logo-navy-blue": "", - "--kp-color-form-bg-input": "", - "--kp-color-form-border-default": "", - "--kp-color-form-bg-control": "", - "--kp-color-form-bg-control-hover": "", - "--kp-color-form-bg-selected": "", - "--kp-color-fill-neutral": "", - "--kp-color-fill-neutral-dim": "", - "--kp-color-fill-interactive-secondary": "", - "--kp-color-fill-interactive-secondary-hover": "", - "--kp-color-bg-info": "", - "--kp-color-fill-skeleton-dim": "", - "--kp-color-bg-warning": "", - "--kp-color-fill-ZO-dim": "", - "--kp-color-content-ZO": "", - "--kp-color-content-regular-secondary": "", - "--kp-color-bg-alert": "", - "--color-primary-black": "", - "--color-primary-white": "", - "--color-secondary-bg-blue": "", - "--color-grayscale-elm-1": "", - "--color-primary-navy-blue": "", - "--color-primary-gray": "", - "--kp-color-brand-monogram-navy-blue": "", - "--kp-color-fill-poslovi": "", - "--kp-color-bg-base": "", - "--kp-color-bg-tertiary": "", - - }); - - - } -} - -function checkColorMode(isNightMode, isNightAddad, isAddAdPage, isNightAuto, isSystemDark ){ - if( isNightMode ){ - if(isNightAddad && isAddAdPage){ // Ako smo na "Dodaj oglas" i ako je korisnik omogućio opciju isNightAddad - isključi night mode - applyColors("light"); - } else { // Ako smo na bilo kojoj drugoj stranici... - if(isNightAuto){ // Ako korisnik želi da uskladi dark mode sa sistemom - if(isSystemDark) { // Ako je dark mode u sistemu zapravo uključen - applyColors("dark"); - } - } else { - applyColors("dark"); - } +function forceDark(dark = false){ + + if(window.localStorage.getItem('meStats/groupedInfo') === null || window.localStorage.getItem('meStats/groupedInfo') === '1'){ // samo ako korisnik nije ulogovan + if(dark === true){ + window.localStorage.setItem('meStats/groupedInfo', '1'); + window.localStorage.setItem('theme', 'dark'); + } else { + window.localStorage.removeItem('meStats/groupedInfo'); + window.localStorage.removeItem('theme'); } } + } function waitForElm(selector) { @@ -168,16 +79,11 @@ function init(options) { var isNightMode = options[1]; var isBigImg = options[2]; var isfloatInfo = options[3]; - var isNightAuto = options[4]; - var isNightAddad = options[5]; - var isWideSite = options[6]; - var isSystemDark = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? true : false; - var href = window.location.href; - var isAddAdPage = (href.indexOf("/postavljanje-oglasa") > -1) ? true : false; // Proveri stranicu prilikom load-a + var isWideSite = options[4]; // Uraditi proveru što pre kako bismo izbegli "white flash" prilikom učitavanja stranice // (fn se poziva samo prilikom page refresh) - checkColorMode(isNightMode, isNightAddad, isAddAdPage, isNightAuto, isSystemDark); + forceDark(isNightMode); if( isWideSite ){ document.documentElement.classList.add('kpp_wide'); @@ -215,13 +121,12 @@ function init(options) { // SPA menja URL i ne osvežava stranicu - proveri URL var isSingle = (href.indexOf("/oglas") > -1) ? true : false; var isGrupa = ( href.indexOf("/grupa") > -1 || href.indexOf("/pretraga") > -1 || href.indexOf("/najnoviji") > -1 || href.indexOf("/svi-oglasi") > -1 ) ? true : false; - var isAddAdPage = (href.indexOf("/postavljanje-oglasa") > -1) ? true : false; $(document.body).ready(function() { // Sačekaj da se html učita (samo za first time load) // Potrebno je i ovde proveriti ako želimo da manipulišemo DOM u zavisnosti od Night mode // (fn se poziva samo prilikom navigacije) - checkColorMode(isNightMode, isNightAddad, isAddAdPage, isNightAuto, isSystemDark); + forceDark(isNightMode); // FLOAT TRAKA if(isfloatInfo && isSingle) { // Samo ako je korisnik omogućio opciju i ako smo na single ad stranici diff --git a/src/manifest.json b/src/manifest.json index ee0bffb..efba610 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,7 +1,7 @@ { "name": "KP Plus", "description": "Dodatne opcije za KP sajt: Brzi pregled oglasa, Noćni režim, Uveličaj sliku na klik, Plutajuća traka sa informacijama, Proširi sajt.", - "version": "2.0.9", + "version": "2.1.0", "author": "Stefan Marjanov", diff --git a/src/options.html b/src/options.html index 01f2637..47091d2 100644 --- a/src/options.html +++ b/src/options.html @@ -31,35 +31,18 @@ -
+
- Noćni režim sajta + Noćni mod za neprijavljene korisnike (?) -
-
- -
-
- -
-
- Ako je opcija "Automatski uskladi sa sistemom" uključena noćni mod na sajtu će biti sinhronizovan sa temom sistema ili veb pregledača. -
-
- Ako je opcija "Onemogući prilikom dodavanja oglasa" uključena noćni mod će biti isključen na ekranu za dodavanje i uređivanje oglasa. + Ulogovani KP korisnici u podešavanjima profila mogu da biraju svetli ili tamni režim sajta. Ova opcija omogućava tamni režim za korisnike koji nisu ulogovani.
x @@ -130,7 +113,7 @@ -
Verzija 2.0.9 | Ako nađete grešku prijavite je na kpp@sn.rs
+
Verzija 2.1.0 | Ako nađete grešku prijavite je na kpp@sn.rs
diff --git a/src/options.js b/src/options.js index 2bef2a1..71cc6ef 100644 --- a/src/options.js +++ b/src/options.js @@ -47,8 +47,6 @@ function save_options() { var quick_view = document.getElementById('opt_quick_view').checked; var night_mode = document.getElementById('opt_night_mode').checked; - var night_mode_auto = document.getElementById('opt_night_mode_auto').checked; - var night_mode_addad = document.getElementById('opt_night_mode_addad').checked; var bigimg = document.getElementById('opt_bigimg').checked; var floatInfo = document.getElementById('opt_floatInfo').checked; var wideSite = document.getElementById('opt_wideSite').checked; @@ -56,10 +54,8 @@ function save_options() { browser.storage.sync.set({ quick_view: quick_view, night_mode: night_mode, - night_mode_auto: night_mode_auto, bigimg: bigimg, floatInfo: floatInfo, - night_mode_addad: night_mode_addad, wideSite: wideSite }).then(setItems, onError); @@ -82,26 +78,17 @@ function restore_options() { browser.storage.sync.get({ quick_view: true, night_mode: true, - night_mode_auto: true, bigimg: true, floatInfo: true, - night_mode_addad: false, wideSite: true },(items) => { document.getElementById('opt_quick_view').checked = items.quick_view; document.getElementById('opt_night_mode').checked = items.night_mode; - document.getElementById('opt_night_mode_auto').checked = items.night_mode_auto; - document.getElementById('opt_night_mode_addad').checked = items.night_mode_addad; document.getElementById('opt_bigimg').checked = items.bigimg; document.getElementById('opt_floatInfo').checked = items.floatInfo; document.getElementById('opt_wideSite').checked = items.wideSite; - if (document.getElementById('opt_night_mode').checked == true){ - document.getElementById("nightAuto").style.display = "block"; - } else { - document.getElementById("nightAuto").style.display = "none"; - } }); } @@ -113,22 +100,11 @@ document.addEventListener('DOMContentLoaded', restore_options); /* *********************** HOOK NA CHANGE EVENT ZA OPCIJE *********************** */ /* ****************************************************************************** */ document.getElementById('opt_night_mode').addEventListener('change', (event) => { - if (event.target.checked) { - document.getElementById("nightAuto").style.display = "block"; - } else { - document.getElementById("nightAuto").style.display = "none"; - } save_options(); }); document.getElementById('opt_quick_view').addEventListener('change', (event) => { save_options(); }); -document.getElementById('opt_night_mode_auto').addEventListener('change', (event) => { - save_options(); -}); -document.getElementById('opt_night_mode_addad').addEventListener('change', (event) => { - save_options(); -}); document.getElementById('opt_bigimg').addEventListener('change', (event) => { save_options(); }); diff --git a/src/style.css b/src/style.css index c5c02b0..aa8e8c4 100644 --- a/src/style.css +++ b/src/style.css @@ -672,27 +672,11 @@ html.async-hide { /**********************************************************************/ /***************************** NIGHT MODE *****************************/ /**********************************************************************/ -.kpp_night, .kpp_night body { - background-color: #2b2b2b; -} - -.kpp_night #kpp_modal_window { +body[data-theme="dark"] #kpp_modal_window { background: #292929; color: #fff; } -.kpp_night .kpp_modal_title a { - color: rgb(80 165 241); -} - -.kpp_night .kpp_modal_cena { - color: rgb(255 57 57); -} - -.kpp_night #userIcon { - stroke: rgb(189 189 189); -} - .kpp_night .kpp_close_modal { background: #fff; } @@ -701,88 +685,26 @@ html.async-hide { stroke: #000; } -.kpp_night section[class*="CategoryHeadline_box__"] > div[class^="CategoryHeadline_itemHolder__"] > a img { - -webkit-filter: grayscale(100%) invert(100%); - filter: grayscale(100%) invert(100%); -} - -.kpp_night #kpp_float_holder { +body[data-theme="dark"] #kpp_float_holder { background: #353535; } -.kpp_night div[class^="MessageChatBox_chatBoxHolder_"] div[class^="MessageChatBox_chatBox_"] { - background-blend-mode: color-burn; - background-color: #303030; -} - -.kpp_night div[class^="MainMessageTextField_textFieldHolder__"] #message::-webkit-input-placeholder { - color: var(--color-primary-gray); -} - -.kpp_night div[class^="MainMessageTextField_textFieldHolder__"] #message::-moz-placeholder { - color: var(--color-primary-gray); -} - -.kpp_night div[class^="MainMessageTextField_textFieldHolder__"] #message:-ms-input-placeholder { - color: var(--color-primary-gray); -} - -.kpp_night div[class^="MainMessageTextField_textFieldHolder__"] #message::-ms-input-placeholder { - color: var(--color-primary-gray); -} - -.kpp_night div[class^="MainMessageTextField_textFieldHolder__"] #message::placeholder { - color: var(--color-primary-gray); -} - -.kpp_night div[class*="MessageList_itemHolder"]:focus-visible, -.kpp_night div[class*="MessageList_itemHolder"]:hover { - background-color: #2d2d2d; -} - -.kpp_night div[class*="Message_isMessageAddress"], -.kpp_night div[class*="Message_isMessageTrackingCode"] { - background-color: #4b3d0a!important; -} -.kpp_night div[class*="MessageAddress_addressMessageTitle"] { - background-color: #685400; - color: #ffffff; -} -.kpp_night div[class*="MessageAddress_addressMessageTitle"] { - background-color: #685400; - color: #ffffff; -} -.kpp_night div[class*="MessageAddress_addressMessageTitle"] > svg { - stroke: #ffffff; -} -.kpp_night div[class*="Message_isMessageAddress"]:before, -.kpp_night div[class*="Message_isMessageTrackingCode"]:before { - border-left: .7rem solid #4b3d0a!important; -} - -.kpp_night .tox .tox-edit-area__iframe { - background: #fff; -} - -.kpp_night .kpp_opcije { +body[data-theme="dark"] .kpp_opcije { background: #317ebf; } -.kpp_night .kpp_quick-view svg { +body[data-theme="dark"] .kpp_quick-view svg { fill: #fff; } -.kpp_night div[class^="Header_header__" ] div[class^="Header_headerInner__" ] > div[class^="Header_headerColLeft__" ]:after { - color: #fff; -} -.kpp_night a.kpp_pop_otvori_oglas:hover { +body[data-theme="dark"] a.kpp_pop_otvori_oglas:hover { color: #fff; } -.kpp_night a.kpp_pop_otvori_oglas:hover svg g { +body[data-theme="dark"] a.kpp_pop_otvori_oglas:hover svg g { fill: #ffffff; } -.kpp_night a.kpp_pop_otvori_oglas.kpp_kpizlog { +body[data-theme="dark"] a.kpp_pop_otvori_oglas.kpp_kpizlog { color: #fff; } \ No newline at end of file