Always display job's prompt on the screen.

Author: vlad-shatskyi

src/views/4_PromptComponent.tsx

@@ -30,6 +30,7 @@ interface State {
     latestKeyCode?: number;
     offsetTop?: number;
     suggestions?: Suggestion[];
+    isSticky?: boolean;
 }
 
 
@@ -40,6 +41,20 @@ export class PromptComponent extends React.Component<Props, State> implements Ke
         onKeyDown: Function;
     };
 
+    private intersectionObserver = new IntersectionObserver(
+        (entries) => {
+            const entry = entries[0];
+            const nearTop = entry.boundingClientRect.bottom < 100;
+            const isVisible = entry.intersectionRatio === 1;
+
+            this.setState({isSticky: nearTop && !isVisible});
+        },
+        {
+            threshold: 1,
+            rootMargin: css.toDOMString(css.promptWrapperHeight),
+        }
+    );
+
     constructor(props: Props) {
         super(props);
         this.prompt = this.props.job.prompt;
@@ -48,6 +63,7 @@ export class PromptComponent extends React.Component<Props, State> implements Ke
             suggestions: [],
             highlightedSuggestionIndex: 0,
             latestKeyCode: undefined,
+            isSticky: false,
         };
 
         const keyDownSubject: Subject<KeyboardEvent> = new Subject();
@@ -137,9 +153,16 @@ export class PromptComponent extends React.Component<Props, State> implements Ke
             }
         });
 
+        this.intersectionObserver.observe(this.placeholderNode);
+
         this.setDOMValueProgrammatically(this.prompt.value);
     }
 
+    componentWillUnmount() {
+        this.intersectionObserver.unobserve(this.placeholderNode);
+        this.intersectionObserver.disconnect();
+    }
+
     componentDidUpdate(prevProps: Props, prevState: State) {
         if (this.props.status !== e.Status.NotStarted) {
             return;
@@ -186,35 +209,38 @@ export class PromptComponent extends React.Component<Props, State> implements Ke
             decorationToggle = <DecorationToggleComponent decorateToggler={this.props.decorateToggler}/>;
         }
 
-        if (this.props.status !== e.Status.NotStarted && this.props.job.screenBuffer.size > 100) {
+        if (this.state.isSticky) {
             scrollToTop = <span style={css.action}
-                             onClick={this.handleScrollToTop.bind(this)}
-                             dangerouslySetInnerHTML={{__html: fontAwesome.longArrowUp}}/>;
+                                title="Scroll to beginning of output."
+                                onClick={this.handleScrollToTop.bind(this)}
+                                dangerouslySetInnerHTML={{__html: fontAwesome.longArrowUp}}/>;
         }
 
         return (
-            <div className="prompt-wrapper" id={this.props.job.id} style={css.promptWrapper(this.props.status)}>
-                <div style={css.arrow(this.props.status)}>
-                    <div style={css.arrowInner(this.props.status)}></div>
-                </div>
-                <div style={css.promptInfo(this.props.status)}
-                     title={JSON.stringify(this.props.status)}
-                     dangerouslySetInnerHTML={{__html: this.props.status === Status.Interrupted ? fontAwesome.close : ""}}></div>
-                <div className="prompt"
-                     style={css.prompt}
-                     onKeyDown={event => this.handlers.onKeyDown(event)}
-                     onInput={this.handleInput.bind(this)}
-                     onKeyPress={() => this.props.status === e.Status.InProgress && stopBubblingUp(event)}
-                     onDrop={this.handleDrop.bind(this)}
-                     type="text"
-                     ref="command"
-                     contentEditable={this.props.status === e.Status.NotStarted || this.props.status === e.Status.InProgress}></div>
-                {autocompletedPreview}
-                {inlineSynopsis}
-                {autocomplete}
-                <div style={css.actions}>
-                    {decorationToggle}
-                    {scrollToTop}
+            <div className="prompt-placeholder" ref="placeholder" id={this.props.job.id} style={css.promptPlaceholder}>
+                <div className="prompt-wrapper" style={css.promptWrapper(this.props.status, this.state.isSticky)}>
+                    <div style={css.arrow(this.props.status)}>
+                        <div style={css.arrowInner(this.props.status)}></div>
+                    </div>
+                    <div style={css.promptInfo(this.props.status)}
+                         title={JSON.stringify(this.props.status)}
+                         dangerouslySetInnerHTML={{__html: this.props.status === Status.Interrupted ? fontAwesome.close : ""}}></div>
+                    <div className="prompt"
+                         style={css.prompt}
+                         onKeyDown={event => this.handlers.onKeyDown(event)}
+                         onInput={this.handleInput.bind(this)}
+                         onKeyPress={() => this.props.status === e.Status.InProgress && stopBubblingUp(event)}
+                         onDrop={this.handleDrop.bind(this)}
+                         type="text"
+                         ref="command"
+                         contentEditable={this.props.status === e.Status.NotStarted || this.props.status === e.Status.InProgress}></div>
+                    {autocompletedPreview}
+                    {inlineSynopsis}
+                    {autocomplete}
+                    <div style={css.actions}>
+                        {decorationToggle}
+                        {scrollToTop}
+                    </div>
                 </div>
             </div>
         );
@@ -233,6 +259,11 @@ export class PromptComponent extends React.Component<Props, State> implements Ke
         return this.refs["command"] as HTMLInputElement;
     }
 
+    private get placeholderNode(): Element {
+        /* tslint:disable:no-string-literal */
+        return this.refs["placeholder"] as Element;
+    }
+
     private setDOMValueProgrammatically(text: string): void {
         this.commandNode.innerText = text;
         setCaretPosition(this.commandNode, text.length);

src/views/css/functions.ts

@@ -11,3 +11,7 @@ export function darken(color: string, percent: number) {
 export function failurize(color: string) {
     return tinyColor(color).spin(140).saturate(20).toHexString();
 }
+
+export function toDOMString(pixels: number) {
+    return `${pixels}px`;
+}

src/views/css/main.ts

@@ -5,6 +5,8 @@ import {darken, lighten, failurize} from "./functions";
 import {Attributes} from "../../Interfaces";
 import {suggestionsLimit} from "../../Autocompletion";
 
+export {toDOMString} from "./functions";
+
 export interface CSSObject {
     pointerEvents?: string;
     marginTop?: number;
@@ -57,7 +59,7 @@ export const outputPadding = 10;
 const promptVerticalPadding = 5;
 const promptHorizontalPadding = 10;
 const promptHeight = 12 + (2 * promptVerticalPadding);
-const promptWrapperHeight = promptHeight + promptVerticalPadding;
+export const promptWrapperHeight = promptHeight + promptVerticalPadding;
 const promptBackgroundColor = lighten(colors.black, 5);
 const suggestionSize = 2 * fontSize;
 const defaultShadow = "0 2px 8px 1px rgba(0, 0, 0, 0.3)";
@@ -85,6 +87,7 @@ const icon = {
 };
 
 const outputCutHeight = fontSize * 2.6;
+const outputCutZIndex = 0;
 
 const decorationWidth = 30;
 const arrowZIndex = 2;
@@ -382,6 +385,7 @@ export const outputCut = (status: Status, isHovered: boolean) => Object.assign(
         paddingTop: (outputCutHeight - fontSize) / 3,
         color: lighten(backgroundColor, isHovered ? 35 : 30),
         cursor: "pointer",
+        zIndex: outputCutZIndex,
     }
 );
 
@@ -494,7 +498,11 @@ export const promptInfo = (status: Status) => {
     return styles;
 };
 
-export const promptWrapper = (status: Status) => {
+export const promptPlaceholder = {
+    height: promptWrapperHeight,
+};
+
+export const promptWrapper = (status: Status, isSticky: boolean) => {
     const styles: CSSObject = {
         top: 0,
         paddingTop: promptVerticalPadding,
@@ -505,8 +513,16 @@ export const promptWrapper = (status: Status) => {
         gridTemplateColumns: `${decorationWidth}px 1fr 150px`,
         backgroundColor: promptBackgroundColor,
         minHeight: promptWrapperHeight,
+        zIndex: outputCutZIndex + 1,
     };
 
+    if (isSticky) {
+        styles.boxShadow = "0 5px 8px -3px rgba(0, 0, 0, 0.3)";
+        styles.width = "100%";
+        styles.position = "fixed";
+        styles.top = titleBarHeight;
+    }
+
     if ([Status.Failure, Status.Interrupted].includes(status)) {
         styles.backgroundColor = failurize(promptBackgroundColor);
     }

typings/Overrides.d.ts

@@ -7,6 +7,41 @@ declare class Notification {
     constructor(title: string, options: { body: string });
 }
 
+interface IntersectionObserverEntry {
+    readonly time: number;
+    readonly rootBounds: any;
+    readonly boundingClientRect: ClientRect;
+    readonly intersectionRect: ClientRect;
+    readonly intersectionRatio: number;
+    readonly target: Element;
+}
+
+interface IntersectionObserverInit {
+    // The root to use for intersection. If not provided, use the top-level document’s viewport.
+    root?: Element;
+    // Same as margin, can be 1, 2, 3 or 4 components, possibly negative lengths.  If an explicit
+    // root element is specified, components may be percentages of the root element size.  If no
+    // explicit root element is specified, using a percentage here is an error.
+    // "5px"
+    // "10% 20%"
+    // "-10px 5px 5px"
+    // "-10px -10px 5px 5px"
+    rootMargin?: string;
+    // Threshold(s) at which to trigger callback, specified as a ratio, or list of ratios,
+    // of (visible area / total area) of the observed element (hence all entries must be
+    // in the range [0, 1]).  Callback will be invoked when the visible ratio of the observed
+    // element crosses a threshold in the list.
+    threshold?: number | number[];
+}
+
+declare class IntersectionObserver {
+    constructor(handler: (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void, options?: IntersectionObserverInit);
+    observe(target: Element): void;
+    unobserve(target: Element): void;
+    disconnect(): void;
+    takeRecords(): IntersectionObserverEntry[];
+}
+
 interface Window {
     DEBUG: boolean;
     jobUnderAttention: KeyDownReceiver;