Skip to content

Instantly share code, notes, and snippets.

@marioluan
Last active December 20, 2015 22:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marioluan/6207248 to your computer and use it in GitHub Desktop.
Save marioluan/6207248 to your computer and use it in GitHub Desktop.
Comparando um código feito com base em OOP e outro não.
Object.keys = Object.keys || (function () {
var hasOwnProperty = Object.prototype.hasOwnProperty,
hasDontEnumBug = !{toString:null}.propertyIsEnumerable("toString"),
DontEnums = [
'toString',
'toLocaleString',
'valueOf',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'constructor'
],
DontEnumsLength = DontEnums.length;
return function (o) {
if (typeof o != "object" && typeof o != "function" || o === null)
throw new TypeError("Object.keys called on a non-object");
var result = [];
for (var name in o) {
if (hasOwnProperty.call(o, name))
result.push(name);
}
if (hasDontEnumBug) {
for (var i = 0; i < DontEnumsLength; i++) {
if (hasOwnProperty.call(o, DontEnums[i]))
result.push(DontEnums[i]);
}
}
return result;
};
})();
if (!(window.console && console.log)) {
(function() {
var noop = function() {};
var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];
var length = methods.length;
var console = window.console = {};
while (length--) {
console[methods[length]] = noop;
}
}());
}
var CIDADEGLOBAL = "";
var UFGLOBAL = "";
var imgArray = [];
var imgArrayNovo = [];
var totalRegistros;
var geoArray = [];
// var temLista = false;
var listaCidades = {};
var termosArray = [];
var indiceListaUsuario = 0;
var temCidade = false;
function imgError(image) {
image.onerror = "";
image.src = "images/listas/default.png";
return true;
} // imgError()
function setCookie(c_name,value,exdays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function checkCookie(){
var user_uf=getCookie("user_uf");
if (user_uf!=null && user_uf!=""){
return true;
}else {
return false;
}
}
function getCookie(c_name){
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1){
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1){
c_value = null;
}else{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1){
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function getGeo(){
var array = [];
// retorna um array com dados de localização
$.ajax({
type : "GET",
url : "_lib/geo.php",
dataType : "",
async : false,
success : function(result){
var string = result;
array = string.split(',');
setCookie("user_uf",ufNome(array[1]),1);
setCookie("user_cidade",array[2],1);
}
});
return array;
} // getGeo()
function getListaCidades(){
var result;
$.ajax({
type : "GET",
url : "_lib/listas-cidades-guias.json",
contentType :"application/x-www-form-urlencoded; charset=utf-8",
dataType : "json",
async : false,
success : function(data){
result = data.listas;
}
});
return result;
} // getListaCidades()
function getListaIndex( listaCidades, cidadeUsuario ){
var json = listaCidades,
cidadeUsuario = normalizarNome(cidadeUsuario),
ufUsuario = UFGLOBAL;
for ( var i in json ) {
var obj = json[i],
uf = obj.uf,
cidades = obj.cidades,
lista = obj.lista,
indice = obj.indice;
for ( var j in cidades ) {
var cidade = cidades[j].nome;
cidade = normalizarNome(cidade);
if ( cidadeUsuario === cidade && ufUsuario === uf) {
temCidade = true;
return indice;
}
}
}
temCidade = false;
return 2;
} // getListaIndex()
function getListaIndexPorLista( listaCidades, listaUsuario ){
var json = listaCidades,
ufUsuario = UFGLOBAL;
for ( var i in json ) {
if ( normalizarNome(json[i].lista) === normalizarNome(listaUsuario) && json[i].uf === ufUsuario ) {
return json[i].indice;
}
}
} // getListaIndexPorLista()
function addItemHTMLUF( indiceListaUsuario ){
var current = indiceListaUsuario,
length = imgArrayNovo.length;
if ( length === 1 ) {
$('ul.carrossel').append('<li><a href="/listas/'+normalizarNome(imgArrayNovo[0].lista)+'/" target="_listas" title="'+imgArrayNovo[0].lista+' - '+imgArrayNovo[0].uf+'"><img src="/listas/'+normalizarNome(imgArrayNovo[0].lista)+'/content/thumbs/capa1.png" onerror="imgError(this);" id="current" data-lista="'+0+'"/><div class="nome">'+imgArrayNovo[0].lista+'</div></a></li>');
} else if ( length === 2 ) {
$('ul.carrossel').append('<li><a href="/listas/'+normalizarNome(imgArrayNovo[0].lista)+'/" target="_listas" title="'+imgArrayNovo[0].lista+' - '+imgArrayNovo[0].uf+'"><img src="/listas/'+normalizarNome(imgArrayNovo[0].lista)+'/content/thumbs/capa1.png" onerror="imgError(this);" id="current" data-lista="'+0+'"/><div class="nome">'+imgArrayNovo[0].lista+'</div></a></li>');
$('ul.carrossel').append('<li><a href="/listas/'+normalizarNome(imgArrayNovo[1].lista)+'/" target="_listas" title="'+imgArrayNovo[1].lista+' - '+imgArrayNovo[1].uf+'"><img src="/listas/'+normalizarNome(imgArrayNovo[1].lista)+'/content/thumbs/capa1.png" onerror="imgError(this);" id="next" data-lista="'+1+'"/><div class="nome">'+imgArrayNovo[1].lista+'</div></a></li>');
} else {
$('ul.carrossel').append('<li><a href="/listas/'+normalizarNome(imgArrayNovo[0].lista)+'/" target="_listas" title="'+imgArrayNovo[0].lista+' - '+imgArrayNovo[0].uf+'"><img src="/listas/'+normalizarNome(imgArrayNovo[0].lista)+'/content/thumbs/capa1.png" onerror="imgError(this);" id="current" data-lista="'+0+'"/><div class="nome">'+imgArrayNovo[0].lista+'</div></a></li>');
$('ul.carrossel').append('<li><a href="/listas/'+normalizarNome(imgArrayNovo[1].lista)+'/" target="_listas" title="'+imgArrayNovo[1].lista+' - '+imgArrayNovo[1].uf+'"><img src="/listas/'+normalizarNome(imgArrayNovo[1].lista)+'/content/thumbs/capa1.png" onerror="imgError(this);" id="next" data-lista="'+1+'"/><div class="nome">'+imgArrayNovo[1].lista+'</div></a></li>');
$('ul.carrossel').append('<li><a href="/listas/'+normalizarNome(imgArrayNovo[length-1].lista)+'/" target="_listas" title="'+imgArrayNovo[length-1].lista+' - '+imgArrayNovo[length-1].uf+'"><img src="/listas/'+normalizarNome(imgArrayNovo[length-1].lista)+'/content/thumbs/capa1.png" onerror="imgError(this);" id="prev" data-lista="'+(length-1)+'"/><div class="nome">'+imgArrayNovo[length-1].lista+'</div></a></li>');
}
return;
} // addItemHTMLUF()
function nextImgUF(){
var nextId = parseInt($('#next').attr('data-lista'));
nextId = nextId + 1;
// console.log('nextId => ' + nextId);
if ( nextId === imgArrayNovo.length ) {
nextId = 0;
}
var nomeLista = normalizarNome(imgArrayNovo[nextId].lista);
var pathLista = '/listas/'+nomeLista;
var caminhoImagem = pathLista+'/content/thumbs/capa1.png';
$('#prev').parent().attr('href', pathLista);
$('#prev').parent().attr('title', nomeLista);
$('#prev').attr('src', caminhoImagem);
$('#prev').next().text(imgArrayNovo[nextId].lista);
$('#prev').attr('data-lista', nextId);
$('#prev').attr('id', 'prevToNext');
$('#current').attr('id', 'prev');
$('#next').attr('id', 'current');
$('#prevToNext').attr('id', 'next');
} // nextImg()
function prevImgUF(){
var prevId = parseInt($('#prev').attr('data-lista'));
prevId = prevId - 1;
// console.log('prevId => ' + prevId);
if ( prevId === -1 ) {
prevId = (imgArrayNovo.length - 1);
}
// console.log(prevId);
var nomeLista = normalizarNome(imgArrayNovo[prevId].lista);
var pathLista = '/listas/'+nomeLista;
var caminhoImagem = pathLista+'/content/thumbs/capa1.png';
$('#next').parent().attr('href', pathLista);
$('#next').parent().attr('title', nomeLista);
$('#next').attr('src', caminhoImagem);
$('#next').next().text(imgArrayNovo[prevId].lista);
$('#next').attr('data-lista', prevId);
$('#next').attr('id', 'nextToPrev');
$('#current').attr('id', 'next');
$('#prev').attr('id', 'current');
$('#nextToPrev').attr('id', 'prev');
} // prevImg()
function gerarListaAutoComplete( listasCidades ){
var items = listasCidades,
array = [];
for ( var i in items) {
var item = items[i],
cidades = item.cidades,
uf = item.uf,
nomeLista = item.lista;
for ( var j in cidades) {
var cidade = cidades[j].nome;
array.push(cidade + ' - ' + uf + ' - ' + nomeLista);
}
}
array.sort(function( a, b ){
if ( a < b ) {
return -1;
}
if ( a > b ) {
return 1;
}
});
// imprime a ordenacao do array em ordem alfabetica
// for( var i = 0 ; i < array.length ; i++ ) {
// console.log(array[i]);
// }
return array;
} // gerarListaAutoComplete
function normalizarNome(nome) {
var resultado = nome;
var caracteresAcento = {
"Á" : "A", "á" : "a", "É" : "E", "é" : "e", "Í" : "I", "í" : "i",
"Ó" : "O", "ó" : "o", "Ú" : "U", "ú" : "u", "À" : "A", "à" : "a",
"È" : "E", "è" : "e", "Ì" : "I", "ì" : "i", "Ò" : "O", "ò" : "o",
"Ù" : "U", "ù" : "u", "Â" : "A", "â" : "a", "Ê" : "E", "ê" : "e",
"Î" : "I", "î" : "i", "Ô" : "O", "ô" : "o", "Û" : "U", "û" : "u",
"Ä" : "A", "ä" : "a", "Ë" : "E", "ë" : "e", "Ï" : "I", "ï" : "i",
"Ö" : "O", "ö" : "o", "Ü" : "U", "ü" : "u", "Ã" : "A", "ã" : "a",
"Õ" : "O", "õ" : "o", "Ç" : "C", "ç" : "c"
};
for (caracter in caracteresAcento) {
resultado = resultado.replace(caracter, caracteresAcento[caracter]);
}
resultado = resultado.replace(/^\s+/g, "");
resultado = resultado.replace(/\s+$/g, "");
resultado = resultado.replace(/\s+/g, "-");
resultado = resultado.toLowerCase();
resultado = resultado.replace(/[^-a-z0-9+]/g, '');
return resultado;
} // normalizarNome()
function ufNome(codigo){
var codigo = parseInt(codigo) || 27;
var uf = "";
switch(codigo){
case 1: uf = "AC"; break;
case 2: uf = "AL"; break;
case 3: uf = "AP"; break;
case 4: uf = "AM"; break;
case 5: uf = "BA"; break;
case 6: uf = "CE"; break;
case 7: uf = "DF"; break;
case 8: uf = "ES"; break;
case 9: uf = "GO"; break;
case 10: uf = "--"; break;
case 11: uf = "MS"; break;
case 12: uf = "--"; break;
case 13: uf = "MA"; break;
case 14: uf = "MT"; break;
case 15: uf = "MG"; break;
case 16: uf = "PA"; break;
case 17: uf = "PB"; break;
case 18: uf = "PR"; break;
case 19: uf = "--"; break;
case 20: uf = "PI"; break;
case 21: uf = "RJ"; break;
case 22: uf = "RN"; break;
case 23: uf = "--"; break;
case 24: uf = "RO"; break;
case 25: uf = "RR"; break;
case 26: uf = "SC"; break;
case 27: uf = "SP"; break;
case 28: uf = "SE"; break;
case 29: uf = "GO"; break;
case 30: uf = "PE"; break;
case 31: uf = "TO"; break;
default: uf = "--";
}
return uf;
} //ufNome()
function loadUF( lista, uf ){
var lis = $('ul.carrossel').find('li');
$(lis).remove();
listaUsuario = lista;
// extrai o UF
UFGLOBAL = uf;
addItemHTMLUF( 0 );
$('ul.carrossel').roundabout({
responsive: true,
btnPrev: '#seta-prev-area',
btnNext: '#seta-next-area',
startingChild: 0
});
// $('#seta-prev-area').attr('onClick', '');
// $('#seta-next-area').attr('onClick', '');
} // loadUF()
$(function() {
if(checkCookie() === false){
geoArray = getGeo();
UFGLOBAL = ufNome(geoArray[1]);
CIDADEGLOBAL = geoArray[2];
}else{
UFGLOBAL = getCookie("user_uf");
CIDADEGLOBAL = getCookie("user_cidade");
}
// pega as cidades do banco
listaCidades = getListaCidades();
// monta o autocomplete com as cidades
termosArray = gerarListaAutoComplete(listaCidades);
if ( listaCidades === false ) {
// console.log("Erro"+ data);
$('ul.carrossel').append('<li><a href="javascript:void(0)"><img src="images/listas/sem-lista.png" /></a></li>');
$('#seta-prev-area').css('visibility', 'hidden');
$('#seta-next-area').css('visibility', 'hidden');
$('.container.home div.aviso').css('visibility', 'hidden');
$('.container.home div.carrossel-grid ul.carrossel').css('marginTop', '-140px');
} else {
indiceListaUsuario = getListaIndex( listaCidades, CIDADEGLOBAL );
totalRegistros = listaCidades.length;
for (var i = 0, totalRegistros; i < totalRegistros; i++) {
var result = listaCidades[i];
imgArray.push(result);
}
// insere a cidade e uf do usuário no valor do input
$('#cidade_busca').val(CIDADEGLOBAL + ' - ' + UFGLOBAL);
imgArrayNovo = [];
for ( var i = 0 ; i < imgArray.length ; i++ ) {
if ( imgArray[i].uf === UFGLOBAL) {
imgArrayNovo.push(imgArray[i]);
}
}
// console.log(imgArrayNovo);
listaCidades = {};
for ( var j = 0 ; j < imgArrayNovo.length ; j++ ) {
listaCidades[j] = imgArrayNovo[j];
}
// console.log(listaCidades);
loadUF(CIDADEGLOBAL, UFGLOBAL);
$("#res").empty();
if ( imgArrayNovo.length > 0 && imgArrayNovo.length < 3 ) {
// evita que novas cidades sejam carregadas
$('#seta-prev-area').attr('onclick', '');
$('#seta-next-area').attr('onclick', '');
} else {
// evita que novas cidades sejam carregadas
$('#seta-prev-area').attr('onclick', 'javascript:prevImgUF();');
$('#seta-next-area').attr('onclick', 'javascript:nextImgUF();');
}
}
});
$(document).ready(function() {
$('#cidade_busca').focus(function() {
$(this).val('');
});
$('#cidade_busca').blur( function() {
if($(this).val() == "" && temCidade === true){
$(this).val(CIDADEGLOBAL+' - '+UFGLOBAL);
}
});
var cache = {};
var drew = false;
$("#cidade_busca").on("keyup", function(event){
var query = $("#cidade_busca").val();
if($("#cidade_busca").val().length > 2){
if(query in cache){
results = cache[query];
}
else{
var results = $.grep(termosArray, function(item){
item = normalizarNome(item);
return item.search(RegExp(normalizarNome(query), "i")) != -1;
});
cache[query] = results;
}
if(drew == false){
$("#cidade_busca").after('<ul id="res"></ul>');
drew = true;
$("#res").on("click", "li", function(){
$("#cidade_busca").val($(this).text());
var stringCidade = $(this).text();
stringCidade = stringCidade.split(' - ');
imgArrayNovo = [];
for ( var i = 0 ; i < imgArray.length ; i++ ) {
if ( imgArray[i].uf === stringCidade[1]) {
imgArrayNovo.push(imgArray[i]);
}
}
// console.log(imgArrayNovo);
listaCidades = {};
for ( var j = 0 ; j < imgArrayNovo.length ; j++ ) {
listaCidades[j] = imgArrayNovo[j];
}
// console.log(listaCidades);
loadUF(stringCidade[2], stringCidade[1]);
$("#res").empty();
if ( imgArrayNovo.length > 0 && imgArrayNovo.length < 3 ) {
// evita que novas cidades sejam carregadas
$('#seta-prev-area').attr('onclick', '');
$('#seta-next-area').attr('onclick', ';');
} else {
// evita que novas cidades sejam carregadas
$('#seta-prev-area').attr('onclick', 'javascript:prevImgUF();');
$('#seta-next-area').attr('onclick', 'javascript:nextImgUF();');
}
});
}
else{
$("#res").empty();
}
var existeRes = false;
for(term in results){
$("#res").append("<li>" + results[term] + "</li>");
existeRes = true;
}
}
else if(drew){
$("#res").empty();
}
});
$('#form-busca').submit(function(e) {
var self = this;
var nomePasta = $("#cidade_busca").val();
var pedaco = nomePasta.split(' - ');
e.preventDefault();
// ############################################
var nomeLista = null;
$.ajax({
type:"GET",
url: "_lib/listas-cidades-guias.json",
contentType:"application/x-www-form-urlencoded; charset=utf-8",
dataType:"json",
async:false,
success:function(data){
var indice = "";
var conta = 0;
$.each(data.listas, function(i,obj){
$.each(obj.cidades, function(i2,obj2){
if(normalizarNome(obj2.nome) === normalizarNome(pedaco[0])){
nomeLista = obj.lista;
}
});
});
},
error:function(data){
// console.log("Erro"+ data);
}
});
// ############################################
if ( nomeLista !== null ) {
$("#form-busca").attr("action", "/listas/"+normalizarNome(pedaco[2])+"/");
self.submit();
}
return false;
});
});
// CLASSES
// WINDOW
window.normalizarNome = function(nome) {
var resultado = nome;
var caracteresAcento = {
"Á" : "A", "á" : "a", "É" : "E", "é" : "e", "Í" : "I", "í" : "i",
"Ó" : "O", "ó" : "o", "Ú" : "U", "ú" : "u", "À" : "A", "à " : "a",
"È" : "E", "è" : "e", "Ì" : "I", "ì" : "i", "Ò" : "O", "ò" : "o",
"Ù" : "U", "ù" : "u", "Â" : "A", "â" : "a", "Ê" : "E", "ê" : "e",
"Î" : "I", "î" : "i", "Ô" : "O", "ô" : "o", "Û" : "U", "û" : "u",
"Ä" : "A", "ä" : "a", "Ë" : "E", "ë" : "e", "Ï" : "I", "ï" : "i",
"Ö" : "O", "ö" : "o", "Ü" : "U", "ü" : "u", "Ã" : "A", "ã" : "a",
"Õ" : "O", "õ" : "o", "Ç" : "C", "ç" : "c"
};
for (caracter in caracteresAcento) {
resultado = resultado.replace(caracter, caracteresAcento[caracter]);
}
resultado = resultado.replace(/^\s+/g, "");
resultado = resultado.replace(/\s+$/g, "");
resultado = resultado.replace(/\s+/g, "-");
resultado = resultado.toLowerCase();
resultado = resultado.replace(/[^-a-z0-9+]/g, '');
return resultado;
};
window.gerarNomesListas = function( jsonListas ){
var listas = jsonListas;
var length = listas.length;
var nomesListas = [];
for ( var i = 0 ; i < length ; i++ ) {
var item = listas[i];
var nomeLista = item.lista;
nomesListas.push( nomeLista.toLowerCase());
}
return nomesListas;
};
window.nomesListas = [];
window.listasByUFUsuario = [];
window.listaAutocomplete = [];
// ===================
// LISTAJSON
function ListaJson( ){
this.jsonListas = {};
this.autoComplete = [];
this.cidadeUsuario = '';
this.ufUsuario = '';
this.listasByUFUsuario = '';
this.listasByCidadeUsuario = '';
}
ListaJson.prototype.convertUF = function( UFId ){
/*
** Converte um UF numérico em string
*/
var id = parseInt(UFId);
var string = "";
switch(id){
case 1: string = "AC"; break;
case 2: string = "AL"; break;
case 3: string = "AP"; break;
case 4: string = "AM"; break;
case 5: string = "BA"; break;
case 6: string = "CE"; break;
case 7: string = "DF"; break;
case 8: string = "ES"; break;
case 9: string = "GO"; break;
case 10: string = "--"; break;
case 11: string = "MS"; break;
case 12: string = "--"; break;
case 13: string = "MA"; break;
case 14: string = "MT"; break;
case 15: string = "MG"; break;
case 16: string = "PA"; break;
case 17: string = "PB"; break;
case 18: string = "PR"; break;
case 19: string = "--"; break;
case 20: string = "PI"; break;
case 21: string = "RJ"; break;
case 22: string = "RN"; break;
case 23: string = "--"; break;
case 24: string = "RO"; break;
case 25: string = "RR"; break;
case 26: string = "SC"; break;
case 27: string = "SP"; break;
case 28: string = "SE"; break;
case 29: string = "GO"; break;
case 30: string = "PE"; break;
case 31: string = "TO"; break;
default: string = "--";
}
return string;
};
ListaJson.prototype.setGEO = function(){
/*
** Gera a localização do usuario
*/
var self = this;
var array = [];
$.ajax({
type : "GET",
url : "_lib/geo.php",
dataType : "",
async : false,
success : function( data ){
var string = data;
array = string.split(',');
self.ufUsuario = self.convertUF(array[1]);
self.cidadeUsuario = array[2];
if ( self.ufUsuario === "--" ) {
self.ufUsuario = "SP";
self.cidadeUsuario = "São Paulo";
}
window.localStorage.setItem('cidadeUsuario', self.cidadeUsuario);
window.localStorage.setItem('ufUsuario', self.ufUsuario);
}
});
};
ListaJson.prototype.getGEOUsuario = function(){
/*
** Seta a cidade e UF do usuário
*/
var storage = window.localStorage;
var cidade = storage.getItem( 'cidadeUsuario' );
var UF = storage.getItem( 'ufUsuario' );
if ( cidade !== null && UF !== null ) {
this.cidadeUsuario = cidade;
this.ufUsuario = UF;
} else {
// gera a localização
this.setGEO();
}
};
ListaJson.prototype.getListaCidades = function(){
/*
** Retorna um json com as listas e suas respectivas cidades
*/
var result = {};
$.ajax({
type : "GET",
url : "_lib/listas-cidades-guias.json",
contentType :"application/x-www-form-urlencoded; charset=utf-8",
dataType : "json",
async : false,
success : function(data){
result = data.listas;
}
});
return result;
};
ListaJson.prototype.generateAutocomplete = function( jsonListas ){
/*
** Gera o autocomplete a partir do json de listas
*/
var items = jsonListas;
var array = [];
// monta cada query que será visualizada no autocomplete
for ( var i in items) {
var item = items[i],
cidades = item.cidades,
uf = item.uf,
nomeLista = item.lista;
for ( var j in cidades) {
var cidade = cidades[j].nome;
array.push(cidade + ' - ' + uf + ' - ' + nomeLista);
}
}
// ordena a lista
array.sort(function( a, b ){
if ( a < b ) {
return -1;
}
if ( a > b ) {
return 1;
}
});
return array;
};
ListaJson.prototype.generateJsonByUF = function( ufUsuario ){
/*
** Monta uma lista de dados para serem consumidos pelo carrossel baseado no UF passado
*/
var ufUsuario = ufUsuario;
var lengthJson = this.jsonListas.length;
var arrayListas = [];
var numItems = 0;
for ( var i = 0 ; i < lengthJson ; i++ ) {
var itemJson = this.jsonListas[i];
var ufLista = itemJson.uf;
var nomeLista = itemJson.lista;
if ( ufUsuario === ufLista ) {
var dadosLista = {
nome : nomeLista,
uf : ufLista,
index : numItems++
};
arrayListas.push( dadosLista );
}
}
return arrayListas;
};
ListaJson.prototype.generateJsonByCidade = function( cidadeUsuario ){
/*
** Monta uma lista de dados para serem consumidos pelo carrossel baseado na cidade do usuario
*/
var cidadeUsuario = cidadeUsuario;
var lengthJson = this.jsonListas.length;
var arrayLista = [];
var numItems = 0;
for ( var i = 0 ; i < lengthJson ; i++ ) {
var itemJson = this.jsonListas[i];
var nomeListaItem = itemJson.lista;
var cidadesLista = itemJson.cidades;
var ufLista = itemJson.uf;
var lengthCidades = cidadesLista.length;
for ( var j = 0 ; j < lengthCidades ; j++ ) {
var cidadeLista = cidadesLista[j].nome;
if ( cidadeLista === cidadeUsuario ) {
var dadosLista = {
nome : nomeListaItem,
uf : ufLista,
index : numItems++
};
arrayLista.push( dadosLista );
}
}
}
return arrayLista;
};
// ===================
// SEARCH
function SearchBox( form, input, value ){
this.form = $( form );
this.input = this.form.find( input );
this.value = value;
}
SearchBox.prototype.populateInput = function( inputValue ){
/*
** Insere a cidade do usuário no valor do input
*/
var value = inputValue;
this.input.val( value );
};
SearchBox.prototype.setEvents = function( listaObject, windowObject, carrosselObject ){
/*
** Seta eventos para o item
*/
var self = this;
// INPUT
// limpa o campo
this.input.focus(function(){
self.input.val('');
});
// adiciona o nome da cidade ao campo
this.input.blur(function(){
if ( self.input.val() === '' && self.value.length > 0 ) {
self.input.val( self.value );
}
});
// ===================
// FORM
// comportamento ao clicar no botão laranja do form
this.form.submit(function( e ){
e.preventDefault();
// extrai o texto que está no form
var inputValue = self.input.val();
// verifica se o usuário selecionou um item da <li> ou só digitou
if ( inputValue.indexOf(' - ') > -1 ) {
// faz um split para encontrar o nome da lista
var arrayInputValue = inputValue.split(' - ');
// extrai o nome da lista
var nomeLista = arrayInputValue[2].toLowerCase();
} else {
var nomeLista = inputValue;
}
var lengthListas = window.nomesListas.length;
for ( var i = 0 ; i < lengthListas ; i++ ) {
var nomeListaWindow = window.nomesListas[i];
if ( nomeLista === nomeListaWindow ) {
self.form.attr("action", "/listas/"+window.normalizarNome(nomeLista)+"/");
this.submit();
break;
} else {
}
}
return false;
});
var cache = {};
var drew = false;
var res = $('#res');
// comportamento ao clicar em uma cidade do autoComplete
this.input.on("keyup", function(event){
var query = self.input.val();
if( query.length > 2 ){
if(query in cache){
results = cache[query];
}else{
var results = $.grep(window.listaAutocomplete, function(item){
item = window.normalizarNome(item);
return item.search(RegExp(window.normalizarNome(query), "i")) != -1;
});
cache[query] = results;
}
if(drew == false){
self.input.after('<ul id="res"></ul>');
drew = true;
res.on("click", "li", function(){
// pega o texto do <li> selecionado
var stringAutoComplete = $(this).text();
// insere o texto no input
self.input.val( stringAutoComplete );
// splita para encontrar a cidade
stringAutoComplete = stringAutoComplete.split(' - ');
// encontra a cidade
var stringCidade = stringAutoComplete[0];
var stringUF = stringAutoComplete[1];
// LISTAJSON
// gera uma lista de JSON com listas ref. UF usuario
listaObject.listasByUFUsuario = listaObject.generateJsonByCidade( stringCidade );
// ===================
// WINDOW
// joga o json em um objeto que possa ser acessado por todas as classes
window.listasByUFUsuario = listaObject.listasByUFUsuario;
// ===================
// CARROSSEL
// remove todos os items que estejam no carrosel
carrosselObject.resetCarrossel();
// cria novos elementos
var itemsDOM = carrosselObject.renderHTMLItems( window.listasByUFUsuario, 3 );
// insere alguns items no carrossel
carrosselObject.populate( itemsDOM, 3 );
// renderiza o carrossel
carrosselObject.renderCarrossel();
// copia os items para a classe
carrosselObject.jsonItems = window.listasByUFUsuario;
// ===================
// limpa os <li>
res.empty();
});
} else{
res.empty();
}
var existeRes = false;
for(term in results){
res.append("<li>" + results[term] + "</li>");
existeRes = true;
}
} else if( drew ){
res.empty();
}
});
// ===================
};
// ===================
// CARROSSEl
function Carrossel( container ){
this.container = $( container );
this.items = this.container.find( 'li' );
this.jsonItems = '';
this.prevBtn = $( '#seta-prev-area' );
this.nextBtn = $( '#seta-next-area' );
}
Carrossel.prototype.resetCarrossel = function(){
/*
** Remove todos os items de dentro do carrossel
*/
this.container.find('li').remove();
};
Carrossel.prototype.renderCarrossel = function(){
/*
** Renderiza o carrossel
*/
this.container.roundabout({
responsive : true,
btnPrev : '#seta-prev-area',
btnNext : '#seta-next-area',
startingChild : 0
});
};
Carrossel.prototype.populate = function( itemsDOM, quantidadeItems ){
/*
** Popula o carrossel com as listas
*/
var items = itemsDOM;
var length = items.length;
var quantidade = quantidadeItems;
for ( var i = 0 ; i < length ; i++ ) {
var item = items[i];
if ( i >= quantidade ) {
break;
}
this.container.append( item );
}
};
Carrossel.prototype.renderHTMLItems = function( itemsJson, quantidadeItems ){
/*
** Renderiza uma lista de items
*/
var items = itemsJson;
var length = items.length;
var quantidade = quantidadeItems;
var listItems = [];
var lastIndex = (length-1);
for ( var i = 0 ; i < length ; i++ ) {
var index = i;
// renderiza somente a quantidade necessária
if ( i >= quantidade ) {
break;
}
// renderiza o último item da lista
if ( i === (quantidade-1) ) {
var item = items[lastIndex];
index = lastIndex;
// renderiza os demais items
} else {
var item = items[i];
}
var itemDOM = this.renderHTMLItem( item, index );
listItems.push( itemDOM );
}
return listItems;
};
Carrossel.prototype.renderHTMLItem = function( itemJson, index ){
/*
** Renderiza uma lista
*/
var item = itemJson;
var dados = {
id : 0,
nomeLista : item.nome,
nomeListaNormalizado : window.normalizarNome( item.nome ),
ufLista : item.uf,
dataLista : index
};
if ( dados.dataLista === 0 ) {
dados.id = 'current';
} else if ( dados.dataLista === 1 ) {
dados.id = 'next';
} else {
dados.id = 'prev';
}
var template = '<li>'+
'<a href="/listas/'+dados.nomeListaNormalizado+'/" target="_listas" title="'+dados.nomeLista+' - '+dados.ufLista+'">'+
'<img src="/listas/'+dados.nomeListaNormalizado+'/content/thumbs/capa1.png" onerror="imgError(this);" id="'+dados.id+'" data-lista="'+dados.dataLista+'"/>'+
'<div class="nome">'+dados.nomeLista+'</div>'+
'</a>'+
'</li>';
var itemDOM = $( template );
return itemDOM;
};
Carrossel.prototype.rotateNext = function(){
/*
** Rodaciona os items do carrossel para direita
*/
var nextItem = '';
var nextItemID = 0 ;
var nextItemImagem = '';
var prevItem = '';
var prevItemNome = '';
var prevItemImagem = '';
var prevItemLink = '';
var currItemImagem = '';
var lastIndex = 0 ;
var nomeListaNormalizado = '';
var pathLista = '';
var caminhoImagem = '';
// encontra os items do carrossel
// PREV
prevItem = this.container.find('#prev').parent();
prevItemNome = prevItem.find('.nome');
prevItemLink = prevItem.find('a');
prevItemImagem = prevItem.find('img');
// CURR
currItemImagem = this.container.find('#current');
// NEXT
nextItem = this.container.find( '#next' ).parent();
nextItemImagem = nextItem.find('img');
nextItemID = Number( nextItemImagem.attr( 'data-lista' ) );
lastIndex = this.jsonItems.length;
// gera o próximo ID
nextItemID++;
// pula para o 1º item da lista caso o último já tenha sido carregado
if ( nextItemID === lastIndex ) {
nextItemID = 0;
}
// trata as variaveis para substituir no HTML
nomeListaNormalizado = window.normalizarNome( this.jsonItems[nextItemID].nome );
pathLista = '/listas/'+nomeListaNormalizado;
caminhoImagem = pathLista+'/content/thumbs/capa1.png';
// substitui os dados
// PREV
prevItemLink.attr( 'href', pathLista );
prevItemLink.attr( 'title', this.jsonItems[nextItemID].nome );
prevItemImagem.attr( 'src', caminhoImagem);
prevItemNome.text( this.jsonItems[nextItemID].nome );
prevItemImagem.attr( 'data-lista', nextItemID );
prevItemImagem.attr('id', 'prevToNext');
// CURR
currItemImagem.attr('id', 'prev');
// NEXT
nextItemImagem.attr('id', 'current');
// PREV
prevItemImagem.attr('id', 'next');
};
Carrossel.prototype.rotatePrev = function(){
/*
** Rodaciona os items do carrossel para esquerda
*/
var prevItem = '';
var prevItemID = 0 ;
var prevItemImagem = '';
var nextItem = '';
var nextItemNome = '';
var nextItemImagem = '';
var nextItemLink = '';
var currItemImagem = '';
var lastIndex = 0 ;
var nomeListaNormalizado = '';
var pathLista = '';
var caminhoImagem = '';
var firstIndex = 0;
// encontra os items do carrossel
// NEXT
nextItem = this.container.find('#next').parent();
nextItemNome = nextItem.find('.nome');
nextItemLink = nextItem.find('a');
nextItemImagem = nextItem.find('img');
// CURR
currItemImagem = this.container.find('#current');
// PREV
prevItem = this.container.find( '#prev' ).parent();
prevItemImagem = prevItem.find('img');
prevItemID = Number( prevItemImagem.attr( 'data-lista' ) );
firstIndex = -1;
lastIndex = (this.jsonItems.length - 1);
// gera ID anterior
prevItemID--;
// pula para o 1º item da lista caso o último já tenha sido carregado
if ( prevItemID === firstIndex ) {
prevItemID = lastIndex;
}
// trata as variaveis para substituir no HTML
nomeListaNormalizado = window.normalizarNome( this.jsonItems[prevItemID].nome );
pathLista = '/listas/'+nomeListaNormalizado;
caminhoImagem = pathLista+'/content/thumbs/capa1.png';
// substitui os dados
// NEXT
nextItemLink.attr( 'href', pathLista );
nextItemLink.attr( 'title', this.jsonItems[prevItemID].nome );
nextItemImagem.attr( 'src', caminhoImagem);
nextItemNome.text( this.jsonItems[prevItemID].nome );
nextItemImagem.attr( 'data-lista', prevItemID );
nextItemImagem.attr('id', 'nextToNext');
// CURR
currItemImagem.attr('id', 'next');
// PREV
prevItemImagem.attr('id', 'current');
// NEXT
nextItemImagem.attr('id', 'prev');
};
Carrossel.prototype.setEvents = function(){
/*
** Seta eventos para o item
*/
var self = this;
var lengthItems = this.jsonItems.length;
// habilita a ação de next e prev aos botoes do carrossel
// if ( lengthItems >= 3 ) {
this.prevBtn.click(function(e){
// funcao que faz a rotacao
self.rotatePrev();
e.preventDefault();
return false;
});
this.nextBtn.click(function(e){
// funcao que faz a rotacao
self.rotateNext();
e.preventDefault();
return false;
});
// }
};
// ===================
// ===================
Object.keys = Object.keys || (function () {
var hasOwnProperty = Object.prototype.hasOwnProperty,
hasDontEnumBug = !{toString:null}.propertyIsEnumerable("toString"),
DontEnums = [
'toString',
'toLocaleString',
'valueOf',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'constructor'
],
DontEnumsLength = DontEnums.length;
return function (o) {
if (typeof o != "object" && typeof o != "function" || o === null)
throw new TypeError("Object.keys called on a non-object");
var result = [];
for (var name in o) {
if (hasOwnProperty.call(o, name))
result.push(name);
}
if (hasDontEnumBug) {
for (var i = 0; i < DontEnumsLength; i++) {
if (hasOwnProperty.call(o, DontEnums[i]))
result.push(DontEnums[i]);
}
}
return result;
};
})();
if (!(window.console && console.log)) {
(function() {
var noop = function() {};
var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];
var length = methods.length;
var console = window.console = {};
while (length--) {
console[methods[length]] = noop;
}
}());
}
function imgError(image) {
image.onerror = "";
image.src = "images/listas/default.png";
return true;
} // imgError()
$(document).ready(function(){
// SCRIPT
// LISTAJSON
var lista = new ListaJson();
// puxa as listas do banco
lista.jsonListas = lista.getListaCidades();
// gera o autocomplete com as cidades
lista.autoComplete = lista.generateAutocomplete( lista.jsonListas );
// seta a geo location do usuario
lista.getGEOUsuario();
// gera uma lista de JSON com listas ref. UF usuario
lista.listasByUFUsuario = lista.generateJsonByUF( lista.ufUsuario );
// ===================
// WINDOW
// joga o json em um objeto que possa ser acessado por todas as classes
window.nomesListas = window.gerarNomesListas( lista.jsonListas );
window.listasByUFUsuario = lista.listasByUFUsuario;
window.listaAutocomplete = lista.autoComplete;
// ===================
// CARROSSEL
// instancia o carrossel
var carrossel = new Carrossel( '.carrossel' );
// monta o HTML dos items
var itemsDOM = carrossel.renderHTMLItems( window.listasByUFUsuario, 3 );
// remove todos os items que estejam no carrosel
carrossel.resetCarrossel();
// insere alguns items no carrossel
carrossel.populate( itemsDOM, 3 );
// renderiza o carrossel
carrossel.renderCarrossel();
// copia os items para a classe
carrossel.jsonItems = window.listasByUFUsuario;
// habilita os eventos do item
carrossel.setEvents();
// ===================
// SEARCH
var valorParaInputSearch = lista.cidadeUsuario + ' - ' + lista.ufUsuario;
var search = new SearchBox( '#form-busca', '#cidade_busca', valorParaInputSearch );
search.populateInput( search.value );
search.setEvents( lista, window, carrossel );
// ===================
// ===================
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment