mirror of
https://github.com/nasa/openmct.git
synced 2025-01-31 08:25:31 +00:00
Image thumbs autoscroll resumption functionality (#3892)
* add logs for testing * check autoScroll value * Add auto scroll button at thumbnails * add auto scroll button functionality * turn on auto scroll whenever scroll bar is not at the right end * check if scroll right when the page load * update scroll to right condition * remove resetScroll method, refactor scrollToRight and some cleaning * check initial status * remove logs * Styling for imagery thumbs 'autoscroll resume' button - Refined look and feel of the approach; - CSS classes now assigned at the wrapper level; - Markup changed to allow wrapping of scroll area and button; - TODO: prevent a drag resize of the main view area from forcing autoscroll to pause; * Add tests for auto scroll * add resize observer for thumb wrapper * reset scroll bar position when window is resized * Revert "upgrade to webpack5 (#3871)" (#3907) (#3908) This reverts commit e1e0eeac56d32d88ca56d28b3da10c5b68f10cfe. Co-authored-by: Nikhil <nikhil.k.mandlik@nasa.gov> * Check for getlimits api (#3910) * add debounce and resizing observer to thumbwrapper * handling resizing window and auto scroll * 1.clean up comments and logs 2.make variable names more descriptive 3.add scroll to right for play button * fix eslint formate issue * update class name in test * fix eslint format error * remove a couple variables that were created but not used. Co-authored-by: Henry Hsu <henry.hsu@nasa.gov> Co-authored-by: Henry Hsu <hhsu0219@gmail.com> Co-authored-by: Shefali Joshi <simplyrender@gmail.com> Co-authored-by: Nikhil <nikhil.k.mandlik@nasa.gov> Co-authored-by: Jamie Vigliotta <jamie.j.vigliotta@nasa.gov> Co-authored-by: Andrew Henry <akhenry@gmail.com>
This commit is contained in:
Charles Hacskaylo
GitHub
parent
da39fd0c70
commit
0b63b782cf
@ -62,6 +62,9 @@ export default function ImageryViewProvider(openmct) {
|
||||
destroy: function () {
|
||||
component.$destroy();
|
||||
component = undefined;
|
||||
},
|
||||
_getInstance: function () {
|
||||
return component;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -124,27 +124,40 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="thumbsWrapper"
|
||||
class="c-imagery__thumbs-wrapper"
|
||||
:class="{'is-paused': isPaused}"
|
||||
@scroll="handleScroll"
|
||||
:class="[
|
||||
{ 'is-paused': isPaused },
|
||||
{ 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused }
|
||||
]"
|
||||
>
|
||||
<div v-for="(image, index) in imageHistory"
|
||||
:key="image.url + image.time"
|
||||
class="c-imagery__thumb c-thumb"
|
||||
:class="{ selected: focusedImageIndex === index && isPaused }"
|
||||
@click="setFocusedImage(index, thumbnailClick)"
|
||||
<div
|
||||
ref="thumbsWrapper"
|
||||
class="c-imagery__thumbs-scroll-area"
|
||||
@scroll="handleScroll"
|
||||
>
|
||||
<a href=""
|
||||
:download="image.imageDownloadName"
|
||||
@click.prevent
|
||||
<div v-for="(image, index) in imageHistory"
|
||||
:key="image.url + image.time"
|
||||
class="c-imagery__thumb c-thumb"
|
||||
:class="{ selected: focusedImageIndex === index && isPaused }"
|
||||
@click="setFocusedImage(index, thumbnailClick)"
|
||||
>
|
||||
<img class="c-thumb__image"
|
||||
:src="image.url"
|
||||
<a href=""
|
||||
:download="image.imageDownloadName"
|
||||
@click.prevent
|
||||
>
|
||||
</a>
|
||||
<div class="c-thumb__timestamp">{{ image.formattedTime }}</div>
|
||||
<img class="c-thumb__image"
|
||||
:src="image.url"
|
||||
>
|
||||
</a>
|
||||
<div class="c-thumb__timestamp">{{ image.formattedTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="c-imagery__auto-scroll-resume-button c-icon-button icon-play"
|
||||
title="Resume automatic scrolling of image thumbnails"
|
||||
@click="scrollToRight('reset')"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -171,6 +184,8 @@ const TWENTYFOUR_HOURS = EIGHT_HOURS * 3;
|
||||
const ARROW_RIGHT = 39;
|
||||
const ARROW_LEFT = 37;
|
||||
|
||||
const SCROLL_LATENCY = 250;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Compass
|
||||
@ -204,7 +219,8 @@ export default {
|
||||
focusedImageNaturalAspectRatio: undefined,
|
||||
imageContainerWidth: undefined,
|
||||
imageContainerHeight: undefined,
|
||||
lockCompass: true
|
||||
lockCompass: true,
|
||||
resizingWindow: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -380,9 +396,13 @@ export default {
|
||||
|
||||
this.imageContainerResizeObserver = new ResizeObserver(this.resizeImageContainer);
|
||||
this.imageContainerResizeObserver.observe(this.$refs.focusedImage);
|
||||
},
|
||||
updated() {
|
||||
this.scrollToRight();
|
||||
|
||||
// For adjusting scroll bar size and position when resizing thumbs wrapper
|
||||
this.handleScroll = _.debounce(this.handleScroll, SCROLL_LATENCY);
|
||||
this.handleThumbWindowResizeEnded = _.debounce(this.handleThumbWindowResizeEnded, SCROLL_LATENCY);
|
||||
|
||||
this.thumbWrapperResizeObserver = new ResizeObserver(this.handleThumbWindowResizeStart);
|
||||
this.thumbWrapperResizeObserver.observe(this.$refs.thumbsWrapper);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.unsubscribe) {
|
||||
@ -394,6 +414,10 @@ export default {
|
||||
this.imageContainerResizeObserver.disconnect();
|
||||
}
|
||||
|
||||
if (this.thumbWrapperResizeObserver) {
|
||||
this.thumbWrapperResizeObserver.disconnect();
|
||||
}
|
||||
|
||||
if (this.relatedTelemetry.hasRelatedTelemetry) {
|
||||
this.relatedTelemetry.destroy();
|
||||
}
|
||||
@ -561,17 +585,15 @@ export default {
|
||||
},
|
||||
handleScroll() {
|
||||
const thumbsWrapper = this.$refs.thumbsWrapper;
|
||||
if (!thumbsWrapper) {
|
||||
if (!thumbsWrapper || this.resizingWindow) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { scrollLeft, scrollWidth, clientWidth, scrollTop, scrollHeight, clientHeight } = thumbsWrapper;
|
||||
const disableScroll = (scrollWidth - scrollLeft) > 2 * clientWidth
|
||||
|| (scrollHeight - scrollTop) > 2 * clientHeight;
|
||||
const { scrollLeft, scrollWidth, clientWidth } = thumbsWrapper;
|
||||
const disableScroll = scrollWidth > Math.ceil(scrollLeft + clientWidth);
|
||||
this.autoScroll = !disableScroll;
|
||||
},
|
||||
paused(state, type) {
|
||||
|
||||
this.isPaused = state;
|
||||
|
||||
if (type === 'button') {
|
||||
@ -584,6 +606,7 @@ export default {
|
||||
}
|
||||
|
||||
this.autoScroll = true;
|
||||
this.scrollToRight();
|
||||
},
|
||||
scrollToFocused() {
|
||||
const thumbsWrapper = this.$refs.thumbsWrapper;
|
||||
@ -600,8 +623,8 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
scrollToRight() {
|
||||
if (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll) {
|
||||
scrollToRight(type) {
|
||||
if (type !== 'reset' && (this.isPaused || !this.$refs.thumbsWrapper || !this.autoScroll)) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -610,7 +633,9 @@ export default {
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(() => this.$refs.thumbsWrapper.scrollLeft = scrollWidth, 0);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.thumbsWrapper.scrollLeft = scrollWidth;
|
||||
});
|
||||
},
|
||||
setFocusedImage(index, thumbnailClick = false) {
|
||||
if (this.isPaused && !thumbnailClick) {
|
||||
@ -678,9 +703,9 @@ export default {
|
||||
image.imageDownloadName = this.getImageDownloadName(datum);
|
||||
|
||||
this.imageHistory.push(image);
|
||||
|
||||
if (setFocused) {
|
||||
this.setFocusedImage(this.imageHistory.length - 1);
|
||||
this.scrollToRight();
|
||||
}
|
||||
},
|
||||
getFormatter(key) {
|
||||
@ -816,6 +841,24 @@ export default {
|
||||
this.imageContainerHeight = this.$refs.focusedImage.clientHeight;
|
||||
}
|
||||
},
|
||||
handleThumbWindowResizeStart() {
|
||||
if (!this.autoScroll) {
|
||||
return;
|
||||
}
|
||||
|
||||
// To hide resume button while scrolling
|
||||
this.resizingWindow = true;
|
||||
this.handleThumbWindowResizeEnded();
|
||||
},
|
||||
handleThumbWindowResizeEnded() {
|
||||
if (!this.isPaused) {
|
||||
this.scrollToRight('reset');
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.resizingWindow = false;
|
||||
});
|
||||
},
|
||||
toggleLockCompass() {
|
||||
this.lockCompass = !this.lockCompass;
|
||||
}
|
||||
|
||||
@ -93,24 +93,43 @@
|
||||
}
|
||||
|
||||
&__thumbs-wrapper {
|
||||
flex: 0 0 auto;
|
||||
display: flex; // Uses row layout
|
||||
|
||||
&.is-autoscroll-off {
|
||||
background: $colorInteriorBorder;
|
||||
[class*='__auto-scroll-resume-button'] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-paused {
|
||||
background: rgba($colorPausedBg, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&__thumbs-scroll-area {
|
||||
flex: 0 1 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 135px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
margin-bottom: 1px;
|
||||
padding-bottom: $interiorMarginSm;
|
||||
|
||||
&.is-paused {
|
||||
background: rgba($colorPausedBg, 0.4);
|
||||
}
|
||||
|
||||
.c-thumb:last-child {
|
||||
// Hilite the lastest thumb
|
||||
background: $colorBodyFg;
|
||||
color: $colorBodyBg;
|
||||
}
|
||||
}
|
||||
|
||||
&__auto-scroll-resume-button {
|
||||
display: none; // Set to block when __thumbs-wrapper has .is-autoscroll-off
|
||||
flex: 0 0 auto;
|
||||
font-size: 0.8em;
|
||||
margin: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************** THUMBS */
|
||||
@ -142,7 +161,7 @@
|
||||
|
||||
.l-layout,
|
||||
.c-fl {
|
||||
.c-imagery__thumbs-wrapper {
|
||||
.c-imagery__thumbs-scroll-area {
|
||||
// When Imagery is in a layout, hide the thumbs area
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -92,6 +92,7 @@ describe("The Imagery View Layout", () => {
|
||||
let resolveFunction;
|
||||
|
||||
let openmct;
|
||||
let appHolder;
|
||||
let parent;
|
||||
let child;
|
||||
let imageTelemetry = generateTelemetry(START - TEN_MINUTES, COUNT);
|
||||
@ -195,7 +196,7 @@ describe("The Imagery View Layout", () => {
|
||||
|
||||
// this setups up the app
|
||||
beforeEach((done) => {
|
||||
const appHolder = document.createElement('div');
|
||||
appHolder = document.createElement('div');
|
||||
appHolder.style.width = '640px';
|
||||
appHolder.style.height = '480px';
|
||||
|
||||
@ -209,6 +210,8 @@ describe("The Imagery View Layout", () => {
|
||||
child = document.createElement('div');
|
||||
parent.appendChild(child);
|
||||
|
||||
// document.querySelector('body').append(parent);
|
||||
|
||||
spyOn(window, 'ResizeObserver').and.returnValue({
|
||||
observe() {},
|
||||
disconnect() {}
|
||||
@ -362,5 +365,21 @@ describe("The Imagery View Layout", () => {
|
||||
done();
|
||||
});
|
||||
});
|
||||
it ('shows an auto scroll button when scroll to left', async () => {
|
||||
// to mock what a scroll would do
|
||||
imageryView._getInstance().$refs.ImageryLayout.autoScroll = false;
|
||||
await Vue.nextTick();
|
||||
let autoScrollButton = parent.querySelector('.c-imagery__auto-scroll-resume-button');
|
||||
expect(autoScrollButton).toBeTruthy();
|
||||
});
|
||||
it ('scrollToRight is called when clicking on auto scroll button', async () => {
|
||||
// use spyon to spy the scroll function
|
||||
spyOn(imageryView._getInstance().$refs.ImageryLayout, 'scrollToRight');
|
||||
imageryView._getInstance().$refs.ImageryLayout.autoScroll = false;
|
||||
await Vue.nextTick();
|
||||
parent.querySelector('.c-imagery__auto-scroll-resume-button').click();
|
||||
expect(imageryView._getInstance().$refs.ImageryLayout.scrollToRight).toHaveBeenCalledWith('reset');
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user