solid-panes 4.4.0 → 4.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -2
- package/dist/RDFXMLPane.css +70 -0
- package/dist/RDFXMLPane.d.ts +13 -0
- package/dist/RDFXMLPane.d.ts.map +1 -0
- package/dist/RDFXMLPane.js +46 -5
- package/dist/dataContentPane.css +271 -0
- package/dist/dataContentPane.d.ts +14 -0
- package/dist/dataContentPane.d.ts.map +1 -0
- package/dist/dataContentPane.js +68 -101
- package/dist/defaultPane.css +97 -0
- package/dist/defaultPane.d.ts +14 -0
- package/dist/defaultPane.d.ts.map +1 -0
- package/dist/defaultPane.js +9 -2
- package/dist/form/formPane.css +120 -0
- package/dist/form/pane.d.ts +4 -0
- package/dist/form/pane.d.ts.map +1 -0
- package/dist/form/pane.js +120 -54
- package/dist/humanReadablePane.css +129 -0
- package/dist/humanReadablePane.d.ts +13 -0
- package/dist/humanReadablePane.d.ts.map +1 -0
- package/dist/humanReadablePane.js +29 -18
- package/dist/icons/signUp.svg +9 -0
- package/dist/imagePane.css +4 -0
- package/dist/imagePane.d.ts +12 -0
- package/dist/imagePane.d.ts.map +1 -0
- package/dist/imagePane.js +19 -21
- package/dist/internal/internalPane.css +14 -0
- package/dist/internal/internalPane.d.ts +1 -0
- package/dist/internal/internalPane.d.ts.map +1 -1
- package/dist/internal/internalPane.js +5 -6
- package/dist/mainPage/header.js +2 -2
- package/dist/mainPage/index.d.ts +2 -1
- package/dist/mainPage/index.d.ts.map +1 -1
- package/dist/mainPage/index.js +23 -0
- package/dist/mainPage/menu.d.ts.map +1 -1
- package/dist/mainPage/menu.js +29 -2
- package/dist/n3Pane.css +49 -0
- package/dist/n3Pane.d.ts +13 -0
- package/dist/n3Pane.d.ts.map +1 -0
- package/dist/n3Pane.js +36 -5
- package/dist/outline/manager.js +20 -1
- package/dist/pad/padPane.css +6 -2
- package/dist/pad/padPane.js +1 -1
- package/dist/registerPanes.js +8 -8
- package/dist/schedule/schedulePane.css +294 -0
- package/dist/schedule/schedulePane.d.ts +23 -0
- package/dist/schedule/schedulePane.d.ts.map +1 -0
- package/dist/schedule/schedulePane.js +161 -61
- package/dist/social/editProfileDetails.d.ts +3 -3
- package/dist/social/editProfileDetails.d.ts.map +1 -1
- package/dist/social/editProfileDetails.js +222 -127
- package/dist/social/icons.d.ts +2 -0
- package/dist/social/icons.d.ts.map +1 -1
- package/dist/social/icons.js +39 -4
- package/dist/social/socialPane.css +838 -178
- package/dist/social/socialPane.d.ts.map +1 -1
- package/dist/social/socialPane.js +136 -43
- package/dist/social/socialSections.d.ts +11 -0
- package/dist/social/socialSections.d.ts.map +1 -1
- package/dist/social/socialSections.js +138 -62
- package/dist/social/spinner.d.ts +3 -0
- package/dist/social/spinner.d.ts.map +1 -0
- package/dist/social/spinner.js +13 -0
- package/dist/social/triage.d.ts +17 -0
- package/dist/social/triage.d.ts.map +1 -0
- package/dist/social/triage.js +79 -0
- package/dist/solid-panes.js +25772 -9576
- package/dist/solid-panes.js.map +1 -1
- package/dist/solid-panes.min.js +2583 -927
- package/dist/solid-panes.min.js.map +1 -1
- package/dist/{style → styles}/tabbedtab.css +0 -157
- package/dist/styles/utilities.css +5 -0
- package/dist/versionInfo.js +14 -14
- package/package.json +26 -25
- package/dist/icons/signup.png +0 -0
package/dist/dataContentPane.js
CHANGED
|
@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.dataContentPane = void 0;
|
|
7
7
|
var UI = _interopRequireWildcard(require("solid-ui"));
|
|
8
8
|
var $rdf = _interopRequireWildcard(require("rdflib"));
|
|
9
|
+
var _dompurify = _interopRequireDefault(require("dompurify"));
|
|
10
|
+
require("./dataContentPane.css");
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
10
13
|
/* Data content Pane
|
|
11
14
|
**
|
|
@@ -40,40 +43,40 @@ const dataContentPane = exports.dataContentPane = {
|
|
|
40
43
|
const myDocument = context.dom;
|
|
41
44
|
// const outliner = context.getOutliner(myDocument)
|
|
42
45
|
const rep = myDocument.createElement('table');
|
|
46
|
+
rep.classList.add('data-content-pane__table', 'data-content-pane__table--root');
|
|
47
|
+
const isMobileLayout = context.environment?.layout === 'mobile';
|
|
43
48
|
const sz = $rdf.Serializer(context.session.store);
|
|
44
49
|
const res = sz.rootSubjects(sts);
|
|
45
50
|
let roots = res.roots;
|
|
46
51
|
const subjects = res.subjects;
|
|
47
|
-
const loopBreakers = res.loopBreakers;
|
|
52
|
+
const loopBreakers = res.loopBreakers ?? {};
|
|
48
53
|
for (const x in loopBreakers) {
|
|
49
54
|
console.log('\tdataContentPane: loopbreaker:' + x);
|
|
50
55
|
}
|
|
51
|
-
const doneBnodes = {};
|
|
52
|
-
const referencedBnodes = {};
|
|
53
|
-
|
|
54
|
-
// The property tree for a single subject or anonymous node
|
|
55
|
-
function propertyTree(subject) {
|
|
56
|
-
// print('Proprty tree for '+subject)
|
|
56
|
+
const doneBnodes = {};
|
|
57
|
+
const referencedBnodes = {};
|
|
58
|
+
function propertyTree(subject, nestingLevel = 0) {
|
|
57
59
|
const rep = myDocument.createElement('table');
|
|
60
|
+
rep.classList.add('data-content-pane__table', 'data-content-pane__table--property');
|
|
58
61
|
let lastPred = null;
|
|
59
|
-
const
|
|
60
|
-
if (!
|
|
61
|
-
|
|
62
|
-
rep.appendChild(myDocument.createTextNode('...')); // just empty bnode as object
|
|
62
|
+
const subjectStatements = subjects[sz.toStr(subject)];
|
|
63
|
+
if (!subjectStatements) {
|
|
64
|
+
rep.appendChild(myDocument.createTextNode('...'));
|
|
63
65
|
return rep;
|
|
64
66
|
}
|
|
65
|
-
|
|
67
|
+
subjectStatements.sort();
|
|
66
68
|
let same = 0;
|
|
67
|
-
let predicateTD;
|
|
68
|
-
for (let i = 0; i <
|
|
69
|
-
const st =
|
|
69
|
+
let predicateTD;
|
|
70
|
+
for (let i = 0; i < subjectStatements.length; i++) {
|
|
71
|
+
const st = subjectStatements[i];
|
|
70
72
|
const tr = myDocument.createElement('tr');
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
73
|
+
tr.classList.add('data-content-pane__row--top-aligned', 'data-content-pane__row--property');
|
|
74
|
+
if (st.predicate.uri !== lastPred || isMobileLayout) {
|
|
75
|
+
if (!isMobileLayout && lastPred && same > 1) {
|
|
76
|
+
predicateTD?.setAttribute('rowspan', '' + same);
|
|
74
77
|
}
|
|
75
78
|
predicateTD = myDocument.createElement('td');
|
|
76
|
-
predicateTD.setAttribute('class', '
|
|
79
|
+
predicateTD.setAttribute('class', 'data-content-pane__predicate-cell');
|
|
77
80
|
const anchor = myDocument.createElement('a');
|
|
78
81
|
anchor.setAttribute('href', st.predicate.uri);
|
|
79
82
|
anchor.addEventListener('click', UI.widgets.openHrefInOutlineMode, true);
|
|
@@ -85,17 +88,19 @@ const dataContentPane = exports.dataContentPane = {
|
|
|
85
88
|
}
|
|
86
89
|
same++;
|
|
87
90
|
const objectTD = myDocument.createElement('td');
|
|
88
|
-
objectTD.
|
|
91
|
+
objectTD.classList.add('data-content-pane__value-cell');
|
|
92
|
+
objectTD.appendChild(objectTree(st.object, nestingLevel + 1));
|
|
89
93
|
tr.appendChild(objectTD);
|
|
90
94
|
rep.appendChild(tr);
|
|
91
95
|
}
|
|
92
|
-
if (lastPred && same > 1)
|
|
96
|
+
if (!isMobileLayout && lastPred && same > 1) {
|
|
97
|
+
predicateTD?.setAttribute('rowspan', '' + same);
|
|
98
|
+
}
|
|
93
99
|
return rep;
|
|
94
100
|
}
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
let res, anchor;
|
|
101
|
+
function objectTree(obj, nestingLevel = 0) {
|
|
102
|
+
let res;
|
|
103
|
+
let anchor;
|
|
99
104
|
switch (obj.termType) {
|
|
100
105
|
case 'NamedNode':
|
|
101
106
|
anchor = myDocument.createElement('a');
|
|
@@ -106,36 +111,33 @@ const dataContentPane = exports.dataContentPane = {
|
|
|
106
111
|
case 'Literal':
|
|
107
112
|
if (!obj.datatype || !obj.datatype.uri) {
|
|
108
113
|
res = myDocument.createElement('div');
|
|
109
|
-
res.
|
|
114
|
+
res.classList.add('data-content-pane__literal');
|
|
110
115
|
res.textContent = obj.value;
|
|
111
116
|
return res;
|
|
112
117
|
} else if (obj.datatype.uri === 'http://www.w3.org/1999/02/22-rdf-syntax-ns#XMLLiteral') {
|
|
113
118
|
res = myDocument.createElement('div');
|
|
114
|
-
res.
|
|
115
|
-
res.innerHTML = obj.value;
|
|
119
|
+
res.classList.add('embeddedXHTML');
|
|
120
|
+
res.innerHTML = _dompurify.default.sanitize(obj.value);
|
|
116
121
|
return res;
|
|
117
122
|
}
|
|
118
123
|
return myDocument.createTextNode(obj.value);
|
|
119
|
-
// placeholder - could be smarter,
|
|
120
|
-
|
|
121
124
|
case 'BlankNode':
|
|
122
125
|
{
|
|
123
126
|
if (obj.toNT() in doneBnodes) {
|
|
124
|
-
// Break infinite recursion
|
|
125
127
|
referencedBnodes[obj.toNT()] = true;
|
|
126
|
-
const
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
return
|
|
128
|
+
const referenceAnchor = myDocument.createElement('a');
|
|
129
|
+
referenceAnchor.setAttribute('href', '#' + obj.toNT().slice(2));
|
|
130
|
+
referenceAnchor.setAttribute('class', 'bnodeRef');
|
|
131
|
+
referenceAnchor.textContent = '*' + obj.toNT().slice(3);
|
|
132
|
+
return referenceAnchor;
|
|
131
133
|
}
|
|
132
|
-
doneBnodes[obj.toNT()] = true;
|
|
133
|
-
const newTable = propertyTree(obj);
|
|
134
|
-
doneBnodes[obj.toNT()] = newTable;
|
|
135
|
-
if (
|
|
136
|
-
newTable.
|
|
134
|
+
doneBnodes[obj.toNT()] = true;
|
|
135
|
+
const newTable = propertyTree(obj, nestingLevel);
|
|
136
|
+
doneBnodes[obj.toNT()] = newTable;
|
|
137
|
+
if (nestingLevel % 2 === 1) {
|
|
138
|
+
newTable.classList.add('data-content-pane__nested-table--light');
|
|
137
139
|
} else {
|
|
138
|
-
newTable.
|
|
140
|
+
newTable.classList.add('data-content-pane__nested-table--dark');
|
|
139
141
|
}
|
|
140
142
|
return newTable;
|
|
141
143
|
}
|
|
@@ -145,26 +147,21 @@ const dataContentPane = exports.dataContentPane = {
|
|
|
145
147
|
for (let i = 0; i < obj.elements.length; i++) {
|
|
146
148
|
const tr = myDocument.createElement('tr');
|
|
147
149
|
res.appendChild(tr);
|
|
148
|
-
tr.appendChild(objectTree(obj.elements[i]));
|
|
150
|
+
tr.appendChild(objectTree(obj.elements[i], nestingLevel + 1));
|
|
149
151
|
}
|
|
150
152
|
return res;
|
|
151
153
|
case 'Graph':
|
|
152
154
|
res = context.session.paneRegistry.byName('dataContents').statementsAsTables(obj.statements, context);
|
|
153
|
-
res.setAttribute('class', '
|
|
155
|
+
res.setAttribute('class', 'data-content-pane__nested-formula');
|
|
154
156
|
return res;
|
|
155
157
|
case 'Variable':
|
|
156
|
-
|
|
157
|
-
return res;
|
|
158
|
+
return myDocument.createTextNode('?' + obj.uri);
|
|
158
159
|
}
|
|
159
160
|
throw new Error('Unhandled node type: ' + obj.termType);
|
|
160
161
|
}
|
|
161
|
-
|
|
162
|
-
// roots.sort()
|
|
163
|
-
|
|
164
162
|
if (initialRoots) {
|
|
165
163
|
roots = initialRoots.concat(roots.filter(function (x) {
|
|
166
164
|
for (let i = 0; i < initialRoots.length; i++) {
|
|
167
|
-
// Max 2
|
|
168
165
|
if (x.sameTerm(initialRoots[i])) return false;
|
|
169
166
|
}
|
|
170
167
|
return true;
|
|
@@ -172,24 +169,25 @@ const dataContentPane = exports.dataContentPane = {
|
|
|
172
169
|
}
|
|
173
170
|
for (let i = 0; i < roots.length; i++) {
|
|
174
171
|
const tr = myDocument.createElement('tr');
|
|
175
|
-
tr.
|
|
172
|
+
tr.classList.add(i % 2 === 0 ? 'data-content-pane__row--even' : 'data-content-pane__row--odd', 'data-content-pane__row--root');
|
|
176
173
|
rep.appendChild(tr);
|
|
177
174
|
const subjectTD = myDocument.createElement('td');
|
|
175
|
+
subjectTD.classList.add('data-content-pane__subject-cell');
|
|
178
176
|
tr.appendChild(subjectTD);
|
|
179
177
|
const TDTree = myDocument.createElement('td');
|
|
178
|
+
TDTree.classList.add('data-content-pane__details-cell');
|
|
180
179
|
tr.appendChild(TDTree);
|
|
181
180
|
const root = roots[i];
|
|
182
181
|
if (root.termType === 'BlankNode') {
|
|
183
|
-
subjectTD.appendChild(myDocument.createTextNode(UI.utils.label(root)));
|
|
182
|
+
subjectTD.appendChild(myDocument.createTextNode(UI.utils.label(root)));
|
|
184
183
|
} else {
|
|
185
|
-
subjectTD.appendChild(objectTree(root));
|
|
184
|
+
subjectTD.appendChild(objectTree(root, 0));
|
|
186
185
|
}
|
|
187
|
-
TDTree.appendChild(propertyTree(root));
|
|
186
|
+
TDTree.appendChild(propertyTree(root, 0));
|
|
188
187
|
}
|
|
189
188
|
for (const bNT in referencedBnodes) {
|
|
190
|
-
// Add number to refer to
|
|
191
189
|
const table = doneBnodes[bNT];
|
|
192
|
-
|
|
190
|
+
if (table === true) continue;
|
|
193
191
|
const anchor = myDocument.createElement('a');
|
|
194
192
|
anchor.setAttribute('id', bNT.slice(2));
|
|
195
193
|
anchor.setAttribute('class', 'bnodeDef');
|
|
@@ -198,62 +196,31 @@ const dataContentPane = exports.dataContentPane = {
|
|
|
198
196
|
}
|
|
199
197
|
return rep;
|
|
200
198
|
},
|
|
201
|
-
// statementsAsTables
|
|
202
|
-
// View the data in a file in user-friendly way
|
|
203
199
|
render: function (subject, context) {
|
|
204
200
|
const myDocument = context.dom;
|
|
205
|
-
function
|
|
206
|
-
const
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
p.render = function (s2) {
|
|
211
|
-
const div = myDocument.createElement('div');
|
|
212
|
-
div.setAttribute('class', 'withinDocumentPane');
|
|
213
|
-
const plist = kb.statementsMatching(s2, undefined, undefined, subject);
|
|
214
|
-
outliner.appendPropertyTRs(div, plist, false, function (_pred, _inverse) {
|
|
215
|
-
return true;
|
|
216
|
-
});
|
|
217
|
-
return div;
|
|
218
|
-
};
|
|
219
|
-
for (let i = 0; i < roots.length; i++) {
|
|
220
|
-
const tr = myDocument.createElement('TR');
|
|
221
|
-
const root = roots[i];
|
|
222
|
-
tr.style.verticalAlign = 'top';
|
|
223
|
-
const td = outliner.outlineObjectTD(root, undefined, tr);
|
|
224
|
-
tr.appendChild(td);
|
|
225
|
-
div.appendChild(tr);
|
|
226
|
-
outliner.outlineExpand(td, root, {
|
|
227
|
-
pane: p
|
|
228
|
-
});
|
|
229
|
-
}
|
|
201
|
+
function applyEnvironmentAttributes(element) {
|
|
202
|
+
const environment = context.environment ?? {};
|
|
203
|
+
element.dataset.layout = environment.layout ?? 'desktop';
|
|
204
|
+
element.dataset.theme = environment.theme ?? 'light';
|
|
205
|
+
element.dataset.inputMode = environment.inputMode ?? 'pointer';
|
|
230
206
|
}
|
|
231
207
|
function mainRendering() {
|
|
232
|
-
const
|
|
208
|
+
const kb = context.session.store;
|
|
209
|
+
const sts = kb.statementsMatching(undefined, undefined, undefined, subject);
|
|
210
|
+
const initialRoots = [];
|
|
233
211
|
if (kb.holds(subject, undefined, undefined, subject)) {
|
|
234
212
|
initialRoots.push(subject);
|
|
235
213
|
}
|
|
236
|
-
// Then about the primary topic of the document if any
|
|
237
214
|
const ps = kb.any(subject, UI.ns.foaf('primaryTopic'), undefined, subject);
|
|
238
|
-
if (ps
|
|
215
|
+
if (ps && (ps.termType === 'NamedNode' || ps.termType === 'BlankNode')) {
|
|
216
|
+
initialRoots.push(ps);
|
|
217
|
+
}
|
|
239
218
|
div.appendChild(context.session.paneRegistry.byName('dataContents').statementsAsTables(sts, context, initialRoots));
|
|
240
219
|
}
|
|
241
|
-
const outliner = context.getOutliner(myDocument);
|
|
242
|
-
const kb = context.session.store;
|
|
243
220
|
const div = myDocument.createElement('div');
|
|
244
|
-
div.
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
// or we could keep all the pre-smushed triples.
|
|
248
|
-
const sts = kb.statementsMatching(undefined, undefined, undefined, subject); // @@ slow with current store!
|
|
249
|
-
|
|
250
|
-
// eslint-disable-next-line no-constant-condition
|
|
251
|
-
if (false) {
|
|
252
|
-
// keep code
|
|
253
|
-
alternativeRendering();
|
|
254
|
-
} else {
|
|
255
|
-
mainRendering();
|
|
256
|
-
}
|
|
221
|
+
div.classList.add('dataContentPane', 'data-content-pane');
|
|
222
|
+
applyEnvironmentAttributes(div);
|
|
223
|
+
mainRendering();
|
|
257
224
|
return div;
|
|
258
225
|
}
|
|
259
226
|
};
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
.defaultPane .bottom-border {
|
|
2
|
+
border: 0.2rem solid transparent;
|
|
3
|
+
width: 100%;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.defaultPane .bottom-border-active {
|
|
7
|
+
cursor: copy;
|
|
8
|
+
border: 0.2rem solid;
|
|
9
|
+
border-color: var(--color-bottom-border-highlight, rgb(100%, 65%, 0%));
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.defaultPane {
|
|
13
|
+
--default-pane-predicate-column: 16rem;
|
|
14
|
+
--default-pane-object-indent: 1.75rem;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.defaultPane > tr {
|
|
18
|
+
display: grid;
|
|
19
|
+
grid-template-columns: minmax(0, var(--default-pane-predicate-column)) minmax(0, 1fr);
|
|
20
|
+
align-items: flex-start;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.defaultPane > tr > td.pred {
|
|
24
|
+
grid-column: 1;
|
|
25
|
+
display: flex;
|
|
26
|
+
align-items: flex-start;
|
|
27
|
+
padding-left: 0 !important;
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
min-width: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.defaultPane > tr > td.pred > .labelTD {
|
|
33
|
+
flex: 1 1 auto;
|
|
34
|
+
min-width: 0;
|
|
35
|
+
margin: 0;
|
|
36
|
+
padding-top: 0;
|
|
37
|
+
padding-bottom: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.defaultPane > tr > td.pred > .iconTD {
|
|
41
|
+
flex: 0 0 auto;
|
|
42
|
+
width: auto;
|
|
43
|
+
margin: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.defaultPane > tr > td.obj {
|
|
47
|
+
grid-column: 2;
|
|
48
|
+
min-width: 0;
|
|
49
|
+
box-sizing: border-box;
|
|
50
|
+
align-self: start;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.defaultPane > tr > td[colspan='2'] {
|
|
54
|
+
grid-column: 1 / -1;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.defaultPane[data-layout='mobile'] > tr {
|
|
58
|
+
grid-template-columns: minmax(0, 1fr);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.defaultPane[data-layout='mobile'] > tr > td.pred,
|
|
62
|
+
.defaultPane[data-layout='mobile'] > tr > td.obj {
|
|
63
|
+
display: block;
|
|
64
|
+
grid-column: 1;
|
|
65
|
+
width: 100%;
|
|
66
|
+
box-sizing: border-box;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.defaultPane[data-layout='mobile'] > tr > td.pred {
|
|
70
|
+
padding-bottom: var(--spacing-small, 0.1rem);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.defaultPane[data-layout='mobile'] > tr > td.obj {
|
|
74
|
+
padding-left: var(--default-pane-object-indent) !important;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@media (max-width: 700px) {
|
|
78
|
+
.defaultPane > tr {
|
|
79
|
+
grid-template-columns: minmax(0, 1fr);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.defaultPane > tr > td.pred,
|
|
83
|
+
.defaultPane > tr > td.obj {
|
|
84
|
+
display: block;
|
|
85
|
+
grid-column: 1;
|
|
86
|
+
width: 100%;
|
|
87
|
+
box-sizing: border-box;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.defaultPane > tr > td.pred {
|
|
91
|
+
padding-bottom: var(--spacing-small, 0.1rem);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.defaultPane > tr > td.obj {
|
|
95
|
+
padding-left: var(--default-pane-object-indent) !important;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { DataBrowserContext } from 'pane-registry';
|
|
2
|
+
import type { BlankNode, Literal, NamedNode } from 'rdflib';
|
|
3
|
+
import './defaultPane.css';
|
|
4
|
+
type DefaultPaneSubject = NamedNode | BlankNode | Literal;
|
|
5
|
+
type DefaultPaneDefinition = {
|
|
6
|
+
icon: string;
|
|
7
|
+
name: string;
|
|
8
|
+
audience: NamedNode[];
|
|
9
|
+
label: (subject: DefaultPaneSubject) => string;
|
|
10
|
+
render: (subject: DefaultPaneSubject, context: DataBrowserContext) => HTMLDivElement;
|
|
11
|
+
};
|
|
12
|
+
export declare const defaultPane: DefaultPaneDefinition;
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=defaultPane.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defaultPane.d.ts","sourceRoot":"","sources":["../src/defaultPane.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAqB,MAAM,eAAe,CAAA;AAC1E,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAa,MAAM,QAAQ,CAAA;AACtE,OAAO,mBAAmB,CAAA;AAG1B,KAAK,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAEzD,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,EAAE,CAAA;IACrB,KAAK,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,MAAM,CAAA;IAC9C,MAAM,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,kBAAkB,KAAK,cAAc,CAAA;CACrF,CAAA;AAcD,eAAO,MAAM,WAAW,EAAE,qBAqGzB,CAAA"}
|
package/dist/defaultPane.js
CHANGED
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.defaultPane = void 0;
|
|
7
7
|
var UI = _interopRequireWildcard(require("solid-ui"));
|
|
8
8
|
var $rdf = _interopRequireWildcard(require("rdflib"));
|
|
9
|
+
require("./defaultPane.css");
|
|
9
10
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
10
11
|
/* Default Pane
|
|
11
12
|
**
|
|
@@ -24,6 +25,10 @@ const defaultPane = exports.defaultPane = {
|
|
|
24
25
|
},
|
|
25
26
|
render: function (subject, context) {
|
|
26
27
|
const dom = context.dom;
|
|
28
|
+
function applyEnvironmentAttributes(element) {
|
|
29
|
+
const environment = context.environment ?? {};
|
|
30
|
+
element.dataset.layout = environment.layout ?? 'desktop';
|
|
31
|
+
}
|
|
27
32
|
const filter = function (pred, inverse) {
|
|
28
33
|
if (typeof context.session.paneRegistry.byName('internal').predicates[pred.uri] !== 'undefined') {
|
|
29
34
|
return false;
|
|
@@ -40,16 +45,18 @@ const defaultPane = exports.defaultPane = {
|
|
|
40
45
|
subject = kb.canon(subject);
|
|
41
46
|
const div = dom.createElement('div');
|
|
42
47
|
div.setAttribute('class', 'defaultPane');
|
|
48
|
+
applyEnvironmentAttributes(div);
|
|
43
49
|
// appendRemoveIcon(div, subject, div)
|
|
44
50
|
|
|
45
|
-
let plist = kb.statementsMatching(subject);
|
|
51
|
+
let plist = subject.termType === 'Literal' ? [] : kb.statementsMatching(subject);
|
|
46
52
|
outliner.appendPropertyTRs(div, plist, false, filter);
|
|
47
53
|
plist = kb.statementsMatching(undefined, undefined, subject);
|
|
48
54
|
outliner.appendPropertyTRs(div, plist, true, filter);
|
|
55
|
+
const subjectStatement = subject.termType === 'BlankNode' ? kb.anyStatementMatching(subject) : undefined;
|
|
49
56
|
if (subject.termType === 'Literal' && subject.value.slice(0, 7) === 'http://') {
|
|
50
57
|
outliner.appendPropertyTRs(div, [$rdf.st(kb.sym(subject.value), UI.ns.link('uri'), subject)], true, filter);
|
|
51
58
|
}
|
|
52
|
-
if (subject.termType === 'NamedNode' && kb.updater.editable($rdf.Util.uri.docpart(subject.uri), kb) || subject.termType === 'BlankNode' &&
|
|
59
|
+
if (subject.termType === 'NamedNode' && kb.updater.editable($rdf.Util.uri.docpart(subject.uri), kb) || subject.termType === 'BlankNode' && subjectStatement && subjectStatement.why && 'uri' in subjectStatement.why && typeof subjectStatement.why.uri === 'string' && kb.updater.editable(subjectStatement.why.uri)
|
|
53
60
|
// check the document containing something about of the bnode @@ what about as object?
|
|
54
61
|
/* ! && HCIoptions["bottom insert highlights"].enabled */) {
|
|
55
62
|
const holdingTr = dom.createElement('tr'); // these are to minimize required changes
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
.formPane a {
|
|
2
|
+
color: var(--color-text-link, #3b5998);
|
|
3
|
+
text-decoration: none;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.formPane a:link {
|
|
7
|
+
color: var(--color-text-link, #3b5998);
|
|
8
|
+
text-decoration: none;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.formPane a:visited {
|
|
12
|
+
color: var(--color-text-link-visited, #3b5998);
|
|
13
|
+
text-decoration: none;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.formPane a:hover {
|
|
17
|
+
color: var(--color-text-link-hover, #3b5998);
|
|
18
|
+
font-weight: bold;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.formPane a:active {
|
|
22
|
+
color: var(--color-text-link-active, #888);
|
|
23
|
+
text-decoration: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.formPane__message,
|
|
27
|
+
.formPaneMessage {
|
|
28
|
+
color: #666;
|
|
29
|
+
margin: var(--spacing-xs, 0.5em) 0;
|
|
30
|
+
padding: var(--spacing-xs, 0.35em) var(--spacing-xs, 0.5em);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.formPane__message--info {
|
|
34
|
+
background-color: var(--color-main-block-bg, #eee);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.formPane__message--error {
|
|
38
|
+
background-color: var(--color-log-error-bg, #fee);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.formPane__editButton {
|
|
42
|
+
margin-left: auto;
|
|
43
|
+
align-self: center;
|
|
44
|
+
padding: var(--spacing-xs, 0.5rem);
|
|
45
|
+
border: .5rem solid white;
|
|
46
|
+
font-size: 100%;
|
|
47
|
+
float: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.formPane .formPane__mobileTextareaValue > div {
|
|
51
|
+
display: block;
|
|
52
|
+
min-width: 0;
|
|
53
|
+
position: relative;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.formPane .formPane__mobileTextareaValue > div > textarea {
|
|
57
|
+
box-sizing: border-box;
|
|
58
|
+
max-width: 100%;
|
|
59
|
+
min-width: 0;
|
|
60
|
+
width: 100%;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.formPane .formPane__mobileTextareaValue > div > button[type='button'] {
|
|
64
|
+
float: none !important;
|
|
65
|
+
position: absolute;
|
|
66
|
+
right: 0;
|
|
67
|
+
top: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.formPane[data-layout='mobile'] .formPane__mobileTextareaRow {
|
|
71
|
+
flex-direction: column !important;
|
|
72
|
+
align-items: stretch;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.formPane[data-layout='mobile'] .formPane__mobileTextareaLabel {
|
|
76
|
+
width: auto !important;
|
|
77
|
+
padding-bottom: 0;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.formPane[data-layout='mobile'] .formPane__mobileTextareaValue {
|
|
81
|
+
box-sizing: border-box;
|
|
82
|
+
min-width: 0;
|
|
83
|
+
padding-right: var(--spacing-sm, 0.75rem);
|
|
84
|
+
width: 100%;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.formPane[data-layout='mobile'] .formPane__mobileTextareaValue textarea {
|
|
88
|
+
box-sizing: border-box;
|
|
89
|
+
margin-left: 0 !important;
|
|
90
|
+
margin-right: 0 !important;
|
|
91
|
+
max-width: 100%;
|
|
92
|
+
width: 100%;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
@media (max-width: 960px) {
|
|
96
|
+
.formPane .formPane__mobileTextareaRow {
|
|
97
|
+
flex-direction: column !important;
|
|
98
|
+
align-items: stretch;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.formPane .formPane__mobileTextareaLabel {
|
|
102
|
+
width: auto !important;
|
|
103
|
+
padding-bottom: 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.formPane .formPane__mobileTextareaValue {
|
|
107
|
+
box-sizing: border-box;
|
|
108
|
+
min-width: 0;
|
|
109
|
+
padding-right: var(--spacing-sm, 0.75rem);
|
|
110
|
+
width: 100%;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.formPane .formPane__mobileTextareaValue textarea {
|
|
114
|
+
box-sizing: border-box;
|
|
115
|
+
margin-left: 0 !important;
|
|
116
|
+
margin-right: 0 !important;
|
|
117
|
+
max-width: 100%;
|
|
118
|
+
width: 100%;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pane.d.ts","sourceRoot":"","sources":["../../src/form/pane.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,eAAe,CAAA;AAGvE,OAAO,gBAAgB,CAAA;AAsEvB,eAAO,MAAM,QAAQ,EAAE,cAqOtB,CAAA"}
|