mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-09-09 11:13:57 +08:00
Added definitions for JQuery Colorpicker by @vanderlee
This commit is contained in:
Jeffery Grajkowski
@@ -0,0 +1,220 @@
|
||||
/// <reference path="jquery.colorpicker.d.ts"/>
|
||||
/// <reference path="../jqueryui/jqueryui.d.ts" />
|
||||
|
||||
// Default options copied from the source
|
||||
var colorpicker = $("<input type=\"text\"/>").colorpicker({
|
||||
alpha: false, // Show alpha controls and mode
|
||||
altAlpha: true, // change opacity of altField as well?
|
||||
altField: '', // selector for DOM elements which change background color on change.
|
||||
altOnChange: true, // true to update on each change, false to update only on close.
|
||||
altProperties: 'background-color', // comma separated list of any of 'background-color', 'color', 'border-color', 'outline-color'
|
||||
autoOpen: false, // Open dialog automatically upon creation
|
||||
buttonClass: null, // If set, the button will get this/these classname(s).
|
||||
buttonColorize: false,
|
||||
buttonImage: 'images/ui-colorpicker.png',
|
||||
buttonImageOnly: false,
|
||||
buttonText: null, // Text on the button and/or title of button image.
|
||||
closeOnEscape: true, // Close the dialog when the escape key is pressed.
|
||||
closeOnOutside: true, // Close the dialog when clicking outside the dialog (not for inline)
|
||||
color: '#00FF00', // Initial color (for inline only)
|
||||
colorFormat: 'HEX', // Format string for output color format
|
||||
draggable: true, // Make popup dialog draggable if header is visible.
|
||||
duration: 'fast',
|
||||
hsv: true, // Show HSV controls and modes
|
||||
inline: true, // Show any divs as inline by default
|
||||
inlineFrame: true, // Show a border and background when inline.
|
||||
layout: {
|
||||
map: [0, 0, 1, 5], // Left, Top, Width, Height (in table cells).
|
||||
bar: [1, 0, 1, 5],
|
||||
preview: [2, 0, 1, 1],
|
||||
hsv: [2, 1, 1, 1],
|
||||
rgb: [2, 2, 1, 1],
|
||||
alpha: [2, 3, 1, 1],
|
||||
hex: [2, 4, 1, 1],
|
||||
lab: [3, 1, 1, 1],
|
||||
cmyk: [3, 2, 1, 2],
|
||||
swatches: [4, 0, 1, 5]
|
||||
},
|
||||
limit: '', // Limit color "resolution": '', 'websafe', 'nibble', 'binary', 'name'
|
||||
modal: false, // Modal dialog?
|
||||
mode: 'h', // Initial editing mode, h, s, v, r, g, b or a
|
||||
okOnEnter: false, // Close (with OK) when pressing the enter key
|
||||
parts: '', // leave empty for automatic selection
|
||||
part: {
|
||||
map: { size: 256 },
|
||||
bar: { size: 256 }
|
||||
}, // options per part
|
||||
regional: '',
|
||||
revert: false, // Revert color upon non
|
||||
rgb: true, // Show RGB controls and modes
|
||||
showAnim: 'fadeIn',
|
||||
showCancelButton: true,
|
||||
showNoneButton: false,
|
||||
showCloseButton: true,
|
||||
showOn: 'focus click alt', // 'focus', 'click', 'button', 'alt', 'both'
|
||||
showOptions: {},
|
||||
swatches: null, // null for default or kv-object or names swatches set
|
||||
swatchesWidth: 84, // width (in number of pixels) of swatches box.
|
||||
title: null,
|
||||
cancel: null,
|
||||
close: null,
|
||||
init: null,
|
||||
select: null,
|
||||
ok: null,
|
||||
open: null
|
||||
});
|
||||
|
||||
colorpicker.colorpicker("open");
|
||||
colorpicker.colorpicker("close");
|
||||
colorpicker.colorpicker("destroy");
|
||||
colorpicker.colorpicker("setColor", "#deadbeef");
|
||||
|
||||
// example plugins provided
|
||||
|
||||
$.colorpicker.parts["memory"] = function (inst) {
|
||||
var that = this,
|
||||
container,
|
||||
selectNode = function (node) {
|
||||
inst._setColor($(node).css('backgroundColor'));
|
||||
inst._change();
|
||||
},
|
||||
deleteNode = function (node) {
|
||||
node.remove();
|
||||
},
|
||||
addNode = function (color) {
|
||||
var $node = $('<div/>').addClass('ui-colorpicker-swatch').css('backgroundColor', color);
|
||||
$node.mousedown(function (e) {
|
||||
e.stopPropagation();
|
||||
switch (e.which) {
|
||||
case 1:
|
||||
selectNode(this);
|
||||
break;
|
||||
case 3:
|
||||
deleteNode($node);
|
||||
setMemory();
|
||||
break;
|
||||
}
|
||||
}).bind('contextmenu', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
container.append($node);
|
||||
},
|
||||
getMemory = function () {
|
||||
return (<string>(document.cookie.match(/\bcolorpicker-memory=([^;]*)/) || [0, ''])[1]).split(',');
|
||||
},
|
||||
setMemory = function () {
|
||||
var colors = [];
|
||||
$('> *', container).each(function () {
|
||||
colors.push(encodeURIComponent($(this).css('backgroundColor')));
|
||||
});
|
||||
var expdate = new Date();
|
||||
expdate.setDate(expdate.getDate() + (365 * 10));
|
||||
document.cookie = 'colorpicker-memory=' + colors.join() + ";expires=" + expdate.toUTCString();
|
||||
};
|
||||
|
||||
this.init = function () {
|
||||
container = $('<div/>')
|
||||
.addClass('ui-colorpicker-memory ui-colorpicker-border ui-colorpicker-swatches')
|
||||
.css({
|
||||
width: 84,
|
||||
height: 84,
|
||||
cursor: 'crosshair'
|
||||
})
|
||||
.appendTo($('.ui-colorpicker-memory-container', inst.dialog));
|
||||
|
||||
$.each(getMemory(), function () {
|
||||
addNode(decodeURIComponent(this));
|
||||
});
|
||||
|
||||
container.mousedown(function (e) {
|
||||
addNode(inst.color.toCSS());
|
||||
setMemory();
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
declare function setGradient(element, startColor, endColor): void;
|
||||
|
||||
$.colorpicker.parts["rgbslider"] = function (inst) {
|
||||
var that = this,
|
||||
sliders = {
|
||||
r: $('<div class="ui-colorpicker-slider"/>'),
|
||||
g: $('<div class="ui-colorpicker-slider"/>'),
|
||||
b: $('<div class="ui-colorpicker-slider"/>')
|
||||
};
|
||||
|
||||
this.init = function () {
|
||||
$('<div class="ui-colorpicker-rgbslider"/>').append(sliders.r, sliders.g, sliders.b)
|
||||
.appendTo($('.ui-colorpicker-rgbslider-container', inst.dialog));
|
||||
|
||||
function refresh() {
|
||||
var min,
|
||||
max,
|
||||
r = sliders.r.slider('value') / 255,
|
||||
g = sliders.g.slider('value') / 255,
|
||||
b = sliders.b.slider('value') / 255;
|
||||
|
||||
inst.color.setRGB(r, g, b);
|
||||
|
||||
setGradient(sliders.r, new $.colorpicker.Color(0, g, b), new $.colorpicker.Color(1, g, b));
|
||||
setGradient(sliders.g, new $.colorpicker.Color(r, 0, b), new $.colorpicker.Color(r, 1, b));
|
||||
setGradient(sliders.b, new $.colorpicker.Color(r, g, 0), new $.colorpicker.Color(r, g, 1));
|
||||
|
||||
inst._change();
|
||||
}
|
||||
|
||||
$(sliders.r).add(sliders.g).add(sliders.b).slider({
|
||||
min: 0,
|
||||
max: 255,
|
||||
step: 1,
|
||||
slide: refresh,
|
||||
change: refresh
|
||||
});
|
||||
};
|
||||
|
||||
this.repaint = function () {
|
||||
$.each(inst.color.getRGB(), function (index, value) {
|
||||
var input = sliders[index];
|
||||
value = Math.round(value * 255);
|
||||
if (input.slider('value') !== value) {
|
||||
input.slider('value', value);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
this.update = function () {
|
||||
this.repaint();
|
||||
};
|
||||
};
|
||||
|
||||
$.colorpicker.parsers['CMYK'] = function (color) {
|
||||
var m = /^cmyk\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/.exec(color);
|
||||
if (m) {
|
||||
return (new $.colorpicker.Color()).setCMYK(
|
||||
parseInt(m[1], 10) / 255,
|
||||
parseInt(m[2], 10) / 255,
|
||||
parseInt(m[3], 10) / 255,
|
||||
parseInt(m[4], 10) / 255
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
$.colorpicker.parsers["#HEX8"] = function (color) {
|
||||
var m = /^\s*#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})\s*$/i.exec(color);
|
||||
if (m) {
|
||||
return (new (<any>$).colorpicker.Color()).setRGB(
|
||||
parseInt(m[2], 16) / 255,
|
||||
parseInt(m[3], 16) / 255,
|
||||
parseInt(m[4], 16) / 255
|
||||
).setAlpha(parseInt(m[1], 16) / 255);
|
||||
}
|
||||
};
|
||||
|
||||
$.colorpicker.writers["#HEX8"] = function (color, that) {
|
||||
return that._formatColor("#axrxgxbx", color);
|
||||
};
|
||||
|
||||
$.colorpicker.swatches['pantone'] = {
|
||||
'100': { r: 0.956862745098039, g: 0.929411764705882, b: 0.486274509803922 }
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
""
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
// Type definitions for jQuery Colorpicker Plugin 1.4.3
|
||||
// Project: https://github.com/vanderlee/colorpicker
|
||||
// Definitions by: Jeffery Grajkowski <https://github.com/pushplay/>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
/// <reference path="../jquery/jquery.d.ts" />
|
||||
|
||||
interface JQueryColorpickerOptions {
|
||||
alpha?: boolean;
|
||||
altAlpha?: boolean;
|
||||
altField?: string;
|
||||
altOnChange?: boolean;
|
||||
altProperties?: string;
|
||||
autoOpen?: boolean;
|
||||
buttonClass?: string;
|
||||
buttonColorize?: boolean;
|
||||
buttonImage?: string;
|
||||
buttonImageOnly?: boolean;
|
||||
buttonText?: string;
|
||||
closeOnEscape?: boolean;
|
||||
closeOnOutside?: boolean;
|
||||
color?: string;
|
||||
colorFormat?: string;
|
||||
dragggable?: boolean;
|
||||
duration?: string;
|
||||
hsv?: boolean;
|
||||
inline?: boolean;
|
||||
inlineFrame?: boolean;
|
||||
layout?: {[part: string]: number[];};
|
||||
limit?: string;
|
||||
modal?: boolean;
|
||||
mode?: string;
|
||||
okOnEnter?: boolean;
|
||||
part?: any;
|
||||
parts?: any;
|
||||
regional?: string;
|
||||
revert?: boolean;
|
||||
rgb?: boolean;
|
||||
showAnim?: string;
|
||||
showCancelButton?: boolean;
|
||||
showCloseButton?: boolean;
|
||||
showNoneButton?: boolean;
|
||||
showOn?: string;
|
||||
showOptions?: any;
|
||||
swatches?: any;
|
||||
swatchesWidth?: number;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
interface JQueryColorpickerStatic {
|
||||
limits: { [name: string]: (color: any) => void; };
|
||||
parsers: { [name: string]: (color: any) => any; };
|
||||
parts: { [name: string]: (inst: any) => any; };
|
||||
partslists: { [name: string]: string[]; };
|
||||
regional: { [key: string]: string; };
|
||||
swatches: { [swatch: string]: { [name: string]: JQueryColorpickerStatic.RGB; }; };
|
||||
writers: { [name: string]: (color: any, that: any) => any; };
|
||||
Color: { new (r?: number, g?: number, b?: number, a?: number): JQueryColorpickerStatic.Color; };
|
||||
}
|
||||
|
||||
declare module JQueryColorpickerStatic {
|
||||
export interface CMYK {
|
||||
c: number;
|
||||
m: number;
|
||||
y: number;
|
||||
k: number;
|
||||
}
|
||||
export interface HSL {
|
||||
h: number;
|
||||
s: number;
|
||||
l: number;
|
||||
}
|
||||
export interface HSV {
|
||||
h: number;
|
||||
s: number;
|
||||
v: number;
|
||||
}
|
||||
export interface LAB {
|
||||
l: number;
|
||||
a: number;
|
||||
b: number;
|
||||
}
|
||||
export interface RGB {
|
||||
r: number;
|
||||
g: number;
|
||||
b: number;
|
||||
}
|
||||
export interface Color {
|
||||
set: boolean;
|
||||
copy(): Color;
|
||||
distance(color: Color): number;
|
||||
equals(color: Color): boolean;
|
||||
getAlpha(): number;
|
||||
getChannels(): {
|
||||
A: number;
|
||||
B: number;
|
||||
L: number;
|
||||
a: number;
|
||||
b: number;
|
||||
c: number;
|
||||
g: number;
|
||||
h: number;
|
||||
k: number;
|
||||
m: number;
|
||||
r: number;
|
||||
s: number;
|
||||
v: number;
|
||||
y: number;
|
||||
};
|
||||
getCMYK(): CMYK;
|
||||
getHSL(): HSL;
|
||||
getHSV(): HSV;
|
||||
getLAB(): LAB;
|
||||
getRGB(): RGB;
|
||||
getSpaces(): {
|
||||
cmyk: CMYK;
|
||||
hsl: HSL;
|
||||
hsv: HSV;
|
||||
lab: LAB;
|
||||
rgb: RGB;
|
||||
};
|
||||
limit(steps: number): void;
|
||||
normalize(): Color;
|
||||
setAlpha(a: number): Color;
|
||||
setCMYK(c: number, m: number, y: number, k: number): Color;
|
||||
setHSL(h: number, s: number, l: number): Color;
|
||||
setHSV(h: number, s: number, v: number): Color;
|
||||
setLAB(l: number, a: number, b: number): Color;
|
||||
setRGB(r: number, g: number, b: number): Color;
|
||||
setSpaces(new_spaces: any): Color;
|
||||
toCSS(): string;
|
||||
toHEX(): string;
|
||||
}
|
||||
}
|
||||
|
||||
interface JQueryColorpickerInstance {
|
||||
close(): void;
|
||||
destroy(): void;
|
||||
open(): void;
|
||||
setColor(color: any): void;
|
||||
}
|
||||
|
||||
interface JQueryStatic {
|
||||
colorpicker: JQueryColorpickerStatic;
|
||||
}
|
||||
|
||||
interface JQuery {
|
||||
colorpicker(options?: JQueryColorpickerOptions): JQuery;
|
||||
colorpicker(method: string): JQuery;
|
||||
colorpicker(method: string, param: any): JQuery;
|
||||
colorpicker(method: "close"): JQuery;
|
||||
colorpicker(method: "destroy"): JQuery;
|
||||
colorpicker(method: "open"): JQuery;
|
||||
colorpicker(method: "setColor", color: any): JQuery;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
""
|
||||
Reference in New Issue
Block a user