tombola

Tombola

The effect works best with more than 5 options

Description

The Roseworx Tombola Component features an ever scrolling list of specified options that can be configured to stop on its own or be stopped by user interaction. Stopping the tombola will then select a random value from the list and scroll it into view and will resolve a promise with the result. This component is web accessible with keyboard navigation.

Description

The Roseworx Tombola Component features an ever scrolling list of specified options that can be configured to stop on its own or be stopped by user interaction. Stopping the tombola will then select a random value from the list and scroll it into view and will resolve a promise with the result. This component is web accessible with keyboard navigation.

Usage
  • import rwxTombola from 'roseworx/js/components/rwxTombola';
  • Import the SCSS file and optionally customize using the below SCSS variables (make sure to declare them before the import);
    @import "~roseworx/scss/components/rwxTombola";
  • Use the setValues method below.
Customize
SCSS Variable Value Type Description
$rwx-tombola-background-color CSS color Backround color
$rwx-tombola-item-color CSS color Color of the item text
$rwx-tombola-color CSS color Secondary color

This component makes use of the animated border effect so you can also customize those SCSS variables.

Additional Methods

These must only be called on or after the window load event.

setValues

Promise

(

Values Array Of Objects: [{displayName: String, value: String}, {displayName: String, value: String}, ...]

)

Sets the array of values for the Tombola component. displayName is what is shown to the user and value is what is returned in the promise.

						rwxTombola.setValues([{displayName: '{DISPLAYNAME}', value: '{RETURN VALUE}'}, {displayName: '{DISPLAYNAME}', value: '{RETURN VALUE}'}]).then((res)=>{ console.log(res); });
setConfig

void

(

Config Object: {stopText: String, autoStop: Boolean, timeBeforeAutoStop: Number}

)

Sets the configuration for the Tombola component where stopText is the text to appear in the stop button, autoStop is weather or not the Tombola stops after a certain period without clicking the stop button and timeBeforeAutoStop is the number of seconds the user has to press stop before a selection is randomely made (if autoStop is set to true).

						rwxTombola.setConfig({stopText:"Stop", autoStop: true, timeBeforeAutoStop: 10});