diff --git a/types/bootstrap-slider/bootstrap-slider-tests.ts b/types/bootstrap-slider/bootstrap-slider-tests.ts index 0f5af284ea..8b59a25a36 100644 --- a/types/bootstrap-slider/bootstrap-slider-tests.ts +++ b/types/bootstrap-slider/bootstrap-slider-tests.ts @@ -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(slideEvt.value); + $('#ex6').slider(); + $('#ex6').on('slide', (slideEvt) => { + $('#ex6SliderVal').text( 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); + } }); diff --git a/types/bootstrap-slider/index.d.ts b/types/bootstrap-slider/index.d.ts index f2fc21c9df..557c7aa5ad 100644 --- a/types/bootstrap-slider/index.d.ts +++ b/types/bootstrap-slider/index.d.ts @@ -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 +// Leonard Thieu // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.3 + +/// 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; + bootstrapSlider: SliderPlugin; + + on(event: 'slide', handler: (slideEvt: SliderEvent) => false | void): this; +} + +interface SliderPlugin { + (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; } diff --git a/types/bootstrap-slider/tsconfig.json b/types/bootstrap-slider/tsconfig.json index f5e65153f5..a793a1d164 100644 --- a/types/bootstrap-slider/tsconfig.json +++ b/types/bootstrap-slider/tsconfig.json @@ -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 diff --git a/types/bootstrap-slider/tslint.json b/types/bootstrap-slider/tslint.json new file mode 100644 index 0000000000..f93cf8562a --- /dev/null +++ b/types/bootstrap-slider/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +}