From 6645f0fd69bdd79c2d4058bb744486b11c10e5ce Mon Sep 17 00:00:00 2001
From: bee0005 <bee0005@naver.com>
Date: Sun, 4 Sep 2016 14:49:29 +0000
Subject: [PATCH] update right click menu

---
 app/assets/javascripts/application.js   |  6 +++-
 app/assets/javascripts/contextmenu.js   | 15 ++++++++++
 app/assets/stylesheets/application.scss |  5 +++-
 app/assets/stylesheets/contextmenu.css  | 37 +++++++++++++++++++++++++
 app/views/home/index.html.erb           | 29 +++++++++++++++++++
 5 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/contextmenu.js
 create mode 100644 app/assets/stylesheets/contextmenu.css

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 01dd63c..a9a6fd9 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -52,4 +52,8 @@
 //= require js/datatables/dataTables.keyTable.min.js
 //= require js/datatables/dataTables.responsive.min.js
 //= require js/datatables/responsive.bootstrap.min.js
-//= require js/datatables/dataTables.scroller.min.js
\ No newline at end of file
+//= require js/datatables/dataTables.scroller.min.js
+
+// Right Click Event
+
+//= require contextmenu
\ No newline at end of file
diff --git a/app/assets/javascripts/contextmenu.js b/app/assets/javascripts/contextmenu.js
new file mode 100644
index 0000000..ab6ac8f
--- /dev/null
+++ b/app/assets/javascripts/contextmenu.js
@@ -0,0 +1,15 @@
+function CheckLocation(){
+	  $(document).mousedown(function(e){
+	    // context menu 가 아닌 다른 영역을 클릭한경우 판단 
+	    if ($(e.target).parents(".contextmenu").length !== 0) 
+	      return;
+	    $(".contextmenu").hide();
+	    $(document).unbind('mousedown');
+	  });
+}
+function ShowContextMenu(className){
+	$("."+className).css({
+    left:event.pageX+"px",
+    top:event.pageY+"px"
+  }).show();
+}
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index d63a66e..86adcb4 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -14,7 +14,10 @@
  *
 
  */
- 
+
+//Right Click Event 
+@import "contextmenu";
+
 @import "bootstrap-sprockets";
 @import "bootstrap";
 
diff --git a/app/assets/stylesheets/contextmenu.css b/app/assets/stylesheets/contextmenu.css
new file mode 100644
index 0000000..ae51d7e
--- /dev/null
+++ b/app/assets/stylesheets/contextmenu.css
@@ -0,0 +1,37 @@
+@CHARSET "EUC-KR";
+
+.contextmenu { 
+  border:1px solid #565656;
+  background-color:#f5f5f5;
+  color:#333;
+  font-size:11px;
+  position:absolute;
+  display:none;
+  z-index:100;
+}
+.contextmenu ul {
+  list-style:none;
+  margin:0;
+  padding:0;
+}
+
+.contextmenu ul li {
+  line-height:13px;
+}
+
+.menuitem { 
+  padding:5px 15px 5px 15px;
+  white-space:nowrap;
+  cursor:default;
+}
+
+.hover { 
+  background-color:#0088cc;
+  color:#fff;
+}
+
+.divider {
+  margin:2px 3px;
+  border-top:1px solid #ccc;
+  border-bottom:1px solid #fff;
+}
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 97c04a9..435ecbb 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -1,3 +1,9 @@
+<div class="contextmenu Del_dir">
+	  <ul>
+	    <li class="menuitem"><i class="fa fa-trash"></i> Delete</li>
+	  </ul>
+</div>
+
 <!-- create overlay page -->
   <div id="popup_mkdir" class="overlay">
 	  <div class="popup">
@@ -177,6 +183,29 @@
   
   <script type="text/javascript">
   /* right click */
+  $(function(){
+		$(".menuitem").mouseover(function(e){
+	    var $el = $(this);
+	    if ( !$el.hasClass('hover'))
+	      $el.addClass('hover');
+	  }).mouseout(function(e){
+	  var $el = $(this);
+	    if($el.hasClass('hover'))
+	      $el.removeClass('hover');
+	  });
+	  
+  	//AccessGroup Contextmenu
+  	$("#datatable_body").on('contextmenu', function(event) {
+  	  ShowContextMenu("Del_dir");
+  	  CheckLocation();	  
+  	  return false;
+  	});	
+  	$("#TESTT").on('contextmenu', function(event) {
+  	  ShowContextMenu("Del_dir");
+  	  CheckLocation();	  
+  	  return false;
+  	});	
+  });
   
     $(document).ready(function() {
       $('#datatable').dataTable();