@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
115 lines (114 loc) • 4.49 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { calculateFixedTrackSize, calculateTicksCount } from '../sliders-common/sliders-util';
import { subtract } from '../common/math';
import { isPresent } from '../common/utils';
/**
* @hidden
*/
export class SliderModelBase {
props;
wrapper;
track;
renderer;
button;
tickSizes;
constructor(props, wrapper, track, renderer, button) {
this.props = props;
this.wrapper = wrapper;
this.track = track;
this.renderer = renderer;
this.button = button;
this.props = props;
this.wrapper = wrapper;
this.track = track;
this.tickSizes = this.getTickSizes();
}
resizeTrack() {
const orientation = this.props.vertical ? 'height' : 'width';
const altOrientation = this.props.vertical ? 'width' : 'height';
const trackWidth = this.trackWidth();
this.track.parentElement.style[orientation] = `${trackWidth}px`;
this.track.parentElement.style[altOrientation] = '';
}
resizeTicks(ticksContainer, ticks) {
const dimension = this.props.vertical ? "height" : "width";
[...ticks].map((tick, index) => tick.style[dimension] = `${this.tickSizes[index]}px`);
if (this.props.vertical) {
this.adjustPadding(ticksContainer);
}
}
resizeWrapper() {
const dimension = this.props.vertical ? "height" : "width";
const fixedTrackWidth = calculateFixedTrackSize(this.props);
const wrapperParentEl = this.wrapper.parentElement;
if (fixedTrackWidth) {
wrapperParentEl.style[dimension] = "auto";
}
}
trackWidth() {
if (this.props.fixedTickWidth) {
return calculateFixedTrackSize(this.props);
}
const wrapperWidth = this.elementSize(this.wrapper.parentElement);
const trackOffset = this.getTrackOffset();
return wrapperWidth - trackOffset;
}
getTickSizes() {
const { min, max, smallStep } = this.props;
const count = calculateTicksCount(min, max, smallStep);
const trackSize = this.trackWidth();
const distStep = trackSize / subtract(max, min);
const result = [];
let usedSpace = 0;
let endPoint = 0;
for (let i = 0; i < count; i++) {
if (i === 0 || i === count - 1) {
endPoint += (smallStep / 2) * distStep;
}
else {
endPoint += smallStep * distStep;
}
// ensure that the sum of the tick sizes does not exceed the track width
endPoint = +endPoint.toFixed(2) - 0.01;
const size = Math.round(endPoint - usedSpace);
result.push(size);
usedSpace += size;
}
if (usedSpace >= trackSize) {
result[result.length - 1] -= 1;
}
return result;
}
adjustPadding(ticksContainer) {
const totalTickSize = this.tickSizes.reduce((prev, curr) => prev + curr, 0);
const trackWidth = this.trackWidth();
const reminder = trackWidth - totalTickSize;
if (reminder !== 0) {
const padding = reminder + this.elementOffset(this.track);
ticksContainer.style.paddingTop = `${padding}px`;
}
}
elementOffset(element) {
const { vertical } = this.props;
const style = getComputedStyle(element);
return parseInt(vertical ? style.bottom : style.left, 10);
}
elementSize(element) {
const { vertical } = this.props;
return vertical ? element.clientHeight : element.clientWidth;
}
getTrackOffset() {
const showButtons = this.props.buttons && isPresent(this.button);
if (!showButtons) {
return 0;
}
const BUTTONS_COUNT = 2;
const buttonStyles = this.button.nativeElement.getBoundingClientRect();
const wrapperGap = parseInt(window.getComputedStyle(this.wrapper.parentElement).gap);
const buttonSize = this.props.vertical ? buttonStyles?.height : buttonStyles?.width;
return (buttonSize + wrapperGap) * BUTTONS_COUNT;
}
}