cdn-experiments/ccp/js/methodlistcontroller.js

231 lines
6.4 KiB
JavaScript

class CCPMethodList extends HTMLElement{
#boot;
#rootdoc;
#data;
#filtered;
#dragged = null;
#serviceurl;
constructor(){
super()
this.#boot = document.querySelector("d4s-boot-2")
this.#serviceurl = this.getAttribute("serviceurl")
this.#rootdoc = this.attachShadow({ "mode" : "open"})
this.render()
this.fetchProcesses()
}
render(){
this.#rootdoc.innerHTML = `
<div>
<style>
.process_container{
display: flex;
flex-direction:column;
}
input[name=search]{
display: block;
padding: 0.375rem 0.75rem;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
input:focus{
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}
ul.process_list{
list-style: none;
padding-left: 0;
color: #495057;
display: flex;
flex-direction: column;
gap: .25rem;
user-select: none;
}
li.process_list_item{
display: flex;
flex-direction: column;
gap: 0.25rem;
cursor: pointer;
border: solid 1px rgba(0,0,0,.3);
padding: 0.3rem;
border-radius: 0.3rem;
box-shadow: #333333 1px 1px 4px;
background: #eeeeee;
transition: background .3s;
}
li.process_list_item:hover{
background: #ffffff;
}
ul.keyword_list{
list-style: none;
display: flex;
flex-direction: row;
gap:2px;
padding-left: 0;
font-size: x-small;
font-weight: 300;
}
li.keyword_list_item{
display: inline-block;
padding: 0.25em 0.4em;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
background-color: #eeffff;
color: #0099CC;
border: solid 1px #0099CC;
}
.process_list_item_header{
margin: 0;
}
ul.author_list{
list-style: none;
display: flex;
flex-direction: row;
gap:2px;
padding-left: 0;
font-size: small;
font-weight: 300;
}
li.author_list_item{
display: inline-block;
padding: 0.25em 0.4em;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
background-color: #eeffff;
color: #9900CC;
border: solid 1px #9900CC;
}
</style>
<template id="PROCESS_LIST_TEMPLATE">
<ul class="process_list" name="process_list">
<li class="process_list_item" draggable="true">
<h4 class="process_list_item_header"></h4>
<i></i>
<ul name="authors" class="author_list">
<li class="author_list_item"></li>
</ul>
<ul name="keywords" class="keyword_list">
<li class="keyword_list_item"></li>
</ul>
</li>
</ul>
</template>
<div class="process_container">
<input name="search" type="text" placeholder="Search ..."/>
<ul name="process_list"></ul>
</div>
</div>
`
}
connectedCallback(){
}
fetchProcesses(){
console.log("Calling fetch processes")
this.#boot.secureFetch(this.#serviceurl + "/methods").
then(resp=>{
console.log("Received resp for processes ", resp.status)
return resp.json()
}).then(data=>{
console.log("Processes parsed to json", data)
this.#data = data
this.showList()
}).catch(err=>{
alert("Error while downloading methods: ", err)
})
}
showList(){
this.enableSearch()
this.updateList()
}
updateList(filter){
if(filter === "" || filter == null || filter == undefined){
this.#filtered = []
}else{
const f = filter.toLowerCase()
this.#filtered = this.#data.filter(d=>{
return false ||
(d.title.toLowerCase().indexOf(f) !== -1)||
(d.description.indexOf(f) !== -1) ||
(d.keywords.map(k=>k.toLowerCase()).indexOf(f) !== -1)
})
}
BSS.apply(this.#process_list_bss, this.#rootdoc)
}
enableSearch(){
const search = this.#rootdoc.querySelector("input[name=search]")
search.addEventListener("input", ev=>{
this.updateList(ev.currentTarget.value)
})
}
#process_list_bss = {
template : "#PROCESS_LIST_TEMPLATE",
target : "ul[name=process_list]",
"in" : this,
recurse : [
{
target : "li",
"in" : (e,d)=>this.#filtered,
on_dragstart : ev=>{
ev.dataTransfer.effectAllowed = 'move'
ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML)
ev.dataTransfer.setData('text/plain+ccpmethod', ev.currentTarget.bss_input.data.id)
ev.dataTransfer.setData('application/json+ccpmethod', JSON.stringify(ev.currentTarget.bss_input.data))
},
on_dragend : ev=>{
ev.preventDefault()
},
recurse : [
{
target : "h4",
apply : (e,d)=>{ e.textContent = `${d.title} v. ${d.version}` }
},
{
target : "i",
apply : (e,d)=>{ e.textContent = d.description }
},
{
target : "ul[name=authors]",
recurse : {
target : "li",
"in" : (e,d)=>d.metadata.filter(md=>md.role === "author"),
apply : (e,d)=>{ e.textContent = d.title }
}
},
{
target : "ul[name=keywords]",
recurse : {
target : "li",
"in" : (e,d)=>d.keywords,
apply : (e,d)=>{ e.alt = e.title = e.textContent = d }
}
}
]
}
]
}
}
window.customElements.define('d4s-ccp-methodlist', CCPMethodList);