@aquera/nile-elements 0.1.57-beta-1.6 → 0.1.57-beta-1.8

package/src/nile-slider/utils/nile-slider.utils.ts

@@ -1,136 +0,0 @@
-import NileSlider from '../nile-slider';
-import { NileSliderEvents } from '../types/nile-slider.enums';
-
-export const getClampedPercent = (
-  rect: DOMRect,
-  x: number,
-): number => {
-  const clampedX = Math.max(0, Math.min(x, rect.width)); 
-  const percent = (clampedX / rect.width) * 100;
-  return percent;
-};
-
-export const percentToValue = (percent: number, nileSlider: NileSlider): number => {
-  const value = nileSlider.minValue + (percent / 100) * (nileSlider.maxValue - nileSlider.minValue);
-  if(nileSlider.maxValue - nileSlider.minValue < 1) {
-    return parseFloat(value.toFixed(2));
-  } else {
-    return Math.floor(value);
-  }
-};
-
-export const valueToPercent = (value: number, nileSlider: NileSlider): number => {
-  return ((value - nileSlider.minValue) / (nileSlider.maxValue - nileSlider.minValue)) * 100;
-};
-
-export const handleSingleSlider = (
-  e: MouseEvent,
-  rect: DOMRect,
-  nileSlider: NileSlider
-): void => {
-  const x = e.clientX - rect.left;
-  const percent = getClampedPercent(rect, x);
-  nileSlider.value = percentToValue(percent, nileSlider);
-  nileSlider.emit(NileSliderEvents.NILE_CHANGE, { value: nileSlider.value });
-  nileSlider.buttonOne.style.left = `${percent}%`;
-  nileSlider.completed.style.width = `${percent}%`;
-};
-
-export const handleRangeOne = (
-  e: MouseEvent,
-  rect: DOMRect,
-  nileSlider: NileSlider
-): void => {
-  const x = e.clientX - rect.left;
-  const percent = getClampedPercent(rect, x);
-  nileSlider.rangeOneValue = percentToValue(percent, nileSlider);
-  nileSlider.rangeOneValue = Math.min(nileSlider.rangeOneValue, nileSlider.rangeTwoValue);
-  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {
-    value: nileSlider.rangeOneValue,
-  });
-  if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {
-    nileSlider.buttonOne.style.left = `${percent}%`;
-  }
-};
-
-export const handleRangeTwo = (
-  e: MouseEvent,
-  rect: DOMRect,
-  nileSlider: NileSlider
-): void => {
-  const x = e.clientX - rect.left;
-  const percent = getClampedPercent(rect, x);
-  nileSlider.rangeTwoValue = percentToValue(percent, nileSlider);
-  nileSlider.rangeTwoValue = Math.max(nileSlider.rangeTwoValue, nileSlider.rangeOneValue);
-  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {
-    value: nileSlider.rangeTwoValue,
-  });
-
-  if (nileSlider.rangeTwoValue > nileSlider.rangeOneValue) {
-    nileSlider.buttonTwo.style.left = `${percent}%`;
-  }
-};
-
-export const getHtmlElements = (nileSlider: NileSlider) => {
-  nileSlider.range = nileSlider.renderRoot.querySelector('.range') as HTMLElement;
-  nileSlider.buttonOne = nileSlider.renderRoot.querySelector('.range-button') as HTMLElement;
-  nileSlider.buttonTwo = nileSlider.renderRoot.querySelector('.range-button-two') as HTMLElement;
-  nileSlider.completed = nileSlider.renderRoot.querySelector('.range-completed') as HTMLElement;
-
-  nileSlider.range.addEventListener('mousedown', nileSlider.onMouseDown);
-
-  nileSlider.buttonOne?.addEventListener('mousedown', () => {
-    nileSlider.activeThumb = 'one';
-    addMoveListeners(nileSlider);
-  });
-
-  nileSlider.buttonTwo?.addEventListener('mousedown', () => {
-    nileSlider.activeThumb = 'two';
-    addMoveListeners(nileSlider);
-  });
-};
-
-export const addMoveListeners = (nileSlider: NileSlider): void => {
-  window.addEventListener('mousemove', nileSlider.onMouseMove);
-  window.addEventListener('mouseup', nileSlider.onMouseUp);
-};
-
-export const removeMoveListeners = (nileSlider: NileSlider): void => {
-  window.removeEventListener('mousemove', nileSlider.onMouseMove);
-  window.removeEventListener('mouseup', nileSlider.onMouseUp);
-};
-
-export const handleTwoThumbClick = (
-  value: number,
-  nileSlider: NileSlider
-): void => {
-  const distToOne = Math.abs(value - nileSlider.rangeOneValue);
-  const distToTwo = Math.abs(value - nileSlider.rangeTwoValue);
-
-  if (distToOne <= distToTwo) {
-    const clamped = Math.min(value, nileSlider.rangeTwoValue);
-    nileSlider.rangeOneValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);
-  } else {
-    const clamped = Math.max(value, nileSlider.rangeOneValue);
-    nileSlider.rangeTwoValue = nileSlider.checkValueValidity(clamped, nileSlider.minValue, nileSlider.maxValue);
-  }  
-
-  const percentOne = valueToPercent(nileSlider.rangeOneValue, nileSlider);
-  const percentTwo = valueToPercent(nileSlider.rangeTwoValue, nileSlider);
-
-  nileSlider.buttonOne.style.left = `${percentOne}%`;
-  nileSlider.buttonTwo.style.left = `${percentTwo}%`;
-
-  const left = Math.min(percentOne, percentTwo);
-  const width = Math.abs(percentTwo - percentOne);
-
-  nileSlider.completed.style.left = `${left}%`;
-  nileSlider.completed.style.width = `${width}%`;
-
-  nileSlider.emit(NileSliderEvents.NILE_BUTTON_FIRST_CHANGE, {
-    value: nileSlider.rangeOneValue,
-  });
-  nileSlider.emit(NileSliderEvents.NILE_BUTTON_LAST_CHANGE, {
-    value: nileSlider.rangeTwoValue,
-  });
-};