Changing image cycle button behavior

Changing behavior of the image cycle buttons so that they no longer roll over from last to first or vice versa. Instead, there is no wrapping, but there are extra buttons to jump to the first or last picture.
mtlynch · May 12, 2017 · e64d1b6 · e64d1b6
1 parent 7e9142b
commit e64d1b6
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 9 deletions.
diff --git a/app/app.js b/app/app.js
@@ -49,14 +49,20 @@ greenPiThumbApp.controller('DashboardCtrl', function($scope, $http) {
     $scope.currentImage = $scope.images.length - 1;
   });
 
+  $scope.firstImage = function() {
+    $scope.currentImage = 0;
+  };
+
   $scope.previousImage = function() {
-    $scope.currentImage -= 1;
-    if ($scope.currentImage < 0) {
-      $scope.currentImage = $scope.images.length - 1;
-    }
+    $scope.currentImage = Math.max(0, $scope.currentImage - 1);
   };
 
   $scope.nextImage = function() {
-    $scope.currentImage = ($scope.currentImage + 1) % $scope.images.length;
+    $scope.currentImage = Math.min(($scope.currentImage + 1),
+                                   ($scope.images.length - 1));
+  };
+
+  $scope.lastImage = function() {
+    $scope.currentImage = $scope.images.length - 1;
   };
 });
diff --git a/app/app_test.js b/app/app_test.js
@@ -72,19 +72,36 @@ describe('greenPiThumbApp controller', function() {
     expect(mockScope.currentImage).toEqual(2);
   });
 
+  it('jumps to end-boundary image', function() {
+    mockScope.firstImage();
+    expect(mockScope.currentImage).toEqual(0);
+    mockScope.firstImage();
+    expect(mockScope.currentImage).toEqual(0);
+    mockScope.lastImage();
+    expect(mockScope.currentImage).toEqual(2);
+    mockScope.lastImage();
+    expect(mockScope.currentImage).toEqual(2);
+  });
+
   it('cycles images forward correctly', function() {
-    mockScope.nextImage();
+    mockScope.firstImage();
     expect(mockScope.currentImage).toEqual(0);
     mockScope.nextImage();
     expect(mockScope.currentImage).toEqual(1);
+    mockScope.nextImage();
+    expect(mockScope.currentImage).toEqual(2);
+    // Can't go past the end.
+    mockScope.nextImage();
+    expect(mockScope.currentImage).toEqual(2);
   });
 
   it('cycles images backward correctly', function() {
     mockScope.previousImage();
     expect(mockScope.currentImage).toEqual(1);
     mockScope.previousImage();
     expect(mockScope.currentImage).toEqual(0);
+    // Can't go before first image.
     mockScope.previousImage();
-    expect(mockScope.currentImage).toEqual(2);
+    expect(mockScope.currentImage).toEqual(0);
   });
 });
diff --git a/app/index.html b/app/index.html
@@ -62,8 +62,22 @@ <h1>Current Readings</h1>
         <p>
           {{ images[currentImage].timestamp | date: 'yyyy-MM-dd h:mm:ss a' }}<br />
           ({{ currentImage + 1 }} of {{ images.length }})</p>
-        <button class="btn btn-default" ng-click="previousImage()">Previous</button>
-        <button class="btn btn-default" ng-click="nextImage()">Next</button>
+        <button
+          class="btn btn-default"
+          ng-click="firstImage()"
+          ng-disabled="currentImage == 0">|&lt;</button>
+        <button
+          class="btn btn-default"
+          ng-click="previousImage()"
+          ng-disabled="currentImage == 0">&lt;</button>
+        <button
+          class="btn btn-default"
+          ng-click="nextImage()"
+          ng-disabled="currentImage == images.length - 1">&gt;</button>
+        <button
+          class="btn btn-default"
+          ng-click="lastImage()"
+          ng-disabled="currentImage == images.length - 1">&gt;|</button>
       </div>
     </div>
     <div class="row" id="history">