Frontend Helper BarSliderDirective

← zurück zur Übersicht

BarPickerDirective

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

Abhängigkeiten

keine

Funktionsweise

Der Slider basiert auf einem simplen HTML-Konstrukt, dass eine Liste an Elementen über einen in seiner Breite fixierten Viewport hinauswachsen lässt und so die Illusion einer "slidebaren" Liste erzeugt.

Auf das "überbreite" Element werden die benötigten Events gebunden (Swipes für das Navigieren, Klick für das Bestätigen der Auswahl).

<ul ng-swipe-left="nextSlide()" ng-swipe-right="previousSlide()" ng-click="slideChosen()">

Die gebundenen Funktionen beschränken sich auf das simple Setzen von Variablen. Die Navigationsfunktionen zählen hierbei einen Zähler hoch- bzw. runter und sorgen dafür, dass dieser nicht über-/unterläuft.

$scope.previousSlide = function() {
  if($scope.chosenSlide > 0) {
    $scope.chosenSlide--;
  }
};

$scope.nextSlide = function() {
  if($scope.chosenSlide < $scope.bars.length-1) {
    $scope.chosenSlide++;
  }
};

Die Auswahlfunktion hingegen setzt die result-Variable auf die ausgewählte Bar, was diese aufgrund der Zweiwegebindung für den Direktivennutzer zur Verfügung stellt.

$scope.slideChosen = function() {
  $scope.result = $scope.bars[$scope.chosenSlide];
};

Das Slidergefühl wird erzeugt, indem die Liste der Elemente durch die Navigationsfunktionen verschoben wird. Der hier verarbeitete Zähler wird mit der Breite der Listenelemente multipliziert und die Liste um diese Länge nach links (negativ) verschoben.

style="left:-chosenSlide*<elementBreite>;"