flip/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/FlipsideCrypto/DefinitelyTyped.git synced 2026-02-06 10:56:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added new definition for Farbtastic jQuery plugin

Browse Source 
Added definition for Farbtastic jQuery color wheel plugin with accompanying tests file.
This commit is contained in:
Matt Brooks 2015-05-26 16:51:49 +01:00
parent f23cd55e31
commit 010acb155e
2 changed files with 140 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
farbtastic/farbtastic-tests.ts Normal file
View File

@ -0,0 +1,100 @@
/// <reference path="farbtastic.d.ts" />
var callback = () => {};
var domNode = document.createElement("div");
// Basic usage
// Can add a ready() handler to the document which initializes the color picker and links it to the text field
$(document).ready(function() {
$("#colorpicker").farbtastic("#color");
});
// Advanced Usage: jQuery Method
// Create color pickers in the selected objects
$("#colorpicker").farbtastic();
// Optional callback using a callback function
$("#colorpicker").farbtastic(callback);
$("#colourpicker").farbtastic(function (color) {
console.log(typeof color === "string");
});
// Optional callback using a DOM node
$("#colorpicker").farbtastic(domNode);
// Optional callback using a jQuery object
$("#colorpicker").farbtastic($("#color"));
// Optional callback using a jQuery selector
$("#colorpicker").farbtastic("#color");
// Advanced Usage: Object
// Can invoke method for returning Farbtastic object instead of a jQuery object
$.farbtastic(domNode);
$.farbtastic($("#color"));
$.farbtastic("#color");
// Optional callback using a callback function
$.farbtastic(domNode, callback);
$.farbtastic($("#color"), callback);
$.farbtastic("#color", callback);
// Optional callback using a DOM node
$.farbtastic(domNode, domNode);
$.farbtastic($("#color"), domNode);
$.farbtastic("#color", domNode);
// Optional callback using a jQuery object
$.farbtastic(domNode, $("#color"));
$.farbtastic($("#color"), $("#color"));
$.farbtastic("#color", $("#color"));
// Optional callback using a jQuery selector
$.farbtastic(domNode, "#color");
$.farbtastic($("#color"), "#color");
$.farbtastic("#color", "#color");
// Advanced Usage: Options
$("#colorpicker").farbtastic({
callback: (color) => {
console.log(color);
}
});
$.farbtastic(domNode, {
width: 500
});
$.farbtastic($("#color"), {
wheelWidth: 300
});
$.farbtastic("#color", {});
// Advanced Usage: Methods
$.farbtastic("#colorpicker").linkTo(callback);
$.farbtastic("#colorpicker").linkTo(domNode);
$.farbtastic("#colorpicker").linkTo("#color");
$.farbtastic("#colorpicker").linkTo($("#color"));
$.farbtastic("#colorpicker").setColor("#aabbcc");
$.farbtastic("#colorpicker").setColor([0.1, 0.2, 0.3]);
$.farbtastic("#colorpicker").setHSL([0.1, 0.2, 0.3]);
// Advanced Usage: Properties
$.farbtastic("#colorpicker").color === "#aabbcc";
$.farbtastic("#colorpicker").hsl === [0.1, 0.2, 0.3];
$.farbtastic("#colorpicker").linked === $("#colorpicker");
$.farbtastic("#colorpicker").linked === callback;
// Can chain jQuery methods
$("#colorpicker")
.farbtastic()
.addClass("color-picker");
// Can chain Farbtastic methods
$.farbtastic("#colorpicker")
.linkTo(domNode)
.setColor("#000000")
.setHSL([0, 0, 0]);

40
farbtastic/farbtastic.d.ts vendored Normal file
View File

@ -0,0 +1,40 @@
// Type definitions for Farbtastic: jQuery Color Wheel v2.0.0-alpha.1
// Project: http://mattfarina.github.io/farbtastic/
// Definitions by: Matt Brooks <https://github.com/EnableSoftware>
// Definitions: https://github.com/borisyankov/DefinitelyTyped
/// <reference path="../jquery/jquery.d.ts" />
declare module JQueryFarbtastic {
type Placeholder = string | Element | JQuery;
type CallbackFunction = (color: string) => any;
type Callback = CallbackFunction | Placeholder;
interface Options {
callback?: Callback;
width?: number;
wheelWidth?: number;
}
interface Farbtastic {
linked: CallbackFunction | JQuery;
color: string;
hsl: number[];
linkTo(callback: Callback): Farbtastic;
setColor(color: string | number[]): Farbtastic;
setHSL(hsl: number[]): Farbtastic;
}
}
interface JQueryStatic {
farbtastic(placeholder: JQueryFarbtastic.Placeholder, callback: JQueryFarbtastic.Callback): JQueryFarbtastic.Farbtastic;
farbtastic(placeholder: JQueryFarbtastic.Placeholder, options: JQueryFarbtastic.Options): JQueryFarbtastic.Farbtastic;
farbtastic(placeholder: JQueryFarbtastic.Placeholder): JQueryFarbtastic.Farbtastic;
}
interface JQuery {
farbtastic(callback: JQueryFarbtastic.Callback): JQuery;
farbtastic(options: JQueryFarbtastic.Options): JQuery;
farbtastic(): JQuery;
}