@pod-os/elements 0.29.1-rc.80aa77e.0 → 0.29.1-rc.88079dc.0
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/dist/cjs/elements.cjs.js +1 -1
- package/dist/cjs/ion-icon_33.cjs.entry.js +58 -31
- package/dist/cjs/ion-icon_33.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pos-document.cjs.entry.js +1 -1
- package/dist/cjs/pos-document.cjs.entry.js.map +1 -1
- package/dist/collection/components/pos-document/pos-document.css +1 -1
- package/dist/collection/components/pos-tool-select/pos-tool-select.css +47 -8
- package/dist/collection/components/pos-tool-select/pos-tool-select.js +31 -2
- package/dist/collection/components/pos-tool-select/pos-tool-select.js.map +1 -1
- package/dist/collection/components/pos-type-router/pos-type-router.css +35 -2
- package/dist/collection/components/pos-type-router/pos-type-router.js +25 -8
- package/dist/collection/components/pos-type-router/pos-type-router.js.map +1 -1
- package/dist/collection/components/pos-type-router/selectToolsForTypes.js +28 -22
- package/dist/collection/components/pos-type-router/selectToolsForTypes.js.map +1 -1
- package/dist/components/pos-document2.js +1 -1
- package/dist/components/pos-document2.js.map +1 -1
- package/dist/components/pos-tool-select2.js +9 -2
- package/dist/components/pos-tool-select2.js.map +1 -1
- package/dist/components/pos-type-router2.js +54 -31
- package/dist/components/pos-type-router2.js.map +1 -1
- package/dist/elements/elements.esm.js +1 -1
- package/dist/elements/elements.esm.js.map +1 -1
- package/dist/elements/{p-2a77781a.entry.js → p-21649e42.entry.js} +5 -5
- package/dist/elements/p-21649e42.entry.js.map +1 -0
- package/dist/elements/p-f2e65e83.entry.js +2 -0
- package/dist/elements/p-f2e65e83.entry.js.map +1 -0
- package/dist/esm/elements.js +1 -1
- package/dist/esm/ion-icon_33.entry.js +58 -31
- package/dist/esm/ion-icon_33.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pos-document.entry.js +1 -1
- package/dist/esm/pos-document.entry.js.map +1 -1
- package/dist/types/components/pos-tool-select/pos-tool-select.d.ts +7 -0
- package/dist/types/components/pos-type-router/pos-type-router.d.ts +6 -3
- package/dist/types/components/pos-type-router/selectToolsForTypes.d.ts +4 -4
- package/dist/types/components.d.ts +14 -0
- package/package.json +1 -1
- package/dist/elements/p-2a77781a.entry.js.map +0 -1
- package/dist/elements/p-38edfa6d.entry.js +0 -2
- package/dist/elements/p-38edfa6d.entry.js.map +0 -1
|
@@ -1,67 +1,73 @@
|
|
|
1
1
|
export const AvailableTools = {
|
|
2
2
|
Generic: {
|
|
3
3
|
element: 'pos-app-generic',
|
|
4
|
-
label: '
|
|
4
|
+
label: 'Data',
|
|
5
5
|
icon: 'list-ul',
|
|
6
|
-
types: [],
|
|
6
|
+
types: [], // since this is included everywhere, it does not need to specify types
|
|
7
7
|
},
|
|
8
8
|
RdfDocument: {
|
|
9
9
|
element: 'pos-app-rdf-document',
|
|
10
|
-
label: '
|
|
11
|
-
icon: '
|
|
10
|
+
label: 'Things',
|
|
11
|
+
icon: 'diagram-2',
|
|
12
12
|
types: [
|
|
13
13
|
{
|
|
14
|
-
|
|
14
|
+
uri: 'http://www.w3.org/2007/ont/link#RDFDocument',
|
|
15
15
|
priority: 20,
|
|
16
16
|
},
|
|
17
17
|
],
|
|
18
18
|
},
|
|
19
19
|
DocumentViewer: {
|
|
20
20
|
element: 'pos-app-document-viewer',
|
|
21
|
-
label: '
|
|
21
|
+
label: 'Doc',
|
|
22
22
|
icon: 'file-text',
|
|
23
23
|
types: [
|
|
24
24
|
{
|
|
25
|
-
|
|
25
|
+
uri: mimeType('application/pdf'),
|
|
26
26
|
priority: 30,
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
|
-
|
|
29
|
+
uri: 'http://www.w3.org/2007/ont/link#Document',
|
|
30
30
|
priority: 10,
|
|
31
31
|
},
|
|
32
32
|
],
|
|
33
33
|
},
|
|
34
34
|
ImageViewer: {
|
|
35
35
|
element: 'pos-app-image-viewer',
|
|
36
|
-
label: '
|
|
36
|
+
label: 'Pic',
|
|
37
37
|
icon: 'file-image',
|
|
38
38
|
types: [
|
|
39
39
|
{
|
|
40
|
-
|
|
40
|
+
uri: 'http://purl.org/dc/terms/Image',
|
|
41
41
|
priority: 20,
|
|
42
42
|
},
|
|
43
43
|
],
|
|
44
44
|
},
|
|
45
45
|
LdpContainer: {
|
|
46
46
|
element: 'pos-app-ldp-container',
|
|
47
|
-
label: '
|
|
47
|
+
label: 'Content',
|
|
48
48
|
icon: 'folder',
|
|
49
|
-
types: [{
|
|
49
|
+
types: [{ uri: 'http://www.w3.org/ns/ldp#Container', priority: 30 }],
|
|
50
50
|
},
|
|
51
51
|
};
|
|
52
52
|
function mimeType(mimeType) {
|
|
53
53
|
return 'http://www.w3.org/ns/iana/media-types/' + mimeType + '#Resource';
|
|
54
54
|
}
|
|
55
55
|
export function selectToolsForTypes(types) {
|
|
56
|
-
const
|
|
57
|
-
Object.values(AvailableTools)
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
});
|
|
64
|
-
result.push({ tool: AvailableTools.Generic, priority: 0 });
|
|
65
|
-
return result.toSorted((a, b) => b.priority - a.priority).map(item => item.tool);
|
|
56
|
+
const typeUris = new Set(types.map(type => type.uri));
|
|
57
|
+
return Object.values(AvailableTools)
|
|
58
|
+
.map(maxPriorityFor(typeUris))
|
|
59
|
+
.filter(onlyRelevant)
|
|
60
|
+
.toSorted(byPriority)
|
|
61
|
+
.map(it => it.tool)
|
|
62
|
+
.concat(AvailableTools.Generic);
|
|
66
63
|
}
|
|
64
|
+
const maxPriorityFor = (typeUris) => tool => ({
|
|
65
|
+
tool,
|
|
66
|
+
priority: maxPriority(tool.types, typeUris),
|
|
67
|
+
});
|
|
68
|
+
function maxPriority(types, typeUris) {
|
|
69
|
+
return types.filter(type => typeUris.has(type.uri)).reduce((max, type) => Math.max(max, type.priority), 0);
|
|
70
|
+
}
|
|
71
|
+
const onlyRelevant = (it) => it.priority > 0;
|
|
72
|
+
const byPriority = (a, b) => b.priority - a.priority;
|
|
67
73
|
//# sourceMappingURL=selectToolsForTypes.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectToolsForTypes.js","sourceRoot":"","sources":["../../../../src/components/pos-type-router/selectToolsForTypes.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"selectToolsForTypes.js","sourceRoot":"","sources":["../../../../src/components/pos-type-router/selectToolsForTypes.ts"],"names":[],"mappings":"AAmBA,MAAM,CAAC,MAAM,cAAc,GAAkC;IAC3D,OAAO,EAAE;QACP,OAAO,EAAE,iBAAiB;QAC1B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,EAAE,EAAE,uEAAuE;KACnF;IACD,WAAW,EAAE;QACX,OAAO,EAAE,sBAAsB;QAC/B,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE;YACL;gBACE,GAAG,EAAE,6CAA6C;gBAClD,QAAQ,EAAE,EAAE;aACb;SACF;KACF;IACD,cAAc,EAAE;QACd,OAAO,EAAE,yBAAyB;QAClC,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE;YACL;gBACE,GAAG,EAAE,QAAQ,CAAC,iBAAiB,CAAC;gBAChC,QAAQ,EAAE,EAAE;aACb;YACD;gBACE,GAAG,EAAE,0CAA0C;gBAC/C,QAAQ,EAAE,EAAE;aACb;SACF;KACF;IACD,WAAW,EAAE;QACX,OAAO,EAAE,sBAAsB;QAC/B,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE;YACL;gBACE,GAAG,EAAE,gCAAgC;gBACrC,QAAQ,EAAE,EAAE;aACb;SACF;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,uBAAuB;QAChC,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,oCAAoC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC;KACrE;CACF,CAAC;AAEF,SAAS,QAAQ,CAAC,QAAgB;IAChC,OAAO,wCAAwC,GAAG,QAAQ,GAAG,WAAW,CAAC;AAC3E,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAgB;IAClD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAEtD,OAAO,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;SACjC,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;SAC7B,MAAM,CAAC,YAAY,CAAC;SACpB,QAAQ,CAAC,UAAU,CAAC;SACpB,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;SAClB,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,QAAqB,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,CACvD,CAAC;IACC,IAAI;IACJ,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC;CAC5C,CAAiB,CAAC;AAErB,SAAS,WAAW,CAAC,KAAqB,EAAE,QAAqB;IAC/D,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;AAC7G,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,EAAgB,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC;AAE3D,MAAM,UAAU,GAAG,CAAC,CAAe,EAAE,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC","sourcesContent":["import { RdfType } from '@pod-os/core';\n\nexport interface ToolConfig {\n element: string;\n label: string;\n icon: string;\n types: TypePriority[];\n}\n\ninterface TypePriority {\n uri: string;\n priority: number;\n}\n\ninterface ToolPriority {\n tool: ToolConfig;\n priority: number;\n}\n\nexport const AvailableTools: { [key: string]: ToolConfig } = {\n Generic: {\n element: 'pos-app-generic',\n label: 'Data',\n icon: 'list-ul',\n types: [], // since this is included everywhere, it does not need to specify types\n },\n RdfDocument: {\n element: 'pos-app-rdf-document',\n label: 'Things',\n icon: 'diagram-2',\n types: [\n {\n uri: 'http://www.w3.org/2007/ont/link#RDFDocument',\n priority: 20,\n },\n ],\n },\n DocumentViewer: {\n element: 'pos-app-document-viewer',\n label: 'Doc',\n icon: 'file-text',\n types: [\n {\n uri: mimeType('application/pdf'),\n priority: 30,\n },\n {\n uri: 'http://www.w3.org/2007/ont/link#Document',\n priority: 10,\n },\n ],\n },\n ImageViewer: {\n element: 'pos-app-image-viewer',\n label: 'Pic',\n icon: 'file-image',\n types: [\n {\n uri: 'http://purl.org/dc/terms/Image',\n priority: 20,\n },\n ],\n },\n LdpContainer: {\n element: 'pos-app-ldp-container',\n label: 'Content',\n icon: 'folder',\n types: [{ uri: 'http://www.w3.org/ns/ldp#Container', priority: 30 }],\n },\n};\n\nfunction mimeType(mimeType: string) {\n return 'http://www.w3.org/ns/iana/media-types/' + mimeType + '#Resource';\n}\n\nexport function selectToolsForTypes(types: RdfType[]) {\n const typeUris = new Set(types.map(type => type.uri));\n\n return Object.values(AvailableTools)\n .map(maxPriorityFor(typeUris))\n .filter(onlyRelevant)\n .toSorted(byPriority)\n .map(it => it.tool)\n .concat(AvailableTools.Generic);\n}\n\nconst maxPriorityFor = (typeUris: Set<string>) => tool =>\n ({\n tool,\n priority: maxPriority(tool.types, typeUris),\n }) as ToolPriority;\n\nfunction maxPriority(types: TypePriority[], typeUris: Set<string>): number {\n return types.filter(type => typeUris.has(type.uri)).reduce((max, type) => Math.max(max, type.priority), 0);\n}\n\nconst onlyRelevant = (it: ToolPriority) => it.priority > 0;\n\nconst byPriority = (a: ToolPriority, b: ToolPriority) => b.priority - a.priority;\n"]}
|
|
@@ -4,7 +4,7 @@ import { B as BrokenFile } from './BrokenFile.js';
|
|
|
4
4
|
import { d as defineCustomElement$2 } from './icon.js';
|
|
5
5
|
import { d as defineCustomElement$1 } from './skeleton-text.js';
|
|
6
6
|
|
|
7
|
-
const posDocumentCss = "iframe{background-color:
|
|
7
|
+
const posDocumentCss = "iframe{background-color:var(--pos-background-color);width:100%;height:100vh}.error{display:flex;opacity:0.8;background:repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);flex-direction:column;border:1px solid red;color:black;align-items:center;justify-content:center;word-break:break-all;padding:1rem;box-sizing:border-box}.error ion-icon{color:#282828;--ionicon-stroke-width:calc(var(--width) / 5);font-size:calc(var(--width) / 2)}a{text-decoration:none;width:var(--width);height:var(--height)}.code{font-weight:bold;font-size:calc(var(--width) / 8)}.text{font-size:calc(var(--width) / 20)}";
|
|
8
8
|
const PosDocumentStyle0 = posDocumentCss;
|
|
9
9
|
|
|
10
10
|
const PosDocument = /*@__PURE__*/ proxyCustomElement(class PosDocument extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pos-document2.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,
|
|
1
|
+
{"file":"pos-document2.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,soBAAsoB,CAAC;AAC9pB,0BAAe,cAAc;;MCShB,WAAW;IALxB;;;;;;QAsBU,YAAO,GAAY,IAAI,CAAC;QAchC,UAAK,GAAG,OAAO,EAAS;YACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;SACd,CAAC;KAkCH;IAzCC,iBAAiB;QACfA,KAAO,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QACvD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAQD,MAAM,SAAS;QACb,IAAI;YACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;gBACf,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;gBAChD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;aACnB;iBAAM;gBACL,IAAI,CAAC,UAAU,GAAG,IAAsB,CAAC;aAC1C;SACF;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;SAClB;gBAAS;YACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,yBAAmB,QAAQ,EAAE,IAAI,GAAsB,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,WAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAO,CAAC;SACtD;QACD,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO,EAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,UAAU,GAAI,CAAC;SAC9C;QACD,OAAO,cAAQ,GAAG,EAAE,IAAI,CAAC,OAAO,GAAW,CAAC;KAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["session"],"sources":["src/components/pos-document/pos-document.css?tag=pos-document&encapsulation=shadow","src/components/pos-document/pos-document.tsx"],"sourcesContent":["iframe {\n background-color: var(--pos-background-color);\n width: 100%;\n height: 100vh;\n}\n\n/* consolidate with styles from pos-image */\n.error {\n display: flex;\n opacity: 0.8;\n background: repeating-linear-gradient(-45deg, rgba(150, 0, 0, 0.1), rgba(150, 0, 0, 0.1) 10px, #fff 5px, #fff 25px);\n flex-direction: column;\n border: 1px solid red;\n color: black;\n align-items: center;\n justify-content: center;\n word-break: break-all;\n padding: 1rem;\n box-sizing: border-box;\n}\n\n.error ion-icon {\n color: #282828;\n --ionicon-stroke-width: calc(var(--width) / 5);\n font-size: calc(var(--width) / 2);\n}\n\na {\n text-decoration: none;\n width: var(--width);\n height: var(--height);\n}\n\n.code {\n font-weight: bold;\n font-size: calc(var(--width) / 8);\n}\n\n.text {\n font-size: calc(var(--width) / 20);\n}\n","import { PodOS, BrokenFile as BrokenFileData } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport session from '../../store/session';\nimport { BrokenFile } from '../broken-file/BrokenFile';\n\n@Component({\n tag: 'pos-document',\n styleUrl: 'pos-document.css',\n shadow: true,\n})\nexport class PosDocument {\n @Prop() src: string;\n\n @Prop() alt: string;\n\n @State() os: PodOS;\n\n @State()\n private dataUri: string;\n\n @State()\n private brokenFile: BrokenFileData;\n\n @State()\n private error: Error;\n\n @State()\n private loading: boolean = true;\n\n @Event({ eventName: 'pod-os:init' }) initializeOsEmitter: EventEmitter;\n\n /**\n * Indicates that the resource given in `src` property has been loaded.\n */\n @Event({ eventName: 'pod-os:resource-loaded' }) resourceLoadedEmitter: EventEmitter<string>;\n\n componentWillLoad() {\n session.onChange('isLoggedIn', () => this.fetchBlob());\n this.initializeOsEmitter.emit(this.setOs);\n }\n\n setOs = async (os: PodOS) => {\n this.os = os;\n };\n\n @Watch('os')\n @Watch('src')\n async fetchBlob() {\n try {\n this.loading = true;\n const file = await this.os.fetchFile(this.src);\n this.resourceLoadedEmitter.emit(this.src);\n if (file.blob()) {\n this.dataUri = URL.createObjectURL(file.blob());\n this.error = null;\n } else {\n this.brokenFile = file as BrokenFileData;\n }\n } catch (err) {\n this.error = err;\n } finally {\n this.loading = false;\n }\n }\n\n render() {\n if (this.loading) {\n return <ion-skeleton-text animated={true}></ion-skeleton-text>;\n }\n if (this.error) {\n return <div class=\"error\">{this.error.message}</div>;\n }\n if (this.brokenFile) {\n return <BrokenFile file={this.brokenFile} />;\n }\n return <iframe src={this.dataUri}></iframe>;\n }\n}\n"],"version":3}
|
|
@@ -3,7 +3,7 @@ import { S as SlIcon } from './chunk.YHLNUJ7P.js';
|
|
|
3
3
|
|
|
4
4
|
SlIcon.define("sl-icon");
|
|
5
5
|
|
|
6
|
-
const posToolSelectCss = ":host {\n --button-size: var(--size-
|
|
6
|
+
const posToolSelectCss = ":host {\n --button-size: var(--size-16);\n display: block;\n position: sticky;\n align-self: flex-start;\n top: 0;\n overflow: auto;\n min-width: var(--button-size);\n z-index: var(--layer-1);\n}\n\naside {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n button {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0;\n font-size: var(--size-6);\n position: relative;\n overflow: hidden;\n outline: none;\n border: none;\n width: var(--button-size);\n min-width: var(--button-size);\n height: var(--button-size);\n min-height: var(--button-size);\n background-color: var(--pos-background-color);\n\n &::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 100%;\n background: color-mix(in srgb, var(--pos-primary-color), transparent 50%);\n transform: translate(-50%, -50%);\n opacity: 1;\n }\n\n &:active::after,\n &:focus::after {\n width: calc(var(--button-size) * 1.5);\n height: calc(var(--button-size) * 1.5);\n opacity: 0;\n transition:\n width 0.5s ease-out,\n height 0.5s ease-out,\n opacity 1s ease-out;\n }\n\n &[aria-selected] {\n border-right: var(--size-1) solid var(--pos-primary-color);\n }\n\n .text {\n font-size: var(--size-3);\n white-space: nowrap;\n text-overflow: ellipsis;\n width: 100%;\n overflow: hidden;\n }\n }\n}\n\n@media (max-width: 640px) {\n :host {\n position: fixed;\n top: unset;\n bottom: 0;\n width: 100dvw;\n }\n aside {\n flex-direction: row;\n background-color: var(--pos-background-color);\n\n button {\n &[aria-selected] {\n border-right: none;\n border-top: var(--size-1) solid var(--pos-primary-color);\n }\n }\n }\n}\n";
|
|
7
7
|
const PosToolSelectStyle0 = posToolSelectCss;
|
|
8
8
|
|
|
9
9
|
const PosToolSelect = /*@__PURE__*/ proxyCustomElement(class PosToolSelect extends HTMLElement {
|
|
@@ -12,16 +12,23 @@ const PosToolSelect = /*@__PURE__*/ proxyCustomElement(class PosToolSelect exten
|
|
|
12
12
|
this.__registerHost();
|
|
13
13
|
this.__attachShadow();
|
|
14
14
|
this.toolSelected = createEvent(this, "pod-os:tool-selected", 7);
|
|
15
|
+
/**
|
|
16
|
+
* All tools that are available
|
|
17
|
+
*/
|
|
15
18
|
this.tools = [];
|
|
16
19
|
}
|
|
17
20
|
render() {
|
|
18
21
|
if (this.tools.length > 1) {
|
|
19
|
-
return (h("aside", null, this.tools.map(it =>
|
|
22
|
+
return (h("aside", null, this.tools.map(it => {
|
|
23
|
+
var _a;
|
|
24
|
+
return (h("button", { role: "tab", "aria-selected": ((_a = this.selected) === null || _a === void 0 ? void 0 : _a.element) === it.element, onClick: () => this.toolSelected.emit(it) }, h("sl-icon", { name: it.icon }), h("span", { class: "text" }, it.label)));
|
|
25
|
+
})));
|
|
20
26
|
}
|
|
21
27
|
return null;
|
|
22
28
|
}
|
|
23
29
|
static get style() { return PosToolSelectStyle0; }
|
|
24
30
|
}, [1, "pos-tool-select", {
|
|
31
|
+
"selected": [16],
|
|
25
32
|
"tools": [16]
|
|
26
33
|
}]);
|
|
27
34
|
function defineCustomElement() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pos-tool-select2.js","mappings":";;;AAMA,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC;;ACNxB,MAAM,gBAAgB,GAAG,
|
|
1
|
+
{"file":"pos-tool-select2.js","mappings":";;;AAMA,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC;;ACNxB,MAAM,gBAAgB,GAAG,u6DAAu6D,CAAC;AACj8D,4BAAe,gBAAgB;;MCSlB,aAAa;IAL1B;;;;;;;;QAgBE,UAAK,GAAiB,EAAE,CAAC;KAwB1B;IAnBC,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACzB,QACE,iBACG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;;gBAAI,QACpB,cACE,IAAI,EAAC,KAAK,mBACK,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO,MAAK,EAAE,CAAC,OAAO,EACpD,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAEzC,eAAS,IAAI,EAAE,EAAE,CAAC,IAAI,GAAY,EAClC,YAAM,KAAK,EAAC,MAAM,IAAE,EAAE,CAAC,KAAK,CAAQ,CAC7B,EACV;aAAA,CAAC,CACI,EACR;SACH;QACD,OAAO,IAAI,CAAC;KACb;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../node_modules/@shoelace-style/shoelace/dist/chunks/chunk.ZGGPD2XJ.js","src/components/pos-tool-select/pos-tool-select.css?tag=pos-tool-select&encapsulation=shadow","src/components/pos-tool-select/pos-tool-select.tsx"],"sourcesContent":["import {\n SlIcon\n} from \"./chunk.YHLNUJ7P.js\";\n\n// src/components/icon/icon.ts\nvar icon_default = SlIcon;\nSlIcon.define(\"sl-icon\");\n\nexport {\n icon_default\n};\n",":host {\n --button-size: var(--size-16);\n display: block;\n position: sticky;\n align-self: flex-start;\n top: 0;\n overflow: auto;\n min-width: var(--button-size);\n z-index: var(--layer-1);\n}\n\naside {\n display: flex;\n flex-direction: column;\n justify-content: center;\n\n button {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0;\n font-size: var(--size-6);\n position: relative;\n overflow: hidden;\n outline: none;\n border: none;\n width: var(--button-size);\n min-width: var(--button-size);\n height: var(--button-size);\n min-height: var(--button-size);\n background-color: var(--pos-background-color);\n\n &::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0;\n height: 0;\n border-radius: 100%;\n background: color-mix(in srgb, var(--pos-primary-color), transparent 50%);\n transform: translate(-50%, -50%);\n opacity: 1;\n }\n\n &:active::after,\n &:focus::after {\n width: calc(var(--button-size) * 1.5);\n height: calc(var(--button-size) * 1.5);\n opacity: 0;\n transition:\n width 0.5s ease-out,\n height 0.5s ease-out,\n opacity 1s ease-out;\n }\n\n &[aria-selected] {\n border-right: var(--size-1) solid var(--pos-primary-color);\n }\n\n .text {\n font-size: var(--size-3);\n white-space: nowrap;\n text-overflow: ellipsis;\n width: 100%;\n overflow: hidden;\n }\n }\n}\n\n@media (max-width: 640px) {\n :host {\n position: fixed;\n top: unset;\n bottom: 0;\n width: 100dvw;\n }\n aside {\n flex-direction: row;\n background-color: var(--pos-background-color);\n\n button {\n &[aria-selected] {\n border-right: none;\n border-top: var(--size-1) solid var(--pos-primary-color);\n }\n }\n }\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ToolConfig } from '../pos-type-router/selectToolsForTypes';\n\nimport './shoelace';\n\n@Component({\n tag: 'pos-tool-select',\n styleUrl: 'pos-tool-select.css',\n shadow: true,\n})\nexport class PosToolSelect {\n /**\n * The tool that is currently selected\n */\n @Prop()\n selected: ToolConfig;\n\n /**\n * All tools that are available\n */\n @Prop()\n tools: ToolConfig[] = [];\n\n @Event({ eventName: 'pod-os:tool-selected' })\n toolSelected: EventEmitter<ToolConfig>;\n\n render() {\n if (this.tools.length > 1) {\n return (\n <aside>\n {this.tools.map(it => (\n <button\n role=\"tab\"\n aria-selected={this.selected?.element === it.element}\n onClick={() => this.toolSelected.emit(it)}\n >\n <sl-icon name={it.icon}></sl-icon>\n <span class=\"text\">{it.label}</span>\n </button>\n ))}\n </aside>\n );\n }\n return null;\n }\n}\n"],"version":3}
|
|
@@ -5,71 +5,77 @@ import { d as defineCustomElement$1 } from './pos-tool-select2.js';
|
|
|
5
5
|
const AvailableTools = {
|
|
6
6
|
Generic: {
|
|
7
7
|
element: 'pos-app-generic',
|
|
8
|
-
label: '
|
|
8
|
+
label: 'Data',
|
|
9
9
|
icon: 'list-ul',
|
|
10
|
-
types: [],
|
|
10
|
+
types: [], // since this is included everywhere, it does not need to specify types
|
|
11
11
|
},
|
|
12
12
|
RdfDocument: {
|
|
13
13
|
element: 'pos-app-rdf-document',
|
|
14
|
-
label: '
|
|
15
|
-
icon: '
|
|
14
|
+
label: 'Things',
|
|
15
|
+
icon: 'diagram-2',
|
|
16
16
|
types: [
|
|
17
17
|
{
|
|
18
|
-
|
|
18
|
+
uri: 'http://www.w3.org/2007/ont/link#RDFDocument',
|
|
19
19
|
priority: 20,
|
|
20
20
|
},
|
|
21
21
|
],
|
|
22
22
|
},
|
|
23
23
|
DocumentViewer: {
|
|
24
24
|
element: 'pos-app-document-viewer',
|
|
25
|
-
label: '
|
|
25
|
+
label: 'Doc',
|
|
26
26
|
icon: 'file-text',
|
|
27
27
|
types: [
|
|
28
28
|
{
|
|
29
|
-
|
|
29
|
+
uri: mimeType('application/pdf'),
|
|
30
30
|
priority: 30,
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
|
-
|
|
33
|
+
uri: 'http://www.w3.org/2007/ont/link#Document',
|
|
34
34
|
priority: 10,
|
|
35
35
|
},
|
|
36
36
|
],
|
|
37
37
|
},
|
|
38
38
|
ImageViewer: {
|
|
39
39
|
element: 'pos-app-image-viewer',
|
|
40
|
-
label: '
|
|
40
|
+
label: 'Pic',
|
|
41
41
|
icon: 'file-image',
|
|
42
42
|
types: [
|
|
43
43
|
{
|
|
44
|
-
|
|
44
|
+
uri: 'http://purl.org/dc/terms/Image',
|
|
45
45
|
priority: 20,
|
|
46
46
|
},
|
|
47
47
|
],
|
|
48
48
|
},
|
|
49
49
|
LdpContainer: {
|
|
50
50
|
element: 'pos-app-ldp-container',
|
|
51
|
-
label: '
|
|
51
|
+
label: 'Content',
|
|
52
52
|
icon: 'folder',
|
|
53
|
-
types: [{
|
|
53
|
+
types: [{ uri: 'http://www.w3.org/ns/ldp#Container', priority: 30 }],
|
|
54
54
|
},
|
|
55
55
|
};
|
|
56
56
|
function mimeType(mimeType) {
|
|
57
57
|
return 'http://www.w3.org/ns/iana/media-types/' + mimeType + '#Resource';
|
|
58
58
|
}
|
|
59
59
|
function selectToolsForTypes(types) {
|
|
60
|
-
const
|
|
61
|
-
Object.values(AvailableTools)
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
60
|
+
const typeUris = new Set(types.map(type => type.uri));
|
|
61
|
+
return Object.values(AvailableTools)
|
|
62
|
+
.map(maxPriorityFor(typeUris))
|
|
63
|
+
.filter(onlyRelevant)
|
|
64
|
+
.toSorted(byPriority)
|
|
65
|
+
.map(it => it.tool)
|
|
66
|
+
.concat(AvailableTools.Generic);
|
|
67
|
+
}
|
|
68
|
+
const maxPriorityFor = (typeUris) => tool => ({
|
|
69
|
+
tool,
|
|
70
|
+
priority: maxPriority(tool.types, typeUris),
|
|
71
|
+
});
|
|
72
|
+
function maxPriority(types, typeUris) {
|
|
73
|
+
return types.filter(type => typeUris.has(type.uri)).reduce((max, type) => Math.max(max, type.priority), 0);
|
|
70
74
|
}
|
|
75
|
+
const onlyRelevant = (it) => it.priority > 0;
|
|
76
|
+
const byPriority = (a, b) => b.priority - a.priority;
|
|
71
77
|
|
|
72
|
-
const posTypeRouterCss = "section {\n display: flex;\n flex-direction: row;\n}\n\
|
|
78
|
+
const posTypeRouterCss = "section {\n display: flex;\n flex-direction: row;\n}\n\n.tools {\n position: relative;\n flex-grow: 1;\n}\n\n.tool {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n &.visible {\n animation: fadeIn 300ms ease-in;\n }\n &.hidden {\n animation: fadeOut 300ms ease-in;\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n@media (max-width: 640px) {\n section {\n --toolbar-size: var(--size-16);\n flex-direction: column-reverse;\n padding-bottom: var(--toolbar-size);\n pos-tool-select {\n --button-size: var(--toolbar-size);\n }\n }\n}\n";
|
|
73
79
|
const PosTypeRouterStyle0 = posTypeRouterCss;
|
|
74
80
|
|
|
75
81
|
const PosTypeRouter = /*@__PURE__*/ proxyCustomElement(class PosTypeRouter extends HTMLElement {
|
|
@@ -79,28 +85,45 @@ const PosTypeRouter = /*@__PURE__*/ proxyCustomElement(class PosTypeRouter exten
|
|
|
79
85
|
this.__attachShadow();
|
|
80
86
|
this.subscribeResource = createEvent(this, "pod-os:resource", 7);
|
|
81
87
|
this.receiveResource = (resource) => {
|
|
82
|
-
|
|
88
|
+
var _a;
|
|
89
|
+
const types = resource.types();
|
|
90
|
+
this.availableTools = selectToolsForTypes(types);
|
|
91
|
+
this.currentTool = (_a = this.availableTools.find(it => it.element === this.initialTool)) !== null && _a !== void 0 ? _a : this.availableTools[0];
|
|
83
92
|
};
|
|
84
93
|
}
|
|
85
94
|
componentWillLoad() {
|
|
86
95
|
subscribeResource(this);
|
|
96
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
97
|
+
const toolParam = urlParams.get('tool');
|
|
98
|
+
if (toolParam) {
|
|
99
|
+
this.initialTool = toolParam;
|
|
100
|
+
}
|
|
87
101
|
}
|
|
88
102
|
handleToolSelected(event) {
|
|
89
|
-
this.
|
|
103
|
+
this.oldTool = this.currentTool;
|
|
104
|
+
this.currentTool = event.detail;
|
|
105
|
+
const url = new URL(window.location.href);
|
|
106
|
+
url.searchParams.set('tool', event.detail.element);
|
|
107
|
+
window.history.replaceState({}, '', url.toString());
|
|
90
108
|
}
|
|
91
109
|
render() {
|
|
92
|
-
return this.
|
|
110
|
+
return this.availableTools ? this.renderApp() : null;
|
|
93
111
|
}
|
|
94
112
|
renderApp() {
|
|
95
113
|
var _a;
|
|
96
|
-
const
|
|
97
|
-
const
|
|
98
|
-
return (h("section", null, h("pos-tool-select", { tools: availableTools }), h(SelectedTool,
|
|
114
|
+
const SelectedTool = this.currentTool.element;
|
|
115
|
+
const OldTool = (_a = this.oldTool) === null || _a === void 0 ? void 0 : _a.element;
|
|
116
|
+
return (h("section", null, h("pos-tool-select", { selected: this.currentTool, tools: this.availableTools }), h("div", { class: "tools", onAnimationEnd: () => this.removeOldTool() }, OldTool && h(OldTool, { class: "tool hidden" }), h(SelectedTool, { class: "tool visible" }))));
|
|
117
|
+
}
|
|
118
|
+
removeOldTool() {
|
|
119
|
+
this.oldTool = null;
|
|
99
120
|
}
|
|
100
121
|
static get style() { return PosTypeRouterStyle0; }
|
|
101
122
|
}, [1, "pos-type-router", {
|
|
102
|
-
"
|
|
103
|
-
"
|
|
123
|
+
"initialTool": [32],
|
|
124
|
+
"availableTools": [32],
|
|
125
|
+
"oldTool": [32],
|
|
126
|
+
"currentTool": [32]
|
|
104
127
|
}, [[0, "pod-os:tool-selected", "handleToolSelected"]]]);
|
|
105
128
|
function defineCustomElement() {
|
|
106
129
|
if (typeof customElements === "undefined") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"pos-type-router2.js","mappings":";;;;
|
|
1
|
+
{"file":"pos-type-router2.js","mappings":"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","names":[],"sources":["src/components/pos-type-router/selectToolsForTypes.ts","src/components/pos-type-router/pos-type-router.css?tag=pos-type-router&encapsulation=shadow","src/components/pos-type-router/pos-type-router.tsx"],"sourcesContent":["import { RdfType } from '@pod-os/core';\n\nexport interface ToolConfig {\n element: string;\n label: string;\n icon: string;\n types: TypePriority[];\n}\n\ninterface TypePriority {\n uri: string;\n priority: number;\n}\n\ninterface ToolPriority {\n tool: ToolConfig;\n priority: number;\n}\n\nexport const AvailableTools: { [key: string]: ToolConfig } = {\n Generic: {\n element: 'pos-app-generic',\n label: 'Data',\n icon: 'list-ul',\n types: [], // since this is included everywhere, it does not need to specify types\n },\n RdfDocument: {\n element: 'pos-app-rdf-document',\n label: 'Things',\n icon: 'diagram-2',\n types: [\n {\n uri: 'http://www.w3.org/2007/ont/link#RDFDocument',\n priority: 20,\n },\n ],\n },\n DocumentViewer: {\n element: 'pos-app-document-viewer',\n label: 'Doc',\n icon: 'file-text',\n types: [\n {\n uri: mimeType('application/pdf'),\n priority: 30,\n },\n {\n uri: 'http://www.w3.org/2007/ont/link#Document',\n priority: 10,\n },\n ],\n },\n ImageViewer: {\n element: 'pos-app-image-viewer',\n label: 'Pic',\n icon: 'file-image',\n types: [\n {\n uri: 'http://purl.org/dc/terms/Image',\n priority: 20,\n },\n ],\n },\n LdpContainer: {\n element: 'pos-app-ldp-container',\n label: 'Content',\n icon: 'folder',\n types: [{ uri: 'http://www.w3.org/ns/ldp#Container', priority: 30 }],\n },\n};\n\nfunction mimeType(mimeType: string) {\n return 'http://www.w3.org/ns/iana/media-types/' + mimeType + '#Resource';\n}\n\nexport function selectToolsForTypes(types: RdfType[]) {\n const typeUris = new Set(types.map(type => type.uri));\n\n return Object.values(AvailableTools)\n .map(maxPriorityFor(typeUris))\n .filter(onlyRelevant)\n .toSorted(byPriority)\n .map(it => it.tool)\n .concat(AvailableTools.Generic);\n}\n\nconst maxPriorityFor = (typeUris: Set<string>) => tool =>\n ({\n tool,\n priority: maxPriority(tool.types, typeUris),\n }) as ToolPriority;\n\nfunction maxPriority(types: TypePriority[], typeUris: Set<string>): number {\n return types.filter(type => typeUris.has(type.uri)).reduce((max, type) => Math.max(max, type.priority), 0);\n}\n\nconst onlyRelevant = (it: ToolPriority) => it.priority > 0;\n\nconst byPriority = (a: ToolPriority, b: ToolPriority) => b.priority - a.priority;\n","section {\n display: flex;\n flex-direction: row;\n}\n\n.tools {\n position: relative;\n flex-grow: 1;\n}\n\n.tool {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n &.visible {\n animation: fadeIn 300ms ease-in;\n }\n &.hidden {\n animation: fadeOut 300ms ease-in;\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes fadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n@media (max-width: 640px) {\n section {\n --toolbar-size: var(--size-16);\n flex-direction: column-reverse;\n padding-bottom: var(--toolbar-size);\n pos-tool-select {\n --button-size: var(--toolbar-size);\n }\n }\n}\n","import { Thing } from '@pod-os/core';\nimport { Component, Event, EventEmitter, h, Listen, State } from '@stencil/core';\nimport { ResourceAware, subscribeResource } from '../events/ResourceAware';\nimport { selectToolsForTypes, ToolConfig } from './selectToolsForTypes';\n\n@Component({\n tag: 'pos-type-router',\n shadow: true,\n styleUrl: 'pos-type-router.css',\n})\nexport class PosTypeRouter implements ResourceAware {\n @State() initialTool: string;\n @State() availableTools: ToolConfig[];\n @State() oldTool: ToolConfig;\n @State() currentTool: ToolConfig;\n\n @Event({ eventName: 'pod-os:resource' })\n subscribeResource: EventEmitter;\n\n componentWillLoad() {\n subscribeResource(this);\n const urlParams = new URLSearchParams(window.location.search);\n const toolParam = urlParams.get('tool');\n if (toolParam) {\n this.initialTool = toolParam;\n }\n }\n\n @Listen('pod-os:tool-selected')\n handleToolSelected(event: CustomEvent<ToolConfig>) {\n this.oldTool = this.currentTool;\n this.currentTool = event.detail;\n const url = new URL(window.location.href);\n url.searchParams.set('tool', event.detail.element);\n window.history.replaceState({}, '', url.toString());\n }\n\n receiveResource = (resource: Thing) => {\n const types = resource.types();\n this.availableTools = selectToolsForTypes(types);\n this.currentTool = this.availableTools.find(it => it.element === this.initialTool) ?? this.availableTools[0];\n };\n\n render() {\n return this.availableTools ? this.renderApp() : null;\n }\n\n private renderApp() {\n const SelectedTool = this.currentTool.element;\n const OldTool = this.oldTool?.element;\n return (\n <section>\n <pos-tool-select selected={this.currentTool} tools={this.availableTools}></pos-tool-select>\n <div class=\"tools\" onAnimationEnd={() => this.removeOldTool()}>\n {OldTool && <OldTool class=\"tool hidden\"></OldTool>}\n <SelectedTool class=\"tool visible\"></SelectedTool>\n </div>\n </section>\n );\n }\n\n private removeOldTool() {\n this.oldTool = null;\n }\n}\n"],"version":3}
|