-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
improved theming and documentation
Showing
20 changed files
with
386 additions
and
537 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -19,7 +19,6 @@ | |
import '@ulb-darmstadt/shacl-form/index.js' | ||
</script> | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/dark.min.css"> | ||
<link href=" https://cdn.jsdelivr.net/npm/[email protected]/css/fonts.min.css " rel="stylesheet"> | ||
<script src="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script> | ||
</head> | ||
|
||
|
@@ -30,6 +29,7 @@ <h1><shacl-form> demo</h1> | |
<div class="menu"> | ||
<a id="intro" href="#intro">Basic usage</a> | ||
<a id="datatypes" href="#datatypes">Data types</a> | ||
<a id="theming" href="#theming">Theming</a> | ||
<a id="complex-example" href="#complex-example">Complex example</a> | ||
<a id="try-your-own" href="#try-your-own">Try your own</a> | ||
</div> | ||
|
@@ -70,11 +70,14 @@ <h1><shacl-form> demo</h1> | |
</script> | ||
|
||
<template id="template-intro"> | ||
<script type="module"> | ||
import '@ulb-darmstadt/shacl-form/index.js' | ||
</script> | ||
<p> | ||
<a href="https://github.com/ULB-Darmstadt/shacl-form"><shacl-form></a> is an HTML5 web component that takes <a href="https://www.w3.org/TR/shacl/">SHACL shapes</a> as input and generates an HTML form, allowing to enter data that conform to the given shapes. | ||
See the <a href="https://github.com/ULB-Darmstadt/shacl-form">README</a> for documentation of all element attributes, functions and supported input/output RDF formats. | ||
Basic usage example: | ||
</p> | ||
<p>Basic usage example:</p> | ||
<pre> | ||
<code> | ||
<html> | ||
|
@@ -173,21 +176,28 @@ <h1><shacl-form> demo</h1> | |
</script> | ||
</template> | ||
|
||
<template id="template-theming"> | ||
<div class="wrapper"> | ||
<fieldset><legend>Default</legend><iframe src="theme-default.html"></iframe></fieldset> | ||
<fieldset><legend>Material</legend><iframe src="theme-material.html"></iframe></fieldset> | ||
<fieldset><legend>Bootstrap</legend><iframe src="theme-bootstrap.html"></iframe></fieldset> | ||
</div> | ||
</template> | ||
|
||
<template id="template-complex-example"> | ||
<p>This is a more complex example, demonstrating the advanced features of <shacl-form>. See below for an explanation.</p> | ||
<div class="wrapper"> | ||
<fieldset><legend>SHACL shapes as input to the form</legend><pre id="shacl-shape-input"></pre></fieldset> | ||
<fieldset><legend>Data graph as input to the form</legend><pre id="shacl-data-input"></pre></fieldset> | ||
<fieldset><legend>Generated form</legend><shacl-form id="shacl-form" data-submit-button data-mode="view2" data-value-subject="http://example.org/4f2a8de3-9fc8-40a9-9237-d5964520ec54"></shacl-form></fieldset> | ||
<fieldset><legend>Generated form</legend><shacl-form id="shacl-form" data-submit-button data-collapse="open2" data-mode="view2" data-value-subject="http://example.org/4f2a8de3-9fc8-40a9-9237-d5964520ec54"></shacl-form></fieldset> | ||
</div> | ||
<fieldset id="shacl-output" class="mt-1"><legend>Output generated by the form</legend><pre></pre></fieldset> | ||
<script type="module"> | ||
import { MapBoxPlugin } from '@ulb-darmstadt/shacl-form/plugins/mapbox.js' | ||
import { MapboxPlugin } from '@ulb-darmstadt/shacl-form/plugins/mapbox.js' | ||
|
||
setTimeout(async () => { | ||
const form = document.getElementById("shacl-form") | ||
form.registerPlugin(new MapBoxPlugin({ datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' }, 'pk.eyJ1IjoiaHViZXJtb3NlciIsImEiOiJja3c2NDI2MXAwbWx0MnVudnJiOGV6NjRqIn0.va4IWkUk-USoL2Z8FylNzA')) | ||
// form.importPlugin('MapBoxPlugin', '@ulb-darmstadt/shacl-form/plugins/mapbox.js', { datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' }) | ||
form.registerPlugin(new MapboxPlugin({ datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' }, 'pk.eyJ1IjoiaHViZXJtb3NlciIsImEiOiJja3c2NDI2MXAwbWx0MnVudnJiOGV6NjRqIn0.va4IWkUk-USoL2Z8FylNzA')) | ||
|
||
const shapes = document.getElementById("shacl-shape-input") | ||
const data = document.getElementById("shacl-data-input") | ||
|
@@ -220,7 +230,7 @@ <h1><shacl-form> demo</h1> | |
form.dataset['values'] = dataTTL | ||
}) | ||
</script> | ||
<p class="mt-1">The above uses the following features:</p> | ||
<p class="mt-1">The example above uses the following features:</p> | ||
<h2>SHACL shape inheritance</h2> | ||
<p></p> | ||
<h2>Providing additional data to the shapes graph</h2> | ||
|
@@ -231,30 +241,32 @@ <h2>Providing additional data to the shapes graph</h2> | |
<li></li> | ||
</ul> | ||
</p> | ||
<h2>Binding a data graph to the form</h2> | ||
<h2>Binding a data graph</h2> | ||
<p></p> | ||
<h2>SHACL "or" constraint</h2> | ||
<p> | ||
<shacl-form> supports using the <a href="https://www.w3.org/TR/shacl/#OrConstraintComponent"><span class="code">sh:or</span></a> constraint to let users select between different options on nodes or properties. | ||
In the example above, the node shape <span class="code">example:Attribution</span> defines a property with <span class="code">sh:path prov:agent</span>, | ||
whose values either conform to node shape <span class="code">example:Person</span> or <span class="code">example:Organisation</span>. After selecting one of the options, the respective input fields are added to the form. | ||
</p> | ||
<p>When binding an existing data graph to the form, the <span class="code">sh:or</span></a> constraint is tried to be resolved depending on the respective value:</p> | ||
<p>When binding an existing data graph to the form, the <span class="code">sh:or</span></a> constraint is tried to be resolved depending on the respective data value:</p> | ||
<ul> | ||
<li><p class="my-0">For RDF literals, a <span class="code">sh:or</span> option with a matching <span class="code">sh:datatype</span> is chosen</p></li> | ||
<li><p class="my-0">For RDF literals, an <span class="code">sh:or</span> option with a matching <span class="code">sh:datatype</span> is chosen</p></li> | ||
<li><p class="my-0">For blank nodes or named nodes, the <span class="code">rdf:type</span> of the value is tried to be matched with a node shape having a corresponding <span class="code">sh:targetClass</span> or with a property shape having a corresponding <span class="code">sh:class</span></p></li> | ||
</ul> | ||
<h2>Plugins</h2> | ||
<p>The Javascript of this page contains the following code:</p> | ||
<pre> | ||
<code> | ||
import { MapBoxPlugin } from '@ulb-darmstadt/shacl-form' | ||
<p>Plugins can modify the rendering of the form and add functionality to edit and view certain RDF datatypes or predicates (or a combination of both). As an example, the JavaScript of this page contains the following code:</p> | ||
<pre><code> | ||
import { MapBoxPlugin } from '@ulb-darmstadt/shacl-form/plugins/mapbox.js' | ||
const form = document.getElementById("shacl-form") | ||
form.registerPlugin(new MapBoxPlugin({ datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' })) | ||
</code> | ||
</pre> | ||
<p>Plugins can modify the rendering of the form and add functionality to edit certain RDF datatypes or predicates (or a combination of both).</p> | ||
shacl groups | ||
form.registerPlugin(new MapBoxPlugin({ datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' }, API_KEY)) | ||
</code></pre> | ||
<p> | ||
In effect, whenever a SHACL property has a <span class="code">sh:datatype</span> of <span class="code">http://www.opengis.net/ont/geosparql#wktLiteral</span>, the plugin is called to create the editor and/or viewer HTML elements. | ||
This specific plugin uses <a href="https://docs.mapbox.com/mapbox-gl-js/guides/">Mapbox GL</a> to edit and view geometry expressed with <a href="http://giswiki.org/wiki/Well_Known_Text">well known text</a> on a map. | ||
</p> | ||
|
||
shacl groups | ||
lang strings (languageIn) | ||
|
||
</template> | ||
|
@@ -280,6 +292,7 @@ <h2>Plugins</h2> | |
output.classList.toggle('invalid', !ev.detail?.valid) | ||
output.querySelector("pre").innerText = form.serialize() | ||
}) | ||
shapes.focus() | ||
}) | ||
</script> | ||
</template> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<style> | ||
:root, shacl-form [data-bs-theme="light"] { | ||
--brand-color: #008877; | ||
--bs-body-color-rgb: 255, 0, 0 !important; | ||
} | ||
body { font-family: sans-serif; } | ||
</style> | ||
<script type="module" src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/bootstrap.js"></script> | ||
</head> | ||
<body> | ||
<shacl-form id="shacl-form" data-shapes-url="complex-example.ttl"></shacl-form> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<style> | ||
body { font-family: sans-serif; } | ||
</style> | ||
<script type="module" src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/index.js"></script> | ||
</head> | ||
<body> | ||
<shacl-form id="shacl-form" data-shapes-url="complex-example.ttl"></shacl-form> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<style> | ||
body { font-family: sans-serif; } | ||
</style> | ||
<link href=" https://cdn.jsdelivr.net/npm/[email protected]/css/fonts.min.css " rel="stylesheet"> | ||
<script type="module" src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/material.js"></script> | ||
</head> | ||
<body> | ||
<shacl-form id="shacl-form" data-shapes-url="complex-example.ttl"></shacl-form> | ||
</body> | ||
</html> |
Large diffs are not rendered by default.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,5 @@ | ||
:host .lang-chooser { top: 0; right: 43px; font-size: 0.7em; } | ||
:host form.mode-edit { --label-width: 0em; } | ||
:host .property-instance.valid::before { top: 6px; } | ||
:host .validation-error { top: 6px; } | ||
:host .lang-chooser { right: 32px; font-size: 0.8em; } | ||
:host .property-instance::after { content: attr(data-description); position: absolute; bottom: -12px; left: 13px; font-size: 12px; opacity: 0.7;} | ||
.form-floating[data-description] { margin-bottom: 18px; } | ||
.remove-button { padding: 6px; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,3 @@ | ||
:host .editor:not([type='checkbox']) { border: 1px solid #DDD; padding: 2px 4px; } | ||
:host .property-instance label { display: inline-block; word-break: break-word; width: var(--label-width); line-height: 1em; padding-top: 0.15em; padding-right: 1em; flex-shrink: 0; position: relative; } | ||
:host .property-instance:not(:first-child) > label { visibility: hidden; height: 0; } | ||
:host .property-instance:not(:first-child) > label { visibility: hidden; max-height: 0; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters