Frontend Helper SliderDirective

← zurück zur Übersicht

SliderDirective

Definition: [SliderDirective](Frontend Interface SliderDirective)
Modul: happyHour.directives.SliderDirective
Dateiname: components/directives/SliderDirective.js
Typ: Angular Direktive
Autor: Markus Thömmes

Abhängigkeiten

ion.Rangeslider

Stellt die eigentliche Sliderfunktionalität bereit.

Funktionsweise

Zunächst wird der Slider auf dem erstellten input-Element initialisiert.

var $input = element.children().eq(0);
$input.ionRangeSlider($scope.options);

Bei jeder Werteänderung wird der neue Wert in die result-Variable auf dem Scope geschrieben. Handelt es sich um einen Doppelslider, so wird zunächst aus dem zusammengefügten String (<unterer Wert>;<oberer Wert>) ein Array erstellt, welches stattdessen an die result-Variable gebunden wird.

$input.on('change', function() {
  var value = $input.val();
  if($scope.options.type === 'double') {
    value = value.split(';');
  }
  $scope.$apply(function() {
    $scope.result = value;
  });
});

In diesem Codeblock steckt des Weiteren eine Typkonvertierung der vom Slider erzeugten Werte (standardmässig werden hier nur Strings zurückgegeben). Arrays (werden bei einem Doppelslider zurückgegeben) werden gesondert behandelt und die Werte werden soweit möglich in eine Zahl umgewandelt. Dies geschieht über die Kurzform (+String)

if(_.isArray(value)) {
  value = _.map(value, function(val) {
    if(!_.isNaN(+val)) {
      return +val;
    }
    return val;
  });
}
else {
  if(!_.isNaN(+value)) {
    value = +value;
  }
}

Für echtes Two-Way-Binding, wird die result-Variable auf Änderungen beobachtet und der Slider entsprechend angepasst (dient auch als initiales Setzen der Positionen).

$scope.$watch('result', function() { 
  if($scope.result !== undefined) {
    if($scope.options.type === 'double') {
      var from = $scope.result[0];
      var to = $scope.result[1];

      slider.update({from: from, to: to});
    }
    else {
      var def = $scope.result;

      slider.update({from: def});
    }
  }
});