Tiagosousagarcia/issue31

README.md

@@ -96,6 +96,7 @@ Copy the entire `dist/TeiConverter` folder to the root of your project (or a sui
   - [Damage](/documentation/customEvents/damageHover.md);
   - [Deletions](/documentation/customEvents/delHover.md);
   - [Gaps](/documentation/customEvents/gapHover.md);
+  - [Unclear text](/documentation/customEvents/unclearHover.md);
 
 ### Running Tests
 

dist/TeiConverter/TeiConverter.config.json

@@ -80,6 +80,11 @@
         "showPlaces": false,
         "standOffPosition": "top"
     },
+    "unclear": {
+        "render": "event",
+        "marker": ["[", "]"],
+        "message": "text unclear"
+    },
     "elementsSelected": {
         "ab" : {
             "include": true,
@@ -158,6 +163,9 @@
         },
         "standOff": {
             "include": true
+        },
+        "unclear": {
+            "include": true
         }
     },
     "addCustomBehaviours": {

documentation/TeiConverter.config.md

@@ -325,6 +325,27 @@ Defines whether to display any list of place information included in the metadat
 ### scope: `global`
 Defines whether to append the metadata in the `<standOff>` element to the top or the bottom of the TEI container. If any other value is set for this option, the `<standOff>` element will not be rendered and an error will be thrown in the console.
 
+## unclear
+### type: `object`
+### scope: `global`
+An object containing options for `<unclear>` elements.
+
+## unclear.render
+### type: `string`
+### values: `event`
+### scope: `global`
+Defines whether unclear elements should be shown inline and given as an object in custom event ([`unclearHover`](/documentation/customEvents/unclearHover.md)). Currently available options are `event`. Any other value will not make any modifications to the text and will display an error on the console.
+
+## unclear.marker
+### type: `array | string`
+### scope: `global`
+If [`unclear.render`](#unclearrender) is `event`, defines what typographical marker is used to distinguish the unclear text from the transcription. Default is to use square brackets ('[]').
+
+## unclear.message
+### type: `string`
+### scope: `global`
+If [`unclear.render`](#unclearrender) is `event`, defines what message is passed in the event. Default is 'text unclear'.
+
 # Element options
 
 ## elementsSelected

documentation/customEvents/unclearHover.md

@@ -0,0 +1,29 @@
+# Introduction
+
+Places where the text is unclear can be served through a custom event to the client, allowing for more flexibility on the frontend design. The custom event is called `unclearHover`, and is triggered everytime a user hovers over a relevant anchor text. The anchor includes a class `.event` to allow for styling.
+
+# Usage
+Create an event listener for our custom event `unclearHover` as you would normally. Use the event handler to collect the data from `event.detail` trigger the host interface response. For example:
+
+```js
+addEventListener('unclearHover', (event) => {
+        console.log(event.detail);
+        // useful code...
+      })
+```
+
+# Event object
+The message for the `<unclear>` element is included in the `event.detail` object, which you should capture when adding the event listener. According to the standard document, the event should return the following message: 'text unclear'. The specific structure should normally be as follows:
+
+```
+event.detail: object {
+    message: string           // message defined in the config
+}
+```
+
+Here is an example from `GB-1-1-2-1-17-20.xml`:
+```json
+{
+  "message": "text unclear"
+}
+```

index.html

@@ -48,6 +48,10 @@
         console.log(event.detail);
       });
 
+      addEventListener('unclearHover', (event) => {
+        console.log(event.detail);
+      });
+
     </script>
 
 <!-- FOR DEV TESTING ONLY -- Gets the list of files in the repo, manages form options and submit -->
@@ -74,7 +78,7 @@ <h1>TEI</h1>
 
   <div style="width: 85%; margin-right: auto; margin-left: auto;" id="teiContainer">
     <tei-converter
-      path="https://raw.githubusercontent.com/evolvinghands/EvolvingHandsNcl/main/GB-1-1-2-1-17-21.xml" configPath="dist/TeiConverter/TeiConverter.config.json"/>
+      path="https://raw.githubusercontent.com/evolvinghands/EvolvingHandsNcl/main/GB-1-1-2-1-17-20.xml" configPath="dist/TeiConverter/TeiConverter.config.json"/>
   </div>
 </body>
 

static/TeiConverter.config.json

@@ -80,6 +80,11 @@
         "showPlaces": false,
         "standOffPosition": "top"
     },
+    "unclear": {
+        "render": "event",
+        "marker": ["[", "]"],
+        "message": "text unclear"
+    },
     "elementsSelected": {
         "ab" : {
             "include": true,
@@ -158,6 +163,9 @@
         },
         "standOff": {
             "include": true
+        },
+        "unclear": {
+            "include": true
         }
     },
     "addCustomBehaviours": {

static/behavioursDictionary.js

@@ -603,7 +603,24 @@ export let behaviours = function (options) {
             } else if (options.standOffPosition === 'bottom') {
                 elt.parentNode.appendChild(elt);
             }
-            // else if top, nothing needs to be done
+
+        },
+
+        "unclear": function (elt) {
+            const legalRenders = ['event'];
+
+            if (!legalRenders.includes(options.render)) {
+                console.error(`${options.render} is not a valid rendering option for <unclear> elements, using defaults instead`)
+            } else if (options.render === 'event') {
+                // add markers
+                addMarkersToElement(elt, options);
+                // create custom event
+                let event = new CustomEvent('unclearHover', { bubbles: true, detail: { message: options.message } })
+                elt.classList.add('event');
+                elt.onmouseenter = function () {
+                    dispatchEvent(event)
+                }
+            }
         }
     }
 }

static/teiBehaviours.js

@@ -53,6 +53,9 @@ export let teiBehaviours = function (config) {
             if (choice === 'gap') {
                 options = {...options, ...config.gap}
             }
+            if (choice === 'unclear') {
+                options = {...options, ...config.unclear}
+            }
             behavioursObject['tei'][choice] = behaviours(options)[choice];
         }
     }