Merge pull request #48 from scaife-viewer/develop

Prepare next production release

netlify.toml

@@ -1,2 +1,4 @@
 [context."master".environment]
   VUE_APP_ATLAS_GRAPHQL_ENDPOINT = "https://explorehomer-atlas.scaife-viewer.org/graphql/"
+[context."feature/passage-metadata-improvements".environment]
+  VUE_APP_ATLAS_GRAPHQL_ENDPOINT = "https://explorehomer-feature-pa-bpryib.herokuapp.com/graphql/"

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.1",
+    "@scaife-viewer/scaife-widgets": "0.14.0",
     "apollo-boost": "^0.4.7",
     "core-js": "^3.6.5",
     "graphql": "^15.0.0",

src/App.vue

@@ -24,6 +24,9 @@
     margin: 0;
     padding: 0;
   }
+  :root {
+    --scaife-brand-color: #{$explorehomer-brand};
+  }
   #app {
     font-family: $font-family-sans;
     -webkit-font-smoothing: antialiased;
@@ -36,7 +39,21 @@
   div.main-layout > .widget {
     border-top: none;
   }
+  div.main-layout > .widget > .main-widget-heading {
+    // heading is currently unused, but the slot is defined
+    // in scaife-skeleton
+    display: none;
+  }
   a {
     color: $explorehomer-brand;
   }
+
+  .new-alexandria-widget {
+    font-family: $font-family-serif;
+    font-size: 14px;
+    line-height: 18px;
+    .new-alexandria-container {
+      padding-right: 1rem;
+    }
+  }
 </style>

src/components/ImageViewer.vue

@@ -3,13 +3,18 @@
     <div id="image-toolbar" class="toolbar">
       <span v-show="displayViewer">
         <small>
-          <a id="zoom-in" class="link" title="Zoom in">Zoom In</a>
-          <span>&vert;&nbsp;</span>
-          <a id="zoom-out" class="link" title="Zoom out">Zoom Out</a>
-          <span>&vert;&nbsp;</span>
-          <a id="home" class="link" title="Go home">Home</a>
-          <span>&vert;&nbsp;</span>
-          <a id="full-page" class="link" title="Toggle full page">Full Page</a>
+          <a id="home" class="link" title="Go home">
+            <icon name="home" />
+          </a>
+          <a id="zoom-in" class="link" title="Zoom in">
+            <icon name="search-plus" />
+          </a>
+          <a id="zoom-out" class="link" title="Zoom out">
+            <icon name="search-minus" />
+          </a>
+          <a id="full-page" class="link" title="Toggle full page">
+            <icon name="window-maximize" />
+          </a>
         </small>
       </span>
       <div v-show="displayViewer" id="image-viewer" class="viewer"></div>
@@ -110,6 +115,18 @@
       height: calc(100vh - 100px);
     }
 
+    .link {
+      font-size: 18px;
+      cursor: pointer;
+      margin: 0 0.5rem;
+      padding: 0.25rem;
+      border-radius: 3px;
+    }
+    .link:hover {
+      color: $white;
+      background: $explorehomer-brand;
+    }
+
     .error {
       margin: 10px 0px;
       padding:12px;

src/components/ImageViewerToolbar.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="image-viewer-toolbar">
+    <a href :class="{ active: showText }" @click.prevent="onShowText">
+      <icon name="align-justify" />
+    </a>
+    <a href :class="{ active: showImage }" @click.prevent="onShowImage" >
+      <icon name="book-open" />
+    </a>
+    <a href :class="{ active: showBoth }" @click.prevent="onShowBoth" >
+      <icon name="align-justify" /> |
+      <icon name="book-open" />
+    </a>
+  </div>
+</template>
+
+<script>
+  import {
+    IMAGE_VIEWER_STATE_TEXT,
+    IMAGE_VIEWER_STATE_IMAGE,
+    IMAGE_VIEWER_STATE_BOTH,
+  } from '@/constants';
+
+  export default {
+    props: ['show'],
+    computed: {
+      showText() {
+        return this.show === IMAGE_VIEWER_STATE_TEXT;
+      },
+      showImage() {
+        return this.show === IMAGE_VIEWER_STATE_IMAGE;
+      },
+      showBoth() {
+        return this.show === IMAGE_VIEWER_STATE_BOTH;
+      },
+    },
+    methods: {
+      onShowText() {
+        this.$emit('show', IMAGE_VIEWER_STATE_TEXT);
+      },
+      onShowImage() {
+        this.$emit('show', IMAGE_VIEWER_STATE_IMAGE);
+      },
+      onShowBoth() {
+        this.$emit('show', IMAGE_VIEWER_STATE_BOTH);
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .image-viewer-toolbar {
+    display: flex;
+    padding-bottom: 0.75rem;
+    a {
+      margin: 0 0.5rem;
+      padding: 0.25rem;
+      border-radius: 3px;
+      border: 1px solid transparent;
+    }
+    a:hover {
+      border-color: $explorehomer-brand;
+    }
+    a.active {
+      font-weight: 700;
+      background: $explorehomer-brand;
+      color: $white;
+      border-color: transparent;
+    }
+  }
+</style>

src/constants.js

@@ -15,3 +15,7 @@ export const CLEAR_NAMED_ENTITIES = 'clearNamedEntities';
 export const PLAY_AUDIO = 'playAudio';
 export const STOP_AUDIO = 'stopAudio';
 export const SELECT_LINE = 'selectLine';
+
+export const IMAGE_VIEWER_STATE_BOTH = 'both';
+export const IMAGE_VIEWER_STATE_TEXT = 'text';
+export const IMAGE_VIEWER_STATE_IMAGE = 'image';

src/main.js

@@ -6,6 +6,12 @@ import {
   faVolumeUp,
   faUser,
   faMapMarkerAlt,
+  faAlignJustify,
+  faBookOpen,
+  faSearchMinus,
+  faSearchPlus,
+  faHome,
+  faWindowMaximize,
 } from '@fortawesome/free-solid-svg-icons';
 
 import SkeletonPlugin from 'scaife-skeleton';
@@ -23,6 +29,12 @@ const iconMap = [
   faVolumeUp,
   faUser,
   faMapMarkerAlt,
+  faAlignJustify,
+  faBookOpen,
+  faSearchMinus,
+  faSearchPlus,
+  faHome,
+  faWindowMaximize,
 ].reduce((map, obj) => {
   return {
     ...map,

src/reader/components/ReaderView.vue

@@ -10,8 +10,8 @@
 <script>
   import {
     MetadataWidget,
-    NewAlexandriaWidget,
     PassageAncestorsWidget,
+    PassageSiblingsWidget,
     PassageChildrenWidget,
     PassageReferenceWidget,
     TextSizeWidget,
@@ -26,12 +26,16 @@
   import ScholiaWidget from '@/widgets/ScholiaWidget.vue';
   import AudioWidget from '@/widgets/AudioWidget.vue';
   import WordListWidget from '@/widgets/WordListWidget.vue';
+  import NewAlexandriaWidget from '@/widgets/NewAlexandriaWidget.vue';
   import { FETCH_METADATA, FETCH_LIBRARY } from '@/constants';
 
   export default {
     name: 'ReaderView',
     beforeCreate() {
-      this.$store.dispatch(FETCH_METADATA);
+      if (!this.$route.query.urn) {
+        // load the first version returned from ATLAS
+        this.$store.dispatch(FETCH_METADATA);
+      }
       this.$store.dispatch(FETCH_LIBRARY);
     },
     computed: {
@@ -43,6 +47,7 @@
           LibraryWidget,
           PassageReferenceWidget,
           PassageAncestorsWidget,
+          PassageSiblingsWidget,
           PassageChildrenWidget,
           // TOCWidget,
         ];