Digital Edition Editor building blocks
npm install de-micro-editorThe package offers building blocks for manipulating text annotation options of Digital Editions. It comes with binary on/off features to highlight text with css classes.
Furthermore, a built-in OSD image viewer offers better representation of facsimiles. The Micro-Editor comes with some more options like: choosing font family and font size as well as full-screen mode and image switch (on/off).
- AMP
- Freud HKA
- HANSLICK
- SCHNITZLER BRIEFE
``JavaScript`
npm install de-micro-editor
In JS:
`JavaScript`
const { LoadEditor } = require("de-micro-editor");
or
`JavaScript`
import { LoadEditor } from "de-micro-editor";
In HTML:
`HTML`
The package renders 7 different custom elements and creates event listeners to trigger defined functions. Each custom element takes an attribute opt which connects the element with a specific configurations parameter variant (see configuration description below). The window-resize element also takes an attribute pos which specifies a specific window to resize. The edition-pagination element uses attributes like pos, facs and data-type to access window, element ids like images and data-type for further specification. The last two attributes are optional.
`HTML
pos="1"
facs="id"
data-type="envelope">
`
For each variant (= custom element) the following classes must be added to your HTML site:
- aot.variants[0].html_class:
default = html-class-[opt] where [opt] must match the opt attribute of the custom element.
(Add this class to all html elements to to be highlighted or manipulated.)
- aot.variants[0].chg_citation: default = citation-url
(Add this class to your custom citation link.)
- fos.variants[0].paragraph:
default = p (Use this html element for text where the font size should be changed)
- fos.variants[0].p_class:
default = yes-index (Add this class to previous html elements. Only if html element and class are defined the font size will of containing text will be changed)
- fos.variants[0].sizes:
default = {
{
default: "default",
font_size_14: "14",
font_size_18: "18",
font_size_22: "22",
font_size_26: "26"
}
(It is recommended to keep the default key and value. All other keys and values can be adapted to your needs)
- ff.variants[0].paragraph:
default = p (Use this html element for text where the font size should be changed)
- ff.variants[0].p_class:
default = yes-index (Add this class to previous html elements. Only if html element and class are defined the font size will of containing text will be changed)
- fos.variants[0].fonts:
default = {
{
default: "default",
font1: "Times-New-Roman",
font2: "Courier-New",
font3: "Arial-serif"
}
(It is recommended to keep the default key and value. All other keys and values can be adapted to your needs.)
- is.variants[0].hide:
default = {
hidden: true,
class_to_hide: "hide-container1",
class_to_show: "show-container1",
class_parent: "hide-show-wrapper",
resize: "resize-hide"
}
- class_to_hide: add value to your html site for a container to be hidden when this feature is selected.class_to_show
- : add value to your html site for a container to be shown when this feature is selected.class_parent
- : add value to your html site for a wrapper element for the two previous classes elements
For each variant (= custom element) the following classes must be added to your HTML site:
- aot.variants[0].css_class:
default = css-class-[opt] where [opt] must match the opt attribute of the custom element.
(Add this class to your css file and assign css style properties.)
- aot.variants[0].color:
default = color-[opt] where [opt] must match the opt attribute of the custom element.
(Add this class to your css file and assign css style properties.)
- aot.span_element.css_class (optional):
default = badge-item
Add this class to your css stylesheet if you want to change the appearance. Default stylesheet available in style.css (see 'src/css' directory of package)
- aot.rendered_element.label_class (optional):
default = switch
Add this class to your css stylesheet if you want to change the appearance. Default stylesheet available in style.css (see 'src/css' directory of package)
- aot.rendered_element.slider_class (optional):
default = i-slider round
Add this class to your css stylesheet if you want to change the appearance. Default stylesheet available in style.css (see 'src/css' directory of package)
- fos.variants[0].sizes: (optional)
default = {
{
default: "default",
font_size_14: "14", (css property with minus instead of underline)
font_size_18: "18",
font_size_22: "22",
font_size_26: "26"
}
(Add font-size-\* to your stylesheet and define a custom font size.)
- fos.variants[0].fonts: (optional)
default = {
{
default: "default",
font1: "Times-New-Roman",
font2: "Courier-New",
font3: "Arial-serif"
}
(Add font\* to your stylesheet and define a custom font size.)
- is.variants[0].hide.column_small:
default = {
class: "col-md-6",
percent: "50%"
}
- is.variants[0].hide.column_small:
default = {
class: "col-md-12",
percent: "100%"
}
If Bootstrap is implemented no further settings are necessary. Otherwise define class for column sizes in your css stylesheet.
`
var editor = new LoadEditor({...});
Options for element annotation-slider. If a configuration is present it loads parameters and stores it as session cookies. Default: null.
All string values are custom values, feel free to choose any string. The "variants array" can hold multiple objects.
In case no parameters are provided default parameters are used. The only requirement is a predefined "opt" attribute value as part of the custom element. [opt] = opt attribute of custom element
`JavaScript`
aot: {
title: "Text Annotations",
variants: [
{
opt: "[opt]",
// class of html slider element
opt_slider: "[opt]-slider",
// visible title of the custom element
title: "Text Features",
// class to add a specific highlighting color
color: "color-[opt]",
// class to access elements to be highlighted or manipulated
html_class: "html-class-[opt]",
// class added or removed depending on slider state
css_class: "css-class-[opt]",
// if true elements will be hidden by default and visible of state is active
hide: {
hidden: false,
class: "html-class-[opt]"
},
// class for custom citation link
chg_citation: "citation-url",
// object to identify element as single or all (if true the custom element controls all variants)
features: {
all: false,
class: "single-feature" or "all-features" if set to true
}
},
],
// additional css class for visualizing text
span_element: {
css_class: "badge-item"
},
// class to define state of the custom element
active_class: "active",
// css class for HTML switch to turn on/off options
rendered_element: {
label_class: "switch",
slider_class: "i-slider round"
}
},
`JavaScript`
ff: {
name: "Change font family",
variants: [
{
// must match opt attribute of custom element
opt: "select-font",
// visible feature title
title: "Font family",
// default url parameter key
urlparam: "font",
// default citation url link
chg_citation: "citation-url",
// default fonts
fonts: {
default: "default",
font1: "Times-New-Roman",
font2: "Courier-New",
font3: "Arial-serif"
},
// default tag-name for text
paragraph: "p",
// default class of paragaph tag
p_class: "yes-index",
// not required but can be used to create addition styles
css_class: ""
}
],
// class for active state
active_class: "active",
// default class for select dropdown
// stylesheet provided by bootstrap
html_class: "custom-select"
},
`JavaScript
fs: {
name: "Create full size mode",
variants: [
{
// must match opt attribute of custom element
opt: "[opt]",
// default title
title: "Full screen on/off",
// default url parameter
urlparam: "fullscreen",
// default citation url class
chg_citation: "citation-url",
hide: {
hidden: true,
// class of html elements to be hidden when fullscree is active
class_to_hide: "hide-container"
}
}
],
// class for active state
active_class: "active",
rendered_element: {
// class for css stylesheet
a_class: "nav-link btn btn-round",
// svg for fullscreen button
svg: ""
}
},
`
`JavaScript`
fos: {
name: "Change font size",
variants: [
{
// must match opt attribute value of custom element
opt: "[opt]",
// visible feature title
title: "Font size",
// url parameter name
urlparam: "fontsize",
// custom class for citation link
chg_citation: "citation-url",
// default font sizes
sizes: {
default: "default",
font_size_14: "14",
font_size_18: "18",
font_size_22: "22",
font_size_26: "26"
},
// default tag-name containing text
paragraph: "p",
// default class in combination with paragraph that contains text
p_class: "yes-index",
// default addition to css class. Will be combined with font size value
css_class: "font-size-"
}
],
// default class for state
active_class: "active",
// default class for select dropdown
// stylesheet provided by bootstrap
html_class: "custom-select"
},
`JavaScript`
is: {
name: "enable/disable image viewer",
variants: [
{
// must match opt attribute of custom element
opt: "edition-switch",
// default feature title
title: "Facsimile on/off",
// default url parameter key
urlparam: "image",
// default citation link class
chg_citation: "citation-url",
// default class for hiding html elements
fade: "fade",
// default column class and stylesheet property value
// if state is on / active
column_small: {
class: "col-md-6",
percent: "50%"
},
// default column class and stylesheet property value
// if state is off
column_full: {
class: "col-md-12",
percent: "100%"
},
// default classes to show/hide/resize html elements and html wrapper
hide: {
hidden: true,
class_to_hide: "hide-container1",
class_to_show: "show-container1",
class_parent: "hide-show-wrapper",
resize: "resize-hide"
},
// default height of image container
image_size: "1000px"
}
],
// default class of state
active_class: "active",
// default class and svg for rendered element
rendered_element: {
a_class: "nav-link btn btn-round",
svg: ""
}
},
`JavaScript`
il: {
name: "load images in OSD viewer",
opt: "image-loader",
title: "Faksimiles",
urlparam: "page",
chg_citation: "citation-url",
pag_link: ".pagination .nav-tabs .nav-item .nav-link",
pag_tab: ".pagination-tab.tab-pane",
img_size: "1000px",
url: "https://id.acdh.oeaw.ac.at/auden-musulin-papers/",
url_param: ".jpg?format=iiif",
osd_target: "container",
img_source: "container2",
img_types: ["envelope", "sheet"],
active_class: "active",
inactive_class: "fade",
bootstrap_class: "show",
},
`JavaScript``
ep: {
name: "Page Pagination",
opt: "edition-pagination",
title: "Page Pagination",
urlparam: "page",
chg_citation: "citation-url",
pag_link: ".pagination .nav-tabs .nav-item .nav-link",
pag_tab: ".pagination-tab.tab-pane",
img_size: "1000px",
active_class: "active",
inactive_class: "fade",
bootstrap_class: "show",
url: "https://id.acdh.oeaw.ac.at/auden-musulin-papers/",
url_param: ".jpg?format=iiif",
osd_target: "container",
img_source: "container2"
},