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. |