wassname/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/wassname/DefinitelyTyped.git synced 2026-09-09 11:13:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3373 from M-Zuber/tinycolor

Browse Source 
Tinycolor typings
This commit is contained in:
Masahiro Wakame
2014-12-27 00:34:02 +09:00
parent a8e45e394d 1c7970ced8
commit 0da04f733c
3 changed files with 611 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
spectrum/spectrum.d.ts
Vendored
+118 -110
View File
@@ -4,251 +4,254 @@
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/// <reference path="../jquery/jquery.d.ts"/>
/// <reference path="../tinycolor/tinycolor.d.ts"/>
interface JQuery {
/**
* initializes the input element that it is called on
* as a spectrum colorpicker instance
* Initializes the input element that it is called on
* as a spectrum colorpicker instance.
*/
spectrum(options?: Spectrum.Options): JQuery;
/**
* shows the colorpicker
* Shows the colorpicker.
*/
spectrum(methodName: "show"): JQuery;
/**
* hides the colorpicker
* Hides the colorpicker.
*/
spectrum(methodName: "hide"): JQuery;
/**
* toggles the colorpicker
* 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.
* 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
* Gets the current value from the colorpicker.
*/
spectrum(methodName: "get"): any; //tinycolor
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`
* 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
* @param colorString- the new color for the colorpicker.
*/
spectrum(methodName: "set", colorString?: string): JQuery;
/**
* retrieves the container element of the colorpicker,
* 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 was hidden when initialized,
* 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.
* 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.
* 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).
* 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
* Retrieves the current value for the option name.
*
* @param optionName- the option to retrieve the value for
* @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
* 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
* @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
* Calls the method.
*/
spectrum(methodName: string): JQuery;
spectrum(methodName: string): any; // in most cases this is JQuery except for the get method which returns a tinycolorInstance
/**
* called at the beginning of a drag event on either hue slider, alpha slider, or main color picker areas
* 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: any /*tinycolor*/) => any): JQuery;
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: any /*tinycolor*/) => 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.
* 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?: any; //tinycolor -see https://github.com/bgrins/TinyColor
color?: string;
/**
* the colorpicker will always show up at full size, and be positioned as an inline-block element.
* 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.
* 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.
* 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'.
* 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
* 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
* 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"]]
* 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.
* 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
* Shows only the colors specified in the palette
*/
showPaletteOnly?: boolean;
/**
* showa 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,
* 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.
* Changes the text on the open-toggle colorpicker button.
*/
togglePaletteMoreText?: string;
/**
* changes the text on the close-toggle colorpicker button.
* Changes the text on the close-toggle colorpicker button.
*/
togglePaletteLessText?: string;
/**
* automatically hides the colorpicker after a palette color is selected.
* Automatically hides the colorpicker after a palette color is selected.
*/
hideAfterPaletteSelect?: boolean;
/**
* keeps track of what has been selected by the user.
* 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.
* 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.
* 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.
* Sets the text on the cancel button.
*/
cancelText?: string;
/**
* sets the text on the choose button.
* Sets the text on the choose button.
*/
chooseText?: string;
/**
* adds an additional class name to the just the container element.
* Adds an additional class name to the just the container element.
*/
containerClassName?: string;
/**
* adda an additional class name to just the replacer element.
* 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"
* 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.
* 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
* 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
appendTo?: any //same as JQuery appendTo : JQuery| any[] | Element| string
/**
* sets the max size for the palette.
* Sets the max size for the palette.
*/
maxSelectionSize?: number;
@@ -259,26 +262,31 @@ declare module Spectrum {
/**
* Called as the original input changes. Only happens when the input is closed or the 'Choose' button is clicked.
*/
change?: (color:any /*tinycolor */) => void;
change?: (color: tinycolorInstance) => void;
/**
* Called as the user moves around within the colorpicker
* Called as the user moves around within the colorpicker.
*/
move?: (color:any /*tinycolor */) => void;
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.
* 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:any /*tinycolor */) => void;
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.
* 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:any /*tinycolor */) => void;
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.
* 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:any /*tinycolor */) => void;
beforeShow?: (color: tinycolorInstance) => void;
}
}
tinycolor/tinycolor-tests.ts
+122
View File
@@ -0,0 +1,122 @@
/// <reference path="tinycolor.d.ts" />
/*
* Not all possible formats for construction are displayed.
* To see a complete list please view: https://github.com/bgrins/TinyColor
*/
var tester: tinycolorInstance = tinycolor("red");
/* Constructor Tests*/
// string
tester = tinycolor("#ffffff");
//rgb && rgba
tester = tinycolor({ r: 40, g: 30, b: 20 });
tester = tinycolor({ r: 255, g: 20, b: 10, a: 0 });
tester = tinycolor.fromRatio({ r: 0.5, g: 0.2, b: 1, a: 0 });
tester = tinycolor.fromRatio({ r: 1, g: 0, b: 0.7, a: 0 });
//hsl && hsla
tester = tinycolor({ h: 0, s: 0, l: 0 });
tester = tinycolor({ h: 0, s: 0, l: 0, a: 0 });
tester = tinycolor.fromRatio({ h: 0.5, s: 0.2, l: 1, a: 0 });
//hsv && hsva
tester = tinycolor({ h: 0, s: 0, v: 0 });
tester = tinycolor({ h: 0, s: 0, v: 0, a: 0 });
//tinycolor static methods
tester = tinycolor.mix(tester, tester);
tester = tinycolor.mix(tester, tester, 50);
tester = tinycolor.random();
/*Tinycolor object properties*/
var readable: Readable.Readable = tinycolor.readability(tester, tester);
var isReadable: boolean = tinycolor.isReadable(tester, tester);
tester = tinycolor.mostReadable(tester, [tester, tester, tester]);
var hexNames: { [key: string]: string } = tinycolor.hexNames;
var names: { [key: string]: string } = tinycolor.names;
/*Instance Methods*/
//check properties
var isValid: boolean = tester.isValid();
var isLight: boolean = tester.isLight();
var isDark: boolean = tester.isDark();
//get properties
var alpha: number = tester.getAlpha();
var brightness: number = tester.getBrightness();
var format: string = tester.getFormat();
var originalInput: any = tester.getOriginalInput();
//set properties
tester = tester.setAlpha(alpha);
//representations
var hsva: ColorFormats.HSVA = tester.toHsv();
var hsvString: string = tester.toHsvString();
var hsl: ColorFormats.HSLA = tester.toHsl();
var hslString: string = tester.toHslString();
var hex: string = tester.toHex();
var hexString: string = tester.toHexString();
var hex8: string = tester.toHex8();
var hex8String: string = tester.toHex8String();
var rgba: ColorFormats.RGBA = tester.toRgb();
var rgbString: string = tester.toString();
var percentageRGBA: ColorFormats.RGBA = tester.toPercentageRgb();
var percentageRGBString: string = tester.toPercentageRgbString();
var name: string = tester.toName();
var filter: string = tester.toFilter();
var sString: string = tester.toString();
sString = tester.toString("rgb");
sString = tester.toString("prgb");
sString = tester.toString("hex6");
sString = tester.toString("hex3");
sString = tester.toString("hex8");
sString = tester.toString("name");
sString = tester.toString("hsl");
sString = tester.toString("hsv");
//color modifications
tester = tester.lighten();
tester = tester.lighten(20);
tester = tester.brighten();
tester = tester.brighten(20);
tester = tester.darken();
tester = tester.darken(20);
tester = tester.desaturate();
tester = tester.desaturate(20);
tester = tester.saturate();
tester = tester.saturate(20);
tester = tester.spin();
tester = tester.spin(20);
tester = tester.greyscale();
//color combinations
var colors: tinycolorInstance[] = tester.analogous();
colors = tester.analogous(6, 30);
colors = tester.monochromatic();
colors = tester.monochromatic(10);
colors = tester.splitcomplement();
colors = tester.triad();
colors = tester.tetrad();
tester = tester.complement();
tinycolor/tinycolor.d.ts
Vendored
+371
View File
@@ -0,0 +1,371 @@
// Type definitions for tinycolor v1.1.1
// Project: https://github.com/bgrins/TinyColor
// Definitions by: Mordechai Zuber <https://github.com/M-Zuber>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
declare var tinycolor: tinycolor;
interface tinycolor {
/**
* Create a tinycolor instance of the color named.
*
* @param color - the color as a string to create an instance for.
*/
(color: string): tinycolorInstance;
/**
* Create a tinycolor instance with the given RGB values.
*
* @param color - the rgb values to apply to the new instance.
*/
(color: ColorFormats.RGB): tinycolorInstance;
/**
* Create a tinycolor instance with the given RGBA values.
*
* @param color - the rgba values to apply to the new instance.
*/
(color: ColorFormats.RGBA): tinycolorInstance;
/**
* Create a tinycolor instance with the given HSL values.
*
* @param color - the hsl values to apply to the new instance.
*/
(color: ColorFormats.HSL): tinycolorInstance;
/**
* Create a tinycolor instance with the given HSLA values.
*
* @param color - the hsla values to apply to the new instance.
*/
(color: ColorFormats.HSLA): tinycolorInstance;
/**
* Create a tinycolor instance with the given HSV values.
*
* @param color - the hsv values to apply to the new instance.
*/
(color: ColorFormats.HSV): tinycolorInstance;
/**
* Create a tinycolor instance with the given HSVA values.
*
* @param color - the hsva values to apply to the new instance.
*/
(color: ColorFormats.HSVA): tinycolorInstance;
/**
* Create a tinycolor instance based off the relative values.
* Works with any color formats
*
* @param ratio - the relative color/hue values to apply to the new instance.
*/
fromRatio(ratio: any): tinycolorInstance; // any of the interfaces defined in the ColorFormats module.
/**
* Compares the two colors and returns the difference between their brightness and color/hue
*
* @param firstColor - the first color to be used in the comparison.
* @param secondColor - the second color to be used in the comparison.
*/
readability(firstColor: tinycolorInstance, secondColor: tinycolorInstance): Readable.Readable;
/**
* Ensure that foreground and background color combinations provide sufficient contrast.
*
* @param foreColor - the fore color wanted.
* @param backCOlor - the back color wanted.
*/
isReadable(foreColor: tinycolorInstance, backColor: tinycolorInstance): boolean;
/**
* Given a base color and a list of possible foreground or background colors for that base,
* returns the most readable color.
*
* @param color - the base color.
* @param colorsToCompare - array of colors to pick the most readable one from.
*/
mostReadable(color: tinycolorInstance, colorsToCompare: tinycolorInstance[]): tinycolorInstance;
/**/
mix(color1: tinycolorInstance, color2: tinycolorInstance, amount?: number): tinycolorInstance;
/**
* Returns a random color
*/
random(): tinycolorInstance;
/**
* key: hex value
* value: string name ex. hexnames["f00"] --> "red"
*/
hexNames: { [key: string]: string };
/**
* key: 'real' color name
* value: hex value ex. names["red"] --> "f00"
*/
names: { [key: string]: string };
}
interface tinycolorInstance {
/**
* Return an indication whether the color was successfully parsed.
*/
isValid(): boolean;
/**
* Return an indication whether the color's perceived brightness is light.
*/
isLight(): boolean;
/**
* Return an indication whether the color's perceived brightness is dark.
*/
isDark(): boolean;
/**
* Returns the format used to create the tinycolor instance.
*/
getFormat(): string;
/**
* Returns the input passed into the constructer used to create the tinycolor instance.
*/
getOriginalInput(): any; // any of the interfaces in ColorFormats or a string
/**
* Returns the alpha value of the color
*/
getAlpha(): number;
/**
* Returns the perceived brightness of the color, from 0-255.
*/
getBrightness(): number;
/**
* Sets the alpha value on the current color.
*
* @param alpha - The new alpha value. The accepted range is 0-1.
*/
setAlpha(alpha: number): tinycolorInstance;
/**
* Returns the object as a HSVA object.
*/
toHsv(): ColorFormats.HSVA;
/**
* Returns the hsva values interpolated into a string with the following format:
* "hsva(xxx, xxx, xxx, xx)".
*/
toHsvString(): string;
/**
* Returns the object as a HSLA object.
*/
toHsl(): ColorFormats.HSLA;
/**
* Returns the hsla values interpolated into a string with the following format:
* "hsla(xxx, xxx, xxx, xx)".
*/
toHslString(): string;
/**
* Returns the hex value of the color.
*/
toHex(): string;
/**
* Returns the hex value of the color -with a # appened.
*/
toHexString(): string;
/**
* Returns the hex 8 value of the color.
*/
toHex8(): string;
/**
* Returns the hex 8 value of the color -with a # appened.
*/
toHex8String(): string;
/**
* Returns the object as a RGBA object.
*/
toRgb(): ColorFormats.RGBA;
/**
* Returns the RGBA values interpolated into a string with the following format:
* "RGBA(xxx, xxx, xxx, xx)".
*/
toRgbString(): string;
/**
* Returns the object as a RGBA object.
*/
toPercentageRgb(): ColorFormats.RGBA;
/**
* Returns the RGBA relative values interpolated into a string with the following format:
* "RGBA(xxx, xxx, xxx, xx)".
*/
toPercentageRgbString(): string;
/**
* The 'real' name of the color -if there is one.
*/
toName(): string;
/**
* Returns the color represented as a Microsoft filter for use in old versions of IE.
*/
toFilter(): string;
/**
* String representation of the color.
*
* @param format - The format to be used when displaying the string representation.
* The accepted values are: "rgb", "prgb", "hex6", "hex3", "hex8", "name", "hsl", "hsv".
*/
toString(format?: string): string;
/**
* Lighten the color a given amount. Providing 100 will always return white.
*
* @param amount - The amount to lighten by. The valid range is 0 to 100.
* Default value: 10.
*/
lighten(amount?: number): tinycolorInstance;
/**
* Brighten the color a given amount.
*
* @param amount - The amount to brighten by. The valid range is 0 to 100.
* Default value: 10.
*/
brighten(amount?: number): tinycolorInstance;
/**
* Darken the color a given amount.
* Providing 100 will always return black.
*
* @param amount - The amount to darken by. The valid range is 0 to 100.
* Default value: 10.
*/
darken(amount?: number): tinycolorInstance;
/**
* Desaturate the color a given amount.
* Providing 100 will is the same as calling greyscale.
*
* @param amount - The amount to desaturate by. The valid range is 0 to 100.
* Default value: 10.
*/
desaturate(amount?: number): tinycolorInstance;
/**
* Saturate the color a given amount.
*
* @param amount - The amount to saturate by. The valid range is 0 to 100.
* Default value: 10.
*/
saturate(amount?: number): tinycolorInstance;
/**
* Completely desaturates a color into greyscale.
* Same as calling desaturate(100).
*/
greyscale(): tinycolorInstance;
/**
* Spin the hue a given amount. Calling with 0, 360, or -360 will do nothing.
*
* @param amount - The amount to spin by. The valid range is -360 to 360.
* Default value: 0.
*/
spin(amount?: number): tinycolorInstance;
/**
* Gets an analogous color scheme based off of the current color.
*
* @param results - The amount of results to return.
* Default value: 6.
* @param slices - The amount to slice the input color by.
* Default value: 30.
*/
analogous(results?: number, slices?: number): tinycolorInstance[];
/**
* Gets a monochromatic color scheme based off of the current color.
*
* @param results - The amount of results to return.
* Default value: 6.
*/
monochromatic(results?: number): tinycolorInstance[];
/**
* Gets a split complement color scheme based off of the current color.
*/
splitcomplement(): tinycolorInstance[];
/**
* Gets a triad based off of the current color.
*/
triad(): tinycolorInstance[];
/**
* Gets a tetrad based off of the current color.
*/
tetrad(): tinycolorInstance[];
/**
* Gets the complement of the current color
*/
complement(): tinycolorInstance;
}
declare module Readable {
interface Readable {
brightness: number;
color: number;
}
}
declare module ColorFormats {
interface RGB {
r: number;
g: number;
b: number;
}
interface RGBA extends RGB {
a: number
}
interface HSL {
h: number;
s: number;
l: number;
}
interface HSLA extends HSL {
a: number;
}
interface HSV {
h: number;
s: number;
v: number;
}
interface HSVA extends HSV {
a: number;
}
}