Acciones y eventos en el correo electrónico de AMP
El atributo on se utiliza para instalar controladores de eventos en los elementos. La compatibilidad de los eventos dependerá del elemento.
El valor que se le asigna a la sintaxis consiste en usar un lenguaje sencillo específico para el dominio en el formulario:
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
Consulte en la siguiente tabla la descripción sobre cada parte de la sintaxis.
| Sintaxis | ¿Es necesario? | Descripción |
|---|---|---|
eventName | Sí | Es el nombre del evento donde se presenta un elemento. |
targetId | Sí | Es el ID del DOM para el elemento, o un objetivo especial que se definió previamente, en el cual le gustaría ejecutar una acción como respuesta a un evento. En el siguiente ejemplo, el targetId es el ID del DOM para los objetivos amp-lightbox y photo-slides. <amp-lightbox id="photo-slides"></amp-lightbox> <button on="tap:photo-slides">Show Images</button> |
methodName | No | Se utiliza cuando los elementos tienen acciones predeterminadas. Este es el método que presenta el elemento objetivo (al cual se hace referencia usando AMP cuenta con un concepto de acción predeterminada que puede implementarse en los elementos. Entonces, al omitir |
arg=value | No | Algunas acciones, cuando se documentan, pueden aceptar argumentos. Los argumentos se definen entre paréntesis mediante la notación key=value. Los valores aceptados son:
|
Administrar varios eventos
Puede concentrarse en varios eventos de un elemento si los separa mediante un punto y coma ;.
Por ejemplo: on="submit-success:lightbox1;submit-error:lightbox2"
Varias acciones para un evento
Puede ejecutar varias acciones de manera consecutiva para el mismo evento si las separa mediante una coma “,”.
Por ejemplo: on="tap:target1.actionA,target2.actionB"
Eventos y acciones definidos en las globales
En AMP se define el evento tap de manera global para que pueda concentrarse en cualquier elemento HTML (incluidos los elementos de AMP).
En AMP también se definen las acciones hide, show y toggleVisibility globalmente para que pueda activarlas en cualquier elemento HTML.
Un elemento solo puede mostrarse si estaba oculto previamente por una acción hide o toggleVisibility, o mediante el atributo hidden. La acción show no es compatible con los elementos ocultos por CSS display:none o layout=nodisplay de AMP.
Por ejemplo, en AMP es posible hacer lo siguiente:
<div id="warning-message">Warning...</div> <button on="tap:warning-message.hide">Cool, thanks!</button>
Eventos con elementos específicos
* - todos los elementos
| Evento | Descripción |
|---|---|
tap | Se activa al presionar o hacer clic sobre el elemento. |
Elementos de entrada
| Evento | Descripción | Elementos | Datos |
|---|---|---|---|
change | Se activa cuando el valor del elemento cambia y se asigna. Las propiedades de los datos son similares a los que se encuentran en HTMLInputElement y de HTMLSelectElement. | input | event.min |
input[type="radio"],input[type="checkbox"]
| event.checked | ||
select | event.min | ||
input-debounced | Se activa cuando el valor del elemento cambia. Es parecido al evento change estándar, pero solo se activa 300 ms después de que el valor de entrada dejó de cambiar. | Elementos que activan el evento input. | Es similar a los datos del evento change. |
input-throttled | Se activa cuando el valor del elemento cambia. Es parecido al evento change estándar, pero está regulado para activarse máximo una vez cada 100 ms mientras el valor de entrada continúe modificándose. | Elementos que activan el evento input. | Es similar a los datos del evento change. |
amp-accordion > sección
| Evento | Descripción | Datos |
|---|---|---|
expand | Se activa cuando la sección accordion aumenta. | Ninguno. |
collapse | Se activa cuando la sección accordion colapsa. | Ninguno. |
amp-carousel[type="slides"]
| Evento | Descripción | Datos |
|---|---|---|
slideChange | Se activa cuando cambia la diapositiva en el carrusel. | // Slide number. |
amp-lightbox
| Evento | Descripción | Datos |
|---|---|---|
lightboxOpen | Se activa cuando lightbox está completamente visible. | Ninguno |
lightboxClose | Se activa cuando lightbox está totalmente cerrado. | Ninguno |
amp-list
| Evento | Descripción | Datos |
|---|---|---|
fetch-error(low-trust) | Se activa cuando ocurre un error en la consulta de datos. | Ninguno |
amp-selector
| Evento | Descripción | Datos |
|---|---|---|
select | Se activa al seleccionar o anular una selección. | // Target element's "option" attribute value. |
amp-sidebar
| Evento | Descripción | Datos |
|---|---|---|
sidebarOpen | Se activa cuando la barra lateral se abre completamente después de que terminó la transición. | Ninguno |
sidebarClose | Se activa cuando la barra lateral se cierra completamente después de que terminó la transición. | Ninguno |
amp-state
| Evento | Descripción | Datos |
|---|---|---|
fetch-error(low-trust) | Se activa cuando ocurre un error en la consulta de datos. | Ninguno |
formulario
| Evento | Descripción | Datos |
|---|---|---|
submit | Se activa cuando se envía el formulario. | |
submit-success | Se activa cuando la respuesta por enviar el formulario es exitosa. | // Response JSON. |
submit-error | Se activa cuando ocurre un error en la respuesta por enviar el formulario. | // Response JSON. |
valid | Se activa cuando el formulario es válido. | |
invalid | Se activa cuando el formulario no es válido. |
Acciones específicas para los elementos
* (todos los elementos)
| Acción | Descripción |
|---|---|
hide | Oculta el elemento objetivo. |
show | Muestra al elemento objetivo. Si como resultado de ello un elementoautofocus se vuelve visible, aumenta su prioridad. |
toggleVisibility | Cambia la visibilidad de un elemento objetivo. Si como resultado de ello un elementoautofocus se vuelve visible, aumenta su prioridad. |
toggleClass(class=STRING, force=BOOLEAN) | Habilita o deshabilita las clases de un elemento objetivo. El force es opcional y, cuando se define, garantiza que la clase solamente se agregará pero no podrá eliminarse si se establece en true, y solo podrá eliminarse pero no agregarse si se establece en false. |
focus | Hace que el elemento objetivo aumente su prioridad. Para disminuir la prioridad, puede utilizarse focus en otro elemento (generalmente en un elemento primario). Le recomendamos nuevamente que no pierda de vista la prioridad en body/documentElement por cuestiones de accesibilidad. |
amp-accordion
| Acción | Descripción |
|---|---|
toggle(section=STRING) | Habilita o deshabilita los estados expanded y collapsed en las secciones de amp-accordion. Cuando se hacen llamadas sin argumentos, permite alternar todas las secciones del acordeón. Habilita una sección específica al proporcionar el ID de la sección: on="tap:myAccordion.toggle(section=
|
expand(section=STRING) | Expande las secciones del acordeón. Si una sección ya está expandida permanece de esta manera. Cuando se hacen llamadas sin argumentos, expande todas las secciones del acordeón. Activa una sección específica al proporcionar el ID de la sección: on="tap:myAccordion.expand(section='section-id')". |
collapse(section=STRING) | Colapsa las secciones del acordeón. Si una sección ya está colapsada permanece de esta manera. Cuando se hacen llamadas sin argumentos, colapsa todas las secciones del acordeón. Activa una sección específica al proporcionar el ID de la sección: on="tap:myAccordion.collapse(section='section-id')". |
amp-carousel[type="slides"]
| Acción | Descripción |
|---|---|
goToSlide(index=INTEGER) | Hace que el carrusel avance hasta una diapositiva específica del índice. |
amp-image-lightbox
| Acción | Descripción |
|---|---|
open (default) | Abre la imagen del lightbox, siendo la imagen de origen la que activó la acción. |
amp-lightbox
| Acción | Descripción |
|---|---|
open (default) | Abre el lightbox. |
close | Cierra el lightbox. |
amp-list
| Evento | Descripción | Datos |
|---|---|---|
changeToLayoutContainer | Actualiza el diseño de amp-list a layout="CONTAINTER" para permitir cambios en el tamaño de forma dinámica. | |
fetch-error(low-trust) | Se activa cuando ocurre un error en la consulta de datos. | Ninguno |
amp-selector
| Acción | Descripción |
|---|---|
clear | Elimina todas las selecciones de un amp-selector definido. |
selectUp(delta=INTEGER) | Desplaza la selección hacia arriba mediante el valor de “delta”. El valor de “delta” se establece en -1. Si no se selecciona ninguna opción, el estado que seleccione tomará el valor de la última opción. |
selectDown(delta=INTEGER) | Desplaza la selección hacia abajo mediante el valor de “delta”. El valor de “delta” se establece en 1. Si no se selecciona ninguna opción, el estado que seleccione tomará el valor de la primera opción. |
toggle(index=INTEGER, value=BOOLEAN) | Habilita o deshabilita la aplicación “seleccionada”. Si el atributo que se seleccionó está ausente, esta acción lo agregará. Si el atributo que se seleccionó está presente, esta acción lo eliminará. Puede forzar y mantener una adición o eliminación incluyendo un valor booleano en el argumento “value”. Un valor “true” forzará agregar el atributo “seleccionado” y no lo removerá si ya está presente. Un valor “false” eliminará el atributo, pero no lo agregará si está ausente. |
amp-sidebar
| Acción | Descripción |
|---|---|
open (default) | Abre la barra lateral. |
close | Cierra la barra lateral. |
toggle | Habilita o deshabilita el estado de la barra lateral. |
formulario
| Acción | Descripción |
|---|---|
clear | Elimina cualquier valor en las entradas del formulario. |
submit | Envía el formulario. |
Objetivos especiales
Los siguientes son objetivos proporcionados por el sistema de AMP cuyos requisitos son especiales:
Objetivo: AMP
El objetivo de AMP es proporcionado por su tiempo de ejecución e implementa acciones de nivel superior que se aplican a todo el documento.
| Acción | Descripción |
|---|---|
setState({foo: 'bar'})1
| Requiere de amp-bind. Fusiona un objeto literal con un estado para crear enlaces. |
1Cuando se utiliza con varias acciones, las acciones que se realicen posteriormente esperarán hasta que se complete setState() antes de que los invoquen. Solamente se permite un setState() por evento.