About

The component implements spectrum colorpicker.

Before you begin

Please get familiar with skripio component basics

Quick start

1. Add component code to your project.
2. Call window.skripio.initObject to instantiate component object.

In most of the cases you do not need to customize the component as it comes with default configuration sufficient for most scenarios.

However, if you need to customize it pass an initOptions object to the initObject method.

Examples

Please see below examples of initOptions object for different use cases.

Component with initial color:

{
    "componentOptions": {
        "spectrumOptions": {
            "color": "blue"
        }
    }
}

Component with custom color palette and RgbString color output format:

{
    "componentOptions": {
        "colorFormat": "toRgbString",
        "spectrumOptions": {
            "color": "blanchedalmond",
            "palette": [
                ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
                ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
                ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
                ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
                ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
                ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
                ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
                ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
            ]
        }
    }
}

Reference

Table of Contents

• skripio
• skripio.initObject
  • Parameters
• SkripioComponent
  • Parameters

skripio

skripio component namespace.

skripio.initObject

Instantiates SkripioComponent.

Parameters

• objectName string Component name to instantiate.

• initOptions string Method options. (optional, default '{}')

  • initOptions.componentOptions object SkripioComponent options.

• callback any 1C callback identifier of this wrapper function. (optional, default 'initObject')

Returns string

• sync payload If successful the response object that contains instantiated skripio component object name and DOM element id which will receive async responses from this object will be returned.
  
• async payload None.

SkripioComponent

SkripioComponent options.

Parameters

• componentOptions object Options used to instantiate a component object.

  • componentOptions.spectrumOptions object Options used to instantiate spectrum object. For complete list of options see Spectrum options. (optional, default {})
  • componentOptions.colorFormat string Function name that defines output color format. For complete list of supported output formats see Spectrum color outputs. (optional, default 'toHexString')
  • componentOptions.spectrumEvent string Spectrum event name that will trigger color responses. For complete list of supported events see Spectrum events. (optional, default 'move.spectrum')
  • componentOptions.callback any Callback returned by component at color response event. (optional, default 'colorSelected')
  • componentOptions.undefined
  • componentOptions.undefined

Returns string

• sync payload None
  
• async payload Color selected by user at each componentOptions.spectrumEvent event fired.