360° Gallery
3D hotspot
3D hotspot container
3D Model
3D Model viewer
Add to Calendar
Audio
Carousel Gallery
Cue point
Date swap
Gallery navigation
Generic ad
Gesture
Google ad
Hotspot
Iframe
Image
Image button
Image effect
Before and after image effect
Breathe image effect
Reveal image effect
Wave image effect
Map
Page
Page deck
Parallax
Particle effects
Particles
Sprite Sheet
Star ratings
Street View
Swipeable Gallery
Swirl
Tap area
Tap to call/text
Transition gallery
Blinds transition
Door wipe transition
Fade transition
Iris wipe transition
Push transition
Radial wipe transition
Rotate transition
Slice transition
Split push transition
Stripe wipe transition
Venetian blinds transition
Wipe transition
Zigzag transition
Video
YouTube
gwd-360gallery
A gallery object that shows an object rotating.
Properties
| Name | Description |
|---|---|
images:string |
A comma-separated string of image paths used in the gallery. |
autoplay:boolean |
The gallery should automatically play through the images in the gallery after the gallery loads. |
wrap:boolean |
The gallery should allow the user to swipe around from the first frame to the last, instead of stopping at the ends. |
Events
| Name | Description |
|---|---|
firstinteraction |
Sent when the user interacts with the gallery for the first time. |
allframesviewed |
Sent when all frames of the gallery are shown at least once. |
allframesloaded |
Sent when all frames of the gallery are loaded. |
frameshown |
Sent when a new frame is shown. |
frameactivated |
Sent when a new frame has started to be activated, even if it's not yet visible. |
frametap |
Sent when the user taps on a frame. |
Methods
| Name | Description |
|---|---|
goToFrame(frame:number, opt_animate:string, opt_direction:string) |
Animate to the frame specified. |
rotateOnce(opt_duration:number, opt_direction:string) |
Rotate the object in the gallery once. |
goForwards() |
Moves gallery forwards by one frame. |
goBackwards() |
Moves gallery backwards by one frame. |
gwd-3d-hotspot
An element for displaying annotations on a 3D Model.
Properties
| Name | Description |
|---|---|
data-position:string |
The hotspot's position. |
data-normal:string |
The hotspot's normal. |
hotspot-name:string |
The hotspot's name. |
hotspot-title:string |
The title text to display in the info card. |
hotspot-description:string |
The description text to display in the info card. |
hide-infocard:boolean |
Whether the info card should be hidden. |
gwd-3d-hotspot-container
A container element for annotations on a 3D Model.
Properties
| Name | Description |
|---|---|
up-image:file |
The URL for the image of the 3D hotspots in the unpressed state. |
over-image:file |
The URL for the image of the 3D hotspots in the mouseover or hover state. |
down-image:file |
The URL for the image of the 3D hotspots in the pressed state. |
gwd-3d-model
A 3D Viewer component.
Properties
| Name | Description |
|---|---|
id-url:download |
The ID or URL of the 3D Model. |
data-gwd-refresh-assets:string |
Attribute used by Google Web Designer to determine if the 3D assets must be refreshed. |
glass:boolean |
Enables the glass material for the 3D Model. |
src:string |
Model to display. |
transparent:boolean |
Enables transparent background on the 3D Model. |
gesture-cue-icon:file |
The gesture cue icon. |
gesture-cue-text:string |
The text displayed below the gesture cue icon. |
gesture-cue-duration:number |
The duration (in seconds) to display the gesture cue. A value of -1 signifies no time limit. |
Events
| Name | Description |
|---|---|
scene-rendered |
Sent after the 3D Model scene is rendered for the first time. |
camera-changed |
Sent when any of the 3D camera properties change. The event.detail object contains all the current properties of the camera. |
hotspot-clicked |
Sent when a hotspot is clicked. The event.detail object contains the name of the hotspot clicked. |
interaction-start |
Sent when the user starts interacting with the 3D Model. |
interaction-end |
Sent when the user stops interacting with the 3D Model. |
Methods
| Name | Description |
|---|---|
setYaw(yaw:number) |
Sets the yaw angle (in degrees), without any animation, taking into account camera limits. |
setTargetYaw(targetYaw:number) |
Sets the target yaw angle (in degrees) based on either camera limits or flooring the rotation between -360 and 360 degrees. |
setTargetPitch(targetPitch:number) |
Sets the target pitch angle (in degrees). |
incrementTargetPitch(pitchDelta:number) |
Increments the target pitch of a delta angle (in degrees). |
setTargetZoom(targetZoom:number) |
Sets the target zoom (in metres). |
incrementTargetZoom(zoomDelta:number) |
Increments the target zoom (in metres). |
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) |
Sets the target pivot (in metres). |
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) |
Sets the target local pan (in metres). |
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) |
Sets the material colour. |
playAnimation(animationName:string) |
Plays the animation. |
pauseAnimation(animationName:string) |
Pauses the animation. |
setAnimationTime(animationName:string, animationTime:number) |
Sets the animation time (in seconds). |
lookAtHotspot(hotspotName:string) |
Moves and rotates the camera to focus on the hotspot. |
gwd-3d-model-viewer
A component that wraps the 3D Model viewer component.
Properties
| Name | Description |
|---|---|
src:file |
The 3D Model's source file. |
gesture-cue-icon:file |
The gesture cue icon. |
gesture-cue-text:string |
The text displayed below the gesture cue icon. |
gesture-cue-duration:number |
The duration (in seconds) to display the gesture cue. A value of -1 signifies no time limit. |
skybox-image:file |
The background image of the 3D Model scene. |
environment-image:file |
Controls the environmental reflection of the 3D Model. |
Events
| Name | Description |
|---|---|
scene-rendered |
Sent after the 3D Model scene is rendered for the first time. |
camera-changed |
Sent when any of the 3D camera properties change. The event.detail object contains all the current properties of the camera. |
hotspot-clicked |
Sent when a hotspot is clicked. The event.detail object contains the name of the hotspot clicked. |
interaction-start |
Sent when the user starts interacting with the 3D Model. |
interaction-end |
Sent when the user stops interacting with the 3D Model. |
Methods
| Name | Description |
|---|---|
setYaw(yaw:number) |
Sets the yaw angle (in degrees), without any animation, taking into account camera limits. |
setTargetYaw(targetYaw:number) |
Sets the target yaw angle (in degrees) based on either camera limits or flooring the rotation between -360 and 360 degrees. |
setTargetPitch(targetPitch:number) |
Sets the target pitch angle (in degrees). |
incrementTargetPitch(pitchDelta:number) |
Increments the target pitch of a delta angle (in degrees). |
setTargetZoom(targetZoom:number) |
Sets the target zoom (in metres). |
incrementTargetZoom(zoomDelta:number) |
Increments the target zoom (in metres). |
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) |
Sets the target pivot (in metres). |
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) |
Sets the target local pan (in metres). |
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) |
Sets the material colour. |
playAnimation(animationName:string) |
Plays the animation. |
pauseAnimation(animationName:string) |
Pauses the animation. |
setAnimationTime(animationName:string, animationTime:number) |
Sets the animation time (in seconds). |
gwd-addtocalendar
Adds an event to calendars.
Properties
| Name | Description |
|---|---|
event-title:string |
The event name as it will be seen in the user's calendar. |
start-date:string |
The date that the event begins. |
start-time:string |
The time that the event starts (in 24-hour time). |
end-date:string |
The date that the event ends. |
end-time:string |
The time that the event ends (in 24-hour time) |
timezone:string |
The time zone for the event. When this is set, the time will be adjusted correctly for the user when the user is in another time zone. |
location:string |
The location of the event. |
description:string |
The description of the event. |
icalendar:boolean |
Whether an iCalendar file should be used or not. |
google:boolean |
Whether a Google Calendar should be used or not. |
windows-live:boolean |
Whether a Windows live Calendar should be used or not. |
yahoo:boolean |
Whether a Yahoo! Calendar should be used or not. |
bg-color:string |
Hexadecimal value for the background colour of the drop-down. |
font-color:string |
Hexadecimal value for the font colour of the drop-down. |
font-family:string |
Name for the font of the drop-down. |
font-size:string |
Size for the font of the drop-down. |
font-weight:string |
Font weight for the font of the drop-down. |
highlight-color:string |
Hexadecimal value for the highlight colour of the drop-down. |
gwd-audio
A component that wraps an HTMLAudioElement.
Properties
| Name | Description |
|---|---|
autoplay:boolean |
Whether the audio should auto-play when loaded. |
loop:boolean |
Whether the audio should loop when completed. |
muted:boolean |
Whether the audio should start muted. |
controls:boolean |
Whether the default native player controls are enabled. |
sources:file |
A comma-separated string of audio sources in different formats. |
Events
| Name | Description |
|---|---|
play |
Sent when playback of the media starts after a prior pause event. |
pause |
Sent when playback is paused. |
playing |
Sent when the media begins to play (for the first time, after having been paused, or after ending and then restarting). |
ended |
Sent when playback completes. |
volumechange |
Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed). |
seeked |
Sent when a seek operation completes. |
waiting |
Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek). |
Methods
| Name | Description |
|---|---|
mute() |
Toggle to mute/unmute the audio. |
pause() |
Pauses the audio. |
play() |
Plays the audio. |
replay() |
Replays the audio. |
seek(time:number) |
Jumps to the specified time in the audio. |
gwd-carouselgallery
A gallery object that shows its frames on a carousel-style layout.
Properties
| Name | Description |
|---|---|
images:string |
A comma-separated string of image paths used in the gallery. |
groups:string |
A comma-separated string of group IDs. |
transition-duration:number |
Gallery animation speed in milliseconds. |
start-frame:number |
The number of the image that you want to display initially. |
autoplay:boolean |
Whether to auto-play the frames once or not. |
has-navigation:boolean |
Whether to automatically include gallery navigation controls. |
navigation-thumbnails:boolean |
Whether thumbnails should be used for navigation instead of dots. |
navigation-highlight:color |
A CSS colour code used to highlight the active frame in navigation. |
scaling:string |
How image content will be scaled to fit its frame. |
frame-width:number |
The width of one content panel. |
frame-height:number |
The height of one content panel. |
neighbor-rotation-y:number |
A Y-axis rotation applied to neighbours of the currently centred panel. This is used to tilt the neighbouring panels. |
neighbor-translation-x:number |
An X-axis translation applied to neighbours of the currently centred panel. Used to adjust placement of neighbouring panels. |
neighbor-translation-y:number |
A Y-axis translation applied to neighbours of the currently centred panel. |
neighbor-translation-z:number |
A Z-axis translation applied to neighbours of the currently centred panel. |
exit-urls:string |
A comma-separated string of exit URLs, corresponding to the images in the gallery. |
show-reflection:boolean |
Whether to show a CSS3-based reflection. |
pause-front-media:boolean |
When the current frame changes, whether to pause media elements (e.g. video or audio) on the previous frame |
resume-next-media:boolean |
When the current frame changes, whether to resume media elements (e.g. video or audio) on the new current frame. |
Events
| Name | Description |
|---|---|
firstinteraction |
Sent when the user interacts with the gallery for the first time. |
allframesviewed |
Sent when all frames of the gallery have been shown at least once. |
allframesloaded |
Sent when all frames of the gallery are loaded. |
autoplayended |
Sent when auto-play has ended for any reason. event.detail.completed will be true if it ended naturally by reaching the intended duration elapsing, or else it will be false. |
frameshown |
Sent when a new frame is shown. |
frameactivated |
Sent when a new frame has started to be activated, even if it's not yet visible. |
frameautoplayed |
Sent when a frame is activated for auto-play. This may trigger more often than frameshown, because it will be fired separately for each of the multiple frames that are visible at once. |
frametap |
Sent when the user taps on a frame. |
reachleftend |
Sent when the gallery reaches its left end. |
reachrightend |
Sent when the gallery reaches its right end. |
trackstart |
Sent when the mouse or touch drag begins |
track |
The component registers the X and Y location data associated with the mouse or touch drag |
trackend |
Sent when the mouse or touch drag ends |
Methods
| Name | Description |
|---|---|
goToFrame(index:number, opt_animate:string) |
Go to the frame specified. |
goForwards(opt_animate:string) |
Go to the next frame if available. |
goBackwards(opt_animate:string) |
Go to the previous frame. |
rotateOnce(opt_duration:number, opt_direction:string) |
Show every frame in the gallery once. |
stopRotation() |
Halts current automatic rotation. |
gwd-cuepoint
A component that is attached to a Google Web Designer video component and fires an event when the video reaches a specific time.
Properties
| Name | Description |
|---|---|
time:number |
The time at which the event is triggered, in seconds. |
Events
| Name | Description |
|---|---|
cuepoint |
Sent when playback of the media has reached a time defined in a cue point. |
Methods
| Name | Description |
|---|---|
seek() |
Sets the video time to a cue point’s time. |
setTime(time:number) |
Sets the cue point’s time. |
gwd-dateswap
Date swap will change the visibility of the element based on how the current date compares to the target date range.
Properties
| Name | Description |
|---|---|
from_date:string |
A string representing an RFC2822 or ISO 8601 date. |
to_date:string |
A string representing an RFC2822 or ISO 8601 date. |
Events
| Name | Description |
|---|---|
before |
Sent when the current date is before the from_date (exclusive). |
during |
Sent when the current date is between the from_date and the to_date (inclusive). |
after |
Sent when the current date is after the to_date (exclusive). |
Methods
| Name | Description |
|---|---|
checkDate() |
Compares the current date with the date range. |
gwd-gallerynavigation
A navigation control for a Google Web Designer gallery component.
Properties
| Name | Description |
|---|---|
for:string |
A comma-separated string of image paths used in the gallery. |
highlight:color |
A CSS colour code used to highlight the active frame in navigation. |
use-thumbnails:boolean |
Whether thumbnails should be used for navigation instead of dots. |
gwd-genericad
Implements the generic ad container.
Events
| Name | Description |
|---|---|
adinitialized |
Sent just before the generic element renders the ad's content. |
Methods
| Name | Description |
|---|---|
initAd() |
Starts the ad upon receiving the appropriate events from the enabler. |
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Navigates to the expanded dimensions of the ad. If a page ID is not specified, the ad navigates to the default page. |
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string) |
Exits the ad and optionally collapses the ad. |
gwd-gesture
Abstraction for a number of gesture events.
Properties
| Name | Description |
|---|---|
touch-action:string |
How the touch action should be interpreted. Valid values are: auto, none, pan-x and pan-y. Default behaviour is the same as it is set to none. |
Events
| Name | Description |
|---|---|
hover |
Sent when the mouse or touch location enters the component boundary |
hoverend |
Sent when the mouse or touch location leaves the component boundary. |
trackstart |
Sent when the mouse or touch drag begins |
track |
The component registers the X and Y location data associated with the mouse or touch drag |
trackend |
Sent when the mouse or touch drag ends |
tap |
Sent when a user tap or mouse click is registered. |
swipeleft |
Sent when the user swipes left. |
swiperight |
Sent when the user swipes right. |
swipeup |
Sent when the user swipes up. |
swipedown |
Sent when the user swipes down. |
gwd-google-ad
Implements the Google ad container.
Properties
| Name | Description |
|---|---|
polite-load:boolean |
Whether this ad must respect the polite loading semantics. |
fullscreen:boolean |
Whether this ad should attempt to expand full screen or not. |
Events
| Name | Description |
|---|---|
adinitialized |
Sent just before the element renders the ad's content. |
expandstart |
Sent when the enabler fires expand start event. |
expandfinish |
Sent when the enabler fires expand finish event. |
collapsestart |
Sent when the enabler fires collapse start event. |
collapsefinish |
Sent when the enabler fires collapse finish event. |
fullscreensupport |
Sent if fullscreen expansion is supported. |
dynamicelementsready |
Sent after dynamic data has been applied to the ad's content. |
hostpagescroll |
Sent when the enabler fires host page scroll event. |
Methods
| Name | Description |
|---|---|
initAd() |
Starts the ad upon receiving the appropriate events from the enabler. |
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Navigates to the expanded dimensions of the ad. If a page ID is not specified, the ad navigates to the default page. |
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) |
Exits the ad and optionally collapses the ad. |
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) |
Exits the ad to the specified URL regardless of the value defined in Studio. Collapses the ad if opt_collapseOnExit is true. |
incrementCounter(metric:string, opt_isCumulative:boolean) |
Tracks a counter event. |
startTimer(timerId:string) |
Starts an event timer. |
stopTimer(timerId:string) |
Stops an event timer. |
reportManualClose() |
Records a manual closing of a floating, pop-up, expanding, In-Page with pop-up or In-Page with floating ad. This method is a proxy for Enabler.reportManualClose. |
gwd-hotspot
A component that shows and hides a hotspot at specific times of a video.
Properties
| Name | Description |
|---|---|
show-time:number |
The time at which the hotspot starts being visible, in seconds. |
hide-time:number |
The time at which the hotspot stops being visible, in seconds. |
left:string |
The left position of the hotspot above the video relative to the video frame width (e.g. '5%'). |
top:string |
The top position of the hotspot above the video relative to the video frame height (e.g. '5%'). |
width:string |
The width of the hotspot proportionally to the video relative to the video frame width. |
height:string |
The height of the hotspot proportionally to the video relative to the video frame height. |
Events
| Name | Description |
|---|---|
hotspotshown |
Sent when the hotspot becomes visible. |
hotspothidden |
Sent when the hotspot becomes hidden. |
Methods
| Name | Description |
|---|---|
show(showHide:boolean) |
Toggle hotspot visibility. |
seek(showHide:boolean) |
Set a video time to the show or hide time of the hotspot. |
setTimes(showTime:number, hideTime:number) |
Sets the hotspot's show and hide times. |
gwd-iframe
A component that wraps an HTMLIframeElement.
Properties
| Name | Description |
|---|---|
source:string |
The source of the iframe. This replaces the src attribute on the native image element. |
scrolling:string |
Whether the iframe should display scrollbars. |
Events
| Name | Description |
|---|---|
iframeload |
Sent when the iframe is loaded. |
Methods
| Name | Description |
|---|---|
setUrl(url:string) |
Changes the URL of the iframe and loads it right away. |
gwd-image
A component that wraps an HTMLImageElement to support deferred loading of the image source.
Properties
| Name | Description |
|---|---|
source:file |
The source of the image. This replaces the src attribute on the native image element. |
alt:string |
The alternative text for the image. |
scaling:string |
Defines how the image will be scaled to fit its frame. |
alignment:string |
How the image should align within the viewing area. |
focalpoint:string |
Encodes an image focal point as x/y pixel coordinates. |
disablefocalpoint:boolean |
Disables the focal point set by the focalpoint attribute (used internally by Google Web Designer). |
gwd-imagebutton
An image button with support for up/over/down states.
Properties
| Name | Description |
|---|---|
up-image:file |
The URL for the image of the button in the unpressed state. |
over-image:file |
The URL for the image of the button in the mouseover or hover state. |
down-image:file |
The URL for the image of the button in the pressed state. |
bgcolor:string |
The background colour of the button. |
alignment:string |
How the image should align within the viewing area. |
scaling:string |
How the image should fit in the parent container. |
disabled:boolean |
Whether the button should be disabled. |
Events
| Name | Description |
|---|---|
imagebuttonloaded |
Sent when all the images have loaded. |
Methods
| Name | Description |
|---|---|
toggleEnable() |
Toggles between enabled/disabled. |
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string) |
Sets the image sources for all button states. |
gwd-image-effect
An image effect component.
Properties
| Name | Description |
|---|---|
scaling:string |
Defines how the image will be scaled to fit its frame. |
time-limit:number |
Animation time limit. A value of -1 signifies no time limit. |
settings:string |
Launches the component settings dialogue. |
images:string |
A comma-separated string of image paths used in the image effect. |
Events
| Name | Description |
|---|---|
autoplayended |
Sent when auto-play is ended when the time limit is reached. |
Methods
| Name | Description |
|---|---|
play() |
Play the animation. |
pause() |
Pause the animation. |
gwd-before-and-after
An image effect where two similar images are composited into a 'before and after' comparison.
gwd-breathe
An image effect which animates an image being expanded and contracted elastically.
gwd-reveal
An image effect where one image is scanned by an elliptical focus area revealing a second image.
gwd-wave
An image effect which applies an animated wave transform to an image, causing the image to wiggle following a wave pattern.
gwd-map
Extends HTMLElement to wrap Google Maps API calls.
Properties
| Name | Description |
|---|---|
api-key:string |
Google API key. See: https://developers.google.com/maps/documentation/javascript/get-api-key |
query:string |
Search query name for returning locations from the Google Places API. |
start-latitude:decimal |
Starting centre latitude coordinate. Value should be between -90 and 90 (degrees). |
start-longitude:decimal |
Starting centre longitude coordinate. Value should be between -180 and 180 (degrees). |
request-user-location:boolean |
Whether the user location must be requested. If set to true, the user will be prompted to share the location. |
client-id:string |
The Google Maps premier client ID |
search-radius:number |
Minimum radius in which to conduct a location search, in metres. |
result-limit:number |
The maximum number of results to return in a single query. |
start-zoom:number |
Starting zoom level, in units used by the Google Maps API. Default is 16, which is at the neighbourhood level. |
marker-src:string |
Placemarker image filename, as a sprite containing the off, on and shadow components. |
gps-src:string |
GPS location blue dot image filename. |
msg-start-position-prompt:string |
Localisation string for the dialogue prompt text to select a start position. |
msg-gps-button-label:string |
Localisation string for the label of the button which retrieves a the users location from the geolocation API |
msg-manual-position-button-label:string |
Localisation string for the label of the button which brings up a location search field. |
msg-manual-position-prompt:string |
Localisation string for the dialogue prompt text to search for a starting map position. |
msg-manual-position-placeholder:string |
Localisation string for the placeholder text of the search box for finding a starting map position. |
msg-geocode-failure:string |
Localisation string for the dialogue prompt text shown when an attempt to use the geolocation API fails. |
msg-no-results-found:string |
Localisation string for the dialogue prompt text shown when no map results were found in the chosen location. |
Events
| Name | Description |
|---|---|
pinclick |
When the user selects a pin on the map. |
Methods
| Name | Description |
|---|---|
setCenter(latitude:number, longitude:number, opt_accuracy:number) |
Sets the centre of the map to the location specified by latitude/longitude. |
gwd-page
A page represents a single card in the page deck.
Properties
| Name | Description |
|---|---|
expanded:boolean |
Whether this page should be considered as an expanded page (ad specific). |
centered:boolean |
Whether the contents of this page should be centred. |
alt-orientation-page:string |
The page ID of the page that better represents this content in the alternate orientation. |
Events
| Name | Description |
|---|---|
attached |
Sent just after the page is attached to the DOM |
detached |
Sent just after the page is removed from the DOM |
pageactivated |
Sent when the page is ready to be displayed. |
pagedeactivated |
Sent when the page is no longer being displayed. |
pageload |
Sent after page's contents have loaded successfully. |
pagepresenting |
Sent just before the page begins its intro animation. |
shake |
Sent when a device shake gesture is detected. |
tilt |
Sent when a device tilt is detected. |
rotatetoportrait |
Sent when a device is rotated to portrait orientation. |
rotatetolandscape |
Sent when a device is rotated to landscape orientation. |
gwd-pagedeck
A PageDeck is a container of pages. It shows one page at a time and different pages may be cycled to the front in any given order and using any of the supported page transitions.
Properties
| Name | Description |
|---|---|
default-page:string |
ID of the default page. |
Events
| Name | Description |
|---|---|
pagetransitionstart |
Sent before a page transition occurs. |
pagetransitionend |
Sent after a page transition completes. |
Methods
| Name | Description |
|---|---|
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Navigates to the next page in the page deck. |
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Navigates to the previous page in the page deck. |
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
Navigates to the specified page in the page deck. |
getCurrentPage() |
Returns the current page, or null if a page is not shown. |
getDefaultPage() |
Returns the default page if specified, otherwise returns the first page. |
getPage(pageId:string) |
Returns the page with the specified ID |
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean) |
Returns the page element with the value of the attribute equal to the specified value or -1 if a page was not found. |
getOrientationSpecificPage(orientation:string, pageId:string) |
Returns the page corresponding to the specified orientation. |
getElementById(id:string) |
Finds the element with the specified ID across all pages in this page deck. Since gwd-pagedeck only keeps the active page in the DOM, the standard document.getElementById(id) will not return the elements in the inactive pages. It is a common use case, especially in dynamic ads, to refer to elements in inactive pages. In such cases, this method can be used to dereference an element by its ID. |
gwd-parallax
A parallax component.
Properties
| Name | Description |
|---|---|
settings:string |
Launches the component settings dialogue. |
yscroll:decimal |
The scroll factor to use for the parallax animation when rendering on stage. |
Events
| Name | Description |
|---|---|
ready |
Sent when all the assets in the parallax component are loaded. |
gwd-particleeffects
A component for compositing multiple particle effects and images.
Properties
| Name | Description |
|---|---|
autoplay:boolean |
Whether to automatically play the animation when the component is loaded. |
time-limit:number |
Animation time limit. A value of -1 signifies no time limit. |
settings:string |
Launches the component settings dialogue. |
Events
| Name | Description |
|---|---|
timelimitreached |
Sent when the animation playback has reached the given time limit. |
Methods
| Name | Description |
|---|---|
play() |
Play the animation. |
pause() |
Pause the animation. |
stop() |
Stop the animation. |
gwd-particles
Particle system component.
Properties
| Name | Description |
|---|---|
acceleration-x:number |
The x component of the acceleration in px/frame/frame. |
acceleration-y:number |
The y component of the acceleration in px/frame/frame. |
angle-max:number |
The maximum angle of the velocity direction of the particles. |
angle-min:number |
The minimum angle of the velocity direction of the particles. |
autoplay:boolean |
Whether to automatically play the animation when the parent gwd-particle effects starts playing. |
color1:color |
The first colour. |
color2:color |
The second colour. |
color-rate:number |
The rate at which the colour changes from colour 1 to colour 2 per frame by addition, in the range of [0, 1]. |
emit-interval:number |
The number of frames until the next particle is emitted. |
emit-x-max:string |
The maximum x coordinate of the particle emission range. |
emit-x-min:string |
The minimum x coordinate of the particle emission range. |
emit-y-max:string |
The maximum y coordinate of the particle emission range. |
emit-y-min:string |
The minimum y coordinate of the particle emission range. |
loop:boolean |
Whether to loop the animation. |
number:number |
The number of particles. |
opacity-min:number |
The minimum opacity of the particles. |
opacity-max:number |
The maximum opacity of the particles. |
opacity-rate:number |
The rate at which the opacity changes per frame, which is added to a particle's current opacity. |
random-colors:boolean |
Whether the particles have random colours between colour 1 and colour 2. If false, all particles are initialised with colour 1. |
shape:string |
The shape of the sprite. |
size-max:number |
The maximum size of the particles in px. |
size-min:number |
The minimum size of the particles in px. |
size-rate:number |
The rate at which the size changes per frame, which is added to a particle's current size. |
skip-forward:number |
Skipping to a time when a given percentage of particles have been emitted into a particle system. |
speed-max:number |
The maximum speed of the particles in px/frame. |
speed-min:number |
The minimum speed of the particles in px/frame. |
sprite-image-src:file |
The source of the images that are used as sprites. |
turbulence-frequency:number |
The frequency of the turbulence. Higher values cause more frequent irregularities in the motion. It should be a positive number. |
turbulence-rate:number |
The rate at which the strength changes over time. |
turbulence-strength:number |
The strength of the turbulence exerting on the particles. It should be a positive number. |
turbulence-trail:number |
How many previous and current states of a particle to render. |
Methods
| Name | Description |
|---|---|
play() |
Play the animation. |
pause() |
Pause the animation. |
stop() |
Stop the animation. |
gwd-spritesheet
Show single keyframe or animation from Sprite Sheet.
Properties
| Name | Description |
|---|---|
imagesource:file |
The URL for the Sprite Sheet image. |
offsetx:number |
The offset, in pixels, from the left side of the sprite sheet to either:
|
offsety:number |
The offset, in pixels, from the top of the sprite sheet to either:
|
clipwidth:number |
The width, in pixels, of either:
|
clipheight:number |
The height, in pixels, of either:
|
alignment:string |
Determines the position of the image within its container. |
scaling:string |
Determines how various sized images are displayed within the component. |
totalframecount:number |
The number of frames that make up the animation. |
duration:number |
The duration of each frame, in milliseconds. |
loopcount:number |
The number of times that the animation repeats. Set to 0 for infinite repeat. |
autoplay:boolean |
Whether the animation plays automatically. |
endonstartframe:boolean |
Whether the animation ends on the initial frame. |
reverseplay:boolean |
Whether the animation plays in reverse. |
Events
| Name | Description |
|---|---|
animationend |
Sent when the animation ends. |
animationpause |
Sent when the animation is paused. |
animationplay |
Sent when the animation starts to play. |
animationrestart |
Sent when the animation is restarted after a pause. |
Methods
| Name | Description |
|---|---|
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean) |
Defines a new animation. |
play() |
Plays the animation. |
pause() |
Pauses the animation. |
togglePlay() |
Switch animation between play and pause. |
restart() |
Restarts the animation. |
previousFrame() |
Shows the previous frame. |
nextFrame() |
Shows the next frame. |
goToFrame(id:number) |
Shows a specific frame by frame number. |
gwd-starratings
A component for rendering a line of stars representing a rating.
Properties
| Name | Description |
|---|---|
ratingvalue:decimal |
Rating value. |
iconsize:number |
Star icon size. |
isemptyshown:boolean |
Whether the empty star icons are shown. |
isemptycolored:boolean |
Whether the empty star icons are coloured. |
colorprimary:color |
Primary fill colour. |
colorsecondary:color |
Secondary gradient colour. |
gradienttype:string |
Gradient type. |
ratingmax:number |
Maximum star ratings. |
ratingmin:decimal |
Minimum star ratings. |
Events
| Name | Description |
|---|---|
complete |
When the star ratings icons have been created. |
validationerror |
Star ratings rating value is less than the minimum rating. |
gwd-streetview
A Google Street View component.
Properties
| Name | Description |
|---|---|
key:string |
For information about obtaining a unique key for your application, see: https://developers.google.com/maps/documentation/javascript/get-api-key. |
latitude:decimal |
The location's latitude value. |
longitude:decimal |
The location's longitude value. |
interaction:boolean |
Whether the view can be panned/rotated. |
heading:decimal |
Indicates the compass heading of the camera. Accepted values are from 0 to 360 (both values indicating North, with 90 indicating East and 180 South). If no heading is specified, a value will be calculated that directs the camera towards the specified location, from the point at which the closest photograph was taken. |
pitch:decimal |
Specifies the upward or downward angle of the camera relative to the Street View vehicle. This is often, but not always, flat horizontal. Positive values angle the camera up (with 90 degrees indicating straight up); negative values angle the camera down (with -90 indicating straight down). |
zoom:number |
Specifies the zoom of the camera relative to the Street View vehicle. |
gwd-swipegallery
A gallery object that shows its frames in a swipeable content strip.
Properties
| Name | Description |
|---|---|
images:string |
A comma-separated string of image paths used in the gallery. |
groups:string |
A comma-separated string of group IDs. |
transition-duration:number |
The gallery animation speed in milliseconds. |
start-frame:number |
One-based frame to start at. |
num-frames-to-display:number |
The number of frames to display at once. |
frame-snap-interval:number |
The number of frames to advance by after each swipe. |
autoplay:boolean |
Whether to automatically rotate the gallery once. |
has-navigation:boolean |
Whether to include gallery navigation controls. |
navigation-thumbnails:boolean |
Whether thumbnails should be used for navigation instead of dots. |
navigation-highlight:color |
A CSS colour code used to highlight the active frame in navigation. |
scaling:string |
How image content will be scaled to fit its frame. |
swipe-axis:string |
The axis in which swipe is detected. |
offset:number |
The amount of empty space between adjacent content frame. |
frame-width:number |
The width of one content frame. Overrides num-frames-to-display. |
frame-height:number |
The height of one content frame. |
autoplay-duration:number |
The total duration for which to auto-play the frames. |
autoplay-step-interval:number |
The interval between each frame step during auto-play. |
exit-urls:string |
A comma-separated string of exit URLs, corresponding to the images in the gallery. |
disable-gesture:boolean |
Hides/disables the gesture component which enables touch navigation of the gallery. |
pause-front-media:boolean |
When the current frame changes, whether to pause media elements (e.g. video or audio) on the previous frame |
resume-next-media:boolean |
When the current frame changes, whether to resume media elements (e.g. video or audio) on the new current frame. |
Events
| Name | Description |
|---|---|
firstinteraction |
Sent when the user interacts with the gallery for the first time. |
allframesviewed |
Sent when all frames of the gallery were shown at least once. |
allframesloaded |
Sent when all frames of the gallery are loaded. |
autoplayended |
Sent when auto-play has ended for any reason. event.detail.completed will be true if it ended naturally by reaching the intended duration elapsing, or else it will be false. |
frameshown |
Sent when a new frame is shown, after any necessary animations have completed. |
frameactivated |
Sent when a new frame has started to be activated, even if it's not yet visible. |
frameautoplayed |
Sent when a frame is activated for auto-play. This may trigger more often than frameshown, because it will be fired separately for each of the multiple frames that are visible at once. |
frametap |
Sent when the user taps on a frame. |
reachleftend |
Sent when the gallery reaches its left end. |
reachrightend |
Sent when the gallery reaches its right end. |
framemouseover |
Sent when the user moves the mouse over a frame. |
framemouseout |
Sent when the user moves the mouse out of a frame. |
trackstart |
Sent when the mouse or touch drag begins |
track |
The component registers the X and Y location data associated with the mouse or touch drag |
trackend |
Sent when the mouse or touch drag ends |
Methods
| Name | Description |
|---|---|
goToFrame(frame:number, opt_animate:string) |
Goes to the frame specified. |
rotateOnce(opt_duration:number, opt_direction:string) |
Shows every frame in the gallery once. |
stopRotation() |
Halts current automatic rotation. |
goForwards() |
Moves gallery forwards by one frame. |
goBackwards() |
Moves gallery backwards by one frame. |
gwd-swirl
A swirl component.
Properties
| Name | Description |
|---|---|
yscroll:decimal |
The scroll factor to use for the swirl animation when rendering on stage. |
settings:string |
Launches the component settings dialogue. |
Events
| Name | Description |
|---|---|
ready |
Sent when all child assets are loaded. |
gwd-taparea
Abstraction for click/tap event.
Properties
| Name | Description |
|---|---|
exit-override-url:string |
The URL to exit to when the Tap Area is tapped. |
Events
| Name | Description |
|---|---|
action |
Sent when the user touches (mobile) or clicks (desktop) the button. |
gwd-taptocall
A component that, when clicked or touched, will call or send an SMS to the configured telephone number.
Properties
| Name | Description |
|---|---|
number:string |
Telephone number to call or message. |
action:string |
Choose to send an SMS message or initiate a phone call. |
Events
| Name | Description |
|---|---|
action |
Sent when the user touches (mobile) or clicks (desktop) the button. |
taptocall |
Sent when a call or SMS is being initiated. |
Methods
| Name | Description |
|---|---|
dial() |
Initiates the call or sends an SMS message to the configured number. |
gwd-transitiongallery
A transition gallery component.
Properties
| Name | Description |
|---|---|
settings:string |
Launches the component settings dialogue. |
images:string |
A comma-separated string of image paths used in the gallery. |
scaling:string |
Defines how the image will be scaled to fit its frame. |
exit-urls:string |
A comma-separated string of exit URLs, corresponding to the images in the gallery. |
Events
| Name | Description |
|---|---|
autoplayended |
Sent when auto-play has ended for any reason. event.detail.completed will be true if it ended naturally by reaching the intended loop count, else it will be false. |
frameactivated |
Sent when a new frame has started to be activated, even if it's not yet visible. |
frameshown |
Sent when a new frame is shown. |
frametap |
Sent when the user taps on a frame. |
rotateonceended |
Sent when rotation has ended for any reason. event.detail.completed will be true if it ended naturally, else it will be false. |
reachleftend |
Sent when the gallery reaches its left end. |
reachrightend |
Sent when the gallery reaches its right end. |
Methods
| Name | Description |
|---|---|
goToFrame(frame:number, with_animation:boolean) |
Goes to the frame specified. |
rotateOnce(startFromCurrentFrame:boolean) |
Shows the frame in the gallery from the start frame if startFromCurrentFrame is false or unspecified, and otherwise from the current frame. The rotation stops before it reaches the start frame. |
startAutoplay(startFromCurrentFrame:boolean) |
Starts auto-playing in the gallery from the start frame if startFromCurrentFrame is false or unspecified, and otherwise from the current frame. The auto-play stops when it hits the loop count. |
stop() |
Cancels the animation if it's in progress. |
goForwards() |
Moves gallery forwards by one frame. |
goBackwards() |
Moves gallery backwards by one frame. |
gwd-blinds
A blinds effect component, which reveals the new image as though from behind window blinds with slats that open one after another, starting from one edge and progressing to the opposite edge.
Properties
| Name | Description |
|---|---|
direction:dropdown |
The direction of the effect. |
blinds:number |
The number of blinds. |
transparentbackground:boolean |
Whether to reveal the transparent background before rendering the new image's blinds. If it is false, the blinds overlay on the old image. |
gwd-door-wipe
A door wipe effect component is a variation of the wipe effect, with two types based on the direction of the wipe. An opening door wipe reveals the new image starting from the centre of the old image, as if a double door is opening. A closing door wipe reveals the new image starting from opposite edges of the old image to the centre, as if a double door is closing.
Properties
| Name | Description |
|---|---|
orientation:dropdown |
The orientation of the animation. |
direction:dropdown |
The direction of the door wipe effect. |
gwd-fade
A transition fade component.
gwd-iris-wipe
An iris wipe effect component, which reveals the new image with a growing circle which originates from the centre of the frame by default.
Properties
| Name | Description |
|---|---|
originpercentx:number |
The origin of the growing circle in the x axis relative to the frame's width. |
originpercenty:number |
The origin of the growing circle in the y axis relative to the frame's height. |
gwd-push
A push transition effect component, where the new image slides into view while pushing the old image out of view.
Properties
| Name | Description |
|---|---|
direction:dropdown |
The direction of the push effect. |
gwd-radial-wipe
A radial wipe effect component is a variation of the wipe effect, where the new image is revealed by sweeping a radius around a specified point, like a clock hand.
Properties
| Name | Description |
|---|---|
direction:dropdown |
The direction of the effect. |
originpercentx:number |
The origin in the x axis relative to the frame's width that starts sweeping a radius to reveal the new image. |
originpercenty:number |
The origin in the y axis relative to the frame's height that starts sweeping a radius to reveal the new image. |
gwd-rotate
A rotate effect component, which spins the old image while zooming in, then zooms back out on the new image while completing the spin rotation.
Properties
| Name | Description |
|---|---|
direction:dropdown |
The direction of the effect. |
gwd-slice
A slice effect component, which reveals the new image in slices or bars which slide into view one after another.
Properties
| Name | Description |
|---|---|
direction:dropdown |
The direction of the slice effect. |
slices:number |
The number of slices or bars that split the view. |
transparentbackground:boolean |
Whether to reveal the transparent background before the new image slices slide in. If it is false, the slices overlay on the old image. |
gwd-split-push
A split push effect component is a variation of the push effect, where the old image is split into two parts vertically or horizontally. Corresponding split parts of the new image push each part of the old image out of view in opposite directions.
Properties
| Name | Description |
|---|---|
orientation:dropdown |
The orientation of the animation. |
gwd-stripe-wipe
A stripe wipe effect component is a variation of the wipe effect in which solid coloured stripes of alternating colours simultaneously grow on the screen to cover the old image. The stripes then shrink to reveal the new image.
Properties
| Name | Description |
|---|---|
direction:dropdown |
The direction of the effect. |
stripes:number |
The number of stripes of each colour. |
color1:color |
Hexadecimal value for one of the two alternating stripe colours. |
color2:color |
Hexadecimal value for the other alternating stripe colour. |
gwd-venetian-blinds
A venetian blinds effect component, which reveals the new image as though from behind venetian blinds with slats that open simultaneously or one after another.
Properties
| Name | Description |
|---|---|
orientation:dropdown |
The orientation of the animation. |
blinds:number |
The number of blinds. |
staggered:boolean |
Whether the slats transition with a delay. If it is false, all the slats transition simultaneously. |
gwd-wipe
A transition wipe component. In the regular wipe effect, the new image gradually replaces the old image behind a line that wipes from one edge to the opposite edge.
Properties
| Name | Description |
|---|---|
direction:dropdown |
The direction of the effect. |
angle:number |
The angle that slants the line which replaces the old image with the new image. |
gwd-zigzag
A zigzag effect component, which reveals the new image in a snaking grid pattern. A horizontal zigzag effect reveals tiles of the new image in successive rows alternating between left-to-right and right-to-left. A vertical zigzag effect reveals tiles of the new image in successive columns alternating between top-to-bottom and bottom-to-top.
Properties
| Name | Description |
|---|---|
orientation:dropdown |
The orientation of the animation. |
rows:number |
The number of rows of the zigzag effect. |
columns:number |
The number of columns of the zigzag effect. |
gwd-video
A component that wraps an HTMLVideoElement.
Properties
| Name | Description |
|---|---|
autoplay:boolean |
Whether the video should auto-play when loaded. |
loop:boolean |
Whether the video should loop when completed. |
muted:boolean |
Whether the video should start muted. |
controls:boolean |
Whether the default native player controls are enabled. |
sources:file |
A comma-separated string of videos in different formats. |
poster:string |
A URL indicating a poster frame to show until the user plays or seeks. |
Events
| Name | Description |
|---|---|
play |
Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior pause event. |
pause |
Sent when playback is paused. |
playing |
Sent when the media begins to play (either for the first time, after having been paused or after ending and then restarting). |
ended |
Sent when playback completes. |
volumechange |
Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed). |
seeked |
Sent when a seek operation completes. |
waiting |
Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek). |
Methods
| Name | Description |
|---|---|
mute() |
Toggle to mute/unmute the video. |
pause() |
Pauses the video. |
play() |
Plays the video. |
replay() |
Replays the video. |
seek(time:number) |
Jumps to the specified time in the video. |
setVolume(volume:number) |
Set the volume of the video. |
setSources(sources:string) |
Set the sources for the video. |
gwd-youtube
Extends HTMLElement to wrap YouTube API calls.
Properties
| Name | Description |
|---|---|
video-url:string |
The YouTube URL for the video. |
autoplay:string |
For supported environments, the YouTube video will auto-play upon loading. |
preview-duration:number |
Set the duration of the preview. Used only when auto-play attribute is set to preview |
controls:string |
Displays the video controls (none, autohide). |
color:string |
The colour theme of the player progress bar (red or white). |
muted:boolean |
Whether the video should start muted. |
loop:boolean |
Whether the video should loop when completed. |
pause-on-end:boolean |
Pauses the video when there is one second left. |
start-position:number |
Start the video at a given time (seconds). |
allowfullscreen:boolean |
Allow fullscreen on desktop. |
extra-player-args:string |
Additional YouTube player parameters as described in https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters |
Events
| Name | Description |
|---|---|
buffering |
The YouTube player is buffering. |
ended |
The YouTube video has reached the end. |
paused |
The YouTube video is paused. |
playing |
The YouTube video starts playing. |
replayed |
The YouTube video has been replayed. |
viewed0percent |
Sent when 0% of the video has been viewed. |
viewed25percent |
Sent when 25% of the video has been viewed. |
viewed50percent |
Sent when 50% of the video has been viewed. |
viewed75percent |
Sent when 75% of the video has been viewed. |
viewed100percent |
Sent when 100% of the video has been viewed. |
previewed0percent |
Sent when 0% of the preview has been viewed. |
previewed25percent |
Sent when 25% of the preview has been viewed. |
previewed50percent |
Sent when 50% of the preview has been viewed. |
previewed75percent |
Sent when 75% of the preview has been viewed. |
previewed100percent |
Sent when 100% of the preview has been viewed. |
Methods
| Name | Description |
|---|---|
toggleMute() |
Toggle to mute/unmute the video. |
pause() |
Pauses the video. |
play() |
Plays the video. |
replay() |
Replays the video. |
seek(time:number) |
Jumps to the specified time in the video. |
setYouTubeId(id:string, cueOnly:boolean) |
Changes the source of the YouTube video to the specified ID. |