Galerie à 360°
Zone cliquable 3D
Conteneur de la zone cliquable 3D
Modélisation 3D
Outil de visualisation du modèle 3D
Ajouter à l'agenda
Audio
Galerie carrousel
Point de repère
Date Swap
Navigation dans la galerie
Annonce générique
Geste
Annonce Google
Zone cliquable
iFrame
Image
Bouton "Image"
Effet d'image
Effet d'image avant et après
Effet d'image "Respiration"
Effet d'image "Affichage"
Effet d'image "Vague"
Carte
Page
Ensemble de pages
Parallaxe
Effets de particules
Particules
Feuille de sprites
Notes
Street View
Galerie à faire glisser
Swirl
Zone cliquable
Appuyer pour appeler/envoyer un SMS
Galerie de transition
Transition "Stores"
Transition "Effacer" de type "Porte"
Transition "Fondu"
Transition "Effacer" de type "Iris"
Transition "Pousser"
Transition "Effacer" de type "Radial"
Transition "Faire pivoter"
Transition "Tranche"
Transition "Pousser" de type "Scinder"
Transition "Effacer" de type "Rayure"
Transition "Stores" de type "Vénitien"
Transition "Effacer"
Transition "Zigzag"
Vidéo
YouTube
gwd-360gallery
Un composant de galerie qui permet d'afficher un objet en cours de rotation.
Propriétés
| Nom | Description |
|---|---|
images:string |
Chaîne de chemins d'accès séparés par une virgule qui correspondent aux images utilisées dans la galerie. |
autoplay:boolean |
Les images de la galerie doivent être lues automatiquement une fois qu'elle est chargée. |
wrap:boolean |
L'utilisateur doit pouvoir balayer l'écran de façon à passer de la première à la dernière image et vice versa, sans que la lecture s'arrête au début ou à la fin de la galerie. |
Événements
| Nom | Description |
|---|---|
firstinteraction |
Envoyé lorsque l'utilisateur interagit avec la galerie pour la première fois. |
allframesviewed |
Envoyé lorsque toutes les images de la galerie sont affichées au moins une fois. |
allframesloaded |
Envoyé lorsque toutes les images de la galerie sont chargées. |
frameshown |
Envoyé lorsqu'une nouvelle image s'affiche. |
frameactivated |
Envoyé lorsqu'une nouvelle image est activée, même si elle n'est pas encore visible. |
frametap |
Envoyé lorsque l'utilisateur appuie sur une image. |
Méthodes
| Nom | Description |
|---|---|
goToFrame(frame:number, opt_animate:string, opt_direction:string) |
Passer à l'image indiquée |
rotateOnce(opt_duration:number, opt_direction:string) |
Permet de faire pivoter l'objet de la galerie une fois. |
goForwards() |
Avance d'une image à la fois dans la galerie. |
goBackwards() |
Recule d'une image à la fois dans la galerie. |
gwd-3d-hotspot
Un élément qui permet d'afficher des annotations sur un modèle 3D.
Propriétés
| Nom | Description |
|---|---|
data-position:string |
Position de la zone cliquable. |
data-normal:string |
Vecteur spécifiant la partie avant de la zone cliquable. |
hotspot-name:string |
Nom de la zone cliquable. |
hotspot-title:string |
Texte du titre à afficher dans la fiche info. |
hotspot-description:string |
Texte de la description à afficher dans la fiche info. |
hide-infocard:boolean |
Indique si la fiche info doit être masquée. |
gwd-3d-hotspot-container
Élément de conteneur pour les annotations sur un modèle 3D.
Propriétés
| Nom | Description |
|---|---|
up-image:file |
URL de l'image des zones cliquables 3D lorsque l'utilisateur n'appuie pas sur elles. |
over-image:file |
URL de l'image des zones cliquables 3D lorsque l'utilisateur les survole avec la souris ou pointe sur elles. |
down-image:file |
URL de l'image des zones cliquables 3D lorsque l'utilisateur appuie sur elles. |
gwd-3d-model
Un composant de l'outil de visualisation 3D.
Propriétés
| Nom | Description |
|---|---|
id-url:download |
ID ou URL du modèle 3D. |
data-gwd-refresh-assets:string |
Attribut utilisé par Google Web Designer pour déterminer si les éléments 3D doivent être actualisés. |
glass:boolean |
Active le matériau verre pour le modèle 3D. |
src:string |
Modèle à afficher. |
transparent:boolean |
Active l'arrière-plan transparent sur le modèle 3D. |
gesture-cue-icon:file |
Icône de repère de geste. |
gesture-cue-text:string |
Texte affiché sous l'icône de repère de geste. |
gesture-cue-duration:number |
Durée (en secondes) d'affichage du repère de geste. La valeur -1 signifie qu'il n'y a pas de limite de durée. |
Événements
| Nom | Description |
|---|---|
scene-rendered |
Envoyé lorsque la scène du modèle 3D est affichée pour la première fois. |
camera-changed |
Envoyé lorsque l'une des propriétés de la caméra 3D est modifiée. L'objet "event.detail" contient toutes les propriétés actuelles de la caméra. |
hotspot-clicked |
Envoyé lorsqu'un internaute clique sur une zone cliquable. L'objet "event.detail" contient le nom de la zone cliquable sur laquelle l'internaute clique. |
interaction-start |
Envoyé lorsque l'internaute commence à interagir avec le modèle 3D. |
interaction-end |
Envoyé lorsque l'internaute cesse d'interagir avec le modèle 3D. |
Méthodes
| Nom | Description |
|---|---|
setYaw(yaw:number) |
Définit l'angle du lacet (en degrés), sans animation, en tenant compte des limites de la caméra. |
setTargetYaw(targetYaw:number) |
Définit l'angle du lacet (en degrés) en fonction des limites de la caméra ou des limites de rotation définies entre -360 et 360 degrés. |
setTargetPitch(targetPitch:number) |
Définit l'angle d'inclinaison cible (en degrés). |
incrementTargetPitch(pitchDelta:number) |
Augmente l'inclinaison cible selon un angle delta (en degrés). |
setTargetZoom(targetZoom:number) |
Définit le zoom cible (en mètres). |
incrementTargetZoom(zoomDelta:number) |
Augmente le zoom cible (en mètres). |
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) |
Définit le pivotement cible (en mètres). |
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) |
Définit le panoramique local cible (en mètres). |
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) |
Définit la couleur du matériau. |
playAnimation(animationName:string) |
Lit l'animation. |
pauseAnimation(animationName:string) |
Met l'animation en pause. |
setAnimationTime(animationName:string, animationTime:number) |
Définit la durée de l'animation (en secondes). |
lookAtHotspot(hotspotName:string) |
Déplace et fait pivoter la caméra pour placer le curseur sur la zone cliquable. |
gwd-3d-model-viewer
Un composant qui encapsule l'outil de visualisation du modèle 3D.
Propriétés
| Nom | Description |
|---|---|
src:file |
Fichier source du modèle 3D. |
gesture-cue-icon:file |
Icône de repère de geste. |
gesture-cue-text:string |
Texte affiché sous l'icône de repère de geste. |
gesture-cue-duration:number |
Durée (en secondes) d'affichage du repère de geste. La valeur -1 signifie qu'il n'y a pas de limite de durée. |
skybox-image:file |
Image de fond de la scène du modèle 3D. |
environment-image:file |
Contrôle le reflet lié à l'environnement du modèle 3D. |
Événements
| Nom | Description |
|---|---|
scene-rendered |
Envoyé lorsque la scène du modèle 3D est affichée pour la première fois. |
camera-changed |
Envoyé lorsque l'une des propriétés de la caméra 3D est modifiée. L'objet "event.detail" contient toutes les propriétés actuelles de la caméra. |
hotspot-clicked |
Envoyé lorsqu'un internaute clique sur une zone cliquable. L'objet "event.detail" contient le nom de la zone cliquable sur laquelle l'internaute clique. |
interaction-start |
Envoyé lorsque l'internaute commence à interagir avec le modèle 3D. |
interaction-end |
Envoyé lorsque l'internaute cesse d'interagir avec le modèle 3D. |
Méthodes
| Nom | Description |
|---|---|
setYaw(yaw:number) |
Définit l'angle du lacet (en degrés), sans animation, en tenant compte des limites de la caméra. |
setTargetYaw(targetYaw:number) |
Définit l'angle du lacet (en degrés) en fonction des limites de la caméra ou des limites de rotation définies entre -360 et 360 degrés. |
setTargetPitch(targetPitch:number) |
Définit l'angle d'inclinaison cible (en degrés). |
incrementTargetPitch(pitchDelta:number) |
Augmente l'inclinaison cible selon un angle delta (en degrés). |
setTargetZoom(targetZoom:number) |
Définit le zoom cible (en mètres). |
incrementTargetZoom(zoomDelta:number) |
Augmente le zoom cible (en mètres). |
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) |
Définit le pivotement cible (en mètres). |
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) |
Définit le panoramique local cible (en mètres). |
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) |
Définit la couleur du matériau. |
playAnimation(animationName:string) |
Lit l'animation. |
pauseAnimation(animationName:string) |
Met l'animation en pause. |
setAnimationTime(animationName:string, animationTime:number) |
Définit la durée de l'animation (en secondes). |
gwd-addtocalendar
Ajoute un événement à un agenda.
Propriétés
| Nom | Description |
|---|---|
event-title:string |
Nom de l'événement tel qu'il apparaîtra dans l'agenda de l'utilisateur. |
start-date:string |
Date de début de l'événement. |
start-time:string |
Heure de début de l'événement (au format 24 heures). |
end-date:string |
Date de fin de l'événement. |
end-time:string |
Heure de fin de l'événement (format 24 heures). |
timezone:string |
Fuseau horaire de l'événement. Lorsque cette propriété est définie, la date et l'heure sont ajustées si l'utilisateur se trouve dans un autre fuseau horaire. |
location:string |
Lieu de l'événement. |
description:string |
Description de l'événement. |
icalendar:boolean |
Indique si un fichier iCalendar doit être utilisé ou non. |
google:boolean |
Indique si un agenda Google Agenda doit être utilisé ou non. |
windows-live:boolean |
Indique si un agenda Windows Live doit être utilisé ou non. |
yahoo:boolean |
Indique si un agenda Yahoo! doit être utilisé ou non. |
bg-color:string |
Valeur hexadécimale de la couleur d'arrière-plan du menu déroulant. |
font-color:string |
Valeur hexadécimale de la couleur de police du menu déroulant. |
font-family:string |
Nom de la police du menu déroulant. |
font-size:string |
Taille de la police du menu déroulant. |
font-weight:string |
Épaisseur de la police du menu déroulant. |
highlight-color:string |
Valeur hexadécimale de la couleur de mise en surbrillance du menu déroulant. |
gwd-audio
Composant qui encapsule un élément HTMLAudioElement.
Propriétés
| Nom | Description |
|---|---|
autoplay:boolean |
Lire automatiquement ou non les éléments audio après avoir été chargés |
loop:boolean |
Lire en boucle ou non les éléments audio |
muted:boolean |
Couper ou non le son au début de la lecture. |
controls:boolean |
Activer ou non les commandes natives du lecteur par défaut. |
sources:file |
Chaîne de sources audio de différents formats séparées par une virgule. |
Événements
| Nom | Description |
|---|---|
play |
Envoyé lorsque la lecture des éléments multimédias reprend après une mise en pause. |
pause |
Envoyé quand la lecture est mise en pause |
playing |
Envoyé au début de la lecture d'un élément multimédia (soit lors de la première lecture, soit lors d'une reprise après une mise en pause ou une lecture complète). |
ended |
Envoyé à la fin de la lecture |
volumechange |
Envoyé quand le volume sonore est modifié (soit en changeant le volume, soit en utilisant la mise en sourdine) |
seeked |
Envoyé à la fin d'une opération de recherche |
waiting |
Envoyé quand l'opération demandée (comme la lecture) est différée en attendant la fin d'une autre (une recherche, par exemple) |
Méthodes
| Nom | Description |
|---|---|
mute() |
Active ou désactive le son. |
pause() |
Met en pause l'élément audio. |
play() |
Lit l'élément audio. |
replay() |
Lance une nouvelle lecture de l'élément audio. |
seek(time:number) |
Renvoie à un moment précis de l'élément audio. |
gwd-carouselgallery
Composant de galerie qui permet d'afficher les images avec une mise en page de type carrousel.
Propriétés
| Nom | Description |
|---|---|
images:string |
Chaîne de chemins d'accès séparés par une virgule qui correspondent aux images utilisées dans la galerie. |
groups:string |
Chaîne d'ID de groupe séparés par une virgule. |
transition-duration:number |
Vitesse d'animation de la galerie en millisecondes |
start-frame:number |
Numéro de l'image à afficher en premier. |
autoplay:boolean |
Lire les images automatiquement ou non |
has-navigation:boolean |
Inclure automatiquement ou non les commandes de navigation de la galerie. |
navigation-thumbnails:boolean |
Utiliser ou non des vignettes pour naviguer au lieu de points |
navigation-highlight:color |
Code couleur CSS utilisé pour signaler le cadre actif dans la navigation. |
scaling:string |
Adaptation de la taille de l'image au cadre |
frame-width:number |
Largeur d'un panneau de contenu. |
frame-height:number |
Hauteur d'un panneau de contenu. |
neighbor-rotation-y:number |
Rotation autour de l'axe Y appliquée aux éléments adjacents du panneau centré actif. Cette propriété permet d'incliner les panneaux adjacents. |
neighbor-translation-x:number |
Translation sur l'axe X appliquée aux éléments adjacents du panneau centré actif. Cette propriété permet d'ajuster la position des panneaux adjacents. |
neighbor-translation-y:number |
Translation sur l'axe Y appliquée aux éléments adjacents du panneau centré actif |
neighbor-translation-z:number |
Translation sur l'axe Z appliquée aux éléments adjacents du panneau centré actif. |
exit-urls:string |
Chaîne d'URL de sortie séparées par une virgule correspondant aux images de la galerie. |
show-reflection:boolean |
Afficher ou non un reflet basé sur CSS3. |
pause-front-media:boolean |
Lorsque l'image change, mettre en pause ou non la lecture des éléments multimédias (vidéo ou audio, par exemple) dans l'image précédente. |
resume-next-media:boolean |
Lorsque l'image change, reprendre ou non la lecture des éléments multimédias (vidéo ou audio, par exemple) dans la nouvelle image active. |
Événements
| Nom | Description |
|---|---|
firstinteraction |
Envoyé lorsque l'utilisateur interagit avec la galerie pour la première fois. |
allframesviewed |
Envoyé lorsque toutes les images de la galerie ont été affichées au moins une fois. |
allframesloaded |
Envoyé lorsque toutes les images de la galerie sont chargées. |
autoplayended |
Envoyé lorsque la lecture automatique se termine pour une raison quelconque. event.detail.completed a la valeur "true" si la lecture automatique a pris fin naturellement au bout du délai prévu. Dans les autres cas, la valeur obtenue est "false". |
frameshown |
Envoyé lorsqu'une nouvelle image s'affiche. |
frameactivated |
Envoyé lorsqu'une nouvelle image est activée, même si elle n'est pas encore visible. |
frameautoplayed |
Envoyé lorsque la lecture automatique est activée pour une image. Cet événement peut être déclenché plus souvent que frameshown, car il est envoyé séparément pour chacune des images visibles en même temps. |
frametap |
Envoyé lorsque l'utilisateur appuie sur une image. |
reachleftend |
Envoyé lorsque l'extrémité gauche de la galerie est atteinte. |
reachrightend |
Envoyé lorsque l'extrémité droite de la galerie est atteinte. |
trackstart |
Envoyé lorsque l'opération de glissement effectuée au moyen de la souris ou du doigt débute. |
track |
Des données de localisation (positions X et Y) associées à la trajectoire du curseur de la souris et du doigt sont enregistrées dans le composant. |
trackend |
Envoyé lorsque l'opération de glissement effectuée au moyen de la souris ou du doigt se termine. |
Méthodes
| Nom | Description |
|---|---|
goToFrame(index:number, opt_animate:string) |
Passer à l'image indiquée. |
goForwards(opt_animate:string) |
Passer à l'image suivante, si elle est disponible. |
goBackwards(opt_animate:string) |
Passer à l'image précédente. |
rotateOnce(opt_duration:number, opt_direction:string) |
Montrer chaque image de la galerie une fois |
stopRotation() |
Arrête la rotation automatique en cours. |
gwd-cuepoint
Un composant qui est associé à un composant vidéo de Google Web Designer et déclenche un événement lorsque la vidéo atteint un moment précis.
Propriétés
| Nom | Description |
|---|---|
time:number |
Heure à laquelle l'événement est déclenché, en secondes. |
Événements
| Nom | Description |
|---|---|
cuepoint |
Envoyé lorsque la lecture du contenu multimédia a atteint une durée définie dans un point de repère. |
Méthodes
| Nom | Description |
|---|---|
seek() |
Définit l'heure de la vidéo sur l'heure d'apparition d'un point de repère. |
setTime(time:number) |
Définit l'heure d'apparition du point de repère. |
gwd-dateswap
Le composant "Date Swap" modifie la visibilité de l'élément en fonction de la date actuelle par rapport à la plage de dates cible.
Propriétés
| Nom | Description |
|---|---|
from_date:string |
Chaîne représentant une date au format RFC2822 ou ISO 8601. |
to_date:string |
Chaîne représentant une date au format RFC2822 ou ISO 8601. |
Événements
| Nom | Description |
|---|---|
before |
Envoyé lorsque la date actuelle est antérieure à la date from_date (exclue). |
during |
Envoyé lorsque la date actuelle est comprise entre les dates from_date et to_date (incluses). |
after |
Envoyé lorsque la date actuelle est postérieure à la date to_date (exclue). |
Méthodes
| Nom | Description |
|---|---|
checkDate() |
Compare la date actuelle à la plage de dates. |
gwd-gallerynavigation
Commande de navigation pour un composant de galerie Google Web Designer.
Propriétés
| Nom | Description |
|---|---|
for:string |
Chaîne de chemins d'accès séparés par une virgule qui correspondent aux images utilisées dans la galerie. |
highlight:color |
Code couleur CSS utilisé pour signaler le cadre actif dans la navigation. |
use-thumbnails:boolean |
Utiliser ou non des vignettes pour naviguer au lieu de points |
gwd-genericad
Insère le conteneur d'annonce générique.
Événements
| Nom | Description |
|---|---|
adinitialized |
Envoyé juste avant que l'élément générique affiche le contenu de l'annonce. |
Méthodes
| Nom | Description |
|---|---|
initAd() |
Diffuse l'annonce lors de la réception des événements appropriés en provenance du composant "Enabler." |
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Navigue jusqu'aux dimensions agrandies de l'annonce. Si aucun ID de page n'est indiqué, la page par défaut s'affiche. |
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string) |
Quitte l'annonce et, si nécessaire, la replie. |
gwd-gesture
Abstraction pour certains événements gestuels.
Propriétés
| Nom | Description |
|---|---|
touch-action:string |
Indique comment l'action tactile doit être interprétée. Les valeurs valides sont auto, none, pan-x et pan-y. Le comportement par défaut reste le même, car il est défini sur none. |
Événements
| Nom | Description |
|---|---|
hover |
Envoyé lorsque le curseur de la souris ou le doigt entrent dans les limites du composant. |
hoverend |
Envoyé lorsque le curseur de la souris ou le doigt sortent des limites du composant. |
trackstart |
Envoyé lorsque l'opération de glissement effectuée au moyen de la souris ou du doigt débute. |
track |
Des données de localisation (positions X et Y) associées à la trajectoire du curseur de la souris et du doigt sont enregistrées dans le composant. |
trackend |
Envoyé lorsque l'opération de glissement effectuée au moyen de la souris ou du doigt se termine. |
tap |
Envoyé lorsqu'une action effectuée par un utilisateur avec le doigt ou la souris est enregistrée. |
swipeleft |
Envoyé lorsque l'utilisateur balaye l'écran vers la gauche. |
swiperight |
Envoyé lorsque l'utilisateur balaye l'écran vers la droite. |
swipeup |
Envoyé lorsque l'utilisateur balaye l'écran vers le haut. |
swipedown |
Envoyé lorsque l'utilisateur balaye l'écran vers le bas. |
gwd-google-ad
Insère le conteneur d'annonce Google.
Propriétés
| Nom | Description |
|---|---|
polite-load:boolean |
Respecter ou non la syntaxe Polite Load pour l'annonce. |
fullscreen:boolean |
Indique si l'annonce doit tenter de remplir l'écran ou non. |
Événements
| Nom | Description |
|---|---|
adinitialized |
Envoyé juste avant que l'élément affiche le contenu de l'annonce. |
expandstart |
Envoyé lorsque le composant "Enabler" déclenche un événement de début d'expansion. |
expandfinish |
Envoyé lorsque le composant "Enabler" déclenche un événement de fin d'expansion. |
collapsestart |
Envoyé lorsque le composant "Enabler" déclenche un événement de début de repli. |
collapsefinish |
Envoyé lorsque le composant "Enabler" déclenche un événement de fin de repli. |
fullscreensupport |
Envoyé si la fonction de mise en plein écran est acceptée. |
dynamicelementsready |
Envoyé après que des données dynamiques ont été appliquées au contenu de l'annonce. |
hostpagescroll |
Envoyé lorsque le composant "Enabler" déclenche un événement de défilement de la page hôte. |
Méthodes
| Nom | Description |
|---|---|
initAd() |
Diffuse l'annonce lors de la réception des événements appropriés en provenance du composant "Enabler." |
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Navigue jusqu'aux dimensions agrandies de l'annonce. Si aucun ID de page n'est indiqué, la page par défaut s'affiche. |
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) |
Quitte l'annonce et, si nécessaire, la replie. |
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) |
Quitte l'annonce pour passer à l'URL indiquée, quelle que soit la valeur définie dans Studio. L'annonce se replie si la valeur de la méthode opt_collapseOnExit est "true". |
incrementCounter(metric:string, opt_isCumulative:boolean) |
Effectue le suivi d'un événement de compteur. |
startTimer(timerId:string) |
Démarrer un minuteur d'événement |
stopTimer(timerId:string) |
Arrêter un minuteur d'événement |
reportManualClose() |
Enregistre la fermeture manuelle d'une annonce de type Flash transparent, pop-up, expand, encart avec pop-up ou encart avec Flash transparent. Cette méthode correspond à un proxy de la méthode Enabler.reportManualClose. |
gwd-hotspot
Composant qui affiche et masque une zone cliquable à des moments précis d'une vidéo.
Propriétés
| Nom | Description |
|---|---|
show-time:number |
Heure à laquelle la zone cliquable commence à être visible, en secondes. |
hide-time:number |
Heure à laquelle la zone cliquable cesse d'être visible, en secondes. |
left:string |
Position gauche de la zone cliquable au-dessus de la vidéo par rapport à la largeur de l'image de la vidéo (par exemple, 5 %). |
top:string |
Position supérieure de la zone cliquable au-dessus de la vidéo par rapport à la hauteur de l'image de la vidéo (par exemple, 5 %). |
width:string |
Largeur de la zone cliquable proportionnellement à la vidéo par rapport à la largeur de l'image de la vidéo. |
height:string |
Hauteur de la zone cliquable proportionnellement à la vidéo par rapport à la hauteur de l'image de la vidéo. |
Événements
| Nom | Description |
|---|---|
hotspotshown |
Envoyé lorsque la zone cliquable est visible. |
hotspothidden |
Envoyé lorsque la zone cliquable est masquée. |
Méthodes
| Nom | Description |
|---|---|
show(showHide:boolean) |
Activer/Désactiver la visibilité de la zone cliquable |
seek(showHide:boolean) |
Permet de définir l'heure d'une vidéo sur l'heure d'affichage ou de masquage de la zone cliquable. |
setTimes(showTime:number, hideTime:number) |
Définit les heures d'affichage et de masquage de la zone cliquable. |
gwd-iframe
Composant qui encapsule un élément HTMLIframeElement.
Propriétés
| Nom | Description |
|---|---|
source:string |
Source du composant iFrame. Cette propriété remplace l'attribut src de l'élément "Image" natif. |
scrolling:string |
Indique si le composant iFrame doit afficher ou non des barres de défilement. |
Événements
| Nom | Description |
|---|---|
iframeload |
Envoyé lorsque le composant "iFrame" est chargé. |
Méthodes
| Nom | Description |
|---|---|
setUrl(url:string) |
Permet de modifier l'URL du composant "iFrame" et de le charger immédiatement. |
gwd-image
Composant qui encapsule l'élément HTMLImageElement afin d'accepter le chargement différé de la source de l'image.
Propriétés
| Nom | Description |
|---|---|
source:file |
Source de l'image. Cette propriété remplace l'attribut src de l'élément "Image" natif. |
alt:string |
Texte de substitution de l'image. |
scaling:string |
Indique comment l'image doit être mise à l'échelle pour s'adapter au cadre. |
alignment:string |
Détermine comment l'image doit s'aligner dans la zone d'affichage. |
focalpoint:string |
Encode un point de fuite d'image en tant que coordonnées x/y en pixels. |
disablefocalpoint:boolean |
Désactive le point de fuite défini par l'attribut focalpoint (utilisé en interne par Google Web Designer). |
gwd-imagebutton
Un bouton "Image" avec trois états visuels : "haut", "superposée" et "bas"
Propriétés
| Nom | Description |
|---|---|
up-image:file |
URL de l'image du bouton lorsque l'utilisateur n'appuie pas sur lui. |
over-image:file |
URL de l'image du bouton lorsque l'utilisateur le survole avec la souris ou pointe sur lui. |
down-image:file |
URL de l'image du bouton lorsque l'utilisateur appuie sur lui. |
bgcolor:string |
Couleur d'arrière-plan du bouton. |
alignment:string |
Détermine comment l'image doit s'aligner dans la zone d'affichage. |
scaling:string |
Ajustement de l'image dans le conteneur parent |
disabled:boolean |
Désactiver ou non le bouton |
Événements
| Nom | Description |
|---|---|
imagebuttonloaded |
Envoyé lorsque toutes les images ont été chargées. |
Méthodes
| Nom | Description |
|---|---|
toggleEnable() |
Passe de l'état "activé" à "désactivé", et vice versa. |
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string) |
Définit les sources des images pour tous les états du bouton. |
gwd-image-effect
Composant "Effet d'image".
Propriétés
| Nom | Description |
|---|---|
scaling:string |
Indique comment l'image doit être mise à l'échelle pour s'adapter au cadre. |
time-limit:number |
Durée maximale de l'animation. La valeur -1 signifie qu'il n'y a pas de limite de durée. |
settings:string |
Ouvre la boîte de dialogue des paramètres du composant. |
images:string |
Chaîne de chemins d'accès séparés par une virgule qui correspondent aux images utilisées dans l'effet d'image. |
Événements
| Nom | Description |
|---|---|
autoplayended |
Envoyé lorsque la lecture automatique est terminée une fois la limite de temps atteinte. |
Méthodes
| Nom | Description |
|---|---|
play() |
Lit l'animation. |
pause() |
Met l'animation en pause. |
gwd-before-and-after
Effet où deux images similaires sont regroupées dans une comparaison de type "avant/après".
gwd-breathe
Effet qui permet d'animer une image affichée en grand format et contractée de manière élastique.
gwd-reveal
Effet dans lequel une image est analysée par une zone de mise au point elliptique pour dévoiler une deuxième image.
gwd-wave
Effet qui applique une transformation de type vague animée à une image, ce qui la fait onduler.
gwd-map
Développe l'élément HTMLElement afin d'encapsuler les appels d'API Google Maps.
Propriétés
| Nom | Description |
|---|---|
api-key:string |
Clé d'API Google (voir la page https://developers.google.com/maps/documentation/javascript/get-api-key) |
query:string |
Nom de la requête de recherche visant à renvoyer des emplacements à partir de l'API Google Places |
start-latitude:decimal |
Coordonnée de latitude de départ. La valeur doit être comprise entre -90 et 90 (degrés). |
start-longitude:decimal |
Coordonnée de longitude de départ. La valeur doit être comprise entre -180 et 180 (degrés). |
request-user-location:boolean |
Indique si la position de l'utilisateur est requise. Si la valeur est "true", l'utilisateur sera invité à partager sa position. |
client-id:string |
ID client Google Maps Premier. |
search-radius:number |
Rayon minimal de recherche de position (en mètres) |
result-limit:number |
Nombre maximal de résultats à afficher pour chaque requête |
start-zoom:number |
Niveau de zoom de départ, indiqué dans l'unité de mesure utilisée par l'API Google Maps. La valeur par défaut est établie à 16, au niveau du quartier. |
marker-src:string |
Nom de fichier de l'image repère, en tant que sprite contenant les composants "désactivé", "activé" et "ombre" |
gps-src:string |
Nom de fichier de l'image du point bleu de localisation GPS |
msg-start-position-prompt:string |
Chaîne de localisation pour le texte de la boîte de dialogue invitant à sélectionner une position de départ |
msg-gps-button-label:string |
Chaîne de localisation de l'étiquette du bouton qui récupère la position des utilisateurs à partir de l'API de géolocalisation |
msg-manual-position-button-label:string |
Chaîne de localisation pour l'étiquette du bouton qui ouvre le champ de recherche de position |
msg-manual-position-prompt:string |
Chaîne de localisation pour le texte de la boîte de dialogue invitant à rechercher une position de départ |
msg-manual-position-placeholder:string |
Chaîne de localisation pour le texte d'espace réservé du champ de recherche permettant de trouver une position de départ |
msg-geocode-failure:string |
Chaîne de localisation du texte de la boîte de dialogue qui s'affiche en cas d'échec d'une tentative d'utilisation de l'API de géolocalisation. |
msg-no-results-found:string |
Chaîne de localisation pour le texte de la boîte de dialogue qui s'affiche quand aucun résultat n'a été trouvé pour la position sélectionnée |
Événements
| Nom | Description |
|---|---|
pinclick |
Lorsque l'utilisateur sélectionne un repère sur la carte. |
Méthodes
| Nom | Description |
|---|---|
setCenter(latitude:number, longitude:number, opt_accuracy:number) |
Permet de définir le centre de la carte au niveau de la position spécifiée par les coordonnées de latitude/longitude. |
gwd-page
Une "page" représente une seule fiche dans l'ensemble de pages.
Propriétés
| Nom | Description |
|---|---|
expanded:boolean |
Considérer ou non la page comme une page développée (spécifique à l'annonce). |
centered:boolean |
Centrer ou non le contenu de la page. |
alt-orientation-page:string |
ID de la page représentant le mieux ce contenu dans l'orientation opposée |
Événements
| Nom | Description |
|---|---|
attached |
Envoyé juste après que la page a été jointe au DOM |
detached |
Envoyé juste après que la page a été supprimée du DOM |
pageactivated |
Envoyé lorsque la page est prête à être affichée. |
pagedeactivated |
Envoyé lorsque la page n'est plus affichée. |
pageload |
Envoyé après que le contenu de la page a été correctement chargé. |
pagepresenting |
Envoyé juste avant que l'animation d'introduction de la page commence. |
shake |
Envoyé lorsqu'un geste consistant à secouer un appareil est détecté. |
tilt |
Envoyé lorsqu'une inclinaison de l'appareil est détectée. |
rotatetoportrait |
Envoyé lorsqu'un appareil passe en mode Portrait. |
rotatetolandscape |
Envoyé lorsqu'un appareil passe en mode Paysage. |
gwd-pagedeck
Un "pagedeck" est un ensemble de pages. Une seule page s'affiche à la fois et plusieurs pages peuvent se répéter au premier plan, dans n'importe quel ordre et avec n'importe quelle transition de page compatible.
Propriétés
| Nom | Description |
|---|---|
default-page:string |
ID de la page par défaut |
Événements
| Nom | Description |
|---|---|
pagetransitionstart |
Envoyé avant la transition d'une page. |
pagetransitionend |
Envoyé après la fin de la transition d'une page. |
Méthodes
| Nom | Description |
|---|---|
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Accède à la page suivante de l'ensemble de pages. |
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Accède à la page précédente de l'ensemble de pages. |
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Accède à la page indiquée de l'ensemble de pages. |
getCurrentPage() |
Renvoie la page actuelle ou la valeur "null" si aucune page ne s'affiche. |
getDefaultPage() |
Renvoie la page par défaut, si elle est indiquée, ou la première page. |
getPage(pageId:string) |
Renvoie la page dont l'identifiant est indiqué. |
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean) |
Renvoie l'élément de page dont la valeur de l'attribut correspond à la valeur indiquée ou -1 si la page n'est pas trouvée. |
getOrientationSpecificPage(orientation:string, pageId:string) |
Renvoie la page qui correspond à l'orientation indiquée. |
getElementById(id:string) |
Trouve l'élément correspondant à l'ID indiqué parmi toutes les pages de l'ensemble de pages. Dans la mesure où gwd-pagedeck ne conserve que la page active dans le DOM, la propriété standard document.getElementById(id) ne renvoie pas les éléments des pages inactives. Les annonces dynamiques renvoient fréquemment à des éléments contenus dans des pages inactives. Dans ce cas, cette méthode peut servir à déréférencer un élément en fonction de son identifiant. |
gwd-parallax
Composant "Parallaxe".
Propriétés
| Nom | Description |
|---|---|
settings:string |
Ouvre la boîte de dialogue des paramètres du composant. |
yscroll:decimal |
Facteur de défilement à utiliser pour l'animation de parallaxe lors de l'affichage dans l'espace de création. |
Événements
| Nom | Description |
|---|---|
ready |
Envoyé lorsque tous les éléments du composant "Parallaxe" sont chargés. |
gwd-particleeffects
Composant permettant de regrouper plusieurs effets de particules et images.
Propriétés
| Nom | Description |
|---|---|
autoplay:boolean |
Indique si l'animation doit être ou non lue automatiquement lorsque le composant est chargé. |
time-limit:number |
Durée maximale de l'animation. La valeur -1 signifie qu'il n'y a pas de limite de durée. |
settings:string |
Ouvre la boîte de dialogue des paramètres du composant. |
Événements
| Nom | Description |
|---|---|
timelimitreached |
Envoyé lorsque la lecture de l'animation a atteint la durée maximale indiquée. |
Méthodes
| Nom | Description |
|---|---|
play() |
Lit l'animation. |
pause() |
Met l'animation en pause. |
stop() |
Arrête l'animation. |
gwd-particles
Composant "Système de particules".
Propriétés
| Nom | Description |
|---|---|
acceleration-x:number |
Composant X de l'accélération en pixels/image/image. |
acceleration-y:number |
Composant Y de l'accélération en pixels/image/image. |
angle-max:number |
Angle maximal du sens de la vitesse des particules. |
angle-min:number |
Angle minimal du sens de la vitesse des particules. |
autoplay:boolean |
Indique si l'animation doit être ou non lue automatiquement lorsque le fichier "gwd-particleeffects" commence à être lu. |
color1:color |
Première couleur. |
color2:color |
Deuxième couleur. |
color-rate:number |
Vitesse à laquelle la couleur passe de la couleur 1 à la couleur 2 pour chaque image par addition, dans la plage [0, 1]. |
emit-interval:number |
Nombre d'images jusqu'à ce que la particule suivante soit émise. |
emit-x-max:string |
Coordonnée X maximale de la plage d'émission des particules. |
emit-x-min:string |
Coordonnée X minimale de la plage d'émission des particules. |
emit-y-max:string |
Coordonnée Y maximale de la plage d'émission des particules. |
emit-y-min:string |
Coordonnée Y minimale de la plage d'émission des particules. |
loop:boolean |
Indique si l'animation doit être lue en boucle. |
number:number |
Nombre de particules. |
opacity-min:number |
Opacité minimale des particules. |
opacity-max:number |
Opacité maximale des particules. |
opacity-rate:number |
Vitesse à laquelle l'opacité change par image, ajoutée à l'opacité actuelle d'une particule. |
random-colors:boolean |
Indique si les particules présentent des couleurs aléatoires entre la couleur 1 et la couleur 2. Si la valeur est "false", toutes les particules sont initialisées avec la couleur 1. |
shape:string |
Forme du sprite. |
size-max:number |
Taille maximale des particules en pixels. |
size-min:number |
Taille minimale des particules en pixels. |
size-rate:number |
Vitesse à laquelle la taille change par image, ajoutée à la taille actuelle d'une particule. |
skip-forward:number |
Passage à un moment où un pourcentage donné de particules a été émis dans un système de particules. |
speed-max:number |
Vitesse maximale des particules en pixels/image. |
speed-min:number |
Vitesse minimale des particules en pixels/image. |
sprite-image-src:file |
Source des images utilisées comme sprites. |
turbulence-frequency:number |
Fréquence des turbulences. Des valeurs plus élevées entraînent des irrégularités plus fréquentes dans le mouvement. La valeur doit être un nombre positif. |
turbulence-rate:number |
Vitesse à laquelle l'intensité change au fil du temps. |
turbulence-strength:number |
Intensité des turbulences qui s'exercent sur les particules. La valeur doit être un nombre positif. |
turbulence-trail:number |
Nombre d'états précédents et actuels d'une particule à afficher. |
Méthodes
| Nom | Description |
|---|---|
play() |
Lit l'animation. |
pause() |
Met l'animation en pause. |
stop() |
Arrête l'animation. |
gwd-spritesheet
Affiche une image clé ou une animation unique depuis la feuille de sprites.
Propriétés
| Nom | Description |
|---|---|
imagesource:file |
URL de l'image de la feuille de sprites. |
offsetx:number |
Décalage, en pixels, entre le bord gauche de la grille de sprites et, au choix :
|
offsety:number |
Décalage, en pixels, entre le bord supérieur de la grille de sprites et, au choix :
|
clipwidth:number |
Largeur, en pixels, d'un des éléments suivants :
|
clipheight:number |
Hauteur, en pixels, d'un des éléments suivants :
|
alignment:string |
Détermine la position de l'image dans son conteneur. |
scaling:string |
Détermine la façon dont des images de tailles différentes s'affichent dans le composant. |
totalframecount:number |
Nombre d'images qui composent l'animation. |
duration:number |
Durée d'affichage de chaque image, en millisecondes. |
loopcount:number |
Nombre de répétitions de l'animation. Saisissez 0 pour que l'animation se répète indéfiniment. |
autoplay:boolean |
Lire ou non l'animation automatiquement. |
endonstartframe:boolean |
Terminer ou non la lecture de l'animation sur l'image initiale |
reverseplay:boolean |
Lire ou non l'animation en sens inverse. |
Événements
| Nom | Description |
|---|---|
animationend |
Envoyé à la fin de l'animation. |
animationpause |
Envoyé lorsque l'animation est mise en pause. |
animationplay |
Envoyé lorsque la lecture de l'animation commence. |
animationrestart |
Envoyé lorsque la lecture de l'animation reprend après une mise en pause. |
Méthodes
| Nom | Description |
|---|---|
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean) |
Définit une nouvelle animation. |
play() |
Lit l'animation. |
pause() |
Met l'animation en pause. |
togglePlay() |
Lit l'animation ou la met en pause. |
restart() |
Relance l'animation. |
previousFrame() |
Affiche l'image précédente. |
nextFrame() |
Affiche l'image suivante. |
goToFrame(id:number) |
Affiche une image spécifique en fonction du numéro d'image. |
gwd-starratings
Composant permettant d'afficher une ligne d'étoiles représentant une note.
Propriétés
| Nom | Description |
|---|---|
ratingvalue:decimal |
Valeur de la note. |
iconsize:number |
Taille de l'icône en forme d'étoile. |
isemptyshown:boolean |
Indique si les icônes vides sont affichées ou non. |
isemptycolored:boolean |
Indique si les icônes vides sont colorées ou non. |
colorprimary:color |
Couleur de remplissage principale. |
colorsecondary:color |
Couleur en dégradé secondaire. |
gradienttype:string |
Type de dégradé. |
ratingmax:number |
Note maximale. |
ratingmin:decimal |
Note minimale. |
Événements
| Nom | Description |
|---|---|
complete |
Une fois que les icônes de notes ont été créées. |
validationerror |
La note est inférieure à la note minimale. |
gwd-streetview
Composant "Google Street View".
Propriétés
| Nom | Description |
|---|---|
key:string |
Pour savoir comment obtenir une clé unique pour votre application, consultez la page https://developers.google.com/maps/documentation/javascript/get-api-key. |
latitude:decimal |
Latitude du lieu. |
longitude:decimal |
Longitude du lieu. |
interaction:boolean |
Indiquer s'il est possible de faire un panoramique de la vue ou de la faire pivoter. |
heading:decimal |
Indiquer la direction prise par la boussole dans la vue de l'appareil photo. Les valeurs peuvent varier de 0 à 360, celles-ci indiquant toutes deux le nord. 90 indique l'est et 180 indique le sud. Si aucune direction n'est spécifiée, une valeur est calculée de façon à diriger l'appareil photo vers l'emplacement spécifié, selon l'angle de vue de la photo prise au plus près. |
pitch:decimal |
Angle d'inclinaison vers le haut ou vers le bas de l'appareil photo par rapport au véhicule Street View. Il correspond le plus souvent à l'horizon. Une valeur positive oriente l'appareil photo vers le haut (90 degrés indiquant l'inclinaison maximale vers le haut), tandis qu'une valeur négative oriente l'appareil photo vers le bas (-90 degrés indiquant l'inclinaison maximale vers le bas). |
zoom:number |
Indique le niveau de zoom de l'appareil photo par rapport au véhicule Street View. |
gwd-swipegallery
Un composant de galerie qui permet d'afficher les images dans une bande de contenu à faire glisser.
Propriétés
| Nom | Description |
|---|---|
images:string |
Chaîne de chemins d'accès séparés par une virgule qui correspondent aux images utilisées dans la galerie. |
groups:string |
Chaîne d'ID de groupe séparés par une virgule. |
transition-duration:number |
Vitesse d'animation de la galerie, en millisecondes. |
start-frame:number |
Image par laquelle commencer |
num-frames-to-display:number |
Nombre d'images à afficher simultanément. |
frame-snap-interval:number |
Nombre d'images à faire avancer à chaque balayage de l'écran. |
autoplay:boolean |
Faire pivoter ou non automatiquement la galerie une seule fois. |
has-navigation:boolean |
Inclure ou non les commandes de navigation de la galerie. |
navigation-thumbnails:boolean |
Utiliser ou non des vignettes pour naviguer au lieu de points |
navigation-highlight:color |
Code couleur CSS utilisé pour signaler le cadre actif dans la navigation. |
scaling:string |
Adaptation de la taille de l'image au cadre |
swipe-axis:string |
Axe en fonction duquel le mouvement de balayage est détecté. |
offset:number |
Quantité d'espace vide laissé entre des cadres de contenu adjacents |
frame-width:number |
Largeur d'un cadre de contenu. Ignore num-frames-to-display. |
frame-height:number |
Hauteur d'un cadre de contenu. |
autoplay-duration:number |
Durée totale de lecture automatique des images |
autoplay-step-interval:number |
Intervalle entre chaque image pendant la lecture automatique |
exit-urls:string |
Chaîne d'URL de sortie séparées par une virgule correspondant aux images de la galerie. |
disable-gesture:boolean |
Masque ou désactive le composant "Geste" qui active la fonction de navigation tactile de la galerie. |
pause-front-media:boolean |
Lorsque l'image change, mettre en pause ou non la lecture des éléments multimédias (vidéo ou audio, par exemple) dans l'image précédente. |
resume-next-media:boolean |
Lorsque l'image change, reprendre ou non la lecture des éléments multimédias (vidéo ou audio, par exemple) dans la nouvelle image active. |
Événements
| Nom | Description |
|---|---|
firstinteraction |
Envoyé lorsque l'utilisateur interagit avec la galerie pour la première fois. |
allframesviewed |
Envoyé lorsque toutes les images de la galerie ont été affichées au moins une fois. |
allframesloaded |
Envoyé lorsque toutes les images de la galerie sont chargées. |
autoplayended |
Envoyé lorsque la lecture automatique se termine pour une raison quelconque. event.detail.completed a la valeur "true" si la lecture automatique a pris fin naturellement au bout du délai prévu. Dans les autres cas, la valeur obtenue est "false". |
frameshown |
Envoyé lorsqu'une nouvelle image s'affiche après la lecture de toutes les animations requises. |
frameactivated |
Envoyé lorsqu'une nouvelle image est activée, même si elle n'est pas encore visible. |
frameautoplayed |
Envoyé lorsque la lecture automatique est activée pour une image. Cet événement peut être déclenché plus souvent que frameshown, car il est envoyé séparément pour chacune des images visibles en même temps. |
frametap |
Envoyé lorsque l'utilisateur appuie sur une image. |
reachleftend |
Envoyé lorsque l'extrémité gauche de la galerie est atteinte. |
reachrightend |
Envoyé lorsque l'extrémité droite de la galerie est atteinte. |
framemouseover |
Envoyé lorsque l'utilisateur passe le curseur de la souris sur une image. |
framemouseout |
Envoyé lorsque l'utilisateur déplace le curseur de la souris hors d'une image. |
trackstart |
Envoyé lorsque l'opération de glissement effectuée au moyen de la souris ou du doigt débute. |
track |
Des données de localisation (positions X et Y) associées à la trajectoire du curseur de la souris et du doigt sont enregistrées dans le composant. |
trackend |
Envoyé lorsque l'opération de glissement effectuée au moyen de la souris ou du doigt se termine. |
Méthodes
| Nom | Description |
|---|---|
goToFrame(frame:number, opt_animate:string) |
Accède à l'image indiquée. |
rotateOnce(opt_duration:number, opt_direction:string) |
Affiche chaque image de la galerie une fois. |
stopRotation() |
Arrête la rotation automatique en cours. |
goForwards() |
Avance d'une image à la fois dans la galerie. |
goBackwards() |
Recule d'une image à la fois dans la galerie. |
gwd-swirl
Composant "Swirl".
Propriétés
| Nom | Description |
|---|---|
yscroll:decimal |
Facteur de défilement à utiliser pour l'animation de type swirl lors de l'affichage dans l'espace de création. |
settings:string |
Ouvre la boîte de dialogue des paramètres du composant. |
Événements
| Nom | Description |
|---|---|
ready |
Envoyé lorsque tous les éléments enfants sont chargés. |
gwd-taparea
Abstraction pour l'action de cliquer ou d'appuyer.
Propriétés
| Nom | Description |
|---|---|
exit-override-url:string |
URL de sortie vers laquelle un utilisateur doit être redirigé lorsqu'il appuie sur la zone cliquable |
Événements
| Nom | Description |
|---|---|
action |
Envoyé lorsque l'utilisateur appuie (appareils mobiles) ou clique (ordinateurs) sur le bouton. |
gwd-taptocall
Composant permettant de passer un appel ou d'envoyer un SMS au numéro de téléphone configuré, si l'utilisateur clique ou appuie dessus
Propriétés
| Nom | Description |
|---|---|
number:string |
Numéro de téléphone à appeler ou auquel envoyer un SMS |
action:string |
Permet de sélectionner l'action désirée : appel ou envoi d'un SMS |
Événements
| Nom | Description |
|---|---|
action |
Envoyé lorsque l'utilisateur appuie (appareils mobiles) ou clique (ordinateurs) sur le bouton. |
taptocall |
Envoyé si un appel est passé ou si un SMS est envoyé. |
Méthodes
| Nom | Description |
|---|---|
dial() |
Passe l'appel ou envoie un SMS au numéro qui a été configuré. |
gwd-transitiongallery
Composant "Galerie de transition".
Propriétés
| Nom | Description |
|---|---|
settings:string |
Ouvre la boîte de dialogue des paramètres du composant. |
images:string |
Chaîne de chemins d'accès séparés par une virgule qui correspondent aux images utilisées dans la galerie. |
scaling:string |
Indique comment l'image doit être mise à l'échelle pour s'adapter au cadre. |
exit-urls:string |
Chaîne d'URL de sortie séparées par une virgule correspondant aux images de la galerie. |
Événements
| Nom | Description |
|---|---|
autoplayended |
Envoyé lorsque la lecture automatique se termine pour une raison quelconque. event.detail.completed a la valeur "true" si la lecture automatique a pris fin naturellement au bout du nombre défini de boucles. Dans les autres cas, la valeur obtenue est "false". |
frameactivated |
Envoyé lorsqu'une nouvelle image est activée, même si elle n'est pas encore visible. |
frameshown |
Envoyé lorsqu'une nouvelle image s'affiche. |
frametap |
Envoyé lorsque l'utilisateur appuie sur une image. |
rotateonceended |
Envoyé lorsque la rotation se termine pour une raison quelconque. event.detail.completed a la valeur "true" si la rotation a pris fin naturellement. Dans les autres cas, la valeur obtenue est "false". |
reachleftend |
Envoyé lorsque l'extrémité gauche de la galerie est atteinte. |
reachrightend |
Envoyé lorsque l'extrémité droite de la galerie est atteinte. |
Méthodes
| Nom | Description |
|---|---|
goToFrame(frame:number, with_animation:boolean) |
Accède à l'image indiquée. |
rotateOnce(startFromCurrentFrame:boolean) |
Affiche l'image dans la galerie à partir de celle de début si "startFromCurrentFrame" est défini sur "false" ou non spécifié, et sinon à partir de l'image en cours. La rotation s'arrête avant d'atteindre la première image. |
startAutoplay(startFromCurrentFrame:boolean) |
Démarre la lecture automatique dans la galerie à partir de celle de l'image de début si "startFromCurrentFrame" est défini sur "false" ou non spécifié, et sinon à partir de l'image en cours. La lecture automatique s'arrête lorsque le nombre défini de boucles est atteint. |
stop() |
Annule l'animation si elle est en cours. |
goForwards() |
Avance d'une image à la fois dans la galerie. |
goBackwards() |
Recule d'une image à la fois dans la galerie. |
gwd-blinds
Composant d'effet "Stores". La nouvelle image s'affiche comme si elle était placée derrière des stores de fenêtre, avec des lattes qui s'ouvrent l'une après l'autre, d'un bord et l'autre.
Propriétés
| Nom | Description |
|---|---|
direction:dropdown |
Sens de l'effet. |
blinds:number |
Nombre de stores. |
transparentbackground:boolean |
Indique s'il faut dévoiler l'arrière-plan transparent avant d'afficher les stores de la nouvelle image. Si la valeur est "false", les stores se superposent à l'image précédente. |
gwd-door-wipe
Un composant d'effet "Effacer" de type "Porte" est une variante de l'effet "Effacer". Il en existe deux types selon le sens de l'effacement. Un effet "Effacer" avec ouverture de porte permet d'afficher la nouvelle image à partir du centre de l'image précédente, comme si une porte double s'ouvrait. Un effet "Effacer" avec fermeture de porte permet d'afficher la nouvelle image à partir des bords opposés de l'image précédente, comme si une porte double se fermait.
Propriétés
| Nom | Description |
|---|---|
orientation:dropdown |
Orientation de l'animation. |
direction:dropdown |
Sens de l'effet "Effacer" de type "Porte". |
gwd-fade
Composant de transition "Fondu".
gwd-iris-wipe
Composant d'effet "Effacer" de type "Iris". La nouvelle image est dévoilée via un cercle grandissant qui démarre par défaut au centre de celle-ci.
Propriétés
| Nom | Description |
|---|---|
originpercentx:number |
Origine du cercle qui s'agrandit sur l'axe X par rapport à la largeur de l'image. |
originpercenty:number |
Origine du cercle qui s'agrandit sur l'axe Y par rapport à la hauteur de l'image. |
gwd-push
Composant d'effet de transition "Pousser". La nouvelle image s'affiche en poussant la précédente pour la faire disparaître.
Propriétés
| Nom | Description |
|---|---|
direction:dropdown |
Sens de l'effet Pousser". |
gwd-radial-wipe
Un composant d'effet "Effacer" de type "Radial" est une variante de l'effet "Effacer. La nouvelle image est dévoilée en balayant un rayon autour d'un point défini, de la même manière que l'aiguille d'une montre.
Propriétés
| Nom | Description |
|---|---|
direction:dropdown |
Sens de l'effet. |
originpercentx:number |
Origine sur l'axe X par rapport à la largeur de l'image qui commence à balayer un rayon pour révéler la nouvelle image. |
originpercenty:number |
Origine sur l'axe Y par rapport à la hauteur de l'image qui commence à balayer un rayon pour révéler la nouvelle image. |
gwd-rotate
Composant d'effet "Faire pivoter". L'image précédente pivote lors d'un zoom avant, puis laisse apparaître la suivante lors d'un zoom arrière, tout en terminant sa rotation.
Propriétés
| Nom | Description |
|---|---|
direction:dropdown |
Sens de l'effet. |
gwd-slice
Composant d'effet "Tranche". La nouvelle image s'affiche progressivement tranche par tranche ou barre après barre.
Propriétés
| Nom | Description |
|---|---|
direction:dropdown |
Sens de l'effet "Tranche". |
slices:number |
Nombre de tranches ou de barres qui divisent la vue. |
transparentbackground:boolean |
Indiquer s'il faut dévoiler l'arrière-plan transparent avant d'afficher les tranches de la nouvelle image. Si la valeur est "false", les tranches se superposent à l'image précédente. |
gwd-split-push
Un composant d'effet "Pousser" de type "Scinder". L'image précédente est scindée en deux parties verticalement ou horizontalement. Les parties scindées correspondantes de la nouvelle image poussent chaque partie de l'image précédente dans des directions opposées.
Propriétés
| Nom | Description |
|---|---|
orientation:dropdown |
Orientation de l'animation. |
gwd-stripe-wipe
Un composant d'effet "Effacer" de type "Rayure" est une variation de l'effet "Effacer". Des rayures de couleurs unies placées en alternance apparaissent simultanément à l'écran pour couvrir l'image précédente. Les rayures se réduisent ensuite pour dévoiler la nouvelle image.
Propriétés
| Nom | Description |
|---|---|
direction:dropdown |
Sens de l'effet. |
stripes:number |
Le nombre de rayures de chaque couleur. |
color1:color |
Valeur hexadécimale de l'une des deux couleurs de rayures utilisées en alternance. |
color2:color |
Valeur hexadécimale de l'autre couleur de rayures utilisée en alternance. |
gwd-venetian-blinds
Composant d'effet "Stores" de type "Vénitien". La nouvelle image s'affiche comme si elle était placée derrière des stores vénitiens avec des lattes s'ouvrant simultanément ou l'une après l'autre.
Propriétés
| Nom | Description |
|---|---|
orientation:dropdown |
Orientation de l'animation. |
blinds:number |
Nombre de stores. |
staggered:boolean |
Indique si la transition des lattes s'affiche avec du retard. Si la valeur est "false", la transition des lattes est simultanée. |
gwd-wipe
Composant "Effacer" de la transition. Avec l'effet "Effacer" standard, la nouvelle image s'affiche progressivement derrière une ligne qui efface l'image précédente d'un bord à l'autre.
Propriétés
| Nom | Description |
|---|---|
direction:dropdown |
Sens de l'effet. |
angle:number |
Angle selon lequel s'incline la ligne qui remplace l'ancienne image par la nouvelle. |
gwd-zigzag
Composant d'effet "Zigzag". La nouvelle image s'affiche sous la forme d'une grille sinueuse. Un effet "Zigzag" horizontal affiche les mosaïques de la nouvelle image par lignes successives, de gauche à droite et de droite à gauche. Un effet "Zigzag" vertical affiche les mosaïques de la nouvelle image par colonnes successives, de haut en bas et de bas en haut.
Propriétés
| Nom | Description |
|---|---|
orientation:dropdown |
Orientation de l'animation. |
rows:number |
Nombre de lignes de l'effet "Zigzag". |
columns:number |
Nombre de colonnes de l'effet "Zigzag". |
gwd-video
Composant qui encapsule un élément HTMLVideoElement.
Propriétés
| Nom | Description |
|---|---|
autoplay:boolean |
Lire automatiquement ou non les éléments vidéo doivent après que ceux-ci ont été chargés |
loop:boolean |
Lire en boucle ou non les éléments vidéo |
muted:boolean |
Couper ou non le son en début de lecture |
controls:boolean |
Activer ou non les commandes natives du lecteur par défaut. |
sources:file |
Chaîne d'éléments vidéo de différents formats qui sont séparés par une virgule. |
poster:string |
URL indiquant l'image poster à afficher jusqu'à ce que l'utilisateur lance la lecture ou une recherche. |
Événements
| Nom | Description |
|---|---|
play |
Envoyé quand la lecture des éléments multimédia reprend après une mise en pause |
pause |
Envoyé quand la lecture est mise en pause |
playing |
Envoyé au début de la lecture d'un élément multimédia (soit lors de la première lecture, soit lors d'une reprise après une pause ou après une lecture complète) |
ended |
Envoyé à la fin de la lecture |
volumechange |
Envoyé quand le volume sonore est modifié (soit en changeant le volume, soit en utilisant la mise en sourdine) |
seeked |
Envoyé à la fin d'une opération de recherche |
waiting |
Envoyé quand l'opération demandée (comme la lecture) est différée en attendant la fin d'une autre (une recherche, par exemple) |
Méthodes
| Nom | Description |
|---|---|
mute() |
Active ou désactive le son de la vidéo. |
pause() |
Met la vidéo en pause. |
play() |
Lit la vidéo. |
replay() |
Lit de nouveau la vidéo. |
seek(time:number) |
Renvoie à un moment précis de la vidéo. |
setVolume(volume:number) |
Règle le volume de la vidéo. |
setSources(sources:string) |
Définit les sources de la vidéo. |
gwd-youtube
Développe l'élément HTMLElement afin d'encapsuler les appels d'API YouTube.
Propriétés
| Nom | Description |
|---|---|
video-url:string |
URL YouTube de la vidéo. |
autoplay:string |
Pour les environnements compatibles, la vidéo YouTube est lue automatique après avoir été chargée. |
preview-duration:number |
Définit la durée de l'aperçu. Utilisé uniquement lorsque l'attribut de lecture automatique est défini sur preview. |
controls:string |
Affiche les commandes vidéo (none, autohide). |
color:string |
Thème de couleur de la barre de progression du lecteur (rouge ou blanc) |
muted:boolean |
Couper ou non le son en début de lecture. |
loop:boolean |
Lire en boucle ou non les éléments vidéo |
pause-on-end:boolean |
Mettre la vidéo en pause à une seconde de la fin. |
start-position:number |
Lancer la vidéo à un moment donné (en secondes) |
allowfullscreen:boolean |
Autoriser l'affichage plein écran sur les ordinateurs de bureau |
extra-player-args:string |
Autres paramètres du lecteur YouTube tels qu'ils sont décrits sur la page https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters |
Événements
| Nom | Description |
|---|---|
buffering |
Mise en mémoire tampon par le lecteur YouTube |
ended |
Arrivée en fin de lecture de la vidéo YouTube |
paused |
La vidéo YouTube est mise en pause. |
playing |
Début de lecture de la vidéo YouTube |
replayed |
La lecture de la vidéo YouTube a été relancée. |
viewed0percent |
Envoyé lorsque la vidéo a été visionnée jusqu'à 0 % de sa durée. |
viewed25percent |
Envoyé lorsque la vidéo a été visionnée jusqu'à 25 % de sa durée. |
viewed50percent |
Envoyé lorsque la vidéo a été visionnée jusqu'à 50 % de sa durée. |
viewed75percent |
Envoyé lorsque la vidéo a été visionnée jusqu'à 75 % de sa durée. |
viewed100percent |
Envoyé lorsque la vidéo a été visionnée jusqu'à 100 % de sa durée. |
previewed0percent |
Envoyé lorsque l'aperçu a été visionné jusqu'à 0 % de sa durée. |
previewed25percent |
Envoyé lorsque l'aperçu a été visionné jusqu'à 25 % de sa durée. |
previewed50percent |
Envoyé lorsque l'aperçu a été visionné jusqu'à 50 % de sa durée. |
previewed75percent |
Envoyé lorsque l'aperçu a été visionné jusqu'à 75 % de sa durée. |
previewed100percent |
Envoyé lorsque l'aperçu a été visionné jusqu'à 100 % de sa durée. |
Méthodes
| Nom | Description |
|---|---|
toggleMute() |
Active ou désactive le son de la vidéo. |
pause() |
Met la vidéo en pause. |
play() |
Lit la vidéo. |
replay() |
Lit de nouveau la vidéo. |
seek(time:number) |
Renvoie à un moment précis de la vidéo. |
setYouTubeId(id:string, cueOnly:boolean) |
Redéfinit la source de la vidéo YouTube sur l'ID indiqué. |