API dei componenti

Galleria a 360°

gwd-360gallery

Oggetto galleria che mostra un oggetto rotante.

Proprietà

Nome	Descrizione
images:string	Stringa di percorsi alle immagini utilizzati nella galleria, separati da virgola.
autoplay:boolean	Al termine del caricamento, la galleria deve riprodurre automaticamente le immagini al suo interno.
wrap:boolean	La galleria deve consentire all'utente di scorrere dal primo all'ultimo frame, invece di fermarsi alla fine dei frame.

Eventi

Nome	Descrizione
firstinteraction	Inviato quando l'utente interagisce con la galleria per la prima volta.
allframesviewed	Inviato quando tutti i frame della galleria sono stati mostrati almeno una volta.
allframesloaded	Inviato quando tutti i frame della galleria sono stati caricati.
frameshown	Inviato quando viene mostrato un nuovo frame.
frameactivated	Inviato quando un nuovo frame inizia a essere attivo, anche se non è ancora visibile.
frametap	Inviato quando un utente tocca un frame.

Metodi

Nome	Descrizione
goToFrame(frame:number, opt_animate:string, opt_direction:string)	Esegue l'animazione fino al frame specificato.
rotateOnce(opt_duration:number, opt_direction:string)	Ruota una volta l'oggetto nella galleria.
goForwards()	Sposta la galleria in avanti di un frame.
goBackwards()	Sposta la galleria indietro di un frame.

Hotspot 3D

gwd-3d-hotspot

Elemento per la visualizzazione delle annotazioni in un modello 3D.

Proprietà

Nome	Descrizione
data-position:string	La posizione dell'hotspot.
data-normal:string	Lo stato normale dell'hotspot.
hotspot-name:string	Il nome dell'hotspot.
hotspot-title:string	Il testo del titolo da visualizzare nella scheda informativa.
hotspot-description:string	Il testo della descrizione da visualizzare nella scheda informativa.
hide-infocard:boolean	Indica se la scheda informativa deve essere nascosta.

Contenitore dell'hotspot 3D

gwd-3d-hotspot-container

Elemento contenitore per le annotazioni in un modello 3D.

Proprietà

Nome	Descrizione
up-image:file	URL dell'immagine degli hotspot 3D nello stato non premuto.
over-image:file	URL dell'immagine degli hotspot 3D nello stato mouseover o al passaggio del mouse.
down-image:file	URL dell'immagine degli hotspot 3D nello stato premuto.

Modello 3D

gwd-3d-model

Componente del visualizzatore 3D.

Proprietà

Nome	Descrizione
id-url:download	URL o ID del modello 3D.
data-gwd-refresh-assets:string	Attributo utilizzato da Google Web Designer per stabilire se è necessario aggiornare gli asset 3D.
glass:boolean	Attiva il materiale vetro per il modello 3D.
src:string	Modello da visualizzare.
transparent:boolean	Attiva lo sfondo trasparente sul modello 3D.
gesture-cue-icon:file	L'icona del segnale del gesto.
gesture-cue-text:string	Il testo che appare sotto l'icona del segnale del gesto.
gesture-cue-duration:number	La durata (in secondi) della visualizzazione del segnale del gesto. Il valore -1 indica che non esistono limiti.

Eventi

Nome	Descrizione
scene-rendered	Inviato dopo la prima visualizzazione della scena del modello 3D.
camera-changed	Inviato quando viene modificata una delle proprietà della fotocamera 3D. L'oggetto event.detail contiene tutte le proprietà correnti della fotocamera.
hotspot-clicked	Inviato quando viene fatto clic su un hotspot. L'oggetto event.detail contiene il nome dell'hotspot selezionato.
interaction-start	Inviato quando l'utente inizia a interagire con il modello 3D.
interaction-end	Inviato quando l'utente interrompe l'interazione con il modello 3D.

Metodi

Nome	Descrizione
setYaw(yaw:number)	Imposta l'angolo di scarto (in gradi), senza animazioni, tenendo in considerazione i limiti della fotocamera.
setTargetYaw(targetYaw:number)	Imposta l'angolo di scarto target (in gradi) in base ai limiti della fotocamera o all'impostazione minima della rotazione compresa tra -360 e 360 gradi.
setTargetPitch(targetPitch:number)	Imposta l'angolazione target (in gradi).
incrementTargetPitch(pitchDelta:number)	Incrementa l'angolazione target di un angolo delta (in gradi).
setTargetZoom(targetZoom:number)	Imposta lo zoom target (in metri).
incrementTargetZoom(zoomDelta:number)	Incrementa lo zoom target (in metri).
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	Imposta il pivot target (in metri).
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	Imposta la panoramica locale target (in metri).
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	Imposta il colore del materiale.
playAnimation(animationName:string)	Riproduce l'animazione.
pauseAnimation(animationName:string)	Mette in pausa l'animazione.
setAnimationTime(animationName:string, animationTime:number)	Imposta il tempo di animazione (in secondi).
lookAtHotspot(hotspotName:string)	Sposta e ruota la fotocamera per mettere a fuoco l'hotspot.

Visualizzatore modello 3D

gwd-3d-model-viewer

Componente che aggrega il componente Visualizzatore modello 3D.

Proprietà

Nome	Descrizione
src:file	Il file di origine del modello 3D.
gesture-cue-icon:file	L'icona del segnale del gesto.
gesture-cue-text:string	Il testo che appare sotto l'icona del segnale del gesto.
gesture-cue-duration:number	La durata (in secondi) della visualizzazione del segnale del gesto. Il valore -1 indica che non esistono limiti.
skybox-image:file	L'immagine di sfondo della scena del modello 3D.
environment-image:file	Controlla il riflesso ambientale del modello 3D.

Eventi

Nome	Descrizione
scene-rendered	Inviato dopo la prima visualizzazione della scena del modello 3D.
camera-changed	Inviato quando viene modificata una delle proprietà della fotocamera 3D. L'oggetto event.detail contiene tutte le proprietà correnti della fotocamera.
hotspot-clicked	Inviato quando viene fatto clic su un hotspot. L'oggetto event.detail contiene il nome dell'hotspot selezionato.
interaction-start	Inviato quando l'utente inizia a interagire con il modello 3D.
interaction-end	Inviato quando l'utente interrompe l'interazione con il modello 3D.

Metodi

Nome	Descrizione
setYaw(yaw:number)	Imposta l'angolo di scarto (in gradi), senza animazioni, tenendo in considerazione i limiti della fotocamera.
setTargetYaw(targetYaw:number)	Imposta l'angolo di scarto target (in gradi) in base ai limiti della fotocamera o all'impostazione minima della rotazione compresa tra -360 e 360 gradi.
setTargetPitch(targetPitch:number)	Imposta l'angolazione target (in gradi).
incrementTargetPitch(pitchDelta:number)	Incrementa l'angolazione target di un angolo delta (in gradi).
setTargetZoom(targetZoom:number)	Imposta lo zoom target (in metri).
incrementTargetZoom(zoomDelta:number)	Incrementa lo zoom target (in metri).
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	Imposta il pivot target (in metri).
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	Imposta la panoramica locale target (in metri).
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	Imposta il colore del materiale.
playAnimation(animationName:string)	Riproduce l'animazione.
pauseAnimation(animationName:string)	Mette in pausa l'animazione.
setAnimationTime(animationName:string, animationTime:number)	Imposta il tempo di animazione (in secondi).

Aggiungi al Calendario

gwd-addtocalendar

Aggiunge un evento ai calendari.

Proprietà

Nome	Descrizione
event-title:string	Il nome dell'evento mostrato nel calendario dell'utente.
start-date:string	La data di inizio dell'evento.
start-time:string	L'ora di inizio dell'evento (in formato 24 ore).
end-date:string	La data di fine dell'evento.
end-time:string	L'ora di fine dell'evento (in formato 24 ore).
timezone:string	Il fuso orario dell'evento. Se impostato, l'ora viene modificata in base al fuso orario dell'utente.
location:string	Il luogo dell'evento.
description:string	La descrizione dell'evento.
icalendar:boolean	Indica se deve essere utilizzato o meno un file iCalendar.
google:boolean	Indica se deve essere utilizzato o meno Google Calendar.
windows-live:boolean	Indica se deve essere utilizzato o meno il Calendario di Windows Live.
yahoo:boolean	Indica se deve essere utilizzato o meno Yahoo! Calendar.
bg-color:string	Il valore esadecimale del colore di sfondo del menu a discesa.
font-color:string	Il valore esadecimale del colore dei caratteri utilizzati nel menu a discesa.
font-family:string	Il nome del carattere utilizzato nel menu a discesa.
font-size:string	Le dimensioni del carattere utilizzato nel menu a discesa.
font-weight:string	Lo spessore del carattere nel menu a discesa.
highlight-color:string	Il valore esadecimale del colore di evidenziazione del menu a discesa.

Audio

gwd-audio

Componente che aggrega un elemento HTMLAudioElement.

Proprietà

Nome	Descrizione
autoplay:boolean	Indica se riprodurre automaticamente l'audio al momento del caricamento.
loop:boolean	Indica se ripetere continuamente l'audio dopo il completamento.
muted:boolean	Indica se i contenuti audio devono essere disattivati all'inizio.
controls:boolean	Indica se sono attivati i controlli nativi predefiniti del player.
sources:file	Stringa di origini audio, separate da virgole, in diversi formati.

Eventi

Nome	Descrizione
play	Inviato quando la riproduzione dell'elemento multimediale inizia dopo un evento precedente di messa in pausa.
pause	Inviato quando la riproduzione è in pausa.
playing	Inviato quando inizia la riproduzione dell'elemento multimediale (per la prima volta, dopo la messa in pausa oppure dopo la fine e il successivo riavvio).
ended	Inviato quando la riproduzione è completata.
volumechange	Inviato quando cambia il volume dell'audio (sia quando viene impostato il volume sia quando l'attributo muted viene modificato).
seeked	Inviato al termine di un'operazione di ricerca.
waiting	Inviato quando l'operazione richiesta (ad esempio, la riproduzione) viene ritardata in attesa del completamento di un'altra operazione (ad esempio, una ricerca).

Metodi

Nome	Descrizione
mute()	Attiva/disattiva i contenuti audio.
pause()	Mette in pausa i contenuti audio.
play()	Riproduce i contenuti audio.
replay()	Ripete i contenuti audio.
seek(time:number)	Salta al momento specificato nei contenuti audio.

Galleria con vista a sequenza

gwd-carouselgallery

Oggetto galleria che mostra i frame in un layout di tipo carosello.

Proprietà

Nome	Descrizione
images:string	Stringa di percorsi alle immagini utilizzati nella galleria, separati da virgola.
groups:string	Stringa di ID gruppo, separati da virgole.
transition-duration:number	Velocità di animazione della galleria in millisecondi.
start-frame:number	Il numero dell'immagine che vuoi venga visualizzata all'inizio.
autoplay:boolean	Indica se riprodurre automaticamente i frame una volta oppure no.
has-navigation:boolean	Indica se includere automaticamente i controlli di navigazione nella galleria.
navigation-thumbnails:boolean	Indica se utilizzare miniature per la navigazione al posto dei punti.
navigation-highlight:color	Codice colore CSS utilizzato per evidenziare il frame attivo nella navigazione.
scaling:string	Indica come i contenuti dell'immagine saranno ridimensionati per adattarli al frame.
frame-width:number	La larghezza di un riquadro di contenuti.
frame-height:number	L'altezza di un riquadro di contenuti.
neighbor-rotation-y:number	Rotazione dell'asse Y applicata ai riquadri adiacenti al riquadro attualmente centrato. Utilizzata per inclinare i riquadri adiacenti.
neighbor-translation-x:number	Traslazione dell'asse X applicata ai riquadri adiacenti al riquadro attualmente centrato. Utilizzata per regolare il posizionamento dei riquadri adiacenti.
neighbor-translation-y:number	Traslazione dell'asse Y applicata ai riquadri adiacenti al riquadro attualmente centrato.
neighbor-translation-z:number	Traslazione dell'asse Z applicata ai riquadri adiacenti al riquadro attualmente centrato.
exit-urls:string	Stringa di URL di uscita, separati da virgole, corrispondenti alle immagini nella galleria.
show-reflection:boolean	Indica se mostrare un riflesso basato su CSS3.
pause-front-media:boolean	Al cambio del frame corrente, indica se mettere in pausa gli elementi multimediali (ad esempio, contenuti video o audio) del frame precedente.
resume-next-media:boolean	Al cambio del frame corrente, indica se riprendere gli elementi multimediali (ad esempio, contenuti video o audio) del nuovo frame corrente.

Eventi

Nome	Descrizione
firstinteraction	Inviato quando l'utente interagisce con la galleria per la prima volta.
allframesviewed	Inviato quando tutti i frame della galleria sono stati mostrati almeno una volta.
allframesloaded	Inviato quando tutti i frame della galleria sono stati caricati.
autoplayended	Inviato quando la riproduzione automatica viene terminata per qualsiasi motivo. event.detail.completed è true se termina naturalmente al raggiungimento della durata prevista; in caso contrario è false.
frameshown	Inviato quando viene mostrato un nuovo frame.
frameactivated	Inviato quando un nuovo frame inizia a essere attivo, anche se non è ancora visibile.
frameautoplayed	Inviato quando un frame viene attivato per la riproduzione automatica. Può verificarsi più spesso di frameshown, poiché si attiva separatamente per tutti i vari frame visibili nello stesso momento.
frametap	Inviato quando un utente tocca un frame.
reachleftend	Inviato quando la galleria raggiunge l'estremità sinistra.
reachrightend	Inviato quando la galleria raggiunge l'estremità destra.
trackstart	Inviato quando inizia il trascinamento del mouse o del tocco.
track	Il componente registra i dati di posizione X e Y associati al trascinamento del mouse o del tocco.
trackend	Inviato quando termina il trascinamento del mouse o del tocco.

Metodi

Nome	Descrizione
goToFrame(index:number, opt_animate:string)	Va al frame specificato.
goForwards(opt_animate:string)	Va al frame successivo, se disponibile.
goBackwards(opt_animate:string)	Va al frame precedente.
rotateOnce(opt_duration:number, opt_direction:string)	Mostra una volta ogni frame nella galleria.
stopRotation()	Ferma la rotazione automatica corrente.

Cue point

gwd-cuepoint

Componente collegato a un componente Video di Google Web Designer e che genera un evento quando il video raggiunge un punto specifico.

Proprietà

Nome	Descrizione
time:number	Il punto del video, indicato in secondi, in cui viene attivato l'evento.

Eventi

Nome	Descrizione
cuepoint	Inviato quando la riproduzione dell'elemento multimediale ha raggiunto un tempo definito in un cue point.

Metodi

Nome	Descrizione
seek()	Imposta la durata del video sul tempo di un cue point.
setTime(time:number)	Imposta il momento del cue point.

Date Swap

gwd-dateswap

Date Swap modificherà la visibilità dell'elemento in base a come la data corrente viene confrontata con l'intervallo di date target.

Proprietà

Nome	Descrizione
from_date:string	Stringa che rappresenta una data in formato RFC2822 o ISO 8601.
to_date:string	Stringa che rappresenta una data in formato RFC2822 o ISO 8601.

Eventi

Nome	Descrizione
before	Inviato quando la data corrente è precedente alla data from_date (esclusa).
during	Inviato quando la data corrente è compresa tra le date from_date e to_date (incluse).
after	Inviato quando la data corrente è successiva alla data to_date (esclusa).

Metodi

Nome	Descrizione
checkDate()	Confronta la data corrente con l'intervallo di date.

Navigazione galleria

gwd-gallerynavigation

Controllo di navigazione per un componente galleria di Google Web Designer.

Proprietà

Nome	Descrizione
for:string	Stringa di percorsi alle immagini utilizzati nella galleria, separati da virgola.
highlight:color	Codice colore CSS utilizzato per evidenziare il frame attivo nella navigazione.
use-thumbnails:boolean	Indica se utilizzare miniature per la navigazione al posto dei punti.

Annuncio generico

gwd-genericad

Implementa il contenitore dell'annuncio generico.

Eventi

Nome	Descrizione
adinitialized	Inviato appena prima che l'elemento generico esegua il rendering dei contenuti dell'annuncio.

Metodi

Nome	Descrizione
initAd()	Avvia l'annuncio quando riceve gli opportuni eventi dall'Enabler.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	Conduce alle dimensioni espanse dell'annuncio. Se non viene specificato un ID pagina, l'annuncio conduce alla pagina predefinita.
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string)	Esce dall'annuncio ed eventualmente lo comprime.

Gesto

gwd-gesture

Metodo semplificato per l'implementazione di una serie di eventi gesto.

Proprietà

Nome	Descrizione
touch-action:string	Indica come l'azione tocco deve essere interpretata. I valori validi sono: auto, none, pan-x e pan-y. Il comportamento predefinito equivale all'impostazione su none.

Eventi

Nome	Descrizione
hover	Inviato quando il mouse o il tocco entrano nei confini del componente.
hoverend	Inviato quando la posizione del mouse o del tocco esce dai confini del componente.
trackstart	Inviato quando inizia il trascinamento del mouse o del tocco.
track	Il componente registra i dati di posizione X e Y associati al trascinamento del mouse o del tocco.
trackend	Inviato quando termina il trascinamento del mouse o del tocco.
tap	Inviato quando viene registrato un tocco dell'utente o un clic del mouse.
swipeleft	Inviato quando l'utente scorre verso sinistra.
swiperight	Inviato quando l'utente scorre verso destra.
swipeup	Inviato quando l'utente scorre verso l'alto.
swipedown	Inviato quando l'utente scorre verso il basso.

Annuncio Google

gwd-google-ad

Implementa il contenitore dell'annuncio Google.

Proprietà

Nome	Descrizione
polite-load:boolean	Indica se questo annuncio deve rispettare la semantica del caricamento "polite".
fullscreen:boolean	Indica se questo annuncio deve cercare di espandersi a schermo intero o meno.

Eventi

Nome	Descrizione
adinitialized	Inviato appena prima che l'elemento visualizzi i contenuti dell'annuncio.
expandstart	Inviato quando l'Enabler attiva l'evento di avvio dell'espansione.
expandfinish	Inviato quando l'Enabler attiva l'evento di completamento dell'espansione.
collapsestart	Inviato quando l'Enabler attiva l'evento di avvio della compressione.
collapsefinish	Inviato quando l'Enabler attiva l'evento di completamento della compressione.
fullscreensupport	Inviato se è supportata l'espansione a schermo intero.
dynamicelementsready	Inviato dopo che i dati dinamici sono stati applicati ai contenuti dell'annuncio.
hostpagescroll	Inviato quando l'enabler attiva l'evento di scorrimento della pagina host.

Metodi

Nome	Descrizione
initAd()	Avvia l'annuncio quando riceve gli opportuni eventi dall'Enabler.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	Conduce alle dimensioni espanse dell'annuncio. Se non viene specificato un ID pagina, l'annuncio conduce alla pagina predefinita.
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	Esce dall'annuncio ed eventualmente lo comprime.
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	Esce dall'annuncio conducendo all'URL specificato, indipendentemente dal valore definito in Studio. Comprime l'annuncio se opt_collapseOnExit è true.
incrementCounter(metric:string, opt_isCumulative:boolean)	Esegue il monitoraggio di un evento contatore.
startTimer(timerId:string)	Avvia un timer evento.
stopTimer(timerId:string)	Arresta un timer evento.
reportManualClose()	Registra la chiusura manuale di un annuncio floating, popup, espandibile, in-page con popup o in-page con floating. Questo metodo è un proxy per Enabler.reportManualClose.

Hotspot

gwd-hotspot

Componente che mostra e nasconde un hotspot in momenti specifici di un video.

Proprietà

Nome	Descrizione
show-time:number	Il punto del video, indicato in secondi, in cui l'hotspot inizia a essere visibile.
hide-time:number	Il punto del video, indicato in secondi, in cui l'hotspot smette di essere visibile.
left:string	La posizione sinistra dell'hotspot sopra il video, rispetto alla larghezza del frame video (ad esempio, 5%).
top:string	La posizione superiore dell'hotspot sopra il video, rispetto all'altezza del frame video (ad esempio, 5%).
width:string	La larghezza dell'hotspot in proporzione al video, rispetto alla larghezza del frame video.
height:string	L'altezza dell'hotspot in proporzione al video, rispetto all'altezza del frame video.

Eventi

Nome	Descrizione
hotspotshown	Inviato quando l'hotspot diventa visibile.
hotspothidden	Inviato quando l'hotspot diventa nascosto.

Metodi

Nome	Descrizione
show(showHide:boolean)	Attiva/disattiva la visibilità dell'hotspot.
seek(showHide:boolean)	Imposta un punto del video come momento per mostrare o nascondere l'hotspot.
setTimes(showTime:number, hideTime:number)	Imposta i punti in cui l'hotspot viene mostrato e nascosto.

iframe

gwd-iframe

Componente che aggrega un elemento HTMLIframeElement.

Proprietà

Nome	Descrizione
source:string	L'origine dell'iframe. Sostituisce l'attributo src sull'elemento immagine nativo.
scrolling:string	Indica se l'iframe deve mostrare le barre di scorrimento.

Eventi

Nome	Descrizione
iframeload	Inviato quando l'iframe viene caricato.

Metodi

Nome	Descrizione
setUrl(url:string)	Cambia l'URL dell'iframe e lo carica immediatamente.

Immagine

gwd-image

Componente che aggrega un elemento HTMLImageElement per supportare il caricamento posticipato dell'origine dell'immagine.

Proprietà

Nome	Descrizione
source:file	L'origine dell'immagine. Sostituisce l'attributo src sull'elemento immagine nativo.
alt:string	Il testo alternativo per l'immagine.
scaling:string	Indica come l'immagine sarà ridimensionata per adattarla al frame.
alignment:string	Indica come l'immagine deve allinearsi nell'area di visualizzazione.
focalpoint:string	Codifica un punto focale dell'immagine come coordinate x/y in pixel.
disablefocalpoint:boolean	Disattiva il punto focale impostato dall'attributo focalpoint (utilizzato internamente da Google Web Designer).

Pulsante immagine

gwd-imagebutton

Pulsante immagine con supporto per gli stati rilasciato/passaggio del mouse/premuto.

Proprietà

Nome	Descrizione
up-image:file	L'URL dell'immagine del pulsante in stato non premuto.
over-image:file	L'URL dell'immagine del pulsante in stato mouseover o al passaggio del mouse.
down-image:file	L'URL dell'immagine del pulsante in stato premuto.
bgcolor:string	Il colore di sfondo del pulsante.
alignment:string	Indica come l'immagine deve allinearsi nell'area di visualizzazione.
scaling:string	Indica come l'immagine deve adattarsi nel contenitore principale.
disabled:boolean	Indica se il pulsante deve essere disattivato.

Eventi

Nome	Descrizione
imagebuttonloaded	Inviato quando tutte le immagini sono state caricate.

Metodi

Nome	Descrizione
toggleEnable()	Attiva o disattiva.
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string)	Imposta le origini delle immagini per tutti gli stati del pulsante.

Effetto immagine

gwd-image-effect

Componente Effetto immagine.

Proprietà

Nome	Descrizione
scaling:string	Indica come l'immagine sarà ridimensionata per adattarla al frame.
time-limit:number	Limite relativo alla durata dell'animazione. Il valore -1 indica che non esistono limiti.
settings:string	Apre la finestra di dialogo con le impostazioni del componente.
images:string	Stringa di percorsi alle immagini, separati da virgole, utilizzati nell'effetto immagine.

Eventi

Nome	Descrizione
autoplayended	Inviato al termine della riproduzione automatica quando si raggiunge il limite di tempo.

Metodi

Nome	Descrizione
play()	Riproduce l'animazione.
pause()	Mette in pausa l'animazione.

Effetto immagine Prima e dopo

gwd-before-and-after

Effetto immagine in cui due immagini simili vengono composte in un confronto "prima e dopo".

Effetto immagine Respiro

gwd-breathe

Effetto immagine che anima un'immagine espandendola e contraendola in modo elastico.

Effetto immagine Svelamento

gwd-reveal

Effetto immagine in cui un'immagine viene scansionata da un'area di messa a fuoco ellittica svelando una seconda immagine.

Effetto immagine Onda

gwd-wave

Effetto immagine che applica una trasformazione di onda animata a un'immagine, facendola ondeggiare.

Mappa

gwd-map

Estende HTMLElement per aggregare le chiamate all'API di Google Maps.

Proprietà

Nome	Descrizione
api-key:string	La chiave API di Google. Consulta la seguente pagina: https://developers.google.com/maps/documentation/javascript/get-api-key
query:string	Il nome della query di ricerca per la restituzione della posizione dall'API Google Places.
start-latitude:decimal	La coordinata della latitudine per il centro di partenza. Il valore deve essere compreso tra -90 e 90 (gradi).
start-longitude:decimal	La coordinata della longitudine per il centro di partenza. Il valore deve essere compreso tra -180 e 180 (gradi).
request-user-location:boolean	Indica se richiedere la posizione dell'utente. Se impostata su true, all'utente verrà richiesto di condividere la sua posizione.
client-id:string	ID client Google Maps Premier
search-radius:number	Raggio minimo in cui eseguire una ricerca sulla posizione, in metri.
result-limit:number	Il numero massimo di risultati da restituire in una singola query.
start-zoom:number	Livello di zoom iniziale, espresso in unità utilizzate dall'API di Google Maps. Il valore predefinito è 16 (livello di quartiere).
marker-src:string	Nome del file immagine del segnaposto a forma di palloncino contenente i componenti Off, On e Shadow.
gps-src:string	Nome del file immagine del punto blu della posizione GPS.
msg-start-position-prompt:string	Stringa di localizzazione per il testo della finestra di dialogo che invita l'utente a selezionare una posizione di partenza.
msg-gps-button-label:string	Stringa di localizzazione per l'etichetta del pulsante che recupera la posizione dell'utente dall'API di geolocalizzazione.
msg-manual-position-button-label:string	Stringa di localizzazione per l'etichetta del pulsante che mostra il campo di ricerca della posizione.
msg-manual-position-prompt:string	Stringa di localizzazione per il testo della finestra di dialogo che invita l'utente a cercare una posizione di partenza sulla mappa.
msg-manual-position-placeholder:string	Stringa di localizzazione per il testo segnaposto nella casella di ricerca che consente di trovare una posizione di partenza sulla mappa.
msg-geocode-failure:string	Stringa di localizzazione per il testo della finestra di dialogo mostrata per un tentativo non riuscito di utilizzare l'API di geolocalizzazione.
msg-no-results-found:string	Stringa di localizzazione per il testo della finestra di dialogo mostrata quando non sono stati trovati risultati sulla mappa per la posizione selezionata.

Eventi

Nome	Descrizione
pinclick	Quando l'utente seleziona un segnaposto sulla mappa.

Metodi

Nome	Descrizione
setCenter(latitude:number, longitude:number, opt_accuracy:number)	Imposta il centro della mappa nel punto corrispondente alla posizione espressa in latitudine/longitudine.

Pagina

gwd-page

Una pagina rappresenta una singola scheda nel gruppo di pagine.

Proprietà

Nome	Descrizione
expanded:boolean	Indica se la pagina deve essere considerata come una pagina espansa (specifica dell'annuncio).
centered:boolean	Indica se i contenuti di questa pagina devono essere centrati.
alt-orientation-page:string	L'ID della pagina che meglio rappresenta questi contenuti nell'orientamento alternativo.

Eventi

Nome	Descrizione
attached	Inviato appena dopo che la pagina viene collegata al DOM.
detached	Inviato appena dopo che la pagina viene rimossa dal DOM.
pageactivated	Inviato quando la pagina è pronta per essere visualizzata.
pagedeactivated	Inviato quando la pagina non è più visualizzata.
pageload	Inviato dopo che i contenuti della pagina sono caricati correttamente.
pagepresenting	Inviato appena prima che la pagina inizi l'animazione introduttiva.
shake	Inviato quando viene rilevato lo scuotimento del dispositivo.
tilt	Inviato quando viene rilevata l'inclinazione del dispositivo.
rotatetoportrait	Inviato quando il dispositivo viene ruotato in orientamento verticale.
rotatetolandscape	Inviato quando il dispositivo viene ruotato in orientamento orizzontale.

Gruppo di pagine

gwd-pagedeck

Gruppo di pagine è un contenitore di pagine. Mostra una pagina alla volta ed è possibile ripetere ciclicamente pagine differenti all'inizio in qualsiasi ordine e con una qualsiasi delle transizioni di pagina supportate.

Proprietà

Nome	Descrizione
default-page:string	ID della pagina predefinita.

Eventi

Nome	Descrizione
pagetransitionstart	Inviato prima che si verifichi una transizione di pagina.
pagetransitionend	Inviato dopo il completamento di una transizione di pagina.

Metodi

Nome	Descrizione
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Conduce alla pagina successiva nel gruppo di pagine.
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Conduce alla pagina precedente nel gruppo di pagine.
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Conduce alla pagina specificata nel gruppo di pagine.
getCurrentPage()	Restituisce la pagina corrente o null se una pagina non viene mostrata.
getDefaultPage()	Restituisce la pagina predefinita, se specificata, o la prima pagina.
getPage(pageId:string)	Restituisce la pagina con l'ID specificato.
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean)	Restituisce l'elemento di pagina con il valore dell'attributo uguale al valore specificato o -1 se la pagina non è stata trovata.
getOrientationSpecificPage(orientation:string, pageId:string)	Restituisce la pagina corrispondente all'orientamento specificato.
getElementById(id:string)	Trova l'elemento con l'ID specificato tra tutte le pagine di questo gruppo. Poiché gwd-pagedeck mantiene soltanto la pagina attiva nel DOM, lo standard document.getElementById(id) non restituirà gli elementi nelle pagine non attive. È comune, soprattutto negli annunci dinamici, fare riferimento a elementi che si trovano in pagine non attive. In tali casi, questo metodo può essere utilizzato per dereferenziare un elemento in base al suo ID.

Parallasse

gwd-parallax

Componente Parallasse.

Proprietà

Nome	Descrizione
settings:string	Apre la finestra di dialogo con le impostazioni del componente.
yscroll:decimal	Il fattore di scorrimento da utilizzare per l'animazione parallasse quando si esegue il rendering sullo stage.

Eventi

Nome	Descrizione
ready	Inviato quando vengono caricati tutti gli asset nel componente Parallasse.

Effetti delle particelle

gwd-particleeffects

Componente per la composizione di più effetti particelle e immagini.

Proprietà

Nome	Descrizione
autoplay:boolean	Stabilisce se riprodurre o meno automaticamente l'animazione quando viene caricato il componente.
time-limit:number	Limite relativo alla durata dell'animazione. Il valore -1 indica che non esistono limiti.
settings:string	Apre la finestra di dialogo con le impostazioni del componente.

Eventi

Nome	Descrizione
timelimitreached	Inviato quando la riproduzione dell'animazione ha raggiunto il limite di tempo specificato.

Metodi

Nome	Descrizione
play()	Riproduce l'animazione.
pause()	Mette in pausa l'animazione.
stop()	Interrompe l'animazione.

Particelle

gwd-particles

Componente del sistema particellare.

Proprietà

Nome	Descrizione
acceleration-x:number	Il componente x dell'accelerazione in pixel/frame/frame.
acceleration-y:number	Il componente y dell'accelerazione in pixel/frame/frame.
angle-max:number	L'angolo massimo della direzione di velocità delle particelle.
angle-min:number	L'angolo minimo della direzione di velocità delle particelle.
autoplay:boolean	Stabilisce se riprodurre o meno automaticamente l'animazione quando inizia la riproduzione dell'elemento gwd-particleeffects principale.
color1:color	Il primo colore.
color2:color	Il secondo colore.
color-rate:number	La frequenza con cui il colore cambia dal colore 1 al colore 2 per frame mediante aggiunta, nell'intervallo [0, 1].
emit-interval:number	Il numero di frame fino alla successiva emissione di particelle.
emit-x-max:string	La coordinata x massima dell'intervallo di emissione delle particelle.
emit-x-min:string	La coordinata x minima dell'intervallo di emissione delle particelle.
emit-y-max:string	La coordinata y massima dell'intervallo di emissione delle particelle.
emit-y-min:string	La coordinata y minima dell'intervallo di emissione delle particelle.
loop:boolean	Stabilisce se eseguire o meno il loop dell'animazione.
number:number	Il numero di particelle.
opacity-min:number	L'opacità minima delle particelle.
opacity-max:number	L'opacità massima delle particelle.
opacity-rate:number	La frequenza della variazione di opacità per frame, che viene aggiunta all'opacità corrente di una particella.
random-colors:boolean	Stabilisce se le particelle hanno colori casuali compresi tra il colore 1 e il colore 2. Se il valore è false, tutte le particelle vengono inizializzate con il colore 1.
shape:string	La forma dello sprite.
size-max:number	Le dimensioni massime delle particelle in pixel.
size-min:number	Le dimensioni minime delle particelle in pixel.
size-rate:number	La frequenza della variazione di dimensioni per frame, che viene aggiunta alle dimensioni correnti di una particella.
skip-forward:number	Va a un momento specifico in cui una determinata percentuale di particelle è stata emessa in un sistema particellare.
speed-max:number	La velocità massima delle particelle in pixel/frame.
speed-min:number	La velocità minima delle particelle in pixel/frame.
sprite-image-src:file	L'origine delle immagini utilizzate come sprite.
turbulence-frequency:number	La frequenza della turbolenza. I valori più alti causano irregolarità più frequenti nel movimento. Il valore deve essere un numero positivo.
turbulence-rate:number	La frequenza di variazione dell'intensità nel tempo.
turbulence-strength:number	L'intensità esercitata dalla turbolenza sulle particelle. Il valore deve essere un numero positivo.
turbulence-trail:number	Il numero di stati precedenti e correnti di una particella da visualizzare.

Metodi

Nome	Descrizione
play()	Riproduce l'animazione.
pause()	Mette in pausa l'animazione.
stop()	Interrompe l'animazione.

Sprite Sheet

gwd-spritesheet

Mostra un singolo fotogramma chiave o una singola animazione dello sprite sheet.

Proprietà

Nome	Descrizione
imagesource:file	L'URL dell'immagine dello sprite sheet.
offsetx:number	L'offset, in pixel, dal lato sinistro del foglio sprite a una delle due seguenti alternative: Il bordo sinistro dell'immagine specifica che intendi utilizzare dallo sprite sheet Il bordo sinistro della prima immagine sprite utilizzata per creare un'animazione
offsety:number	L'offset, in pixel, dalla parte superiore del foglio sprite a una delle due seguenti alternative: Il bordo superiore dell'immagine specifica che intendi utilizzare dallo sprite sheet Il bordo superiore della prima immagine sprite utilizzata per creare un'animazione
clipwidth:number	La larghezza, in pixel, di una delle due seguenti alternative: L'immagine specifica che intendi utilizzare dallo sprite sheet La prima immagine sprite utilizzata per creare un'animazione
clipheight:number	L'altezza, in pixel, di una della due seguenti alternative: L'immagine specifica che intendi utilizzare dallo sprite sheet La prima immagine sprite utilizzata per creare un'animazione
alignment:string	Determina la posizione dell'immagine all'interno del relativo contenitore.
scaling:string	Determina la modalità di visualizzazione di immagini di diverse dimensioni all'interno del componente.
totalframecount:number	Il numero di frame che compongono l'animazione.
duration:number	La durata, in millisecondi, di ogni frame.
loopcount:number	Il numero di volte in cui si ripete un'animazione. Imposta 0 per ripetere l'animazione all'infinito.
autoplay:boolean	Indica se l'animazione viene riprodotta automaticamente.
endonstartframe:boolean	Indica se l'animazione termina al frame iniziale.
reverseplay:boolean	Indica se l'animazione viene riprodotta in senso inverso.

Eventi

Nome	Descrizione
animationend	Inviato al termine dell'animazione.
animationpause	Inviato quando l'animazione è in pausa.
animationplay	Inviato all'avvio della riproduzione dell'animazione.
animationrestart	Inviato quando l'animazione viene riavviata dopo una pausa.

Metodi

Nome	Descrizione
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean)	Definisce una nuova animazione.
play()	Riproduce l'animazione.
pause()	Mette in pausa l'animazione.
togglePlay()	Mette in pausa o riprende l'animazione.
restart()	Riavvia l'animazione.
previousFrame()	Mostra il frame precedente.
nextFrame()	Mostra il frame successivo.
goToFrame(id:number)	Mostra un frame specifico in base al relativo numero.

Valutazioni a stelle

gwd-starratings

Componente per il rendering di una riga di stelle che rappresenta una valutazione.

Proprietà

Nome	Descrizione
ratingvalue:decimal	Valore della valutazione.
iconsize:number	Dimensioni dell'icona a forma di stella.
isemptyshown:boolean	Indica se le icone a forma di stella vengono visualizzate.
isemptycolored:boolean	Indica se le icone a forma di stella vuote sono colorate.
colorprimary:color	Colore di riempimento principale.
colorsecondary:color	Colore di sfumatura secondario.
gradienttype:string	Tipo di sfumatura.
ratingmax:number	Valutazioni a stelle massime.
ratingmin:decimal	Valutazioni a stelle minime.

Eventi

Nome	Descrizione
complete	Quando sono state create le icone per Valutazioni a stelle.
validationerror	Il valore della valutazione a stelle è inferiore alla valutazione minima.

Street View

gwd-streetview

Componente Google Street View.

Proprietà

Nome	Descrizione
key:string	Per informazioni su come ottenere una chiave unica per la tua applicazione, consulta la pagina: https://developers.google.com/maps/documentation/javascript/get-api-key.
latitude:decimal	Il valore della latitudine della località.
longitude:decimal	Il valore della longitudine della località.
interaction:boolean	Indica se si può fare una panoramica dell'immagine o ruotarla.
heading:decimal	Indica l'orientamento della fotocamera. Sono accettati i valori compresi tra 0 e 360 (entrambi indicano il Nord, 90 indica l'Est e 180 il Sud). Se l'orientamento non è specificato, viene calcolato un valore che orienta la fotocamera verso la località specificata, dal punto in cui è stata scattata la fotografia più ravvicinata.
pitch:decimal	L'angolazione superiore o inferiore della fotocamera rispetto al veicolo di Street View. Spesso, ma non sempre, è orizzontale piatta. Valori positivi indicano che l'angolazione della fotocamera è verso l'alto (90° indica che la fotocamera è posizionata in verticale e rivolta verso l'alto); valori negativi indicano che l'angolazione della fotocamera è verso il basso (-90° indica che la fotocamera è posizionata in verticale e rivolta verso il basso).
zoom:number	Specifica lo zoom della fotocamera rispetto al veicolo di Street View.

Galleria a scorrimento

gwd-swipegallery

Oggetto galleria che mostra i suoi frame in una striscia di contenuti a scorrimento.

Proprietà

Nome	Descrizione
images:string	Stringa di percorsi alle immagini utilizzati nella galleria, separati da virgola.
groups:string	Stringa di ID gruppo, separati da virgole.
transition-duration:number	La velocità di animazione della galleria in millisecondi.
start-frame:number	Il frame in base uno da cui iniziare.
num-frames-to-display:number	Il numero di frame da mostrare contemporaneamente.
frame-snap-interval:number	Il numero di frame che avanzano dopo ogni scorrimento.
autoplay:boolean	Indica se ruotare automaticamente la galleria una volta.
has-navigation:boolean	Indica se includere i controlli di navigazione nella galleria.
navigation-thumbnails:boolean	Indica se utilizzare miniature per la navigazione al posto dei punti.
navigation-highlight:color	Codice colore CSS utilizzato per evidenziare il frame attivo nella navigazione.
scaling:string	Indica come i contenuti dell'immagine saranno ridimensionati per adattarli al frame.
swipe-axis:string	L'asse su cui viene rilevato lo scorrimento.
offset:number	La quantità di spazio vuoto tra frame di contenuti adiacenti.
frame-width:number	La larghezza di un frame di contenuti. Sostituisce num-frames-to-display.
frame-height:number	L'altezza di un frame di contenuti.
autoplay-duration:number	La durata totale della riproduzione automatica dei frame.
autoplay-step-interval:number	L'intervallo dopo cui viene mostrato ogni frame durante la riproduzione automatica.
exit-urls:string	Stringa di URL di uscita, separati da virgole, corrispondenti alle immagini nella galleria.
disable-gesture:boolean	Nasconde/disattiva il componente Gesto che permette la navigazione mediante tocco nella galleria.
pause-front-media:boolean	Al cambio del frame corrente, indica se mettere in pausa gli elementi multimediali (ad esempio, contenuti video o audio) del frame precedente.
resume-next-media:boolean	Al cambio del frame corrente, indica se riprendere gli elementi multimediali (ad esempio, contenuti video o audio) del nuovo frame corrente.

Eventi

Nome	Descrizione
firstinteraction	Inviato quando l'utente interagisce con la galleria per la prima volta.
allframesviewed	Inviato quando tutti i frame della galleria sono stati mostrati almeno una volta.
allframesloaded	Inviato quando tutti i frame della galleria sono stati caricati.
autoplayended	Inviato quando la riproduzione automatica viene terminata per qualsiasi motivo. event.detail.completed è true se termina naturalmente al raggiungimento della durata prevista; in caso contrario è false.
frameshown	Inviato quando viene mostrato un nuovo frame, dopo che tutte le animazioni necessarie sono state completate.
frameactivated	Inviato quando un nuovo frame inizia a essere attivo, anche se non è ancora visibile.
frameautoplayed	Inviato quando un frame viene attivato per la riproduzione automatica. Può verificarsi più spesso di frameshown, poiché si attiva separatamente per tutti i vari frame visibili nello stesso momento.
frametap	Inviato quando un utente tocca un frame.
reachleftend	Inviato quando la galleria raggiunge l'estremità sinistra.
reachrightend	Inviato quando la galleria raggiunge l'estremità destra.
framemouseover	Inviato quando l'utente posiziona il puntatore del mouse su un frame.
framemouseout	Inviato quando l'utente allontana il puntatore del mouse dal frame.
trackstart	Inviato quando inizia il trascinamento del mouse o del tocco.
track	Il componente registra i dati di posizione X e Y associati al trascinamento del mouse o del tocco.
trackend	Inviato quando termina il trascinamento del mouse o del tocco.

Metodi

Nome	Descrizione
goToFrame(frame:number, opt_animate:string)	Passa al frame specificato.
rotateOnce(opt_duration:number, opt_direction:string)	Mostra una volta ogni frame nella galleria.
stopRotation()	Ferma la rotazione automatica corrente.
goForwards()	Sposta la galleria in avanti di un frame.
goBackwards()	Sposta la galleria indietro di un frame.

Girandola

gwd-swirl

Componente Girandola.

Proprietà

Nome	Descrizione
yscroll:decimal	Il fattore di scorrimento da utilizzare per l'animazione girandola quando si esegue il rendering sullo stage.
settings:string	Apre la finestra di dialogo con le impostazioni del componente.

Eventi

Nome	Descrizione
ready	Inviato quando vengono caricati tutti gli asset secondari.

Area tocco

gwd-taparea

Astrazione per l'evento clic/tocco.

Proprietà

Nome	Descrizione
exit-override-url:string	L'URL di uscita da utilizzare quando l'Area tocco viene toccata.

Eventi

Nome	Descrizione
action	Inviato quando l'utente tocca il pulsante (dispositivi mobili) o vi fa clic sopra (dispositivi desktop).

Tocca per chiamare/inviare SMS

gwd-taptocall

Componente che, quando l'utente fa clic o tocca lo schermo, consente di chiamare o inviare un SMS al numero di telefono configurato.

Proprietà

Nome	Descrizione
number:string	Numero di telefono da chiamare o a cui inviare un messaggio.
action:string	Consente di scegliere se inviare un SMS o avviare una telefonata.

Eventi

Nome	Descrizione
action	Inviato quando l'utente tocca il pulsante (dispositivi mobili) o vi fa clic sopra (dispositivi desktop).
taptocall	Inviato quando l'utente inizia una chiamata o un SMS.

Metodi

Nome	Descrizione
dial()	Avvia la chiamata o invia un SMS al numero configurato.

Galleria con transizione

gwd-transitiongallery

Componente Galleria con transizione.

Proprietà

Nome	Descrizione
settings:string	Apre la finestra di dialogo con le impostazioni del componente.
images:string	Stringa di percorsi alle immagini utilizzati nella galleria, separati da virgola.
scaling:string	Indica come l'immagine sarà ridimensionata per adattarla al frame.
exit-urls:string	Stringa di URL di uscita, separati da virgole, corrispondenti alle immagini nella galleria.

Eventi

Nome	Descrizione
autoplayended	Inviato quando la riproduzione automatica viene terminata per qualsiasi motivo. event.detail.completed è true se termina naturalmente al raggiungimento del numero di loop previsto; in caso contrario è false.
frameactivated	Inviato quando un nuovo frame inizia a essere attivo, anche se non è ancora visibile.
frameshown	Inviato quando viene mostrato un nuovo frame.
frametap	Inviato quando un utente tocca un frame.
rotateonceended	Inviato quando la rotazione viene terminata per qualsiasi motivo. event.detail.completed è true se termina naturalmente; in caso contrario è false.
reachleftend	Inviato quando la galleria raggiunge l'estremità sinistra.
reachrightend	Inviato quando la galleria raggiunge l'estremità destra.

Metodi

Nome	Descrizione
goToFrame(frame:number, with_animation:boolean)	Passa al frame specificato.
rotateOnce(startFromCurrentFrame:boolean)	Mostra il frame nella galleria dal frame iniziale se il valore di startFromCurrentFrame è false o non viene specificato, altrimenti a partire dal frame corrente. La rotazione si interrompe prima di raggiungere il frame iniziale.
startAutoplay(startFromCurrentFrame:boolean)	Avvia la riproduzione automatica nella galleria dal frame iniziale se il valore di startFromCurrentFrame è false o non viene specificato, altrimenti a partire dal frame corrente. La riproduzione automatica si interrompe quando viene raggiunto il numero di loop.
stop()	Annulla l'animazione se è in corso.
goForwards()	Sposta la galleria in avanti di un frame.
goBackwards()	Sposta la galleria indietro di un frame.

Transizione Veneziane

gwd-blinds

Componente dell'effetto Veneziane, che rivela la nuova immagine come se si trovasse dietro a veneziane, le cui stecche si aprono una dopo l'altra a partire da un bordo e arrivando a quello opposto.

Proprietà

Nome	Descrizione
direction:dropdown	La direzione dell'effetto.
blinds:number	Il numero di veneziane.
transparentbackground:boolean	Stabilisce se mostrare o meno lo sfondo trasparente prima di visualizzare le veneziane della nuova immagine. Se è false, le veneziane vengono sovrapposte alla vecchia immagine.

Transizione Comparsa a porta

gwd-door-wipe

Il componente dell'effetto Comparsa a porta è una variante dell'effetto A comparsa, con due tipi basati sulla direzione della comparsa. La comparsa a porta che si apre rivela la nuova immagine a partire dal centro di quella vecchia, come se si aprisse una porta a doppio battente. La comparsa a porta che si chiude rivela la nuova immagine a partire dai bordi opposti di quella vecchia e proseguendo fino al centro, come se si chiudesse una porta a doppio battente.

Proprietà

Nome	Descrizione
orientation:dropdown	L'orientamento dell'animazione.
direction:dropdown	La direzione dell'effetto Comparsa a porta.

Transizione Dissolvenza

gwd-fade

Componente Dissolvenza per la transizione.

Transizione Comparsa circolare

gwd-iris-wipe

Componente dell'effetto Comparsa circolare, che rivela la nuova immagine con un cerchio crescente avente origine per impostazione predefinita dal centro del frame.

Proprietà

Nome	Descrizione
originpercentx:number	L'origine del cerchio crescente nell'asse x rispetto alla larghezza del frame.
originpercenty:number	L'origine del cerchio crescente nell'asse y rispetto all'altezza del frame.

Transizione Spinta

gwd-push

Componente dell'effetto di transizione Spinta, in cui la nuova immagine scivola sullo schermo mentre la vecchia immagine viene spinta al di fuori dell'area visibile.

Proprietà

Nome	Descrizione
direction:dropdown	La direzione dell'effetto Spinta.

Transizione Comparsa radiale

gwd-radial-wipe

Il componente dell'effetto Comparsa radiale è una variante dell'effetto A comparsa, in cui la nuova immagine viene rivelata estendendo un raggio intorno a un punto specifico, come la lancetta di un orologio.

Proprietà

Nome	Descrizione
direction:dropdown	La direzione dell'effetto.
originpercentx:number	L'origine nell'asse x rispetto alla larghezza del frame che inizia a estendere il raggio per rivelare la nuova immagine.
originpercenty:number	L'origine nell'asse y rispetto all'altezza del frame che inizia a estendere il raggio per rivelare la nuova immagine.

Transizione Ruota

gwd-rotate

Componente dell'effetto Ruota, in cui la vecchia immagine ruota mentre lo zoom aumenta, dopodiché lo zoom diminuisce di nuovo sulla nuova immagine mentre viene completata la rotazione.

Proprietà

Nome	Descrizione
direction:dropdown	La direzione dell'effetto.

Transizione Sezione

gwd-slice

Componente dell'effetto Sezione, che rivela la nuova immagine sotto forma di sezioni o barre mostrate una dopo l'altra.

Proprietà

Nome	Descrizione
direction:dropdown	La direzione dell'effetto Sezione.
slices:number	Il numero di sezioni o barre che suddividono la visualizzazione.
transparentbackground:boolean	Stabilisce se mostrare o meno lo sfondo trasparente prima di visualizzare le sezioni della nuova immagine. Se è false, le sezioni vengono sovrapposte alla vecchia immagine.

Transizione Spinta con divisione

gwd-split-push

Il componente dell'effetto Spinta con divisione è una variante dell'effetto Spinta, in cui la vecchia immagine viene suddivisa in due parti in senso orizzontale o verticale. Le parti divise corrispondenti della nuova immagine spingono ogni parte della vecchia immagine fuori dall'area visibile in direzioni opposte.

Proprietà

Nome	Descrizione
orientation:dropdown	L'orientamento dell'animazione.

Transizione Comparsa a strisce

gwd-stripe-wipe

Il componente dell'effetto Comparsa a strisce è una variante dell'effetto A comparsa, in cui strisce a tinta unita di colori alternati si ingrandiscono contemporaneamente sullo schermo fino a coprire la vecchia immagine. Dopodiché le strisce si restringono per mostrare la nuova immagine.

Proprietà

Nome	Descrizione
direction:dropdown	La direzione dell'effetto.
stripes:number	Il numero di strisce di ciascun colore.
color1:color	Valore esadecimale di uno dei due colori alternati delle strisce.
color2:color	Valore esadecimale dell'altro colore delle strisce.

Transizione Tende veneziane

gwd-venetian-blinds

Componente dell'effetto Tende veneziane, che rivela la nuova immagine come se si trovasse dietro a veneziane, con le stecche che si aprono contemporaneamente o una dopo l'altra.

Proprietà

Nome	Descrizione
orientation:dropdown	L'orientamento dell'animazione.
blinds:number	Il numero di veneziane.
staggered:boolean	Stabilisce se la transizione delle stecche deve avvenire con un ritardo. Se è false, tutte le stecche effettuano la transizione contemporaneamente.

Transizione A comparsa

gwd-wipe

Componente di transizione A comparsa. Nell'effetto A comparsa standard, la nuova immagine sostituisce gradualmente la vecchia immagine dietro una linea che cancella quest'ultima da un lato a quello opposto.

Proprietà

Nome	Descrizione
direction:dropdown	La direzione dell'effetto.
angle:number	L'angolo che inclina la linea che sostituisce la vecchia immagine con quella nuova.

Transizione Zigzag

gwd-zigzag

Componente dell'effetto Zigzag, che rivela la nuova immagine sotto forma di motivo a griglia serpeggiante. Un effetto a zigzag orizzontale mostra i riquadri della nuova immagine in righe successive, alternate da sinistra a destra e da destra a sinistra. Un effetto a zigzag verticale mostra i riquadri della nuova immagine in colonne successive, alternate dall'alto verso il basso e dal basso verso l'alto.

Proprietà

Nome	Descrizione
orientation:dropdown	L'orientamento dell'animazione.
rows:number	Il numero di righe dell'effetto a zigzag.
columns:number	Il numero di colonne dell'effetto a zigzag.

Video

gwd-video

Componente che aggrega un elemento HTMLVideoElement.

Proprietà

Nome	Descrizione
autoplay:boolean	Indica se riprodurre automaticamente il video al momento del caricamento.
loop:boolean	Indica se ripetere continuamente il video dopo il completamento.
muted:boolean	Indica se l'audio del video deve essere disattivato all'inizio.
controls:boolean	Indica se sono attivati i controlli nativi predefiniti del player.
sources:file	Stringa di origini video, separate da virgole, in diversi formati.
poster:string	URL che indica un frame poster da mostrare fino a quando l'utente avvia la riproduzione o esegue una ricerca.

Eventi

Nome	Descrizione
play	Inviato quando la riproduzione inizia dopo essere stata messa in pausa; in altre parole, quando la riproduzione viene ripresa dopo un evento precedente di messa in pausa.
pause	Inviato quando la riproduzione è in pausa.
playing	Inviato quando inizia la riproduzione (per la prima volta, dopo la messa in pausa oppure dopo la fine e il successivo riavvio).
ended	Inviato quando la riproduzione è completata.
volumechange	Inviato quando cambia il volume dell'audio (sia quando viene impostato il volume sia quando l'attributo muted viene modificato).
seeked	Inviato al termine di un'operazione di ricerca.
waiting	Inviato quando l'operazione richiesta (ad esempio, la riproduzione) viene ritardata in attesa del completamento di un'altra operazione (ad esempio, una ricerca).

Metodi

Nome	Descrizione
mute()	Attiva/disattiva l'audio del video.
pause()	Mette in pausa il video.
play()	Riproduce il video.
replay()	Ripete il video.
seek(time:number)	Salta al momento specificato nel video.
setVolume(volume:number)	Imposta il volume del video.
setSources(sources:string)	Imposta le sorgenti del video.

YouTube

gwd-youtube

Estende l'elemento HTMLElement per aggregare le chiamate all'API di YouTube.

Proprietà

Nome	Descrizione
video-url:string	L'URL del video di YouTube.
autoplay:string	Negli ambienti supportati, il video di YouTube viene riprodotto automaticamente al momento del caricamento.
preview-duration:number	Imposta la durata dell'anteprima. Utilizzato solo quando l'attributo autoplay è impostato su preview.
controls:string	Mostra i controlli video (none, autohide).
color:string	Il tema a colori della barra di avanzamento del lettore (rosso o bianco)
muted:boolean	Indica se l'audio del video deve essere disattivato all'inizio.
loop:boolean	Indica se ripetere continuamente il video dopo il completamento.
pause-on-end:boolean	Mette in pausa il video quando è rimasto 1 secondo.
start-position:number	Avvia il video in un determinato momento (secondi).
allowfullscreen:boolean	Consente la riproduzione a schermo intero su desktop.
extra-player-args:string	Altri parametri del player di YouTube, come descritto nella pagina https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters

Eventi

Nome	Descrizione
buffering	Il player di YouTube sta eseguendo il buffering.
ended	Il video di YouTube ha raggiunto la fine.
paused	Il video di YouTube è stato messo in pausa.
playing	Inizia la riproduzione del video di YouTube.
replayed	Il video di YouTube è stato riprodotto nuovamente.
viewed0percent	Inviato quando è stato visualizzato lo 0% del video.
viewed25percent	Inviato quando è stato visualizzato il 25% del video.
viewed50percent	Inviato quando è stato visualizzato il 50% del video.
viewed75percent	Inviato quando è stato visualizzato il 75% del video.
viewed100percent	Inviato quando è stato visualizzato il 100% del video.
previewed0percent	Inviato quando è stato visualizzato lo 0% dell'anteprima.
previewed25percent	Inviato quando è stato visualizzato il 25% dell'anteprima.
previewed50percent	Inviato quando è stato visualizzato il 50% dell'anteprima.
previewed75percent	Inviato quando è stato visualizzato il 75% dell'anteprima.
previewed100percent	Inviato quando è stato visualizzato il 100% dell'anteprima.

Metodi

Nome	Descrizione
toggleMute()	Attiva/disattiva l'audio del video.
pause()	Mette in pausa il video.
play()	Riproduce il video.
replay()	Ripete il video.
seek(time:number)	Salta al momento specificato nel video.
setYouTubeId(id:string, cueOnly:boolean)	Modifica l'origine del video di YouTube nell'ID specificato.