vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-08-11 20:40:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #17388 from leonard-thieu/bootstrap-slider

Browse Source 
[bootstrap-slider] Update to target @types/jquery@3
This commit is contained in:
Nathan Shively-Sanders
2017-06-22 16:14:56 -07:00
committed by GitHub
parent 33f2b5c108 dcb7567b09
commit 0e39425c04
4 changed files with 130 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/bootstrap-slider/bootstrap-slider-tests.ts
+91 -64
View File
@@ -1,119 +1,146 @@
import $ = require('jquery');
$(function() {
$(() => {
// examples from http://seiyria.github.io/bootstrap-slider/
$('#ex1').slider({
formatter: function(value) {
formatter(value) {
return 'Current value: ' + value;
}
});
$('#ex2').slider({});
$("#ex2").slider({});
var RGBChange = function() {
$('#RGB').css('background', 'rgb('+r.getValue()+','+g.getValue()+','+b.getValue()+')')
const RGBChange = () => {
$('#RGB').css('background', 'rgb(' + r.getValue() + ',' + g.getValue() + ',' + b.getValue() + ')');
};
var r = $('#R').slider()
.on('slide', RGBChange)
.data('slider');
var g = $('#G').slider()
.on('slide', RGBChange)
.data('slider');
var b = $('#B').slider()
.on('slide', RGBChange)
.data('slider');
const r = $('#R').slider()
.on('slide', RGBChange)
.data('slider');
const g = $('#G').slider()
.on('slide', RGBChange)
.data('slider');
const b = $('#B').slider()
.on('slide', RGBChange)
.data('slider');
$("#ex4").slider({
reversed : true
$('#ex4').slider({
reversed: true
});
$('#ex5').slider();
$("#ex5").slider();
$("#destroyEx5Slider").click(function() {
$("#ex5").slider('destroy');
$('#destroyEx5Slider').click(() => {
$('#ex5').slider('destroy');
});
$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(<number>slideEvt.value);
$('#ex6').slider();
$('#ex6').on('slide', (slideEvt) => {
$('#ex6SliderVal').text(<number> slideEvt.value);
});
$('#ex7').slider();
$("#ex7").slider();
$("#ex7-enabled").click(function() {
if((this as HTMLInputElement).checked) {
$('#ex7-enabled').click(function(this: HTMLInputElement) {
if (this.checked) {
// With JQuery
$("#ex7").slider("enable");
}
else {
$('#ex7').slider('enable');
} else {
// With JQuery
$("#ex7").slider("disable");
$('#ex7').slider('disable');
}
});
$("#ex8").slider({
$('#ex8').slider({
tooltip: 'always'
});
$("#ex9").slider({
$('#ex9').slider({
precision: 2,
value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
});
$('#ex11').slider({ step: 20000, min: 0, max: 200000 });
$('#ex12a').slider({ id: 'slider12a', min: 0, max: 10, value: 5 });
$('#ex12b').slider({ id: 'slider12b', min: 0, max: 10, range: true, value: [3, 7] });
$('#ex12c').slider({ id: 'slider12c', min: 0, max: 10, range: true, value: [3, 7] });
$("#ex11").slider({step: 20000, min: 0, max: 200000});
$("#ex12a").slider({ id: "slider12a", min: 0, max: 10, value: 5 });
$("#ex12b").slider({ id: "slider12b", min: 0, max: 10, range: true, value: [3, 7] });
$("#ex12c").slider({ id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] });
$("#ex13").slider({
$('#ex13').slider({
ticks: [0, 100, 200, 300, 400],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
$("#ex14").slider({
$('#ex14').slider({
ticks: [0, 100, 200, 300, 400],
ticks_positions: [0, 30, 60, 70, 90, 100],
ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
ticks_snap_bounds: 30
});
$("#ex15").slider({
$('#ex15').slider({
min: 1000,
max: 10000000,
scale: 'logarithmic',
step: 10
});
$('#ex16a').slider({ min: 0, max: 10, value: 0, focus: true });
$('#ex16b').slider({ min: 0, max: 10, value: [0, 10], focus: true });
// examples from https://github.com/seiyria/bootstrap-slider/blob/master/README.md
$("#ex16a").slider({ min: 0, max: 10, value: 0, focus: true });
$("#ex16b").slider({ min: 0, max: 10, value: [0, 10], focus: true });
{
// Instantiate a slider
const mySlider = $('input.slider').slider();
// Call a method on the slider
const value = mySlider.slider('getValue');
// For non-getter methods, you can chain together commands
mySlider
.slider('setValue', 5)
.slider('setValue', 7);
}
{ // Instantiate a slider
const mySlider = $('input.slider').bootstrapSlider();
// Call a method on the slider
const value = mySlider.bootstrapSlider('getValue');
// For non-getter methods, you can chain together commands
mySlider
.bootstrapSlider('setValue', 5)
.bootstrapSlider('setValue', 7);
}
{
// Instantiate a slider
const mySlider = $('input.slider').bootstrapSlider();
// Call a method on the slider
const value = mySlider.bootstrapSlider('getValue');
// For non-getter methods, you can chain together commands
mySlider
.bootstrapSlider('setValue', 5)
.bootstrapSlider('setValue', 7);
}
{ // Instantiate a slider
const mySlider = new Slider('input.slider', {
// initial options object
});
// Call a method on the slider
const value = mySlider.getValue();
// For non-getter methods, you can chain together commands
mySlider
.setValue(5)
.setValue(7);
}
});
types/bootstrap-slider/index.d.ts
Vendored
+34 -33
View File
@@ -1,7 +1,11 @@
// Type definitions for bootstrap-slider.js 4.8.3
// Type definitions for bootstrap-slider.js 9.8
// Project: https://github.com/seiyria/bootstrap-slider
// Definitions by: Daniel Beckwith <https://github.com/dbeckwith>
// Leonard Thieu <https://github.com/leonard-thieu>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
/// <reference types="jquery" />
interface SliderOptions {
/**
@@ -38,7 +42,7 @@ interface SliderOptions {
* Default: 5
* initial value. Use array to have a range slider.
*/
value?: number|number[];
value?: number | number[];
/**
* Default: false
* make range slider. Optional if initial value is an array. If initial value is scalar, max will be used for second value.
@@ -79,10 +83,12 @@ interface SliderOptions {
* formatter callback. Return the value wanted to be displayed in the tooltip
* @param val the current value to display
*/
formatter?(val:number): string;
formatter?(val: number): string;
/**
* Default: false
* The natural order is used for the arrow keys. Arrow up select the upper slider value for vertical sliders, arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not. By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value.
* The natural order is used for the arrow keys. Arrow up select the upper slider value for vertical sliders,
* arrow right the righter slider value for a horizontal slider - no matter if the slider was reversed or not.
* By default the arrow keys are oriented by arrow up/right to the higher slider value, arrow down/left to the lower slider value.
*/
natural_arrow_keys?: boolean;
/**
@@ -118,12 +124,19 @@ interface SliderOptions {
}
interface JQuery {
slider: SliderPlugin<this>;
bootstrapSlider: SliderPlugin<this>;
on(event: 'slide', handler: (slideEvt: SliderEvent) => false | void): this;
}
interface SliderPlugin<TJQuery> {
(methodName: string, ...args: any[]): TJQuery;
/**
* Creates a slider from the current element.
* @param options
*/
slider(options?:SliderOptions): JQuery;
slider(methodName:string, ...args:any[]): JQuery;
(options?: SliderOptions): TJQuery;
}
interface ChangeValue {
@@ -131,46 +144,42 @@ interface ChangeValue {
newValue: number;
}
interface JQueryEventObject {
value: number|ChangeValue;
interface SliderEvent extends JQuery.Event {
value: number | ChangeValue;
}
interface SliderStatics {
new (selector: string, opts: SliderOptions): Slider;
prototype: Slider;
}
declare var Slider: SliderStatics;
/**
* This class is actually not used when using the jQuery version of bootstrap-slider
* The method documentation is still here thouh.
* When using jQuery, slider methods like setValue(3, true) have to be called like $slider.slider('setValue', 3, true)
*/
interface Slider extends JQuery {
declare class Slider {
constructor(selector: string, opts: SliderOptions);
/**
* Get the current value from the slider
*/
getValue(): number;
/**
* Set a new value for the slider. If optional triggerSlideEvent parameter is true, 'slide' events will be triggered. If optional triggerChangeEvent parameter is true, 'change' events will be triggered.
* Set a new value for the slider. If optional triggerSlideEvent parameter is true, 'slide' events will be triggered.
* If optional triggerChangeEvent parameter is true, 'change' events will be triggered.
* @param newValue
* @param triggerSlideEvent
* @param triggerChangeEvent
*/
setValue(newValue:number, triggerSlideEvent?:boolean, triggerChangeEvent?:boolean): void;
setValue(newValue: number, triggerSlideEvent?: boolean, triggerChangeEvent?: boolean): this;
/**
* Properly clean up and remove the slider instance
*/
destroy(): void;
destroy(): this;
/**
* Disables the slider and prevents the user from changing the value
*/
disable(): void;
disable(): this;
/**
* Enables the slider
*/
enable(): void;
enable(): this;
/**
* Returns true if enabled, false if disabled
*/
@@ -180,26 +189,18 @@ interface Slider extends JQuery {
* @param attribute
* @param value
*/
setAttribute(attribute:string, value:any): void;
setAttribute(attribute: string, value: any): this;
/**
* Get the slider's attributes
* @param attribute
*/
getAttribute(attribute:string): any;
getAttribute(attribute: string): any;
/**
* Refreshes the current slider
*/
refresh(): void;
refresh(): this;
/**
* Renders the tooltip again, after initialization. Useful in situations when the slider and tooltip are initially hidden.
*/
relayout(): void;
on: {
(eventType:string, callback:(eventObject:JQueryEventObject, ...args:any[]) => any): Slider;
(eventType:string, data:any, callback:(eventObject:JQueryEventObject, ...args:any[]) => any): Slider;
(eventType:string, selector:string, callback:(eventObject:JQueryEventObject, ...eventData:any[]) => any): Slider;
(eventType:string, selector:string, data:any, callback:(eventObject:JQueryEventObject, ...eventData:any[]) => any): Slider;
(eventType:{ [key: string]: any; }, selector?:string, data?:any): Slider;
(eventType:{ [key: string]: any; }, data?:any): Slider;
}
relayout(): this;
}
types/bootstrap-slider/tsconfig.json
+2 -7
View File
@@ -6,17 +6,12 @@
"dom"
],
"noImplicitAny": true,
"noImplicitThis": false,
"strictNullChecks": false,
"noImplicitThis": true,
"strictNullChecks": true,
"baseUrl": "../",
"typeRoots": [
"../"
],
"paths": {
"jquery": [
"jquery/v2"
]
},
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
types/bootstrap-slider/tslint.json
+3
View File
@@ -0,0 +1,3 @@
{
"extends": "dtslint/dt.json"
}