Newer
Older
<template>
<div class="cw-block cw-block-document">
<courseware-default-block
:block="block"
:canEdit="canEdit"
:isTeacher="isTeacher"
:preview="false"
<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"
: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"
: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.scale">
{{ value.name }}
</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"
: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>
</div>
<div v-show="pdfError" class="cw-pdf-error-page">
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>
</template>
<template v-if="canEdit" #edit>
<form class="default" @submit.prevent="">
<label>
<input type="text" v-model="currentTitle" />
</label>
<label>
selectable="file"
:courseId="context.id"
:userId="userId"
{{ $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 BlockComponents from './block-components.js';
import blockMixin from '@/vue/mixins/courseware/block.js';
import CoursewarePDFTableOfContent from './CoursewarePDFTableOfContent.vue';
import { getDocument } from 'pdfjs-dist';
import {
DefaultAnnotationLayerFactory,
DefaultTextLayerFactory,
DefaultXfaLayerFactory,
DefaultStructTreeLayerFactory,
PDFFindController,
PDFLinkService,
PDFPageView,
PDFViewer,
} 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 'pdfjs-dist/web/pdf_viewer.css';
export default {
name: 'courseware-document-block',
components: Object.assign(BlockComponents, { CoursewarePDFTableOfContent }),
},
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,
pdfEventBus: null,
pdfLinkService: null,
pdfFindController: null,
pdfLoadingTask: null,
pdfSearch: '',
pdfSearchMatchesMapping: [],
pdfSearchFoundNums: 0,
pdfSearchFoundSelectedIndex: 0,
pdfSearchHighlightedList: [],
showPdfSearchBox: false,
pdfTOC: [],
pdfTOCDisplay: false,
pageNum: 1,
pageCount: 0,
currentScale: 1,
file: null,
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 !== '';
return Number.parseInt(this.scale * 100, 10);
},
scaleValues() {
const defaultValues = [
{ name: '25%', scale: 0.25 },
{ name: '50%', scale: 0.5 },
{ name: '75%', scale: 0.75 },
{ name: '100%', scale: 1.0 },
{ name: '150%', scale: 1.5 },
{ name: '200%', scale: 2.0 },
{ name: '300%', scale: 3.0 },
];
return defaultValues.concat([{ name: this.$gettext('volle Breite'), scale: this.baseScale }]);
},
let container = this.$refs.container;
container.style.overflow = overflow;
this.currentScale = newValue;
},
pageNum(newValue) {
this.resetPdfViewer();
showPdfSearchBox() {
this.resetPdfSearch();
currentFileId(newId) {
if (newId) {
this.currentFile = this.fileRefById({ id: newId });
}
}
if (this.block.id) {
this.loadFileRefs(this.block.id).then((response) => {
this.file = response[0];
this.currentFile = this.file;
this.initPdfTask();
});
}
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;
},
initPdfTask() {
if (this.currentUrl) {
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,
});
// 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);
}
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
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;
const width = outerContainer.offsetWidth;
view.baseScale = (width / pdfPage.view[2] / 1.33).toFixed(2);
view.scale = view.baseScale;
// Creating the page view with default parameters.
let defaultViewport = pdfPage.getViewport({
view.pdfBasePage = new PDFViewer({
container: fakeContainer,
eventBus: view.pdfEventBus,
findController: view.pdfFindController,
});
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
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);
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;
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).toFixed(1) : this.scale;
this.renderPage();
this.updateSrMessage(this.$gettext('vergrößert'));
},
zoomOut() {
this.scale = this.scale > 0.1 ? ((this.scale * 10 - 1) / 10).toFixed(1) : this.scale;
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
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,
};
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' });
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
}
}
},
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({
info: this.$gettext('Bitte wählen Sie eine Datei aus.'),
});
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;
<style scoped lang="scss">
@import '../../../../assets/stylesheets/scss/courseware/blocks/document.scss';
</style>