Skip to content

Commit

Permalink
Uskladjen novni mod sa novim KP nocnim modom
Browse files Browse the repository at this point in the history
  • Loading branch information
@stefanmm
stefanmm committed Aug 28, 2024
1 parent 94eb468 commit 28afa86
Show file tree
Hide file tree
Showing 6 changed files with 29 additions and 240 deletions.
3 changes: 3 additions & 0 deletions src/changelog.txt
View file
Original file line number Diff line number Diff line change
@@ -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

Expand Down
123 changes: 14 additions & 109 deletions src/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -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",

Expand Down
25 changes: 4 additions & 21 deletions src/options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,35 +31,18 @@
</div>
</div>

<div class="single_opt">
<div class="single_opt" id="single_opt_night_mode">
<label class="switch">
<input type="checkbox" id="opt_night_mode">
<span class="slider"></span>

</label>
<span>
<img class="optIco" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAACXBIWXMAAAsTAAALEwEAmpwYAAADH0lEQVR4nO1XS2yMURT+W+ItSJR4i1TI6D/3TMeCIA2xwo4SQYSNBaIejbZzz9ytx0IkFsIKsRELCZFU29xz/pYFJdJ00QiiXRAhkkpIUR25M/dvp9V2Hv2nq57kzyzmnnO/853HPcdxJqSAUqH0ZLemeZ75dcZVVKJYoLcJkC6BpJdC8idA6gPkhED6CLVeybiAiMT1IYH8wVw80heJNa0oKI6w0mUC6fXApdQHkj1Arokg7xZINy0zrYUFIr1dgPQ9eZnkP4B0Laqal6efAaQm+3914YDEeR9I+msZaTMMDT1TWXlvEiD3JMEoDQUBEqnT6wXSzxT93BA93zBnuHPROl7khy+qWmcEDiR8tn4mIHVZIC8qlJ420llXcXkSjKRfTiEEkOI2B76si/GyUYErXeYndUi1TwkWSK1X4icsSDqV6XxZbeNCP0yu0ksDBSOQT1hPu0pPPp6a6bxJYCHph9EJx3hbsGAkNVpPL2SrA0j1KSb5YqCJK5B+p7zUm7MHw+csmx2mUwcCJqr0Wj8ZS7MI0ZDyTvYakN6eQMAIpK22nL/mqguSb1hH2gOpKuOVBfMmV13zRAhJ3bYlXA2MGUD6lpd+XB/xyzws6WhAOcOJDaefTc/HRlq4+sJIZwKpJhdpS15GVKIYkO74TglJD0Rd45K8bAnJT6yRy3kZ8AFJRoHca211g6QrhvncwMT4uDXQmUt5DyeGXUB+NWgoQ+oQyHdFjI9l7ElRpef3VwVylTNmSRSZadAMYD5T/V9Mb8+oLpCl/2pHVMtiJ8BHWCC/tY/wZ6H03OwSWVKnBfQ838r6D4xk7GclzoezVnQVl/uvMUh6tKa6ZfZYgJiQD1QY387dgKS9aXFuA0mrc7VhRlFAup6WKzpvpgXyTj+hzWhpWn1YPV2QSc9sl0J6B0HSu7RqejjmkIPyQuklalcWUx1VIGmHK8l1VfOq5Dwc1/vNOpPcLgfY6EmtMYkiJ7C1Ns4HAOn9aBvloM8wiXxLKL0yGBDDrblIG80kaNjy1xnbl3pNFQpJ903zND3LGW8JKT1rpL1qQpwA5B+ae1Eq2j9K8gAAAABJRU5ErkJggg=="> Noćni režim sajta</span>
<img class="optIco" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAACXBIWXMAAAsTAAALEwEAmpwYAAADH0lEQVR4nO1XS2yMURT+W+ItSJR4i1TI6D/3TMeCIA2xwo4SQYSNBaIejbZzz9ytx0IkFsIKsRELCZFU29xz/pYFJdJ00QiiXRAhkkpIUR25M/dvp9V2Hv2nq57kzyzmnnO/853HPcdxJqSAUqH0ZLemeZ75dcZVVKJYoLcJkC6BpJdC8idA6gPkhED6CLVeybiAiMT1IYH8wVw80heJNa0oKI6w0mUC6fXApdQHkj1Arokg7xZINy0zrYUFIr1dgPQ9eZnkP4B0Laqal6efAaQm+3914YDEeR9I+msZaTMMDT1TWXlvEiD3JMEoDQUBEqnT6wXSzxT93BA93zBnuHPROl7khy+qWmcEDiR8tn4mIHVZIC8qlJ420llXcXkSjKRfTiEEkOI2B76si/GyUYErXeYndUi1TwkWSK1X4icsSDqV6XxZbeNCP0yu0ksDBSOQT1hPu0pPPp6a6bxJYCHph9EJx3hbsGAkNVpPL2SrA0j1KSb5YqCJK5B+p7zUm7MHw+csmx2mUwcCJqr0Wj8ZS7MI0ZDyTvYakN6eQMAIpK22nL/mqguSb1hH2gOpKuOVBfMmV13zRAhJ3bYlXA2MGUD6lpd+XB/xyzws6WhAOcOJDaefTc/HRlq4+sJIZwKpJhdpS15GVKIYkO74TglJD0Rd45K8bAnJT6yRy3kZ8AFJRoHca211g6QrhvncwMT4uDXQmUt5DyeGXUB+NWgoQ+oQyHdFjI9l7ElRpef3VwVylTNmSRSZadAMYD5T/V9Mb8+oLpCl/2pHVMtiJ8BHWCC/tY/wZ6H03OwSWVKnBfQ838r6D4xk7GclzoezVnQVl/uvMUh6tKa6ZfZYgJiQD1QY387dgKS9aXFuA0mrc7VhRlFAup6WKzpvpgXyTj+hzWhpWn1YPV2QSc9sl0J6B0HSu7RqejjmkIPyQuklalcWUx1VIGmHK8l1VfOq5Dwc1/vNOpPcLgfY6EmtMYkiJ7C1Ns4HAOn9aBvloM8wiXxLKL0yGBDDrblIG80kaNjy1xnbl3pNFQpJ903zND3LGW8JKT1rpL1qQpwA5B+ae1Eq2j9K8gAAAABJRU5ErkJggg=="> Noćni mod za neprijavljene korisnike</span>
<span id="nightShowImg" class="showprez">(?)</span>
<div id="nightAuto">
<div>
<label>
<input type="checkbox" id="opt_night_mode_auto">
- Automatski uskladi sa sistemom
</label>
</div>
<div>
<label>
<input type="checkbox" id="opt_night_mode_addad">
- Onemogući prilikom dodavanja oglasa
</label>
</div>
</div>
<div id="nightmode_pres">
<div class="pop_objasnjenje_opcje">
Ako je opcija "Automatski uskladi sa sistemom" uključena noćni mod na sajtu će biti sinhronizovan sa temom sistema ili veb pregledača.
</div>
<div class="pop_objasnjenje_opcje">
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.
</div>
<div class="prez_img_holder">
<span id="close_nightmode" class="close_preze">x</span>
Expand Down Expand Up @@ -130,7 +113,7 @@



<div class="footer_info">Verzija 2.0.9 | Ako nađete grešku prijavite je na <a href="mailto:[email protected]" target="_blank">[email protected]</a></div>
<div class="footer_info">Verzija 2.1.0 | Ako nađete grešku prijavite je na <a href="mailto:[email protected]" target="_blank">[email protected]</a></div>
<script src="options.js"></script>

</body>
Expand Down
24 changes: 0 additions & 24 deletions src/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,15 @@ 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;

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);

Expand All @@ -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";
}
});

}
Expand All @@ -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();
});
Expand Down
Loading

0 comments on commit 28afa86

Please sign in to comment.