diff --git a/README.md b/README.md index dded3f42..3dce03d5 100644 --- a/README.md +++ b/README.md @@ -351,14 +351,45 @@ no options ##### Annotations -| Name | Type | Default | Description | -|-------------------------|------------------------|--------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| types | AnnotationTypeConfig[] | `[]` | Defines annotation types that should be displayed in this view. The Annotation API response will then be filtered according to this config. | -| types[i].name | String | `null` | Specifies the name which corresponds to the `x-content-type` property from annotations response. | -| types[i].index | String | `null` | Specifies the index name that should be used in the annotation item. TIDO uses Bootstrap Icons, please lookup the allowed values [here](https://github.com/quasarframework/quasar/blob/dev/extras/bootstrap-icons/icons.json) | -| types[i].displayWhen | String | `null` | Text content type that was specified under [Text options](#text). Annotation will only be shown if that content type is currently active. | +| Name | Type | Default | Description | +|-------------------------|------------------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| types | AnnotationTypeConfig[] | `[]` | Defines annotation types that should be displayed in this view. The Annotation API response will then be filtered according to this config. | +| types[i].name | String | `null` | Specifies the name which corresponds to the `x-content-type` property from annotations response. | +| types[i].icon | String | `null` | Specifies an icon that is displayed on the left of the annotation item. Currently we provide only a fixed list of possible icons. [here](#icons) | +| types[i].index | String | `null` | Specifies the index name that should be used in the annotation item. TIDO uses Bootstrap Icons, please lookup the allowed values [here](https://github.com/quasarframework/quasar/blob/dev/extras/bootstrap-icons/icons.json) | +| types[i].displayWhen | String | `null` | Text content type that was specified under [Text options](#text). Annotation will only be shown if that content type is currently active. | | types[i].annotationType | String | `annotation` | Controls the look of the annotation item. Allowed values: `annotation` or `text`. Currently the only difference is that there is no index at type `text`. | +###### Icons + +Below you can find a list of icons that can be used for annotation items. Please use these as values for the `icon` +configuration option at annotations. +- archive +- arrowLeft +- arrowRight +- bank +- book +- chat +- check +- code +- dropdown +- externalLink +- fullscreen +- info +- journals +- marker +- minus +- moon +- pen +- pencil +- person +- reset +- sun +- translate +- warning +- zoomIn +- zoomOut + ## Methods The instantiated TIDO Object exposes methods to control TIDO's behaviour programmatically. diff --git a/examples/gfl.html b/examples/gfl.html index d85193c5..f1a88a98 100644 --- a/examples/gfl.html +++ b/examples/gfl.html @@ -38,7 +38,7 @@ } window.addEventListener('load', function () { - const tido = new Tido({ + new Tido({ manifest: "https://goethes-farbenlehre-berlin.sub.uni-goettingen.de/textapi/Z_1822-02-20_k/manifest.json", labels: { item: "Seite", @@ -96,7 +96,7 @@ types: [ { name: "Editorial Comment", - icon: "biChatFill" + icon: "chat" }, { name: "Abstract", @@ -116,27 +116,27 @@ types: [ { name: "Person", - icon: "biPersonFill" + icon: "person" }, { name: "Place", - icon: "biGeoAltFill" + icon: "marker" }, { name: "Org", - icon: "biBank2" + icon: "bank" }, { name: "Object", - icon: "biArchiveFill" + icon: "archive" }, { name: "Date", - icon: "biCalendarWeek" + icon: "calendar" }, { name: "Work", - icon: "biJournals" + icon: "journals" } ] } diff --git a/src/utils/annotations.js b/src/utils/annotations.js index 98e8a4ca..fdc3ed07 100644 --- a/src/utils/annotations.js +++ b/src/utils/annotations.js @@ -32,7 +32,7 @@ export const createSvgIcon = (name) => { figure.classList.add(`icon-${name}`); style.innerHTML = ` .icon-${name}::after { - content: url('data:image/svg+xml; utf8, ${iconString}'); + content: url('data:image/svg+xml; utf8, ${iconString}') !important; } `; figure.appendChild(style);