CETEIcean 1.3.0 → 1.6.0

package/.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "cSpell.words": [
+    "Ordinality",
+    "prefixdef"
+  ]
+}

package/README.md

@@ -44,6 +44,14 @@ CETEIcean.getHTML5("URL_TO_YOUR_TEI.xml", function(data) {
 })
 ```
 
+By default, CETEIcean saves and restores the scroll position for a document via a URL fragment. To turn this behavior off, particularly when using CETEIcean for Server Side Rendering, you can set the `ignoreFragmentId` option to `true`:
+
+```js
+new CETEI({
+  ignoreFragmentId: true
+})
+```
+
 ### Other methods
 
 #### getHTML5( url, callback, perElementFn )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "CETEIcean",
-  "version": "1.3.0",
+  "version": "1.6.0",
   "description": "JavaScript library to load a TEI XML document and register it as HTML5 custom elements.",
   "main": "src/CETEI.js",
   "keywords": [
@@ -16,12 +16,13 @@
     "url": "https://github.com/TEIC/CETEIcean.git"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "7.15.6",
+    "babel-preset-env": "^1.7.0",
     "http-server": "^0.12.3",
     "onchange": "^6.1.1",
-    "rollup": "0.62.0",
-    "rollup-plugin-babel": "^3.0.3",
+    "rollup": "^2.57.0",
+    "@rollup/plugin-babel": "^5.3.0",
     "rollup-plugin-terser": "1.0.1",
     "terser": "^3.17.0"
   },

package/rollup.config.js

@@ -1,4 +1,4 @@
-import babel from 'rollup-plugin-babel';
+import babel from '@rollup/plugin-babel';
 import { terser } from 'rollup-plugin-terser';
 
 export default {
@@ -16,7 +16,7 @@ export default {
           "modules": false,
           "targets": {
             "chrome": 65,
-            "safari": 11,
+            "safari": 13,
             "firefox": 60
           }
         }]

package/src/CETEI.js

@@ -1,7 +1,7 @@
 import defaultBehaviors from './defaultBehaviors';
 import * as utilities from './utilities';
 import {addBehaviors, addBehavior, applyBehaviors, removeBehavior} from './behaviors';
-import {learnElementNames} from './dom';
+import {learnElementNames, learnCustomElementNames} from './dom';
 
 class CETEI {
   constructor(options){
@@ -30,6 +30,7 @@ class CETEI {
     this.hasStyle = false;
     this.prefixDefs = [];
     this.debug = this.options.debug === true ? true : false;
+    this.discardContent = this.options.discardContent === true ? true : false;
 
     if (this.options.base) {
       this.base = this.options.base;
@@ -50,6 +51,7 @@ class CETEI {
         window.removeEventListener("ceteiceanload", CETEI.restorePosition);
       }
     }
+    
   }
 
   /* 
@@ -95,8 +97,8 @@ class CETEI {
   */
   makeHTML5(XML, callback, perElementFn){
     // XML is assumed to be a string
-    let XML_dom = ( new DOMParser() ).parseFromString(XML, "text/xml");
-    return this.domToHTML5(XML_dom, callback, perElementFn);
+    this.XML_dom = ( new DOMParser() ).parseFromString(XML, "text/xml");
+    return this.domToHTML5(this.XML_dom, callback, perElementFn);
   }
 
   /* 
@@ -215,6 +217,17 @@ class CETEI {
     }
   }
 
+  /*
+    Convenience method for HTML pages containing pre-processed CETEIcean Custom 
+    Elements. Usage:
+      const c = new CETEI();
+      c.processPage();
+  */
+  processPage() {
+    this.els = learnCustomElementNames(document);
+    this.applyBehaviors();
+  }
+
   /* 
     To change a namespace -> prefix mapping, the namespace must first be 
     unset. Takes a namespace URI. In order to process a TEI P4 document, e.g.,
@@ -261,7 +274,11 @@ append(fn, elt) {
 }
 
 appendBasic(elt, content) {
-  utilities.hideContent(elt, true);
+  if (this.discardContent) {
+    elt.innerHTML = "";
+  } else {
+    utilities.hideContent(elt, true);
+  }
   elt.appendChild(content);
 }
 
@@ -358,10 +375,7 @@ insert(elt, strings) {
   // If we have before and after tags have them parsed by
   // .innerHTML and then add the content to the resulting child
   if (strings[0].match("<[^>]+>") && strings[1] && strings[1].match("<[^>]+>")) { 
-    span.innerHTML = strings[0] + (strings[1]?strings[1]:"");
-    for (let node of Array.from(elt.childNodes)) {
-      span.firstElementChild.appendChild(node.cloneNode(true));
-    }
+    span.innerHTML = strings[0] + elt.innerHTML + (strings[1]?strings[1]:"");
   } else {
     span.innerHTML = strings[0];
     span.setAttribute("data-before", strings[0].replace(/<[^>]+>/g,"").length);

package/src/behaviors.js

@@ -19,6 +19,11 @@ export function addBehaviors(bhvs) {
       }
     }
   }
+  if (bhvs["functions"]) {
+    for (let fn of Object.keys(bhvs["functions"])) {
+      this.utilities[fn] = bhvs["functions"][fn];
+    }
+  }
   if (bhvs["handlers"]) {
     console.log("Behavior handlers are no longer used.")
   }

package/src/dom.js

@@ -13,4 +13,8 @@ export function learnElementNames(XML_dom, namespaces) {
   // Add the root element to the array
   els.add(qname(root));
   return els
+}
+
+export function learnCustomElementNames(HTML_dom) {
+  return Array.from(HTML_dom.querySelectorAll("*[data-origname]"), e => e.localName.replace(/(\w+)-.+/,"$1:") + e.getAttribute("data-origname"));
 }

package/src/utilities.js

@@ -71,6 +71,12 @@ export function hideContent(elt, rewriteIds = true) {
     hidden.setAttribute("data-original", "");
     for (let node of Array.from(elt.childNodes)) {
       if (node !== hidden) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          node.setAttribute("data-processed", "");
+          for (let e of node.querySelectorAll("*")) {
+            e.setAttribute("data-processed", "");
+          }
+        }
         hidden.appendChild(elt.removeChild(node));
       }
     }
@@ -202,7 +208,6 @@ export function serialize(el, stripElt, ws) {
   return str;
 }
 
-
 export function unEscapeEntities(str) {
   return str.replace(/>/, ">")
             .replace(/"/, "\"")

package/test/TCW22.html

@@ -2,11 +2,25 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="http://teic.github.io/css/tei.css" title="no title" charset="utf-8">
+    <link rel="stylesheet" href="https://teic.github.io/css/tei.css" title="no title" charset="utf-8">
     <script src="https://cdn.polyfill.io/v1/polyfill.js?features=modernizr:promises&unknown=polyfill" charset="utf-8"></script>
     <script src="../dist/CETEI.js" charset="utf-8"></script>
     <script type="text/javascript">
-      (new CETEI).getHTML5('https://raw.githubusercontent.com/TEIC/Documentation/master/TCW/tcw22.xml?new=' + Date.now(), function(data) {
+      let ct = new CETEI();
+      let b = {
+        "tei": {
+          "title": [
+            ["tei-titlestmt>tei-title", function(e) {
+              let head = document.createElement("tei-head");
+              head.innerHTML = e.innerHTML;
+              let body = this.dom.querySelector("tei-body");
+              body.insertBefore(head, body.firstElementChild);
+            }]
+          ]
+        }
+      }
+      ct.addBehaviors(b);
+      ct.getHTML5('https://raw.githubusercontent.com/TEIC/Documentation/master/TCW/tcw22.xml?new=' + Date.now(), function(data) {
         document.getElementsByTagName("body")[0].appendChild(data);
       });
     </script>

package/test/addBehaviorTest.html

@@ -19,7 +19,7 @@
        * is an HTML element. The function names must match the name of the
        * element they will be applied to.
        ***********************************/
-      c.addBehaviors({"handlers":{
+      c.addBehaviors({"tei":{
         // Overrides the default ptr behavior, displaying a short link
         "ptr": function(elt) {
           var link = document.createElement("a");
@@ -34,7 +34,7 @@
             return b;
         },
         // Inserts the first array element before tei:add, and the second, after.
-        "add": ["`","´"]
+        "add": ["<b>`","´</b>"]
       }});
       c.getHTML5('testTEI.xml', function(data) {
         document.getElementById("TEI").innerHTML = "";