undefined

API Docs for: 5.4.0
Show:

ColorPickerBrick Class

Module: Bricks
Parent Module: Utils

The ColorPickerBrick prototype. Provides a control to select a color. To instantiate, call new on the ColorPickerBrick prototype.

Imports RAMP Modules:

Util
TmplHelper
Array
Dictionary

Uses RAMP Templates:

templates/bricks_template.json

Methods

clear

() SimpleInputBrick chainable

Inherited from Brick but overwritten in src/js/RAMP/Utils/bricks.js:1935

Clears the Brick by setting inputValue to "" and userEntered to false.

Returns:

disable

(
  • disable
  • force
)
Brick chainable

Disables or re-enables the Brick.

Parameters:

  • disable Boolean

    true to disable; false to enable

  • force Boolean

    if true, disables the brick even if it's frozen

Returns:

Brick:

itself

displayNotice

(
  • notice
  • [noticeTemplate]
)
Brick chainable

Display a (error) notice on the brick.

Parameters:

  • notice Object

    object with notice data to be passed to the template

  • [noticeTemplate] String optional

    notice template name

Returns:

Brick:

itself

getData

(
  • [wrap]
)
Object

Inherited from Brick but overwritten in src/js/RAMP/Utils/bricks.js:2423

Returns ColorPickerBrick's data. Returns different colour representations:

  • {String} hex hexcode
  • {Array} rgb array of rgb colours (from 0 to 1)
  • {Array} rgb_ array of rgb colours (from 0 to 255)
  • {Array} hsv array of hsv colours (from 0 to 1)

Parameters:

  • [wrap] Boolean optional

    indicates of the payload should be wrapped with a Brick's id; useful when collection information from several Bricks at once.

Returns:

Object:

A wrapper object around two properties: inputValue and userEntered

isUserEntered

() Boolean

Checks if the input value was entered by the user or not.

Returns:

Boolean:

true if the input value was entered by the user; false, otherwise

isValid

() Boolean

Inherited from Brick but overwritten in src/js/RAMP/Utils/bricks.js:1950

Checks if the SimpleInputBrick is valid. It's considered valid if the input value is not an empty String.

Returns:

Boolean:

true if valid; false if not

new

(
  • id
  • config
)
chainable

Inherited from Brick but overwritten in src/js/RAMP/Utils/bricks.js:2339

Initializes the ColorPickerBrick by generating a specified template and setting defaults. A random colour is picked as when this Brick is instantiated. This Brick fires a CHANGE event on every time the selected colour changes.

Parameters:

  • id String

    specified id of the Brick

  • config Object

    a configuration object for the Brick

    • [header] String optional

      a Brick header

    • [instructions] String optional

      a configuration object for the Brick

    • [required] Array | Object optional

      collection of rules specifying what external conditions must be valid for the Brick to be enabled

    • [isEnabled] Boolean optional

      specifies if the brick is disabled from the start

    • [freezeStates] Array optional

      a set of rules specifying states Brick should be frozen

    • [baseTemplate] String optional

      a base template name to be used

    • [noticeTemplate] String optional

      a notice template name to be used

    • [containerClass] String optional

      a CSS class of the specific brick container

    • [customContainerClass] String optional

      any other optional CSS class to be added to the brick container

    • [template] String optional

      a name of the specific Brick template

    • [label] String optional

      an input field label. Invisible. Defaults to the Brick's header

    • [placeholder] String optional

      a placeholder to be displayed inside the input field

    • [pickerPosition] String optional

      specifies positions of the actual color picker (square wheel) control

notify

(
  • eventName
  • data
)
Brick private chainable

Notifies a listener of a Brick event.

Parameters:

  • eventName String

    an eventName that should be reported

  • data Object

    a payload object to be passed along with the @event

Returns:

Brick:

itself

on

(
  • eventName
  • listener
)
Brick chainable

Sets a listener on the Brick for a specified eventName.

Parameters:

  • eventName String

    an eventName to listen for

  • listener Function

    a callback function to be called

Returns:

Brick:

itself

setData

(
  • data
)
SimpleInputBrick chainable

Inherited from Brick but overwritten in src/js/RAMP/Utils/bricks.js:1960

Sets SimpleInputBrick's data. First calls setInputValue and calls set data on the Brick prototype.

Parameters:

  • data Object

    a wrapper object for the data to be set.

Returns:

setInputValue

(
  • value
  • userEntered
)
SimpleInputBrick chainable

Sets the current value of the input field.

Parameters:

  • value String

    string value to be entered into the input field

  • userEntered Boolean

    boolean value indicating if the user is the source of the string value

Returns:

setState

(
  • state
)
SimpleInputBrick chainable

Inherited from Brick but overwritten in src/js/RAMP/Utils/bricks.js:1902

Sets the state of the Brick. Depending on the state, update the visual styles of the input field. Then call the Brick prototype setState function.

Parameters:

  • state String

    a name of the state to set

Returns:

Properties

_isFrozen

Boolean private

Indicates if the Brick is frozen and cannot be interacted with.

Default: false

_listeners

Object private

A collection of listeners to be notified of specified Brick events.

Default: {}

baseTemplate

String private

A default base template name.

Default: "default_base_template"

containerClass

String private

Inherited from Brick but overwritten in src/js/RAMP/Utils/bricks.js:2295

A CSS class of the ColorPickerBrick container node.

Default: "colorpicker-brick-container"

customContainerClass

String private

Any other custom CSS class to be added to the Brick container node.

Default: ""

event

Object

A dictionary of possible Brick events.

Example:

 event: {
     CHANGE: "brick/change"
 }

freezeStates

Array private

A set of rules specifying states Brick should be frozen.

Default: []

Example:

 [
      Bricks.Brick.state.SUCCESS,
      Bricks.Brick.state.ERROR
  ],

header

String private

A Brick header.

Default: ""

inputValue

String private

A string that is currently entered in the input field

Default: ""

instructions

String private

An instructional text to be displayed.

Default: ""

isEnabled

Boolean

Specifies if the brick is enabled from creation. If false, the Brick is disabled after initialization.

Default: true

label

String private

An input field label. Invisible. Defaults to the Brick's header.

Default: ""

noticeTemplate

String private

A default notice template name.

Default: "default_brick_notice"

picker

Object private

The actual node of the picker control.

pickerPosition

String private

Specifies positions of the actual color picker (square wheel) control

Default: "top"

pickerSwatch

String private

A sample node that is coloured with the selected colour.

placeholder

String private

A placeholder to be displayed inside the input field.

Default: ""

required

Array

A collection of rules specifying what external conditions must be valid for the Brick to be enabled. This is not used directly by the Brick itself, but instead by the external object manipulating a collection of Bricks. Two types of rules possible: "all" and "any". Any additional properties needed can be specified.

Default: null

Example:

 [
      {
          type: "all",
          check: ["serviceType", "serviceURL"]
      }
 ]

state

Object

A dictionary of Brick events.

Example:

state: {
  SUCCESS: "brick/success",
  ERROR: "brick/error",
  DEFAULT: "brick/default"
 }

template

String private

Inherited from Brick but overwritten in src/js/RAMP/Utils/bricks.js:2305

A name of the default ColorPickerBrick template.

Default: "default_colorpicker_brick_template"

userEntered

Boolean private

Indicates if the user entered text into the input field or it was entered programmatically

Default: false

Events

Bricks.Brick.event.CHANGE

Published whenever a Brick undergoes some change.

Event Payload:

  • data Object

    anything, usually result of calling getData() on the Brick