GDB-10680 - fix the scroll on the class hierarchy slider (#1517)

Ontotext-AD · Aug 23, 2024 · 0ff5fc4 · 0ff5fc4
1 parent 0a3c7ed
commit 0ff5fc4
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 32 deletions.
diff --git a/src/js/angular/graphexplore/controllers/rdf-class-hierarchy.controller.js b/src/js/angular/graphexplore/controllers/rdf-class-hierarchy.controller.js
@@ -222,43 +222,42 @@ function RdfClassHierarchyCtlr($scope, $rootScope, $location, $repositories, $li
 
  $timeout(function () {
  $scope.$broadcast('reCalcViewDimensions');
- }, 200);
 
- // set this before the slider is moved by the user as we need it
- setNewCurrentSliderValue();
+  const sliderElement = document.getElementById('rzslider');
+  let lastTimeWheel = 0;
 
- // Modify the slider with the mouse wheel
- let lastTimeWheel = 0;
- $('rzslider').on('wheel', function (e) {
- e.preventDefault();
- e.stopPropagation();
+ sliderElement.addEventListener('wheel', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
 
- // at least 100ms must have passed since last time we updated
- const now = new Date().getTime();
- if (now - lastTimeWheel > 100) {
- lastTimeWheel = now;
- } else {
- return;
- }
+  // at least 100ms must have passed since last time we updated
+  const now = new Date().getTime();
+  if (now - lastTimeWheel > 100) {
+  lastTimeWheel = now;
+  } else {
+  return;
+  }
 
- e = e.originalEvent;
+ let newValue = $scope.classCountSlider.value;
+ const stepSize = $scope.classCountSlider.options.step || 1;
+ if (e.deltaY <= -1) {
+ newValue += stepSize;
+ } else if (e.deltaY >= 1) {
+ newValue -= stepSize;
+ }
 
- let newValue = $scope.classCountSlider.value;
- if (e.deltaY <= -1) {
- newValue += 1;
- } else if (e.deltaY >= 1) {
- newValue -= 1;
- }
+ newValue = Math.max($scope.classCountSlider.options.floor, Math.min($scope.classCountSlider.options.ceil, newValue));
 
- if (newValue !== $scope.classCountSlider.value
- && newValue >= $scope.classCountSlider.options.floor
- && newValue <= $scope.classCountSlider.options.ceil) {
- $scope.$apply(function () {
- $scope.classCountSlider.value = newValue;
- $timeout(setNewCurrentSliderValue, 100, true);
- });
- }
- });
+ if (newValue !== $scope.classCountSlider.value) {
+ $scope.$apply(function () {
+ $scope.classCountSlider.value = newValue;
+ $timeout(setNewCurrentSliderValue, 100, true);
+ });
+ }
+ });
+ }, 200);
+
+ setNewCurrentSliderValue();
  }
 
  function setNewCurrentSliderValue() {

diff --git a/src/pages/rdfClassHierarchyInfo.html b/src/pages/rdfClassHierarchyInfo.html
@@ -102,7 +102,8 @@ <h1>
  <span class="icon-info text-tertiary"></span>
  </span>
  </p>
- <rzslider rz-slider-model="classCountSlider.value"
+ <rzslider id="rzslider"
+ rz-slider-model="classCountSlider.value"
  rz-slider-options="classCountSlider.options"
  ng-hide="isSystemRepository()"></rzslider>
  </div>