bloqueT1.8_Vallesquino

code format="javascript" // ==UserScript== // @name               bloqueT1.8 // @namespace          http://geneura.org/projects/greasemonkey // @description        Navegación por los ejercicios de AAP // @include            http://geneura.ugr.es/~jmerelo/asignaturas/* // ==/UserScript==

GM_log('Entrando en el BloqueT1.8');

/* Un elemento "a" no es un enlace.Al ponerle el atributo href se convierte en el origen de un enlace. Si le ponemos el atributo name (o id), se convierte en un marcador que pueda ser el destino de un enlace, y si le ponemos ambos lo tenemos todo. Para más información sobre los anchos de HTML visitar https://developer.mozilla.org/es/HTML/Elemento/a //Definimos la variable h3 como los nodos h3 var h3 = document.getElementsByTagName('h3'); //Definimos el vector de anclas var a_nodes = new Array; //Definimos el vector de los ids de las anclas var anchors = new Array; for ( var secs = 0; secs < h3.length; secs ++ ) { // Para cada h3 obtenemos el id de su padre, en nuestra estructura de árbol el padre de h3 es un div. var id = h3[secs].parentNode.getAttribute('id'); // En este ejercicio al contrario que en el que viene en el tutorial de GreaseMonkey no tiene // ninguna ancla asociada por lo que se debe de gestionar: // 1-. Creamos un ancla, pero todavia no se ha identificado ni se a insertado en ningún lugar var ancla = document.createElement('a'); // 2-. Le asignamos un identificador, como debe de ser único, cogeremos el mismo id que su padre. ancla.setAttribute('name', id); // Añadimos el ancla creado al vector de anclas a_nodes[secs] = ancla; // Igual con su identificador anchors[secs] = id; // 3-.Insertamos el ancla ”ancla” justo antes del título del ejercicio h3[secs].parentNode.insertBefore(ancla, h3[secs]); // Mostramos un mensaje por la consola de Greasemonkey GM_log('Anchor ' + secs + " " + anchors[secs]); }

//Una vez tenemos todas las anclas asociadas a su correspondiente ejercicio necesitamos //crear sus correspondientes href para poder navegar de una ancla a otra. for ( var secs = 0; secs < h3.length; secs ++ ) { // Creamos un span que será el mismo para todos los ejercicios var span = document.createElement('span'); span.setAttribute('style','background:lightblue');

// Creamos el texto que contendrán el href sera la flecha hacia arriba o hacia abajo según corresponda var subir=document.createTextNode('- ^ -'); var bajar=document.createTextNode('- v -');

// Mediante el href creamos los enlaces hacia el ejercicio anterior (excepto para el primer ejercicio) if ( secs > 0 ) { // Creamos el href correspondiente al ancla. var ahref = document.createElement('a'); // Asociamos el href con su correspondiente ancla. Al ponerle el atributo href se convierte en el origen de un enlace ahref.setAttribute('href','#'+anchors[secs-1]); // Asociamos el texto con su href ahref.appendChild(subir); // Le damos formato al href con el span creado inicialmente. span.appendChild(ahref); }

// Mediante el href creamos los enlaces hacia el ejercicio siguiente (excepto para el último ejercicio) if ( secs < h3.length -1 ) { //Mismo procedimiento que antes var ahref = document.createElement('a'); ahref.setAttribute('href','#'+anchors[secs+1]); ahref.appendChild(bajar); span.appendChild(ahref); }

// Insertamos el span con su href ya asociado antes de cada div(h3.parentNode) h3[secs].parentNode.insertBefore(span,a_nodes[secs]); } code