From 9895b860152c503b429ee1365bf25e8e268008cb Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Fri, 21 Oct 2016 17:21:23 +0200 Subject: [PATCH] fix(range): fixes when step size is bigger than range fixes #8830 fixes #8802 --- src/components/range/range.scss | 4 ++ src/components/range/range.ts | 10 ++-- src/components/range/test/basic/page1.html | 6 ++ src/components/range/test/range.spec.ts | 69 ++++++++++++++++++++++ src/util/haptic.ts | 8 ++- src/util/mock-providers.ts | 5 ++ 6 files changed, 95 insertions(+), 7 deletions(-) create mode 100644 src/components/range/test/range.spec.ts diff --git a/src/components/range/range.scss b/src/components/range/range.scss index 7ef4919305..9c85ca45f0 100644 --- a/src/components/range/range.scss +++ b/src/components/range/range.scss @@ -4,10 +4,14 @@ // -------------------------------------------------- .item-range .item-inner { + width: 100%; + overflow: visible; } .item-range .input-wrapper { + width: 100%; + overflow: visible; flex-direction: column; diff --git a/src/components/range/range.ts b/src/components/range/range.ts index 4aa05e735a..65a471c216 100644 --- a/src/components/range/range.ts +++ b/src/components/range/range.ts @@ -602,16 +602,18 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O * @private */ ratioToValue(ratio: number) { - ratio = Math.round(((this._max - this._min) * ratio) + this._min); - return Math.round(ratio / this._step) * this._step; + ratio = Math.round(((this._max - this._min) * ratio)); + ratio = Math.round(ratio / this._step) * this._step + this._min; + return clamp(this._min, ratio, this._max); } /** * @private */ valueToRatio(value: number) { - value = Math.round(clamp(this._min, value, this._max) / this._step) * this._step; - return (value - this._min) / (this._max - this._min); + value = Math.round((value - this._min) / this._step) * this._step; + value = value / (this._max - this._min); + return clamp(0, value, 1); } /** diff --git a/src/components/range/test/basic/page1.html b/src/components/range/test/basic/page1.html index c2304d2c95..40de99d65a 100644 --- a/src/components/range/test/basic/page1.html +++ b/src/components/range/test/basic/page1.html @@ -18,6 +18,12 @@ + + + step="5199" max="5199" min="2499" snaps="true" + + + diff --git a/src/components/range/test/range.spec.ts b/src/components/range/test/range.spec.ts new file mode 100644 index 0000000000..0265c70776 --- /dev/null +++ b/src/components/range/test/range.spec.ts @@ -0,0 +1,69 @@ +import { Range } from '../range'; +import { mockConfig, mockRenderer, mockElementRef, mockHaptic } from '../../../util/mock-providers'; +import { Form } from '../../../util/form'; + + +describe('Range', () => { + describe('valueToRatio', () => { + it('step=1', () => { + let range = createRange(); + range.max = 5000; + range.min = 2490; + range.step = 1; + range.snaps = true; + expect(range.valueToRatio(5000)).toEqual(1); + expect(range.valueToRatio(5100)).toEqual(1); + expect(range.valueToRatio(2490)).toEqual(0); + expect(range.valueToRatio(2000)).toEqual(0); + + let middle = (range.max - range.min) / 2 + range.min; + expect(range.valueToRatio(middle)).toEqual(0.5); + }); + + it('step>range', () => { + let range = createRange(); + range.max = 5000; + range.min = 2490; + range.step = 5900; + range.snaps = true; + expect(range.valueToRatio(7000)).toEqual(1); + expect(range.valueToRatio(5000)).toEqual(0); + expect(range.valueToRatio(2490)).toEqual(0); + expect(range.valueToRatio(2000)).toEqual(0); + }); + }); + + describe('ratioToValue', () => { + it('step=1', () => { + let range = createRange(); + range.max = 5000; + range.min = 2490; + range.step = 1; + range.snaps = true; + expect(range.ratioToValue(0)).toEqual(2490); + expect(range.ratioToValue(1)).toEqual(5000); + + let middle = (range.max - range.min) / 2 + range.min; + expect(range.ratioToValue(0.5)).toEqual(middle); + }); + + it('step>range', () => { + let range = createRange(); + range.max = 5000; + range.min = 2490; + range.step = 1; + expect(range.ratioToValue(0)).toEqual(2490); + expect(range.ratioToValue(1)).toEqual(5000); + + let middle = (range.max - range.min) / 2 + range.min; + expect(range.ratioToValue(0.5)).toEqual(middle); + }); + }); + +}); + + +function createRange(): Range { + let form = new Form(); + return new Range(form, mockHaptic(), null, mockConfig(), mockElementRef(), mockRenderer()); +} diff --git a/src/util/haptic.ts b/src/util/haptic.ts index d1f8d9f940..3f9ae97c1b 100644 --- a/src/util/haptic.ts +++ b/src/util/haptic.ts @@ -33,9 +33,11 @@ export class Haptic { plugin: any; constructor(platform: Platform) { - platform.ready().then(() => { - this.plugin = window.TapticEngine; - }); + if (platform) { + platform.ready().then(() => { + this.plugin = window.TapticEngine; + }); + } } /** diff --git a/src/util/mock-providers.ts b/src/util/mock-providers.ts index af0c83d97b..6e5d3f9bf4 100644 --- a/src/util/mock-providers.ts +++ b/src/util/mock-providers.ts @@ -22,6 +22,7 @@ import { UrlSerializer } from '../navigation/url-serializer'; import { ViewController } from '../navigation/view-controller'; import { NavControllerBase } from '../navigation/nav-controller-base'; +import { Haptic } from './haptic'; export const mockConfig = function(config?: any, url: string = '/', platform?: Platform) { const c = new Config(); @@ -397,6 +398,10 @@ export const mockDeepLinkConfig = function(links?: any[]): DeepLinkConfig { }; }; +export const mockHaptic = function (): Haptic { + return new Haptic(null); +} + export class MockView {} export class MockView1 {} export class MockView2 {}