Enhanced Show / Hide icon in Moodle. No plugins.

Esta entrada es una continuación de la anterior Show / Hide icons en Moodle

El problema

El objetivo es modificar la interfaz de Moodle para extraer un botón de un menú y así tenerlo más directo. 

Algunas posibles soluciones

En la entrada anterior proponía poner un javascript a nivel "navegador" mediante un plugin que permite añadir scripts y css a páginas concretas. El inconveniente es que solo funcionaria en ese navegador de ese ordenador.

Una estrategia más correcta habría sido tocar el tema de Moodle. En la configuración no hay opción de scripts personalizados. Se podría modificar los archivos del tema pero muchas veces ni se tiene acceso y además seguramente se perderían esos cambios con actualizaciones. Tampoco he encontrado un plugin que lo haga pero igualmente muchos moodle tampoco tienen permisos para instalarlos.

Una mejor solución

Una solución más práctica y simple es poner un bloque HTML en el todo el sitio Moodle. Si añades un bloque en la portada se puede configurar para que se vea en todos los cursos.

 

Los scripts que pongamos en ese bloque se ejecutarán después de todos los propios del Moodle.

Aquí se puede ver en funcionamiento, es el bloque llamado Custom. Afecta a todos los cursos del sitio.

He aprovechado para sacar también el icono de edición de actividad.

 

En los CSS personalizados del tema he añadido algunas reglas que mejoran el posicionamiento de los iconos.

Si fuese rápido e indoloro lo intentaría convertir en plugin para ponerlo en la "store" de Moodle pero eso ya es mucho trabajo.

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.