kiki
/
dati_prodotti


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
							/*
 *  Codice javascript per l'applicazione
 */

// All'interno del file index.html il luogo migliore per inserire ed eseguire il codice javascript
// è l'header della pagina, all'interno del tag <head>. Ma effettuare subito operazioni sul DOM all'interno
// del tag <body> prima ancora che sia caricato interamente non è una buona idea...
// 
// Inseriamo quindi tutto il codice in una funzione di callback e passiamola come argomento alla funzione speciale di jQuery, "$()".
// La nostra funzione sarà così eseguita automaticamente non appena il caricamento della pagina sarà completato
// e il DOM pronto per essere manipolato.
//
$(function() {

	// La libreria d3 espone un oggetto accessibile globalmente: d3.
	// L'uso della libreria d3 richiede quindi l'esecuzione opportuna dei metodi dell'oggetto d3.
	// 
	// In questo caso il metodo select([selettore]) seleziona l'elemento in base al selettore passato ("body")
	// e ritorna un oggetto "selezione" (assegnato alla variabile "container").
	//
	// Una selezione d3 a sua volta possiede il metodo append([tag]) che crea un nuovo
	// nodo del tipo specificato ("div") nel DOM all'interno del nodo selezionato in precedenza ("body").
	//
	// Anche append() torna una selezione (questa volta "div", non più "body"), 
	// per cui è possibile accedere immediatamente al metodo attr([string],[string])
	// sfruttando un pattern di programmazione noto con il nome di chaining. La stringa passata come secondo argomento
	// ("container-fluid") viene dunque inserita come classe all'interno dell'attributo "class" del nodo selezionato ("div").
	//
	// Creiamo subito un contenitore della pagina, figlio del body per usare al meglio bootstrap.
	// 
	var container = d3.select("body")
		.append("div")
		.attr("class","container-fluid");

	// Inseriamo il titolo in un contenitore che funga da "header" con classe "row", sempre per sfruttare bootstrap.
	var header = container.append("header") // Definiamo semanticamente le parti della pagina con i nuovi tag dell'HTML5
		.attr("class","row page-header");
		
	// Rendiamo il tutto ricercabile mediante shufflejs attraverso un campo di input testuale
	header.append("nav")
		.append("input")
		.attr("id","search")
		.attr("class","center-block input-lg")
		.attr("placeholder","Cerca per produttore, mercato o prodotto")
		.attr("value","");

	// Abbiamo ora bisogno di dati memorizzati in un file tsv (Tab-separated values),
	// per cui dobbiamo recuperarli con una chiamata AJAX. Il metodo tsv([url], callback) di d3
	// pensa a tutto: chiamata asincrona, gestione della risposta (evetuali errori in "error" e parsing dei dati testuali
	// dal tsv a un array di oggetti (passato in "data").
	// 
	d3.tsv("data/prodotti.csv", function(error, data) {

		// Gestione di eventuali errori (es. file non trovato, ecc.),
		// se c'è qualche problema l'esecuzione si blocca e viene notificato un messaggio in console.
		if (error) {
			throw "Error in loading data...";
		}

		// Assicuriamoci che tutto sia ordinato per numero di albo (e quindi per data di uscita)
		// e per ora limitiamoci ai primi 20 albi per non sovraccaricare di richieste il server della Bonelli
		// (le immagini sono linkate direttamente dal sito ufficiale).
		//
		/*data = data.sort(function(a,b) { // Il metodo sort() passa alla callback una coppia di elementi
				// Bisogna indicare dei due elementi quale viene prima e quale dopo,
				// in questo ci aiuta un metodo di d3 già predisposto allo scopo per semplici ordinamenti.
				// 
				// Ovviamente dobbiamo confrontare il valore degli attributi "Numero" degli oggetti "a" e "b" e non gli oggetti in sé
				// e prima di farlo li convertiamo a interi (inizialmente sono letti come stringhe) anteponendo un "+".
				return d3.ascending(+a["Numero"],+b["Numero"]); 
			}).slice(0,20); // Il metodo slice() applicato a un array prende 20 elementi consecutivi a partire dal numero 0 (il primo)
*/
		// Per aggiungere la funzionalità di autocomplete al form di ricerca,
		// ricaviamo la lista dei nomi di tutti gli autori degli albi.
		// Soggetto        Sceneggiatura   Disegni Copertina
		var authors = _.uniq(_.flatten(data.map(function(el) { 
				var groups = [];
				return groups
					.concat(el["Nome"].split(","))
					.concat(el["Prodotto"].split(","))
					.concat(el["Mercati"].split(","));
			})));

		// Qui uno dei pilastri concettuali della libreria d3:
		// prendiamo la variabile container (è una selezione del div contenitore globale), poi selezioniamo tutti gli elementi "div"
		// in esso contenuti con il metodo selectAll([selettore]). 
		// Inizialmente non ce ne sono, quindi la selezione è vuota, ma esiste.
		//
		// A questa selezione (vuota) associamo il nostro array per posizione con il metodo data([array]): 
		// il primo oggetto con il primo div (che non esiste), 
		// il secondo oggetto con il secondo div (che sempre non esiste), ecc.
		//
		// Il metodo enter() opera la magia: esegue tutto ciò che viene dopo tante volte quanti sono i dati
		// che non sono stati assegnati ad alcun elemento del DOM, nel nostro caso tutti. Per cui append("div")
		// viene eseguito per tutti i dati e così vengono creati nel DOM tanti paragrafi quanti sono i dati
		// e a essi vengono associati in ordine i dati uno a uno.
		//
		// Il metodo append("div") torna una selezione, per cui possiamo subito impostare gli attributi e i contenuti dei div,
		// che non sono fissi, ma dipendono dai dati: la funzione di callback, infatti, viene eseguita passandole
		// il dato associato all'elemento corrente: "d" è un oggetto che rappresenta una riga del dataset originario
		// (una riga del file tsv), con le chiavi uguali ai nomi delle colonne e i valori quelli delle celle della riga.
		//
		// Questa funzione di callback deve ritornare un valore compatibile con il metodo che l'ha chiamata: nel nostro caso
		// per lo più stringhe con cui valorizzare gli attributi nominati.
		//
		var albi = container.append("section")
			.attr("id","grid")
			.attr("class","row page-body") // Dopo l'header, un'altra "row", ma con classe "body"
			.selectAll("div") // La selezione dei "div" contenitori viene assegnata alla variabile "albi" e poi riutilizzata successivamente.	
			.data(data)
			.enter()
			.append("div")
			.attr("class","comics-container col-lg-1 col-md-1 col-sm-2 col-xs-3") // Associamo una classe ai div contenitori degli albi per sfruttare la grid di bootstrap che ci assicura la responsiveness
			.attr("data-groups", function(d) { // Shufflejs effettua il filtro su categorie personalizzate che vanno definite nell'attributo data-groups
				var groups = [];
				// Nel nostro caso le categorie sono i nomi degli autori e devono comparire come json di un array di stringhe: ["nome1","nome2",...]
				// Sappiamo però che nelle nostre colonne ci possono essere più nomi, che divideremo in un array con split() usando la virgola come separatore.
				// Non possiamo tornare però un array, perché l'attributo si aspetta una stringa, per cui... stringify, non prima di aver eliminato dall'array
				// gli elementi duplicati.
				return JSON.stringify(_.uniq(groups.concat(d["Nome"].split(",")).concat(d["Prodotto"].split(",")).concat(d["Mercati"].split(",")))).replace(/"/g,"'");
			})
			.attr("data-title", function(d) { // Perché allora non inserire tutte e informazioni negli attributi data-?
				return d["Prodotto"].replace(/"/g,"");
			})
			.attr("data-summary", function(d) {
				return d["Nome"].replace(/"/g,"");
			})
			.append("article") // Perché due div uno dentro l'altro? Perché vogliamo il bordo di ogni elemento e una certa distanza tra l'uno e l'altro
			.attr("class","comics");
		
		// Da qui in poi tutti gli elementi vanno creati all'interno dei div contenitori creati precedentemente.
		// La variabile "albi" è un array e tutti i metodi invocati si applicano a tutti gli elementi dell'array.
		// Noi lo scriviamo una sola volta, ma il tutto è eseguito per tutti gli elementi, tanti quanti sono i dati.
	
		albi.append("figure")
			.append("a") // Questa volta inseriamo nel DOM un link alla scheda dell'albo sul sito ufficiale
			.attr("href", function(d) { // L'URL del link va inserita nell'attributo "href" mediante il metodo "attr"
				return d["Immagine"];
				//return d["Scheda"];
			})
			.attr("target","_blank") // Il link si apre in un'altra finestra
			.attr("data-lightbox","cover")
			.attr("data-title", function(d) {
				return d["Descrizione"].replace(/"/g,"");
			})
			.append("img") // Ora l'append è consecutivo al precedente, quindi agisce su "a" (non su "div"), inserendo al suo interno un'immagine
			.attr("class","cover img-responsive center-block") // Associamo la classe "cover" e alcune classi utili definite da bootstrap
			.attr("src", function(d) { // La sua URL va inserita nell'attributo "src" mediante il metodo "attr"
				return "./images/"+d["Prodotto"]+".svg";
			})
			.attr("title", function(d) {
				return d["Prodotto"];
			});

		/*albi.append("footer")
			.append("p")
			.attr("class","date")
			.html(function(d) {
				return '<a href="'+d["Scheda"]+'" target="_blank">'+d["Nome"]+'</a>';
			});*/

		// E infine un footer a chiudere la pagina
		container.append("footer")
			.attr("class","row page-footer")
			.append("figure")
			.append("a")
			.attr("href","http://www.campiaperti.org/")
			.attr("target","_blank");

		//
		// Il DOM è pronto con tutti gli elementi
		// Ora possiamo agire su quegli elementi, inizializzando la grid dei comics con shufflejs
		//
		$("#grid").shuffle({
			itemSelector: ".comics-container"
		});

		// Attacchiamo una funzione di callback a un evento del form di input: viene eseguita ogni volta che il contenuto cambia
		// a causa della digitazione di un testo all'interno da parte dell'utente
		$("#search").on('keyup change', function() { // Eventi "rilascio di un pulsante della tastiera" e "cambio del contenuto"
			// Effettuando una ricerca in data-groups è necessario ripulire un po' sia le stringa di ricerca
			// (ignorando per esempio le maiuscole e altri caratteri non letterali) che quella in cui viene effettuata
			// la ricerca (che è il json di un array di stringhe)
			var val = this.value.toLowerCase().replace(/[^a-z] /g,""); // Il valore digitato corrente
			$('#grid').shuffle('shuffle', function($el, shuffle) {
				// La funzione viene valutata per ogni elemento della grid:
				// se vera l'elemento viene tenuto, altrimenti viene nascosto
			 	return $el.data('groups').toLowerCase().indexOf(val) > -1;
			});
		});

		$("#search").autocomplete({
			source: authors
		});

	});
});