Lower the opacity of previous/next button in the annotation area if t…

…he given annotation ist the first/last of the array.
MaMpf-HD · Sep 27, 2023 · 8334b75 · 8334b75
1 parent ec4fab0
commit 8334b75
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/app/assets/javascripts/thyme/annotations/annotation.js b/app/assets/javascripts/thyme/annotations/annotation.js
@@ -124,4 +124,20 @@ class Annotation {
     }
   }
 
+  /*
+   * Returns true if the given annotation is the last annotation
+   * in thymeAttributes.annotations
+   */
+  isFirst() {
+    return this == thymeAttributes.annotations[0];
+  }
+
+  /*
+   * Returns true if the given annotation is the last annotation
+   * in thymeAttributes.annotations
+   */
+  isLast() {
+    return this == thymeAttributes.annotations[thymeAttributes.annotations.length - 1];
+  }
+
 }
diff --git a/app/assets/javascripts/thyme/annotations/annotation_area.js b/app/assets/javascripts/thyme/annotations/annotation_area.js
@@ -3,6 +3,8 @@
 */
 class AnnotationArea {
 
+  static DISABLED_BUTTON_OPACITY = 0.2;
+
   /*
     fancyStyle = If true, all buttons are shown, if false,
                  only previous, goto and next are shown.
@@ -114,6 +116,11 @@ class AnnotationArea {
     this.previousButton.on('click', function() {
       area.update(area.previousValidAnnotation(annotation));
     });
+    if (annotation.isFirst()) {
+      this.previousButton.css('opacity', AnnotationArea.DISABLED_BUTTON_OPACITY);
+    } else {
+      this.previousButton.css('opacity', 1);
+    }
   }
 
   #updateNextButton(annotation) {
@@ -123,6 +130,11 @@ class AnnotationArea {
     this.nextButton.on('click', function() {
       area.update(area.nextValidAnnotation(annotation));
     });
+    if (annotation.isLast()) {
+      this.nextButton.css('opacity', AnnotationArea.DISABLED_BUTTON_OPACITY);
+    } else {
+      this.nextButton.css('opacity', 1);
+    }
   }
 
   #updateGotoButton(annotation) {