Skip to content

Instantly share code, notes, and snippets.

@marioplumbarius
Last active December 26, 2015 03:19
Show Gist options
  • Save marioplumbarius/7085076 to your computer and use it in GitHub Desktop.
Save marioplumbarius/7085076 to your computer and use it in GitHub Desktop.
Classe JS para trabalhar com slider.
function Slider( containerSlider ){
this.container = document.querySelector( containerSlider );
this.botoesSlider = this.container.querySelectorAll( '.slider-navegacao-botao' );
this.tagImagem = this.container.querySelector( '.slider-imagem' );
this.listaImagens = this.tagImagem.attributes['data-images'].value.split(',');
this.areaClicavelImagem = this.container.querySelector( '.area-clicavel-imagem' );
this.botaoRetroceder = this.areaClicavelImagem.querySelector( '.botao-retroceder' );
this.botaoAvancar = this.areaClicavelImagem.querySelector( '.botao-avancar' );
this.posicaoSlider = 0;
this.quantidade = this.listaImagens.length;
};
// imagem
Slider.prototype.preCarregarImagem = function(imagens, callback ){
var self = this;
var novaImagem = new Image();
var urlNovaImagem = imagens.shift();
Helper.adicionarEvento( novaImagem, 'load', function(){
if ( imagens.length > 0 ) {
self.preCarregarImagem(imagens, function(){});
}
});
novaImagem.src = urlNovaImagem;
};
Slider.prototype.preCarregarImagens = function(){
var self = this;
var imagens = Helper.clonarArray( self.listaImagens );
self.preCarregarImagem(imagens);
};
Slider.prototype.carregarImagem = function( posicao, callback ){
var self = this;
var urlNovaImagem = self.listaImagens[posicao];
var novaImagem = new Image();
Helper.adicionarEvento( novaImagem, 'load', function(){
callback( urlNovaImagem );
});
novaImagem.src = urlNovaImagem;
};
Slider.prototype.mostrarImagem = function( urlImagem ){
var self = this;
self.tagImagem.src = urlImagem;
};
Slider.prototype.trocarImagem = function( posicao ){
var self = this;
self.carregarImagem(posicao, function( urlImagem ){
self.mostrarImagem( urlImagem );
});
};
// botao
Slider.prototype.ativarBotao = function( posicao, callback ){
var self = this;
var botao = self.botoesSlider[posicao];
Helper.adicionarClasseCSS( botao, 'slider-navegacao-botao-selecionado' );
botao.attributes['data-selecionado'].value = true;
};
Slider.prototype.desativarBotao = function( posicao ){
var self = this;
var botao = self.botoesSlider[posicao];
Helper.removerClasseCSS( botao, 'slider-navegacao-botao-selecionado' );
botao.attributes['data-selecionado'].value = false;
};
Slider.prototype.desativarBotoes = function( callback ){
var self = this;
for ( var i = 0 ; i < self.quantidade ; i++ ) {
self.desativarBotao( i );
}
callback();
};
Slider.prototype.trocarBotaoSlider = function( posicao ){
var self = this;
self.desativarBotoes(function(){
self.ativarBotao( posicao );
});
};
// posicao
Slider.prototype.setarPosicao = function( posicao ){
var self = this;
self.posicaoSlider = posicao;
};
Slider.prototype.recuperarProximaPosicao = function(){
var self = this;
var maxLength = (self.quantidade - 1);
var proximaPosicao = self.posicaoSlider + 1;
var novaPosicao = proximaPosicao > maxLength ? maxLength : proximaPosicao;
return Number( novaPosicao );
};
Slider.prototype.recuperarPosicaoAnterior = function(){
var self = this;
var posicaoAnterior = (self.posicaoSlider - 1);
var minLength = 0;
var novaPosicao = posicaoAnterior < minLength ? minLength : posicaoAnterior;
return Number( novaPosicao );
};
// eventos
Slider.prototype.adicionarEventosBotoesSlider = function( callback ){
var self = this;
for (var i = 0 ; i < self.quantidade ; i++) {
var botao = self.botoesSlider[i];
Helper.adicionarEvento(botao, 'click', function( botao ){
var posicao = Number( botao.attributes['data-posicao'].value );
self.desativarBotoes(function(){
self.ativarBotao( posicao );
});
self.trocarImagem( posicao );
});
}
callback();
};
Slider.prototype.adicionarEventosNavegacao = function( callback ){
var self = this;
Helper.adicionarEvento( self.botaoAvancar, 'click', function(){
self.avancar(function( ultimaPosicaoAtingida ){
callback( 'ultimaPosicaoAtingida' );
});
});
Helper.adicionarEvento( self.botaoRetroceder, 'click', function(){
self.retroceder(function( primeiraPosicaoAtingida ){
callback( 'primeiraPosicaoAtingida' );
});
});
};
Slider.prototype.adicionarEventosSlider = function( callback ){
var self = this;
self.adicionarEventosBotoesSlider(function(){
// callback
});
self.adicionarEventosNavegacao(function( posicaoLimiteAtingida ){
callback( posicaoLimiteAtingida );
});
};
Slider.prototype.posicaoLimiteAtingida = function( posicaoAtual, posicaoLimite ){
return posicaoAtual === posicaoLimite ? true : false;
};
// navegacao
Slider.prototype.avancar = function( callback ){
var self = this;
var posicaoAtual = self.posicaoSlider;
var posicaoLimite = (self.quantidade - 1);
var atingiuPosicaoLimite = self.posicaoLimiteAtingida( posicaoAtual, posicaoLimite );
var novaPosicao = self.recuperarProximaPosicao();
if ( atingiuPosicaoLimite ) {
callback( atingiuPosicaoLimite );
} else {
self.trocarImagem( novaPosicao );
self.trocarBotaoSlider( novaPosicao );
self.setarPosicao( novaPosicao );
}
};
Slider.prototype.retroceder = function( callback ){
var self = this;
var posicaoAtual = self.posicaoSlider;
var posicaoLimite = 0;
var atingiuPosicaoLimite = self.posicaoLimiteAtingida( posicaoAtual, posicaoLimite );
var novaPosicao = self.recuperarPosicaoAnterior();
if ( atingiuPosicaoLimite ) {
callback( atingiuPosicaoLimite );
} else {
self.trocarImagem( novaPosicao );
self.trocarBotaoSlider( novaPosicao );
self.setarPosicao( novaPosicao );
}
};
Slider.prototype.resetar = function(){
var self = this;
self.trocarImagem( 0 );
self.trocarBotaoSlider( 0 );
self.setarPosicao( 0 );
};
// init
Slider.prototype.init = function( callback ){
var self = this;
self.adicionarEventosSlider( function( posicaoLimiteAtingida ){
callback( posicaoLimiteAtingida );
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment