Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

CSS com JS Dinamico

por PEDRO B S LISBOA
| 88.2k xp | 29 posts

Bem, vamos lá, decidi treinar até a exaustão o modelo mvc, acontece que estou aplicando isso em um portifólio.

O objetivo é ler um array de objetos que contenham as características para as fotos.

Até ai tranquilo, o Model, o View e o Controller estão funcionando, porém quando a foto é adicionada ela não é estilizada como determinada no css, não sei porque :/

Qualquer um que puder ajudar seria bem valido.

Esse é o meu view, não percorri o array ainda nele pois estou fazendo testes.

class PhotoView{

    constructor(elemento) {

        this._elemento = elemento;
        Object.freeze(this);

    }

    template(model) {

      return `<div class="photo-album">
            <img src="img/imgs/1.jpg">
          </div>`;

    }

    update(model) {
        this._elemento.innerHTML = this.template(model);
    }
}
4 respostas
por Marco Bruno
| 362.1k xp | 794 posts
Desenvolvedor e Instrutor

Pedro, como está o seu CSS?

por PEDRO B S LISBOA
| 88.2k xp | 29 posts

Ola marco, acho que achei o problema, mais com isso tneho outro problema. Acontece que como o portifolio pode receber foto na horizontal e na vertical eu fiz um js para ajustar a img sempre no centro e com width ou height em 100%:

photoAlbum.each(function(){
    var e = $(this);
    let img = e.children('img');
    let imgHeight = img.height();
    let imgWidth = img.width();

    function adjustImage(){
        if(imgHeight > imgWidth){
         img.css({
           width:'100%',
           top:'0',
           bottom:'0'
         });
      } else {
         img.css({
           height:'100%',
           left:'0',
           right:'0'
         });
      }
      }
    adjustImage();

    // codigos omitidos
}

A solução seria chamar a funçao depois de chamar o controller e adicionar as fotos? Uso promise para isso? Caso tenha ficado meio confuso posso explicar melhor como o codigo funciona colocando as classes aqui

solução!
por PEDRO B S LISBOA
| 88.2k xp | 29 posts

Então marco, tranquilos? Acabei solucionando aqui.

Resolvi fazer um Helper que ajudasse as imagens a se ajustar

class PhotoHelper{

  constructor(){

    this._elemento = $('.photo-album');

  }

  adjustImage(){

    this._elemento.each(function() {
      let e = $(this);
      let img = e.children('img');
      let imgHeight = e.height();
      let imgWidth = e.height();

      if(imgHeight > imgWidth){
       img.css({
         width:'100%',
         top:'0',
         bottom:'0'
       });
      } else {
       img.css({
         height:'100%',
         left:'0',
         right:'0'
       });
    }});

  }

}

Mas esse é o jeito certo? fazer isso com uma classe? Como estou tentando treinar desde o inicio pretendo colocar uma proxy, mas por enquanto o helper é chamado ao adicionar um photo new PhotoHelper().adjustImage();

Espero que consiga entender minha duvida, é mais sobre se isso foi uma boa pratica

por Marco Bruno
| 362.1k xp | 794 posts
Desenvolvedor e Instrutor

Não é errado não Pedro. Quando você precisar fazer algo desse tipo no mercado de trabalho, provável que usará algum framework pra lidar com os components. Algo como React, Angular, Vue ou até mesmo Ember.

Mas não pare de fazer as coisas na mão isso vai te trazer uma grande facilidade pra entender o que está acontecendo quando for usar um framework :-)

Por favor, não pare de estudar e treinar o JavaScript puro, quando estiver bem confortável recomendo escolher um desses framework que comentei pra você estudar.