update right click menu

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
+//= require js/datatables/dataTables.scroller.min.js
+
+// Right Click Event
+
+//= require contextmenu

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();
+}

app/assets/stylesheets/application.scss

@@ -14,7 +14,10 @@
  *
 
  */
- 
+
+//Right Click Event 
+@import "contextmenu";
+
 @import "bootstrap-sprockets";
 @import "bootstrap";
 

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;
+}

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();