frontend: variable reading direction

frontend/src/views/Reader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="reader" v-shortkey="{next: ['arrowleft'], prev: ['arrowright']}" @shortkey="navigation" :style="{ 'grid-template-columns': showSidebar ? 'auto 250px' : 'auto' }">
+  <div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation" :style="{ 'grid-template-columns': showSidebar ? 'auto 250px' : 'auto' }">
     <div>
       <img :style="{ width: pageWidth + '%' }" :src="info.pages[page]" @load="setScroll">
       <!-- prefetching -->
@@ -14,6 +14,7 @@
         <button v-on:click="changePageWidth(5)">+</button>
         <button v-on:click="changePageWidth(-5)">-</button>
       </p>
+      <button v-on:click="changeDirection">{{ direction.toUpperCase() }}</button>
       <button class="hide" v-on:click="showSidebar = false">Hide</button>
     </div>
     <div class="sidebar-enabler" :style="{ display: showSidebar ? 'none' : '' }" v-on:click="showSidebar = true"></div>
@@ -32,7 +33,8 @@ export default {
       },
       scrollPositions: [],
       pageWidth: 60,
-      showSidebar: true
+      showSidebar: true,
+      direction: 'rtl'
     }
   },
   computed: {
@@ -68,13 +70,12 @@ export default {
     },
 
     navigation (event) {
-      switch (event.srcKey) {
-        case 'next':
-          this.setPage(this.page + 1)
-          break
-        case 'prev':
-          this.setPage(this.page - 1)
-          break
+      if ((event.srcKey === 'right' && this.direction === 'ltr') || (event.srcKey === 'left' && this.direction === 'rtl')) {
+        this.setPage(this.page + 1)
+      } else if ((event.srcKey === 'left' && this.direction === 'ltr') || (event.srcKey === 'right' && this.direction === 'rtl')) {
+        this.setPage(this.page - 1)
+      } else {
+        throw new Error('cannot nagivate: invalid parameters')
       }
     },
 
@@ -82,6 +83,16 @@ export default {
       if (this.pageWidth + change > 0 && this.pageWidth + change <= 100) {
         this.pageWidth += change
       }
+    },
+
+    changeDirection () {
+      if (this.direction === 'rtl') {
+        this.direction = 'ltr'
+      } else if (this.direction === 'ltr') {
+        this.direction = 'rtl'
+      } else {
+        throw new Error('cannot change reading direction: invalid direction currently set')
+      }
     }
   }
 }