From 3468440a4297a105cf4138892c3d163ca9a0c83c Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Tue, 30 Jul 2019 11:30:48 -0400
Subject: CleanUp and Documentation

---
 .../presentationview/PresentationModeMenu.tsx      | 34 +++++++++++++---------
 1 file changed, 21 insertions(+), 13 deletions(-)

(limited to 'src/client/views/presentationview/PresentationModeMenu.tsx')

diff --git a/src/client/views/presentationview/PresentationModeMenu.tsx b/src/client/views/presentationview/PresentationModeMenu.tsx
index b3edeb1e2..4de8da587 100644
--- a/src/client/views/presentationview/PresentationModeMenu.tsx
+++ b/src/client/views/presentationview/PresentationModeMenu.tsx
@@ -13,6 +13,10 @@ export interface PresModeMenuProps {
     closePresMode: () => void;
 }
 
+/**
+ * This class is responsible for modeling of the Presentation Mode Menu. The menu allows
+ * user to navigate through presentation elements, and start/stop the presentation.
+ */
 @observer
 export default class PresModeMenu extends React.Component<PresModeMenuProps> {
 
@@ -21,18 +25,14 @@ export default class PresModeMenu extends React.Component<PresModeMenuProps> {
     @observable private _opacity: number = 1;
     @observable private _transition: string = "opacity 0.5s";
     @observable private _transitionDelay: string = "";
-    //@observable private Pinned: boolean = false;
 
 
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
 
-    @action
-    pointerEntered = (e: React.PointerEvent) => {
-        this._transition = "opacity 0.1s";
-        this._transitionDelay = "";
-        this._opacity = 1;
-    }
-
+    /**
+     * The function that changes the coordinates of the menu, depending on the
+     * movement of the mouse when it's being dragged.
+     */
     @action
     dragging = (e: PointerEvent) => {
         this._right -= e.movementX;
@@ -42,6 +42,10 @@ export default class PresModeMenu extends React.Component<PresModeMenuProps> {
         e.preventDefault();
     }
 
+    /**
+     * The function that removes the event listeners that are responsible for
+     * dragging of the menu.
+     */
     dragEnd = (e: PointerEvent) => {
         document.removeEventListener("pointermove", this.dragging);
         document.removeEventListener("pointerup", this.dragEnd);
@@ -49,20 +53,24 @@ export default class PresModeMenu extends React.Component<PresModeMenuProps> {
         e.preventDefault();
     }
 
+    /**
+     * The function that starts the dragging of the presentation mode menu. When
+     * the lines on further right are clicked on.
+     */
     dragStart = (e: React.PointerEvent) => {
         document.removeEventListener("pointermove", this.dragging);
         document.addEventListener("pointermove", this.dragging);
         document.removeEventListener("pointerup", this.dragEnd);
         document.addEventListener("pointerup", this.dragEnd);
-        let clientRect = this._mainCont.current!.getBoundingClientRect();
-
-        // runInAction(() => this._left = (clientRect.width - e.nativeEvent.offsetX) + clientRect.left);
-        // runInAction(() => this._top = e.nativeEvent.offsetY);
 
         e.stopPropagation();
         e.preventDefault();
     }
 
+    /**
+     * The function that is responsible for rendering the play or pause button, depending on the
+     * status of the presentation.
+     */
     renderPlayPauseButton = () => {
         if (this.props.presStatus) {
             return <button title="Reset Presentation" className="presMenu-button" onClick={this.props.startOrResetPres}><FontAwesomeIcon icon="stop" /></button>;
@@ -73,7 +81,7 @@ export default class PresModeMenu extends React.Component<PresModeMenuProps> {
 
     render() {
         return (
-            <div className="presMenu-cont" onPointerEnter={this.pointerEntered} ref={this._mainCont}
+            <div className="presMenu-cont" ref={this._mainCont}
                 style={{ right: this._right, top: this._top, opacity: this._opacity, transition: this._transition, transitionDelay: this._transitionDelay }}>
                 <button title="Back" className="presMenu-button" onClick={this.props.back}><FontAwesomeIcon icon={"arrow-left"} /></button>
                 {this.renderPlayPauseButton()}
-- 
cgit v1.2.3-70-g09d2