From 3384a2abdac60e49fa8372859520679f657657b6 Mon Sep 17 00:00:00 2001 From: Andy Russell Date: Tue, 15 Dec 2020 23:41:28 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Merge=20PR=20#50134=20Update=20b?= =?UTF-8?q?ootstrap-slider=20to=2011.0=20and=20support=20using=20as=20a=20?= =?UTF-8?q?module=20by=20@euclio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * bootstrap-slider: add non-JQuery support * bootstrap-slider: update to 11.0 --- .../bootstrap-slider-tests.ts | 109 ++++++++++++++++++ types/bootstrap-slider/index.d.ts | 27 +++-- 2 files changed, 129 insertions(+), 7 deletions(-) diff --git a/types/bootstrap-slider/bootstrap-slider-tests.ts b/types/bootstrap-slider/bootstrap-slider-tests.ts index d3ffdeedeb..aaef46d508 100644 --- a/types/bootstrap-slider/bootstrap-slider-tests.ts +++ b/types/bootstrap-slider/bootstrap-slider-tests.ts @@ -1,4 +1,5 @@ import $ = require('jquery'); +import Slider = require('bootstrap-slider'); $(() => { // examples from http://seiyria.github.io/bootstrap-slider/ @@ -8,8 +9,14 @@ $(() => { return 'Current value: ' + value; } }); + new Slider('#ex1', { + formatter(value) { + return 'Current value: ' + value; + } + }); $('#ex2').slider({}); + new Slider('#ex2', {}); const RGBChange = () => { $('#RGB').css('background', `rgb(${r.getValue()},${g.getValue()},${b.getValue()})`); @@ -28,50 +35,82 @@ $(() => { $('#ex4').slider({ reversed: true }); + new Slider("#ex4", { + reversed : true + }); $('#ex5').slider(); + let slider = new Slider('#ex5'); $('#destroyEx5Slider').click(() => { $('#ex5').slider('destroy'); + slider.destroy(); }); $('#ex6').slider(); $('#ex6').on('slide', (slideEvt) => { $('#ex6SliderVal').text( slideEvt.value); }); + slider = new Slider("#ex6"); + slider.on("slide", (sliderValue) => { + document.getElementById("ex6SliderVal")!.textContent = sliderValue!.toString(); + }); $('#ex7').slider(); + slider = new Slider("#ex7"); $('#ex7-enabled').click(function() { if (this.checked) { // With JQuery $('#ex7').slider('enable'); + slider.enable(); } else { // With JQuery $('#ex7').slider('disable'); + slider.disable(); } }); $('#ex8').slider({ tooltip: 'always' }); + slider = new Slider("#ex8", { + tooltip: 'always' + }); $('#ex9').slider({ precision: 2, value: 8.115 // Slider will instantiate showing 8.12 due to specified precision }); + slider = new Slider("#ex9", { + precision: 2, + value: 8.115 // Slider will instantiate showing 8.12 due to specified precision + }); $('#ex11').slider({ step: 20000, min: 0, max: 200000 }); + slider = new Slider("#ex11", { + 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] }); + let sliderA = new Slider("#ex12a", { id: "slider12a", min: 0, max: 10, value: 5 }); + let sliderB = new Slider("#ex12b", { id: "slider12b", min: 0, max: 10, range: true, value: [3, 7] }); + const sliderC = new Slider("#ex12c", { id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] }); $('#ex13').slider({ ticks: [0, 100, 200, 300, 400], ticks_labels: ['$0', '$100', '$200', '$300', '$400'], ticks_snap_bounds: 30 }); + slider = new Slider("#ex13", { + ticks: [0, 100, 200, 300, 400], + ticks_labels: ['$0', '$100', '$200', '$300', '$400'], + ticks_snap_bounds: 30 + }); $('#ex14').slider({ ticks: [0, 100, 200, 300, 400], @@ -79,6 +118,12 @@ $(() => { ticks_labels: ['$0', '$100', '$200', '$300', '$400'], ticks_snap_bounds: 30 }); + slider = new Slider("#ex14", { + ticks: [0, 100, 200, 300, 400], + ticks_positions: [0, 30, 70, 90, 100], + ticks_labels: ['$0', '$100', '$200', '$300', '$400'], + ticks_snap_bounds: 30 + }); $('#ex15').slider({ min: 1000, @@ -86,9 +131,17 @@ $(() => { scale: 'logarithmic', step: 10 }); + slider = new Slider('#ex15', { + 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 }); + sliderA = new Slider("#ex16a", { min: 0, max: 10, value: 0, focus: true }); + sliderB = new Slider("#ex16b", { min: 0, max: 10, value: [0, 10], focus: true }); $("#ex17a").slider({ min: 0, @@ -103,6 +156,19 @@ $(() => { orientation: 'vertical', tooltip_position: 'left' }); + sliderA = new Slider("#ex17a", { + min: 0, + max: 10, + value: 0, + tooltip_position: 'bottom' + }); + sliderB = new Slider("#ex17b", { + min: 0, + max: 10, + value: 0, + orientation: 'vertical', + tooltip_position: 'left' + }); $("#ex18a").slider({ min: 0, @@ -116,6 +182,18 @@ $(() => { value: [3, 6], labelledby: ['ex18-label-2a', 'ex18-label-2b'] }); + new Slider("#ex18a", { + min: 0, + max: 10, + value: 5, + labelledby: 'ex18-label-1' + }); + new Slider("#ex18b", { + min: 0, + max: 10, + value: [3, 6], + labelledby: ['ex18-label-2a', 'ex18-label-2b'] + }); $('#ex22').slider({ id: 'slider22', @@ -128,6 +206,17 @@ $(() => { { start: 17, end: 19 }, { start: 17, end: 24 }, { start: -3, end: 19 }]}); + slider = new Slider("#ex22", { + id: 'slider22', + min: 0, + max: 20, + step: 1, + value: 14, + rangeHighlights: [{ start: 2, end: 5, class: "category1" }, + { start: 7, end: 8, class: "category2" }, + { start: 17, end: 19 }, + { start: 17, end: 24 }, + { start: -3, end: 19 }]}); $("#ex23").slider({ ticks: [0, 1, 2, 3, 4], @@ -139,6 +228,26 @@ $(() => { ticks_tooltip: true, step: 0.01 }); + new Slider("#ex23", { + ticks: [0, 1, 2, 3, 4], + ticks_positions: [0, 30, 70, 90, 100], + ticks_snap_bounds: 200, + formatter(value) { + return 'Current value: ' + value; + }, + ticks_tooltip: true, + step: 0.01 + }); + + $("#ex25").slider({ + value: [1, 100], + ticks: [1, 50, 100], + lock_to_ticks: true + }); + + $('#ex26').slider('refresh', { useCurrentValue: true }); + slider = new Slider('#ex26'); + slider.refresh({ useCurrentValue: true }); // examples from https://github.com/seiyria/bootstrap-slider/blob/master/README.md diff --git a/types/bootstrap-slider/index.d.ts b/types/bootstrap-slider/index.d.ts index fe1578b8ca..f7fe80f432 100644 --- a/types/bootstrap-slider/index.d.ts +++ b/types/bootstrap-slider/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for bootstrap-slider.js 9.9 +// Type definitions for bootstrap-slider.js 11.0 // Project: http://github.com/seiyria/bootstrap-slider // Definitions by: Daniel Beckwith // Leonard Thieu @@ -164,13 +164,20 @@ interface SliderOptions { * [{'start':val1, 'end': val2, 'class': 'optionalAdditionalClassName'}]. */ rangeHighlights?: RangeHighlight[]; + /** + * Default: false + * Lock the selection to the values defined in the ticks array. + */ + lock_to_ticks?: boolean; } -interface JQuery { - slider: SliderPlugin; - bootstrapSlider: SliderPlugin; +declare global { + interface JQuery { + slider: SliderPlugin; + bootstrapSlider: SliderPlugin; - on(event: 'slide', handler: (slideEvt: SliderEvent) => false | void): this; + on(event: 'slide', handler: (slideEvt: SliderEvent) => false | void): this; + } } interface SliderPlugin { @@ -190,13 +197,17 @@ interface SliderEvent extends JQuery.Event { value: number | ChangeValue; } +interface RefreshOptions { + useCurrentValue?: boolean; +} + /** * 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) */ declare class Slider { - constructor(selector: string, opts: SliderOptions); + constructor(element: string | HTMLElement, opts?: SliderOptions); /** * Get the current value from the slider @@ -242,7 +253,7 @@ declare class Slider { /** * Refreshes the current slider */ - refresh(): this; + refresh(options?: RefreshOptions): this; /** * When the slider event eventType is triggered, the callback function will be invoked */ @@ -256,3 +267,5 @@ declare class Slider { */ relayout(): this; } + +export = Slider;