Class AuWidgetColorSelector

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

{
  "widgets": [
      {
          "title": "Color picks",
          "name": "colorSelector1",
          "type": "color-selector",
          "params": {
              "text": "Our color picks",
              "popupText": "Our color picks",
              "svg": "<svg viewBox='0 0 20 20'><path d='m5 5h10v10h-10z' fill='currentColor'/></svg>",
              "colors": [
                  {
                      "title": "Pastel Pink / Salmon",
                      "value": [
                          "#F4CDD3",
                          "#E08697"
                      ]
                  },
                  {
                      "title": "Fog/Navy",
                      "value": [
                          "#DCDCDC",
                          "#151B4E"
                      ]
                  },
                  {
                      "title": "Eggshell / Seamist",
                      "value": [
                          "#F6F4EC",
                          "#717BA1"
                      ]
                  }
              ]
          }
      },
      {
          "title": "Text color",
          "name": "colorSelector2",
          "type": "color-selector",
          "params": {
              "text": "Text color",
              "popupText": "Select text color",
              "colors": [
                  {
                      "title": "Pastel Pink",
                      "value": ["#F4CDD3"]
                  },
                  {
                      "title": "Salmon",
                      "value": ["#D7877C"]
                  }
              ]
          }
      },
      {
          "title": "Base color",
          "name": "colorSelector3",
          "type": "color-selector",
          "params": {
              "text": "Base color",
              "popupText": "Select base color",
              "colors": [
                  {
                      "title": "Pastel Pink",
                      "value": "#F4CDD3"
                  },
                  {
                      "title": "Salmon",
                      "value": "#D7877C"
                  }
              ]
          }
      }
  ]
}

Package: ui-framework

Properties

color

The color selected by the user.

Declaration

color: any

Property Value

Type	Description
any	The color selected by the user.

hiddenColor

Declaration

boolean hiddenColor

Property Value

Type	Description
boolean

params

Properties of the widget.

Declaration

params: IColorSelectorConfig

Property Value

Type	Description
IColorSelectorConfig	Properties of the widget.

Methods

checkInitDependenciesWidgets()

Returns an array of widget names, due to which the current widget cannot receive parameters.

Declaration

function checkInitDependenciesWidgets()

Returns

Type	Description
string[]

clearSelection()

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

Declaration

function clearSelection()

closeSelector()

Closes the color selector.

Declaration

function closeSelector()

createPalette(any, any)

Creates a palette.

Declaration

function createPalette(colors: any, svg: any)

Parameters

Type	Name	Description
any	colors
any	svg

exportWidgetData(boolean)

Declaration

function exportWidgetData(force: boolean)

Parameters

Type	Name	Description
boolean	force

Returns

Type	Description
Promise<ColorSelectorData>

resetPreloaderState()

Declaration

function resetPreloaderState()

restoreWidgetFromData(ColorSelectorData, boolean)

Declaration

function restoreWidgetFromData(widgetData: ColorSelectorData, force: boolean)

Parameters

Type	Name	Description
ColorSelectorData	widgetData
boolean	force

Returns

Type	Description
Promise<void>

showPreloader(boolean, string | string[], number)

Shows a preloader.

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

Declaration

function showPreloader(isPreload: boolean, message: string | string[], timeout: number)

Parameters

Type	Name	Description
boolean	isPreload	If true, enables the preloader.
string | string[]	message	A text message that appears next to the preloader.
number	timeout

showToast(string, number)

Shows a toast.

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

Declaration

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

Parameters

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

toggleSelector()

Shows and hides the color selector.

Declaration

function toggleSelector()