Made Context Menu non transparent

Added copy to clipboard
Made contextmenu items visible for logged in users only

2 files changed, 88 insertions, 67 deletions

diff --git a/www/browse.php b/www/browse.php
index 4e12694..ee36122 100644
--- a/www/browse.php
+++ b/www/browse.php
@@ -42,54 +42,66 @@ function browse($content){
 		
 	
 		echo '<link rel="stylesheet" type="text/css" href="/static/browser.css">
-				<script>
-					function showNewFolder(){
-							document.getElementById("new-folder-bg").style.visibility = "visible";
-							
-							return;
-					}
-					function hideNewFolder(){
-						document.getElementById("new-folder-bg").style.visibility = "hidden";
-						return;
-					}
+		<script src="/static/js/browser.js"></script>';
+		
+		echo get_upload();
+		
+		echo get_new_folder();
+		
+		echo get_context_menu();
+				
+		echo get_file_list($file_list);
+				
+		echo get_zero_clipboard();
+	
+		include("static/footer.html");
+}
+
+function get_zero_clipboard(){
+	return '<script src="/static/zero-clipboard/ZeroClipboard.min.js"></script>
 				
-					function showUpload(){
-							document.getElementById("upload-bg").style.visibility = "visible";
-							return;
-					}
-					function hideUpload(){
-						document.getElementById("upload-bg").style.visibility = "hidden";
-						return;
-					}
-					
-					
-					function showMenu(e) {
-						var posx = e.clientX +window.pageXOffset +"px";
-						var posy = e.clientY + window.pageYOffset + "px";
-						document.getElementById("context-menu").style.position = "absolute";
-						document.getElementById("context-menu").style.display = "inline";
-						document.getElementById("context-menu").style.left = posx;
-						document.getElementById("context-menu").style.top = posy;
-					}
-					function hideMenu() {
-						document.getElementById("context-menu").style.display = "none"; 
-					}
-				</script>
-				<div id="new-folder-bg">
-					<div id="new-folder-area">
-						<h1 class="new-folder"> New Folder </h1>
-						<a onclick="hideNewFolder()" class="new-folder" id="close">x</a>
-						<form id="new-folder-form" method="post" action="/'.$_GET["name"]."/".$_GET["folder"].'">
-							<input class="new-folder-input" id="new-folder-name" type="text" placeholder="name" name="foldername" required>
-							<input type="hidden" value="'.$_GET["folder"].'" name="path">
-							<input type="hidden" value="new-folder" name="task">
-							<label>Public</label><input  style="display:inline; margin-left: 5px;" class="new-folder-input" type="checkbox" name="share">
-							<input onclick="hide-new-folder()" type="submit" id="button-input" class="new-folder-input" value="create">
-						</form>
-					</div>
-				</div>
 				
-				<div id="upload-bg">
+				<script>
+					ZeroClipboard.config( { swfPath: "/static/zero-clipboard/ZeroClipboard.swf" } );
+					var client = new ZeroClipboard(document.getElementById("copy-link"));
+					client.on( "ready", function(event) {
+						client.on("copy", function(event){
+							var url = document.getElementById("copy-link").getAttribute("url");
+							event.clipboardData.setData("text/plain", url);
+							return;
+						});
+					});
+				</script>';
+}
+
+function get_file_list($file_list){
+	return '<table oncontextmenu="return false" onmousedown="hideMenu()" cellspacing="0" >'.$file_list.'</table>';
+}
+
+function get_context_menu(){
+	$menu = '<div id="context-menu" style="display:none">
+					<table>
+						<tr class="context-menu-item">
+							<td id="copy-link" >Copy link to clipboard</td>
+						</tr>';
+	if($_SESSION["login"] && $_SESSION["username"] == $_GET["name"]){
+		$menu .= '<tr class="context-menu-item">
+						<td id="rename">rename</td>
+					</tr>
+					<tr class="context-menu-item">
+						<td id="delete">delete</td>
+					</tr>
+					<tr class="context-menu-item">
+						<td id="set-permissions">set permissions</td>
+					</tr>';
+		}
+	$menu .= 	'</table>
+				</div>';
+	return $menu;
+}
+
+function get_upload(){
+	return 	'<div id="upload-bg">
 					<div id="upload-area">
 						<h1 class="upload"> Upload </h1>
 						<a onclick="hideUpload()" class="new-folder" id="close">x</a>
@@ -101,27 +113,23 @@ function browse($content){
 							<input onclick="hide-upload()" type="submit" id="button-input" class="upload-input" value="upload">
 						</form>
 					</div>
-				</div>
-				
-				
-				<table oncontextmenu="return false" onmousedown="hideMenu()" cellspacing="0" >'.$file_list.'</table>
-				
-				
-				<div id="context-menu" style="display:none">
-					<table>
-						<tr>
-							<td>rename</td>
-						</tr>
-						<tr>
-							<td>delete</td>
-						</tr>
-						<tr>
-							<td>set permissions</td>
-						</tr>
-					</table>
 				</div>';
-	
-		include("static/footer.html");
+}
+
+function get_new_folder(){
+	return '<div id="new-folder-bg">
+					<div id="new-folder-area">
+						<h1 class="new-folder"> New Folder </h1>
+						<a onclick="hideNewFolder()" class="new-folder" id="close">x</a>
+						<form id="new-folder-form" method="post" action="/'.$_GET["name"]."/".$_GET["folder"].'">
+							<input class="new-folder-input" id="new-folder-name" type="text" placeholder="name" name="foldername" required>
+							<input type="hidden" value="'.$_GET["folder"].'" name="path">
+							<input type="hidden" value="new-folder" name="task">
+							<label>Public</label><input  style="display:inline; margin-left: 5px;" class="new-folder-input" type="checkbox" name="share">
+							<input onclick="hide-new-folder()" type="submit" id="button-input" class="new-folder-input" value="create">
+						</form>
+					</div>
+				</div>';
 }
 
 
@@ -135,7 +143,7 @@ function get_icon($file){
 
 function get_link($file){
 	$slash = (($_GET["folder"]!="" && substr($_GET["folder"], -1) != "/"))? "/" : "";
-	return '<a oncontextmenu="showMenu(event)" class="file" href="/'.$_GET["name"]."/".$_GET["folder"].$slash.$file[3].'/">';
+	return '<a oncontextmenu="showMenu(event)" id="" class="file" href="/'.$_GET["name"]."/".$_GET["folder"].$slash.$file[3].'/">';
 }
 
 function get_item($file){
diff --git a/www/static/browser.css b/www/static/browser.css
index d2c45fe..817da0b 100644
--- a/www/static/browser.css
+++ b/www/static/browser.css
@@ -65,6 +65,7 @@ Menu
 	margin: 10px;
 	display:inline-block;
 	text-align: center;
+	cursor: pointer;
 }
 
 .logout-item-link{
@@ -206,3 +207,15 @@ label{
 		margin-right: 10px;
 		cursor: pointer;
 }
+
+/*Context Menu*/
+#context-menu{
+	box-shadow: 1px 1px 1px 1px #1F3D4C;
+	background-color: white;
+}
+
+.context-menu-item{
+	cursor: pointer;
+}
+
+#copy-link.zeroclipboard-is-hover { background: #CCCCCC; }