Commit 87cfcd9b authored by Matthieu Fesselier's avatar Matthieu Fesselier

Update readme

parent 0e35045a
Pipeline #7026 passed with stage
in 1 minute and 50 seconds
......@@ -74,7 +74,7 @@ Filters and searching capabilities can be easily added to interact with the list
- **`paginate-by`**: The list can also be split in pages, for example set `paginate-by="5"` to display pages of 5 elements, the prev/next buttons and the counter will be added automatically
- **`order-by`**: The name of the field you want to use to order the list. For example, `order-by="username"` will order the users list alphabetically based on the username.
- **`highlight-xyz`**: The resources to put at the top of the list. For example, `highlight-date="2019-05-20"` will display first all the resources which have a field date equal to "2019-05-20".
- **`group by`**: The resources will be grouped by the field you give as a parameter. For example, `group-by="date"` will render one `<div>` by date, and put the corresponding resources inside.
- **`group-by`**: The resources will be grouped by the field you give as a parameter. For example, `group-by="date"` will render one `<div>` by date, and put the corresponding resources inside.
- **`next`**: `name` attribute of the `<sib-route>` that should be accessed when a `<sib-display>` element is clicked. See the documentation of `<sib-router>` for more details.
- **`action-xyz`**: name of the route to reach when the widget for the field `xyz` is clicked. By default, a `sib-link` widget is used.
- **`label-xyz`**: Set the label for the field `xyz`
......@@ -163,13 +163,74 @@ Like for sib-display, filters and searching capabilities can be easily added to
### `sib-map`
Receives the URL of a resource or of a container of resources via its `data-src` attribute, and displays it on a **map**. Here is the list of fields needed to display the resources properly:
Receives the URL of a container of resources via its `data-src` attribute, and displays it on a map.
To use `sib-map`, you must import the map component individually, along with its style file:
```html
<script type="module" src="https://unpkg.com/@startinblox/core@0.9/components/sib-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:
- `name`: name of the event displayed on the calendar
- `lat`: latitude on which the resource will be displayed
- `lng`: longitude on which the resource will be displayed
Like for sib-display, filters and searching capabilities can be easily added to interact with the list of data being displayed.
**Attributes**:
You can use the same attributes than for a `sib-display` .
Display fields:
- **`data-src`**: The uri of the LDP container you want to display.
- **`fields`**: The ordered list of fields to be displayed in each marker popup, separated by commas.
By default, none are displayed and marker won't show up on click.
You can also group fields, see the **[sets widgets](#set-widgets)** section below for more info.
- **`value-xyz`**: To display a string not contained within the data.
- **`widget-xyz`**: The widget to be used to display the `xyz` field.
- **`default-widget`**: The widget to use for all the fields, except if a specific one is defined for a field.
- **`label-xyz`**: Set the label for the field `xyz`
- **`editable-xyz`**: Add an "edit" button next to the `xyz` field to let the user edit it. The changes are saved as soon as the field loses focus.
The editable attribute works with the following widgets: `sib-display-div`, `sib-display-labelled-div`, `sib-display-mailto` and `sib-display-tel`
- **`multiple-xyz`**: Show field `xyz` as multiple field containing one widget for each child. Multiple widget can be specified, example: `multiple-skills="my-custom-multiple-widget"`. If argument is used without value, default multiple widget is used. Cf the **[Multiple widgets](#multiple-widgets)** section below for more info.
- **`each-label-xyz`**: Used with `multiple-xyz`, label of each child of multiple widget
- **`each-class-xyz`**: Used with `multiple-xyz`, class of each child of multiple widget
- **`each-range-xyz`**: Used with `multiple-xyz`, range value of each child of multiple widget
- **`multiple-xyz-add-label`**: Used with `multiple-xyz`, text of the "+" button
- **`multiple-xyz-remove-label`**: Used with `multiple-xyz`, text of the "×" button
Filter content:
- **`search-fields`**: It is possible to search/filter your list by choosing the fields you want to filter it with.
- **`search-value-xyz`**: The default value of the search field `xyz`
- **`search-label-xyz`**: Set the label for the search field `xyz`
- **`search-widget-xyz`**: The form widget of the search field `xyz`
- **`search-range-xyz`**: The range of values of the search field `xyz`
- **`group-by`**: The resources will be grouped by the field you give as a parameter. For example, `group-by="category"` will add a class `group-mycategory` to each marker with the `category` value is `My Category`.
You can then color these markers with a simple CSS rule:
```css
.group-mycategory {
border-color: #FFCCEE;
}
```
- **`counter-template`**: To display the number of resources fetched by the `sib-display`.
It takes a string in which you can use HTML tags, and the `counter` variable to add the number.
i.e. `"<strong>${counter} results</strong>"`
Navigate:
- **`action-xyz`**: name of the route to reach when the widget for the field `xyz` is clicked. By default, a `sib-link` widget is used.
Style:
- **`class-xyz`**: Class attribute added to the fields `xyz`.
- **`child-xyz`**: add attribute `xyz` to all children.
- **`default-xyz`**: Value displayed for field `xyz` when it's empty or not defined
- **`empty-widget`**: Widget to display when there is no element in the container
- **`empty-value`**: To display a value in the empty widget. It can be accessed in the widget like this: `${value}`
### `sib-widget`
......
......@@ -7,6 +7,7 @@
<title>SIB test: sib-map</title>
<script type="module" src="../dist/components/sib-map.js"></script>
<script type="module" src="../dist/index.js"></script>
<link rel="stylesheet" href="../dist/style/default-theme.css" />
<link rel="stylesheet" href="styles.css" />
<script>
document.addEventListener("DOMContentLoaded", event => {
......
......@@ -28,7 +28,6 @@ export const SibMap = {
},
created(): void {
importCSS('https://unpkg.com/leaflet@1.3.1/dist/leaflet.css');
importCSS('./../style/default-theme.css');
this.markers = [];
},
attached(): void {
......
......@@ -22,7 +22,6 @@ async function evalTemplateString(str: string, variables = {}) {
}
function importCSS(...stylesheets: string[]): HTMLLinkElement[] {
return stylesheets.map(url => {
url = relativeSource(url);
let link = Array.from(document.head.querySelectorAll('link')).find(
link => link.href === url,
);
......@@ -33,6 +32,7 @@ function importCSS(...stylesheets: string[]): HTMLLinkElement[] {
document.head.appendChild(link);
return link;
});
}
function importJS(...plugins: string[]): HTMLScriptElement[] {
......
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