gCubeSystem
/
cdn-experiments
16
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Compare commits

base: gCubeSystem:master
Branches Tags
gCubeSystem:master
gCubeSystem:ccp-features
gCubeSystem:t2
gCubeSystem:t1
..
compare: gCubeSystem:ccp-features
Branches Tags
gCubeSystem:master
gCubeSystem:ccp-features
gCubeSystem:t2
gCubeSystem:t1

2 Commits
master ... ccp-featur

Author SHA1 Message Date
Marco Lettere 513fc3c2be Merge pull request 'master' (#12) from master into ccp-features 
Reviewed-on: #12
 2023-10-06 16:22:57 +02:00
Marco Lettere 891f4fcc7f Merge pull request 'master' (#11) from master into ccp-features 
Reviewed-on: #11
 2023-10-06 11:19:03 +02:00
4 changed files with 25 additions and 94 deletions
Show Stats Expand all files Collapse all files

4
README.md
View File

@ -1,5 +1,3 @@
# cdn-experiments
Experiments for static web components.
Be aware! This repo will soon be deprecated.
Experiments for static web components

105
ccp/js/inputwidgetcontroller.js
View File

@ -35,12 +35,6 @@ class CCPInputWidgetController extends HTMLElement {
}else if(this.isSecret()){
this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-secret>`
}else if(this.isBoolean()){
this.innerHTML += `<d4s-ccp-input-boolean readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
}else if(this.isNumber()){
this.innerHTML += `<d4s-ccp-input-simple type="number" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-simple>`
}else{
this.innerHTML += `<d4s-ccp-input-simple readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-simple>`
}
@ -64,20 +58,6 @@ class CCPInputWidgetController extends HTMLElement {
return this.isEnum() && (this.#data.schema.format === "checklist")
}
isNumber(){
return (this.#data.schema.type === "string") &&
("format" in this.#data.schema) &&
(this.#data.schema.format != null) &&
(this.#data.schema.format.toLowerCase() === "number")
}
isBoolean(){
return (this.#data.schema.type === "string") &&
("format" in this.#data.schema) &&
(this.#data.schema.format != null) &&
(this.#data.schema.format.toLowerCase() === "boolean")
}
isEnum(){
return (this.#data.schema.type === "string") && ("enum" in this.#data.schema)
}
@ -387,43 +367,6 @@ class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
}
window.customElements.define('d4s-ccp-input-checklist', CCPChecklistInputWidgetController);
class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
constructor(){
super()
}
connectedCallback(){
this.value.forEach((v,i)=>{ this.value[i] = v === "" ? false : v})
this.rootdoc.addEventListener("input", ev=>{
if(ev.target.getAttribute("name") === this.name){
const index = Number(ev.target.getAttribute("data-index"))
this.value[index] = ev.target.checked
}
})
}
content(){
if(this.value.length <= 1){
return `
<div class="my-2 form-check form-switch form-check-inline">
<input data-index="0" value="${this.value.length ? this.value[0] : false}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.value[0] == "true" ? 'checked' : ''} value="${ this.value[0]}"/>
</div>
`
}
var out =
this.value.map((c,i)=>{
return `
<div class="my-2 form-check form-switch form-check-inline">
<input data-index="${i}" value="${c}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${c == "true" ? 'checked' : ''} value="${this.value[i]}"/>
</div>
`
}).join("\n")
return out
}
}
window.customElements.define('d4s-ccp-input-boolean', CCPBooleanInputWidgetController);
class CCPTextAreaWidgetController extends CCPBaseInputWidgetController{
constructor(){
@ -509,8 +452,20 @@ window.customElements.define('d4s-ccp-input-file', CCPFileInputWidgetController)
class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
#iss = null;
#addresses = {
"https://accounts.dev.d4science.org/auth/realms/d4science" : "https://workspace-repository.dev.d4science.org/storagehub/workspace",
"https://accounts.pre.d4science.org/auth/realms/d4science" : "https://pre.d4science.org/workspace",
"https://accounts.d4science.org/auth/realms/d4science" : "https://api.d4science.org/workspace"
};
constructor(){
super()
this.#iss = document.querySelector("d4s-boot-2").loginToken.iss
}
get baseurl(){
return this.#addresses[this.#iss]
}
connectedCallback(){
@ -520,41 +475,22 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
this.value[index] = ev.target.value
}
})
}
addToolContent(){
const iss = document.querySelector("d4s-boot-2").loginToken.iss;
const addresses = {
"https://accounts.dev.d4science.org/auth/realms/d4science" : "https://workspace-repository.dev.d4science.org/storagehub/workspace",
"https://accounts.pre.d4science.org/auth/realms/d4science" : "https://pre.d4science.org/workspace",
"https://accounts.d4science.org/auth/realms/d4science" : "https://api.d4science.org/workspace"
};
this.rootdoc.querySelector("div[name=tools]").innerHTML += `
<svg name="trigger" style="width:24;height:24;fill:#007bff; cursor:pointer" viewBox="0 -960 960 960">
<path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Zm84-80h516l72-240H316l-72 240Zm0 0 72-240-72 240Zm-84-400v-80 80Z"/>
</svg>
<div name="ws" class="d-none position-absolute shadow border border-primary bg-light p-2" style="left: 100%;z-index:1000; line-height:1.5rem;overflow:hidden;padding:5px;">
<div class="d-flex justify-content-between" style="border-bottom: solid 1px gray;">
<h5 class="text-secondary">Access your workspace</h5>
<span class="btn text-danger p-0" style="font-weight:bold" name="closebtn">x</span>
</div>
<div style="min-width:350px; max-width:500px;overflow-x:hidden;text-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem;">
<d4s-storage-tree
base-url="${addresses[iss]}"
file-download-enabled="true"
show-files="true"
allow-drag="true"/>
</div>
</div>
<d4s-storage-tree
class="d-none position-absolute shadow border border-primary bg-light"
style="left: 100%; margin: 0 0 0 -.5rem;min-width:350px; max-width:500px;z-index:1000; line-height:1.5rem;overflow-x:hidden;text-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem; padding:5px;"
base-url="${this.baseurl}"
file-download-enabled="true"
show-files="true"
allow-drag="true"/>
`
const ws = this.rootdoc.querySelector("div[name=ws]")
const ws = this.rootdoc.querySelector("d4s-storage-tree")
this.rootdoc.querySelector("svg[name=trigger]").addEventListener("click", ev=>{
ws.classList.toggle("d-none")
})
this.rootdoc.querySelector("span[name=closebtn]").addEventListener("click", ev=>{
ws.classList.add("d-none")
})
this.addEventListener("dragover", ev=>{
ev.preventDefault()
@ -575,7 +511,6 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
}
content(){
this.addToolContent()
if(this.value.length <= 1){
return `
<input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>`

4
ccp/js/inputwidgeteditorcontroller.js
View File

@ -119,11 +119,9 @@ class CCPInputWidgetEditorController extends HTMLElement{
<option value="date" ${this.isSelectedFormat('date') ? "selected" : ""}>Date</option>
<option value="time" ${this.isSelectedFormat('time') ? "selected" : ""}>Time</option>
<option value="dateTime" ${this.isSelectedFormat('dateTime') ? "selected" : ""}>Date time</option>
<option value="number" ${this.isSelectedFormat('number') ? "selected" : ""}>Number</option>
<option value="boolean" ${this.isSelectedFormat('boolean') ? "selected" : ""}>True/False</option>
<option value="code" ${this.isSelectedFormat('code') ? "selected" : ""}>Code</option>
<option value="file" ${this.isSelectedFormat('file') ? "selected" : ""}>File</option>
<option value="remotefile" ${this.isSelectedFormat('remotefile') ? "selected" : ""}>Remote file</option>
<option value="remotefile" ${this.isSelectedFormat('file') ? "selected" : ""}>Remote file</option>
<option value="secret" ${this.isSelectedFormat('secret') ? "selected" : ""}>Secret</option>
<option value="url" ${this.isSelectedFormat('url') ? "selected" : ""}>Url</option>
</select>

6
storage/d4s-storage.js
View File

@ -417,10 +417,10 @@ class D4SStorageTree extends D4SStorageHtmlElement {
data
.filter(item => this.showFiles || item['@class'].includes('FolderItem'))
.forEach(item => {
ul.appendChild(this.createListItem(item.title, item.id, item['@class'], parentId));
ul.appendChild(this.createListItem(item.name, item.id, item['@class'], parentId));
})
} else {
ul.appendChild(this.createListItem(data.displayName ? data.displayName : data.title, data.id, data['@class'], parentId));
ul.appendChild(this.createListItem(data.displayName ? data.displayName : data.name, data.id, data['@class'], parentId));
}
parentElement.appendChild(ul);
}
@ -434,7 +434,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
if (parentId) {
li.setAttribute(D4SStorageTree.parentid_attr, parentId);
}
const icon = type.includes('FolderItem') || type.includes("SharedFolder")? "folder.svg" : "file-earmark.svg"
const icon = type.includes('FolderItem') ? "folder.svg" : "file-earmark.svg"
li.innerHTML = `
<img class="px-1" src="${this.srcBaseURL}/img/${icon}"</img>
<span>${label}</span>