Olá.
Criei um bloco simples, utilizando variáveis CSS.
E para "configurar"estas variáveis a critério de teste, estou utilizando o Dat.GUI.
O código atual se encontra neste Pen.
Minha dúvida é como melhorar esse código, pois mas especificamente nas linhas 33 a 50 (as últimas) existe um repetição de código forçada por mim pois parece ser necessário jogar em uma variável para usar o callback onChange
.
var config = function() {
this.title = 'Lorem ipsum dolor sit amet, consect etur adipisicing elit.';
this.photo = true;
this.avatar = true;
this.avatarAlign = 'left';
this.cardRadius = 20;
this.avatarSize = 75;
this.avatarRadius = 10;
this.mainColor = '#1abc9c';
this.paddingSide = 20;
this.paddingMiddle = 15;
};
function changeCSS(){
console.log('teste');
}
window.onload = function() {
var block = new config();
var gui = new dat.GUI();
gui.add(block, 'title');
gui.add(block, 'photo');
gui.add(block, 'avatar');
gui.add(block, 'avatarAlign', ['left', 'center', 'right']);
var cssVars = gui.addFolder('CSS Variables');
var mainColor = cssVars.addColor(block, 'mainColor');
var cardRadius = cssVars.add(block, 'cardRadius').min(0).step(1).max(10);
var avatarSize = cssVars.add(block, 'avatarSize').min(40).step(5).max(120);
var avatarRadius = cssVars.add(block, 'avatarRadius').min(0).step(1).max(10);
var paddingSide = cssVars.add(block, 'paddingSide').min(0).step(1).max(60);
var paddingMiddle = cssVars.add(block, 'paddingMiddle').min(0).step(1).max(60);
mainColor.onChange(function(value) {
changeCSS();
});
cardRadius.onChange(function(value) {
changeCSS();
});
avatarSize.onChange(function(value) {
changeCSS();
});
avatarRadius.onChange(function(value) {
changeCSS();
});
paddingSide.onChange(function(value) {
changeCSS();
});
paddingMiddle.onChange(function(value) {
changeCSS();
});
};
Qual seria a maneira correta de chamar uma função, seja qual for o atributo alterado?