aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views
diff options
context:
space:
mode:
authorZéro~Informatique2022-11-27 21:00:56 +0100
committerZéro~Informatique2022-11-27 21:00:56 +0100
commitf6ce45309e3d0c2b165aaa1d4d3ac24ba08d466f (patch)
tree8ba6e225e0142d7afe6cfa1cda9805830c359929 /viewer/src/views
parenta8736b0edb99ad433c8a7795ea1f31a8751c2f41 (diff)
downloadldgallery-f6ce45309e3d0c2b165aaa1d4d3ac24ba08d466f.tar.gz
viewer/epub: resize on drawer movement
Fixed data leaks (view.innerHTML + rendered event)
Diffstat (limited to 'viewer/src/views')
-rw-r--r--viewer/src/views/item_handlers/async/AsyncEpubViewer.vue39
1 files changed, 23 insertions, 16 deletions
diff --git a/viewer/src/views/item_handlers/async/AsyncEpubViewer.vue b/viewer/src/views/item_handlers/async/AsyncEpubViewer.vue
index 712a844..20b1bee 100644
--- a/viewer/src/views/item_handlers/async/AsyncEpubViewer.vue
+++ b/viewer/src/views/item_handlers/async/AsyncEpubViewer.vue
@@ -52,43 +52,50 @@
52</template> 52</template>
53 53
54<script setup lang="ts"> 54<script setup lang="ts">
55
56import { EPUBItem } from '@/@types/gallery'; 55import { EPUBItem } from '@/@types/gallery';
57import { useItemResource } from '@/services/ui/ldItemResourceUrl'; 56import { useItemResource } from '@/services/ui/ldItemResourceUrl';
58import ePub from 'epubjs'; 57import { useUiStore } from '@/store/uiStore';
58import ePub, { Rendition } from 'epubjs';
59import { SpineItem } from 'epubjs/types/section'; 59import { SpineItem } from 'epubjs/types/section';
60import { PropType, Ref, ref, toRef, computed, watchEffect } from 'vue'; 60import { computed, PropType, Ref, ref, toRef, watch } from 'vue';
61import { useI18n } from 'vue-i18n'; 61import { useI18n } from 'vue-i18n';
62
62const { t } = useI18n(); 63const { t } = useI18n();
64const uiStore = useUiStore();
63 65
64const props = defineProps({ 66const props = defineProps({
65 item: { type: Object as PropType<EPUBItem>, required: true }, 67 item: { type: Object as PropType<EPUBItem>, required: true },
66}); 68});
67 69
68const { itemResourceUrl } = useItemResource(toRef(props, 'item')); 70const { itemResourceUrl } = useItemResource(toRef(props, 'item'));
71
69const view = ref<HTMLDivElement>(); 72const view = ref<HTMLDivElement>();
73const rendition = ref<Rendition>();
74const currSection = ref<SpineItem>();
75const prevSection = ref<SpineItem>();
76const nextSection = ref<SpineItem>();
70 77
71const book = computed(() => ePub(itemResourceUrl.value)); 78const book = computed(() => ePub(itemResourceUrl.value));
72 79
73const rendition = computed(() => { 80watch([book, view], ([book, view]) => {
74 if (!view.value) return; 81 if (!view) return;
75 return book.value.renderTo(view.value, { 82 view.innerHTML = '';
83 rendition.value = book.renderTo(view, {
76 flow: 'scrolled-doc', 84 flow: 'scrolled-doc',
77 width: '100%', 85 width: '100%',
78 fullsize: true,
79 }); 86 });
80}); 87});
81 88
82const currSection = ref<SpineItem>(); 89watch(rendition, async(rendition, oldRendition) => {
83const prevSection = ref<SpineItem>(); 90 if (!rendition) return;
84const nextSection = ref<SpineItem>(); 91 oldRendition?.off('rendered', updateNavigation);
85 92 await rendition.display();
86// TODO: reflow on side panel open/close event, like when resizing the window 93 rendition.on('rendered', updateNavigation);
94});
87 95
88watchEffect(async() => { 96watch(() => uiStore.fullWidth, () => {
89 if (!rendition.value) return; 97 // Simulate a window resize to force EPub to resize the container
90 await rendition.value.display(); 98 setTimeout(() => window.dispatchEvent(new Event('resize')));
91 rendition.value.on('rendered', updateNavigation);
92}); 99});
93 100
94function updateNavigation(currentSection: SpineItem) { 101function updateNavigation(currentSection: SpineItem) {