added support for gaps

rochester-rcl · Dec 7, 2017 · ccc3ac7 · ccc3ac7
1 parent 17d3bf6
commit ccc3ac7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 24 deletions.
diff --git a/src/components/FZTextView.js b/src/components/FZTextView.js
@@ -80,25 +80,36 @@ class FZStageView extends Component {
   }
 }
 
+const gapClass = (gap: Object) => {
+  if (gap.reason) {
+    if (gap.reason.includes('cancellation') || gap.reason === 'overwrite' || gap.reason === 'erasure') {
+      return 'tei-gap-cancellation';
+    }
+    return 'tei-gap';
+  }
+  return 'tei-gap';
+}
+
+const formatGap = (stage: Object) => {
+  if (stage.gap) {
+    let gap;
+    // todo find a beter way to handle polymorphic properties i.e. Object vs Array<Object>
+    if (stage.gap.constructor === Array) {
+      gap = stage.gap[0];
+    } else {
+      gap = stage.gap;
+    }
+    if (gap.unit === 'line') {
+      return 100;
+    } else {
+      return Number(gap.extent);
+    }
+  }
+  return 0;
+};
+
 const FZStage = (props: Object) => {
   const { expanded, stageType, stage } = props;
-  const formatGap = (stage: Object) => {
-    if (stage.gap) {
-      let gap;
-      // todo find a beter way to handle polymorphic properties i.e. Object vs Array<Object>
-      if (stage.gap.constructor === Array) {
-        gap = stage.gap[0];
-      } else {
-        gap = stage.gap;
-      }
-      if (gap.attributes.unit === 'line') {
-        return 100;
-      } else {
-        return Number(gap.attributes.extent);
-      }
-    }
-    return 0;
-  };
   let expandedState = expanded ? 'expanded' : 'collapsed';
   let className = ['fz-text-display-stage', stageType, expandedState, formatStage(stage)].reduce((classA, classB) => {
     return classA + ' ' + classB;
@@ -121,7 +132,6 @@ const FZZoneView = (props: Object) => {
   const FZLineGroupView = (props: Object) => {
     const { lineGroup } = props;
     const getRotation = (attributes) => {
-      console.log(attributes);
       let lineGroupClass = "fz-text-display-line-group";
       if (!attributes) return lineGroupClass;
       if (attributes.style) {
@@ -281,9 +291,17 @@ const formatDiplomaticText = (diplomatic: Array) => {
           if (element.add) {
             subst.push(<span key={key} className="tei-add">{element.add["#text"]}</span>);
           }
+          if (element.gap) {
+            subst.push(<span key={key + '$'} className={gapClass(element.gap.gap)}>{'\xa0'.repeat(formatGap(element.gap))}</span>);
+          }
+
           formatted.push(<span key={key} className="tei-subst">{subst}</span>);
           break;
 
+        case 'gap':
+          formatted.push(<span key={key} className={gapClass(element.gap)}>{'\xa0'.repeat(formatGap(element))}</span>);
+          break;
+
         /*case 'handShift':
             formatted.push(<span key={key} className="tei-instr-pencil">{element["text"]}</span>);
             break;*/

diff --git a/src/css/fz-proto.css b/src/css/fz-proto.css
@@ -86,16 +86,14 @@
 
 .tei-gap-cancellation { /* <gap reason="cancellation"> also reason="cancellation_wash" & reason="cancellation_pencil" */
     color:red;
-    background-color: rgba(204,204,204,0.7);
+    background-color: rgb(204,204,204);
     text-decoration:line-through;
     display: inline-block;
-    width: 80%;
 }
-
+/* hid width: 80% */
 .tei-gap { /* any other <gap reason="illegible"> */
-    background-color: rgba(204,204,204,0.7);
-    display: block;
-    width: 80%;
+    background-color: rgb(204,204,204);
+    display: inline-block;
 }
 
 .tei-hspace {