Feature issue when simplifying and optimizing code

Question

I recently wrote a code to change the mode from light to dark and decided to simplify it to make it more efficient, optimal and shorter but I ran into a problem because I don't want to set the "theme" and "current-theme" attributes. I checked the jQuery docs, just like the logs in the console, I even tried to use data and nothing. If someone would help me simplify this code, I would be grateful or help me solve the problem with unchanging attributes, I would be grateful :)

Full Code:

;(function($){'use strict';
setMode();
$('#theme-mode, #theme-mode i').on('click', function(){
    $('body').toggleClass('theme-dark');
});
$('#theme-mode, #theme-mode i').click(function(){
    switchMode();
});
function switchMode(){
    if($('body').hasClass('theme-dark')){
        $('#theme-mode i').removeClass('dd-sun').addClass('fa-moon');
        $('body').removeClass('theme-light');
        $.cookie("theme_mode", "dark", {expires: 365, secure: true});
    }else{
        $('#theme-mode i').removeClass('fa-moon').addClass('dd-sun');
        $('body').addClass('theme-light').removeClass('theme-dark');
        $.cookie("theme_mode", "light", {expires: 365, secure: true});
    }
    setMode();
}
function setMode(){
    if(checkMode('theme_mode')=="dark"){
        $('body').addClass('theme-dark');
        $('#theme-style').attr('href', 'css/theme-dark.css');
        $('#theme-mode i').removeClass('dd-sun').addClass('fa-moon');
    }else{
        $('body').addClass('theme-light');
        $('#theme-style').attr('href', 'css/theme-light.css');
        $('#theme-mode i').removeClass('fa-moon').addClass('dd-sun');
    }
}
function checkMode(){
    var cookieMode = $.cookie("theme_mode");
    if(cookieMode != ""){
        if(cookieMode=="dark"){
            $.cookie("theme_mode", "dark", {expires: 365, secure: true});
        }else{
            $.cookie("theme_mode", "light", {expires: 365, secure: true});
        }
    }
    return cookieMode;
}
})(jQuery);

Shorted Code:

;(function($){'use strict';
$("#theme-mode").click(function(){
    var e=$(this).attr("data-theme"),c=$(this).attr("data-current-theme");
    console.log(e+c);
    $('body').addClass('theme-'+e);
    $("#theme-mode").attr("data-theme",e);
    //$("#theme-mode").attr("current-theme",c);
    $.cookie("theme_mode",e,{expires:365, secure: true});
    $("#theme-style").attr("href", "css/theme/"+e+".css");
    if($('body').hasClass('theme-dark')){
        $('#theme-mode i').removeClass('dd-sun').addClass('fa-moon');
        $('body').removeClass('theme-light');
        //$.cookie("theme_mode", "dark", {expires: 365, secure: true});
    }else{
        $('#theme-mode i').removeClass('fa-moon').addClass('dd-sun');
        $('body').addClass('theme-light').removeClass('theme-dark');
        //$.cookie("theme_mode", "light", {expires: 365, secure: true});
    }
});
})(jQuery);

biberman · Accepted Answer · 2021-03-24 19:06:54Z

1

I think it is a bad idea to put all in one block. So is in your shorted code no initial setMode() and no cookie query. This is my shorted version:

;(function($){'use strict';
function setLightMode(){
    $('#theme-style').attr('href', 'css/theme-light.css');
    $('body').removeClass('theme-dark').addClass('theme-light');
    $('#theme-mode i').removeClass('fa-moon').addClass('dd-sun');   
    $.cookie("theme_mode", "light", {expires: 365, secure: true});
}
function setDarkMode(){
    $('#theme-style').attr('href', 'css/theme-dark.css');
    $('body').removeClass('theme-light').addClass('theme-dark');
    $('#theme-mode i').removeClass('dd-sun').addClass('fa-moon');
    $.cookie("theme_mode", "dark", {expires: 365, secure: true});
}
function checkMode(){
    var cookieMode = $.cookie("theme_mode");
    if(cookieMode=="dark"){ setDarkMode(); }
    else{ setLightMode(); }
}
checkMode();
$('#theme-mode, #theme-mode i').click(function(){
    if( $('body').hasClass('theme-light') ){ setDarkMode(); }
    else{ setLightMode(); }
});
})(jQuery);

If you don't want setMode() and the cookie query anymore, than you can do it without the functions:

;(function($){'use strict';
$('#theme-mode, #theme-mode i').click(function(){
    if( $('body').hasClass('theme-light') ){ 
        $('#theme-style').attr('href', 'css/theme-dark.css');
        $('body').removeClass('theme-light').addClass('theme-dark');
        $('#theme-mode i').removeClass('dd-sun').addClass('fa-moon');
    }
    else{ 
        $('#theme-style').attr('href', 'css/theme-light.css');
        $('body').removeClass('theme-dark').addClass('theme-light');
        $('#theme-mode i').removeClass('fa-moon').addClass('dd-sun');   
    }
});
})(jQuery);

If you still want it shorter, you must reduce the if-else blocks to just changing the stylesheets and toggle the body class after that. But then you must instead redefine your theme-css files.

;(function($){'use strict';
$('#theme-mode, #theme-mode i').click(function(){
    if( $('body').hasClass('theme-light') ){ 
        $('#theme-style').attr('href', 'css/theme-dark.css');
    }
    else{ 
        $('#theme-style').attr('href', 'css/theme-light.css');
    }
    $('body').toggleClass('theme-light');
});
})(jQuery);

And when thats not enough, the only possibility i see, is to reduce the whitespace:

;(function($){'use strict';
$('#theme-mode, #theme-mode i').click(function(){
    if( $('body').hasClass('theme-light') ){ $('#theme-style').attr('href', 'css/theme-dark.css'); }
    else{ $('#theme-style').attr('href', 'css/theme-light.css'); }
    $('body').toggleClass('theme-light');
});
})(jQuery);

edited Mar 24, 2021 at 19:06

answered Mar 24, 2021 at 16:16

biberman

5,7804 gold badges16 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kondzio Over a year ago

Only, without checking the cookies, it will not set the style selected by the user

Kondzio Over a year ago

Because it's supposed to work like this 1. Checks if the style selected by the user is saved, if not then sets the default to light and if it is to the one selected by the user. 2. After clicking on the button, the icon changes style

Kondzio Over a year ago

And I want to make this code as short as possible and work as it should

Kondzio Over a year ago

And I would prefer to have 1 max functions 2 and not 3, so that there is as little code as possible

Kondzio Over a year ago

I processed what you sent but it does not work and it does not show errors pastebin.com/irMmFYw9

|

Collectives™ on Stack Overflow

Feature issue when simplifying and optimizing code

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related