Merge pull request #26 from scaife-viewer/develop

Prepare for v2020-06-11-001 release

package.json

@@ -13,7 +13,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/vue-fontawesome": "^0.1.9",
-    "@scaife-viewer/scaife-widgets": "0.13.0",
+    "@scaife-viewer/scaife-widgets": "0.13.1",
     "apollo-boost": "^0.4.7",
     "core-js": "^3.6.5",
     "graphql": "^15.0.0",

src/actions.js

@@ -6,9 +6,11 @@ import {
   UPDATE_METADATA,
   FETCH_LIBRARY,
   SET_PASSAGE,
+  SET_DISPLAY_MODE_METRICAL,
   SET_DISPLAY_MODE_INTERLINEAR,
   SET_DISPLAY_MODE_NAMED_ENTITIES,
   SET_DISPLAY_MODE_FOLIO,
+  SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS,
   SET_DISPLAY_MODE_DEFAULT,
   SELECT_NAMED_ENTITIES,
   CLEAR_NAMED_ENTITIES,
@@ -24,6 +26,12 @@ export default {
   [SET_DISPLAY_MODE_NAMED_ENTITIES]: ({ commit }) => {
     commit(SET_DISPLAY_MODE_NAMED_ENTITIES);
   },
+  [SET_DISPLAY_MODE_METRICAL]: ({ commit }) => {
+    commit(SET_DISPLAY_MODE_METRICAL);
+  },
+  [SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS]: ({ commit }) => {
+    commit(SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS);
+  },
   [SET_DISPLAY_MODE_FOLIO]: ({ commit }) => {
     commit(SET_DISPLAY_MODE_FOLIO);
   },

src/constants.js

@@ -3,9 +3,12 @@ export const FETCH_METADATA = 'fetchMetadata';
 export const UPDATE_METADATA = 'updateMetadata';
 export const FETCH_LIBRARY = 'fetchLibrary';
 export const SET_PASSAGE = 'setPassage';
+export const SET_DISPLAY_MODE_METRICAL = 'setDisplayModeMetrical';
 export const SET_DISPLAY_MODE_INTERLINEAR = 'setDisplayModeInterlinear';
 export const SET_DISPLAY_MODE_NAMED_ENTITIES = 'setDisplayModeNamedEntities';
 export const SET_DISPLAY_MODE_DEFAULT = 'setDisplayModeDefault';
 export const SET_DISPLAY_MODE_FOLIO = 'setDisplayModeFolio';
+export const SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS =
+  'setDisplayModeSentenceAlignments';
 export const SELECT_NAMED_ENTITIES = 'selectNamedEntities';
 export const CLEAR_NAMED_ENTITIES = 'clearNamedEntities';

src/mutations.js

@@ -2,9 +2,11 @@ import {
   FETCH_METADATA,
   FETCH_LIBRARY,
   SET_PASSAGE,
+  SET_DISPLAY_MODE_METRICAL,
   SET_DISPLAY_MODE_INTERLINEAR,
   SET_DISPLAY_MODE_NAMED_ENTITIES,
   SET_DISPLAY_MODE_FOLIO,
+  SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS,
   SET_DISPLAY_MODE_DEFAULT,
   SELECT_NAMED_ENTITIES,
   CLEAR_NAMED_ENTITIES,
@@ -17,6 +19,12 @@ export default {
   [CLEAR_NAMED_ENTITIES]: state => {
     state.selectedNamedEntities = [];
   },
+  [SET_DISPLAY_MODE_METRICAL]: state => {
+    state.displayMode = 'metrical';
+  },
+  [SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS]: state => {
+    state.displayMode = 'sentence-alignments';
+  },
   [SET_DISPLAY_MODE_NAMED_ENTITIES]: state => {
     state.displayMode = 'named-entities';
   },

src/reader/components/Alignment.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="alignment">
+    <div class="alignment-ref">{{ right[0][0] }}</div>
+    <div class="columns">
+      <div :class="['left', `text-${textSize}`, `text-width-${textWidth}`]">
+        <div v-for="line in left" :key="line[0]" :class="['line', line[2]]">
+          <span class="line-ref">{{ line[0] }}</span>
+          <span class="line-text">{{ line[1] }}</span>
+        </div>
+      </div>
+      <div :class="['right', `text-${textSize}`, `text-width-${textWidth}`]">
+        <div v-for="line in right" :key="line[0]" :class="['line', line[2]]">
+          {{ line[1] }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['left', 'right', 'textSize', 'textWidth'],
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import '../../styles/variables';
+  .alignment {
+    margin-bottom: 20px;
+    .columns {
+      display: flex;
+      .left,
+      .right {
+        flex: 1;
+      }
+      .left {
+        padding-right: 0.5rem;
+      }
+      .right {
+        padding-left: 0.5rem;
+        padding-right: 0.25rem;
+      }
+    }
+  }
+  .alignment-ref {
+    text-align: center;
+    font-size: 12pt;
+    color: #69c;
+    font-family: 'Noto Sans';
+    margin-bottom: 5px;
+  }
+  .left .line {
+    display: flex;
+    align-items: baseline;
+    .line-ref {
+      font-size: 10pt;
+      color: #69c;
+      font-family: 'Noto Sans';
+      min-width: 4em;
+      text-align: right;
+    }
+    .line-text {
+      margin-left: 1rem;
+    }
+  }
+  .line {
+    font-family: $font-family-serif;
+  }
+
+  .text-xs .line {
+    line-height: 1.5;
+  }
+  .text-sm .line {
+    line-height: 1.6;
+  }
+  .text-md .line {
+    line-height: 1.7;
+  }
+  .text-lg .line {
+    line-height: 1.8;
+  }
+  .text-xl .line {
+    line-height: 1.9;
+  }
+</style>

src/reader/components/Alignments.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="alignments">
+    <Alignment
+      v-for="(alignment, index) in alignments"
+      :key="index"
+      :left="alignment[0]"
+      :right="alignment[1]"
+      :textSize="textSize"
+      :textWidth="textWidth"
+    />
+  </div>
+</template>
+
+<script>
+  import Alignment from './Alignment.vue';
+
+  export default {
+    props: ['alignments', 'textSize', 'textWidth'],
+    components: { Alignment },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .text-xs {
+    font-size: 12px;
+  }
+  .text-sm {
+    font-size: 14px;
+  }
+  .text-md {
+    font-size: 16px;
+  }
+  .text-lg {
+    font-size: 20px;
+  }
+  .text-xl {
+    font-size: 24px;
+  }
+
+  // TODO: media queries for defaults?
+  .text-width-narrow {
+    max-width: 20em;
+  }
+
+  .text-width-normal {
+    max-width: 30em;
+  }
+
+  .text-width-wide {
+    max-width: 40em;
+  }
+
+  .text-width-full {
+    max-width: 100%;
+  }
+</style>

src/reader/components/ReaderLine.vue

@@ -5,7 +5,8 @@
     </section>
     <div class="line u-flex" v-else>
       <div class="line-ref">{{ line.ref }}</div>
-      <div class="line-text">
+      <div class="line-text metrical" v-if="metrical" v-html="metricalHtml" />
+      <div class="line-text" v-else>
         <ReaderToken
           v-for="token in tokens"
           :key="token.veRef"
@@ -29,6 +30,17 @@
       interlinear() {
         return this.$store.state.displayMode === 'interlinear';
       },
+      metricalHtml() {
+        return (
+          this.line.metricalAnnotations[0] &&
+          this.line.metricalAnnotations[0].htmlContent
+        );
+      },
+      metrical() {
+        return (
+          this.$store.state.displayMode === 'metrical' && this.metricalHtml
+        );
+      },
     },
   };
 </script>
@@ -54,3 +66,43 @@
     margin: 20px 0;
   }
 </style>
+
+<style lang="scss">
+  .metrical {
+    span.foot {
+      box-sizing: border-box;
+    }
+    span.syll {
+      box-sizing: border-box;
+    }
+
+    /* show foot and syllable divisions */
+
+    li div {
+      word-spacing: 0.6em;
+    }
+    span.syll {
+      padding: 1px 3px;
+    }
+    span.syll:first-child {
+      border-left: 2px solid black;
+    }
+    span.syll.caesura:first-child {
+      border-left: 3px solid blue;
+    }
+    span.syll:not(:first-child) {
+      border-left: 1px dotted black;
+    }
+    span.syll.caesura:not(:first-child) {
+      border-left: 3px dotted blue;
+    }
+
+    /* show syllable length */
+    span.syll.long {
+      background-color: #CCC;
+    }
+    span.syll:not(.long) {
+      background-color: #EEE;
+    }
+  }
+</style>

src/reader/widgets/ReaderWidget.vue

@@ -14,6 +14,12 @@
             No image annotations were found for the selected passage.
           </div>
         </template>
+        <Alignments
+          v-else-if="alignmentMode"
+          :alignments="alignments"
+          :textSize="textSize"
+          :textWidth="textWidth"
+        />
         <Reader
           v-else
           :lines="lines"
@@ -31,13 +37,15 @@
 
   import WIDGETS_NS, { URN } from '@scaife-viewer/scaife-widgets';
   import Reader from '@/reader/components/Reader.vue';
+  import Alignments from '@/reader/components/Alignments.vue';
   import ImageViewer from '@/components/ImageViewer.vue';
   import Paginator from '@/components/Paginator.vue';
   import { SET_PASSAGE, UPDATE_METADATA } from '@/constants';
   import { MODULE_NS } from '@/reader/constants';
 
   export default {
     components: {
+      Alignments,
       Paginator,
       Reader,
       ImageViewer,
@@ -68,6 +76,9 @@
       }
     },
     computed: {
+      alignmentMode() {
+        return this.$store.state.displayMode === 'sentence-alignments';
+      },
       imageMode() {
         return this.$store.state.displayMode === 'folio';
       },
@@ -98,6 +109,14 @@
                   kind
                   urn
                   ref
+                  metricalAnnotations {
+                    edges {
+                      node {
+                        metricalPattern
+                        htmlContent
+                      }
+                    }
+                  }
                   tokens {
                     edges {
                       node {
@@ -124,6 +143,13 @@
                 endCursor
               }
             }
+            textAlignmentChunks(reference: "${this.urn}") {
+              edges {
+                node {
+                  items
+                }
+              }
+            }
             imageAnnotations(reference: "${this.urn}") {
               edges {
                 node {
@@ -156,12 +182,18 @@
       textWidth() {
         return this.$store.getters[`${WIDGETS_NS}/readerTextWidth`];
       },
+      alignments() {
+        if (!this.gqlData) {
+          return [];
+        }
+        return this.gqlData.textAlignmentChunks.edges.map(e => e.node.items);
+      },
       lines() {
         if (!this.gqlData) {
           return [];
         }
         return this.gqlData.passageTextParts.edges.map(line => {
-          const { id, kind, ref } = line.node;
+          const { id, kind, ref, metricalAnnotations } = line.node;
           const tokens = line.node.tokens.edges.map(edge => {
             const {
               value,
@@ -183,7 +215,13 @@
               entities,
             };
           });
-          return { id, kind, ref, tokens };
+          return {
+            id,
+            kind,
+            ref,
+            tokens,
+            metricalAnnotations: metricalAnnotations.edges.map(e => e.node),
+          };
         });
       },
       siblings() {