Feature issue when simplifying and optimizing code

user_14217347 0
Viewed 42

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);
css html jquery javascript
1 Answers

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