Newer
Older
<template>
<div class="cw-block cw-block-document">
<courseware-default-block
:block="block"
:canEdit="canEdit"
:isTeacher="isTeacher"
:preview="false"
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<div class="cw-pdf-main-container">
<template v-if="hasFile">
<div v-if="currentTitle !== ''" class="cw-block-title">
{{ currentTitle }}
</div>
<div class="cw-pdf-toolbar">
<div class="cw-pdf-toolbar-left">
<div class="cw-pdf-toc">
<button
class="undecorated"
:class="{active: pdfTOCDisplay}"
:title="$gettext('Inhaltsverzeichnis')"
:aria-pressed="pdfTOCDisplay ? 'true' : 'false'"
@click="toggleTOCViewer"
>
<studip-icon
shape="table-of-contents"
:role="pdfTOC.length === 0 ? 'inactive' : pdfTOCDisplay ? 'info_alt' :'clickable'"
:size="18"
class="text-bottom"
/>
</button>
</div>
<div class="cw-pdf-search-toggle-btn">
<button
class="undecorated"
:class="{active: showPdfSearchBox}"
:title="$gettext('Suche')"
:aria-pressed="showPdfSearchBox ? 'true' : 'false'"
@click="togglePdfSearchBox"
>
<studip-icon
shape="search"
:role="showPdfSearchBox ? 'info_alt' : 'clickable'"
:size="18"
class="text-bottom"
/>
</button>
</div>
<div class="cw-pdf-search-box" v-show="showPdfSearchBox">
<input ref="pdfSearchInput" type="text" v-model="pdfSearch" @change="doSearchInPdf">
<div class="cw-pdf-search-navs" v-if="pdfSearchFoundNums > 1">
<button class="undecorated" @click="prevPdfSearch" :title="$gettext('Letzte')">
<studip-icon
shape="arr_1left"
:role="pdfSearchFoundSelectedIndex === 0 ? 'inactive' : 'clickable'"
:size="18"
class="text-bottom"
/>
</button>
<button class="undecorated" @click="nextPdfSearch" :title="$gettext('Nächste')">
<studip-icon
shape="arr_1right"
:role="pdfSearchFoundSelectedIndex === pdfSearchFoundNums - 1 ? 'inactive' : 'clickable'"
:size="18"
class="text-bottom"
/>
</button>
</div>
<span class="cw-pdf-search-num" v-if="pdfSearchFoundNums > 0">
{{ (pdfSearchFoundSelectedIndex + 1) }} / {{ pdfSearchFoundNums }} {{ $gettext('Treffer') }}
</span>
</div>
<div class="cw-pdf-page-nav">
<button class="undecorated" @click="prevPage" :title="$gettext('Eine Seite zurück')">
<studip-icon
shape="arr_1up"
:role="pageNum - 1 === 0 ? 'inactive' : 'clickable'"
:size="18"
class="text-bottom"
/>
</button>
<button class="undecorated" @click="nextPage" :title="$gettext('Eine Seite vor')">
<studip-icon
shape="arr_1down"
:role="pageNum === pageCount ? 'inactive' : 'clickable'"
:size="18"
class="text-bottom"
/>
</button>
<input
type="text"
ref="pageNumInput"
class="cw-pdf-page-num"
:aria-label="$gettext('Seite')"
:value="pageNum"
@change="updatePageNum"
>
<span>
{{ $gettext('von') }} {{ pageCount }}
</span>
</div>
</div>
<div class="cw-pdf-toolbar-middle">
<div class="cw-pdf-zoom-buttons">
<button class="undecorated" @click="zoomIn" :title="$gettext('Vergrößern')">
<studip-icon shape="add" :size="18" class="text-bottom" />
</button>
<button class="undecorated" @click="zoomOut" :title="$gettext('Verkleinern')">
<studip-icon shape="remove" :size="18" class="text-bottom" />
</button>
<select v-model="currentScale" :aria-label="$gettext('Zoom')" @change="updateZoom">
<option v-show="false" :value="currentScale">{{ formattedZoom }}%</option>
<option v-for="(value, index) in scaleValues" :key="index" :value="value">{{ value * 100 }}%</option>
</select>
</div>
<div class="cw-pdf-rotate">
<button class="undecorated" @click="doRotatePdf" :title="$gettext('Drehen')">
<studip-icon shape="rotate-right" :size="18" class="text-bottom" />
</button>
</div>
</div>
<div class="cw-pdf-toolbar-right">
<div class="cw-pdf-handtool">
<button
class="undecorated"
:class="{active: pdfHandTool}"
:title="$gettext('Hand-Werkzeug')"
:aria-pressed="pdfHandTool ? 'true' : 'false'"
@click="toggleHandTool"
>
<studip-icon
shape="hand"
:role="pdfHandTool ? 'info_alt' : 'clickable'"
:size="18"
class="text-bottom"
/>
</button>
</div>
<div class="cw-pdf-download">
<a v-if="downloadable === 'true'" :href="currentUrl" download :title="$gettext('Speichern')">
<studip-icon shape="download" :size="18" class="text-bottom"/>
</a>
</div>
</div>
</div>
<div class="cw-pdf-outer-container" ref="outerContainer">
<div class="cw-pdf-content">
<span class="sr-only" aria-live="polite">{{ srMessage }}</span>
<div class="cw-pdf-sidebar" v-show="pdfTOCDisplay">
<ul class="cw-pdf-toc-list">
<CoursewarePDFTableOfContent v-for="(item, index) in pdfTOC" :item="item" :key="index" @tocPageNav="tocPageNav" />
</ul>
</div>
<div
ref="container"
class="cw-pdf-viewer-container"
:class="{'hand-cursor-grab': pdfHandTool, 'grabbing': pdfGrabbing, 'has-error': pdfError}"
v-dragscroll="pdfHandTool"
@mousedown="handleMouseDown"
@mouseup="handleMouseUp"
>
<div class="pdfViewer"/>
</div>
</div>
<div v-show="pdfError" class="cw-pdf-error-page">
<courseware-companion-box
mood="sad"
:msgCompanion="$gettext('Es gab einen Fehler. Bitte versuchen Sie es erneut!')"
>
</courseware-companion-box>
</div>
<div ref="fakeContainer" class="cw-pdf-viewer-fake-container">
<div class="pdfViewer"/>
</div>
</div>
</template>
</div>
</template>
<template v-if="canEdit" #edit>
<form class="default" @submit.prevent="">
<label>
<input type="text" v-model="currentTitle" />
</label>
<label>
<courseware-file-chooser
v-model="currentFileId"
:isDocument="true"
@selectFile="updateCurrentFile"
/>
</label>
<label>
{{ $gettext('Download-Icon anzeigen') }}
<select v-model="currentDownloadable">
<option value="true">{{ $gettext('Ja') }}</option>
<option value="false">{{ $gettext('Nein') }}</option>
</select>
</label>
<label>
<select v-model="currentDocType">
<option value="pdf">PDF</option>
</select>
</label>
</form>
</template>
<template #info>
<p>{{ $gettext('Informationen zum Dokument-Block') }}</p>
</template>
</courseware-default-block>
</div>
</template>
<script>
import CoursewareCompanionBox from './CoursewareCompanionBox.vue';
import CoursewareDefaultBlock from './CoursewareDefaultBlock.vue';
import CoursewareFileChooser from './CoursewareFileChooser.vue';
import CoursewarePDFTableOfContent from './CoursewarePDFTableOfContent.vue';
import { getDocument } from 'pdfjs-dist';
import {
DefaultAnnotationLayerFactory,
DefaultTextLayerFactory,
DefaultXfaLayerFactory,
DefaultStructTreeLayerFactory,
PDFFindController,
PDFLinkService,
PDFPageView,
PDFViewer,
EventBus
} from 'pdfjs-dist/web/pdf_viewer.js';
// pdfjsWorker must be imported!
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
import { dragscroll } from 'vue-dragscroll'
import { mapActions } from 'vuex';
import 'pdfjs-dist/web/pdf_viewer.css';
export default {
name: 'courseware-document-block',
CoursewareDefaultBlock,
CoursewareFileChooser,
CoursewarePDFTableOfContent
},
directives: {
dragscroll
},
props: {
block: Object,
canEdit: Boolean,
isTeacher: Boolean,
},
data() {
return {
currentTitle: '',
currentFileId: '',
currentFile: {},
currentDownloadable: '',
currentDocType: '',
pdfError: false,
pdfBasePage: null,
pdfPage: null,
pdfTextContent: null,
pdfHandTool: false,
pdfGrabbing: false,
pdfTextLayer: null,
pdfAnnotationLayer: null,
pdfAnnotation: false,
pdfRotate: 0,
PdfViewer: null,
pdfEventBus: null,
pdfLinkService: null,
pdfFindController: null,
pdfLoadingTask: null,
pdfSearch: '',
pdfSearchMatchesMapping: [],
pdfSearchFoundNums: 0,
pdfSearchFoundSelectedIndex: 0,
pdfSearchHighlightedList: [],
showPdfSearchBox: false,
pdfTOC: [],
pdfTOCDisplay: false,
pageNum: 1,
pageCount: 0,
scale: 1,
currentScale: 1,
scaleValues: [0.5, 1, 1.5, 2, 3, 4],
file: null,
srMessage: ''
};
},
computed: {
title() {
return this.block?.attributes?.payload?.title;
},
fileDownloadable() {
return this.currentDownloadable === 'true';
},
},
fileId() {
return this.block?.attributes?.payload?.file_id;
},
docType() {
return this.block?.attributes?.payload?.doc_type;
},
currentUrl() {
if (this.currentFile?.meta) {
return this.currentFile.meta['download-url'];
}
},
hasFile() {
return this.currentFileId !== '';
},
formattedZoom () {
return Number.parseInt(this.scale * 100, 10);
},
scale(newValue) {
let overflow = newValue > 1 ? 'auto' : 'hidden';
let container = this.$refs.container;
container.style.overflow = overflow;
this.currentScale = newValue;
},
pageNum(newValue) {
this.resetPdfViewer();
showPdfSearchBox() {
this.resetPdfSearch();
}
},
mounted() {
this.loadFileRefs(this.block.id).then((response) => {
this.file = response[0];
this.currentFile = this.file;
methods: {
...mapActions({
updateBlock: 'updateBlockInContainer',
loadFileRefs: 'loadFileRefs',
companionWarning: 'companionWarning',
}),
initCurrentData() {
this.currentTitle = this.title;
this.currentDownloadable = this.downloadable;
this.currentFileId = this.fileId;
this.currentDocType = this.docType;
},
updateCurrentFile(file) {
this.currentFile = file;
this.currentFileId = file.id;
},
initPdfTask() {
if (this.currentUrl) {
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
view.pdfEventBus = new EventBus();
view.pdfLoadingTask = getDocument(this.currentUrl).promise;
view.pdfLoadingTask.__PDFDocumentLoadingTask = true;
// Link Service
view.pdfLinkService = new PDFLinkService({
eventBus: view.pdfEventBus,
});
// Find Controller
view.pdfFindController = new PDFFindController({
eventBus: view.pdfEventBus,
linkService: view.pdfLinkService
});
// Annotation Layer
view.pdfAnnotationLayer = new DefaultAnnotationLayerFactory();
// Text Layer
view.pdfTextLayer = new DefaultTextLayerFactory();
// Load Pdf Document
view.loadPdfDocument();
// Handle search results.
view.pdfEventBus.on('updatetextlayermatches', ({source, pageIndex}) => {
if (view.pdfViewer.pdfPage._pageIndex == pageIndex) {
setTimeout(() => {
view.handleSearchMatches();
}, 260);
}
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
loadPdfDocument() {
if (this.pdfLoadingTask) {
let view = this;
view.pdfLoadingTask.then((pdfDocument) => {
view.pdfDoc = pdfDocument;
view.pageCount = pdfDocument.numPages;
// get table of contents if any.
view.loadPdfTOC();
// Rendering PDF viewer
view.loadPdfViewer();
view.pdfLinkService.setDocument(view.pdfDoc, null);
view.pdfFindController.setDocument(view.pdfDoc);
});
}
},
loadPdfTOC() {
if (this.pdfDoc) {
let view = this;
view.pdfTOC = [];
// Get the tree outline
view.pdfDoc.getOutline().then((outline) => {
if (outline) {
view.pdfTOC = outline;
}
});
}
},
loadPdfViewer() {
if (this.pdfDoc) {
let view = this;
this.pdfError = false;
let container = this.$refs.container;
let outerContainer = this.$refs.outerContainer;
let fakeContainer = this.$refs.fakeContainer;
this.pdfDoc.getPage(parseInt(view.pageNum)).then((pdfPage) => {
view.pdfPage = pdfPage;
// Creating the page view with default parameters.
let defaultViewport = pdfPage.getViewport({
scale: 1.35,
});
view.pdfBasePage = new PDFViewer({
container: fakeContainer,
eventBus: view.pdfEventBus,
findController: view.pdfFindController
});
let pdfPageViewOptions = {
container: container,
id: view.pageNum,
scale: view.scale,
defaultViewport: defaultViewport,
eventBus: view.pdfEventBus,
findController: view.pdfFindController,
textHighlighterFactory: view.pdfBasePage,
xfaLayerFactory: view.pdfDoc.isPureXfa
? new DefaultXfaLayerFactory()
: null,
structTreeLayerFactory: new DefaultStructTreeLayerFactory()
};
if (view.pdfHandTool === false) {
pdfPageViewOptions.textLayerFactory = view.pdfTextLayer;
pdfPageViewOptions.annotationLayerFactory = view.pdfAnnotationLayer;
} else {
pdfPageViewOptions.textLayerMode = 0;
pdfPageViewOptions.annotationMode = 0;
}
// Force annotation to be disabled.
if (!this.pdfAnnotation && pdfPageViewOptions?.annotationLayerFactory) {
pdfPageViewOptions.annotationLayerFactory = null;
pdfPageViewOptions.annotationMode = 0;
view.pdfViewer = new PDFPageView(pdfPageViewOptions);
// Associates the actual page with the view, and drawing it
view.pdfViewer.setPdfPage(view.pdfPage);
// Set LinkService viewer
view.pdfLinkService.setViewer(view.pdfViewer);
// Set outer container height
outerContainer.style.height = container.offsetHeight + 'px';
view.renderPage();
}).catch(err => {
console.log(err);
outerContainer.style.minHeight = '350px';
view.pdfError = true;
renderPage() {
if (this.pdfViewer) {
this.updatePdfViewer();
this.pdfViewer.draw();
if (!this.pdfHandTool) {
this.pdfViewer.textLayer.findController = this.pdfFindController;
}
if (this.pdfPage) {
this.pdfPage.getTextContent().then((textContent) => {
this.pdfTextContent = textContent;
});
}
if (this.pdfSearchMatchesMapping.length) {
this.pdfSearchDisplayHandler();
}
resetPdfViewer() {
this.pdfViewer.destroy();
let container = this.$refs.container;
while (!container.lastChild.classList.contains('pdfViewer')) {
container.removeChild(container.lastChild);
}
this.loadPdfViewer();
},
updatePdfViewer(resetScale = false) {
let updateArgs = {
scale: resetScale ? 1 : this.scale,
rotation: this.pdfRotate,
};
this.pdfViewer.update(updateArgs);
},
prevPage() {
if (this.pageNum <= 1) {
return;
}
this.pageNum--;
},
nextPage() {
if (this.pageNum >= this.pdfDoc.numPages) {
return;
}
this.pageNum++;
},
goToPage(page) {
const pageNum = Number.parseInt(page, 10);
if (pageNum < 1 || pageNum > this.pdfDoc.numPages) {
return;
tocPageNav(dest) {
let view = this;
let destObj = dest.find((ref) =>
typeof ref === "object" && ref !== null &&
Number.isInteger(ref.num) && ref.num >= 0 &&
Number.isInteger(ref.gen) && ref.gen >= 0);
if (destObj) {
view.pdfDoc.getPageIndex(destObj).then((pageIndex) => {
view.goToPage(pageIndex + 1);
});
}
},
updatePageNum() {
let pageNumInput = this.$refs.pageNumInput;
let value = Number.parseInt(pageNumInput.value, 10);
if (Number.isInteger(value) && value > 0 && value <= Number.parseInt(this.pageCount, 10)) {
this.pageNum = value;
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
pageNumInput.value = this.pageNum;
}
},
doRotatePdf() {
let rotationDegs = [0, 90, 180, 270, 360];
let index = rotationDegs.indexOf(this.pdfRotate);
let nextIndex = index + 1 >= rotationDegs.length ? 0 : index + 1;
let nextDeg = rotationDegs[nextIndex];
this.pdfRotate = nextDeg;
this.renderPage();
this.updateSrMessage(this.$gettext('gedreht'));
},
zoomIn() {
this.scale = this.scale < 4 ? (this.scale * 10 + 1) / 10 : this.scale;
this.renderPage();
this.updateSrMessage(this.$gettext('vergrößert'));
},
zoomOut() {
this.scale = this.scale > 0.1 ? (this.scale * 10 - 1) / 10 : this.scale;
this.renderPage();
this.updateSrMessage(this.$gettext('verkleinert'));
},
updateZoom(e) {
const value = e.target.value;
if (this.scale === value) {
return;
}
this.scale = value;
this.renderPage();
this.updateSrMessage(this.$gettext('Zoom Stufe ausgweählt'));
},
toggleHandTool() {
this.pdfHandTool = !this.pdfHandTool;
this.resetPdfViewer();
this.showPdfSearchBox = false;
},
handleHandToolDisplay(event) {
this.pdfGrabbing = event.type === 'mousedown';
},
handleMouseDown(e) {
this.handleHandToolDisplay(e);
},
handleMouseUp(e) {
this.handleHandToolDisplay(e);
},
togglePdfSearchBox() {
this.showPdfSearchBox = this.pdfHandTool ? false : !this.showPdfSearchBox;
if (this.showPdfSearchBox) {
this.$nextTick(() => {
this.$refs.pdfSearchInput.focus();
});
}
},
handleSearchMatches() {
let view = this;
let allMatches = view.pdfFindController.pageMatches;
let totalMatches = 0;
let searchSelectIndex = 0;
let matchesPageCount = 0;
view.pdfSearchMatchesMapping = [];
for (let pageIndex = 0; pageIndex < view.pageCount; pageIndex++) {
let pageNum = pageIndex + 1;
let pageMatches = allMatches[pageIndex];
totalMatches += pageMatches.length;
if (pageMatches.length) {
matchesPageCount++;
}
for (let i in pageMatches) {
let matchIndex = parseInt(i, 10);
let mappingObj = {
selectIndex: searchSelectIndex,
matchIndex: matchIndex,
pageNum: pageNum,
}
view.pdfSearchMatchesMapping.push(mappingObj);
searchSelectIndex++;
}
}
// Find next match if there the current page has nothing.
if (
view.pdfSearchFoundSelectedIndex === 0
&& view.pdfViewer.pdfPage._pageIndex > 0
&& matchesPageCount > 0
) {
let nextMapped = view.pdfSearchMatchesMapping.filter(map => map.pageNum >= view.pdfViewer.pdfPage._pageIndex + 1);
if (nextMapped.length) {
view.pdfSearchFoundSelectedIndex = nextMapped[0].selectIndex;
}
}
view.pdfSearchFoundNums = totalMatches;
view.pdfSearchDisplayHandler();
},
doSearchInPdf() {
let findObj = {
type: '',
query: this.pdfSearch,
phraseSearch: true,
caseSensitive: false,
entireWord: true,
highlightAll: true,
findPrevious: false,
matchDiacritics: false
};
this.pdfEventBus.dispatch('find', findObj);
},
prevPdfSearch() {
if (this.pdfSearchFoundSelectedIndex === 0) {
return;
}
this.pdfSearchFoundSelectedIndex--;
this.pdfSearchDisplayHandler();
},
nextPdfSearch() {
if (this.pdfSearchFoundSelectedIndex === this.pdfSearchFoundNums - 1) {
return;
}
this.pdfSearchFoundSelectedIndex++;
this.pdfSearchDisplayHandler();
},
pdfSearchDisplayHandler() {
// Go to page based on selected index.
let pageMatches = this.pdfSearchMatchesMapping.filter(map =>
map.selectIndex === this.pdfSearchFoundSelectedIndex
);
if (pageMatches.length) {
let matchObj = pageMatches[0];
// A timeout of > 250ms is needed when page is changed!
let highlightRenderTimeout = 0;
if (matchObj.pageNum !== this.pageNum) {
this.goToPage(matchObj.pageNum);
highlightRenderTimeout = 260;
}
setTimeout(() => {
this.setPdfSearchHighlighted();
this.scrollToSearchFounds(matchObj.matchIndex);
}, highlightRenderTimeout);
}
},
scrollToSearchFounds(matchIndex) {
if (this.pdfSearchHighlightedList?.length) {
let selectedSpan = this.pdfSearchHighlightedList[matchIndex];
if (selectedSpan) {
selectedSpan.classList.add('selected');
selectedSpan.scrollIntoView({ behavior: 'smooth', block: "center" });
}
}
},
setPdfSearchHighlighted() {
if (this.pdfViewer?.textLayer?.textDivs) {
let textDivs = this.pdfViewer.textLayer.textDivs;
let highlightedSpans = [];
for (let textSpan of textDivs) {
if (textSpan?.children) {
let children = [...textSpan.children];
for (let child of children) {
if (child.nodeName == 'SPAN' && child.classList.contains('highlight')) {
child.classList.remove('selected');
highlightedSpans.push(child);
}
}
}
}
// Sort the array based on the top of the span.
highlightedSpans.sort((current, next) => {
let currentTop = parseInt(current.parentNode.style.top, 10);
let nextTop = parseInt(next.parentNode.style.top, 10);
return currentTop > nextTop;
});
this.pdfSearchHighlightedList = highlightedSpans;
}
},
resetPdfSearch() {
this.pdfSearch = '';
this.pdfSearchFoundNums = 0;
this.pdfSearchFoundSelectedIndex = 0;
this.pdfSearchHighlightedList = [];
this.pdfSearchMatchesMapping = [];
this.doSearchInPdf();
},
toggleTOCViewer() {
if (this.pdfTOC.length) {
this.pdfTOCDisplay = !this.pdfTOCDisplay;
} else {
this.pdfTOCDisplay = false;
}
},
storeBlock() {
if (this.currentFile === undefined) {
this.companionWarning({
});
return false;
} else {
let attributes = {};
attributes.payload = {};
attributes.payload.title = this.currentTitle;
attributes.payload.file_id = this.currentFile.id;
attributes.payload.downloadable = this.currentDownloadable.toString();
attributes.payload.doc_type = this.currentDocType;
this.updateBlock({
attributes: attributes,
blockId: this.block.id,
containerId: this.block.relationships.container.data.id,
});
}
},
updateSrMessage(message) {
this.srMessage = '';
this.srMessage = message;
}