From 1b75d828d8fd380cc1ec879ab9c4b08cc8f15daf Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Mon, 14 Sep 2020 12:40:15 -0700
Subject: [PATCH] [Imagery Plugin] Prev/Next functionality (#3282)

* Prev/next buttons for #3209

- Stubbed in buttons to ImageryViewLayout.vue;
- Initial CSS classes stubbed in;

* Prev/next buttons for #3209

- Significant additions to cArrowButtons mixin;
- local-controls classes added to markup;

* WIP inital changes for adding arrows

* adding arrow functionality to imagery plugin

* catching one more edge case for disabling prev button

* lint fixes

Co-authored-by: charlesh88 <charlesh88@gmail.com>
Co-authored-by: Nikhil <nikhil.k.mandlik@nasa.gov>
---
 .../imagery/components/ImageryViewLayout.vue  | 86 +++++++++++++++----
 .../components/imagery-view-layout.scss       | 25 ++++++
 src/styles/_mixins.scss                       | 63 +++++++++++++-
 3 files changed, 157 insertions(+), 17 deletions(-)

diff --git a/src/plugins/imagery/components/ImageryViewLayout.vue b/src/plugins/imagery/components/ImageryViewLayout.vue
index 9eb6356aad..4e8aed2e70 100644
--- a/src/plugins/imagery/components/ImageryViewLayout.vue
+++ b/src/plugins/imagery/components/ImageryViewLayout.vue
@@ -22,19 +22,32 @@
                 ></a>
             </span>
         </div>
-        <div class="main-image s-image-main c-imagery__main-image"
+        <div class="main-image s-image-main c-imagery__main-image has-local-controls"
              :class="{'paused unnsynced': paused(),'stale':false }"
              :style="{'background-image': getImageUrl() ? `url(${getImageUrl()})` : 'none',
                       'filter': `brightness(${filters.brightness}%) contrast(${filters.contrast}%)`}"
         >
+            <div class="c-local-controls c-local-controls--show-on-hover c-imagery__prev-next-buttons">
+                <button class="c-nav c-nav--prev"
+                        title="Previous image"
+                        :disabled="isPrevDisabled()"
+                        @click="prevImage()"
+                ></button>
+                <button class="c-nav c-nav--next"
+                        title="Next image"
+                        :disabled="isNextDisabled()"
+                        @click="nextImage()"
+                ></button>
+            </div>
         </div>
+
         <div class="c-imagery__control-bar">
             <div class="c-imagery__timestamp">{{ getTime() }}</div>
             <div class="h-local-controls flex-elem">
                 <button
                     class="c-button icon-pause pause-play"
                     :class="{'is-paused': paused()}"
-                    @click="paused(!paused())"
+                    @click="paused(!paused(), true)"
                 ></button>
             </div>
         </div>
@@ -60,7 +73,6 @@
 </template>
 
 <script>
-import _ from 'lodash';
 
 export default {
     inject: ['openmct', 'domainObject'],
@@ -83,6 +95,11 @@ export default {
             timeFormat: ''
         };
     },
+    computed: {
+        bounds() {
+            return this.openmct.time.bounds();
+        }
+    },
     mounted() {
         // set
         this.keystring = this.openmct.objects.makeKeyString(this.domainObject.identifier);
@@ -151,11 +168,11 @@ export default {
                     || (scrollHeight - scrollTop) > 2 * clientHeight;
             this.autoScroll = !disableScroll;
         },
-        paused(state) {
+        paused(state, button = false) {
             if (arguments.length > 0 && state !== this.isPaused) {
                 this.unselectAllImages();
                 this.isPaused = state;
-                if (state === true) {
+                if (state === true && button) {
                     // If we are pausing, select the latest image in imageHistory
                     this.setSelectedImage(this.imageHistory[this.imageHistory.length - 1]);
                 }
@@ -208,16 +225,15 @@ export default {
             }
         },
         requestHistory() {
-            let bounds = this.openmct.time.bounds();
-            this.requestCount++;
-            const requestId = this.requestCount;
+            const requestId = ++this.requestCount;
             this.imageHistory = [];
             this.openmct.telemetry
-                .request(this.domainObject, bounds)
+                .request(this.domainObject, this.bounds)
                 .then((values = []) => {
                     if (this.requestCount === requestId) {
-                        values.forEach(this.updateHistory, false);
-                        this.updateValues(values[values.length - 1]);
+                        // add each image to the history
+                        // update values for the very last image (set current image time and url)
+                        values.forEach((datum, index) => this.updateHistory(datum, index === values.length - 1));
                     }
                 });
         },
@@ -230,11 +246,9 @@ export default {
             this.unsubscribe = this.openmct.telemetry
                 .subscribe(this.domainObject, (datum) => {
                     let parsedTimestamp = this.timeFormat.parse(datum);
-                    let bounds = this.openmct.time.bounds();
 
-                    if (parsedTimestamp >= bounds.start && parsedTimestamp <= bounds.end) {
+                    if (parsedTimestamp >= this.bounds.start && parsedTimestamp <= this.bounds.end) {
                         this.updateHistory(datum);
-                        this.updateValues(datum);
                     }
                 });
         },
@@ -246,8 +260,7 @@ export default {
                 return;
             }
 
-            const index = _.sortedIndexBy(this.imageHistory, datum, this.timeFormat.format.bind(this.timeFormat));
-            this.imageHistory.splice(index, 0, datum);
+            this.imageHistory.push(datum);
 
             if (updateValues) {
                 this.updateValues(datum);
@@ -262,6 +275,47 @@ export default {
 
             this.time = this.timeFormat.format(datum);
             this.imageUrl = this.imageFormat.format(datum);
+        },
+        selectedImageIndex() {
+            return this.imageHistory.findIndex(image => image.selected);
+        },
+        setSelectedByIndex(index) {
+            this.setSelectedImage(this.imageHistory[index]);
+        },
+        nextImage() {
+            let index = this.selectedImageIndex();
+            this.setSelectedByIndex(++index);
+            if (index === this.imageHistory.length - 1) {
+                this.paused(false);
+            }
+        },
+        prevImage() {
+            let index = this.selectedImageIndex();
+            if (index === -1) {
+                this.setSelectedByIndex(this.imageHistory.length - 2);
+            } else {
+                this.setSelectedByIndex(--index);
+            }
+        },
+        isNextDisabled() {
+            let disabled = false;
+            let index = this.selectedImageIndex();
+
+            if (index === -1 || index === this.imageHistory.length - 1) {
+                disabled = true;
+            }
+
+            return disabled;
+        },
+        isPrevDisabled() {
+            let disabled = false;
+            let index = this.selectedImageIndex();
+
+            if (index === 0 || this.imageHistory.length < 2) {
+                disabled = true;
+            }
+
+            return disabled;
         }
     }
 };
diff --git a/src/plugins/imagery/components/imagery-view-layout.scss b/src/plugins/imagery/components/imagery-view-layout.scss
index 70454d858d..6bb4bc5387 100644
--- a/src/plugins/imagery/components/imagery-view-layout.scss
+++ b/src/plugins/imagery/components/imagery-view-layout.scss
@@ -160,3 +160,28 @@
         }
     }
 }
+
+.c-imagery__prev-next-buttons {
+    //background: rgba(deeppink, 0.2);
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+
+    .c-nav {
+        pointer-events: all;
+    }
+}
+
+.c-nav {
+    @include cArrowButtonBase($colorBg: rgba($colorLocalControlOvrBg, 0.1), $colorFg: $colorBtnBg);
+    @include cArrowButtonSizing($dimOuter: 48px);
+    border-radius: $controlCr;
+
+    .is-in-small-container & {
+        @include cArrowButtonSizing($dimOuter: 32px);
+    }
+}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 21f495a923..d0f34fd9a0 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -43,7 +43,7 @@
 }
 
 [class*="icon-"] {
-    &:before, &:after
+    &:before
     {
         -webkit-font-smoothing: antialiased;
     }
@@ -540,6 +540,67 @@
     }
 }
 
+@mixin cArrowButtonBase($colorBg: transparent, $colorFg: $colorBtnFg, $filterHov: $filterHov) {
+    // Copied from branch new-tree-refactor
+
+    flex: 0 0 auto;
+    position: relative;
+    background: $colorBg;
+
+    &:before {
+        // Arrow shape
+        border-style: solid;
+        content: '';
+        display: block;
+        position: absolute;
+        left: 50%; top: 50%;
+        transform-origin: center;
+    }
+
+    &:before {
+        border-color: $colorFg;
+    }
+
+    @include hover {
+        filter: $filterHov;
+    }
+
+    &--up, &--prev {
+        &:before {
+            transform: translate(-30%, -50%) rotate(135deg);
+        }
+    }
+
+    &--down, &--next {
+        &:before {
+            transform: translate(-70%, -50%) rotate(-45deg);
+        }
+    }
+}
+
+@mixin cArrowButtonSizing($dimOuter: 48px) {
+    height: $dimOuter;
+    width: $dimOuter;
+    $dimInner: floor($dimOuter * 0.6);
+    $borderW: floor($dimInner * 0.3);
+    $backOffsetW: floor($dimInner * 0.4);
+
+    &:before {
+        height: $dimInner;
+        width: $dimInner;
+    }
+
+    &:before {
+        // Arrow shape
+        border-width: 0 $borderW $borderW 0;
+    }
+}
+
+@mixin cArrowButton() {
+    @include cArrowButtonBase();
+    @include cArrowButtonSizing();
+}
+
 @mixin hasMenu() {
     &:after {
         content: $glyph-icon-arrow-down;