Notice Box

Description

The Roseworx Notice Box Component allows you to programmatically set a notice in any of the screen corners. Configuration allows you to specify if this notice auto closes (if so, for how long) or stays open until programmatically closed.

Roseworx components have a scanDOM method which basically rescans the DOM for roseworx components and instantiates them. This is extremely useful for when you are dynamically / conditionally adding components to a page after the page load event or using Javascript frameworks like React or Vue. Simply run rwxNoticeBox.scanDOM().

Usage

import rwxNoticeBox from 'roseworx/js/components/rwxNoticeBox';

Import the SCSS file and optionally customize using the below SCSS variables (make sure to declare them before the import);
```
@import "~roseworx/scss/components/rwxNoticeBox";
```
Use the setValue method below.

Customize

SCSS Variable Value Type Description

$rwx-notice-box-background-color CSS color Backround color

$rwx-notice-box-text-color CSS color Text color

$rwx-notice-box-text-size CSS Length Text size

Additional Methods

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

setValue

void

(

Value: String
Close Box After Delay: Boolean
Callback When Box Closes: Function

)

Sets the value of and displays the Notice Box component. If you call this method whilst the box is already displaying, the text will change to the new value and the delay before closing will start again.

						rwxNoticeBox.setValue('{VALUE}', true, ()=>{console.log("done")});

close

void

Closes the notice box.

						rwxNoticeBox.close();

setConfig

void

(

Config Object: {position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right', delay: Number}

)

Sets the configuration for the Notice Box component where position is one of the 4 possible options and delay is number of seconds before the box closes (if second parameter in setValue is set to true).

						rwxNoticeBox.setConfig({position: "bottom-left", delay:5});