UI Framework ReferenceAuWidgetColorPicker

Class: AuWidgetColorPicker

A widget that is used to select colors in the editor.

{
  "widgets": [
    {
      "title": "Background Color",
      "name": "colors",
      "type": "color-picker",
      "params": {
        "text": "Choose a background",
        "type": "color",
        "colors": [
          {
            "value": "Beige",
            "displayColor": "#dac0a3"
          },
          {
            "value": "Kelly Green",
            "displayColor": "#017c60"
          },
          {
            "value": "Yellow",
            "displayColor": "#fed505"
          },
          {
            "value": "Teal",
            "displayColor": "#009ead"
          }
        ]
      }
    }
  ]
}

Hierarchy

AuBaseSelectorWidget

AuWidgetColorPicker

Implements

Index

Properties

Accessors

Methods

Properties

color

color: any

Defined in src/widgets/au-widget-color-picker/au-widget-color-picker.ts:67

The color selected by the user.


params

params: IColorPickerConfig

Overrides AuBaseWidget.params

Defined in src/widgets/au-widget-color-picker/au-widget-color-picker.ts:51

Properties of the widget.


paramsRaw

paramsRaw: any

Inherited from AuBaseWidget.paramsRaw

Defined in src/widgets/widget/AuBaseWidget.ts:53

Uncompiled widget configuration.

Accessors

_

get _(): boolean

Overrides AuBaseSelectorWidget._

Defined in src/widgets/au-widget-color-picker/au-widget-color-picker.ts:81

Returns the selected value.

Returns:boolean

Methods

addCustomStyles

addCustomStyles(params: any): void

Inherited from AuBaseWidget.addCustomStyles

Defined in src/widgets/widget/AuBaseWidget.ts:352

Applies new styles to a widget.

Parameters:

Name Type
params any

Returns:void


clearSelection

clearSelection(): void

Overrides AuBaseSelectorWidget.clearSelection

Defined in src/widgets/au-widget-color-picker/au-widget-color-picker.ts:86

Sets the color value to false to reset the color selection.

Returns:void


closePicker

closePicker(): void

Defined in src/widgets/au-widget-color-picker/au-widget-color-picker.ts:144

Closes the color picker.

Returns:void


compile

compile(additionalParam: any): Promise‹any›

Inherited from AuBaseWidget.compile

Defined in src/widgets/widget/AuBaseWidget.ts:185

Compiles the widget config.

"steps": [{
  "name": "card-size",
  "title": "Step 1. Card Options",
  "description": "Choose a card size.",
  "toolPanel": {
    "name": "options"
  },
  "onActivate": [
    "{{#function $['logo'].compile() }}"
  ]
},
...

Parameters:

Name Type Default Description
additionalParam any Parameters for widget config compilation.

Returns:Promise‹any›

The compiled widget configuration.


emitChange

emitChange(data: any, forceRecompile: boolean): void

Inherited from AuBaseWidget.emitChange

Defined in src/widgets/widget/AuBaseWidget.ts:161

Sends a message about the widget state changes.

"steps": [{
  "name": "card-size",
  "title": "Step 1. Card Options",
  "description": "Choose a card size.",
  "toolPanel": {
    "name": "options"
  },
  "onActivate": [
    "{{#function $['options'].emitChange()}}"
  ]
},
...

Parameters:

Name Type Default Description
data any Data for updating the widget.
forceRecompile boolean false If true, runs widget recompilation to apply the updated parameters.

Returns:void


exportWidgetData

exportWidgetData(force: boolean): Promise‹ColorPickerData›

Implementation of IRestorableWidget

Defined in src/widgets/au-widget-color-picker/au-widget-color-picker.ts:113

Parameters:

Name Type
force boolean

Returns:Promise‹ColorPickerData›


restoreWidgetFromData

restoreWidgetFromData(widgetData: ColorPickerData, force: boolean): Promise‹void›

Defined in src/widgets/au-widget-color-picker/au-widget-color-picker.ts:117

Parameters:

Name Type
widgetData ColorPickerData
force boolean

Returns:Promise‹void›


showPreloader

showPreloader(isPreload: boolean, message: string): void

Inherited from AuBaseWidget.showPreloader

Defined in src/widgets/widget/AuBaseWidget.ts:250

Shows a preloader.

"onClick": [
  "{{#function main.showPreloader(true, 'Creating print files...')}}",
  "{{#function $['editor'].getHiResImages(800,800)}}",
  "{{#function main.showPreloader(false)}}"
]

Parameters:

Name Type Default Description
isPreload boolean - If true, enables the preloader.
message string undefined A text message that appears next to the preloader.

Returns:void


showToast

showToast(data?: string, duration?: number): void

Inherited from AuBaseWidget.showToast

Defined in src/widgets/widget/AuBaseWidget.ts:514

Shows a toast.

return editor.loadUserInfo(data)
    .catch(err => {
        this.widget.showToast("Error: Invalid data");
        console.log(err);
    });

Parameters:

Name Type Description
data? string A string message to display in the toast.
duration? number Defines how long to show the toast for.

Returns:void


togglePicker

togglePicker(): void

Defined in src/widgets/au-widget-color-picker/au-widget-color-picker.ts:137

Shows and hides the color picker.

Returns:void