var galeria = [
{ persona:"Albert Schweitzer",
frase:"LA EDAD ARRUGA LA PIEL, PERO RENUNCIAR AL ENTUSIASMO ARRUGA EL ALMA.",
foto:"http://3.bp.blogspot.com/-l27q8uogOdI/Uf_JL6M4CDI/AAAAAAAACM8/fN05Sls14uA/s1600/albert-schweitzer3.jpg"
},
{ persona:"Cristóbal Jodorowsky Trumblay",
frase:"UN CONFLICTO NO RESUELTO ES COMO UN DISCO RAYADO, IMPIDE QUE PASEMOS A LA SIGUIENTE MELODÍA.",
foto:"https://i.ytimg.com/vi/mAwmS4lRVso/hqdefault.jpg"
},
{ persona:"Peter Ferdinand Drucker (1909-2005)",
frase: "EL TIEMPO ES EL RECURSO MÁS ESCASO Y SI NO LO CONTROLAS, NADA MÁS VAS A PODER CONTROLAR.",
foto:"http://2.bp.blogspot.com/-HpzMQ_ibP_c/T1edb3BJdRI/AAAAAAAABYc/iQPGVhHFRcQ/s1600/peter-drucker.jpg"
},
{ persona:"José Alberto Mújica Cordano (1935)",
frase:"YO NO SOY POBRE PORQUE SOY RICO EN LIBERTAD. VIVO EN LA RIQUEZA PORQUE DOY MUCHÍSIMO.",
foto:"http://www.radiorebelde.cu/images/images/mundo/josemujica-presidente-uruguay.jpg"
},
{ persona:"Karl Raimund Popper (1902-94)",
frase:"LA VERDADERA IGNORANCIA NO ES LA AUSENCIA DE CONOCIMIENTOS, SINO EL HECHO DE NEGARSE A ADQUIRIRLOS.",
foto:"https://s-media-cache-ak0.pinimg.com/736x/25/77/3b/25773bfe30e0a190e24d72450808dded.jpg"
},
{ persona:"Jorge Luis Borges (1899-1986)",
frase:"YO CREO QUE HABRÍA QUE INVENTAR UN JUEGO EN EL QUE NADIE GANARA.",
foto:"http://www.apocatastasis.com/images/borges-2.jpg"
}
];
var t, actual, datos, persona, frase, foto, galeriaNueva;
function select(i){
actual = i;
$("nav a")
.removeClass("on off")
.addClass(function(j){return(j===i)?"on":"off";});
persona.html(galeriaNueva[i].persona);
frase.html(galeriaNueva[i].frase);
foto.attr("src", galeriaNueva[i].foto);
clearTimeout(t);
t = setTimeout( function(){select((i + 1) % galeriaNueva.length);}, 2000);
}
function generar_selector(){ // regenera la botonera
var selector = $("#selector");
selector.html("");
galeriaNueva.forEach(function(elem,i) {
selector.append("
");
});
}
function cerrar_Editar() {
datos.css("display", "none");
}
function actualizar_localStorage() {
//actualizamos el localStorage
localStorage.setItem("citas", JSON.stringify(galeriaNueva));
}
/* ------------ESTA ES LA PARTE MÁS IMPORTANTE DE TODO EL EJERCICIO --------------
pasamos la galería original a la de maniobra, es decir, la que usaremos
OJO, lo hacemos copiando por valor, de otro modo, se copia la referencia y lo que cambiemos en maniobra se cambia en el original.
Cuando se clonan valores primitivos, estos se copian, pero cuando se clonan objetos como es en este caso, los pasa por referencia. Así que hay que usar JSON o JQuery.extend Esto es válido para clonados profundos de objetos no complejos, para los complejos, hay que hacer una función que se adapte a ese objeto en concreto.
https://jherax.wordpress.com/2014/07/20/js-clonando-objetos/
*/
function inicializar_Datos() {
galeriaNueva = JSON.parse(JSON.stringify(galeria.slice(0)));
}
$(function() {
//asignamos DOM a variables
datos = $("#datos");
persona = $("#persona");
frase = $("#frase");
foto = $("#foto");
inicializar_Datos(); //cargamos los datos en la galeria que usaremos
// ------ Gestionamos la carga de las citas en localStorage ------------
/* guardar la base de datos serializada en JSON en localStorage, de forma que al cargar la aplicación en un navegador, está deberá detectar si existe una base de datos de citas almacenada en localStorage y si es así deberá presentar está en vez de las citas de la galería incluidas en el código de la aplicación.*/
//estas líneas inicializan o crean la variable citas en localStorage
var comprobar = localStorage.getItem("citas");
if (comprobar === null) { //no existe la propiedad en localStorage
actualizar_localStorage(); //la creamos
} else {
//existe la propiedad en localStorage, recuperamos su contenido con JSON
galeriaNueva = JSON.parse(localStorage.getItem("citas"));
}
// ---------------------------------------------------------------------
generar_selector(); //cargamos los datos en pantalla
//al pulsar click sobre el botón de inicializar se regeneran las citas iniciales de la aplicación, eliminando los cambios introducidos. Se debe pedir confirmación, avisando de lo que se va a hacer
$("#inicializar").on("click", function() {
clearTimeout(t); //paramos el carrusel
if (confirm("Va a borrar todos los cambios y citas nuevas añadidas a la Aplicación. \n ¿Está seguro?") == true) {
inicializar_Datos(); //cargamos los datos originales
actualizar_localStorage(); //actualizamos el localStorage
generar_selector(); //regenera la pantalla
select(0); //inicia desde la primera cita
} else {
select(actual); //continuamos el carrusel donde estabamos
}
});
$("#abrirEditar").on("click", function() {
clearTimeout(t); //paramos el carrusel
$("#persona_d").html(galeriaNueva[actual].persona);
$("#frase_d").html(galeriaNueva[actual].frase);
$("#foto_d").html(galeriaNueva[actual].foto);
datos.css("display", "block"); //mostramos la zona de edición
});
//control del botón de cierre de la sección "datos"
$("#cerrarEditar").on("click", function() {
cerrar_Editar();
select(actual);
});
$("#nuevo").on("click", function() {
datos.css("display", "none"); //ocultamos la zona de edición
actual = galeriaNueva.push({
persona: $("#persona_d").html(),
frase: $("#frase_d").html(),
foto: $("#foto_d").html()
}) - 1;
actualizar_localStorage(); //actualizamos el localStorage
generar_selector(); //regenera la pantalla
select(actual); //reinicia desde la posición actual
});
$("#borrar").on("click", function() {
if (confirm("Va a borrar un registro \n ¿Está seguro?") == true) {
galeriaNueva.splice(actual, 1); //borra la posición actual
actualizar_localStorage(); //actualizamos el localStorage
generar_selector(); //regenera la pantalla
select(0); //inicia desde el primero
cerrar_Editar();
} else {
alert("Operación cancelada");
}
});
$("#guardar").on("click", function() {
galeriaNueva.splice(actual,1,{persona: $("#persona_d").html(), frase: $("#frase_d").html(), foto: $("#foto_d").html()});
actualizar_localStorage(); //actualizamos el localStorage
generar_selector(); //regenera la pantalla
select(actual); //continuamos carrusel donde estabamos
cerrar_Editar();
});
select(0); //iniciamos el programa con la primera cita
});