From 40bdb18f78987b21aef58c2a3a6e1e30bbd310b3 Mon Sep 17 00:00:00 2001
From: subnub <kyle.hoell@gmail.com>
Date: Fri, 15 May 2020 02:10:16 -0400
Subject: [PATCH] added ontouch event to list view items, and quick items

---
 backend/key/getKey.ts                         |  2 -
 key/getKey.js                                 |  4 +-
 src/components/FileItem/FileItem.js           |  7 +-
 .../QuickAccessItem/QuickAccessItem.js        |  5 +-
 src/components/QuickAccessItem/index.js       | 68 +++++++++++++++----
 5 files changed, 66 insertions(+), 20 deletions(-)

diff --git a/backend/key/getKey.ts b/backend/key/getKey.ts
index 787a6ee..deab46d 100644
--- a/backend/key/getKey.ts
+++ b/backend/key/getKey.ts
@@ -11,8 +11,6 @@ const getKey = async() => {
 
         env.key = crypto.createHash("md5").update(password).digest("hex");
 
-        console.log("Docker Key", env.key);
-
     } else if (process.env.NODE_ENV === "production") {
 
         let password: string = await prompt("Enter Server Encryption Password: ", {method: "hide"});
diff --git a/key/getKey.js b/key/getKey.js
index 0fc47ff..c0dbfe7 100644
--- a/key/getKey.js
+++ b/key/getKey.js
@@ -2,6 +2,8 @@ const prompt = require('password-prompt')
 import env from "../backend/enviroment/env";
 const crypto = require("crypto");
 
+// NOT IN USE
+
 const getKey = async() => {
 
     if (process.env.KEY) {
@@ -11,7 +13,7 @@ const getKey = async() => {
 
         env.key = password;
 
-        console.log("Docker Key", env.key);
+        //console.log("Docker Key", env.key);
 
     } else if (process.env.NODE_ENV) {
 
diff --git a/src/components/FileItem/FileItem.js b/src/components/FileItem/FileItem.js
index 9ea27c3..5afb308 100644
--- a/src/components/FileItem/FileItem.js
+++ b/src/components/FileItem/FileItem.js
@@ -16,7 +16,10 @@ const FileItem = (props) => {
                     
                     <div className={props._id !== props.selected ? "file__item__listview" : "file__item__listview file__item--selected"} 
                         onClick={() => {props.fileClick(props._id, props)}}
-                        onContextMenu={(e) => props.getContextMenu(e)}>
+                        onContextMenu={(e) => props.getContextMenu(e)}
+                        onTouchStart={props.onTouchStart}
+                        onTouchEnd={props.onTouchEnd}
+                        onTouchMove={props.onTouchMove}>
                             
                             <div className="file__item__listview__title__wrapper">
                                 <img className={props.state.imageClassname} src={props.state.imageSrc} onError={() => {props.image.src = "/images/file-svg.svg"; props.image.className="file__image__listview"; props.failedToLoad = true}}/>
@@ -27,7 +30,7 @@ const FileItem = (props) => {
         
                             {(props.rightSelected === props._id && props._id === props.selected) ? 
                             
-                                <ContextMenu style={props.state} {...props} quickFile={false} downloadFile={props.downloadFile}/>
+                                <ContextMenu style={props.state.contextMenuPos} {...props} quickFile={false} downloadFile={props.downloadFile}/>
                             : 
                                  undefined}
         
diff --git a/src/components/QuickAccessItem/QuickAccessItem.js b/src/components/QuickAccessItem/QuickAccessItem.js
index 19996f5..fa29010 100644
--- a/src/components/QuickAccessItem/QuickAccessItem.js
+++ b/src/components/QuickAccessItem/QuickAccessItem.js
@@ -6,7 +6,10 @@ import React from "react";
 const QuickAccessItem = (props) => (
 
     <div className={"quick-"+props._id !== props.selected ? "quickaccess__item" : "quickaccess__item file__item--selected"} onClick={() => {props.fileClick(props._id, props, true)}} 
-    onContextMenu={(e) => props.getContextMenu(e)}>
+    onContextMenu={(e) => props.getContextMenu(e)}
+    onTouchStart={props.onTouchStart}
+    onTouchEnd={props.onTouchEnd}
+    onTouchMove={props.onTouchMove}>
 
         <div className="quickaccess__item__image__wrapper">
         <img className={props.state.imageClassname} src={props.state.image} onError={() => {props.image.src = "/images/file-svg.svg"; props.image.className="quickaccess__item__image"; props.failedToLoad = true}}/>
diff --git a/src/components/QuickAccessItem/index.js b/src/components/QuickAccessItem/index.js
index 60907c8..f32b001 100644
--- a/src/components/QuickAccessItem/index.js
+++ b/src/components/QuickAccessItem/index.js
@@ -14,6 +14,7 @@ class QuickAccessItemContainer extends React.Component {
         super(props);
 
         this.failedToLoad = false;
+        this.lastTouch = 0;
 
         this.state = {
             contextMenuPos: {},
@@ -62,9 +63,42 @@ class QuickAccessItemContainer extends React.Component {
             console.log(err)
         })
     }
+
+    onTouchStart = () => {
+        //alert("Touch start");
+        const date = new Date();
+        this.lastTouch = date.getTime();
+    }
+
+    onTouchMove = () => {
+
+        this.lastTouch = 0;
+    }
+
+    onTouchEnd = () => {
+
+        if (this.lastTouch === 0) {
+
+            //alert("last touch 0");
+            return;
+        }
+
+        const date = new Date();
+        const difference = date - this.lastTouch;
+        //alert("Touch end: " + difference)
+        //alert("touch end: " + difference);
+        this.lastTouch = 0;
+
+        if (difference > 500) {
+            //alert("Context menu");
+            this.getContextMenu();
+        }
+
+    }
+
     getContextMenu = (e) => {
 
-        e.preventDefault();
+        if (e) e.preventDefault();
 
         const isMobile = mobileCheck()
     
@@ -73,21 +107,24 @@ class QuickAccessItemContainer extends React.Component {
 
         let styleObj = {right:0, left:0, top: "-3px", bottom: 0}
 
-        const clientY =  e.nativeEvent.clientY;
-        const clientX = e.nativeEvent.clientX;
-
-        if (clientX > windowX / 2) {
-
-            styleObj = {...styleObj, left:"unset", right:0}
-
-        } else {
-         
-            styleObj = {...styleObj, left:0, right:"unset"}
-        }
-
         if (isMobile) {
 
-            styleObj = {bottom: 0, left: "2px"}
+            styleObj = {bottom: 0, left: "2px"};
+
+        } else {
+
+            const clientY =  e.nativeEvent.clientY;
+            const clientX = e.nativeEvent.clientX;
+    
+            if (clientX > windowX / 2) {
+    
+                styleObj = {...styleObj, left:"unset", right:0}
+    
+            } else {
+             
+                styleObj = {...styleObj, left:0, right:"unset"}
+            }
+
         }
 
         this.setState(() => ({
@@ -106,6 +143,9 @@ class QuickAccessItemContainer extends React.Component {
 
         return <QuickAccessItem 
                 getContextMenu={this.getContextMenu} 
+                onTouchStart={this.onTouchStart}
+                onTouchMove={this.onTouchMove}
+                onTouchEnd={this.onTouchEnd}
                 state={this.state} 
                 {...this.props}/>
     }