Skip to content

Home

Jump to bottom
Artur Arseniev edited this page Sep 12, 2017 · 3 revisions

Table of Contents

Grapick

Handler

Grapick

setColorPicker

Set custom color picker

Parameters

  • cp Object Color picker interface

Examples

const gp = new Grapick({
 el: '#gp',
 colorEl: '<input id="colorpicker"/>'
});
gp.setColorPicker(handler => {
   const colorEl = handler.getEl().querySelector('#colorpicker');

   // Or you might face something like this
   colorPicker({
     el: colorEl,
     startColoer: handler.getColor(),
     change(color) {
       handler.setColor(color);
     }
   });

   // jQuery style color picker
   $(colorEl).colorPicker2({...}).on('change', () => {
     handler.setColor(this.value);
   })
})

getValue

Get the complete style value

Parameters

  • type
  • angle

Examples

const ga = new Grapick({...});
ga.addHandler(0, '#000');
ga.addHandler(55, 'white');
console.log(ga.getValue());
// -> `linear-gradient(left, #000 0%, white 55%)`

Returns string

getSafeValue

Get the gradient value with the browser prefix if necessary

Parameters

  • type
  • angle

Returns string

getColorValue

Get only colors value

Examples

const ga = new Grapick({...});
ga.addHandler(0, '#000');
ga.addHandler(55, 'white');
console.log(ga.getColorValue());
// -> `#000 0%, white 55%`

Returns string

getPrefixedValues

Get an array with browser specific values

Parameters

  • type
  • angle

Examples

const ga = new Grapick({...});
ga.addHandler(0, '#000');
ga.addHandler(55, 'white');
console.log(ga.getPrefixedValues());
// -> [
 "-moz-linear-gradient(left, #000 0%, white 55%)",
 "-webkit-linear-gradient(left, #000 0%, white 55%)"
 "-o-linear-gradient(left, #000 0%, white 55%)"
]

Returns Array

change

Trigger change

Parameters

  • complete Boolean Indicates if the change is complete (eg. while dragging is not complete) (optional, default 1)

setDirection

Set gradient direction, eg. 'top', 'left', 'bottom', 'right', '90deg', etc.

Parameters

  • direction string Any supported direction

getDirection

Set gradient direction, eg. 'top', 'left', 'bottom', 'right', '90deg', etc.

Parameters

  • direction string Any supported direction

setType

Set gradient type, available options: 'linear' or 'radial'

Parameters

  • type
  • direction string Any supported direction

getType

Get gradient type

Returns string

addHandler

Add gradient handler

Parameters

  • position integer Position integer in percentage
  • color string Color string, eg. red, #123, 'rgba(30,87,153,1)', etc..
  • select Boolean Select the handler once it's added (optional, default 1)

Returns Object Handler object

getHandler

Get handler by index

Parameters

  • index integer

Returns Object

getHandlers

Get all handlers

Returns Array

clear

Remove all handlers

getSelected

Return selected handler if one exists

Returns (Handler | null)

updatePreview

Update preview element

render

Render the gradient picker

Handler

setColor

Set color

Parameters

  • color string Color string, eg. red, #123, 'rgba(30,87,153,1)', etc..
  • complete Boolean Indicates if the action is complete (optional, default 1)

Examples

handler.setColor('red');

setPosition

Set color

Parameters

  • position integer Position integer in percentage, eg. 20, 50, 100
  • complete Boolean Indicates if the action is complete (optional, default 1)

Examples

handler.setPosition(55);

getColor

Get color of the handler

Returns string Color string

getPosition

Get position of the handler

Returns integer Position integer

isSelected

Indicates if the handler is the selected one

Returns Boolean

getValue

Get value of the handler

Examples

handler.getValue(); // -> `black 0%`

Returns string

select

Select the current handler and deselect others

deselect

Deselect the current handler

remove

Remove the current handler

Returns Handler Removed handler (itself)

getEl

Get handler element

Returns HTMLElement

render

Render the handler

Returns HTMLElement Rendered element

Clone this wiki locally