Show / Hide icons en Moodle

Hoy es el 15 cumpleaños de este mítico blog así que no podía faltar una entrada.

En versiones (muy) anteriores del gestor de contenidos Moodle el botón de mostrar/ocultar elemento estaba al lado del propio elemento al que afectaba. Era muy directo usar ese "ojo" para ir activando y desactivando lo que quisiéramos. 

 A partir de cierta revisión alguien decidió unir todos esos iconos en un pequeño menú que, honestamente queda mucho mejor.

Pero para mi, y para más gente que he encontrado preguntando sin éxito por foros, es mucho mejor el anterior. 

Parece insignificante pero en mi caso normalmente activo o desactivo muchos elementos seguidos rutinariamente. Es más del doble de estrés en mis acomodadas muñecas.

Sigo buscando una solución oficial o por lo menos una solución más elegante.

Pero de momento he hecho un apaño que me da la vida. Y como me parece que puede servir en muchos casos para pequeños problemas de interfaz ahí lo comparto.

He instalado un plugin en Firefox que permite añadir estilos CSS y scripts extra a cualquier web.

CUSTOM STYLE SCRIPT

En sus opciones se pone la web que queremos retocar y los CSS o scripts que necesitemos.

Al actualizar la página veremos los cambios. En este caso he sacado el elemento de Mostrar/Ocultar fuera del desplegable Edit. 

Aquí tenemos el resultado en todo su esplendor.

El código es tan simple como infalible:

list = document.getElementsByClassName("editing_hide");

for (var i = 0; i < list.length; i+=1) {

list[i].parentNode.parentNode.appendChild(list[i]);

}

Busca todos los elementos que tengan la clase editing_hide ya que son los que queremos mover.

Para cada elemento encontrado busca al padre de su padre y pónselo como hijo. Eso hará que quede a la altura del padre. Un poco complejo de Edipo todo esto...

He repetido ese mismo código para la clase "editing_show" porque si no solo afectaba al ojo cerrado.

Espero que a alguien le sirva.