Collezione di Sali
(2015-10-03, 23:58)TrevizeGolanCz Ha scritto: In pratica dovrei creare tante copie del codice che sopra hai riportato, una per ogni sale, ed inserendo i dai opportuni AUTOMATICAMENTE il sale viene inserito nella casella opportuna.
In tal modo mi risparmio le centinaia di righe di codice "vuote" atte solo a contenere una casella nera.
Ho capito giusto?
Sì, ma la parte "AUTOMATICAMENTE" si ottiene scrivendo una valanga di Javascript che generi tutto l'HTML necessario a partire dalle copie di quel codice, quindi...

(2015-10-03, 23:58)TrevizeGolanCz Ha scritto: Si può anche fare, l'unica cosa che "mi interessa" è che ciò non comporti modifiche pesanti delle varie funzioni in javascript che ho inserito, perchè far dipendere l'img grande dall'icona e dal grado di idratazione è stato un po' un parto per me XD.
...c'è da fare qualche pesante modifica *Si guarda intorno*

Ho visto quelle funzioni ma non ho capito come funzionano, ma già capire il codice che io stesso ho scritto a distanza di una settimana è difficile, figuriamoci quello altrui asd
Comunque anche lì ci sono molte righe copiate e incollate, probabilmente si possono compattare con opportune funzioni, for() e passaggi di parametri a destra e a manca; poi bisogna anche trovare il modo di dedurre dall'array dei sali quali sono gli stati di idratazione esistenti per modificare i parametri da passare a destra e a manca: bisogna manipolare un po' di oggetti e array, oppure modificare da subito il formato, ma diventa meno generico e prima o poi si arriva al punto in cui avere un formato non abbastanza generico è limitante...
Nel mezzo di tutto questo, c'è anche da considerare che per generare l'HTML è fortemente consigliabile usare le funzioni del DOM, che non sono esattamente intuitive, e quindi giù a leggere guide e cercare esempi per indurle a cooperare asd

Non ho esattamente idea di quanto sia difficile fare tutto ciò, dovrei provare a realizzare almeno in parte quello che ho descritto; lo farò nel breve termine ma non so di preciso quando avrò tempo...
Nel frattempo si possono ridimensionare le foto, che è sicuramente un lavoro utile, e completare\rifinire\ripulire la grafica\funzionalità\codice della tabella, anche riducendola temporaneamente a 3x3 per non modificare centinaia di righe se c'è da modificare qualcosa. Partendo da quella posso provare a scrivere le varie funzioni Javascript per generare l'HTML e metterci i dati opportuni, quindi è utile vedere com'è il codice del prodotto finito "in piccolo": l'importante è sapere esattamente quali parti di codice HTML e in che punto cambiano in che modo da una cella all'altra, a fare il lavoro di ripeterlo centinaia di volte ci penserà lo script asd
La tua firma è old e molto 2010... [cit. myttex]
Cita messaggio
Domani risponderò in modo più esauriente.

Comunque ti manderò il file HTML "pulito" e con una tab 3x3 senza i codici che aggiunge in automatico Tumblr e ti illustrerò le funzioni che ho usato (che anche io ho ormai dimenticato XD).
8-)  Tanto vetro zero reagenti 8-)
Cita messaggio
In tutto ho inserito 4 funzioni con Javascript:

funzione Acqua(U,D,O,K) e funzioneAcqua2(Z) sono strettamente legate alla funzione Conferma.
Il valore di default della funzione è "D" ("document.modulo.acqua.value = D"), ma cliccando sull'icona il valore cambia in (U,D,O,K) ed in (Z) per i composti che hanno un solo grado di idratazione.

La funzione Conferma invece viene avviata solamente premendo uno dei pulsanti.
Premendolo il valore di document.modulo.acqua.value viene visionato e parte la funzione showImage per il cambio dell'immagine grande.

funzione ShowImage: cliccando un'icona document.images[Image_Name].src = "indirizzo http immagine" ;Image_Name = "SHOWPAD".
 Il tag "SHOWPAD" designa l'immagine che verrà sostituita ossia quella grande.

funzione cambiaBackground(id): le icone sono raggruppate in gruppi con vari id, ogni id corrisponde al numero ed a quali gradi di idratazione che quei composti possiedono.
Premendo un'icona  la funzione  visiona l'id dell'icona premuta ed a seconda del suo valore cambia il background dei pulsanti in modo da da mettere in evidenza solo i gradi di idratazione disponibili per quel composto. Ho dovuto fare copia-incolla perchè altrimenti quando cambiavo composto non veniva reimpostato il background originale e quindi ho dovuto inserire tutte quelle righe di codice in modo che resettasse tutto, se hai qualche consiglio non aspetto altro :-).

Mancano le copie della funzione Conferma, difatti per come è strutturato adesso qualsiasi pulsante attiva la funzione Conferma, invece dovrò introdurre Conferma2 per il pulsante 2, Conferma3 per il pulsante 3 ecc...

Non vorrei modificare più di tanto questa funzione perchè il numero di composti che avranno più gradi di idratazione, e quindi usufruiranno della funzione Conferma, saranno veramente pochi, quindi non ha senso spaccarsi in 2 per qualcosa che non creerà tanti problemi dato che i dati da gestire saranno pochi.
Altro discorso invece per centinaia di righe che ho copiato incollato XD

In allegato ti invio il file html funzionante della pag per come è adesso (ho eliminato qualcosina che non serviva come parte del codice della funzione showImage, risolto servendomi del file css, era solo un problema estetico) ed una versione con solo una tab 3x3 come mi hai chiesto.
Ps. <h3></h3> l'ho lasciato ma solo perchè è di interesse per il css, devo solo "asportare" le sue proprietà in <li> o in qualcos altro, in pratica nella versione finale non ci sarà XD.
Ps.2 nella versione 3x3 ho aggiunto float:left dove serviva  per non dover modificare le dimensioni della finestra (pigrizia).

Rar contenente le 2 pagine in HTML

.rar  paginahtml.rar (Dimensione: 5.37 KB / Download: 28)
8-)  Tanto vetro zero reagenti 8-)
Cita messaggio
[-] I seguenti utenti ringraziano TrevizeGolanCz per questo post:
Kokosekko
(2015-10-05, 13:44)TrevizeGolanCz Ha scritto: funzione Acqua(U,D,O,K) e funzioneAcqua2(Z) sono strettamente legate alla funzione Conferma.
Il valore di default della funzione è "D" ("document.modulo.acqua.value = D"), ma cliccando sull'icona il valore cambia in (U,D,O,K) ed in (Z) per i composti che hanno un solo grado di idratazione.
L'IDE mi dice che i parametri U, O e K di Acqua() sono inutilizzati, in effetti la funzione riceve in input quei 4 parametri, poi accede a document.modulo.acqua e imposta value al valore che ha ricevuto come 2° parametro (D); dopodiché termina, senza fare nulla con U, O e K.

Per il resto, finalmente mi è chiaro come funziona il tutto asd

(2015-10-05, 13:44)TrevizeGolanCz Ha scritto: funzione cambiaBackground(id): le icone sono raggruppate in gruppi con vari id, ogni id corrisponde al numero ed a quali gradi di idratazione che quei composti possiedono.
Premendo un'icona  la funzione  visiona l'id dell'icona premuta ed a seconda del suo valore cambia il background dei pulsanti in modo da da mettere in evidenza solo i gradi di idratazione disponibili per quel composto. Ho dovuto fare copia-incolla perchè altrimenti quando cambiavo composto non veniva reimpostato il background originale e quindi ho dovuto inserire tutte quelle righe di codice in modo che resettasse tutto, se hai qualche consiglio non aspetto altro :-).
Il metodo più semplice che mi viene in mente è fare un for() che reimposta tutti i background dei submit all'inizio della funzione, poi impostare di colore diverso solo quelli dei gradi di idratazione presenti per quel composto.
Quando arriverò a rifare quella parte farò così, per ora ho creato il pezzo di codice che passa dall'array di oggetti in "formato standard" a una tabella HTML.
In pratica quello che ho fatto finora è stato scrivere queste 214 righe (di cui 100 di commenti o vuote):

Codice:
var Tabella = {
    /**
     * @typedef {object} formatostandard
     * @property {string} nome
     * @property {string} catione
     * @property {string} anione
     * @property {number} idratazione stato di idratazione
     * @property {string} foto_grande URL della foto 300x300
     * @property {string} foto_piccola URL della foto 100x100
     * @property {string} thread URL del thread
     */

    _dati: [],

    /**
     * Genera l'HTML.
     *
     * @param {formatostandard[]} dati array di oggetti nel formato standard
     * @param {HTMLElement} dove dove infilare la tabella
     */
    generaHTML: function(dati, dove) {
        var anioni = [];
        var cationi = [];
        var i, j;

        var len = dati.length;
        for(i = 0; i  < len; i++)  {
            if(anioni.indexOf(dati[i].anione) < 0) {
                anioni.push(dati[i].anione);
            }
            if(cationi.indexOf(dati[i].catione) < 0) {
                cationi.push(dati[i].catione);
            }

            var tab = document.createElement("div");
            tab.id = "tabella";

            var angolo = document.createElement("div");
            angolo.classList.add("header-cationi");
            angolo.classList.add("header-anioni");
            tab.appendChild(angolo);

            var clen = cationi.length;
            for(i = 0; i < clen; i++) {
                tab.appendChild(this._generaCellaHeader("header-cationi", cationi[i]));
            }

            var alen = anioni.length;
            var sali = [];
            var sale, nuovosale, slen, k;

            for(i = 0; i < clen; i++) {
                for(j = 1; j < alen; j++) {
                    if(j === 0) {
                        tab.appendChild(this._generaCellaHeader("header-anioni", anioni[j]));
                    } else {
                        sale = this._trovaQuelSale(anioni[i], cationi[j], dati);
                        slen = sale.length;
                        if(slen === 0) {
                            this._generaCella();
                        } else {
                            nuovosale = {};
                            for(k = 0; k < slen; k++) {
                                nuovosale[sale.idratazione] = {
                                    nome: sale.nome,
                                    anione: sale.anione,
                                    catione: sale.catione,
                                    foto: sale.foto_grande,
                                    thread: sale.thread
                                }
                            }
                            this._generaCella(sale[0].foto_piccola, sali.push(nuovosale) - 1);
                        }
                    }
                }
            }

            tab.dataset.sali = JSON.stringify(sali);
            dove.appendChild(tab);
        }
    },

    /**
     * Inizializza una tabella già generata, creando handler e roba varia.
     *
     * @param {Element} tab la tabella (#tabella, generalmente)
     */
    init: function(tab) {
        var that = this;
        this._dati = JSON.parse(tab.dataset.sali);
        tab.removeAttribute('data-sali');

        tab.addEventListener('click', function(ev) {
            var t = ev.target.dataset.id;

            if(typeof t !== 'undefined') {
                // TODO: finire.
                alert(JSON.stringify(that._dati[parseInt(t, 10)]));
            }
        });
    },

    /**
     * Colore di sfondo.
     *
     * @param {string} coso anione o catione
     * @returns {string} colore di sfondo
     * @private
     */
    _bgcolor: function(coso) {
        //TODO: implementare.
        return "#0f0";
    },

    /**
     * Crea la cella. E la restituisce.
     *
     * @param {string} classe della cella
     * @param {string} quale anione o catione
     * @returns {HTMLElement} la cella
     * @private
     */
    _generaCellaHeader: function(classe, quale) {
        var bg = this._bgcolor(quale);
        var cella = document.createElement("div");
        this._prettyName(quale, cella);

        cella.classList.add(classe);
        cella.style.backgroundColor = bg;
        return cella;
    },

    /**
     * Aggiunge una cella con un sale.
     *
     * @param {string} [minifoto] link alla foto 100x100
     * @param {string|number} [id] numero nell'array generato
     * @returns {Element} la cella
     * @private
     */
    _generaCella: function(minifoto, id) {
        var cella = document.createElement('img');
        cella.classList.add('cella');

        if(typeof minifoto === 'undefined') {
            cella.classList.add('vuota');
        } else {
            cella.src = minifoto;
        }

        if(typeof id !== 'undefined') {
            cella.dataset.id = id;
        }

        return cella;
    },

    /**
     * Stampa il nome con sub e sup, nel contenitore.
     *
     * @param {string} quale nome dell'anione\catione
     * @param {Element} contenitore
     * @private
     */
    _prettyName: function(quale, contenitore) {
        // TODO: eccezioni

        var resup = /\d\+|\d\-|\+|\-/;
        var resub = /\d+/;
        var sup = quale.match(resup);
        var nonsup = quale.split(resup);

        var nslen = nonsup.length;
        var clen;
        for(var i = 0; i < nslen; i++) {
            var centro = nonsup[i].match(resub);
            var sub = nonsup[i].split(resub);
            clen = centro.length;

            for(var j = 0; j < clen; j++) {
                contenitore.appendChild(document.createTextNode(centro[j]));
                if(j < clen-1) {
                    contenitore.appendChild(document.createElement("sub").appendChild(document.createTextNode(sub[j])));
                }
            }

            if(i < nslen-1) {
                contenitore.appendChild(document.createElement("sup").appendChild(document.createTextNode(sup[i])));
            }

        }
    },

    /**
     * Trova il sale e tutti gli stati di idratazione.
     *
     * @param {string} anione
     * @param {string} catione
     * @param {formatostandard[]} elencostandard
     * @returns {formatostandard[]}
     * @private
     */
    _trovaQuelSale: function(anione, catione, elencostandard) {
        var res = [], len = elencostandard.length;
        for(var i = 0; i < len; i++) {
            if(elencostandard[i].anione === anione && elencostandard[i].anione === catione) {
                res.push(elencostandard[i]);
            }
        }

        return res;
    }

};

Non è molto comprensibile perché ho messo come commenti solo i tipi dei parametri (così l'IDE mi avvisa se sto passando il parametro sbagliato), perché MyBB mi cambia l'indentazione del codice a casaccio e perché ho ordito un sistema in cui una funzione alquanto lenta genera tutta la tabella dal formato standard, poi bisogna prendere il codice HTML generato, salvarlo in una pagina e mettere quella sul sito così è più veloce (tanto la tabella, una volta generata, resta quella finché non si aggiungo altri sali). Poi dovrebbero esserci altre funzioni che quando si clicca su un'immagine aprono l'immagine 300x300 e cose del genere ma devo ancora scriverle asd
E manca tutto il CSS.
Ah, e non ho ancora provato nulla, non so nemmeno se funziona asd
La tua firma è old e molto 2010... [cit. myttex]
Cita messaggio
[-] I seguenti utenti ringraziano Kokosekko per questo post:
TrevizeGolanCz
(2015-10-18, 21:53)kokosekko Ha scritto: L'IDE mi dice che i parametri U, O e K di Acqua() sono inutilizzati, in effetti la funzione riceve in input quei 4 parametri, poi accede a document.modulo.acqua e imposta value al valore che ha ricevuto come 2° parametro (D); dopodiché termina, senza fare nulla con U, O e K.

Se guardi la funzione "Acqua()", che viene avviata con "onclick" da alcune icone, vedrai che è sempre diversa "Acqua('U','D', 'K', 'O')" , "Acqua('D','U','K','O')" , "Acqua('O','K','U','D')".

Cliccando l'icona teoricamente il document.modulo.acqua.value dovrebbe essere uguale a D, ma invece di D nel primo caso sarà uguale a D, nel secondo U, nel terzo K.

Questo perchè D era la seconda lettera nella funzione Acqua(U,D,O,K) inserita nello script, ma in "Acqua('D','U','K','O')" la seconda lettera è U, mentre in "Acqua('O','K','U','D')" è K.
Se provi a sostituire la D nello script principale con K vedrai che verranno visualizzate le img legate ad un valore di document.modulo.acqua.value= K/K/U.

Cavolo che lavorone che hai fatto o.o...mi fai sentire una nullità....
Anche io nel frattempo sto cercando di cambiare il codice, ma il risultato è ben diverso dal tuo...
Forse non te l'ho detto, ma alla fine i sali con più stati di idratazione sono pochissimi, una decina scarsa probabilmente, quindi si potrebbe per loro creare un array a parte che viene richiamato con un semplice if senza complicare più di tanto le cose.

Nel mio esempio ho creato vari array:

ferro,manganese,calcio: ogni array è costituito da soli 0 ed 1, 1 indica che la casella contiene un composto, 0 che è vuota.
arraytot: contiene gli array sopracitati, serve per il ciclo for

feic,mnic,caic: ogni array contiene i link alle icone dei composti
Icone: contiene gli array sopracitati, serve per il ciclo for

feind,mnind,caind: ogni array contiene i link delle sintesi
Sintesi: contiene gli array sopracitati, serve per il ciclo for

Mancano gli array contenenti i link per le img 300x300 ed uno che indichi il grado di idratazione del composto. 

Cicli for:

          for (index1 = 0; index1 < 3; index1++): permette di selezionare la riga

          for (index2 = 0; index2 < 11; index2++): permette di selezionare la colonna

if/else: se il valore dell' arraytot è pari a 0 allora non c'è nessun composto in quella casella, se invece è uguale ad 1 allora c'è un composto e viene visualizzato ed il valore di n aumenta di una unità in modo da passare al successivo elemento nel caso nel successivo ciclo for arraytot[index1][index2]=1.

Per i composti con più gradi di idratazione pensavo di porre un semplice If che farà riferimento ad un array dedicato, se fossero duecento non sarebbe l'ideale, ma visto che sono pochi...

La funzione Acqua() devo ancora implementarla dato che voglio che sia presente solo in determinati casi.


Ecco l'esempio funzionante -->
.rar  array.rar (Dimensione: 2.09 KB / Download: 34)
8-)  Tanto vetro zero reagenti 8-)
Cita messaggio
[-] I seguenti utenti ringraziano TrevizeGolanCz per questo post:
Kokosekko
Ragazzi, scusate la sparizione :/
Cita messaggio
Shhh tranquillo ;-)!
Cmq in generale avrei quasi finito di convertire le img a 300x300 e 100x100...
Quello che manca è:
caricarle tutte sul forum (ne ho già caricate un po)
completare il codice HTML

Se la cosa dovesse aver successo in seguito finirò anche il codice della versione migliorata, sempre che non la finisca prima kokosekko XD, e mi metterò a sistemare le foto di marco dato che ohilà me le ha passate!
8-)  Tanto vetro zero reagenti 8-)
Cita messaggio
Bel lavoro :-D
Cita messaggio
Myttex mi ha ricordato di ricordarmi da solo che c'erano delle immagini da uppare, quindi alla fine me lo so ricordato e le ho uppate: http://www.myttex.net/sali/ asd
La tua firma è old e molto 2010... [cit. myttex]
Cita messaggio
Ho già la ragazza, ma mi vedo costretto a lasciarla per passare il resto della mia vita con koko <3!!!

Domani inizio a lavorare, ma verso sera comincio a darmi da fare ;-)!!!

Ho aggiunto "interessanti novità" al codice html.... devo ancora implementarle e non comportano grossi cambiamenti, ma è nei dettagli che sto lavorando al momento ;-)!
8-)  Tanto vetro zero reagenti 8-)
Cita messaggio




Utenti che stanno guardando questa discussione: 1 Ospite(i)