This project is based on Voyant Dynamic Table of Contexts and aims to be an independent and more robust iteration.
- Get the files
- Either add as a dependency:
npm i @cwrc/dtoc - Or download:
https://registry.npmjs.org/@cwrc/dtoc/-/dtoc-0.x.x.tgz
- Either add as a dependency:
- Copy files to a directory in your workspace
- Initialize (and provide a configuration object)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./lib/ext/ext.js"></script>
<script type="text/javascript" src="./lib/saxon/saxon.js"></script>
<script type="module" src="./dtoc.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/ext/ext.css" />
<link rel="stylesheet" type="text/css" href="./css/dtc.css" />
<script src="https://kit.fontawesome.com/891f15ee2f.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400&family=Roboto+Slab:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
const dtocApp = new dtoc();
</script>
</body>
</html>There are two approaches for loading documents into DToC.
Provide a configuration object with an input entry to the constructor.
new dtoc({
"dtocRootUrl": "https://calincs.gitlab.io/cwrc/dtoc/",
"input": {
"documents": "//div[@type='chapter']|//div[@type='preface']|//div[@type='afterword']",
...
"inputs": [
"https://calincs.gitlab.io/cwrc/dtoc/dtoc-2.0/data/xml/sample.xml"
]
}
});Call load with an input configuration.
const dtocApp = new dtoc();
dtocApp.load({
"documents": "//div[@type='chapter']|//div[@type='preface']|//div[@type='afterword']",
...
"inputs": [
"https://calincs.gitlab.io/cwrc/dtoc/dtoc-2.0/data/xml/sample.xml"
]
})Call showInputWindow (with an optional input configuration).
const dtocApp = new dtoc();
dtocApp.showInputWindow();The configuration object contains app configuration as well as the input configuration.
Italicized properties are optional
| Name | Type | Details |
|---|---|---|
| dtocRootUrl | String | An URL specifying the location of the DToC files root. If not provided then window.location will be used. |
| input | Object | The input configuration object (see below for details) |
| showMenu | Boolean | Whether to show the options menu. Default is true. |
| showTitle | Boolean | Whether to show the edition title. Default is true. |
| debug | Boolean | Whether to enable debug messages in the console. |
| Name | Type | Details |
|---|---|---|
| inputs | Array | An array of URLs or Files |
| documents | String | The XPath for locating the document(s) within each XML file |
| documentContent | String | The XPath for locating the actual content within the document |
| documentTitle | String | The XPath for locating the document title |
| documentAuthor | String | The XPath for locating the document author |
| documentImages | String | The XPath for identifying images |
| documentNotes | String | The XPath for identifying notes |
| documentLinks | String | The XPath for identifying links |
| ignoreNamespace | Boolean | Whether to remove the root/default namespace prior to evaluating XPaths. Use to avoid having to use local-name() in XPaths. |
| editionTitle | String | The title of the edition |
| editionSubtitle | String | The subtitle of the edition |
| indexDocument | String | The XPath for locating the index document to use as the corpus index |
| curation | Object | An optional curation object. Can be used to customize the tags panel and the table of contents panel. |
| curation.markup | Array | An array of markup |
| curation.toc | Array | The table of contents |
You can get the current input configuration by calling the getInputConfig method.
const inputConfig = dtocApp.getInputConfig();
console.log(inputConfig.documents);