Komponenten-APIs

360°-Galerie

gwd-360gallery

Galerieobjekt, das ein sich drehendes Objekt zeigt

Eigenschaften

Name	Beschreibung
images:string	Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden.
autoplay:boolean	Die Bilder in der Galerie sollten nacheinander automatisch wiedergegeben werden, nachdem die Galerie geladen wurde.
wrap:boolean	Der Nutzer sollte in der Galerie über den ersten und letzten Frame hinaus wischen können, ohne an einem Ende zu stoppen.

Ereignisse

Name	Beschreibung
firstinteraction	Wird ausgelöst, wenn der Nutzer zum ersten Mal mit der Galerie interagiert.
allframesviewed	Wird ausgelöst, wenn alle Frames der Galerie mindestens einmal angezeigt werden.
allframesloaded	Wird ausgelöst, wenn alle Frames der Galerie geladen wurden.
frameshown	Wird ausgelöst, wenn ein neuer Frame angezeigt wird.
frameactivated	Wird ausgelöst, wenn ein neuer Frame bereits aktiviert wurde, auch wenn er noch nicht sichtbar ist.
frametap	Wird ausgelöst, wenn der Nutzer auf einen Frame tippt.

Methoden

Name	Beschreibung
goToFrame(frame:number, opt_animate:string, opt_direction:string)	Animiert zum angegebenen Frame.
rotateOnce(opt_duration:number, opt_direction:string)	Rotiert das Objekt einmal in der Galerie.
goForwards()	Bewegt die Galerie um einen Frame vor.
goBackwards()	Bewegt die Galerie um einen Frame zurück.

3D-Hotspot

gwd-3d-hotspot

Ein Element zum Anzeigen von Anmerkungen in einem 3D-Modell

Eigenschaften

Name	Beschreibung
data-position:string	Die Position des Hotspots.
data-normal:string	Der Hotspot ist normal.
hotspot-name:string	Der Name des Hotspots.
hotspot-title:string	Der Titeltext auf der Infokarte.
hotspot-description:string	Der Beschreibungstext auf der Infokarte.
hide-infocard:boolean	Legt fest, ob die Infokarte ausgeblendet werden soll.

3D-Hotspot-Container

gwd-3d-hotspot-container

Ein Containerelement für Anmerkungen in einem 3D-Modell

Eigenschaften

Name	Beschreibung
up-image:file	Die URL für das Bild der 3D-Hotspots im unbetätigten Zustand.
over-image:file	Die URL für das Bild der 3D-Hotspots im Mouseover- oder Hover-Zustand.
down-image:file	Die URL für das Bild der 3D-Hotspots im betätigten Zustand.

3D-Modell

gwd-3d-model

Eine Komponente des 3D-Viewers

Eigenschaften

Name	Beschreibung
id-url:download	Die ID oder URL des 3D-Modells.
data-gwd-refresh-assets:string	Attribut, das von Google Web Designer verwendet wird, um festzustellen, ob die 3D-Assets aktualisiert werden müssen.
glass:boolean	Aktiviert das Glasmaterial für das 3D-Modell.
src:string	Das anzuzeigende Modell.
transparent:boolean	Aktiviert den transparenten Hintergrund im 3D-Modell.
gesture-cue-icon:file	Das Gesten-Hinweissymbol.
gesture-cue-text:string	Der Text wird unter dem Gesten-Hinweissymbol angezeigt.
gesture-cue-duration:number	Die Dauer in Sekunden, für die der Gesten-Hinweis angezeigt wird. Ein Wert von -1 bedeutet keine zeitliche Begrenzung.

Ereignisse

Name	Beschreibung
scene-rendered	Wird ausgelöst, nachdem die 3D-Modellszene zum ersten Mal gerendert wurde.
camera-changed	Wird ausgelöst, wenn sich eine der Eigenschaften der 3D-Kamera ändert. Das Objekt „event.detail“ enthält alle aktuellen Eigenschaften der Kamera.
hotspot-clicked	Wird ausgelöst, wenn auf einen Hotspot geklickt wird. Das Objekt „event.detail“ enthält den Namen des angeklickten Hotspots.
interaction-start	Wird ausgelöst, wenn der Nutzer mit dem 3D-Modell interagiert.
interaction-end	Wird ausgelöst, wenn der Nutzer die Interaktion mit dem 3D-Modell beendet.

Methoden

Name	Beschreibung
setYaw(yaw:number)	Legt den Gierwinkel in Grad ohne Animation fest und berücksichtigt dabei die Kameralimits.
setTargetYaw(targetYaw:number)	Legt den Ziel-Gierwinkel in Grad fest, basierend entweder auf den Kameralimits oder auf der Drehung zwischen -360 und 360 Grad.
setTargetPitch(targetPitch:number)	Legt den Ziel-Neigungswinkel in Grad fest.
incrementTargetPitch(pitchDelta:number)	Erhöht die Zielneigung eines Deltawinkels in Grad.
setTargetZoom(targetZoom:number)	Legt den Zielzoom in Metern fest.
incrementTargetZoom(zoomDelta:number)	Erhöht den Zielzoom in Metern.
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	Legt den Zieldrehpunkt in Metern fest.
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	Legt die lokale Zielposition in Metern fest.
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	Legt die Materialfarbe fest.
playAnimation(animationName:string)	Gibt die Animation wieder.
pauseAnimation(animationName:string)	Pausiert die Animation.
setAnimationTime(animationName:string, animationTime:number)	Legt die Animationszeit in Sekunden fest.
lookAtHotspot(hotspotName:string)	Verschiebt und dreht die Kamera, um den Fokus auf den Hotspot zu richten.

3D-Modellansicht

gwd-3d-model-viewer

Eine Komponente, die die 3D-Modell-Viewer-Komponente einbindet

Eigenschaften

Name	Beschreibung
src:file	Die Quelldatei des 3D-Modells.
gesture-cue-icon:file	Das Gesten-Hinweissymbol.
gesture-cue-text:string	Der Text wird unter dem Gesten-Hinweissymbol angezeigt.
gesture-cue-duration:number	Die Dauer in Sekunden, für die der Gesten-Hinweis angezeigt wird. Ein Wert von -1 bedeutet keine zeitliche Begrenzung.
skybox-image:file	Das Hintergrundbild der 3D-Modellszene.
environment-image:file	Steuert die Umgebungsreflexion des 3D-Modells.

Ereignisse

Name	Beschreibung
scene-rendered	Wird ausgelöst, nachdem die 3D-Modellszene zum ersten Mal gerendert wurde.
camera-changed	Wird ausgelöst, wenn sich eine der Eigenschaften der 3D-Kamera ändert. Das Objekt „event.detail“ enthält alle aktuellen Eigenschaften der Kamera.
hotspot-clicked	Wird ausgelöst, wenn auf einen Hotspot geklickt wird. Das Objekt „event.detail“ enthält den Namen des angeklickten Hotspots.
interaction-start	Wird ausgelöst, wenn der Nutzer mit dem 3D-Modell interagiert.
interaction-end	Wird ausgelöst, wenn der Nutzer die Interaktion mit dem 3D-Modell beendet.

Methoden

Name	Beschreibung
setYaw(yaw:number)	Legt den Gierwinkel in Grad ohne Animation fest und berücksichtigt dabei die Kameralimits.
setTargetYaw(targetYaw:number)	Legt den Ziel-Gierwinkel in Grad fest, basierend entweder auf den Kameralimits oder auf der Drehung zwischen -360 und 360 Grad.
setTargetPitch(targetPitch:number)	Legt den Ziel-Neigungswinkel in Grad fest.
incrementTargetPitch(pitchDelta:number)	Erhöht die Zielneigung eines Deltawinkels in Grad.
setTargetZoom(targetZoom:number)	Legt den Zielzoom in Metern fest.
incrementTargetZoom(zoomDelta:number)	Erhöht den Zielzoom in Metern.
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number)	Legt den Zieldrehpunkt in Metern fest.
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number)	Legt die lokale Zielposition in Metern fest.
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number)	Legt die Materialfarbe fest.
playAnimation(animationName:string)	Gibt die Animation wieder.
pauseAnimation(animationName:string)	Pausiert die Animation.
setAnimationTime(animationName:string, animationTime:number)	Legt die Animationszeit in Sekunden fest.

Zum Kalender hinzufügen

gwd-addtocalendar

Fügt den Kalendern ein Ereignis hinzu

Eigenschaften

Name	Beschreibung
event-title:string	Der Name des Ereignisses, wie er im Kalender des Nutzers zu sehen ist.
start-date:string	Das Datum, an dem das Ereignis beginnt.
start-time:string	Die Uhrzeit, zu der das Ereignis beginnt (24-Std.-Format).
end-date:string	Das Datum, an dem das Ereignis endet.
end-time:string	Die Uhrzeit, zu der das Ereignis endet (24-Std.-Format).
timezone:string	Die Zeitzone für das Ereignis. Wenn diese festgelegt ist, wird die Zeit korrekt für den Nutzer angepasst, wenn er sich in einer anderen Zeitzone befindet.
location:string	Der Ort des Ereignisses.
description:string	Die Beschreibung des Ereignisses.
icalendar:boolean	Legt fest, ob die iCalender-Datei verwendet werden soll oder nicht
google:boolean	Legt fest, ob Google Kalender verwendet werden soll oder nicht.
windows-live:boolean	Legt fest, ob Windows Live Calendar verwendet werden soll oder nicht.
yahoo:boolean	Legt fest, ob Yahoo! Calendar verwendet werden soll oder nicht.
bg-color:string	Hexadezimalwert für die Hintergrundfarbe des Drop-downs.
font-color:string	Hexadezimalwert für die Schriftfarbe des Drop-downs.
font-family:string	Name für die Schrift des Drop-downs.
font-size:string	Größe für die Schrift des Drop-downs.
font-weight:string	Stärke der Schrift des Drop-downs.
highlight-color:string	Hexadezimalwert für die Markierungsfarbe des Drop-downs.

Audio

gwd-audio

Eine Komponente, die ein HTMLAudioElement einbindet

Eigenschaften

Name	Beschreibung
autoplay:boolean	Legt fest, ob die Audio-Datei beim Laden automatisch wiedergegeben wird
loop:boolean	Legt fest, ob die Audio-Datei nach dem Fertigstellen in Schleife abgespielt wird
muted:boolean	Legt fest, ob die Audiodatei stumm gestartet wird.
controls:boolean	Legt fest, ob die standardmäßigen, nativen Steuerelemente des Videoplayers aktiviert werden.
sources:file	Ein durch Komma getrennter String von Audioquellen in unterschiedlichen Formaten.

Ereignisse

Name	Beschreibung
play	Wird ausgelöst, wenn die Wiedergabe der Medien nach dem Pausieren gestartet wird.
pause	Wird ausgelöst, wenn die Wiedergabe pausiert wird
playing	Wird ausgelöst, wenn die Medien entweder zum ersten Mal nach einer Pause oder nach dem Ende noch einmal wiedergegeben werden.
ended	Wird ausgelöst, wenn die Wiedergabe abgeschlossen ist
volumechange	Wird ausgelöst, wenn sich die Audiolautstärke beim Einstellen oder durch die Änderung des Attributs zum Stummschalten ändert
seeked	Wird ausgelöst, wenn ein Suchvorgang abgeschlossen ist
waiting	Wird ausgelöst, wenn der angeforderte Vorgang, z. B. die Wiedergabe, verzögert wird, weil zuerst ein anderer Vorgang abgeschlossen werden muss, z. B. eine Suche

Methoden

Name	Beschreibung
mute()	Wechselt zwischen Audio stummschalten und Stummschaltung aufheben.
pause()	Hält die Audiodatei an.
play()	Gibt die Audiodatei wieder.
replay()	Gibt die Audiodatei noch einmal wieder.
seek(time:number)	Springt zur angegebenen Zeit in der Audiodatei.

Karussell-Galerie

gwd-carouselgallery

Ein Galerieobjekt, bei dem die Frames in einem Karussell-Layout angezeigt werden

Eigenschaften

Name	Beschreibung
images:string	Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden.
groups:string	Ein durch Komma getrennter String der Gruppen-IDs.
transition-duration:number	Animationsgeschwindigkeit der Galerie in Millisekunden
start-frame:number	Die Nummer des Bildes, das als Erstes zu sehen sein soll.
autoplay:boolean	Legt fest, ob für die Frames einmal oder nie Autoplay verwendet wird
has-navigation:boolean	Legt fest, ob Steuerelemente für die Galerienavigation automatisch eingeschlossen werden.
navigation-thumbnails:boolean	Legt fest, ob zur Navigation Miniaturansichten statt Punkte verwendet werden
navigation-highlight:color	Ein CSS-Farbcode, der zum Markieren des aktiven Frames in der Navigation verwendet wird
scaling:string	Legt fest, wie Bildinhalt für seinen Frame skaliert wird
frame-width:number	Breite eines Steuerfelds für Inhalt.
frame-height:number	Höhe eines Steuerfelds für Inhalt.
neighbor-rotation-y:number	Eine Y-Achsenrotation für benachbarte Steuerfelder des aktuell zentrierten Steuerfelds, wird zum Neigen der benachbarten Steuerfelder verwendet
neighbor-translation-x:number	Eine X-Achsenübersetzung für benachbarte Steuerfelder des aktuell zentrierten Steuerfelds, wird zum Anpassen der Platzierung der benachbarten Steuerfelder verwendet
neighbor-translation-y:number	Eine Y-Achsenübersetzung für benachbarte Steuerfelder des aktuell zentrierten Steuerfelds
neighbor-translation-z:number	Eine Z-Achsenübersetzung für benachbarte Steuerfelder des aktuell zentrierten Steuerfelds.
exit-urls:string	Ein durch Komma getrennter String der Exit-URLs, die den Bildern in der Galerie entsprechen.
show-reflection:boolean	Legt fest, ob eine CSS3-basierte Reflexion gezeigt werden soll.
pause-front-media:boolean	Legt fest, ob bei einem Framewechsel die Medienelemente (z. B. Video oder Audio) auf dem vorherigen Frame pausiert werden.
resume-next-media:boolean	Legt fest, ob bei einem Framewechsel die Medienelemente (z. B. Video oder Audio) auf dem nächsten Frame fortgesetzt werden.

Ereignisse

Name	Beschreibung
firstinteraction	Wird ausgelöst, wenn der Nutzer zum ersten Mal mit der Galerie interagiert.
allframesviewed	Wird ausgelöst, wenn alle Frames der Galerie mindestens einmal angezeigt wurden.
allframesloaded	Wird ausgelöst, wenn alle Frames der Galerie geladen wurden.
autoplayended	Wird ausgelöst, wenn die automatische Wiedergabe aus irgendeinem Grund beendet wurde. Das Ereignis event.detail.completed lautet „wahr“, wenn die Wiedergabe nach Erreichen der festgelegten Dauer endet, ansonsten lautet es „falsch“.
frameshown	Wird ausgelöst, wenn ein neuer Frame angezeigt wird.
frameactivated	Wird ausgelöst, wenn ein neuer Frame bereits aktiviert wurde, auch wenn er noch nicht sichtbar ist.
frameautoplayed	Wird ausgelöst, wenn ein Frame für die automatische Wiedergabe aktiviert wird. Dieses Ereignis kann häufiger ausgelöst werden als frameshown, da es bei mehreren Frames, die gleichzeitig eingeblendet werden, für jeden einzelnen Frame separat ausgelöst wird.
frametap	Wird ausgelöst, wenn der Nutzer auf einen Frame tippt.
reachleftend	Wird ausgelöst, wenn das linke Ende der Galerie erreicht wird.
reachrightend	Wird ausgelöst, wenn das rechte Ende der Galerie erreicht wird.
trackstart	Wird ausgelöst, wenn das Ziehen der Maus oder die Ziehbewegung beginnt.
track	Die Komponente registriert die X- und Y-Ortsdaten der Maus oder Ziehbewegung.
trackend	Wird ausgelöst, wenn das Ziehen der Maus oder die Ziehbewegung endet.

Methoden

Name	Beschreibung
goToFrame(index:number, opt_animate:string)	Wechselt zum angegebenen Frame.
goForwards(opt_animate:string)	Wechselt zum nächsten Frame, falls verfügbar.
goBackwards(opt_animate:string)	Wechselt zum vorherigen Frame.
rotateOnce(opt_duration:number, opt_direction:string)	Zeigt jeden Frame einmal in der Galerie an
stopRotation()	Stoppt die aktuelle automatische Rotation.

Cue-Punkt

gwd-cuepoint

Eine Komponente, die an eine Google Web Designer-Videokomponente angehängt ist und ein Ereignis auslöst, wenn das Video eine bestimmte Zeit erreicht

Eigenschaften

Name	Beschreibung
time:number	Der Zeitpunkt in Sekunden, zu dem das Ereignis ausgelöst wird.

Ereignisse

Name	Beschreibung
cuepoint	Wird ausgelöst, wenn die Wiedergabe der Medien eine in einem Cue-Punkt definierte Zeit erreicht hat.

Methoden

Name	Beschreibung
seek()	Legt die Videozeit auf die Zeit eines Cue-Punkts fest.
setTime(time:number)	Legt die Zeit des Cue-Punkts fest.

Date Swap

gwd-dateswap

Mit dieser Komponente wird die Sichtbarkeit des Elements in Abhängigkeit davon geändert, wie das aktuelle Datum und der Zielzeitraum zueinander stehen

Eigenschaften

Name	Beschreibung
from_date:string	Ein String, der ein Datum auf der Grundlage von RFC2822 oder ISO 8601 darstellt.
to_date:string	Ein String, der ein Datum auf der Grundlage von RFC2822 oder ISO 8601 darstellt.

Ereignisse

Name	Beschreibung
before	Wird ausgelöst, wenn das aktuelle Datum vor dem from_date (ausschließlich) liegt.
during	Wird ausgelöst, wenn das aktuelle Datum zwischen dem from_date und dem to_date (einschließlich) liegt.
after	Wird ausgelöst, wenn das aktuelle Datum nach dem to_date (ausschließlich) liegt.

Methoden

Name	Beschreibung
checkDate()	Vergleicht das aktuelle Datum mit dem Zeitraum.

Galerienavigation

gwd-gallerynavigation

Ein Navigationssteuerelement für eine Google Web Designer-Galeriekomponente

Eigenschaften

Name	Beschreibung
for:string	Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden.
highlight:color	Ein CSS-Farbcode, der zum Markieren des aktiven Frames in der Navigation verwendet wird
use-thumbnails:boolean	Legt fest, ob zur Navigation Miniaturansichten statt Punkte verwendet werden

Allgemeine Anzeige

gwd-genericad

Implementiert den Anzeigencontainer „Allgemein“

Ereignisse

Name	Beschreibung
adinitialized	Wird ausgelöst, kurz bevor der Anzeigeninhalt durch das Element „Allgemein“ gerendert wird.

Methoden

Name	Beschreibung
initAd()	Startet die Anzeige nach Erhalt der entsprechenden Ereignisse vom Enabler.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	Navigiert zu den maximierten Abmessungen der Anzeige. Falls die Seiten-ID nicht angegeben wurde, navigiert die Anzeige zur Standardseite.
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string)	Beendet die Anzeige und minimiert sie optional.

Geste

gwd-gesture

Abstraktion für eine Reihe von Bewegungsereignissen

Eigenschaften

Name	Beschreibung
touch-action:string	Interpretationsweise für Berührungsaktionen. Gültige Werte sind: auto, none, pan-x und pan-y. Das Standardverhalten ist identisch mit der Einstellung none.

Ereignisse

Name	Beschreibung
hover	Wird ausgelöst, wenn die Maus oder die Berührung die Komponentengrenze überschreitet.
hoverend	Wird ausgelöst, wenn die Maus oder die Berührung die Komponentengrenze verlässt.
trackstart	Wird ausgelöst, wenn das Ziehen der Maus oder die Ziehbewegung beginnt.
track	Die Komponente registriert die X- und Y-Ortsdaten der Maus oder Ziehbewegung.
trackend	Wird ausgelöst, wenn das Ziehen der Maus oder die Ziehbewegung endet.
tap	Wird ausgelöst, wenn ein Tippen des Nutzers oder ein Mausklick registriert wird.
swipeleft	Wird ausgelöst, wenn der Nutzer nach links wischt.
swiperight	Wird ausgelöst, wenn der Nutzer nach rechts wischt.
swipeup	Wird ausgelöst, wenn der Nutzer nach oben wischt.
swipedown	Wird ausgelöst, wenn der Nutzer nach unten wischt.

Google Anzeige

gwd-google-ad

Implementiert den Google-Anzeigencontainer

Eigenschaften

Name	Beschreibung
polite-load:boolean	Legt fest, ob diese Anzeige die Polite Load-Semantik einhalten muss.
fullscreen:boolean	Legt fest, ob diese Anzeige eine Vollbildmaximierung versuchen soll oder nicht

Ereignisse

Name	Beschreibung
adinitialized	Wird ausgelöst, bevor das Element den Inhalt der Anzeige rendert.
expandstart	Wird ausgelöst, wenn der Enabler ein Ereignis „Start maximieren“ auslöst.
expandfinish	Wird ausgelöst, wenn der Enabler ein Ereignis „Ende maximieren“ auslöst.
collapsestart	Wird ausgelöst, wenn der Enabler ein Ereignis „Start minimieren“ auslöst.
collapsefinish	Wird ausgelöst, wenn der Enabler ein Ereignis „Ende minimieren“ auslöst.
fullscreensupport	Wird ausgelöst, wenn die Vollbildmaximierung unterstützt wird.
dynamicelementsready	Wird ausgelöst, nachdem dynamische Daten auf den Anzeigeninhalt angewendet wurden.
hostpagescroll	Wird ausgelöst, wenn der Enabler ein Ereignis „Scrollen auf der Host-Seite“ auslöst.

Methoden

Name	Beschreibung
initAd()	Startet die Anzeige nach Erhalt der entsprechenden Ereignisse vom Enabler.
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string)	Navigiert zu den maximierten Abmessungen der Anzeige. Falls die Seiten-ID nicht angegeben wurde, navigiert die Anzeige zur Standardseite.
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	Beendet die Anzeige und minimiert sie optional.
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string)	Beendet die Anzeige zur angegebenen URL, unabhängig von dem in Studio festgelegten Wert. Minimiert die Anzeige, wenn opt_collapseOnExit den Wert „wahr“ hat.
incrementCounter(metric:string, opt_isCumulative:boolean)	Erfasst ein Zählerereignis.
startTimer(timerId:string)	Startet einen Ereignis-Timer
stopTimer(timerId:string)	Stoppt einen Ereignis-Timer
reportManualClose()	Erfasst das manuelle Schließen einer Anzeige des Typs „Floating“, „Pop-up“, „Expandable“, „In-Page mit Pop-up“ oder „In-Page mit Floating“. Diese Methode ist ein Proxy für Enabler.reportManualClose.

Hotspot

gwd-hotspot

Eine Komponente, mit der ein Hotspot zu bestimmten Zeiten eines Videos angezeigt und ausgeblendet wird

Eigenschaften

Name	Beschreibung
show-time:number	Der Zeitpunkt in Sekunden, zu dem der Hotspot sichtbar wird.
hide-time:number	Der Zeitpunkt in Sekunden, zu dem der Hotspot nicht mehr sichtbar ist.
left:string	Die linke Position des Hotspots über dem Video im Verhältnis zur Breite des Videoframes (z. B. „5 %“).
top:string	Die oberste Position des Hotspots über dem Video im Verhältnis zur Höhe des Videoframes (z. B. „5 %“).
width:string	Die Breite des Hotspots proportional zum Video im Verhältnis zur Breite des Videoframes.
height:string	Die Höhe des Hotspots proportional zum Video im Verhältnis zur Höhe des Videoframes.

Ereignisse

Name	Beschreibung
hotspotshown	Wird ausgelöst, wenn der Hotspot sichtbar wird.
hotspothidden	Wird ausgelöst, wenn der Hotspot ausgeblendet wird.

Methoden

Name	Beschreibung
show(showHide:boolean)	Hotspot-Sichtbarkeit umschalten.
seek(showHide:boolean)	Legt eine Videozeit für die Anzeige- oder Ausblendezeit des Hotspots fest.
setTimes(showTime:number, hideTime:number)	Legt die Anzeige- und Ausblendezeiten des Hotspots fest.

iFrame

gwd-iframe

Eine Komponente, die ein HTMLIframeElement einbindet

Eigenschaften

Name	Beschreibung
source:string	Die Quelle des iFrame. Ersetzt das Attribut src des nativen Bildelements.
scrolling:string	Legt fest, ob der iFrame Bildlaufleisten enthält

Ereignisse

Name	Beschreibung
iframeload	Wird ausgelöst, wenn der iFrame geladen wird.

Methoden

Name	Beschreibung
setUrl(url:string)	Ändert die URL des iFrame und lädt sie sofort.

Bild

gwd-image

Eine Komponente, die ein HTMLImageElement einbindet, um das verzögerte Laden der Bildquelle zu unterstützen

Eigenschaften

Name	Beschreibung
source:file	Die Bildquelle. Ersetzt das Attribut src des nativen Bildelements.
alt:string	Der alternative Text für das Bild.
scaling:string	Legt fest, wie das Bild für den Frame skaliert wird.
alignment:string	Legt fest, wie das Bild innerhalb des Anzeigebereichs ausgerichtet wird.
focalpoint:string	Codiert einen Blickpunkt eines Bildes als x/y-Pixelkoordinaten.
disablefocalpoint:boolean	Deaktiviert den im Attribut focalpoint festgelegten Blickpunkt (wird intern von Google Web Designer verwendet).

Bildschaltfläche

gwd-imagebutton

Eine Bildschaltfläche mit Unterstützung für die Stati "Nach oben", "Über" und "Nach unten"

Eigenschaften

Name	Beschreibung
up-image:file	Die URL für das Bild der Schaltfläche im unbetätigten Zustand.
over-image:file	Die URL für das Bild der Schaltfläche im Mouseover-Zustand oder Hover-Zustand.
down-image:file	Die URL für das Bild der Schaltfläche im betätigten Zustand.
bgcolor:string	Die Hintergrundfarbe der Schaltfläche.
alignment:string	Ausrichtung des Bilds innerhalb des Anzeigebereichs
scaling:string	Anpassung des Bilds an den übergeordneten Container
disabled:boolean	Legt fest, ob die Schaltfläche deaktiviert werden soll

Ereignisse

Name	Beschreibung
imagebuttonloaded	Wird ausgelöst, wenn alle Bilder geladen wurden.

Methoden

Name	Beschreibung
toggleEnable()	Wechselt zwischen aktiviert und deaktiviert.
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string)	Legt die Bildquellen für alle Schaltflächenzustände fest.

Bildeffekt

gwd-image-effect

Eine „Bildeffekt“-Komponente

Eigenschaften

Name	Beschreibung
scaling:string	Legt fest, wie das Bild für den Frame skaliert wird.
time-limit:number	Zeitlimit für die Animation. Ein Wert von -1 bedeutet keine zeitliche Begrenzung.
settings:string	Öffnet das Dialogfeld mit den Komponenteneinstellungen.
images:string	Ein durch Komma getrennter String der Bildpfade, die im Bildeffekt verwendet werden.

Ereignisse

Name	Beschreibung
autoplayended	Wird ausgelöst, wenn die automatische Wiedergabe nach Ablauf des Zeitlimits beendet wird.

Methoden

Name	Beschreibung
play()	Animation wiedergeben.
pause()	Animation pausieren.

Bildeffekt „Vorher und Nachher“

gwd-before-and-after

Ein Bildeffekt, bei dem zwei ähnliche Bilder zu einem Vorher-Nachher-Vergleich zusammengefasst werden

Bildeffekt „Atmen“

gwd-breathe

Ein Bildeffekt, bei dem ein Bild durch elastisches Ausziehen und Zusammenziehen animiert wird

Bildeffekt „Einblenden“

gwd-reveal

Ein Bildeffekt, bei dem ein Bild mit einem elliptischen Fokusbereich gescannt wird, in den ein zweites Bild eingeblendet wird

Bildeffekt „Welle“

gwd-wave

Ein Bildeffekt, bei dem eine animierte Wellentransformation auf ein Bild angewendet wird, wodurch sich das Bild nach einem Wellenmuster schlängelt

Karte

gwd-map

Erweitert HTMLElement zur Zusammenfassung von Aufrufen der Google Maps API

Eigenschaften

Name	Beschreibung
api-key:string	Google API-Schlüssel. Weitere Informationen finden Sie unter https://developers.google.com/maps/documentation/javascript/get-api-key.
query:string	Name der Suchanfrage, die Standorte der Google Places API zurückgibt.
start-latitude:decimal	Startet Koordinate für mittleren Breitengrad. Der Wert sollte zwischen -90 und 90 Grad liegen.
start-longitude:decimal	Startet Koordinate für mittleren Längengrad. Der Wert sollte zwischen -180 und 180 Grad liegen.
request-user-location:boolean	Legt fest, ob der Nutzerstandort angefragt werden muss. Wenn die Eigenschaft auf „wahr“ gesetzt ist, wird der Nutzer aufgefordert, den Standort anzugeben.
client-id:string	Google Maps Premier-Client-ID
search-radius:number	Mindestradius für die Standortsuche in Metern
result-limit:number	Maximale Anzahl der Suchergebnisse, die in einer einzelnen Suchanfrage zurückgegeben werden
start-zoom:number	Startet Zoomstufe in Einheiten, die von der Google Maps-API verwendet werden. Der Standard lautet 16, was der Stadtteilebene entspricht.
marker-src:string	Bilddateiname für Ortsmarkierung als Sprite mit den Komponenten "An", "Aus" sowie "Schatten"
gps-src:string	GPS-Standort, blauer Punkt, Bilddateiname
msg-start-position-prompt:string	Lokalisierungsstring für den Text der Eingabeaufforderung im Dialogfeld, um eine Startposition auszuwählen
msg-gps-button-label:string	Lokalisierungsstring für das Label der Schaltfläche, die den Standort eines Nutzers aus der API für die Standortbestimmung abruft
msg-manual-position-button-label:string	Lokalisierungsstring für das Label der Schaltfläche, die das Standortsuchfeld anzeigt
msg-manual-position-prompt:string	Lokalisierungsstring für den Text der Eingabeaufforderung im Dialogfeld, um eine Startposition auf der Karte auszuwählen
msg-manual-position-placeholder:string	Lokalisierungsstring für den Platzhaltertext des Suchfelds, um eine Startposition auf der Karte auszuwählen
msg-geocode-failure:string	Lokalisierungsstring für den Text der Eingabeaufforderung im Dialogfeld, der angezeigt wird, wenn ein Versuch scheitert, die API für die Standortbestimmung zu verwenden.
msg-no-results-found:string	Lokalisierungsstring für den Text der Eingabeaufforderung im Dialogfeld, der angezeigt wird, wenn am ausgewählten Standort keine Ergebnisse gefunden werden

Ereignisse

Name	Beschreibung
pinclick	Wenn der Nutzer eine Markierung auf der Karte auswählt.

Methoden

Name	Beschreibung
setCenter(latitude:number, longitude:number, opt_accuracy:number)	Legt den mit Breitengrad und Längengrad angegebenen Ort als Mitte der Karte fest.

Seite

gwd-page

Eine Seite stellt eine einzelne Karte im Seitenstapel dar

Eigenschaften

Name	Beschreibung
expanded:boolean	Legt fest, ob diese Seite als erweiterte Seite betrachtet werden soll (anzeigenspezifisch).
centered:boolean	Legt fest, ob der Inhalt dieser Seite zentriert werden soll.
alt-orientation-page:string	Die Seiten-ID der Seite, die diesen Inhalt in alternativer Ausrichtung besser darstellt

Ereignisse

Name	Beschreibung
attached	Wird ausgelöst, kurz nachdem die Seite dem DOM angehängt wird
detached	Wird ausgelöst, kurz nachdem die Seite aus dem DOM entfernt wird
pageactivated	Wird ausgelöst, wenn die Seite angezeigt werden kann.
pagedeactivated	Wird ausgelöst, wenn die Seite nicht mehr angezeigt wird.
pageload	Wird ausgelöst, nachdem der Inhalt der Seite erfolgreich geladen wurde.
pagepresenting	Wird ausgelöst, kurz bevor die Seite die Einführungsanimation darstellt.
shake	Wird ausgelöst, wenn eine Schüttelbewegung des Geräts erkannt wird.
tilt	Wird ausgelöst, wenn eine Neigung des Geräts erkannt wird.
rotatetoportrait	Wird ausgelöst, wenn ein Gerät in das Hochformat gedreht wird.
rotatetolandscape	Wird ausgelöst, wenn ein Gerät in das Querformat gedreht wird.

Seitenstapel

gwd-pagedeck

Ein PageDeck (Seitenstapel) ist ein Container für Seiten. Er zeigt jeweils eine Seite. Unterschiedliche Seiten werden in einer beliebigen festgelegten Reihenfolge in den Vordergrund gebracht. Dabei werden alle unterstützten Seitenübergänge angezeigt.

Eigenschaften

Name	Beschreibung
default-page:string	ID der Standardseite

Ereignisse

Name	Beschreibung
pagetransitionstart	Wird ausgelöst, bevor ein Seitenübergang erfolgt.
pagetransitionend	Wird ausgelöst, nachdem ein Seitenübergang abgeschlossen ist.

Methoden

Name	Beschreibung
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Navigiert zur nächsten Seite im Seitenstapel.
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Navigiert zur vorherigen Seite im Seitenstapel.
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string)	Navigiert zur angegebenen Seite im Seitenstapel.
getCurrentPage()	Gibt die aktuelle Seite oder NULL zurück, wenn die Seite nicht angezeigt wird.
getDefaultPage()	Gibt die Standardseite zurück, falls angegeben, andernfalls die erste Seite.
getPage(pageId:string)	Gibt die Seite mit der angegebenen ID zurück
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean)	Gibt das Seitenelement zurück mit dem Wert des Attributs, der dem angegebenen Wert entspricht oder -1, falls die Seite nicht gefunden wird
getOrientationSpecificPage(orientation:string, pageId:string)	Gibt die Seite zurück, die mit der angegebenen Ausrichtung übereinstimmt
getElementById(id:string)	Findet das Element mit der angegebenen ID auf allen Seiten in diesem Seitenstapel. Da gwd-pagedeck nur die aktive Seite im DOM behält, gibt das standardmäßige document.getElementById(id) nicht die Elemente in den inaktiven Seiten zurück. Es ist ein häufiger Anwendungsfall, vor allem bei dynamischen Anzeigen, dass auf Elemente in inaktiven Seiten verwiesen wird. Hier kann diese Methode verwendet werden, um einen Verweis zum Element nach dessen ID aufzuheben.

Parallaxe

gwd-parallax

Eine „Parallaxe“-Komponente

Eigenschaften

Name	Beschreibung
settings:string	Öffnet das Dialogfeld mit den Komponenteneinstellungen.
yscroll:decimal	Der Scrollfaktor für die Parallaxe-Animation beim Rendern im Anzeigebereich.

Ereignisse

Name	Beschreibung
ready	Wird ausgelöst, wenn alle Assets in der Parallaxe geladen wurden.

Partikeleffekte

gwd-particleeffects

Komponente zum Zusammenstellen mehrerer Partikeleffekte und Bilder

Eigenschaften

Name	Beschreibung
autoplay:boolean	Legt fest, ob die Animation beim Laden der Komponente automatisch abgespielt werden soll.
time-limit:number	Zeitlimit für die Animation. Ein Wert von -1 bedeutet keine zeitliche Begrenzung.
settings:string	Öffnet das Dialogfeld mit den Komponenteneinstellungen.

Ereignisse

Name	Beschreibung
timelimitreached	Wird ausgelöst, wenn die Wiedergabe einer Animation das bestimmte Zeitlimit erreicht hat.

Methoden

Name	Beschreibung
play()	Animation wiedergeben.
pause()	Animation pausieren.
stop()	Animation stoppen.

Partikel

gwd-particles

Komponente „Partikelsystem“

Eigenschaften

Name	Beschreibung
acceleration-x:number	Die x-Komponente der Beschleunigung in Pixel/Frame/Frame.
acceleration-y:number	Die y-Komponente der Beschleunigung in Pixel/Frame/Frame.
angle-max:number	Der maximale Winkel der Geschwindigkeitsrichtung der Partikel.
angle-min:number	Der minimale Winkel der Geschwindigkeitsrichtung der Partikel.
autoplay:boolean	Legt fest, ob die Animation automatisch abgespielt werden soll, wenn das übergeordnete gwd-particleeffects wiedergegeben wird.
color1:color	Die erste Farbe.
color2:color	Die zweite Farbe.
color-rate:number	Die Geschwindigkeit, mit der die Farbe von der Farbe 1 zu Farbe 2 pro Frame zusätzlich addiert wechselt. Sie liegt im Bereich [0, 1].
emit-interval:number	Die Anzahl der Frames, bis der nächste Partikel ausgegeben wird.
emit-x-max:string	Die maximale x-Koordinate des Partikelausgabebereichs.
emit-x-min:string	Die minimale x-Koordinate des Partikelausgabebereichs.
emit-y-max:string	Die maximale y-Koordinate des Partikelausgabebereichs.
emit-y-min:string	Die minimale y-Koordinate des Partikelausgabebereichs.
loop:boolean	Legt fest, ob die Animation als Schleife wiedergegeben werden soll.
number:number	Die Anzahl der Partikel.
opacity-min:number	Die minimale Deckkraft der Partikel.
opacity-max:number	Die maximale Deckkraft der Partikel.
opacity-rate:number	Der Grad, um den sich die Deckkraft pro Frame ändert. Sie wird zur aktuellen Deckkraft eines Partikels addiert.
random-colors:boolean	Legt fest, ob die Partikel zufällige Farben zwischen Farbe 1 und Farbe 2 haben. Bei „falsch“ werden alle Partikel mit Farbe 1 initialisiert.
shape:string	Die Form des Sprites.
size-max:number	Die maximale Größe der Partikel in Pixel.
size-min:number	Die minimale Größe der Partikel in Pixel.
size-rate:number	Der Grad, um den sich die Größe pro Frame ändert. Sie wird zur aktuellen Größe eines Partikels addiert.
skip-forward:number	Überspringen zu einer Zeit, wenn ein bestimmter Prozentsatz von Partikeln in ein Partikelsystem ausgegeben wurde.
speed-max:number	Die maximale Geschwindigkeit der Partikel in Pixel/Frame.
speed-min:number	Die minimale Geschwindigkeit der Partikel in Pixel/Frame.
sprite-image-src:file	Die Quelle der Bilder, die als Sprites verwendet werden.
turbulence-frequency:number	Die Frequenz der turbulenten Strömung. Bei höheren Werten treten häufiger Unregelmäßigkeiten in der Bewegung auf. Muss eine positive Zahl sein.
turbulence-rate:number	Der Grad, um den sich die Stärke mit der Zeit ändert.
turbulence-strength:number	Die Stärke der turbulenten Strömung, die auf die Partikel einwirkt. Muss eine positive Zahl sein.
turbulence-trail:number	Legt fest, wie viele vorherige und aktuelle Zustände eines Partikels gerendert werden sollen.

Methoden

Name	Beschreibung
play()	Animation wiedergeben.
pause()	Animation pausieren.
stop()	Animation stoppen.

SpriteSheet

gwd-spritesheet

Einzelnen Keyframe oder einzelne Animation aus dem Sprite Sheet anzeigen

Eigenschaften

Name	Beschreibung
imagesource:file	Die URL für das Sprite Sheet-Bild.
offsetx:number	Der Abstand in Pixeln von der linken Seite des Sprite Sheets, entweder zum linken Rand des Bildes, das Sie aus dem Sprite Sheet verwenden möchten, oder zum linken Rand des ersten Sprite-Bildes, das Sie zur Erstellung einer Animation verwenden
offsety:number	Der Abstand in Pixeln vom oberen Rand des Sprite Sheets, entweder zum oberen Rand des Bildes, das Sie aus dem Sprite Sheet verwenden möchten, oder zum oberen Rand des ersten Sprite-Bildes, das Sie zur Erstellung einer Animation verwenden
clipwidth:number	Die Breite in Pixeln, entweder des Bildes, das Sie aus dem Sprite Sheet verwenden möchten, oder des ersten Sprite-Bildes, das Sie zur Erstellung einer Animation verwenden
clipheight:number	Die Höhe in Pixeln, entweder des Bildes, das Sie aus dem Sprite Sheet verwenden möchten, oder des ersten Sprite-Bildes, das Sie zur Erstellung einer Animation verwenden
alignment:string	Bestimmt die Position des Bildes in dessen Container.
scaling:string	Bestimmt, wie Bilder verschiedener Größe innerhalb der Komponente dargestellt werden.
totalframecount:number	Die Anzahl der Frames, aus denen die Animation besteht.
duration:number	Die Dauer der einzelnen Frames in Millisekunden.
loopcount:number	Die Anzahl der Wiederholungsschleifen der Animation. Wird für eine endlose Wiederholung auf 0 gesetzt.
autoplay:boolean	Legt fest, ob die Animation automatisch wiedergegeben wird.
endonstartframe:boolean	Legt fest, ob die Animation mit dem ersten Frame beendet wird
reverseplay:boolean	Legt fest, ob die Animation rückwärts wiedergegeben wird.

Ereignisse

Name	Beschreibung
animationend	Wird ausgelöst, wenn die Animation abgeschlossen ist.
animationpause	Wird ausgelöst, wenn die Animation pausiert wurde.
animationplay	Wird ausgelöst, wenn die Wiedergabe der Animation gestartet wird.
animationrestart	Wird ausgelöst, wenn die Animation nach einer Pause neu gestartet wird.

Methoden

Name	Beschreibung
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean)	Definiert eine neue Animation.
play()	Gibt die Animation wieder.
pause()	Pausiert die Animation.
togglePlay()	Schaltet zwischen Wiedergabe und Pause der Animation um.
restart()	Startet die Animation neu.
previousFrame()	Zeigt den vorherigen Frame an.
nextFrame()	Zeigt den nächsten Frame an.
goToFrame(id:number)	Zeigt einen bestimmten Frame nach Framenummer an.

Bewertungen

gwd-starratings

Eine Komponente zum Rendern einer Reihe von Sternen, die eine Bewertung darstellen

Eigenschaften

Name	Beschreibung
ratingvalue:decimal	Wert der Bewertung.
iconsize:number	Größe des Sternsymbols.
isemptyshown:boolean	Legt fest, ob die leeren Sternsymbole angezeigt werden.
isemptycolored:boolean	Legt fest, ob die leeren Sternsymbole farbig sind.
colorprimary:color	Primäre Füllfarbe.
colorsecondary:color	Farbe des sekundären Farbverlaufs.
gradienttype:string	Art des Farbverlaufs.
ratingmax:number	Höchstbewertung mit Sternen.
ratingmin:decimal	Mindestbewertung mit Sternen.

Ereignisse

Name	Beschreibung
complete	Wird ausgelöst, wenn die Bewertungssymbole erstellt wurden.
validationerror	Die Sternebewertung liegt unter der Mindestbewertung.

Street View

gwd-streetview

Komponente von Google Street View

Eigenschaften

Name	Beschreibung
key:string	Informationen dazu, wie Sie einen eindeutigen Schlüssel für Ihre Anwendung abrufen, finden Sie unter https://developers.google.com/maps/documentation/javascript/get-api-key.
latitude:decimal	Breitengrad des Ortes.
longitude:decimal	Längengrad des Ortes.
interaction:boolean	Legt fest, ob die Ansicht geschwenkt/gedreht werden kann.
heading:decimal	Gibt die Kompassausrichtung der Kamera an. Werte von 0 bis 360 sind zulässig (beide Werte geben den Norden an, 90 gibt den Osten und 180 den Süden an). Wird keine Ausrichtung angegeben, erfolgt die Berechnung eines Werts, der die Kamera in Richtung des angegebenen Ortes lenkt, wobei von der Stelle ausgegangen wird, an der das nächstgelegene Foto aufgenommen wurde.
pitch:decimal	Gibt den Aufwärts- oder Abwärtswinkel der Kamera im Verhältnis zum Street View-Fahrzeug an. Dieser ist oft, aber nicht immer, eben und waagrecht. Positive Werte versetzen den Winkel der Kamera nach oben (wobei sie bei 90 Grad gerade nach oben zeigt); negative Werte versetzen den Winkel der Kamera nach unten (bei -90 Grad zeigt sie gerade nach unten).
zoom:number	Gibt die Zoomeinstellung der Kamera im Verhältnis zum Street View-Fahrzeug an.

Swipe-Galerie

gwd-swipegallery

Ein Galerieobjekt, bei dem die Frames in einem horizontal navigierbarem Streifen mit Inhalten angezeigt werden

Eigenschaften

Name	Beschreibung
images:string	Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden.
groups:string	Ein durch Komma getrennter String der Gruppen-IDs.
transition-duration:number	Animationsgeschwindigkeit der Galerie in Millisekunden.
start-frame:number	Der erste Frame für den Start
num-frames-to-display:number	Anzahl der gleichzeitig einzublendenden Frames.
frame-snap-interval:number	Anzahl der Frames, die bei jeder Wischbewegung weiterbewegt werden.
autoplay:boolean	Legt fest, ob die Galerie einmal automatisch rotiert.
has-navigation:boolean	Legt fest, ob Steuerelemente für die Galerienavigation eingeschlossen werden.
navigation-thumbnails:boolean	Legt fest, ob zur Navigation Miniaturansichten statt Punkte verwendet werden
navigation-highlight:color	Ein CSS-Farbcode, der zum Markieren des aktiven Frames in der Navigation verwendet wird
scaling:string	Legt fest, wie Bildinhalt für seinen Frame skaliert wird
swipe-axis:string	Die Achse, in der die Wischbewegung erkannt wird.
offset:number	Die Abstandgröße zwischen nebeneinanderliegenden Inhaltsframes
frame-width:number	Die Breite eines Inhaltsframes, überschreibt num-frames-to-display.
frame-height:number	Die Höhe eines Inhaltsframes.
autoplay-duration:number	Die Gesamtdauer der automatischen Wiedergabe der Frames
autoplay-step-interval:number	Das Intervall zwischen den einzelnen Frame-Schritten bei der automatischen Wiedergabe
exit-urls:string	Ein durch Komma getrennter String der Exit-URLs, die den Bildern in der Galerie entsprechen.
disable-gesture:boolean	Blendet die Komponente „Geste“ aus bzw. deaktiviert sie, wodurch die Tippnavigation der Galerie aktiviert wird.
pause-front-media:boolean	Legt fest, ob bei einem Framewechsel die Medienelemente (z. B. Video oder Audio) auf dem vorherigen Frame pausiert werden.
resume-next-media:boolean	Legt fest, ob bei einem Framewechsel die Medienelemente (z. B. Video oder Audio) auf dem nächsten Frame fortgesetzt werden.

Ereignisse

Name	Beschreibung
firstinteraction	Wird ausgelöst, wenn der Nutzer zum ersten Mal mit der Galerie interagiert.
allframesviewed	Wird ausgelöst, wenn alle Frames der Galerie mindestens einmal angezeigt wurden.
allframesloaded	Wird ausgelöst, wenn alle Frames der Galerie geladen wurden.
autoplayended	Wird ausgelöst, wenn die automatische Wiedergabe aus irgendeinem Grund beendet wurde. Das Ereignis event.detail.completed lautet „wahr“, wenn die Wiedergabe nach Erreichen der festgelegten Dauer endet, ansonsten lautet es „falsch“.
frameshown	Wird ausgelöst, wenn ein neuer Frame angezeigt wird, nachdem alle erforderlichen Animationen abgeschlossen sind.
frameactivated	Wird ausgelöst, wenn ein neuer Frame bereits aktiviert wurde, auch wenn er noch nicht sichtbar ist.
frameautoplayed	Wird ausgelöst, wenn ein Frame für die automatische Wiedergabe aktiviert wird. Dieses Ereignis kann häufiger ausgelöst werden als frameshown, da es bei mehreren Frames, die gleichzeitig eingeblendet werden, für jeden einzelnen Frame separat ausgelöst wird.
frametap	Wird ausgelöst, wenn der Nutzer auf einen Frame tippt.
reachleftend	Wird ausgelöst, wenn das linke Ende der Galerie erreicht wird.
reachrightend	Wird ausgelöst, wenn das rechte Ende der Galerie erreicht wird.
framemouseover	Wird ausgelöst, wenn der Nutzer die Maus über einen Frame bewegt.
framemouseout	Wird ausgelöst, wenn der Nutzer die Maus aus einem Frame herausbewegt.
trackstart	Wird ausgelöst, wenn das Ziehen der Maus oder die Ziehbewegung beginnt.
track	Die Komponente registriert die X- und Y-Ortsdaten der Maus oder Ziehbewegung.
trackend	Wird ausgelöst, wenn das Ziehen der Maus oder die Ziehbewegung endet.

Methoden

Name	Beschreibung
goToFrame(frame:number, opt_animate:string)	Wechselt zum angegebenen Frame.
rotateOnce(opt_duration:number, opt_direction:string)	Zeigt jeden Frame einmal in der Galerie an.
stopRotation()	Stoppt die aktuelle automatische Rotation
goForwards()	Bewegt die Galerie um einen Frame vor.
goBackwards()	Bewegt die Galerie um einen Frame zurück.

3D-Animation

gwd-swirl

Eine „3D-Animation“-Komponente

Eigenschaften

Name	Beschreibung
yscroll:decimal	Der Scrollfaktor für die 3-D-Animation beim Rendern im Anzeigebereich.
settings:string	Öffnet das Dialogfeld mit den Komponenteneinstellungen.

Ereignisse

Name	Beschreibung
ready	Wird ausgelöst, wenn alle untergeordneten Assets geladen wurden.

Interaktionsfläche

gwd-taparea

Abstraktion für Ereignis „Klicken“ oder „Berühren“

Eigenschaften

Name	Beschreibung
exit-override-url:string	Die URL für den Exit, wenn auf die Interaktionsfläche getippt wird

Ereignisse

Name	Beschreibung
action	Wird ausgelöst, wenn der Nutzer auf die Schaltfläche tippt (Mobilgerät) oder klickt (Computer).

Für Anruf/SMS-Versand tippen

gwd-taptocall

Diese Komponente ruft bei Klicken oder Berühren die konfigurierte Telefonnummer an bzw. sendet eine SMS.

Eigenschaften

Name	Beschreibung
number:string	Telefonnummer für Anruf oder SMS
action:string	Auswählen, um eine SMS-Nachricht zu senden oder einen Telefonanruf zu starten

Ereignisse

Name	Beschreibung
action	Wird ausgelöst, wenn der Nutzer auf die Schaltfläche tippt (Mobilgerät) oder klickt (Computer).
taptocall	Wird bei einem Anruf oder beim Senden einer SMS ausgelöst.

Methoden

Name	Beschreibung
dial()	Beginnt einen Anruf oder sendet eine SMS an die konfigurierte Nummer.

Übergangsgalerie

gwd-transitiongallery

Eine „Übergangsgalerie“-Komponente

Eigenschaften

Name	Beschreibung
settings:string	Öffnet das Dialogfeld mit den Komponenteneinstellungen.
images:string	Ein durch Komma getrennter String der Bildpfade, die in der Galerie verwendet werden.
scaling:string	Legt fest, wie das Bild für den Frame skaliert wird.
exit-urls:string	Ein durch Komma getrennter String der Exit-URLs, die den Bildern in der Galerie entsprechen.

Ereignisse

Name	Beschreibung
autoplayended	Wird ausgelöst, wenn die automatische Wiedergabe aus irgendeinem Grund beendet wurde. Das Ereignis event.detail.completed lautet „wahr“, wenn die Wiedergabe nach Erreichen der festgelegten Schleifenanzahl endet, ansonsten lautet es „falsch“.
frameactivated	Wird ausgelöst, wenn ein neuer Frame bereits aktiviert wurde, auch wenn er noch nicht sichtbar ist.
frameshown	Wird ausgelöst, wenn ein neuer Frame angezeigt wird.
frametap	Wird ausgelöst, wenn der Nutzer auf einen Frame tippt.
rotateonceended	Wird ausgelöst, wenn die Rotation aus irgendeinem Grund beendet wurde. Das Ereignis event.detail.completed lautet „wahr“, wenn die Rotation wie vorgesehen endet, ansonsten lautet es „falsch“.
reachleftend	Wird ausgelöst, wenn das linke Ende der Galerie erreicht wird.
reachrightend	Wird ausgelöst, wenn das rechte Ende der Galerie erreicht wird.

Methoden

Name	Beschreibung
goToFrame(frame:number, with_animation:boolean)	Wechselt zum angegebenen Frame.
rotateOnce(startFromCurrentFrame:boolean)	Zeigt den Frame in der Galerie ab dem Ausgangsframe an, wenn startFromCurrentFrame „falsch“ lautet oder nicht angegeben ist, ansonsten ab dem aktuellen Frame. Die Drehung endet, bevor der Ausgangsframe erreicht wird.
startAutoplay(startFromCurrentFrame:boolean)	Startet die automatische Wiedergabe in der Galerie ab dem Ausgangsframe, wenn startFromCurrentFrame „falsch“ lautet oder nicht angegeben ist, ansonsten ab dem aktuellen Frame. Die automatische Wiedergabe endet, wenn die festgelegte Schleifenanzahl erreicht wird.
stop()	Bricht die Animation ab, wenn sie ausgeführt wird.
goForwards()	Bewegt die Galerie um einen Frame vor.
goBackwards()	Bewegt die Galerie um einen Frame zurück.

Übergang „Jalousien“

gwd-blinds

Bei der Komponente „Jalousien-Effekt“ wird das neue Bild so angezeigt, als ob es sich hinter Jalousien mit Lamellen befindet, die sich nacheinander beginnend von einem Rand und dann weiter zum gegenüberliegenden Rand öffnen

Eigenschaften

Name	Beschreibung
direction:dropdown	Die Richtung des Effekts.
blinds:number	Die Anzahl der Jalousien.
transparentbackground:boolean	Gibt an, ob der transparente Hintergrund angezeigt werden soll, bevor die Jalousien des neuen Bildes gerendert werden. Bei „falsch“ überlagern die Jalousien das alte Bild.

Übergang „Tür-Wischen“

gwd-door-wipe

Die Komponente „Tür-Wischen-Effekt“ ist eine Variation des Wischeffekts mit zwei Typen, die auf der Wischrichtung basieren. Durch ein öffnendes Tür-Wischen wird das neue Bild beginnend von der Mitte des alten Bildes geöffnet, wie eine sich öffnende Doppeltür. Durch ein schließendes Tür-Wischen wird das neue Bild beginnend von den gegenüberliegenden Rändern des alten Bildes geöffnet, wie eine sich schließende Doppeltür.

Eigenschaften

Name	Beschreibung
orientation:dropdown	Die Ausrichtung der Animation.
direction:dropdown	Die Richtung des Tür-Wischen-Effekts.

Übergang „Ausblenden“

gwd-fade

Komponente „Ausblenden-Übergang“

Übergang „Iris-Wischen“

gwd-iris-wipe

Bei der Komponente „Iris-Wischen-Effekt“ wird das neue Bild in einem immer größer werdenden Kreis angezeigt, der standardmäßig von der Mitte des Frames ausgeht

Eigenschaften

Name	Beschreibung
originpercentx:number	Der Ausgangspunkt des größer werdenden Kreises in der x-Achse relativ zur Breite des Frames.
originpercenty:number	Der Ausgangspunkt des größer werdenden Kreises in der y-Achse relativ zur Höhe des Frames.

Übergang „Schieben“

gwd-push

Bei der Komponente „Schieben-Übergangseffekt“ wird das alte Bild durch das neue aus der Ansicht geschoben

Eigenschaften

Name	Beschreibung
direction:dropdown	Die Richtung des Schieben-Effekts.

Übergang „Radiales Wischen“

gwd-radial-wipe

Die Komponente „Radiales Wischen-Effekt“ ist eine Variation des Wischeffekts, bei der wie bei einem Uhrzeiger um einen vorgegebenen Punkt herum eine radiale Wischbewegung ausgelöst und so das neue Bild angezeigt wird

Eigenschaften

Name	Beschreibung
direction:dropdown	Die Richtung des Effekts.
originpercentx:number	Der Ausgangspunkt in der x-Achse relativ zur Breite des Frames, von dem ausgehend eine radiale Wischbewegung ausgelöst wird, um das neue Bild anzuzeigen.
originpercenty:number	Der Ausgangspunkt in der y-Achse relativ zur Höhe des Frames, von dem ausgehend eine radiale Wischbewegung ausgelöst wird, um das neue Bild anzuzeigen.

Übergang „Drehen“

gwd-rotate

Bei der Komponente „Drehen-Effekt“ beginnt zuerst das alte Bild sich zu drehen und wird herangezoomt, dann wird das neue Bild noch in der Drehbewegung herausgezoomt

Eigenschaften

Name	Beschreibung
direction:dropdown	Die Richtung des Effekts.

Übergang „Slicen“

gwd-slice

Bei der Komponente „Slicen-Effekt“ ist das neue Bild in Segmenten oder Balken zu sehen, die nacheinander in der Ansicht angezeigt werden

Eigenschaften

Name	Beschreibung
direction:dropdown	Die Richtung des Slicen-Effekts.
slices:number	Die Anzahl der Segmente oder Balken, die die Ansicht teilen.
transparentbackground:boolean	Legt fest, ob der transparente Hintergrund angezeigt werden soll, bevor die neuen Bildsegmente Stück für Stück eingeblendet werden. Bei „falsch“ überlagern die Segmente das alte Bild.

Übergang „Teilen und Schieben“

gwd-split-push

Die Komponente „Teilen und Schieben-Effekt“ ist eine Variation des Schieben-Effekts, bei der das alte Bild vertikal oder horizontal in zwei Teile geteilt wird. Diese werden dann von entsprechenden Teilen des neuen Bildes in entgegengesetzten Richtungen aus der Ansicht geschoben.

Eigenschaften

Name	Beschreibung
orientation:dropdown	Die Ausrichtung der Animation.

Übergang „Streifen-Wischen“

gwd-stripe-wipe

Die Komponente „Streifen-Wischen-Effekt“ ist eine Variation des Wischeffekts, bei der Streifen in wechselnden Farben gleichzeitig auf dem Bildschirm entstehen und das alte Bild bedecken. Dann schrumpfen die Streifen zusammen, sodass das neue Bild angezeigt wird.

Eigenschaften

Name	Beschreibung
direction:dropdown	Die Richtung des Effekts.
stripes:number	Die Anzahl der Streifen jeder Farbe.
color1:color	Hexadezimalwert einer der beiden abwechselnden Streifenfarben.
color2:color	Hexadezimalwert für die andere abwechselnde Streifenfarbe.

Übergang „Venezianische Jalousien“

gwd-venetian-blinds

Bei der Komponente „Venezianische Jalousien-Effekt“ wird das neue Bild so angezeigt, als ob es sich hinter venezianischen Jalousien mit Lamellen befindet, die sich gleichzeitig oder nacheinander öffnen

Eigenschaften

Name	Beschreibung
orientation:dropdown	Die Ausrichtung der Animation.
blinds:number	Die Anzahl der Jalousien.
staggered:boolean	Legt fest, ob die Lamellen verzögert ineinander übergehen. Bei „falsch“ gehen alle Lamellen gleichzeitig ineinander über.

Übergang „Wischen“

gwd-wipe

Komponente „Wischen-Übergang“. Bei dem regulären Wischen-Effekt wird das alte Bild hinter einer Linie, die sich von einem Bildrand zum anderen bewegt, nach und nach durch das neue Bild ersetzt.

Eigenschaften

Name	Beschreibung
direction:dropdown	Die Richtung des Effekts.
angle:number	Der Neigungswinkel der Linie, die das alte Bild durch das neue Bild ersetzt.

Übergang „Zickzack“

gwd-zigzag

Bei der Komponente „Zickzack-Effekt“ wird das neue Bild in einem sich schlängelnden Gittermuster angezeigt. Durch einen horizontalen Zickzack-Effekt werden die Kacheln des neuen Bilds in aufeinanderfolgenden Reihen abwechselnd von links nach rechts und umgekehrt angezeigt. Durch einen vertikalen Zickzack-Effekt werden die Kacheln des neuen Bilds in aufeinanderfolgenden Spalten abwechselnd von oben nach unten und umgekehrt angezeigt.

Eigenschaften

Name	Beschreibung
orientation:dropdown	Die Ausrichtung der Animation.
rows:number	Die Anzahl der Reihen des Zickzack-Effekts.
columns:number	Die Anzahl der Spalten des Zickzack-Effekts.

Video

gwd-video

Eine Komponente, die ein HTMLVideoElement einbindet

Eigenschaften

Name	Beschreibung
autoplay:boolean	Legt fest, ob das Video beim Laden automatisch wiedergegeben wird
loop:boolean	Legt fest, ob das Video nach dem Fertigstellen in Schleife wiedergegeben wird
muted:boolean	Legt fest, ob das Video stumm gestartet wird
controls:boolean	Legt fest, ob die standardmäßigen, nativen Steuerelemente des Videoplayers aktiviert werden.
sources:file	Ein durch Komma getrennter String von Videos in unterschiedlichen Formaten.
poster:string	Eine URL, die auf einen Posterframe verweist, der angezeigt wird, bis der Nutzer eine Wiedergabe oder Suche startet.

Ereignisse

Name	Beschreibung
play	Wird ausgelöst, wenn die Wiedergabe der Medien nach dem Pausieren gestartet wird, d. h. wenn sie nach einem vorangehenden Ereignis "pause" wieder aufgenommen wird
pause	Wird ausgelöst, wenn die Wiedergabe pausiert wird
playing	Wird ausgelöst, wenn die Medien entweder zum ersten Mal nach einer Pause oder nach dem Ende erneut wiedergegeben werden
ended	Wird ausgelöst, wenn die Wiedergabe abgeschlossen ist
volumechange	Wird ausgelöst, wenn sich die Audiolautstärke beim Einstellen oder durch die Änderung des Attributs zum Stummschalten ändert
seeked	Wird ausgelöst, wenn ein Suchvorgang abgeschlossen ist
waiting	Wird ausgelöst, wenn der angeforderte Vorgang, z. B. die Wiedergabe, verzögert wird, weil zuerst ein anderer Vorgang abgeschlossen werden muss, z. B. eine Suche

Methoden

Name	Beschreibung
mute()	Wechselt zwischen Video stummschalten und Stummschaltung aufheben.
pause()	Pausiert das Video.
play()	Gibt das Video wieder.
replay()	Gibt das Video noch einmal wieder.
seek(time:number)	Springt zur angegebenen Zeit im Video.
setVolume(volume:number)	Stellt die Lautstärke des Videos ein.
setSources(sources:string)	Legt die Quellen des Videos fest.

YouTube

gwd-youtube

Erweitert HTMLElement zur Zusammenfassung von Aufrufen der YouTube API

Eigenschaften

Name	Beschreibung
video-url:string	Die YouTube-URL für das Video.
autoplay:string	In unterstützten Umgebungen wird das YouTube-Video nach dem Laden automatisch wiedergegeben.
preview-duration:number	Legt die Dauer der Vorschau fest; wird nur verwendet, wenn das Attribut „Autoplay“ auf preview gesetzt ist.
controls:string	Zeigt die Videosteuerelemente an (none, autohide).
color:string	Das Farbdesign der Fortschrittsanzeige des Players (rot oder weiß)
muted:boolean	Legt fest, ob das Video stumm gestartet wird.
loop:boolean	Legt fest, ob das Video nach dem Fertigstellen in Schleife wiedergegeben wird
pause-on-end:boolean	Hält das Video an, wenn noch 1 Sekunde verbleibt.
start-position:number	Startet das Video zu einem festgelegten Zeitpunkt in Sekunden
allowfullscreen:boolean	Vollbild auf Desktop zulassen
extra-player-args:string	Zusätzliche YouTube-Player-Parameter, wie unter https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters beschrieben

Ereignisse

Name	Beschreibung
buffering	Der YouTube-Player nutzt die Zwischenspeicherung.
ended	Das YouTube-Video ist am Ende angelangt.
paused	Das YouTube-Video wurde angehalten.
playing	Das YouTube-Video wird wiedergegeben.
replayed	Das YouTube-Video wurde erneut abgespielt.
viewed0percent	Wird ausgelöst, wenn 0 % des Videos angesehen wurden.
viewed25percent	Wird ausgelöst, wenn 25 % des Videos angesehen wurden.
viewed50percent	Wird ausgelöst, wenn 50 % des Videos angesehen wurden.
viewed75percent	Wird ausgelöst, wenn 75 % des Videos angesehen wurden.
viewed100percent	Wird ausgelöst, wenn 100 % des Videos angesehen wurden.
previewed0percent	Wird ausgelöst, wenn 0 % der Vorschau angesehen wurden.
previewed25percent	Wird ausgelöst, wenn 25 % der Vorschau angesehen wurden.
previewed50percent	Wird ausgelöst, wenn 50 % der Vorschau angesehen wurden.
previewed75percent	Wird ausgelöst, wenn 75 % der Vorschau angesehen wurden.
previewed100percent	Wird ausgelöst, wenn 100 % der Vorschau angesehen wurden.

Methoden

Name	Beschreibung
toggleMute()	Wechselt zwischen Video stummschalten und Stummschaltung aufheben.
pause()	Pausiert das Video.
play()	Gibt das Video wieder.
replay()	Gibt das Video noch einmal wieder.
seek(time:number)	Springt zur angegebenen Zeit im Video.
setYouTubeId(id:string, cueOnly:boolean)	Ändert die Quelle des YouTube-Videos in die angegebene ID.