https://github.com/kit-data-manager/inclde
INCLDE - Includable Linked Metadata Editor
https://github.com/kit-data-manager/inclde
client-side editor gui inactive json-ld linked-data web-component
Last synced: about 1 month ago
JSON representation
INCLDE - Includable Linked Metadata Editor
- Host: GitHub
- URL: https://github.com/kit-data-manager/inclde
- Owner: kit-data-manager
- License: mit
- Created: 2023-09-29T12:45:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-05T03:27:26.000Z (over 2 years ago)
- Last Synced: 2025-03-07T08:48:56.626Z (about 1 year ago)
- Topics: client-side, editor, gui, inactive, json-ld, linked-data, web-component
- Language: TypeScript
- Homepage: https://kit-data-manager.github.io/INCLDE/
- Size: 496 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# INCLDE – Includable Linked Data Editor
INCLDE (spelled "/ɪnˈkluːd/", as "include") is a web component that allows editing of linked data. The goal is to allow easy integration into web-based applications.
- [Demo](https://kit-data-manager.github.io/INCLDE/)
- [NPM Package](https://www.npmjs.com/package/@kit-data-manager/inclde)
## Installation
```bash
npm install
```
To start the dev server use the following command:
```bash
npm start
```
## Embedding / including in to existing projects
The web component can be built using `npm run build` and after embedding the resulting files in to a website, INCLDE can be invoked like other web components. The components' documentation has a separate, [auto-generated readme file](./src/components/inclde-editor/readme.md). Example:
```javascript
fetch("/data/example.jsonld")
.then((response) => response.json())
.then((data) => {
const editor = document.createElement("inclde-editor");
editor.data = data;
editor.config = config;
editor.addEventListener('editorClosed', event => {
console.log('event', event.detail);
// Process return data further
})
document.body.appendChild(editor);
});
```
You may also want to take a look at the [index.html example](./src/index.html), which is what you see when you run `npm start`.
### Properties
| Property | Attribute | Description | Type | Default |
| --------------------- | --------- | ----------- | ------------------ | ----------- |
| `config` _(required)_ | `config` | | `object \| string` | `undefined` |
| `data` _(required)_ | `data` | | `object \| string` | `undefined` |
`data` defines the data that should be edited. It can be either a JSON object or a JSON-LD string.
`config` defines the configuration of the editor. It can be either a JSON object or a JSON-LD string.
An example config showcasing all currently available functionality:
```JSON
{
"title": "INCLDE Demo Instance",
"hideAttributesByDefault": false,
"allowNewAttributes": true,
"attributConfig": [
{
"onType": "http://schema.org/Comment",
"attributes": [
{
"name": "http://schema.org/image",
"readOnly": true
}
]
},
{
"onId": "https://adhesivewombat.bandcamp.com/track/funky-sundays",
"attributes": [
{
"name": "http://schema.org/duration",
"hidden": true
}
]
}
]
}
```
Allowing specific attributes to be hidden or set to read only.
### Events
| Event | Description | Type |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| `editorClosed` | Fired when the editor is closed with the save or cancel buttons. `event.detail` contains the edited data if the save button was clicked, undefined otherwise. | `CustomEvent` |
## Custom element implementation
Custom Elements provide a way to overwrite the way certain elements are rendered. This can be used to add custom functionality to the editor.
For this custom elements need to implement the `CustomElement` interface.
Here a minimal example:
```typescript
import { h } from '@stencil/core';
import { CustomElement } from './index';
export default class ExampleEl implements CustomElement {
public static id = 'http://custom-elements.definition/example';
public value: string = "";
private callback?: (value: any) => void;
constructor(valueObj: any, callback?: (value: any) => void) {
if (typeof valueObj['value'] === 'string') {
this.value = valueObj['value'];
} else {
// Error handling
}
this.callback = callback;
}
private onInput(event: InputEvent) {
if (event.target instanceof HTMLInputElement) {
this.value = event.target.value;
if (this.callback !== undefined) {
this.callback(this.value);
}
}
}
render() {
return
}
}
```
## License
INCLDE (formerly lmd-editor) is licensed under MIT License. See [LICENSE](LICENSE) for more information.
Currently, the editor also makes use of icons from [Font Awesome](https://fontawesome.com) 6.4.0 ([License](https://fontawesome.com/license/free))