|
1 | | -import {getDefaults} from './utils.js'; |
2 | | -import {isoDoc} from './isomorphic.js'; |
3 | | -import {bestLabel} from './model-rdf.js'; |
| 1 | +import { getDefaults } from './utils.js'; |
| 2 | +import { isoDoc } from './isomorphic.js'; |
| 3 | +import { insertSolidosOutliner,solidosShow } from './view-solidos.js'; |
| 4 | +import { makePage } from './sol-page.js'; |
| 5 | +import { fetchNonRdfData } from './model.js'; |
| 6 | +import { bestLabel } from './model-rdf.js'; |
4 | 7 | import { registerView } from './controller.js'; |
5 | | -import {fetchNonRdfData} from './model.js'; |
| 8 | +import { sidebarLeftTheme } from '../themes/sidebar-left.js'; |
6 | 9 |
|
7 | 10 | registerView({ |
8 | | - actions: {containerClick} |
| 11 | + actions: {fileClick,folderClick,toggleHiddenClick} |
9 | 12 | }); |
10 | 13 |
|
11 | 14 | export class SolContainer extends HTMLElement { |
12 | 15 | constructor() { |
13 | 16 | super(); |
14 | 17 | } |
15 | 18 | async connectedCallback(){ |
16 | | - let element = await getDefaults(this) |
17 | | - await container(element); |
| 19 | + await getDefaults(this) |
| 20 | + await prepContainerWrapper(this); |
18 | 21 | } |
19 | 22 | } |
20 | 23 | customElements.define("sol-container",SolContainer); |
21 | 24 |
|
22 | 25 |
|
23 | | -async function container(element){ |
24 | | -// let themeString = await fetchNonRdfData({source:'this.theme,type:'component'}); |
25 | | - let url = element.source; |
| 26 | +async function prepContainerWrapper(element){ |
| 27 | + element.themeString = sidebarLeftTheme ; |
| 28 | + await makePage(element) |
| 29 | + let header = element.querySelector('.sol-header'); |
| 30 | + header.innerHTML += `<a href="#" onclick="solrun(event,'toggleHiddenClick')" class="sol-icon">H</a>`; |
| 31 | + insertSolidosOutliner(element.querySelector('.sol-display')); |
| 32 | + await fillContainerWrapper(element); |
| 33 | +} |
| 34 | +async function fillContainerWrapper(element){ |
| 35 | + let showHidden = element.classList.contains('showHidden'); |
| 36 | + let url = element.source || element.getAttribute('source'); |
26 | 37 | let results = { |
27 | 38 | files : "", |
28 | 39 | folders : "", |
29 | 40 | }; |
30 | 41 | const node = UI.rdf.sym(url); |
| 42 | + let parentDir = url.replace(/[^\/]+\/$/,'/').replace(/\/\/$/,'/'); |
| 43 | + if( (parentDir.split('/').length)==3 ) parentDir=null; |
31 | 44 | try { |
32 | 45 | await UI.store.fetcher.load(node.doc(),{headers:{Accept:"text/turtle"}}); |
33 | 46 | } |
34 | 47 | catch(e){console.log(e)} |
35 | | - let resources = UI.store.match( node, UI.ns.ldp('contains') ); |
36 | 48 | let s = "display:block; text-decoration:none;height:1rem;" |
| 49 | + let resources = UI.store.match( node, UI.ns.ldp('contains') ); |
| 50 | + let folderIcon = `<img src="./assets/folder.png" style="height:1rem;">`; |
37 | 51 | for(let resource of resources){ |
38 | | - let label = bestLabel(resource.object); |
39 | 52 | let link = resource.object.value; |
| 53 | + let label = bestLabel(resource.object); |
| 54 | + if( !showHidden ){ |
| 55 | + if(label.startsWith('.')) continue; |
| 56 | + if(label.startsWith('#')) continue; |
| 57 | + if(label.endsWith('#')) continue; |
| 58 | + if(label.endsWith('~')) continue; |
| 59 | + if(label.endsWith('.part')) continue; |
| 60 | + } |
40 | 61 | let isContainer = link.endsWith('/'); |
41 | 62 | if(isContainer) { |
42 | 63 | label = label.replace(/^.*\//,'').replace(/\/$/,''); |
43 | | - label = `<img src="./assets/folder.png" style="height:1rem;"> ${label}` |
44 | | - results.folders += `<a href="${link}" onclick="solrun(event,'containerClick')" style="${s}">${label}</a>`; |
| 64 | + label = `${folderIcon} ${label}` |
| 65 | + results.folders += `<a href="${link}" onclick="solrun(event,'folderClick')" style="${s}">${label}</a>`; |
45 | 66 |
|
46 | 67 | } |
47 | 68 | else{ |
48 | 69 | let types = UI.store.match(resource.subject,UI.ns.rdf('type')); |
49 | 70 | let type=getMimeType(link); |
50 | | - label = `<img src="./assets/document.png" style="height:1rem;"> ${label}` |
51 | | - results.files += `<a href="${link}" onclick="solRun(event,'fileClick')" data-type="${type}" style="${s}">${label}</a>`; |
| 71 | + label = `<span style="white-space:nowrap" title="${label}"><img src="./assets/document.png" style="height:1rem;"> ${label}</span>` |
| 72 | + results.files += `<a href="${link}" onclick="solrun(event,'fileClick')" data-type="${type}" style="${s}">${label}</a>`; |
52 | 73 | } |
53 | 74 | } |
54 | 75 | let headerArea = isoDoc.createElement('DIV'); |
55 | 76 | let folderArea = isoDoc.createElement('DIV'); |
56 | 77 | let fileArea = isoDoc.createElement('DIV'); |
57 | 78 | let displayArea = isoDoc.createElement('DIV'); |
58 | | - element.classList.add('sol-container'); |
59 | | - element.appendChild(headerArea); |
60 | | - element.appendChild(folderArea); |
61 | | - element.appendChild(fileArea); |
| 79 | + let sidebar = element.querySelector('.sol-sidebar') || element.closest('.sol-container').querySelector('.sol-sidebar'); |
| 80 | + |
| 81 | + if(parentDir) results.folders =`<a href="${parentDir}" onclick="solrun(event,'folderClick')" style="${s}">${folderIcon} ..</a>` + results.folders; |
| 82 | + |
62 | 83 | headerArea.innerHTML = element.source; |
63 | 84 | folderArea.innerHTML = results.folders; |
64 | 85 | fileArea.innerHTML = results.files; |
65 | | - /* styles */ |
66 | | - element.style.width = "17rem"; |
| 86 | + sidebar.innerHTML = ""; |
| 87 | + sidebar.classList.add('sol-container-sidebar'); |
| 88 | + sidebar.appendChild(headerArea); |
| 89 | + sidebar.appendChild(folderArea); |
| 90 | + sidebar.appendChild(fileArea); |
| 91 | + |
| 92 | + sidebar.style.width = "17rem"; |
| 93 | + sidebar.style.display = "block"; |
| 94 | + sidebar.style['overflow-y']="hidden" |
67 | 95 | folderArea.style['margin-bottom']="1rem" |
68 | 96 | folderArea.style.height="30%" |
69 | | - fileArea.style.height="calc( 70% - 3rem )" |
| 97 | + fileArea.style.height="calc( 70% - 2rem )" |
70 | 98 | fileArea.style.overflow="auto" |
71 | 99 | folderArea.style.overflow="auto" |
72 | 100 | folderArea.style.backgroundColor="#eeeeee" |
73 | 101 | fileArea.style.backgroundColor="#eeeeee" |
74 | 102 | folderArea.style['border-radius']="0.3rem" |
75 | 103 | fileArea.style['border-radius']="0.3rem" |
76 | | - element.style.display = "block"; |
77 | 104 | } |
78 | 105 |
|
79 | | -async function containerClick(clickedElement){ |
| 106 | +async function fileClick(clickedElement){ |
| 107 | + const display = clickedElement.closest('.sol-container').querySelector('.sol-display'); |
| 108 | + let source = clickedElement.href || clickedElement.parentNode.href; |
| 109 | + solidosShow(source,display); |
| 110 | +} |
| 111 | +async function folderClick(clickedElement){ |
| 112 | + const element = clickedElement.closest('.sol-container'); |
| 113 | + element.source = clickedElement.getAttribute('href'); |
| 114 | + fillContainerWrapper(element); |
| 115 | +} |
| 116 | +async function toggleHiddenClick(clickedElement){ |
| 117 | + const element = clickedElement.closest('.sol-container'); |
| 118 | + element.classList.toggle('showHidden'); |
| 119 | + fillContainerWrapper(element); |
80 | 120 | } |
81 | 121 |
|
82 | 122 | function getMimeType(link){ |
83 | 123 | // TBD use mime library |
84 | 124 | let ext = link.replace(/[^\.]+\./,''); |
85 | 125 | if(ext=='ttl') return 'text/turtle'; |
86 | 126 | if(ext=='html') return 'text/html'; |
| 127 | + if(ext=='txt') return 'text/plain'; |
87 | 128 | return ext; |
88 | 129 | } |
89 | 130 |
|
|
0 commit comments