Walter J. Ong, S.J. Center for Digital Humanities, in support of RERUM annotations, offers this simple project for quickly creating exhibitions of annotated collections.
To install the script on your project, use the deer.js
on your page.
<script src="//centerfordigitalhumanities.github.io/deer/releases/alpha/deer.js" type="module"></script>
View the wiki or read on for details.
Use the <deer-view>
element or .deer-view
class to automatically connect the DEER renderer to your page.
<deer-view deer-id="https://example.com/id/001"></deer-view>
The DEER module will automatically detect these elements and watch the deer-id
attribute, rendering the resolved object inside. There are several templates available to you or you can
create
your own.
DEER will construct an object combining the resolved deer-id
value with the results of a query for annotations targeting it. The JSON template simply displays the result.
<deer-view deer-template="json" deer-id="https://example.com/id/001"> </deer-view>
The entity template attempts to render the object properties as a definition list, as is typically displayed as metadata or Dublin Core terms.
<deer-view deer-template="entity" deer-id="https://example.com/id/001"> </deer-view>
The person template attempts to render the object properties as a person's profile.
<deer-view deer-template="person" deer-id="https://example.com/id/001"> </deer-view>
The list template shows items connected in an aggregation. The same template can be used for static and dynamic lists as explained in the wiki.
<deer-view deer-template="list" deer-list="itemListElement" deer-id="https://example.com/id/001"> </deer-view>
A simple template for showing a single property.
<deer-view title="Sample Prop" deer-key="name" deer-template="prop" deer-id="https://example.com/id/001"> </deer-view>
Though the default options may be limited, it is simple for a developer to extend existing templates or create a new one from scratch. The complete instructions can be found in the wiki.
A simple template made to show a cat.
<deer-view deer-template="cat" deer-id="https://example.com/id/001"> </deer-view>
The deer-config.js
file contains all the defaults for using DEER. Any developer wishing to rename watched attributes, to attach new templates, and more can extend this configuration object when initializing DEER.
Developers can extend regular application logic to update and connect their interfaces by using the DEER Event system or rely on a few simple interactions for the bulk of users needs.
deer-link
In any <deer-view>
element, the deer-link
attribute instructs the templates how to attach links to the rendered object. For lists, each item with an @id
property will include an anchor tag hyperlinking
to the deer-link
URL joined with the @id
. This example simply changes the hash on the current page.
<deer-view deer-template="list" deer-list="itemListElement" deer-link="#" deer-id="https://example.com/id/001"> </deer-view>
Building on the example above, it is possible to load new objects into elements by watching the hash and updating the deer-id
attribute. The DEER observer will rerender the contents immediately.
window.onhashchange = () => hashExample.setAttribute("deer-id", window.location.hash.substr(1))
Another option that is more transparent to the user and allows for more flexibility is to use the deer-listening
attribute to tell one <deer-view>
element to watch another for clicks and load the render the resulting
object.
<deer-view id="exampleListen" deer-template="list" deer-list="itemListElement" deer-id="https://example.com/id/001"> </deer-view> <deer-view deer-template="person" deer-listening="exampleListen"> </deer-view>
Adding new entities and annotations is a simple process (wiki). Update your <form>
with deer-type
and deer-key
attributes.
<form deer-type="Thing" deer-context="http://schema.org" deer-id="https://example.com/id/001"> <label>Label:</label> <input type="text" deer-key="name" deer-source="https://example.com/id/001"> <input type="hidden" deer-key="creator" value="demoAgent"> <input type="date" deer-key="date" deer-source="https://example.com/id/001"> <select> <option>Example choice</option> <option>Unknown to DEER</option> <option>Use as usual</option> </select> <textarea deer-key="description" deer-source="https://example.com/id/001"></textarea> <input type="submit"> </form>
This form preloads with recent annotations on this entity. The card to the right updates with every change as well, even if someone else has made the changes.
The<select>
has no deer-key
attribute, so no
annotation is made. This can be used for local application logic before saving.