Los eventos personalizados utilizados en CONTENTdm son activados por la aplicación de front-end del sitio web basada en React. Estos eventos se basan en las clases CSS y ofrecen varias opciones de temporización: :enter, :ready, :update y :leave.Si ya está familiarizado con el funcionamiento de los eventos de CONTENTdm, puede ir directamente a la Lista de eventos del ciclo de vida de JavaScript.
:enter : Este evento indica que un usuario ha navegado a una página, pero la página aún no ha comenzado a renderizarse.:ready :Este evento se activa cuando una página se ha renderizado y está lista para usarse. Este es el punto en el que se ha construido el marcado de la página, lo que significa que puede ser manipulado por JavaScript personalizado y que un usuario final puede ver la interfaz de usuario.:update : Este evento se activa cada vez que una página actualiza su estado. Dado que las aplicaciones de React dependen en gran medida de cambiar partes de las páginas en lugar de actualizar la página completa, este evento es una parte crítica del ciclo de vida de la página.:leave : Este evento se activa cuando un usuario ha elegido abandonar la página actual. Dependiendo de lo que haga su código JavaScript, es posible que desee que se ejecute en uno o más de los puntos mencionados del ciclo de vida de la página. Por ejemplo, un script simple que redirija al usuario final a otra página probablemente deba ejecutarse en un evento:enter , ya que ese es el punto más temprano del ciclo de vida antes de la representación y una redirección de página no necesita ni desea que se muestre ninguna parte de la interfaz de usuario.
Por otro lado, un script que modifica los elementos de la interfaz de usuario en la página necesitaría esperar hasta que ocurra un evento:ready para que elHTML esté disponible para su manipulación. El evento :ready será el más utilizado para cualquier operación de JavaScript que agregue o modifique la interfaz de usuario en una página.
El evento :update será utilizado por el JavaScript personalizado que depende de condiciones específicas dentro de una página. Por ejemplo, si su script personalizado examina los resultados de búsqueda de un usuario final y les añade algo de interfaz de usuario, querrá que ese código siga ejecutándose cada vez que el usuario haga clic en «siguiente» para ver otro conjunto de resultados. Las acciones «siguiente» y «anterior» están vinculadas al evento :update. Puede determinar qué acciones del usuario final son :update eventos frente a :enter eventos al observar si se vuelve a cargar la página completa. En CONTENTdm, si la URL en la barra de direcciones del navegador no cambia, lo más probable es que la acción del usuario final esté ocurriendo simultáneamente con un evento :update . Muchas personalizaciones comunes de JavaScript deberán suscribirse a los eventos :ready y :update de la página para que se activen una vez cuando se inicia la página y en cualquier momento posterior en que las acciones del usuario final cambien el estado de la página.
El evento :leave es útil si necesita limpiar cualquier cambio que su código personalizado haya podido realizar. Por ejemplo, si su código crea una función personalizada en el encabezado de la página, pero solo en ciertas páginas o dependiendo de las condiciones dentro de una página, es posible que no desee que esa interfaz de usuario persista cuando el usuario haga clic para ir a otra página. Puede crear una función de limpieza que se active solo en un evento :leave y elimine o restablezca la interfaz de usuario que usted creó.
Hay un evento especial que se dispara una vez durante la carga inicial de la aplicación web: cdm-app:ready. Este evento se activa una sola vez para una sesión de usuario final específica y es el primer momento en el ciclo de vida de la aplicación.
Aquí tiene un ejemplo sencillo de JavaScript que se suscribe a estos eventos. El siguiente código aplica un color de fondo aleatorio a cada una de las tarjetas de colección en la página de inicio predeterminada de CONTENTdm.
// // cambiar el color de fondo de las tarjetas en la página de inicio // // función generadora de colores aleatorios getRandomColor() { var letras = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letras[Math.floor(Math.random() * 16)]; } return color; } // suscribirse al evento de la página de inicio lista document.addEventListener('cdm-home-page:ready', function(){ Array.from(document.querySelectorAll('.cdm-collection-card')) .forEach(function(card){ card.firstChild.style.backgroundColor = getRandomColor(); }); }); y suscríbase al evento de actualización de la página de inicio document.addEventListener('cdm-home-page:update', function(){ Array.from(document.querySelectorAll('.cdm-collection-card')) .forEach(function(card){ card.firstChild.style.backgroundColor = getRandomColor(); }); });