Skip to content
Snippets Groups Projects
Select Git revision
  • 05a9af2b5c541def0a4997569d37d6a00c698f5a
  • master default
  • next-letter
  • v1.1.6
  • v1.1.7
  • v1.1.5
  • v1.1.4
  • v1.1.3
  • v1.1.2
  • v1.1.1
  • v1.1
  • v1.0.2
  • v1.0.1
  • v1.0
14 results

Letter.vue

Blame
  • Letter.vue 5.57 KiB
    <template>
    <v-container grid-list-md>
      <v-layout row wrap>
        <v-flex xs12>
          <h3>
            <v-btn :to="letters[0].link" flat icon>
              <v-icon>keyboard_arrow_left</v-icon>
            </v-btn>
            {{underscore(lettername)}}
            <v-btn :to="letters[1].link" flat icon>
              <v-icon>keyboard_arrow_right</v-icon>
            </v-btn>
          </h3>
        </v-flex>
      </v-layout>
    
      <v-layout row wrap v-if="letter">
        <!-- Author Data -->
        <v-flex xs6>
          <v-card flat>
            <v-card-text>
              <ul style="list-style-type:none;">
                <li v-for="(value, key) in letter.teiHeader.fileDesc.titleStmt">
                  <span class="body-2">{{ capitalize(key) }}:</span> {{ value._text }}
                </li>
              </ul>
            </v-card-text>
          </v-card>
        </v-flex>
    
        <!-- Images -->
        <v-flex xs6>
          <v-layout row wrap>
            <v-flex d-flex v-for="(image,i) in images" :key="i" >
              <v-card flat hover target="_blank" :href="imgfolder(image._attributes.url)">
                <v-card-text class="text-xs-center">
                  <v-avatar size="120px">
                    <img v-bind:src="imgfolder(image._attributes.url)" :alt="image._attributes.url">
                  </v-avatar>
                </v-card-text>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
    
        <!-- Text -->
        <v-flex xs5>
          <v-card>
            <v-card-text>
              <v-checkbox label="Show Comments" v-model="showComments"></v-checkbox>
              <ul style="list-style-type:none;" class="letter-text">
                <li v-for="(value, key) in letter.text.body.l" :class="value._attributes.no" v-if="hasText(formatText(value._text))">
                  {{value._attributes.no }}: {{ formatText(value._text) }}
                </li>
              </ul>
            </v-card-text>
          </v-card>
        </v-flex>
    
        <!-- Features -->
        <v-flex xs7>
          <v-expansion-panel>
            <v-expansion-panel-content v-for="feature in features" :key="feature.text">
              <div slot="header">{{feature.text}}</div>
              <v-card>
                <v-card-text>
                  <feature :root="feature.root" />
                </v-card-text>
              </v-card>
            </v-expansion-panel-content>
          </v-expansion-panel>
        </v-flex>
      </v-layout>
    
      <!-- Progress Bar -->
      <v-layout v-else>
        <v-flex xs12 >
          <v-progress-linear indeterminate color="primary"></v-progress-linear>
        </v-flex>
      </v-layout>
    </v-container>
    </template>
    
    <script>
    export default {
      // Single Letter Component
      name: 'Letter',
      data () {
        return {
          lettername: '',
          letter: null,
          images: [],
          showComments: true,
          features: [],
          letters: []
        }
      },
      methods: {
        hasText (text) {
          // Check if string is empty
          return text.length !== 0
        },
        formatText (text) {
          // Remove [Stuff] from text
          if (!this.showComments) {
            text = text.replace(/\[.*\]/, '')
          }
          return text
        },
        capitalize (word) {
          // Capitalize first letter of a String
          return word.charAt(0).toUpperCase() + word.slice(1)
        },
        imgfolder (img) {
          // Add static image folder to path
          return '/static/' + img
        },
        underscore (str) {
          return str.replace('_', ' ')
        },
        breadcrumbs (doc, docs) {
          // Create a list of precursor/predecessor elements for showing links to them
          let idx = docs.findIndex(function (elem) {
            return elem.name.replace(' ', '_') === doc
          })
    
          // If its the first element we push the last one, negative indexing would be nice
          if (idx === 0) {
            this.letters.push(docs[docs.length - 1])
          } else {
            this.letters.push(docs[idx - 1])
          }
          // this.letters.push(docs[idx])
          // If its the last element we push the first one, negative indexing would be nice
          if (idx === docs.length - 1) {
            this.letters.push(docs[0])
          } else {
            this.letters.push(docs[idx + 1])
          }
        },
        load (name) {
          // Clear variables for idempotence
          this.lettername = name
          this.images = []
          this.features = []
          this.letter = null
    
          this.$http.get('http://localhost:3000/api/letters/' + this.lettername).then(function (data) {
            // If there's only one element xml-js makes no array... great stuff -.-
            let doc = data.body.object
    
            if (doc.TEI.text.head.graphic instanceof Array) {
              this.images = doc.TEI.text.head.graphic
            } else {
              this.images.push(doc.TEI.text.head.graphic)
            }
    
            // So we can iterate in the templatep
            this.features.push({text: 'Material and Visuals', root: doc.TEI.teiHeader.xenoData.paratext})
            this.features.push({text: 'Graphemics', root: doc.TEI.teiHeader.xenoData.sprachliche_ebene.graphische_charaktersitika})
            this.features.push({text: 'Lexical', root: doc.TEI.teiHeader.xenoData.sprachliche_ebene.lexikalische_charaktersitika})
            this.features.push({text: 'Morphosyntactics', root: doc.TEI.teiHeader.xenoData.sprachliche_ebene.morphosyntaktische_charakterisitka})
            this.features.push({text: 'Pragmatics', root: doc.TEI.teiHeader.xenoData.sprachliche_ebene.textstrukturelle_pragmatische_charakterisitka})
            this.features.push({text: 'Discourse', root: doc.TEI.teiHeader.xenoData.sprachliche_ebene.diskurstraditionelle_ebene})
    
            // Do this last for progress bar
            this.letter = doc.TEI
    
            // Load breadcrumbs
            this.$http.get('http://localhost:3000/api/metadata/table').then(function (data) {
              this.breadcrumbs(name, data.body)
            })
          })
        }
      },
      created () {
        this.load(this.$route.params.letter)
      }
    }
    </script>