teic/ceteicean

TEI in HTML5 Custom Elements

ceteicean's Issues

How to add behavio[u]rs?

For the JS-challenged, could you perhaps add a complete example to the wiki pages about behaviors? I added some stuff into the existing "behaviors.js" file, but I can't see where this file gets included or actioned. Do I have to recompile my CETEI.js file?

npm run build didn't work for me.

:~/git/CETEIcean$ npm run build

[email protected] build /home/jamesc/git/CETEIcean
rollup -c rollup.config.js

/usr/bin/env: node: No such file or directory
npm ERR! weird error 127
npm WARN This failure might be due to the use of legacy binary "node"
npm WARN For further explanations, please read
/usr/share/doc/nodejs/README.Debian

npm ERR! not ok code 0

Printing loses all formatting

A file which looks fine on screen doesn't get formatted properly when sent to the printer, using "Print" command in Firefox. Is it meant to work? If not, why not?

Multiple @target value not handled properly

The @target attribute on ptr or ref can supply multiple pointers: e.g. <ref target="#foo #bar"/> This is plausibly handled by the default TEI to HTML conversion (you get two links in the HTML) but CETEIcean produces one link with an invalid URI (the concatenation of the two URIs supplied in the TEI source), thus resulting in a 404.

Add option to mute URL fragment parsing

The URL fragment parsing that is added any time window is available gets in the way of one-page applications, throwing errors for fragments like #/. I don't think it should be part of the CETEIcean core in general (it makes a big assumption about how CETEIcean is to be used in the browser), but it's been there since the early days so my request would be to add an option parameter to turn it off (thus keeping it as the default behavior).

https://github.com/TEIC/CETEIcean/blob/master/src/CETEI.js#L511

Declarative source linking

Just an idea, but wondering whether we could set things up so that CETEIcean doesn't need to be explicitly given the xml link to load. Maybe a

<link type="application/tei+xml" rel="alternative">

in the header would be enough, and would also be a hint to web crawlers or other non-human agents as to where the source is. CETEIcean could inspect the page source to find the link.

Cannot build (Unexpected token import)

npm-debug.log.txt

Hi,
My build fails:

c:\Users\andrewag\github\CETEIcean>npm run build
> [email protected] build c:\Users\andrewag\github\CETEIcean
> rollup -c rollup.config.js
Unexpected token import
C:\Users\andrewag\github\CETEIcean\rollup.config.js:1
(function (exports, require, module, __filename, __dirname) { import babel from 'rollup-plugin-babel';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:513:28)
    at Module._extensions..js (module.js:550:10)
    at Object.require.extensions..js (C:\Users\andrewag\github\CETEIcean\node_modules\rollup\bin\runRollup.js:56:6)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at C:\Users\andrewag\github\CETEIcean\node_modules\rollup\bin\runRollup.js:61:19
Type rollup --help for help, or visit https://github.com/rollup/rollup/wiki
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.3.1
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `rollup -c rollup.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'rollup -c rollup.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the CETEIcean package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     rollup -c rollup.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs CETEIcean
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls CETEIcean
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     c:\Users\andrewag\github\CETEIcean\npm-debug.log

From googling I got the impression that this has to do with babel/ES/node versions, but I understand nothing of this. I have just cloned CETEIcean and downloaded the current node.js, but it's all on windows at the moment. During npm i I did get this:

c:\Users\andrewag\github\CETEIcean>npm i
npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead!
> [email protected] postinstall c:\Users\andrewag\github\CETEIcean\node_modules\spawn-sync
> node postinstall
[email protected] c:\Users\andrewag\github\CETEIcean
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| |   +-- [email protected]
| |   `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | |   `-- [email protected]
| | |     `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| |   +-- [email protected]
| |   +-- [email protected]
| |   `-- [email protected]
| |     `-- [email protected]
| `-- [email protected]
|   +-- [email protected]
|   +-- [email protected]
|   `-- [email protected]
+-- [email protected]
| +-- [email protected]
| `-- [email protected]
|   `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| |   `-- [email protected]
| `-- [email protected]
|   `-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | |   +-- [email protected]
| | |   | `-- [email protected]
| | |   +-- [email protected]
| | |   +-- [email protected]
| | |   | +-- [email protected]
| | |   | | `-- [email protected]
| | |   | |   +-- [email protected]
| | |   | |   +-- [email protected]
| | |   | |   `-- [email protected]
| | |   | +-- [email protected]
| | |   | `-- [email protected]
| | |   +-- [email protected]
| | |   | `-- [email protected]
| | |   +-- [email protected]
| | |   +-- [email protected]
| | |   +-- [email protected]
| | |   | `-- [email protected]
| | |   +-- [email protected]
| | |   +-- [email protected]
| | |   | +-- [email protected]
| | |   | | `-- [email protected]
| | |   | `-- [email protected]
| | |   +-- [email protected]
| | |   | +-- [email protected]
| | |   | `-- [email protected]
| | |   `-- [email protected]
| | |     +-- [email protected]
| | |     `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| |   +-- [email protected]
| |   +-- [email protected]
| |   | +-- [email protected]
| |   | +-- [email protected]
| |   | +-- [email protected]
| |   | +-- [email protected]
| |   | +-- [email protected]
| |   | `-- [email protected]
| |   `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | |   `-- [email protected]
| | `-- [email protected]
| |   +-- [email protected]
| |   | +-- [email protected]
| |   | `-- [email protected]
| |   `-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
|   `-- [email protected]
|     `-- [email protected]
+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | |   +-- [email protected]
| | |   `-- [email protected]
| | |     `-- [email protected]
| | |       `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | |   `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | |   +-- [email protected]
| | |   `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| `-- [email protected]
|   `-- [email protected]
`-- [email protected]
  `-- [email protected]
    +-- [email protected]
    +-- [email protected]
    `-- [email protected]
      +-- [email protected]
      +-- [email protected]
      | +-- [email protected]
      | | +-- [email protected]
      | | | +-- [email protected]
      | | | `-- [email protected]
      | | `-- [email protected]
      | +-- [email protected]
      | `-- [email protected]
      +-- [email protected]
      `-- [email protected]
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]`

Thanks for any help

Tables are broken!

Acceptance Criteria

First, what does it mean for tables to work (in my opinion).

1. Boundaries between the cells are aligned across the rows (cell borders form vertical lines - column borders).
2. Column widths depend on the content of the cells (e.g., column with document numbers will be narrower than the column with document descriptions in the same table).
3. TEI cols attribute, if present on a cell, is handled properly.

Recent Change

Until recently, table behavior was used to translate TEI tables into HTML tables and cols attribute on TEI cells into colspan attribute on the td elements. As a result, all three criteria above were satisfied.

Recently (e62c329), table behavior was removed as "horrible and hacky". I am not sure if the code was considered "horrible" (I do not see it as more horrible than the note or list behaviors) or the resulting DOM (which seems no more difficult to use than that produced by the ptr or list behaviors), but it is not my aesthetics that was offended :)

Now that tables are left untranslated as nested tei-table, tei-row and tei-cell elements, all the "tables work" criteria above are broken; it seems to be implied that the breakage can be fixed by styling the tables with CSS.

CSS Grid

Judging from the commit comment and the addition of display: grid to the CSS rule for tei-row, CSS Grid is the recommended way to style the tables. Since table cells are nested within the rows, CSS Grid, which is designed to "gridify" a bunch of non-nested elements, can not be used to style the table as a whole. (Not sure if CSS Subgrid would help with that, but it is not yet supported by the browsers in any case.) As a result, table rows have to be styled as independent grids.

To force boundaries of the cells belonging to the same column (that CSS Grid knows nothing about) into alignment (criterion 1), all rows of the same table have to be styled exactly the same. Indeed, that is what sample CETEIcean.css does, allotting 1fr (one fraction) to each cell in a row.

Unfortunately, this breaks criterion 2 above: resulting column widths are completely oblivious to the cell content. To regain reasonable table widths - which previous approach delivered automatically - each table now has to be styled manually by the user of CETEIcean (talk about horrible and hacky!), and even then, responsiveness of the table to overall resizing - which previously was handled by the in-browser algorithm refined over a few decades - is now lost.

Criterion 3 above is also broken: nothing looks at the cols attribute; I suspect that desired result is not expressible with CSS Grid in principle, but even if it is - there is enough functionality regression to invalidate the CSS Grid approach.

display: table*

There is an alternative approach: set CSS display attribute on tei-table to table, on tei-row to table-row, and on tei-cell to table-cell. This brings back automatic compliance with criteria 1 and 2 above.

Unfortunately, browsers ignore colspan attribute unless it is set on a td element, so even if conversion of TEI cols to HTML colspan was added, criterion 3 above would still be broken.

table behavior

It seems that the only way to regain functionality previously provided by the table behavior is to bring the table behavior back :(

Of course, I can maintain my own copy in every project that uses CETEicean, but is forcing all your users to do that or face their tables stop working a reasonable price to pay for a little less horrible and hacky code? :)

endnote duplication

If you do bring table behavior back, please look into the endnote duplication issue that it causes:
an endnote residing in a table cell is appended to the endnote container twice. (I suspect that endnote behavior (and all others, whose results are not visible) is applied to such endnotes twice:
once as a part of the same "apply behaviors" run that triggered the table behavior, and once again when behaviors are applied to the results of the table behavior.)

Thanks!

Babel seems to 'trip' over double semi-colon

https://github.com/TEIC/CETEIcean/blob/master/src/CETEI.js#L414 ends with a duplicate semi-colon. Now this would have been a harmless issue in ES6 but it is one with a potential impact on transpiled code.

Because the version of the platform I'm working on doesn't support ES6, I used Babel to transpile everything to ES5 and added custom-elements-es5-adapter as a dependency. This works most of the time, but sometimes behaviours don't initialise, without anything logged in the browser console/inspector. When I add the debug option to new CETEI({ ... }), however, these incidents translate to no rendition at all and a message in the console saying Uncaught (in promise) ReferenceError: tagName is not defined.

Where the original has

key: "tagName",
value: function tagName(e) {
if (name.includes(":"), 1) {
    return name.replace(/:/,"-").toLowerCase();;
  } else {
    return "ceteicean-" + name.toLowerCase();
  }
}

my transpiled code just has

value: function tagName(e) {
return e.includes(":"), e.replace(/:/, "-").toLowerCase();
}

(with no reference to "ceteicean-")

Not sure if said issue with behaviours failing to get initialised is at all related, but that code doesn't look like it's functionally equivalent.

Which is a long way of saying we might want get rid of one of the semi-colons (I don't care which :).

pb behaviors not triggered

It doesn't seem possible to add a behavior that's triggered by a pb-tag. Why is that, and could it be fixed?

Am I wrong? The looks like this (pretty standard):

const ct = new CETEI()
let behaviors = {
  tei: {
	pb: function (e) {
		console.log(e)
		return PageBegin(e)
	},
  },
}
ct.addBehaviors(behaviors)
const html = await ct.makeHTML5(data)

Nothing gets logged the the PageBegin-function does not run.

end-tags improperly processed

If you have an egXML containing an end-tag on a line on its own, this godforsaken lame pig of a processor loses its starting slash, thus rendering your example incomprehensible. For example:

<egXML xmlns="http://www.tei-c.,org/ns/1.0">
  </getWithTheProgramGuys>
</egXML>

gets rendered as

  <getWithTheProgramGuys>

Recursivity guidelines when using anonymous functions

Given the code that follows and the TEI, I have difficulties getting recursivity to work once I add a second anonymous function. I feel like some examples in the docs to deal with this would be great .

If I only apply one lambda, this goes well. If I start to add a second, even if it means returning the original object, it seems to be failing.

Browser : Firefox 61.0.1 64bits

---

JS code that works:

let CETEIcean = new CETEI();
        CETEIcean.addBehaviors({
          "namespaces": {
            "tei": "http://www.tei-c.org/ns/1.0"
          },
          "tei": {
              "div": function(element) {
                  var data = function (attr) {
                      return element.getAttribute(attr);
                  };
                  var div = document.createElement("div");
                  div.innerHTML = "<dl>\n" +
                      "   <dt>Subjects:</dt><dd>"+data("ana")+"</dd>\n" +
                      "   <dt>Adams Page:</dt><dd>"+data("corresp")+"</dd>\n" +
                      "</dl>" + element.innerHTML;
                  return div;
              },
              "w": ["<span data-tooltip=\"$rw@lemma\">","</a>"],
          }
        });

JS code that does not work :

let CETEIcean = new CETEI();
        CETEIcean.addBehaviors({
          "namespaces": {
            "tei": "http://www.tei-c.org/ns/1.0"
          },
          "tei": {
              "div": function(element) {
                  var data = function (attr) {
                      return element.getAttribute(attr);
                  };
                  var div = document.createElement("div");
                  div.innerHTML = "<dl>\n" +
                      "   <dt>Subjects:</dt><dd>"+data("ana")+"</dd>\n" +
                      "   <dt>Adams Page:</dt><dd>"+data("corresp")+"</dd>\n" +
                      "</dl>" + element.innerHTML;
                  return div;
              },
              "w": ["<span data-tooltip=\"$rw@lemma\">","</a>"],
              "quote": function (element) {
                  return element;
              }
          }
        });

Example TEI

<?xml version="1.0" encoding="UTF-8"?>
<TEI xmlns="http://www.tei-c.org/ns/1.0">
  <teiHeader>
      <fileDesc>
         <titleStmt>
            <title>Latin Sexual Excerpt</title>
         </titleStmt>
         <publicationStmt>
            <p>Collated by Thibault Clerice</p>        
         </publicationStmt>
         <sourceDesc>
            <p>Information about the source</p>
         </sourceDesc>
      </fileDesc>
  </teiHeader>
  <text>
      <body>
         <div type="fragment" corresp="adams:29" ana="#personnification">
    <quote xml:lang="lat" source="urn:cts:latinLit:phi1294.phi002.perseus-lat2:9.2.2">
        <w lemma="et(-)">Et</w> 
        <w lemma="queror(3ème singulier indicatif présent actif)">queritur</w> 
        <w lemma="de(-)">de</w> 
        <w lemma="tu(accusatif masculin singulier)|tu(ablatif masculin singulier)|tu(accusatif féminin singulier)|tu(ablatif féminin singulier)">te</w> 
        <w lemma="mentula(nominatif singulier)|mentula(vocatif singulier)|mentula(ablatif singulier)">mentula</w> 
        <w lemma="solo(2ème singulier impératif présent actif)|solum(nominatif pluriel)|solum(vocatif pluriel)|solum(accusatif pluriel)|solus(nominatif féminin singulier)|solus(vocatif féminin singulier)|solus(ablatif féminin singulier)|solus(nominatif neutre pluriel)|solus(vocatif neutre pluriel)|solus(accusatif neutre pluriel)">sola</w> 
        <w lemma="nihil(nominatif neutre singulier)|nihil(accusatif neutre singulier)">nihil</w>.     
    </quote>
 </div>
      </body>
  </text>
</TEI>

Manipulating CETEIcean output elements with JS document.querySelector('tei-p[attribute='value]')

Hi Ceteicean team,

First, thanks a lot for bringing this lightweight solution for bringing TEI documents closer to the DOM! It is great!

We are running an experiment to present canonical texts in Tibetan language. We successfully built a simple user interface and have generated some custom CSS to manipulate the CETEIcean output text.

Our documents are complex in structure and require auxiliary outlines to properly navigate through the different parts of the text. So, we are trying to build some "scrollSpy" functionality using the IntersectionObserver API as to connect the actual text and its outline, each of these parsed separately into the DOM using two instances of the CETEIcean object.

The issue is that, so far, we could not find a way to manipulate the CETEIcean generated custom elements via document.querySelector() or document.querySelectorAll() inside our JS logic files.

Any assistance will be so appreciated!
Rafael

How to handle empty tei-ref elements

I have lots of <ref> elements whose @target I wish to process as a link. This works just fine with the default behaviour when the <ref> has some content, but is not so fine when the <ref> is empty. How should I change the existing behaviour for tei-ref so as to insert a default string?

That is, I would like

<tei:ref target="http://wibble.com"/>

to look like

<a href="http://wibble.com">[string]</a>

where [string] is a constant I supply in the behaviour specification. For extra brownie points, this string should be concatenated with any content of the tei-ref, rather than replacing it.

Turn TEI elements with 'ref' attribute into links

I need TEI elements that have ref attribute (e.g., persName) to render as (clickable) HTML links.

With TEI-BP, I added a custom XSLT template that wraps such elements in HTML <a> with href value copied from the TEI's ref attribute:

<xsl:template match="tei:*[@ref]" priority="99">
  <a href="{@ref}">
    <xsl:copy>
      <xsl:copy-of select="@*"/>
      <xsl:apply-templates/>
    </xsl:copy>
  </a>
</xsl:template>

How do I achieve similar results using CETEIcean?
Do I need to tweak CETEI.js? Add some behavior? Use CSS?

Since neither TEI-BP nor CETEIcian perform this obviously useful transformation
out-of-the-box (as far as I know), maybe I am just encoding my documents incorrectly?
What is the idiomatic TEI way of achieving this result?

Thanks!

egXML not properly handled

Currently the content of egXML elements is formatted in the same way as other elements. This is wrong, if only because it is not in the TEI namespace. What needs changing? For an example, see http://lb42.github.io/W/talk.html

Error on files with xml version 1.1

A file with

<?xml version="1.1" encoding="UTF-8"?>

In the start of the file

Returns:

XML Parsing Error: XML declaration not well-formed
Location: http://localhost:8000/
Line Number 1, Column 16:

<?xml version="1.1" encoding="UTF-8"?>
---------------^

Literally changing the line to:

<?xml version="1.0" encoding="UTF-8"?>

Fixes the issue..

How to use CETEIcean server-side (if possible)?

Hello there,

first of all, a huge thank you for this library, such a great tool. I assume that all those who use it find it invaluable. 👍

My question
I would love to use CETEIcean in a SSR (server-side rendering) environment (Next.js). I assumed that custom elements require the window object, thus SSR not being an option.

But this part of the docs has me wondering if this is actually possible:

To turn this behaviour off, particularly when using CETEIcean for Server Side Rendering, you can set the ignoreFragmentId option to true:

Could anyone elaborate on this? Does anyone have an example of CETEIcean + SSR in the wild?

When I try to use CETEIcean in SSR, I get the (not surprising) error that window is not defined. I did not set any behaviours, and also tried setting ignoreFragmentId: true as suggested in the docs:

For those interested: this is my custom hook using tanstack-query (which should not be an issue here), which gets called in NodeJS:

import { useQuery } from '@tanstack/react-query'
import CETEI from '@/library/CETEI'

const fetchTeiText = async (slug: string) => {
  const ct = new CETEI({ ignoreFragmentId: true })

  return await ct.getHTML5(`data/tei/${slug}.xml`)
}

const useTeiText = (slug: string) => {
  return useQuery(['tei-text', slug], () => fetchTeiText(slug))
}

export { useTeiText, fetchTeiText }

I tried looking into tweaking the actual library, but that might not be a good idea due to my lack of knowledge regarding custom elements and CETEIcean's internals.

Any feedback is highly appreciated

Styling Shadow DOM elements

Shadow DOM styles are encapsulated, meaning an anchor tag in shadow DOM inside a <ptr> won't get styled by, say tei-ptr a {} in a document stylesheet, or even by a {}. You have to either inject styles into the Shadow DOM inside a <style> tag, or (via the same mechanism) import the main stylesheet into the Shadow DOM. There are methods for pushing styles from the main CSS down into the Shadow DOM, but these are now deprecated.

We should think about ways to make it easy to inject styles. Possibly just a third element in template arrays containing style directives or imports. Also need to provide examples. #2 is a related issue.

Use CETEIcean to extract and transform only a subelement of a TEI document

I am currently learning about CETEIcean and I am really impressed how easy it makes my life generally, even though this is my first real contact with JavaScript – so thank you so much for the great tool and my apologies in advance if this is a stupid question, but here goes: I was wondering whether I could use CETEIcean to get a subpart, say, a paragraph from a TEI document. My usecase is that I have a text in two languages in two separate TEI documents. One of them is being rendered (easily!) by CETEIcean but I would like to be able to load excerpts from the translation and display them side by side. My instinct was to create a new CETEI object, apply all my custom behaviors with .addBehaviors and then put the result of .getHTML5(mypath) into a variable which I could then descend into and get the element by ID. I haven't succeeded yet, mainly because I am having a hard time getting to grips with JS promises, but I didn't mean this to be a tech support question. Rather, I wanted to ask more generally, what CETEIcean's ideas about fetching subelements of an XML document are. Is there a smart way to go about such a thing, or is it too much philosophically opposed to transforming a full and valid XML document?
Again, sorry if this is a stupid or inappropriate question, I just really didn't know where else to ask.

confusing line in tutorial

For the beginner trying to grok behaviors, the following sentence is a real barrier:

"add the following after between the first and second lines of the code in the <script></script> tags:"

Is the addition meant to go "after" or "between"?

Why not just show us the code with the modification?

ref elements with @target inconsistently processed

If my document has a <ref> element with a @target attribute it is (correctly) rendered as an HTML link. However, whether clicking on it is successful or not seems rather arbitrary. A @target value like "#foo" never works (looks for "$rw@target") even if there is an element with @xml:id="foo" somewhere in the document. If it's a URL, like "http://whatever" then it works -- unless there is a # in the URL. So I can refer to the whole of a chapter of the TEI Guidelines, but not to a particular subsection. This is annoying.

alternate behaviors based on attribute values - example?

I'm trying to write a behavior for <ref> that does one thing if the element has a @type="internal" and another if it has @type="bibl" attribute. I'm modeling it on the <ref> example in CETEIcean. The documentation seems to say that I can't make a second behavior - so I am trying to add a second component to the <ref> behavior.

This is not working, but I'm not sure of how the js script syntax works in this case. My js abilities are so-so. In the example below, the first part [type=internal] is fine. The question is where and how to add the [type=bibl]. And I may just be writing bad javascript...

I've looked for an example to follow but was unable to find one (which doesn't mean that there it's not there.)

``
"ref": [
["[type=internal]", function(elt) {
var linkNum = elt.getAttribute("target").replace(/#A-/,"");
var linkPre = '{{ site.baseurl }}edition/plant';
var link = document.createElement("a");
link.innerHTML = elt.innerHTML;
link.href = linkPre.concat(linkNum);
return link;
}],
["[type=bibl]", ["[target]", ["<a href="$rw@target">",""]]]
]

Modularize the `note` behavior

Default behavior defined for note handles endnotes ("[place=end]"), and I want to use that in my project. It also handles all other notes via , ["_", ["(",")"]] - and that part I do not want.

Currently, I have to manually comment the part of the behavior that I do not want out in the CETEI.js file. I'd rather override the note behavior entirely in my own glue code, but I do not want to have to copy 23 lines of the function that handles the endnotes. Do you think it is possible to factor this function out of the behavior itself and make it available for re-use? (It does need access to the tei-tei elemnt DOM as we know...)

Thanks!

Readme.md and CSS

By “just by grabbing the CETEI.js” I got one long line with all contents, until I understood that I had to also grab CETEIcean.css “and linking to it … like the examples do”. None of the usual CSS I use with TEI stylesheets was of any help. Of course it goes without saying… now that I think of it, I feel stupid, but it took me some time. I suggest to expand that sentence in the Readme with something about the CSS.

Add support for TEI P4

See pelagios/recogito2#591. May be possible just via behavior configuration, but not sure it will support no namespace.

Update spanish tutorial

We made two small but important changes to the tutorial and it would be useful to make them to the Spanish tutorial as well:

• using VSCode instead of Atom (Atom is being discontinued soon)
• using python3 or node instead of python 2 to run a server

You can see a summary of changes here: https://github.com/TEIC/CETEIcean/pull/58/files

Would you be able to update the ES tutorial accordingly?

Styling of links

Lovely work, this! I'm really glad to see it.

The example pages show that when a TEI <ptr> is used, the resulting link looks like a link (underline and cursor: pointer), but for <ref>s this doesn't happen (in Firefox, at any rate). I think this is because the JS is setting the @href attribute in the case of <ptr> but not for <ref>. You might jsut be able to add this at line 88/89:

content.setAttribute("href", elt.getAttribute("target"));

Support for JS-frameworks (Vue, React etc.)

Dear CETEIcean team,

First of all: Hats off and congratulations to this exciting little library! Very promising approach that could be a game changer for some projects I know.

Problem

I have tried using CETEIcean in a modern JS framework such as Vue.js which uses a ShadowDOM. Rendering your TEI test file throws errors regarding the window object. I assume this has to do with how Vue treats the DOM.

Goal

I would like to be able to receive HTML5 from CETEIcean to further process using Vue.js, eventually rendering it in a template.

Do you have any experience using CETEIcean in such environments, or could provide any tips? Any help would be greatly appreciated.

Best wishes

dead link TCW22

README.md first link point to page that contain a dead link to twc22.xml

Apparently no support for <note> elements

http://teic.github.io/TCW/purifyDoc.html has a couple of things tagged <note place="end"> which are supposed to be footnotes (could be rendered as popups, perhaps) : at the moment their content just appears runon in the text, which looks weird.

Further clean-up of the CETEIcean.css

Comprehensive or not, /test/CETEIcean.css is likely to be used as a basis for styling TEI in projects that use CETEIcean. A few points that, if addressed, would make it easier, at least for me:

• add yi (Yiddish) to the list of the right-to-left languages;
• add ru (Russian) and pl (Polish) to the list of the left-to-right languages;
• remove space between .5 and em in tei-listbibl rule;
• two rules for tei-table can be merged;
• some element names escaped recent lower-casing, e.g.: accMat, addrLine, adminInfo, appInfo, biblFull, cRefPattern, musicNotation, origPlace, personGrp, secFol, soCalled.

Behavior-functions are not triggered

I have a reoccurring issue with behaviors that are added to CETEI. I've been trying different things, but none of the behaviors get activated. Nothing is logged to the console, and no header gets changed. It actually worked for a short while, then stopped again.

  const ct = new CETEI()
  let behaviors = {
  tei: {
	  div: function (e) {
		  console.log("div")
		  return e
	  },
	  head: function (e) {
		  let result = document.createElement("h" + e.dataset.level)
		  for (let n of Array.from(e.childNodes)) {
			  result.appendChild(n.cloneNode())
		  }
		  return result
	  },
  },
  }
  ct.addBehaviors(behaviors)
  const html = await ct.makeHTML5(data)

In your tutorial the keys are shown as strings, but JS simply change these to a normal object-key, like above.

Is there anything I've done wrong?

Thank you for providing an otherwise great library !

How to debug

Unless I've missed it, there's no easy way to debug one's use of Ceteicean. You can't save or display the "intermediate" HTML5 version of a document you're trying to get to behave properly, so you can't see exactly what is being generated till it's too late. Is there a good reason for that? Obviously you don't want it most of the time, but it would be really convenient to have a --debug switch, vel sim. If this is already easily done in JS, maybe a sentence saying how in the documentation?

addStyle is unused

addStyle() seems to be unused. Can it be deleted?
https://github.com/TEIC/CETEIcean/blob/master/src/CETEI.js#L183

Build error

Following the instructions in the README, I ran: npm i and then: npm run build. Instead of a CETEI.js file I received the following error:

› npm run build

> [email protected] build /Users/umd-laptop/Code/CETEIcean
> rollup -c rollup.config.js

Error loading /Users/umd-laptop/Code/CETEIcean/src/CETEI.js: It looks like your Babel configuration specifies a module transformer. Please disable it. If you're using the "es2015" preset, consider using "es2015-rollup" instead. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information
Error: Error loading /Users/umd-laptop/Code/CETEIcean/src/CETEI.js: It looks like your Babel configuration specifies a module transformer. Please disable it. If you're using the "es2015" preset, consider using "es2015-rollup" instead. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information
    at preflightCheck (/Users/umd-laptop/Code/CETEIcean/node_modules/rollup-plugin-babel/dist/rollup-plugin-babel.cjs.js:43:102)
    at transform$1 (/Users/umd-laptop/Code/CETEIcean/node_modules/rollup-plugin-babel/dist/rollup-plugin-babel.cjs.js:104:18)
    at /Users/umd-laptop/Code/CETEIcean/node_modules/rollup/src/utils/transform.js:18:28
    at tryCatch (/Users/umd-laptop/Code/CETEIcean/node_modules/rollup/node_modules/es6-promise/lib/es6-promise/-internal.js:187:12)
    at invokeCallback (/Users/umd-laptop/Code/CETEIcean/node_modules/rollup/node_modules/es6-promise/lib/es6-promise/-internal.js:199:13)
    at /Users/umd-laptop/Code/CETEIcean/node_modules/rollup/node_modules/es6-promise/lib/es6-promise/then.js:27:7
    at flush (/Users/umd-laptop/Code/CETEIcean/node_modules/rollup/node_modules/es6-promise/lib/es6-promise/asap.js:87:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:577:11)
Type rollup --help for help, or visit https://github.com/rollup/rollup/wiki

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/Cellar/node/6.3.1/bin/node" "/Users/umd-laptop/.node/bin/npm" "run" "build"
npm ERR! node v6.3.1
npm ERR! npm  v3.9.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `rollup -c rollup.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'rollup -c rollup.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the CETEIcean package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     rollup -c rollup.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs CETEIcean
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls CETEIcean
npm ERR! There is likely additional logging output above.

node version 6.3.1
npm version 3.9.2

CETEI.js file needs some pre-processing

The README file says "You can use CETEIcean in your projects just by grabbing the CETEI.js file from the latest release and linking to it in an HTML file"
This (to the naive reader) means I can just copy the file src/CETEI.js from the latest github release and use it from a webpage. but I think something more is needed to turn the source into something usable.
Specifically, I needed to

• sudo apt install npm
• npm i
• npm run build

and then copy not the version of CETEI.js in src, but the one in dist.
This is no doubt entirely obvious to the JS-experienced, but that's not entirely coterminous with the potential CETEICEAN user community!
I suggest changing the wording quoted above to something like
"You can use CETEIcean in your projects by grabbing the built version of the CETEI.js file from the latest release and linking to it in an HTML file. Build instrructions are given below."

Problem with behaviours

If I add a behaviour like

"add": [
	["[place=margin]", ["<",">"]],
],

it behaves like expected:

<ἔξωθεν>

But if I add html-tags to the behaviour like

"add": [
	["[place=margin]", ["<b>&lt;","&gt;</b>"]],
],

the output is

<>ἔξωθεν

So, the angle bracket from the second array isn't any more output after the word.

Is this expected, i.e. do I need to write a function for such cases? Or is it a bug?

Make savePosition and restorePosition optional behavior

I think these functions that parse a ulr fragment (window.location.hash) to scroll an ID into view should not be a core behavior of CETEIcean. URL fragments serve a variety of functions in modern webapps (especially one page apps) and this code can get in the way.
I would suggest to make it optional, e.g. via a parameter at instantiation. Thoughts? https://github.com/TEIC/CETEIcean/blob/master/src/CETEI.js#L682

CETEIcean does not follow <xi:include/> entries

I have a main TEI document containing several <xi:include /> entries such as:

...
<text xml:lang="es">
  <body>
    <xi:include href="abbr.xml" xmlns:xi="http://www.w3.org/2001/XInclude" xpointer="smabbr" parse="xml" />
    ...
  </body>
</text>
...

However, CETEIcean doesn't parse these files.
(When I directly transform the document with XSLT, everything looks fine, though.(

Is there any way of fixing this?

Declaring character entities with CETEIcean?

First off, thank you for this wonderful, rather useful piece of software. The relative ease of setting up a TEI project that it affords seems like a great step in making TEI XML more accessible.

When I'm working or just experimenting with TEI documents, many of them appear to have their character entities declared in a separate DTD file or .ent files, if I understand things correctly, usually through a relative link.

For instance, it is quite common for celt.ucc.ie to encode accented characters (e.g. ó, &amacron;) and rarer glyphs such as Tironian et (⁊) and map them to their equivalents.

Without those character references, the document fails to get rendered in CETEIcean (XML parsing error).

In these cases, the DTD and ENT files are not always publicly accessible, but I've compiled a list of currently up to 40 character references that I can manually insert directly at the top of the TEI XML document and that usually does the job.

However, that approach isn't exactly efficient and practical if it needs to be repeated for numerous documents, let alone in the event of having to update the list. It also requires one to modify the original documents, which detracts from the plug-and-play experience.

It would be great if CETEIcean could be told to read from a file containing character references before moving on to transform the TEI document.

Fixable browser incompatibility

On 05/01/17 08:49, Andreas Wagner wrote (on TEI-L)

Dear David, dear list,

Am 05.01.2017 um 08:13 schrieb David Maus:

,----
| TypeError: strings[0].includes is not a function
| if (strings[0].includes("<")) {
| ---^
|
| CETEI.js (Line 742, Column 16)
`----

using GNU IceCat 38.8.0
Build identifier: Mozilla/5.0 (Windows NT 6.1; rv:38.0) Gecko/20100101 Firefox/38.0

This "super cool CETEICEAN thingy" looks like a tremendous step
backwards in accessability and usability to me.

As of [1], String.prototype.includes is one of the few ES6 string functions
that the Firefox 38 engine did not yet support. However, Ff 38 is obsolete for
more than a year now, and newer firefox releases support the function
(Extended Support Release 45 was in March 2016).
Yet GNU Icecat seems to have moved to 45 only in Dec 2016, and on Windows and
Mac it is still on 38.8.0 [2]. Since you are on windows, I guess you are out
of luck for the moment.

You could bug the IceCat maintainers to hurry with their windows release, or
maybe you (or even CETEICEAN upstream) could use indexOf() instead of
includes() according to [3].

[1] http://kangax.github.io/compat-table/es6/
[2] https://en.wikipedia.org/wiki/GNU_IceCat#Releases
[3]
http://stackoverflow.com/questions/31340868/includes-not-working-in-all-browsers

HTH,
Andreas

Leading space before URL attribute causes .rw() method to assume an empty URL

Hi,

we just ran into the following issue: we had a TEI <graphics> element where the url argument had a leading space, like so:

<figure>
  <graphic url=" https://www.example.com/image.jpg" />
</figure>

CETEIcean converted this into an absolute URL, pointing to the base of the document. E.g. if the document were hosted at http://www.example.com/documents/document01.xml, the image element generated by CETEIcean would point to the URL http://www.example.com/documents/.

I read into the source code, and traced the source of the issue to the .rw() method here:

CETEIcean/src/utilities.js

Line 146 in 186ff5f

export function rw(url) {

We can easily fix this on our end by configuring a custom behavior. However I was wondering what your thoughts are. Would it make sense to simply .trim() the URL attribute before the RegEx check? I realize that the leading space might actually be invalid markup. But perhaps it might make sense to make things more robust?

If you think that trimming would be ok to add to the rw() method, I'm happy to send a PR.

Endnotes no longer work!

Default behavior for handling end notes (<note place="end">) uses this.dom to find or append the ol container for the notes. Since this is not what it used to be (CETEI instance, with dom referencing tei-tei element under construction), this breaks.

attribute names are case sensitive in XML too!

See http://teic.github.io/TCW/anyXMLproposal.html for example: the attribute is called minOccurs, not minoccurs.

While you're there, you shouldn't be removing the start and end tags from embedded comments either. See the bit of code at the end : the text "this code will/may need revising to deal with multiple values for the attribute " should be wrapped by <!-- and --> as it is in the source. You might possibly make a case for suppressing it entirely I suppose, but suppressing just its tags is a touch perverse.

Strange behaviour when attribute is missing

I have a defined behaviour like this :
"pb":[ "<p class='break'>[page $@n]</p>"],
This make e.g. <pb n="42"/> look like [page 42] which is fine.
However, if the n attribute is missing, it produces [page $@n] which seems a bit strange. Why doesn't it just do [page ] ?