forked from DefinitelyTyped/DefinitelyTyped
-
Notifications
You must be signed in to change notification settings - Fork 0
/
spectrum.d.ts
292 lines (241 loc) · 9.6 KB
/
spectrum.d.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
// Type definitions for spectrum 1.5.1
// Project: https://github.com/bgrins/spectrum/
// Definitions by: Mordechai Zuber <https://github.com/M-Zuber>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/// <reference path="../jquery/jquery.d.ts"/>
/// <reference path="../tinycolor/tinycolor.d.ts"/>
interface JQuery {
/**
* Shows the colorpicker.
*/
spectrum(methodName: "show"): JQuery;
/**
* Hides the colorpicker.
*/
spectrum(methodName: "hide"): JQuery;
/**
* Toggles the colorpicker.
*
* Warning: If you are calling toggle from a click handler,
* make sure you return false to prevent the colorpicker from immediately hiding after it is toggled.
*/
spectrum(methodName: "toggle"): JQuery;
/**
* Gets the current value from the colorpicker.
*/
spectrum(methodName: "get"): tinycolorInstance;
/**
* Sets the colorpickers value to update the original input.
* Note: this will not fire the `change` event, to prevent infinite loops
* from calling `set` from within `change`.
*
* @param colorString- the new color for the colorpicker.
*/
spectrum(methodName: "set", colorString?: string): JQuery;
/**
* Retrieves the container element of the colorpicker,
* in case you want to manaully position it or do other things.
*/
spectrum(methodName: "container"): JQuery;
/**
* Resets the positioning of the container element.
* This could be used if the colorpicker was hidden when initialized,
* or if the colorpicker is inside of a moving area.
*/
spectrum(methodName: "reflow"): JQuery;
/**
* Removes the colorpicker functionality and restores the element to its original state.
*/
spectrum(methodName: "destroy"): JQuery;
/**
* Allows selection of the colorpicker component. if it is already enabled, this method does nothing.
* Additionally, this will cause the original (now hidden) input to be set as disabled.
*/
spectrum(methodName: "enable"): JQuery;
/**
* Disables selection of the colorpicker component. adds the sp-disabled class onto the replacer element.
* If it is already disabled, this method does nothing.
* Additionally, this will remove the disabled property on the original (now hidden).
*/
spectrum(methodName: "disable"): JQuery;
/**
* Retrieves the current value for the option name.
*
* @param optionName- the option to retrieve the value for.
*/
spectrum(methodName: "option", optionName?: string): JQuery;
/**
* Sets the value of the option name with the value passed in.
*
* @param optionName- the option to set.
* @param newOptionvalue- the new value for the option.
*/
spectrum(methodName: "option", optionName?: string, newOptionValue?: any): JQuery;
/**
* Calls the method.
*/
spectrum(methodName: string): any; // in most cases this is JQuery except for the get method which returns a tinycolorInstance
/**
* Initializes the input element that it is called on
* as a spectrum colorpicker instance.
*/
spectrum(options?: Spectrum.Options): JQuery;
/**
* Called at the beginning of a drag event on either hue slider, alpha slider, or main color picker areas.
*/
on(events: "dragstart.spectrum", handler: (eventObject: JQueryEventObject, color: tinycolorInstance) => any): JQuery;
/**
* Called at the end of a drag event on either hue slider, alpha slider, or main color picker areas.
*/
on(events: "dragstop.spectrum", handler: (eventObject: JQueryEventObject, color: tinycolorInstance) => any): JQuery;
}
declare module Spectrum {
interface Options {
/**
* The initial color can be set with the color option.
* if you don't pass in a color, Spectrum will use the value attribute on the input.
* The input is a string that is parsed using https://github.com/bgrins/TinyColor
*/
color?: string;
/**
* The colorpicker will always show up at full size, and be positioned as an inline-block element.
*/
flat?: boolean;
/**
* Adds an input to allow for free form typing.
*/
showInput?: boolean;
/**
* Shows the color that was initially set when opening.
* This provides an easy way to click back to what was set when opened.
*/
showInitial?: boolean;
/**
* Allows the colorpicker to have no color as a value.
* Will display a button to set selection to 'no color'.
*/
allowEmpty?: boolean;
/**
* Allows alpha transparency selection
*/
showAlpha?: boolean;
/**
* Automatically disables the colorpicker.
* Additionally, if the input that you initialize spectrum on is disabled, this will be the default value.
* Note: you cannot enable spectrum if the input is disabled
*/
disabled?: boolean;
/**
* Sets a palette below the colorpicker to make it convenient for users to choose from
* frequently or recently used colors.
* Default value: [["#ffffff", "#000000", "#ff0000", "#ff8000", "#ffff00", "#008000", "#0000ff", "#4b0082", "#9400d3"]]
*/
palette?: string[][];
/**
* When the colorpicker is closed, the current color will be added to the palette if it isn't there already.
*/
showPalette?: boolean;
/**
* Shows only the colors specified in the palette
*/
showPaletteOnly?: boolean;
/**
* Shows a button to toggle the colorpicker next to the palette.
* This way, the user can choose from a limited number of colors in the palette,
* but still be able to pick a color that's not in the palette.
*/
togglePaletteOnly?: boolean;
/**
* Changes the text on the open-toggle colorpicker button.
*/
togglePaletteMoreText?: string;
/**
* Changes the text on the close-toggle colorpicker button.
*/
togglePaletteLessText?: string;
/**
* Automatically hides the colorpicker after a palette color is selected.
*/
hideAfterPaletteSelect?: boolean;
/**
* Keeps track of what has been selected by the user.
*/
showSelectionPalette?: boolean;
/**
* The users selection will be saved in the browser's localStorage object.
* Any Spectrum with the same string will share the selection.
*/
localStorageKey?: string;
/**
* When clicking outside of the colorpicker,
* force it to fire a change event rather than having it revert the change.
*/
clickoutFiresChange?: boolean;
/**
* Sets the text on the cancel button.
*/
cancelText?: string;
/**
* Sets the text on the choose button.
*/
chooseText?: string;
/**
* Adds an additional class name to the just the container element.
*/
containerClassName?: string;
/**
* Adds an additional class name to just the replacer element.
*/
replacerClassName?: string;
/**
* Sets the format that is displayed in the text box.
* This will also change the format that is displayed in the titles from the palette swatches.
* Possible values: "hex", "hex3", "hsl", "rgb", "name"
*/
preferredFormat?: string;
/**
* Toggles the choose/cancel buttons.
* If there are no buttons, the behavior will be to fire the `change` event (and update the original input) when the picker is closed.
*/
showButtons?: boolean;
/**
* Sets which element the colorpicker container is appended to (default is "body").
* This can be any valid object taken into the jQuery appendTo function.
* Changing this can help resolve issues with opening the colorpicker in a modal dialog
* or fixed position container, for instance.
*/
appendTo?: any //same as JQuery appendTo : JQuery| any[] | Element| string
/**
* Sets the max size for the palette.
*/
maxSelectionSize?: number;
/**
*/
selectionPalette?: string[];
/**
* Called as the original input changes. Only happens when the input is closed or the 'Choose' button is clicked.
*/
change?: (color: tinycolorInstance) => void;
/**
* Called as the user moves around within the colorpicker.
*/
move?: (color: tinycolorInstance) => void;
/**
* Called after the colorpicker is opened. This is ignored on a flat colorpicker.
* Note, when any colorpicker on the page is shown it will hide any that are already open.
*/
show?: (color: tinycolorInstance) => void;
/**
* Called after the colorpicker is hidden.
* This happens when clicking outside of the picker while it is open.
* Note, when any colorpicker on the page is shown it will hide any that are already open.
* This event is ignored on a flat colorpicker.
*/
hide?: (color: tinycolorInstance) => void;
/**
* You can prevent the colorpicker from showing up if you return false in the beforeShow event.
* This event is ignored on a flat colorpicker.
*/
beforeShow?: (color: tinycolorInstance) => void;
}
}