zhoupzh
3 years ago
2 changed files with 307 additions and 2 deletions
Unified 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> | <span class="time-since poping up">{{.ModTime}}</span> | ||||
| </td> | </td> | ||||
| </tr> | </tr> | ||||
| {{end}} | {{end}} | ||||
| </tbody> | </tbody> | ||||
| </table> | </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"> | <table id="repo-files-table" class="ui single line table"> | ||||
| <thead> | <thead> | ||||
| <tr class="commit-list"> | <tr class="commit-list"> | ||||
| @@ -59,6 +110,7 @@ | |||||
| {{range $item := .Files}} | {{range $item := .Files}} | ||||
| {{$entry := index $item 0}} | {{$entry := index $item 0}} | ||||
| {{$commit := index $item 1}} | {{$commit := index $item 1}} | ||||
| <tr> | <tr> | ||||
| {{if $entry.IsSubModule}} | {{if $entry.IsSubModule}} | ||||
| <td> | <td> | ||||
| @@ -73,7 +125,7 @@ | |||||
| </span> | </span> | ||||
| </td> | </td> | ||||
| {{else}} | {{else}} | ||||
| <td class="name four wide"> | |||||
| <td class="name four wide" id="menu"> | |||||
| <span class="truncate"> | <span class="truncate"> | ||||
| {{if $entry.IsDir}} | {{if $entry.IsDir}} | ||||
| {{$subJumpablePathName := $entry.GetSubJumpablePathName}} | {{$subJumpablePathName := $entry.GetSubJumpablePathName}} | ||||
| @@ -101,9 +153,261 @@ | |||||
| </td> | </td> | ||||
| <td class="text right age three wide">{{TimeSince $commit.Committer.When $.Lang}}</td> | <td class="text right age three wide">{{TimeSince $commit.Committer.When $.Lang}}</td> | ||||
| </tr> | </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}} | {{end}} | ||||
| </tbody> | </tbody> | ||||
| </table> | </table> | ||||
| {{if .ReadmeExist}} | {{if .ReadmeExist}} | ||||
| {{template "repo/view_file" .}} | {{template "repo/view_file" .}} | ||||
| {{end}} | {{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> | |||||