TextPage.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <template>
  2. <div ref="main" class="main">
  3. <pre>{{ bookPos }}</pre>
  4. <pre>{{ meta }}</pre>
  5. </div>
  6. </template>
  7. <script>
  8. //-----------------------------------------------------------------------------
  9. import Vue from 'vue';
  10. import Component from 'vue-class-component';
  11. import _ from 'lodash';
  12. import bookManager from '../share/bookManager';
  13. export default @Component({
  14. watch: {
  15. bookPos: function(newValue) {
  16. this.$emit('book-pos-changed', {bookPos: newValue});
  17. this.drawPage();
  18. },
  19. },
  20. })
  21. class TextPage extends Vue {
  22. lastBook = null;
  23. meta = null;
  24. fb2 = null;
  25. bookPos = 0;
  26. created() {
  27. this.commit = this.$store.commit;
  28. this.dispatch = this.$store.dispatch;
  29. this.config = this.$store.state.config;
  30. this.reader = this.$store.state.reader;
  31. }
  32. showBook() {
  33. this.$refs.main.focus();
  34. this.book = null;
  35. this.meta = null;
  36. this.fb2 = null;
  37. this.drawPage();//пока не загрузили, очистим канвас
  38. if (this.lastBook) {
  39. (async() => {
  40. const isParsed = await bookManager.hasBookParsed(this.lastBook);
  41. if (!isParsed) {
  42. return;
  43. }
  44. this.book = await bookManager.getBook(this.lastBook);
  45. this.meta = bookManager.metaOnly(this.book);
  46. this.fb2 = this.meta.fb2;
  47. this.$root.$emit('set-app-title', _.compact([
  48. this.fb2.lastName,
  49. this.fb2.middleName,
  50. this.fb2.firstName,
  51. '-',
  52. this.fb2.bookTitle
  53. ]).join(' '));
  54. this.drawPage();
  55. })();
  56. }
  57. }
  58. drawPage() {
  59. if (!this.lastBook)
  60. return;
  61. //пустой канвас
  62. if (!this.book)
  63. return;
  64. }
  65. keyHook(event) {
  66. }
  67. }
  68. //-----------------------------------------------------------------------------
  69. </script>
  70. <style scoped>
  71. .main {
  72. flex: 1;
  73. display: flex;
  74. flex-direction: column;
  75. }
  76. </style>