zhoupzh
3 years ago
2 changed files with 307 additions and 2 deletions
Split View
Diff Options
+ 2
- 1
templates/repo/cloudbrain/models/dir_list.tmpl
View File
| @@ -20,8 +20,9 @@ | |||
| <span class="time-since poping up">{{.ModTime}}</span> | |||
| </td> | |||
| </tr> | |||
| {{end}} | |||
| </tbody> | |||
| </table> | |||
| {{end}} | |||
| {{end}} | |||
+ 305
- 1
templates/repo/view_list.tmpl
View File
| @@ -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> | |||