From 1cfe36ab6e8ec590d0af5412a2c1019c849afd4f Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Sat, 7 May 2022 09:56:19 +0800
Subject: [PATCH] fix issue

---
 templates/repo/cloudbrain/models/dir_list.tmpl |   3 +-
 templates/repo/view_list.tmpl                  | 306 ++++++++++++++++++++++++-
 2 files changed, 307 insertions(+), 2 deletions(-)

diff --git a/templates/repo/cloudbrain/models/dir_list.tmpl b/templates/repo/cloudbrain/models/dir_list.tmpl
index f7aaee009..4c87d3d83 100755
--- a/templates/repo/cloudbrain/models/dir_list.tmpl
+++ b/templates/repo/cloudbrain/models/dir_list.tmpl
@@ -20,8 +20,9 @@
             <span class="time-since poping up">{{.ModTime}}</span>
           </td>
         </tr>
+
         {{end}}
       </tbody>
     </table>
 
-{{end}}
+{{end}}
\ No newline at end of file
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index 98f61ca6e..6fb685cd5 100644
--- a/templates/repo/view_list.tmpl
+++ b/templates/repo/view_list.tmpl
@@ -1,3 +1,54 @@
+<style>
+.menu1 {
+      border: 1px solid white;
+      background-color: rgba(0, 0, 0, 0.5);
+      color: white;
+      position: fixed;
+      width: 150px;
+      
+    }
+.menu1 > .item:hover {
+	background-color: rgba(0, 0, 0, 0.5);
+
+}
+
+.menu1 > .item {
+	user-select: none;
+	line-height: 30px;
+	vertical-align: middle;
+	padding-inline-start: 20px;
+}
+.menu1.active {
+	display: block;
+}
+
+.menu1 > .item.disabled {
+	pointer-events: none;
+	opacity: .5;
+}
+.context-menu {
+    z-index: 99;
+	position: absolute;
+	padding: 0;
+	border-radius: 4px;
+	border: 1px solid #e3e9ed;
+	-webkit-box-shadow: none;
+    box-shadow: none;
+	background: #fff;
+	display: none !important;
+}
+.context-menu.active {
+	display: block !important;
+}
+.context-menu-operation  {
+	padding: 5px !important;
+	line-height: 1.78 !important;
+}
+.context-menu-icon{
+	float:  left !important;
+	margin: 0px 5px 0px 0px !important;
+}
+</style>
 <table id="repo-files-table" class="ui single line table">
 	<thead>
 		<tr class="commit-list">
@@ -59,6 +110,7 @@
 		{{range $item := .Files}}
 			{{$entry := index $item 0}}
 			{{$commit := index $item 1}}
+
 			<tr>
 				{{if $entry.IsSubModule}}
 					<td>
@@ -73,7 +125,7 @@
 						</span>
 					</td>
 				{{else}}
-					<td class="name four wide">
+					<td class="name four wide" id="menu">
 						<span class="truncate">
 							{{if $entry.IsDir}}
 								{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
@@ -101,9 +153,261 @@
 				</td>
 				<td class="text right age three wide">{{TimeSince $commit.Committer.When $.Lang}}</td>
 			</tr>
+			<tr style="display: none;" class="context-menu-one">
+				<td colspan="12">
+					<form class="ui column form" method="POST">
+						<div class="two fields" style="margin: 0;">
+							<div class="five wide field">
+								<input class="ui input" name="new_filename" type="text" value="test">
+							</div>
+							<div class="five wide field">
+								<button class="ui blue button popup-save" type="submit">保存</button>
+								<button class="ui basic button popup-close" type="button">取消</button>
+							</div>
+						</div>
+					</form>
+				</td>
+			</tr>
 		{{end}}
 	</tbody>
 </table>
 {{if .ReadmeExist}}
 	{{template "repo/view_file" .}}
 {{end}}
+
+<!-- 确认模态框 -->
+<div id="deletemodel">
+	<div class="ui basic modal context-menu-delete">
+		<div class="ui icon header">
+			<i class="trash icon"></i> {{.i18n.Tr "cloudbrain.delete_task"}}
+		</div>
+
+		<div class="content">
+			<p>{{.i18n.Tr "cloudbrain.task_delete_confirm"}}</p>
+		</div>
+		<div class="actions">
+			<div class="ui red basic inverted cancel button">
+				<i class="remove icon"></i> {{.i18n.Tr "cloudbrain.operate_cancel"}}
+			</div>
+			<div class="ui green basic inverted ok button">
+				<i class="checkmark icon"></i> {{.i18n.Tr "cloudbrain.operate_confirm"}}
+			</div>
+		</div>
+	</div>
+</div>
+
+<script>
+	$('.popup-close').on('click',function(e){
+		$(this).parents('tr').prev().css('display','table-row')
+		$(this).closest('tr').css("display",'none')
+	})
+	$('.name.four.wide').on('contextmenu',function(e){
+		let  ev = window.event || e;
+		ev.preventDefault();
+		menu.show(e)	
+	})
+
+	// const ContextMenu = function (options) {
+	// 	// 唯一实例
+	// 	let instance;
+
+	// 	// 创建实例方法
+	// 	function createMenu() {
+	// 		const ul = document.createElement("ul");
+	// 		ul.classList.add("custom-context-menu");
+	// 		const { menus } = options;
+	// 		if (menus && menus.length > 0) {
+	// 			for (let menu of menus) {
+	// 			const li = document.createElement("li");
+	// 			li.textContent = menu.name;
+	// 			li.onclick = menu.onClick;
+	// 			ul.appendChild(li);
+	// 			}
+	// 		}
+	// 		const body = document.querySelector("body");
+	// 		body.appendChild(ul);
+	// 		return ul;
+	// 	}
+
+	// 	return {
+	// 		// 获取实例的唯一方式
+	// 		getInstance: function () {
+	// 		if (!instance) {
+	// 			instance = createMenu();
+	// 		}
+	// 		return instance;
+	// 		},
+	// 	};
+	// };
+	
+	// const menuSinglton = ContextMenu({
+	// 	menus: [
+	// 		{
+	// 		name: "重命名",
+	// 		onClick: function (e) {
+	// 			console.log("menu1 clicked",e);
+	// 		},
+	// 		},
+	// 		{
+	// 		name: "删除",
+	// 		onClick: function (e,a) {
+	// 			console.log("menu2 clicked");
+	// 		},
+	// 		},
+	// 	],
+	// });
+
+	// function showMenu(e) {
+	// 	const menus = menuSinglton.getInstance();
+	// 	menus.style.top = `${e.clientY}px`;
+	// 	menus.style.left = `${e.clientX}px`;
+	// 	menus.style.display = "block";
+	// }
+
+	// function hideMenu(e) {
+	// 	const menus = menuSinglton.getInstance();
+	// 	menus.style.display = "none";
+	// }
+
+	// document.addEventListener("click", hideMenu);
+
+	// function doNothing(e) {
+    //   window.event.returnValue = false
+    //   menu.show(e)
+    //   return false
+    // }
+
+    class Menu {
+      constructor(param) {
+        this.target = document.createElement('div')
+
+        this.target.classList.add("ui","menu","compact","vertical","context-menu")
+        this.data = param.data
+        this.active = false
+		this.clickZ = this.click.bind(this)
+        this.closeZ = this.close2.bind(this)
+        document.addEventListener('click', this.closeZ)
+        for (let i = 0; i < this.data.length; i++) {
+          let div = document.createElement('a')
+		  div.classList.add('item','context-menu-operation')
+
+          if (this.data[i].disabled) {
+			div.classList.add('disabled')
+		  }
+		  
+		  
+		  
+          div.dataset.index = i.toString()
+		//   div.innerText = this.data[i].label
+		  div.innerHTML = `<i class="${this.data[i].icon}"></i>${this.data[i].label}`
+          div.addEventListener('click', this.clickZ)
+          this.target.append(div)
+        }
+        document.body.append(this.target)
+      }
+
+      click(e) {
+        let index = parseInt(e.target.dataset.index)
+        if (this.data[index].active) {
+          this.data[index].active(e, this.acEvent)
+        }
+        this.close()
+      }
+
+      show(e) {
+		this.active = true
+        this.nodeList = this.target.querySelectorAll('.item')
+        for (let i = 0; i < this.data.length; i++) {
+          if (this.data[i].beforeDisabled) {
+			let t = this.data[i].beforeDisabled(e)
+            this.data[i].disabled = t
+            if (t) {
+              this.nodeList[i].classList.add('disabled')
+            } else {
+              this.nodeList[i].classList.remove('disabled')
+            }
+          }
+        }
+		this.acEvent = e
+		this.target.style.top = `${e.pageY}px`
+		this.target.style.left = `${e.pageX}px`
+		this.target.style.minWidth = '90px'
+		this.target.classList.add('active')
+      }
+
+      close() {
+        this.active = false
+        this.target.classList.remove('active')
+      }
+
+      close2(e) {
+        if (!this.target.contains(e.target) && this.active) {
+          this.active = false
+          this.target.classList.remove('active')
+        }
+      }
+    }
+
+    const menu = new Menu({
+        data: [
+          {
+			label: '新标签打开',
+			icon:"file outline icon context-menu-icon",
+            active: (e, a) => {
+			  console.log(a.currentTarget.getElementsByTagName("a")[0].getAttribute('href'))
+			  window.open(a.currentTarget.getElementsByTagName("a")[0].getAttribute('href'))
+            }
+          },
+          {
+			label: '重命名',
+			icon:"edit icon context-menu-icon",
+            active: (e, a) => {
+		
+            //   if (a.target.nodeName === 'LI') {
+            //     a.target.remove()
+			//   }
+			document.querySelectorAll(".context-menu-one").forEach((ele)=>{
+				if(ele.style.display==='table-row'){
+
+					ele.style.display='none'
+					ele.previousElementSibling.style.display='table-row'
+				}
+			})
+			  if(a.currentTarget.parentNode.nextElementSibling){
+				a.currentTarget.parentNode.style.display = 'none'
+				a.currentTarget.parentNode.nextElementSibling.style.display='table-row'
+				// a.target.parentNode.nextElementSibling = 
+				a.currentTarget.parentNode.nextElementSibling.getElementsByTagName("input")[0].setAttribute("value", a.currentTarget.getElementsByTagName("a")[0].getAttribute('title'))
+
+			  }
+            },
+            // beforeDisabled: (e) => {
+			// 	console.log(e,e.target)
+            //   return e.target.nodeName !== 'TD'
+            // }
+          },
+          {
+			label: '删除',
+			icon:"trash icon context-menu-icon",
+            active: (e, a) => {
+			  console.dir(a)
+			  $('.context-menu-delete.modal')
+				.modal({
+					onApprove() {
+					// $('.edit-label.form').trigger('submit');
+					console.log(33333333)
+					}
+				})
+				.modal('show');
+            }
+          },
+        //   {
+        //     label: '啧啧',
+        //     disabled: true
+
+        //   }
+        ]
+      })
+
+	
+</script>
\ No newline at end of file