CODEWITHSUNDEEP
javascriptless
WP23
WP23

Reputation: 31

ModifyVars issue when trying to change variables one by one

I am having a big issue trying to make a live customization section for my website. I want to be able to modify each variable from my LESS file in the browser when a value is added in the field and see the result immediately in the browser. For example:

$('#txtBaseColor > .form-control').change(function(){
    var bgBase = $(this).val();
    less.modifyVars({
        '@bgBase': bgBase
    });
});

// Base bckg color change
$('#txtBaseTextColor > .form-control').change(function(){
    var cBaseContrast = $(this).val();

    less.modifyVars({
        '@cBaseContrast': cBaseContrast
    });
});

I know the modifyVars function provided by LESS js file doesn't support that, but some other solutions would be very appreciated. Or maybe somebody could help me create a solution by sending an array with all the modified values and send it back to the modifyVars function?

Upvotes: 3

Views: 2034

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

you should call less.refreshStyles(); after passing new value to modifyVars.

You can use the following javascript (depends on jquery) code to pass your form value to modifyVars:

function somethingChanged()
{
    var fields = $( '#variables' ).serializeArray();
    var variables = new Object;
    jQuery.each( fields, function( i, field ) {
       variables['@' + field.name] = field.value;
    });
    less.modifyVars(variables);
    less.refreshStyles();
}   
$('#variables input[type="text"]').change(somethingChanged);
$('#variables').submit(function(e){ e.preventDefault(); somethingChanged();});

The above Javascript code works when the form look like that shown below:

<form id="variables">
    <input type="text" name="backgroundcolor" value="red">
    <input type="text" name="fontcolor" value="green">
</form>

The Less file should look like that shown beneath:

@backgroundcolor: red;
@fontcolor: green;

    body {
    background-color: @backgroundcolor;
    color: @fontcolor;
    }

When i call my Less file call test.less the complete HTML can look like that shown below:

<!DOCTYPE html>
<html>
<head>
<title>Less example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="test.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>
</head>
<body>
    <p>Colored text</p>
<form id="variables">
    <input type="text" name="backgroundcolor" value="red">
    <input type="text" name="fontcolor" value="green">
</form> 
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
function somethingChanged()
{
    var fields = $( '#variables' ).serializeArray();
    var variables = new Object;
    jQuery.each( fields, function( i, field ) {
       variables['@' + field.name] = field.value;
    });
    less.modifyVars(variables);
    less.refreshStyles();
}   
$('#variables input[type="text"]').change(somethingChanged);
$('#variables').submit(function(e){ e.preventDefault(); somethingChanged();});
</script>
</body>
</html>

Upvotes: 2

Related Questions