forked from SolidOS/solid-panes
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprofilePane.source.ts
More file actions
118 lines (101 loc) · 3.92 KB
/
Copy pathprofilePane.source.ts
File metadata and controls
118 lines (101 loc) · 3.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/* Display A Public Profile Pane
**
** This is the subject's primary representation in the world.
** When anyone scans the QR code of their webid on theor card, it takes gthem
** to here and here alone. Thiks has better be good. This has better be
** worth the subjectjoing solid for
** - informative
**
** Usage: paneRegistry.register('profile/profilePane')
** or standalone script adding onto existing mashlib.
*/
import UI from 'solid-ui'
import { NamedNode } from 'rdflib'
import panes from 'pane-registry'
import { PaneDefinition } from '../types'
// const nodeMode = (typeof module !== 'undefined')
// const UI = require('solid-ui')
// const panes = require('pane-registry')
/*
if (nodeMode) {
UI = solidUi
panes = paneRegistry
} else { // Add to existing mashlib
panes = (window as any).panes
UI = panes.UI
}
*/
const kb = UI.store
const ns = UI.ns
const thisPane: PaneDefinition = { // 'noun_638141.svg' not editing
global: false,
icon: UI.icons.iconBase + 'noun_15059.svg', // head. noun_492246.svg for editing
name: 'profile',
label: function (subject) {
var t = kb.findTypeURIs(subject)
if (t[ns.vcard('Individual').uri] ||
t[ns.vcard('Organization').uri] ||
t[ns.foaf('Person').uri] ||
t[ns.schema('Person').uri]) return 'Profile'
return null
},
render: function (subject, dom) {
function paneDiv (dom: HTMLDocument, subject: NamedNode, paneName: string) {
var p = panes.byName(paneName)
var d = p.render(subject, dom)
d.setAttribute('style', 'border: 0.3em solid #444; border-radius: 0.5em')
return d
}
async function doRender (container: HTMLElement, subject: NamedNode | null, dom: HTMLDocument) {
if (!subject) throw new Error('subject missing')
const profile = subject.doc()
let otherProfiles = kb.each(subject, ns.rdfs('seeAlso'), null, profile)
if (otherProfiles.length > 0) {
try {
await kb.fetcher.load(otherProfiles)
} catch (err) {
container.appendChild(UI.widgets.errorMessageBlock(err))
}
}
var backgroundColor = kb.anyValue(subject, ns.solid('profileBackgroundColor'), null, subject.doc()) || '#ffffff'
// Todo: check format of color matches regexp and not too dark
container.style.backgroundColor = backgroundColor // @@ Limit to pale?
var highlightColor = kb.anyValue(subject, ns.solid('profileHighlightColor', null, subject.doc())) || '#090' // @@ beware injection attack
container.style.border = `0.3em solid ${highlightColor}`
container.style.borderRadius = '0.5em'
container.style.padding = '0.7em'
container.style.marginTop = '0.7em'
var table = container.appendChild(dom.createElement('table'))
// var top = table.appendChild(dom.createElement('tr'))
var main = table.appendChild(dom.createElement('tr'))
var bottom = table.appendChild(dom.createElement('tr'))
var statusArea = bottom.appendChild(dom.createElement('div'))
statusArea.setAttribute('style', 'padding: 0.7em;')
function heading (str: string) {
var h = main.appendChild(dom.createElement('h3'))
h.setAttribute('style', 'font-size: 120%; color:' + highlightColor + ';')
h.textContent = str
return h
}
// Todo: only show this if there is vcard info
heading('Contact')
const contactDisplay = paneDiv(dom, subject, 'contact')
contactDisplay.border = '0em' // override form
main.appendChild(contactDisplay)
if (kb.holds(subject, ns.foaf('knows'))) {
heading('Solid Friends')
UI.widgets.attachmentList(dom, subject, container, {
doc: profile,
modify: false,
predicate: ns.foaf('knows'),
noun: 'friend'
})
}
}
var container = dom.createElement('div')
doRender(container, subject, dom) // async
return container // initially unpopulated
} // render()
} //
export default thisPane
// ENDS