Commit 414597ce authored by Matthieu Fesselier's avatar Matthieu Fesselier

feature: add content in popup #561

parent 89137429
Pipeline #7066 passed with stage
in 5 minutes and 4 seconds
......@@ -166,11 +166,10 @@ Like for solid-display, filters and searching capabilities can be easily added t
Receives the URL of a container of resources via its `data-src` attribute, and displays it on a map.
To use `solid-map`, you must import the map component individually, along with its style file:
To use `solid-map`, you must import the map component individually:
```html
<script type="module" src="https://unpkg.com/@startinblox/core@0.9/components/solid-map.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@startinblox/core@0.9/style/default-theme.css" />
```
Here is the list of fields needed to display the resources properly:
......
......@@ -5,18 +5,22 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>SIB test: solid-map</title>
<script type="module" src="../dist/index.js"></script>
<script type="module" src="../dist/components/solid-map.js"></script>
<script>
document.addEventListener("DOMContentLoaded", event => {
document.querySelector("solid-map").addEventListener("resourceSelect", event => console.log(event.detail.resource));
document.querySelector("solid-map").addEventListener("resourceSelect", event => console.log(event.detail.resource));
});
</script>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h2>Sib Map</h2>
<solid-map
data-src="data/map/events.jsonld"
fields="infos(name, category)"
group-by="category"
style="display: block; width: 800px; height: 600px;"
></solid-map>
......
......@@ -5,9 +5,9 @@
"requires": true,
"dependencies": {
"@babel/cli": {
"version": "7.7.5",
"resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.7.5.tgz",
"integrity": "sha512-y2YrMGXM3NUyu1Myg0pxg+Lx6g8XhEyvLHYNRwTBV6fDek3H7Io6b7N/LXscLs4HWn4HxMdy7f2rM1rTMp2mFg==",
"version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.8.3.tgz",
"integrity": "sha512-K2UXPZCKMv7KwWy9Bl4sa6+jTNP7JyDiHKzoOiUUygaEDbC60vaargZDnO9oFMvlq8pIKOOyUUgeMYrsaN9djA==",
"dev": true,
"requires": {
"chokidar": "^2.1.8",
......@@ -2491,9 +2491,9 @@
}
},
"commander": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.0.1.tgz",
"integrity": "sha512-IPF4ouhCP+qdlcmCedhxX4xiGBPyigb8v5NeUp+0LyhwLgxMqyp3S0vl7TAPfS/hiP7FC3caI/PB9lTmP8r1NA==",
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.0.tgz",
"integrity": "sha512-NIQrwvv9V39FHgGFm36+U9SMQzbiHvU79k+iADraJTpmrFFfx7Ds0IvDoAdZsDrknlkRk14OYoWXb57uTh7/sw==",
"dev": true
},
"common-tags": {
......
......@@ -97,9 +97,41 @@ export const SolidMap = {
}).addTo(this.map)
.on('click', this.dispatchSelect.bind(this));
if (this.fields !== null) { // show popups only if fields attribute
marker.bindPopup(() => this.getPopupContent(resourceId), { minWidth: 150 }) // re-generate popup sib-display
}
this.markers.push(marker);
}
},
/**
* Generate the sib-display of the popup
* @param resourceId: id of the popup clicked
*/
getPopupContent(resourceId: string) {
const child = document.createElement('solid-display');
if (this.fields != null) child.setAttribute('fields', this.fields);
for (let attr of this.element.attributes) {
//copy widget and value attributes
if (
attr.name.startsWith('value-') ||
attr.name.startsWith('label-') ||
attr.name.startsWith('widget-') ||
attr.name.startsWith('class-') ||
attr.name.startsWith('multiple-') ||
attr.name.startsWith('editable-') ||
attr.name.startsWith('action-') ||
attr.name.startsWith('default-') ||
attr.name == 'extra-context'
)
child.setAttribute(attr.name, attr.value);
if (attr.name.startsWith('child-'))
child.setAttribute(attr.name.replace(/^child-/, ''), attr.value);
}
child.dataset.src = resourceId; // set id after the extra-context is
return child
},
/**
* Override widgetMixin method: empty the map
*/
......
......@@ -51,7 +51,7 @@ function importJS(...plugins: string[]): HTMLScriptElement[] {
}
function relativeSource(source: string) {
if (source.indexOf('./') !== 0) return source
if (source.indexOf('./') !== 0) return new URL(source, document.baseURI).href;
const e = new Error();
if(!e.stack) return source;
const f2 = e.stack.split('\n').filter(l => l.includes(':'))[2];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment