Component API's

360°-galerij

gwd-360gallery

Een galerij-object waarin een draaiend object wordt getoond.

Eigenschappen

Naam Beschrijving
images:string Een door komma's gescheiden reeks afbeeldingspaden die in de galerij worden gebruikt.
autoplay:boolean De galerij toont de afbeeldingen in de galerij automatisch nadat de galerij is geladen.
wrap:boolean De galerij geeft de gebruiker toestemming van het eerste frame naar het laatste frame te swipen, in plaats van te stoppen bij de einden.

Gebeurtenissen

Naam Beschrijving
firstinteraction Wordt gestuurd bij de eerste interactie van de gebruiker met de galerij.
allframesviewed Wordt gestuurd als alle frames van de galerij ten minste één keer zijn getoond.
allframesloaded Wordt gestuurd als alle frames van de galerij zijn geladen.
frameshown Wordt gestuurd als er een nieuw frame wordt getoond.
frameactivated Wordt gestuurd als er een nieuw frame is geactiveerd, zelfs als het frame nog niet zichtbaar is.
frametap Wordt gestuurd als de gebruiker op een frame tikt.

Methoden

Naam Beschrijving
goToFrame(frame:number, opt_animate:string, opt_direction:string) Animatie naar het opgegeven frame.
rotateOnce(opt_duration:number, opt_direction:string) Het object in de galerij één keer draaien.
goForwards() Het volgende frame in de galerij tonen.
goBackwards() Het vorige frame in de galerij tonen.
3D-hotspot

gwd-3d-hotspot

Een element voor het tonen van annotaties op een 3D-model.

Eigenschappen

Naam Beschrijving
data-position:string De positie van de hotspot.
data-normal:string De hotspot is normaal.
hotspot-name:string De naam van de hotspot.
hotspot-title:string De titeltekst die wordt getoond op de infokaart.
hotspot-description:string De beschrijvingstekst die wordt getoond op de infokaart.
hide-infocard:boolean Of de infokaart moet worden verborgen.
Container voor 3D-hotspot

gwd-3d-hotspot-container

Een containerelement voor annotaties in een 3D-model.

Eigenschappen

Naam Beschrijving
up-image:file De URL voor de afbeelding van de 3D-hotspots in de niet-ingedrukte status.
over-image:file De URL voor de afbeelding van de 3D-hotspots in de bewegings- of plaatsingsstatus van de muisaanwijzer.
down-image:file De URL voor de afbeelding van de 3D-hotspots in de ingedrukte status.
3D-model

gwd-3d-model

Een 3D-viewer-component.

Eigenschappen

Naam Beschrijving
id-url:download De ID of URL van het 3D-model.
data-gwd-refresh-assets:string Kenmerk dat door Google Web Designer wordt gebruikt om te bepalen of de 3D-items moeten worden vernieuwd.
glass:boolean Hiermee wordt het glasmateriaal aangezet voor het 3D-model.
src:string Het model dat moet worden getoond.
transparent:boolean Een transparante achtergrond voor het 3D-model aanzetten.
gesture-cue-icon:file Het icoon voor de cue voor gebaar.
gesture-cue-text:string De tekst die wordt getoond onder het icoon voor de cue voor gebaar.
gesture-cue-duration:number De duur (in seconden) voor hoelang de cue voor gebaar moet worden getoond. Een waarde van -1 betekent geen tijdslimiet.

Gebeurtenissen

Naam Beschrijving
scene-rendered Wordt gestuurd nadat de scène van het 3D-model voor de eerste keer is gerenderd.
camera-changed Wordt gestuurd als een van de eigenschappen van de 3D-camera is gewijzigd. Het object event.detail bevat alle huidige eigenschappen van de camera.
hotspot-clicked Wordt gestuurd als er op een hotspot wordt geklikt. Het object event.detail bevat de naam van de hotspot waarop is geklikt.
interaction-start Wordt gestuurd als de gebruiker een actie uitvoert met het 3D-model.
interaction-end Wordt gestuurd als de gebruiker geen actie meer uitvoert met het 3D-model.

Methoden

Naam Beschrijving
setYaw(yaw:number) De hoek voor gieren (in graden) instellen zonder animatie, rekening houdend met de cameralimieten.
setTargetYaw(targetYaw:number) De gewenste hoek voor gieren (in graden) instellen op basis van cameralimieten of de rotatie tussen -360 en 360 graden.
setTargetPitch(targetPitch:number) De doelhoek voor stampen (in graden) instellen.
incrementTargetPitch(pitchDelta:number) De doelwaarde voor een deltahoek (in graden) verhogen.
setTargetZoom(targetZoom:number) De doelwaarde voor zoomen (in meters) instellen.
incrementTargetZoom(zoomDelta:number) De doelwaarde voor zoomen (in meters) verhogen.
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) De targetrotatie (in meters) instellen.
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) De beoogde lokale pan (in meters) instellen.
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) De materiaalkleur instellen.
playAnimation(animationName:string) De animatie afspelen.
pauseAnimation(animationName:string) De animatie onderbreken.
setAnimationTime(animationName:string, animationTime:number) De animatietijd (in seconden) instellen.
lookAtHotspot(hotspotName:string) De camera bewegen en draaien om te focussen op de hotspot.
3D-modelviewer

gwd-3d-model-viewer

Een component die de component 3D-modelviewer afdekt.

Eigenschappen

Naam Beschrijving
src:file Het bronbestand van het 3D-model.
gesture-cue-icon:file Het icoon voor de cue voor gebaar.
gesture-cue-text:string De tekst die wordt getoond onder het icoon voor de cue voor gebaar.
gesture-cue-duration:number De duur (in seconden) voor hoelang de cue voor gebaar moet worden getoond. Een waarde van -1 betekent geen tijdslimiet.
skybox-image:file De achtergrondafbeelding van de 3D-modelscène.
environment-image:file Bepaalt de omgevingsreflectie van het 3D-model.

Gebeurtenissen

Naam Beschrijving
scene-rendered Wordt gestuurd nadat de scène van het 3D-model voor de eerste keer is gerenderd.
camera-changed Wordt gestuurd als een van de eigenschappen van de 3D-camera is gewijzigd. Het object event.detail bevat alle huidige eigenschappen van de camera.
hotspot-clicked Wordt gestuurd als er op een hotspot wordt geklikt. Het object event.detail bevat de naam van de hotspot waarop is geklikt.
interaction-start Wordt gestuurd als de gebruiker een actie uitvoert met het 3D-model.
interaction-end Wordt gestuurd als de gebruiker geen actie meer uitvoert met het 3D-model.

Methoden

Naam Beschrijving
setYaw(yaw:number) De hoek voor gieren (in graden) instellen zonder animatie, rekening houdend met de cameralimieten.
setTargetYaw(targetYaw:number) De gewenste hoek voor gieren (in graden) instellen op basis van cameralimieten of de rotatie tussen -360 en 360 graden.
setTargetPitch(targetPitch:number) De doelhoek voor stampen (in graden) instellen.
incrementTargetPitch(pitchDelta:number) De doelwaarde voor een deltahoek (in graden) verhogen.
setTargetZoom(targetZoom:number) De doelwaarde voor zoomen (in meters) instellen.
incrementTargetZoom(zoomDelta:number) De doelwaarde voor zoomen (in meters) verhogen.
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) De targetrotatie (in meters) instellen.
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) De beoogde lokale pan (in meters) instellen.
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) De materiaalkleur instellen.
playAnimation(animationName:string) De animatie afspelen.
pauseAnimation(animationName:string) De animatie onderbreken.
setAnimationTime(animationName:string, animationTime:number) De animatietijd (in seconden) instellen.
Toevoegen aan Agenda

gwd-addtocalendar

Een afspraak aan de agenda's toevoegen.

Eigenschappen

Naam Beschrijving
event-title:string De naam van de gebeurtenis zoals deze in de agenda van de gebruiker wordt getoond.
start-date:string De datum waarop de gebeurtenis start.
start-time:string De tijd waarop de gebeurtenis start (24-uursnotatie).
end-date:string De datum waarop de gebeurtenis eindigt.
end-time:string De tijd waarop de gebeurtenis eindigt (24-uursnotatie).
timezone:string De tijdzone voor de afspraak. Als de tijdzone is ingesteld, wordt de tijd correct aangepast zodra de gebruiker zich in een andere tijdzone bevindt.
location:string De locatie van de gebeurtenis.
description:string De beschrijving van de gebeurtenis.
icalendar:boolean Of er wel of geen iCalendar-bestand moet worden gebruikt.
google:boolean Of Google Agenda wel of niet moet worden gebruikt.
windows-live:boolean Of Windows Live Calendar wel of niet moet worden gebruikt.
yahoo:boolean Of Yahoo Calendar wel of niet moet worden gebruikt.
bg-color:string Hexadecimale waarde voor de achtergrondkleur van het dropdownmenu.
font-color:string Hexadecimale waarde voor de kleur van het lettertype van het dropdownmenu.
font-family:string Naam van het lettertype van het dropdownmenu.
font-size:string Tekengrootte van het lettertype van het dropdownmenu.
font-weight:string Tekengewicht van het lettertype van het dropdownmenu.
highlight-color:string Hexadecimale waarde voor de markeringskleur van het dropdownmenu.
Audio

gwd-audio

Een component die een HTMLAudioElement verpakt.

Eigenschappen

Naam Beschrijving
autoplay:boolean Of het audiobestand automatisch wordt afgespeeld wanneer dit is geladen.
loop:boolean Of het audiobestand steeds opnieuw moet worden afgespeeld.
muted:boolean Of de audio gedempt moet worden gestart.
controls:boolean Of de standaard bedieningselementen van de speler aanstaan.
sources:file Een door komma's gescheiden reeks audiobronnen met verschillende indelingen.

Gebeurtenissen

Naam Beschrijving
play Wordt gestuurd als het afspelen van de media wordt gestart na een eerdere onderbreking.
pause Wordt gestuurd als het afspelen wordt onderbroken.
playing Wordt gestuurd als de media wordt afgespeeld (voor de eerste keer, na een onderbreking of als het na beëindiging opnieuw wordt afgespeeld).
ended Wordt gestuurd als het afspelen is voltooid.
volumechange Wordt gestuurd als het volume wordt gewijzigd (zowel wanneer het volume is ingesteld en wanneer het dempingskenmerk wordt gewijzigd).
seeked Wordt gestuurd als een zoekbewerking is voltooid.
waiting Wordt gestuurd als de verzochte bewerking (zoals afspelen) is vertraagd vanwege de voltooiing van een andere bewerking (zoals zoeken).

Methoden

Naam Beschrijving
mute() De audio dempen of het dempen opheffen.
pause() De audio onderbreken.
play() De audio afspelen.
replay() De audio opnieuw afspelen.
seek(time:number) Naar de opgegeven tijd in de audio springen.
Carrouselgalerij

gwd-carouselgallery

Een galerij-object waarvan de frames worden getoond in een lay-out met een carrouselstijl.

Eigenschappen

Naam Beschrijving
images:string Een door komma's gescheiden reeks afbeeldingspaden die in de galerij worden gebruikt.
groups:string Een door komma's gescheiden reeks groeps-ID's.
transition-duration:number Snelheid van de galerij-animatie in milliseconden.
start-frame:number Het nummer van de afbeelding die u als eerste wilt tonen.
autoplay:boolean Of de frames automatisch eenmalig moeten worden afgespeeld.
has-navigation:boolean Of bedieningselementen voor de galerijnavigatie automatisch moeten worden opgenomen.
navigation-thumbnails:boolean Of er miniaturen in plaats van punten moeten worden gebruikt voor de navigatie.
navigation-highlight:color Een CSS-kleurcode die wordt gebruikt om het actieve frame tijdens de navigatie te markeren.
scaling:string Hoe de afbeeldingsinhoud wordt geschaald en in het frame past.
frame-width:number De breedte van één deelvenster met content.
frame-height:number De hoogte van één deelvenster met content.
neighbor-rotation-y:number Een Y-asrotatie toegepast op buren van het deelvenster dat momenteel is gecentreerd. Dit wordt gebruikt om de naastgelegen deelvensters te kantelen.
neighbor-translation-x:number Een X-asvertaling toegepast op buren van het deelvenster dat momenteel is gecentreerd. Dit wordt gebruikt om de plaatsing van naastliggende deelvensters aan te passen.
neighbor-translation-y:number Een Y-asvertaling toegepast op buren van het deelvenster dat momenteel is gecentreerd.
neighbor-translation-z:number Een Z-asvertaling toegepast op buren van het deelvenster dat momenteel is gecentreerd.
exit-urls:string Een door komma's gescheiden reeks afsluit-URL's die overeenkomen met de afbeeldingen in de galerij.
show-reflection:boolean Of er een reflectie moet worden getoond die is gebaseerd op css3.
pause-front-media:boolean Of media-elementen (zoals video of audio) moeten worden onderbroken in het vorige frame wanneer het huidige frame wordt gewijzigd.
resume-next-media:boolean Of media-elementen (zoals video of audio) moeten worden hervat in het nieuwe huidige frame wanneer het huidige frame wordt gewijzigd.

Gebeurtenissen

Naam Beschrijving
firstinteraction Wordt gestuurd bij de eerste interactie van de gebruiker met de galerij.
allframesviewed Wordt gestuurd als alle frames van de galerij ten minste één keer zijn getoond.
allframesloaded Wordt gestuurd als alle frames van de galerij zijn geladen.
autoplayended Wordt gestuurd als automatisch afspelen om welke reden dan ook is beëindigd. event.detail.completed is true (waar) als deze op een natuurlijke wijze is beëindigd doordat de beoogde tijdsduur is verstreken, anders is false (onwaar) ingesteld.
frameshown Wordt gestuurd als er een nieuw frame wordt getoond.
frameactivated Wordt gestuurd als er een nieuw frame is geactiveerd, zelfs als het frame nog niet zichtbaar is.
frameautoplayed Wordt gestuurd als er een frame wordt geactiveerd voor automatisch afspelen. Deze gebeurtenis kan vaker worden geactiveerd dan frameshown, omdat deze gebeurtenis afzonderlijk wordt geactiveerd voor elk frame dat tegelijkertijd zichtbaar is.
frametap Wordt gestuurd als de gebruiker op een frame tikt.
reachleftend Wordt gestuurd als de galerij het linkereinde bereikt.
reachrightend Wordt gestuurd als de galerij het rechtereinde bereikt.
trackstart Wordt gestuurd als het slepen via de muisaanwijzer of aanraking wordt gestart.
track De component registreert de X- en Y-locatiegegevens die zijn gekoppeld aan het slepen via de muisaanwijzer of aanraking.
trackend Wordt gestuurd als het slepen via de muisaanwijzer of aanraking wordt beëindigd.

Methoden

Naam Beschrijving
goToFrame(index:number, opt_animate:string) Naar het opgegeven frame.
goForwards(opt_animate:string) Naar het volgende frame, indien beschikbaar.
goBackwards(opt_animate:string) Naar het vorige frame.
rotateOnce(opt_duration:number, opt_direction:string) Elk frame in de galerij één keer tonen.
stopRotation() Huidige automatische rotatie wordt gestopt.
Weergavepunt

gwd-cuepoint

Een component die aan een Google Web Designer-videocomponent is gekoppeld en een gebeurtenis activeert wanneer de video een bepaald punt bereikt.

Eigenschappen

Naam Beschrijving
time:number Het tijdstip waarop de gebeurtenis wordt geactiveerd, in seconden.

Gebeurtenissen

Naam Beschrijving
cuepoint Wordt gestuurd als de weergave van de media een tijd heeft bereikt die is opgegeven in een weergavepunt.

Methoden

Naam Beschrijving
seek() De videotijd instellen op het tijdstip van een weergavepunt.
setTime(time:number) Het tijdstip van het weergavepunt instellen.
Datum wisselen

gwd-dateswap

Met 'Datum wisselen' wordt de zichtbaarheid van het element gewijzigd op basis van de huidige datum ten opzichte van de doelperiode.

Eigenschappen

Naam Beschrijving
from_date:string Een tekenreeks die een RFC2822- of ISO 8601-datum vertegenwoordigt.
to_date:string Een tekenreeks die een RFC2822- of ISO 8601-datum vertegenwoordigt.

Gebeurtenissen

Naam Beschrijving
before Wordt gestuurd als de huidige datum vóór de from_date (exclusief) ligt.
during Wordt gestuurd als de huidige datum tussen de from_date en de to_date (inclusief) ligt.
after Wordt gestuurd als de huidige datum na de to_date (exclusief) ligt.

Methoden

Naam Beschrijving
checkDate() Vergelijkt de huidige datum met de periode.
Galerijnavigatie

gwd-gallerynavigation

Een navigatiebedieningselement voor een Google Web Designer-galerijcomponent.

Eigenschappen

Naam Beschrijving
for:string Een door komma's gescheiden reeks afbeeldingspaden die in de galerij worden gebruikt.
highlight:color Een CSS-kleurcode die wordt gebruikt om het actieve frame tijdens de navigatie te markeren.
use-thumbnails:boolean Of er miniaturen in plaats van punten moeten worden gebruikt voor de navigatie.
Algemene advertentie

gwd-genericad

Hiermee wordt de algemene advertentiecontainer geïmplementeerd.

Gebeurtenissen

Naam Beschrijving
adinitialized Wordt gestuurd vlak voordat het element Generic (Algemeen) de content van de advertentie rendert.

Methoden

Naam Beschrijving
initAd() De advertentie wordt gestart nadat de juiste gebeurtenissen van de enabler zijn ontvangen.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) Navigeert naar de uitgevouwen afmetingen van de advertentie. Als er geen pagina-ID is opgegeven, navigeert de advertentie naar de standaardpagina.
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string) De advertentie wordt gesloten en optioneel samengevouwen.
Gebaar

gwd-gesture

Abstractie voor een aantal gebaargebeurtenissen.

Eigenschappen

Naam Beschrijving
touch-action:string Hoe de aanraakactie moet worden geïnterpreteerd. Geldige waarden zijn: auto, none, pan-x en pan-y. Het standaardgedrag is gelijk aan de waarde ingesteld voor none.

Gebeurtenissen

Naam Beschrijving
hover Wordt gestuurd als de muisaanwijzer of aanraaklocatie de componentbegrenzing binnengaat.
hoverend Wordt gestuurd als de muisaanwijzer of aanraaklocatie de componentbegrenzing verlaat.
trackstart Wordt gestuurd als het slepen via de muisaanwijzer of aanraking wordt gestart.
track De component registreert de X- en Y-locatiegegevens die zijn gekoppeld aan het slepen via de muisaanwijzer of aanraking.
trackend Wordt gestuurd als het slepen via de muisaanwijzer of aanraking wordt beëindigd.
tap Wordt gestuurd als een tik of muisklik van de gebruiker wordt geregistreerd.
swipeleft Wordt gestuurd als de gebruiker naar links swipet.
swiperight Wordt gestuurd als de gebruiker naar rechts swipet.
swipeup Wordt gestuurd als de gebruiker omhoog swipet.
swipedown Wordt gestuurd als de gebruiker omlaag swipet.
Google-advertentie

gwd-google-ad

Hiermee wordt de Google-advertentiecontainer geïmplementeerd.

Eigenschappen

Naam Beschrijving
polite-load:boolean Of deze advertentie de semantiek voor polite load moet respecteren.
fullscreen:boolean Of deze advertentie moeten worden uitgevouwen naar een volledig scherm.

Gebeurtenissen

Naam Beschrijving
adinitialized Wordt gestuurd vlak voordat het element de content van de advertentie rendert.
expandstart Wordt gestuurd als de enabler een gebeurtenis activeert om het uitvouwen te starten.
expandfinish Wordt gestuurd als de enabler een gebeurtenis activeert om het uitvouwen te beëindigen.
collapsestart Wordt gestuurd als de enabler een gebeurtenis activeert om het samenvouwen te starten.
collapsefinish Wordt gestuurd als de enabler een gebeurtenis activeert om het samenvouwen te beëindigen.
fullscreensupport Wordt gestuurd als uitbreiding naar een volledig scherm wordt ondersteund.
dynamicelementsready Wordt gestuurd nadat dynamische gegevens zijn toegepast op de content van de advertentie.
hostpagescroll Wordt gestuurd als de enabler een scrollgebeurtenis op de hostpagina activeert.

Methoden

Naam Beschrijving
initAd() De advertentie wordt gestart nadat de juiste gebeurtenissen van de enabler zijn ontvangen.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) Navigeert naar de uitgevouwen afmetingen van de advertentie. Als er geen pagina-ID is opgegeven, navigeert de advertentie naar de standaardpagina.
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) De advertentie wordt gesloten en optioneel samengevouwen.
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) De advertentie wordt gesloten en de opgegeven URL wordt getoond, ongeacht de waarde die in Studio is gedefinieerd. De advertentie wordt samengevouwen als opt_collapseOnExit true (waar) is.
incrementCounter(metric:string, opt_isCumulative:boolean) Houdt het aantal gebeurtenissen bij.
startTimer(timerId:string) Start een gebeurtenistimer.
stopTimer(timerId:string) Stopt een gebeurtenistimer.
reportManualClose() Registreert een handmatige sluiting van een zwevend item, pop-up, uitgevouwen, in-page met pop-up of in-page met zwevende advertentie. Deze methode is een proxy voor Enabler.reportManualClose.
Hotspot

gwd-hotspot

Een component die een hotspot toont en verbergt op bepaalde punten van een video.

Eigenschappen

Naam Beschrijving
show-time:number Het tijdstip waarop de hotspot zichtbaar wordt, in seconden.
hide-time:number Het tijdstip waarop de hotspot wordt verborgen, in seconden.
left:string De linkerpositie van de hotspot boven de video, relatief aan de breedte van het videoframe (bijv. 5%).
top:string De hoogste positie van de hotspot boven de video, relatief aan de breedte van het videoframe (bijv. 5%).
width:string De breedte van de hotspot proportioneel met de videoframebreedte.
height:string De hoogte van de hotspot proportioneel met de videoframehoogte.

Gebeurtenissen

Naam Beschrijving
hotspotshown Wordt gestuurd als de hotspot zichtbaar wordt.
hotspothidden Wordt gestuurd als de hotspot wordt verborgen.

Methoden

Naam Beschrijving
show(showHide:boolean) Zichtbaarheid van hotspot aan-/uitzetten
seek(showHide:boolean) Stel een videotijd in voor het moment dat de hotspot wordt getoond of verborgen.
setTimes(showTime:number, hideTime:number) Stelt de tijdstippen in voor het tonen of verbergen van de hotspot.
Iframe

gwd-iframe

Een component die een HTMLIframeElement verpakt.

Eigenschappen

Naam Beschrijving
source:string De bron van het iframe. Deze vervangt het src-kenmerk op het systeemeigen afbeeldingselement.
scrolling:string Of er schuifbalken voor het iframe moeten worden getoond.

Gebeurtenissen

Naam Beschrijving
iframeload Wordt gestuurd als het iframe is geladen.

Methoden

Naam Beschrijving
setUrl(url:string) Wijzigt de URL van het iframe en laadt deze meteen.
Afbeelding

gwd-image

Een component die een HTMLImageElement verpakt om uitgesteld laden van de afbeeldingsbron te ondersteunen.

Eigenschappen

Naam Beschrijving
source:file De bron van de afbeelding. Deze vervangt het src-kenmerk op het systeemeigen afbeeldingselement.
alt:string De alternatieve tekst voor de afbeelding.
scaling:string Definieert hoe de afbeelding wordt geschaald op basis van het frame.
alignment:string Hoe de afbeelding moet worden uitgelijnd in het weergavegebied.
focalpoint:string Codeert een afbeeldingsfocuspunt als x-/y-pixelcoördinaten.
disablefocalpoint:boolean Hiermee wordt het focuspunt uitgezet dat is ingesteld door het kenmerk focalpoint (intern gebruikt door Google Web Designer).
Afbeeldingsknop

gwd-imagebutton

Een afbeeldingsknop die status up/over/down ondersteunt.

Eigenschappen

Naam Beschrijving
up-image:file De URL voor de afbeelding van de knop als de knop niet is ingedrukt.
over-image:file De URL voor de afbeelding van de knop als de muisaanwijzer wordt geplaatst.
down-image:file De URL voor de afbeelding van de knop als de knop is ingedrukt.
bgcolor:string De achtergrondkleur van de knop.
alignment:string Hoe de afbeelding moet worden uitgelijnd in het weergavegebied.
scaling:string Hoe de afbeelding in de bovenliggende container wordt ingepast.
disabled:boolean Of de knop moet worden uitgezet.

Gebeurtenissen

Naam Beschrijving
imagebuttonloaded Wordt gestuurd als alle afbeeldingen zijn geladen.

Methoden

Naam Beschrijving
toggleEnable() Aan-/uitzetten.
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string) Stelt de afbeeldingsbronnen voor alle knoptoestanden in.
Afbeeldingseffect

gwd-image-effect

Een component Afbeeldingseffect.

Eigenschappen

Naam Beschrijving
scaling:string Definieert hoe de afbeelding wordt geschaald op basis van het frame.
time-limit:number Tijdslimiet voor animatie. Een waarde van -1 betekent geen tijdslimiet.
settings:string Het dialoogvenster met componentinstellingen openen.
images:string Een door komma's gescheiden reeks afbeeldingspaden die in het afbeeldingseffect worden gebruikt.

Gebeurtenissen

Naam Beschrijving
autoplayended Wordt gestuurd als automatisch afspelen wordt beëindigd als de tijdslimiet is bereikt.

Methoden

Naam Beschrijving
play() De animatie afspelen.
pause() De animatie onderbreken.
Afbeeldingseffect vóór en na

gwd-before-and-after

Een afbeeldingseffect waarbij twee vergelijkbare afbeeldingen worden samengesteld in de vergelijking vóór en na.

Afbeeldingseffect Ademen

gwd-breathe

Een afbeeldingseffect waarmee een afbeelding wordt geanimeerd en elastisch wordt uitgetrokken en samengetrokken.

Afbeeldingseffect Onthullen

gwd-reveal

Een afbeeldingseffect waarbij één afbeelding wordt gescand door een elliptisch focusgebied, waardoor een tweede afbeelding wordt onthuld.

Afbeeldingseffect Golf

gwd-wave

Een afbeeldingseffect waarmee een bewegende golf wordt toegepast op een afbeelding, waardoor de afbeelding een zwaaipatroon probeert te volgen.

Kaart

gwd-map

Uitbreiding van HTMLElement om aanroepen van Google Maps-API te verpakken.

Eigenschappen

Naam Beschrijving
api-key:string Google API-sleutel. Zie https://developers.google.com/maps/documentation/javascript/get-api-key.
query:string Naam van de zoekopdracht voor retourlocaties uit de Google Places API.
start-latitude:decimal Begincoördinaat van de breedtegraad voor het midden. Er moet een waarde tussen de -90 en 90 (graden) worden opgegeven.
start-longitude:decimal Begincoördinaat van de lengtegraad voor het midden. Er moet een waarde tussen de -180 en 180 (graden) worden opgegeven.
request-user-location:boolean Of de locatie van de gebruiker moet worden opgevraagd. Als true (waar) is ingesteld, wordt de gebruiker gevraagd om de locatie te delen.
client-id:string De Google Maps Premier-client-ID
search-radius:number De minimale straal in meters waarbinnen een locatiezoekopdracht wordt uitgevoerd.
result-limit:number Het maximale aantal resultaten dat wordt geretourneerd voor één zoekopdracht.
start-zoom:number Het zoomniveau dat aanvankelijk door de Google Maps-API wordt gebruikt. De standaardwaarde is 16, wat op buurtniveau is.
marker-src:string Naam van het afbeeldingsbestand voor de plaatsmarkering, als een sprite die de componenten off, on en shadow bevat.
gps-src:string Naam van het afbeeldingsbestand voor de blauwe stip van de GPS-locatie.
msg-start-position-prompt:string Lokalisatietekenreeks voor de prompttekst in het dialoogvenster om een startpositie te selecteren.
msg-gps-button-label:string Lokalisatietekenreeks voor het label van de knop waarmee de locatie van een gebruiker uit de geolocatie-API wordt opgehaald.
msg-manual-position-button-label:string Lokalisatietekenreeks voor het label van de knop waarmee een zoekveld voor de locatie wordt getoond.
msg-manual-position-prompt:string Lokalisatietekenreeks voor de prompttekst in het dialoogvenster om een startpositie op de kaart te zoeken.
msg-manual-position-placeholder:string Lokalisatietekenreeks voor de tekst van de tijdelijke aanduiding van het zoekvak voor het zoeken van een startpositie op de kaart.
msg-geocode-failure:string Lokalisatietekenreeks voor de prompttekst in het dialoogvenster wanneer een poging om de geolocatie-API te gebruiken mislukt.
msg-no-results-found:string Lokalisatietekenreeks voor de prompttekst in het dialoogvenster wanneer er geen resultaten op de kaart zijn gevonden voor de gekozen locatie.

Gebeurtenissen

Naam Beschrijving
pinclick Wanneer de gebruiker een punaise op de kaart selecteert.

Methoden

Naam Beschrijving
setCenter(latitude:number, longitude:number, opt_accuracy:number) Stelt het middelpunt van de kaart in op de locatie die is opgegeven voor lengte-/breedtegraad.
Pagina

gwd-page

Een pagina vertegenwoordigt één kaart in de paginadeck.

Eigenschappen

Naam Beschrijving
expanded:boolean Of deze pagina als een uitgevouwen pagina moet worden beschouwd (advertentiespecifiek).
centered:boolean Of de content van deze pagina moet worden gecentreerd.
alt-orientation-page:string De pagina-ID van de pagina die deze inhoud beter presenteert in de alternatieve stand.

Gebeurtenissen

Naam Beschrijving
attached Wordt gestuurd vlak nadat de pagina aan de DOM is gekoppeld.
detached Wordt gestuurd vlak nadat de pagina uit de DOM is verwijderd.
pageactivated Wordt gestuurd als de pagina kan worden getoond.
pagedeactivated Wordt gestuurd als de pagina niet meer wordt getoond.
pageload Wordt gestuurd nadat de content van een pagina is geladen.
pagepresenting Wordt gestuurd vlak voordat de inleidende animatie van de pagina wordt gestart.
shake Wordt gestuurd als er een schudgebaar voor een apparaat wordt waargenomen.
tilt Wordt gestuurd als een kanteling van een apparaat wordt waargenomen.
rotatetoportrait Wordt gestuurd als een apparaat in de staande stand wordt gedraaid.
rotatetolandscape Wordt gestuurd als een apparaat in de liggende stand wordt gedraaid.
Paginadeck

gwd-pagedeck

Een paginadeck is een container met pagina's. Er wordt één pagina tegelijk getoond en er kunnen in elke volgorde verschillende pagina's op de voorgrond worden getoond, waarbij gebruik kan worden gemaakt van de ondersteunde paginaovergangen.

Eigenschappen

Naam Beschrijving
default-page:string ID van de standaardpagina.

Gebeurtenissen

Naam Beschrijving
pagetransitionstart Wordt gestuurd voordat er een paginaovergang plaatsvindt.
pagetransitionend Wordt gestuurd nadat er een paginaovergang heeft plaatsgevonden.

Methoden

Naam Beschrijving
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) Navigeert naar de volgende pagina in het paginadeck.
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) Navigeert naar de vorige pagina in het paginadeck.
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) Navigeert naar de opgegeven pagina in het paginadeck.
getCurrentPage() Retourneert de huidige pagina of null als er geen pagina wordt getoond.
getDefaultPage() Retourneert de standaardpagina, indien opgegeven, of in andere gevallen de eerste pagina.
getPage(pageId:string) Retourneert de pagina met de opgegeven ID.
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean) Retourneert het pagina-element waarbij de waarde van het kenmerk gelijk is aan de opgegeven waarde of -1 als een pagina niet wordt gevonden.
getOrientationSpecificPage(orientation:string, pageId:string) Retourneert de pagina die overeenkomt met de opgegeven stand.
getElementById(id:string) Zoekt het element met de opgegeven ID op alle pagina's in dit paginadeck. Aangezien gwd-pagedeck alleen de actieve pagina in de DOM houdt, retourneert de standaard document.getElementById(id) niet de elementen op de inactieve pagina's. Het is gebruikelijk, met name in dynamische advertenties, om naar elementen in inactieve pagina's te verwijzen. In dergelijke gevallen kan deze methode worden gebruikt om de verwijzing naar een element op basis van de ID ongedaan te maken.
Parallax

gwd-parallax

Een Parallax-component.

Eigenschappen

Naam Beschrijving
settings:string Het dialoogvenster met componentinstellingen openen.
yscroll:decimal De scrollfactor die moet worden gehanteerd voor de parallax-animatie wanneer deze op het werkvlak wordt gerenderd.

Gebeurtenissen

Naam Beschrijving
ready Wordt gestuurd als alle items in de Parallax-component zijn geladen.
Deeltjeseffecten

gwd-particleeffects

Een component voor het samenstellen van meerdere deeltjeseffecten en afbeeldingen.

Eigenschappen

Naam Beschrijving
autoplay:boolean Of de animatie automatisch wordt afgespeeld als de component is geladen.
time-limit:number Tijdslimiet voor animatie. Een waarde van -1 betekent geen tijdslimiet.
settings:string Het dialoogvenster met componentinstellingen openen.

Gebeurtenissen

Naam Beschrijving
timelimitreached Wordt gestuurd als het afspelen van de animatie de gegeven tijdslimiet heeft bereikt.

Methoden

Naam Beschrijving
play() De animatie afspelen.
pause() De animatie onderbreken.
stop() De animatie stoppen.
Deeltjes

gwd-particles

Component van het deeltjessysteem.

Eigenschappen

Naam Beschrijving
acceleration-x:number De x-component van de versnelling in px/frame/frame.
acceleration-y:number De y-component van de versnelling in px/frame/frame.
angle-max:number De maximum hoek van de snelheidsrichting van de deeltjes.
angle-min:number De minimum hoek van de snelheidsrichting van de deeltjes.
autoplay:boolean Of de animatie automatisch moet worden afgespeeld als de bovenliggende component gwd-particleeffects wordt afgespeeld.
color1:color De eerste kleur.
color2:color De tweede kleur.
color-rate:number De snelheid waarmee de kleur verandert van kleur 1 naar kleur 2 per frame, in een bereik van [0, 1].
emit-interval:number Het aantal frames tot het volgende deeltje wordt uitgezonden.
emit-x-max:string De maximum x-coördinaat van het uitzendbereik van de deeltjes.
emit-x-min:string De minimum x-coördinaat van het uitzendbereik van de deeltjes.
emit-y-max:string De maximum y-coördinaat van het uitzendbereik van de deeltjes.
emit-y-min:string De minimum y-coördinaat van het uitzendbereik van de deeltjes.
loop:boolean Of de animatie moet worden herhaald.
number:number Het aantal deeltjes.
opacity-min:number De minimale ondoorzichtigheid van de deeltjes.
opacity-max:number De maximale ondoorzichtigheid van de deeltjes.
opacity-rate:number De snelheid waarmee de ondoorzichtigheid verandert per frame. Deze snelheid wordt toegevoegd aan de huidige ondoorzichtigheid van een deeltje.
random-colors:boolean Of de deeltjes willekeurige kleuren tussen kleur 1 en kleur 2 hebben. Als deze waarde false (onwaar) is, worden alle deeltjes gestart met kleur 1.
shape:string De vorm van de sprite.
size-max:number De maximum grootte van de deeltjes in pixels.
size-min:number De minimum grootte van de deeltjes in pixels.
size-rate:number De snelheid waarmee de grootte verandert per frame. Deze snelheid wordt toegevoegd aan de huidige grootte van een deeltje.
skip-forward:number Overslaan naar een tijdstip waarop een bepaald percentage deeltjes in een deeltjessysteem is uitgezonden.
speed-max:number De maximum snelheid van de deeltjes in px/frame.
speed-min:number De minimum snelheid van de deeltjes in px/frame.
sprite-image-src:file De bron van de afbeeldingen die als sprites worden gebruikt.
turbulence-frequency:number De frequentie van de turbulentie. Hogere waarden leiden tot frequentere onregelmatigheden in de beweging. Dit moet een positief getal zijn.
turbulence-rate:number De snelheid waarmee de sterkte in de loop van de tijd verandert.
turbulence-strength:number De sterkte van de turbulentie die op de deeltjes wordt uitgeoefend. Dit moet een positief getal zijn.
turbulence-trail:number Hoeveel eerdere en huidige toestanden van een deeltje moeten worden gerenderd.

Methoden

Naam Beschrijving
play() De animatie afspelen.
pause() De animatie onderbreken.
stop() De animatie stoppen.
SpriteSheet

gwd-spritesheet

Eén keyframe of animatie uit een sprite-sheet tonen.

Eigenschappen

Naam Beschrijving
imagesource:file De URL voor de sprite-sheetafbeelding.
offsetx:number

De verschuiving, in pixels, van de linkerkant van de sprite-sheet naar:

  • de linkerrand van de specifieke afbeelding op de sprite-sheet die u wilt gebruiken
  • de linkerrand van de eerste sprite-afbeelding die u gebruikt om een animatie te maken
offsety:number

De verschuiving, in pixels, van de bovenkant van de sprite-sheet naar:

  • de bovenrand van de specifieke afbeelding op de sprite-sheet die u wilt gebruiken
  • de bovenrand van de eerste sprite-afbeelding die u gebruikt om een animatie te maken
clipwidth:number

De breedte, in pixels, van:

  • de specifieke afbeelding op de sprite-sheet die u wilt gebruiken
  • de eerste sprite-afbeeldingen die u gebruikt om een animatie te maken
clipheight:number

De hoogte, in pixels, van:

  • de specifieke afbeelding op de sprite-sheet die u wilt gebruiken
  • de eerste sprite-afbeeldingen die u gebruikt om een animatie te maken
alignment:string Bepaalt de positie van de afbeelding in de bijbehorende container.
scaling:string Bepaalt hoe afbeeldingen met verschillende formaten in de component worden getoond.
totalframecount:number Het aantal frames waaruit de animatie bestaat.
duration:number De duur van elk frame in milliseconden.
loopcount:number Het aantal keer dat de animatie wordt herhaald. Stel dit in op 0 voor eindeloze herhaling.
autoplay:boolean Of de animatie automatisch moet worden afgespeeld.
endonstartframe:boolean Of de animatie moet worden beëindigd in het eerste frame.
reverseplay:boolean Of de animatie omgekeerd moet worden afgespeeld.

Gebeurtenissen

Naam Beschrijving
animationend Wordt gestuurd als de animatie is beëindigd.
animationpause Wordt gestuurd als de animatie wordt onderbroken.
animationplay Wordt gestuurd als de animatie wordt afgespeeld.
animationrestart Wordt gestuurd als de animatie wordt hervat na een onderbreking.

Methoden

Naam Beschrijving
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean) Een nieuwe animatie definiëren.
play() De animatie afspelen.
pause() De animatie onderbreken.
togglePlay() De animatie schakelen tussen afspelen en onderbreken.
restart() De animatie opnieuw starten.
previousFrame() Het vorige frame tonen.
nextFrame() Het volgende frame tonen.
goToFrame(id:number) Een specifiek frame op framenummer tonen.
Sterbeoordelingen

gwd-starratings

Een component voor het renderen van een regel met sterren die een beoordeling vertegenwoordigt.

Eigenschappen

Naam Beschrijving
ratingvalue:decimal Beoordelingswaarde.
iconsize:number Grootte van stericoon.
isemptyshown:boolean Of de lege stericonen worden getoond.
isemptycolored:boolean Of de lege stericonen gekleurd zijn.
colorprimary:color Primaire vulkleur.
colorsecondary:color Secundaire overgangskleur.
gradienttype:string Type kleurovergang.
ratingmax:number Maximale sterbeoordeling.
ratingmin:decimal Minimale sterbeoordeling.

Gebeurtenissen

Naam Beschrijving
complete Wanneer de iconen voor sterbeoordelingen zijn gemaakt.
validationerror De waarde voor sterbeoordelingen is lager dan de minimale beoordeling.
Street View

gwd-streetview

Een Google Street View-component

Eigenschappen

Naam Beschrijving
key:string Zie https://developers.google.com/maps/documentation/javascript/get-api-key voor meer informatie over hoe u een unieke sleutel voor uw app kunt verkrijgen.
latitude:decimal De breedtegraadwaarde van de locatie.
longitude:decimal De lengtegraadwaarde van de locatie.
interaction:boolean Of de weergave kan worden gepand/gedraaid.
heading:decimal Geeft de kompasrichting van de camera aan. Geaccepteerde waarden liggen tussen 0 en 360 (beide waarden geven het noorden aan, terwijl 90 het oosten en 180 het zuiden aangeeft). Als er geen richting is opgegeven, wordt er een waarde berekend die de camera naar de opgegeven locatie leidt, vanaf het punt waar de dichtstbijzijnde foto is genomen.
pitch:decimal De hoek van de camera (omhoog of omlaag) ten opzichte van het Street View-voertuig. Dit is vaak, maar niet altijd, horizontaal. Bij positieve waarden wordt de camera omhoog gekanteld (90 graden is recht omhoog), terwijl de camera bij negatieve waarden omlaag wordt gericht (-90 graden is recht omlaag).
zoom:number Specificeert de zoomwaarde voor de camera ten opzichte van het Street View-voertuig.
Veegbare galerij

gwd-swipegallery

Een galerij-object waarvan de frames worden getoond in een veegbare contentstrip.

Eigenschappen

Naam Beschrijving
images:string Een door komma's gescheiden reeks afbeeldingspaden die in de galerij worden gebruikt.
groups:string Een door komma's gescheiden reeks groeps-ID's.
transition-duration:number De snelheid van de galerij-animatie in milliseconden.
start-frame:number Het frame waarmee wordt begonnen.
num-frames-to-display:number Het aantal frames dat tegelijkertijd wordt getoond.
frame-snap-interval:number Het aantal frames dat bij elke swipe wordt doorgeschoven.
autoplay:boolean Of de galerij automatisch één keer moet worden gedraaid.
has-navigation:boolean Of de bedieningselementen voor de galerijnavigatie moeten worden opgenomen.
navigation-thumbnails:boolean Of er miniaturen in plaats van punten moeten worden gebruikt voor de navigatie.
navigation-highlight:color Een CSS-kleurcode die wordt gebruikt om het actieve frame tijdens de navigatie te markeren.
scaling:string Hoe de afbeeldingsinhoud wordt geschaald en in het frame past.
swipe-axis:string De as waarvoor een swipe wordt waargenomen.
offset:number De hoeveelheid lege ruimte tussen aangrenzende contentframes.
frame-width:number De breedte van één contentframe. Overschrijft num-frames-to-display.
frame-height:number De hoogte van één contentframe.
autoplay-duration:number De totale duur voor het automatisch afspelen van de frames.
autoplay-step-interval:number Het interval tussen elk frame tijdens het automatisch afspelen.
exit-urls:string Een door komma's gescheiden reeks afsluit-URL's die overeenkomen met de afbeeldingen in de galerij.
disable-gesture:boolean De gebaarcomponent waarmee de aanraaknavigatie voor de galerij wordt aangezet, verbergen/uitzetten.
pause-front-media:boolean Of media-elementen (zoals video of audio) moeten worden onderbroken in het vorige frame wanneer het huidige frame wordt gewijzigd.
resume-next-media:boolean Of media-elementen (zoals video of audio) moeten worden hervat in het nieuwe huidige frame wanneer het huidige frame wordt gewijzigd.

Gebeurtenissen

Naam Beschrijving
firstinteraction Wordt gestuurd bij de eerste interactie van de gebruiker met de galerij.
allframesviewed Wordt gestuurd als alle frames van de galerij minimaal één keer zijn getoond.
allframesloaded Wordt gestuurd als alle frames van de galerij zijn geladen.
autoplayended Wordt gestuurd als automatisch afspelen om welke reden dan ook is beëindigd. event.detail.completed is true (waar) als deze op een natuurlijke wijze is beëindigd doordat de beoogde tijdsduur is verstreken, anders is false (onwaar) ingesteld.
frameshown Wordt gestuurd als er een nieuw frame wordt getoond nadat de vereiste animaties zijn voltooid.
frameactivated Wordt gestuurd als er een nieuw frame is geactiveerd, zelfs als het frame nog niet zichtbaar is.
frameautoplayed Wordt gestuurd als er een frame wordt geactiveerd voor automatisch afspelen. Deze gebeurtenis kan vaker worden geactiveerd dan frameshown, omdat deze gebeurtenis afzonderlijk wordt geactiveerd voor elk frame dat tegelijkertijd zichtbaar is.
frametap Wordt gestuurd als de gebruiker op een frame tikt.
reachleftend Wordt gestuurd als de galerij het linkereinde bereikt.
reachrightend Wordt gestuurd als de galerij het rechtereinde bereikt.
framemouseover Wordt gestuurd als de gebruiker de muisaanwijzer op een frame plaatst.
framemouseout Wordt gestuurd als de gebruiker de muisaanwijzer over een frame beweegt.
trackstart Wordt gestuurd als het slepen via de muisaanwijzer of aanraking wordt gestart.
track De component registreert de X- en Y-locatiegegevens die zijn gekoppeld aan het slepen via de muisaanwijzer of aanraking.
trackend Wordt gestuurd als het slepen via de muisaanwijzer of aanraking wordt beëindigd.

Methoden

Naam Beschrijving
goToFrame(frame:number, opt_animate:string) Naar het opgegeven frame gaan.
rotateOnce(opt_duration:number, opt_direction:string) Elk frame in de galerij één keer tonen.
stopRotation() Huidige automatische rotatie wordt gestopt.
goForwards() Het volgende frame in de galerij tonen.
goBackwards() Het vorige frame in de galerij tonen.
Krul

gwd-swirl

Een Krul-component.

Eigenschappen

Naam Beschrijving
yscroll:decimal De scrollfactor die moet worden gehanteerd voor de Krul-animatie wanneer deze op het werkvlak wordt gerenderd.
settings:string Het dialoogvenster met componentinstellingen openen.

Gebeurtenissen

Naam Beschrijving
ready Wordt gestuurd als alle onderliggende items zijn geladen.
Tikgebied

gwd-taparea

Abstractie voor een klik- of tikgebeurtenis.

Eigenschappen

Naam Beschrijving
exit-override-url:string De URL die moet worden afgesloten wanneer er op het tikgebied wordt getikt.

Gebeurtenissen

Naam Beschrijving
action Wordt gestuurd als de gebruiker op de knop tikt (mobiel) of hierop klikt (computer).
Tik om te bellen/sms'en

gwd-taptocall

Een component waarmee het geconfigureerde nummer wordt gebeld of een sms naar het geconfigureerde nummer wordt verstuurd wanneer op de component wordt geklikt of getikt.

Eigenschappen

Naam Beschrijving
number:string Telefoonnummer dat moet worden gebeld of ge-sms't.
action:string Een sms-bericht sturen of bellen.

Gebeurtenissen

Naam Beschrijving
action Wordt gestuurd als de gebruiker op de knop tikt (mobiel) of hierop klikt (computer).
taptocall Wordt gestuurd als er wordt gebeld of een sms-bericht wordt gestuurd.

Methoden

Naam Beschrijving
dial() Het nummer wordt gebeld of er wordt een sms-bericht naar het geconfigureerde nummer gestuurd.
Overgangsgalerij

gwd-transitiongallery

Een component voor de overgangsgalerij.

Eigenschappen

Naam Beschrijving
settings:string Het dialoogvenster met componentinstellingen openen.
images:string Een door komma's gescheiden reeks afbeeldingspaden die in de galerij worden gebruikt.
scaling:string Definieert hoe de afbeelding wordt geschaald op basis van het frame.
exit-urls:string Een door komma's gescheiden reeks afsluit-URL's die overeenkomen met de afbeeldingen in de galerij.

Gebeurtenissen

Naam Beschrijving
autoplayended Wordt gestuurd als automatisch afspelen om welke reden dan ook is beëindigd. event.detail.completed is true (waar) als het afspelen natuurlijk is beëindigd doordat het beoogde aantal herhalingen is bereikt, anders is dit false (onwaar).
frameactivated Wordt gestuurd als er een nieuw frame is geactiveerd, zelfs als het frame nog niet zichtbaar is.
frameshown Wordt gestuurd als er een nieuw frame wordt getoond.
frametap Wordt gestuurd als de gebruiker op een frame tikt.
rotateonceended Wordt gestuurd als het draaien om welke reden dan ook is beëindigd. event.detail.completed is true (waar) als het draaien op natuurlijke wijze is beëindigd, anders is dit false (onwaar).
reachleftend Wordt gestuurd als de galerij het linkereinde bereikt.
reachrightend Wordt gestuurd als de galerij het rechtereinde bereikt.

Methoden

Naam Beschrijving
goToFrame(frame:number, with_animation:boolean) Naar het opgegeven frame gaan.
rotateOnce(startFromCurrentFrame:boolean) Het frame in de galerij tonen vanaf het startpunt als startFromCurrentFrame op false (onwaar) is ingesteld of niet is opgegeven, anders vanaf het huidige frame tonen. De rotatie stopt voordat deze het startframe bereikt.
startAutoplay(startFromCurrentFrame:boolean) Automatisch afspelen in de galerij starten vanaf het startpunt als startFromCurrentFrame op false (onwaar) is ingesteld of niet is opgegeven, anders starten vanaf het huidige frame. Het automatisch afspelen stopt als het opgegeven aantal herhalingen is bereikt.
stop() De animatie annuleren als deze wordt uitgevoerd.
goForwards() Het volgende frame in de galerij tonen.
goBackwards() Het vorige frame in de galerij tonen.
Overgang van Jaloezieën

gwd-blinds

Een effect Jaloezieën, dat de nieuwe afbeelding onthult alsof deze van achter jaloezieën en van de ene naar de andere zijde loopt, van de ene rand tot de andere rand.

Eigenschappen

Naam Beschrijving
direction:dropdown De richting van het effect.
blinds:number Het aantal jaloezieën.
transparentbackground:boolean Of de transparante achtergrond moet worden onthuld voordat de jaloezieën van de nieuwe afbeelding worden gerenderd. Als de waarde is ingesteld op onwaar, wordt de jaloezie-overlay op de oude afbeelding getoond.
Overgang van Deurovergang

gwd-door-wipe

Een component met het effect Deurovergang is een variant van het effect Wissen, met twee typen op basis van de richting van het wissen. Een openende deurovergang onthult de nieuwe afbeelding, te beginnen vanaf het midden van de oude afbeelding, alsof er een dubbele deur wordt geopend. Een openende deurovergang onthult de nieuwe afbeelding, te beginnen vanaf de tegenoverliggende randen van de oude afbeelding naar het midden toe, alsof er een dubbele deur wordt gesloten.

Eigenschappen

Naam Beschrijving
orientation:dropdown De stand van de animatie.
direction:dropdown De richting van het deurovergangseffect.
Overgang van Vervagen

gwd-fade

Een component van de overgang Vervagen.

Overgang met groeiende cirkel

gwd-iris-wipe

Een component voor een overgang met groeiende cirkel, waarbij de nieuwe afbeelding wordt onthult door een groeiende cirkel die standaard vanuit het midden van het frame wordt getoond.

Eigenschappen

Naam Beschrijving
originpercentx:number De oorsprong van de groeiende cirkel op de x-as ten opzichte van de breedte van het frame.
originpercenty:number De oorsprong van de groeiende cirkel op de y-as ten opzichte van de hoogte van het frame.
Duw-overgang

gwd-push

Een component voor het overgangseffect Duwen, waarbij de nieuwe afbeelding in beeld schuift terwijl de oude afbeelding uit beeld wordt geduwd.

Eigenschappen

Naam Beschrijving
direction:dropdown De richting van het Duwen-effect.
Overgang voor Radiaal wissen

gwd-radial-wipe

Een component voor het Radiaal wissen-effect is een variant van het Wissen-effect, waarbij de nieuwe afbeelding wordt onthuld door een straal rond een bepaald punt te vegen, zoals de wijzer van een klok.

Eigenschappen

Naam Beschrijving
direction:dropdown De richting van het effect.
originpercentx:number De oorsprong van de x-as ten opzichte van de breedte van het frame die het vegen van een straal activeert om de nieuwe afbeelding te onthullen.
originpercenty:number De oorsprong van de y-as ten opzichte van de hoogte van het frame die het vegen van een straal start om de nieuwe afbeelding te onthullen.
Draaiovergang

gwd-rotate

Een component voor een draai-effect, waarbij de oude afbeelding ronddraait terwijl er wordt ingezoomd en er vervolgens wordt uitgezoomd op de nieuwe afbeelding terwijl het ronddraaien wordt voltooid.

Eigenschappen

Naam Beschrijving
direction:dropdown De richting van het effect.
Segmentovergang

gwd-slice

Een component met een segmenteffect waarbij de nieuwe afbeelding wordt onthuld als segmenten of staven die na elkaar in beeld verschijnen.

Eigenschappen

Naam Beschrijving
direction:dropdown De richting van het segmenteffect.
slices:number Het aantal segmenten of staven waarmee de weergave wordt opgesplitst.
transparentbackground:boolean Of de transparante achtergrond moet worden onthuld voordat de nieuwe afbeelding segment voor segment in beeld verschijnt. Als de waarde false (onwaar) is ingesteld, worden de segmenten over de oude afbeelding heen getoond.
Gespleten duwovergang

gwd-split-push

Een component voor het effect Gespleten duwovergang is een variant van het Duwen-effect, waarbij de oude afbeelding verticaal of horizontaal in twee delen wordt opgesplitst. De overeenkomstige opgesplitste delen van de nieuwe afbeelding duwen elk deel van de oude afbeelding in tegengestelde richtingen uit beeld.

Eigenschappen

Naam Beschrijving
orientation:dropdown De stand van de animatie.
Streepovergang

gwd-stripe-wipe

Een component voor het effect Streepovergang is een variant van het Wissen-effect, waarbij effen gekleurde strepen met afwisselende kleuren tegelijkertijd groter worden op het scherm en zo de oude afbeelding bedekken. Vervolgens worden de strepen weer kleiner om de nieuwe afbeelding zichtbaar te maken.

Eigenschappen

Naam Beschrijving
direction:dropdown De richting van het effect.
stripes:number Het aantal strepen van elke kleur.
color1:color De hexadecimale waarde voor een van de twee afwisselende streepkleuren.
color2:color De hexadecimale waarde voor de andere afwisselende streepkleur.
Overgang met Lamellen

gwd-venetian-blinds

Een component met een Lamellen-effect, waarbij de nieuwe afbeelding wordt onthuld alsof deze van achter lamellen tevoorschijn komt, met lamellen die tegelijkertijd of één voor één worden geopend.

Eigenschappen

Naam Beschrijving
orientation:dropdown De stand van de animatie.
blinds:number Het aantal jaloezieën.
staggered:boolean Of de overgang van de lamellen met een vertraging begint. Als de waarde false (onwaar) is, draaien alle lamellen tegelijkertijd.
Overgang Wissen

gwd-wipe

Een component voor een wisovergang. Bij het normale wiseffect vervangt de nieuwe afbeelding geleidelijk de oude afbeelding achter een lijn die van de ene naar de andere rand wordt geveegd.

Eigenschappen

Naam Beschrijving
direction:dropdown De richting van het effect.
angle:number De hoek waarmee de oude afbeelding wordt vervangen door de nieuwe afbeelding.
Zigzag-overgang

gwd-zigzag

Een component met een zigzageffect, waarbij de nieuwe afbeelding in een zigzagpatroon wordt onthuld. Een horizontaal zigzageffect onthult tegels van de nieuwe afbeelding aan in opeenvolgende rijen, afwisselend van links naar rechts en van rechts naar links. Een verticaal zigzageffect onthult tegels van de nieuwe afbeelding aan in opeenvolgende kolommen, afwisselend van onder naar boven en van boven naar onder.

Eigenschappen

Naam Beschrijving
orientation:dropdown De stand van de animatie.
rows:number Het aantal rijen van het zigzageffect.
columns:number Het aantal kolommen van het zigzageffect.
Video

gwd-video

Een component die een HTMLVideoElement verpakt.

Eigenschappen

Naam Beschrijving
autoplay:boolean Of de video automatisch wordt afgespeeld wanneer deze is geladen.
loop:boolean Of de video steeds opnieuw moet worden afgespeeld.
muted:boolean Of de video gedempt moet worden gestart.
controls:boolean Of de standaard bedieningselementen van de speler aanstaan.
sources:file Een door komma's gescheiden reeks video's met verschillende indelingen.
poster:string Een URL waarmee wordt aangegeven welk posterframe moet worden getoond tot de gebruiker het afspelen start of gaat zoeken.

Gebeurtenissen

Naam Beschrijving
play Wordt gestuurd als het afspelen van het medium na een onderbreking wordt gestart, oftewel het afspelen wordt hervat na een eerdere onderbrekingsgebeurtenis.
pause Wordt gestuurd als het afspelen wordt onderbroken.
playing Wordt gestuurd als het medium wordt afgespeeld (voor de eerste keer, na een onderbreking of als het na beëindiging opnieuw wordt afgespeeld).
ended Wordt gestuurd als het afspelen is voltooid.
volumechange Wordt gestuurd als het volume wordt gewijzigd (zowel wanneer het volume is ingesteld en wanneer het dempingskenmerk wordt gewijzigd).
seeked Wordt gestuurd als een zoekbewerking is voltooid.
waiting Wordt gestuurd als de verzochte bewerking (zoals afspelen) is vertraagd vanwege de voltooiing van een andere bewerking (zoals zoeken).

Methoden

Naam Beschrijving
mute() De video dempen of het dempen opheffen.
pause() De video onderbreken.
play() De video afspelen.
replay() De video opnieuw afspelen.
seek(time:number) Naar de opgegeven tijd in de video springen.
setVolume(volume:number) Het volume van de video instellen.
setSources(sources:string) De bronnen voor de video instellen.
YouTube

gwd-youtube

Uitbreiding van HTMLElement om aanroepen van de YouTube-API te verpakken.

Eigenschappen

Naam Beschrijving
video-url:string De YouTube-URL voor de video.
autoplay:string Indien een omgeving wordt ondersteund, wordt de YouTube-video automatisch afgespeeld zodra deze wordt geladen.
preview-duration:number De duur voor de voorbeeldweergave instellen. Wordt alleen gebruikt wanneer het kenmerk autoplay is ingesteld op preview.
controls:string Toont de bedieningselementen voor de video (none, autohide).
color:string Het kleurenthema van de voortgangsbalk van de speler (rood of wit).
muted:boolean Of de video gedempt moet worden gestart.
loop:boolean Of de video steeds opnieuw moet worden afgespeeld.
pause-on-end:boolean Onderbreekt de video zodra er nog 1 seconde resteert.
start-position:number De video starten op een bepaalde tijd (seconden).
allowfullscreen:boolean Volledig scherm toestaan op desktop.
extra-player-args:string Aanvullende parameters voor de YouTube-speler zoals beschreven in https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters.

Gebeurtenissen

Naam Beschrijving
buffering De YouTube-speler is aan het bufferen.
ended De YouTube-video heeft het einde bereikt.
paused De YouTube-video is onderbroken.
playing Het afspelen van de YouTube-video wordt gestart.
replayed De YouTube-video is opnieuw afgespeeld.
viewed0percent Wordt gestuurd als 0% van de video is bekeken.
viewed25percent Wordt gestuurd als 25% van de video is bekeken.
viewed50percent Wordt gestuurd als 50% van de video is bekeken.
viewed75percent Wordt gestuurd als 75% van de video is bekeken.
viewed100percent Wordt gestuurd als 100% van de video is bekeken.
previewed0percent Wordt gestuurd als 0% van het voorbeeld is bekeken.
previewed25percent Wordt gestuurd als 25% van het voorbeeld is bekeken.
previewed50percent Wordt gestuurd als 50% van het voorbeeld is bekeken.
previewed75percent Wordt gestuurd als 75% van het voorbeeld is bekeken.
previewed100percent Wordt gestuurd als 100% van het voorbeeld is bekeken.

Methoden

Naam Beschrijving
toggleMute() De video dempen of het dempen opheffen.
pause() De video onderbreken.
play() De video afspelen.
replay() De video opnieuw afspelen.
seek(time:number) Naar de opgegeven tijd in de video springen.
setYouTubeId(id:string, cueOnly:boolean) De bron van de YouTube-video wordt gewijzigd in de opgegeven ID.

Was dit nuttig?

Hoe kunnen we dit verbeteren?
Zoeken
Zoekopdracht wissen
Zoekfunctie sluiten
Hoofdmenu
11623192853124670903
true
Zoeken in het Helpcentrum
true
true
true
true
true
5050422
false
false