Embed lookup reference

src/components/HomerReaderWidget.vue

@@ -1,27 +1,56 @@
 <template>
   <div class="select-passage-reader">
-    <HomerSource v-model="passageText" />
-    <Reader :passage-text="passageText" />
+    <ReferenceInput @readFromStore="onReadFromStore" @lookup="onLookup" />
+    <Reader :passage-text="text" />
   </div>
 </template>
 
 <script>
-import HomerSource from './HomerSource.vue';
+import axios from 'axios';
+
 import Reader from '../reader/Reader.vue';
+import ReferenceInput from '../reader/ReferenceInput.vue';
+
+const URN = 'urn:cts:greekLit:tlg0012.tlg001.perseus-grc2';
 
 export default {
   scaifeConfig: {
     displayName: 'Homer Reader',
     location: 'both',
   },
   components: {
-    HomerSource,
     Reader,
+    ReferenceInput,
+  },
+  methods: {
+    onReadFromStore(lookupFromStore) {
+      this.lookupFromStore = lookupFromStore;
+    },
+    onLookup(reference) {
+      this.reference = reference;
+      axios
+        .get(`https://homer-api.herokuapp.com/${URN}:${this.reference}/`)
+        .then((r) => { this.passageText = r.data; });
+    },
   },
   data() {
     return {
+      reference: '',
+      lookupFromStore: false,
       passageText: '',
     };
   },
+  computed: {
+    text() {
+      return this.lookupFromStore ? this.$store.state.passageText : this.passageText;
+    },
+  },
 };
 </script>
+
+<style lang="scss">
+.select-passage-reader {
+  width: 100%;
+}
+</style>
+

src/reader/ReferenceInput.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="reference-input">
+    <div class="input-group" :class="{ disabled: readFromStore }">
+      <input v-model="reference" :disabled="readFromStore" @keyup.enter="lookup" placeholder="2.1-3.15" />
+      <button :disabled="readFromStore" @click.prevent="lookup">Lookup</button>
+    </div>
+    <button class="global-input" @click.prevent="toggleReadFromSource" :class="{ active: readFromStore }">
+      Global Sync
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      reference: '',
+      readFromStore: false
+    };
+  },
+  watch: {
+    readFromStore() {
+      this.$emit('readFromStore', this.readFromStore);
+    }
+  },
+  methods: {
+    toggleReadFromSource() {
+      this.readFromStore = !this.readFromStore;
+    },
+    lookup() {
+      this.$emit('lookup', this.reference);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  @import "../variables.scss";
+
+  .reference-input {
+    padding: 15px 24px;
+    border-bottom: 1px solid $gray-200;
+    margin-bottom: 15px;
+    background: $gray-100;
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    .global-input {
+      margin: auto 0;
+      font-size: 12px;
+    }
+    .input-group {
+      display: flex;
+      height: 30px;
+    }
+    input {
+      padding: 5px 10px;
+      margin-right: 5px;
+    }
+    button {
+      background: $gray-200;
+      border: 1px solid $gray-400;
+      border-radius: 3px;
+      cursor: pointer;
+      margin: 1px 10px 1px 0;
+      &:hover {
+        background: $gray-300;
+      }
+      &.active {
+        background: #2f4685;
+        color: white;
+      }
+    }
+  }
+</style>