From 4088d65c4276205092e1ac3fa7ef968f3b5f55fd Mon Sep 17 00:00:00 2001 From: Jeffery Grajkowski Date: Mon, 13 Jan 2014 10:58:40 -0800 Subject: [PATCH] Added definitions for JQuery Colorpicker by @vanderlee --- .../jquery.colorpicker-tests.ts | 220 ++++++++++++++++++ .../jquery.colorpicker-tests.ts.tscparams | 1 + jquery.colorpicker/jquery.colorpicker.d.ts | 155 ++++++++++++ .../jquery.colorpicker.d.ts.tscparams | 1 + 4 files changed, 377 insertions(+) create mode 100644 jquery.colorpicker/jquery.colorpicker-tests.ts create mode 100644 jquery.colorpicker/jquery.colorpicker-tests.ts.tscparams create mode 100644 jquery.colorpicker/jquery.colorpicker.d.ts create mode 100644 jquery.colorpicker/jquery.colorpicker.d.ts.tscparams diff --git a/jquery.colorpicker/jquery.colorpicker-tests.ts b/jquery.colorpicker/jquery.colorpicker-tests.ts new file mode 100644 index 000000000..d49dc9ff9 --- /dev/null +++ b/jquery.colorpicker/jquery.colorpicker-tests.ts @@ -0,0 +1,220 @@ +/// +/// + +// Default options copied from the source +var colorpicker = $("").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 = $('
').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 ((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 = $('
') + .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: $('
'), + g: $('
'), + b: $('
') + }; + + this.init = function () { + $('
').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 ($).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 } +}; diff --git a/jquery.colorpicker/jquery.colorpicker-tests.ts.tscparams b/jquery.colorpicker/jquery.colorpicker-tests.ts.tscparams new file mode 100644 index 000000000..3cc762b55 --- /dev/null +++ b/jquery.colorpicker/jquery.colorpicker-tests.ts.tscparams @@ -0,0 +1 @@ +"" \ No newline at end of file diff --git a/jquery.colorpicker/jquery.colorpicker.d.ts b/jquery.colorpicker/jquery.colorpicker.d.ts new file mode 100644 index 000000000..683e28b96 --- /dev/null +++ b/jquery.colorpicker/jquery.colorpicker.d.ts @@ -0,0 +1,155 @@ +// Type definitions for jQuery Colorpicker Plugin 1.4.3 +// Project: https://github.com/vanderlee/colorpicker +// Definitions by: Jeffery Grajkowski +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +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; +} diff --git a/jquery.colorpicker/jquery.colorpicker.d.ts.tscparams b/jquery.colorpicker/jquery.colorpicker.d.ts.tscparams new file mode 100644 index 000000000..3cc762b55 --- /dev/null +++ b/jquery.colorpicker/jquery.colorpicker.d.ts.tscparams @@ -0,0 +1 @@ +"" \ No newline at end of file