diff options
Diffstat (limited to 'resources/vue/components/courseware/blocks')
8 files changed, 52 insertions, 47 deletions
diff --git a/resources/vue/components/courseware/blocks/CoursewareBiographyCareerBlock.vue b/resources/vue/components/courseware/blocks/CoursewareBiographyCareerBlock.vue index c366618..98fab71 100644 --- a/resources/vue/components/courseware/blocks/CoursewareBiographyCareerBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareBiographyCareerBlock.vue @@ -17,8 +17,8 @@ class="cw-timeline-item" > <div class="cw-timeline-item-icon cw-timeline-item-icon-color-studip-blue"> - <studip-icon v-if="item.type === 'school'" shape="doctoral-cap" role="clickable" size="32"/> - <studip-icon v-if="item.type === 'experience'" shape="tools" role="clickable" size="32"/> + <studip-icon v-if="item.type === 'school'" shape="doctoral-cap" role="clickable" :size="32"/> + <studip-icon v-if="item.type === 'experience'" shape="tools" role="clickable" :size="32"/> </div> <div class="cw-timeline-item-content cw-timeline-item-content-color-studip-blue" diff --git a/resources/vue/components/courseware/blocks/CoursewareBlockActions.vue b/resources/vue/components/courseware/blocks/CoursewareBlockActions.vue index 89beb0a..eea76fe 100644 --- a/resources/vue/components/courseware/blocks/CoursewareBlockActions.vue +++ b/resources/vue/components/courseware/blocks/CoursewareBlockActions.vue @@ -3,6 +3,7 @@ <studip-action-menu :items="menuItems" :context="block.attributes.title" + :collapseAt="1" @editBlock="editBlock" @setVisibility="setVisibility" @showInfo="showInfo" diff --git a/resources/vue/components/courseware/blocks/CoursewareBlockEdit.vue b/resources/vue/components/courseware/blocks/CoursewareBlockEdit.vue index d1ed09f..82d1abc 100644 --- a/resources/vue/components/courseware/blocks/CoursewareBlockEdit.vue +++ b/resources/vue/components/courseware/blocks/CoursewareBlockEdit.vue @@ -2,7 +2,7 @@ <section class="cw-block-edit"> <header v-if="preview">{{ $gettext('Bearbeiten') }}</header> <div class="cw-block-features-content"> - <div @click="deactivateToolbar(); exitHandler = true;"> + <div @click="exitHandler = true;"> <slot name="edit" /> </div> <div class="cw-button-box"> @@ -31,16 +31,6 @@ export default { beforeMount() { this.originalBlock = this.block; }, - methods: { - ...mapActions({ - coursewareBlockAdder: 'coursewareBlockAdder', - coursewareShowToolbar: 'coursewareShowToolbar' - }), - deactivateToolbar() { - this.coursewareBlockAdder({}); - this.coursewareShowToolbar(false); - }, - }, beforeDestroy() { if (this.exitHandler) { this.$emit('store'); diff --git a/resources/vue/components/courseware/blocks/CoursewareCanvasBlock.vue b/resources/vue/components/courseware/blocks/CoursewareCanvasBlock.vue index 669a5b8..24a59f5 100644 --- a/resources/vue/components/courseware/blocks/CoursewareCanvasBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareCanvasBlock.vue @@ -127,7 +127,7 @@ <studip-file-chooser v-model="currentFileId" selectable="file" - :courseId="studipContext.id" + :courseId="context.id" :userId="userId" :isImage="true" :excludedCourseFolderTypes="excludedCourseFolderTypes" @@ -187,7 +187,7 @@ export default { currentUserView: 'own', currentFile: {}, - context: {}, + canvasContext: {}, paint: false, write: false, clickX: [], @@ -221,7 +221,6 @@ export default { }, computed: { ...mapGetters({ - studipContext: 'context', fileRefById: 'file-refs/byId', getUserDataById: 'courseware-user-data-fields/byId', relatedUserData: 'user-data-field/related', @@ -301,9 +300,7 @@ export default { return this.currentUploadFolderId !== ""; }, canSwitchView() { - // this feature is not something to offer in the Arbeitsplatz! - let context = this.$store.getters.context; - if (context.type !== 'courses') { + if (this.context.type !== 'courses') { return false; } if (this.currentShowUserData === 'off') { @@ -419,7 +416,7 @@ export default { } else { canvas.height = 500; } - this.context = canvas.getContext('2d'); + this.canvasContext = canvas.getContext('2d'); this.setColor('blue'); this.currentSize = this.sizes['normal']; this.currentTool = this.tools['pen']; @@ -427,7 +424,7 @@ export default { }, redraw() { let view = this; - let context = view.context; + let context = view.canvasContext; context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas context.fillStyle = '#ffffff'; context.fillRect(0, 0, context.canvas.width, context.canvas.height); // set background @@ -658,7 +655,7 @@ export default { }, async store() { let user = this.usersById({id: this.userId}); - let imageBase64 = this.context.canvas.toDataURL("image/jpeg", 1.0); + let imageBase64 = this.canvasContext.canvas.toDataURL("image/jpeg", 1.0); let image = await fetch(imageBase64); let imageBlob = await image.blob(); let file = {}; diff --git a/resources/vue/components/courseware/blocks/CoursewareDocumentBlock.vue b/resources/vue/components/courseware/blocks/CoursewareDocumentBlock.vue index 72cfeb3..55e7b01 100644 --- a/resources/vue/components/courseware/blocks/CoursewareDocumentBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareDocumentBlock.vue @@ -131,8 +131,8 @@ </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 v-for="(value, index) in scaleValues" :key="index" :value="value.scale"> + {{ value.name }} </option> </select> </div> @@ -305,7 +305,7 @@ export default { pdfAnnotationLayer: null, pdfAnnotation: false, pdfRotate: 0, - PdfViewer: null, + pdfViewer: null, pdfEventBus: null, pdfLinkService: null, pdfFindController: null, @@ -322,8 +322,8 @@ export default { pageNum: 1, pageCount: 0, scale: 1, + baseScale: 1, currentScale: 1, - scaleValues: [0.5, 1, 1.5, 2, 3, 4], file: null, srMessage: '', @@ -361,10 +361,23 @@ export default { formattedZoom() { 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 }]); + }, }, watch: { scale(newValue) { - let overflow = newValue > 1 ? 'auto' : 'hidden'; + let overflow = newValue > this.baseScale ? 'auto' : 'hidden'; let container = this.$refs.container; container.style.overflow = overflow; this.currentScale = newValue; @@ -407,7 +420,7 @@ export default { if (this.currentUrl) { let view = this; view.pdfEventBus = new EventBus(); - view.pdfLoadingTask = getDocument(this.currentUrl).promise; + view.pdfLoadingTask = getDocument({ url: this.currentUrl, verbosity: 0 }).promise; view.pdfLoadingTask.__PDFDocumentLoadingTask = true; // Link Service view.pdfLinkService = new PDFLinkService({ @@ -473,9 +486,16 @@ export default { .getPage(parseInt(view.pageNum)) .then((pdfPage) => { view.pdfPage = pdfPage; + const width = outerContainer.offsetWidth; + let pdfWidth = pdfPage.view[2]; + if (pdfPage.rotate === 90 || pdfPage.rotate === 270) { + pdfWidth = pdfPage.view[3]; + } + view.baseScale = (width / pdfWidth / 1.33).toFixed(2); + view.scale = view.baseScale; // Creating the page view with default parameters. let defaultViewport = pdfPage.getViewport({ - scale: 1.35, + scale: 1.0, }); view.pdfBasePage = new PDFViewer({ @@ -512,8 +532,6 @@ export default { 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) => { @@ -610,12 +628,12 @@ export default { this.updateSrMessage(this.$gettext('gedreht')); }, zoomIn() { - this.scale = this.scale < 4 ? (this.scale * 10 + 1) / 10 : this.scale; + 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 : this.scale; + this.scale = this.scale > 0.1 ? ((this.scale * 10 - 1) / 10).toFixed(1) : this.scale; this.renderPage(); this.updateSrMessage(this.$gettext('verkleinert')); }, diff --git a/resources/vue/components/courseware/blocks/CoursewareIframeBlock.vue b/resources/vue/components/courseware/blocks/CoursewareIframeBlock.vue index be56ab4..4ff7e45 100644 --- a/resources/vue/components/courseware/blocks/CoursewareIframeBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareIframeBlock.vue @@ -234,17 +234,16 @@ export default { this.currentUrlIsValid = this.isValidUrl(this.currentUrl); }, isValidUrl(urlString) { - const urlPattern = new RegExp( - '^(https?:\\/\\/)?' + // validate protocol - '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // validate domain name - '((\\d{1,3}\\.){3}\\d{1,3}))' + // validate OR ip (v4) address - '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // validate port and path - '(\\?[;&a-z\\d%_.~+=-]*)?' + // validate query string - '(\\#[-a-z\\d_]*)?$', - 'i' - ); // validate fragment locator + if (!urlString.startsWith('http')) { + urlString = `${location.protocol}//${urlString}`; + } - return !!urlPattern.test(urlString); + try { + const url = new URL(urlString); + return ['http:', 'https:'].includes(url.protocol); + } catch (e) { + return false; + } }, updateUrl() { diff --git a/resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue b/resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue index 6d12980..4f52d4b 100644 --- a/resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareImageMapBlock.vue @@ -113,7 +113,7 @@ > <template #open-indicator="selectAttributes"> <span v-bind="selectAttributes" - ><studip-icon shape="arr_1down" size="10" + ><studip-icon shape="arr_1down" :size="10" /></span> </template> <template #no-options> @@ -141,7 +141,7 @@ > <template #open-indicator="selectAttributes"> <span v-bind="selectAttributes" - ><studip-icon shape="arr_1down" size="10" + ><studip-icon shape="arr_1down" :size="10" /></span> </template> <template #no-options> diff --git a/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue b/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue index a410740..e52b608 100644 --- a/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue +++ b/resources/vue/components/courseware/blocks/CoursewareKeyPointBlock.vue @@ -38,7 +38,7 @@ v-model="currentColor" > <template #open-indicator="selectAttributes"> - <span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10" /></span> + <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span> </template> <template #no-options> {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} @@ -57,7 +57,7 @@ {{ $gettext('Icon') }} <studip-select :options="icons" :clearable="false" v-model="currentIcon"> <template #open-indicator="selectAttributes"> - <span v-bind="selectAttributes"><studip-icon shape="arr_1down" size="10" /></span> + <span v-bind="selectAttributes"><studip-icon shape="arr_1down" :size="10" /></span> </template> <template #no-options> {{ $gettext('Es steht keine Auswahl zur Verfügung.') }} |