6

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?

3
  • Normalmente nós só ajudamos quando o código relacionado a pergunta está todo contido nela. Seria interessante copiar o código do Pen aqui. 13/06/2017 às 16:28
  • Certo @Renan, não entendi o porque mas editei e adicionei o JS inteiro. Obrigado! 13/06/2017 às 16:40
  • 1
    São dois os motivos: porque assim fica mais fácil ajudar pessoas com problemas parecidos com o seu, e porque se um dia o Pen deixar de existir, todas as perguntas e respostas que usam links para o Pen ao invés de conter o próprio código perdem sua utilidade. Agora que você colocou o código aqui, você tem meu voto positivo. 13/06/2017 às 16:50

1 Resposta 1

0

Para isso você deve criar um objeto:

var dry = [];

e em vez de criar uma variável para cada item, adicione eles no objeto:

dry.push(
  cssVars.addColor(block, 'mainColor'),
  cssVars.add(block, 'cardRadius').min(0).step(1).max(10),
  cssVars.add(block, 'avatarSize').min(40).step(5).max(120),
  cssVars.add(block, 'avatarRadius').min(0).step(1).max(10),
  cssVars.add(block, 'paddingSide').min(0).step(1).max(60),
  cssVars.add(block, 'paddingMiddle').min(0).step(1).max(60)
);

Depois faça um loop para aplicar o callback:

for (var i = 0; i < dry.length; i++) {
  dry[i].onChange(function (value) {
    changeCSS(value);
  });
}

Podes ver funcionando em stackblitz

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .