$w.PlayableMixin

$w.PlayableMixin

Provides functionality for elements that can be played.

Contents

isPlaying Indicates if the element is currently playing.
next( ) Moves to the next item.
onPause( ) Adds an event handler that runs when playback is paused.
onPlay( ) Adds an event handler that runs when playback is started or restarted.
pause( ) Pauses playback.
play( ) Begins or resumes playback.
previous( ) Moves to the previous image or slide.
isPlaying

isPlaying

Indicates if the element is currently playing.

Syntax

get isPlaying(): boolean

Description

To set the isPlaying property on an element, use the element's play() and pause() functions.

If you select Autoplays on loading in the element's Settings panel in the Editor, the isPlaying property is set to true when the page loads.

Type

Boolean

Examples

Get an element's current playing status

bGV0IGlzUGxheWluZyA9ICR3KCIjbXlFbGVtZW50IikuaXNQbGF5aW5nOyAvLyBmYWxzZQo=
let isPlaying = $w("#myElement").isPlaying; // false

Toggle an element's current playing state

aWYoICR3KCIjbXlFbGVtZW50IikuaXNQbGF5aW5nICkgewogICR3KCIjbXlFbGVtZW50IikucGF1c2UoKTsKfQplbHNlIHsKICAkdygiI215RWxlbWVudCIpLnBsYXkoKTsKfQo=
if( $w("#myElement").isPlaying ) {
  $w("#myElement").pause();
}
else {
  $w("#myElement").play();
}

See Also

play( ), pause( )

next( )

next( )

Moves to the next item.

function next(): Promise<Element>

Description

The next() function returns a Promise that is resolved when the next item is completely rendered. Calling next() when on the last item, moves to the first item.

Return Value

Returns a Promise

On fulfillment Element The newly displayed image or slide.

Examples

Move to the next item

JHcoIiNteUVsZW1lbnQiKS5uZXh0KCk7Cg==
$w("#myElement").next();

Move to the next item and log a message when done

JHcoIiNteUVsZW1lbnQiKS5uZXh0KCkKICAudGhlbiggKCkgPT4gewogICAgY29uc29sZS5sb2coIkZpbmlzaGVkIG1vdmluZyB0byB0aGUgbmV4dCBpdGVtIik7CiAgfSApOwo=
$w("#myElement").next()
  .then( () => {
    console.log("Finished moving to the next item");
  } );

See Also

previous( ), play( ), pause( )

onPause( )

onPause( )

Adds an event handler that runs when playback is paused.

function onPause(handler: EventHandler): Gallery | Slideshow
callback EventHandler(event: Event, $w: Function): void

Description

An element can be paused by a user clicking the gallery or slideshow's pause button or by calling its pause() function

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is paused.
event Event The event that occurred.
$w $w Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Gallery Slideshow The gallery or slideshow that triggered the event.

Examples

Get the ID of the element that has been paused

JHcoIiNteUVsZW1lbnQiKS5vblBhdXNlKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IHRhcmdldElkID0gZXZlbnQudGFyZ2V0LmlkOyAvLyAibXlFbGVtZW50Igp9KTsK
$w("#myElement").onPause( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

See Also

pause( )

onPlay( )

onPlay( )

Adds an event handler that runs when playback is started or restarted.

function onPlay(handler: EventHandler): Gallery | Slideshow
callback EventHandler(event: Event, $w: Function): void

Description

An element can be played by a user clicking the gallery or slideshow's play button or by calling its play() function.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is played.
event Event The event that occurred.
$w $w Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Gallery Slideshow The gallery or slideshow that triggered the event.

Examples

Get the ID of the element that is playing

JHcoIiNteUVsZW1lbnQiKS5vblBsYXkoIChldmVudCwgJHcpID0+IHsKICBsZXQgdGFyZ2V0SWQgPSBldmVudC50YXJnZXQuaWQ7IC8vICJteUVsZW1lbnQiCn0pOwo=
$w("#myElement").onPlay( (event, $w) => {
  let targetId = event.target.id; // "myElement"
});

See Also

play( )

pause( )

pause( )

Pauses playback.

function pause(): void;

Description

The pause() function pauses a slideshow or playable gallery and fires a pause event.

The pause event handlers set on this element by the onPause( ) function or in the Editor are called.

Examples

Pauses playback

JHcoIiNteUVsZW1lbnQiKS5wYXVzZSgpOwo=
$w("#myElement").pause();

Toggle an element's current playing state

aWYoICR3KCIjbXlFbGVtZW50IikuaXNQbGF5aW5nICkgewogICR3KCIjbXlFbGVtZW50IikucGF1c2UoKTsKfQplbHNlIHsKICAkdygiI215RWxlbWVudCIpLnBsYXkoKTsKfQo=
if( $w("#myElement").isPlaying ) {
  $w("#myElement").pause();
}
else {
  $w("#myElement").play();
}

See Also

play( ), onPause( )

play( )

play( )

Begins or resumes playback.

function play(): void;

Description

The play() function plays a slideshow or playable gallery and fires a play event.

The play event handlers set on this element by the onPlay( ) function or in the Editor are called.

Examples

Begins or resumes playback

JHcoIiNteUVsZW1lbnQiKS5wbGF5KCk7Cg==
$w("#myElement").play();

Toggle an element's current playing state

aWYoICR3KCIjbXlFbGVtZW50IikuaXNQbGF5aW5nICkgewogICR3KCIjbXlFbGVtZW50IikucGF1c2UoKTsKfQplbHNlIHsKICAkdygiI215RWxlbWVudCIpLnBsYXkoKTsKfQo=
if( $w("#myElement").isPlaying ) {
  $w("#myElement").pause();
}
else {
  $w("#myElement").play();
}

See Also

pause( ), onPlay( )

previous( )

previous( )

Moves to the previous image or slide.

function previous(): Promise<Element>

Description

The previous() function returns a Promise that is resolved when the previous image or slide is completely rendered. Calling previous() when on the first item, moves to the last item.

Return Value

Returns a Promise

On fulfillment Element The newly displayed image or slide.

Examples

Move to the previous item

JHcoIiNteUVsZW1lbnQiKS5wcmV2aW91cygpOwo=
$w("#myElement").previous();

Move to the previous item and log a message when done

JHcoIiNteUVsZW1lbnQiKS5wcmV2aW91cygpCiAgLnRoZW4oICgpID0+IHsKICAgIGNvbnNvbGUubG9nKCJGaW5pc2hlZCBtb3ZpbmcgdG8gdGhlIHByZXZpb3VzIGl0ZW0iKTsKICB9ICk7Cg==
$w("#myElement").previous()
  .then( () => {
    console.log("Finished moving to the previous item");
  } );

See Also

next( )