re #3256 - add additional full HD option to list settings

4 files changed, 70 insertions, 29 deletions

diff --git a/resources/assets/stylesheets/scss/courseware/structural-element.scss b/resources/assets/stylesheets/scss/courseware/structural-element.scss
index b10f2d9..4188ade 100644
--- a/resources/assets/stylesheets/scss/courseware/structural-element.scss
+++ b/resources/assets/stylesheets/scss/courseware/structural-element.scss
@@ -22,6 +22,14 @@
     }
 }
 
+.cw-structural-element .cw-container-wrapper.cw-colspan-full-hd {
+    max-width: 1920px;
+
+    >.cw-container.cw-container-item.cw-container-colspan-full.cw-container-list {
+        max-width: unset;
+    }
+}
+
 .cw-structural-element {
     &.cw-structural-element-consumemode {
         position: fixed;
diff --git a/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue b/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
index 015ec19..2e45f55 100644
--- a/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
+++ b/resources/vue/components/courseware/containers/CoursewareDefaultContainer.vue
@@ -3,7 +3,7 @@
         class="cw-container"
         :class="['cw-container-colspan-' + colSpan, showEditMode && canEdit ? 'cw-container-active' : '', containerClass]"
     >
-        <div class="cw-container-content">
+        <div class="cw-container-content" :class="fullHD ? 'cw-colspan-full-hd' : ''">
             <header v-if="showEditMode" class="cw-container-header" :class="{ 'cw-container-header-open': isOpen }">
                 <a href="#" class="cw-container-header-toggle" :aria-expanded="isOpen" @click.prevent="isOpen = !isOpen">
                     <studip-icon :shape="isOpen ? 'arr_1down' : 'arr_1right'" />
@@ -103,6 +103,15 @@
                                 </div>
                             </div>
                         </div>
+                        <div v-if="changeStyle === 'full' && type === 'list'">
+                            <p id="container-width">{{ $gettext('Vollbild') }}</p>
+                            <div class="">
+                                <label>
+                                    <input type="checkbox" value="fullHD" v-model="changeWidth" name="change-container-width">
+                                    {{ $gettext('Inhalt auf die gesamte Bildschirmbreite (bis 1980px) strecken') }}
+                                </label>
+                            </div>
+                        </div>
                     </form>
                 </template>
             </studip-dialog>
@@ -170,6 +179,8 @@ export default {
 
             changeType: '',
             changeStyle: '',
+            changeWidth: '',
+            fullHD: false,
         };
     },
     computed: {
@@ -180,6 +191,8 @@ export default {
             viewMode: 'viewMode',
             currentElementisLink: 'currentElementisLink',
             containerTypes: 'containerTypes',
+            consumeMode: 'consumeMode',
+            fullHDEnabled: 'fullHDEnabled'
         }),
         showEditMode() {
             return this.canEdit && !this.currentElementisLink;
@@ -210,20 +223,17 @@ export default {
             return this.blockingUser ? this.blockingUser.attributes['formatted-name'] : '';
         },
         containerStyles() {
-            let styles = [
-                { title: this.$gettext('Volle Breite'), colspan: 'full'},
+            return [
+                { title: this.$gettext('Volle Breite'), colspan: 'full' },
                 { title: this.$gettext('Halbe Breite'), colspan: 'half' },
                 { title: this.$gettext('Halbe Breite (zentriert)'), colspan: 'half-center' },
             ];
-
-            if (this.type === 'list') {
-                styles.unshift({ title: this.$gettext('Bildschirmbreite'), colspan: 'full-hd' });
-            }
-
-            return styles;
         },
         type() {
             return this.container.attributes['container-type'];
+        },
+        cwidth() {
+            return this.container.attributes.payload['cwidth'];
         }
     },
     methods: {
@@ -237,7 +247,8 @@ export default {
             lockObject: 'lockObject',
             unlockObject: 'unlockObject',
             coursewareBlockAdder: 'coursewareBlockAdder',
-            createClipboard: 'courseware-clipboards/create'
+            createClipboard: 'courseware-clipboards/create',
+            toggleFullHD: 'toggleFullHD'
         }),
         async displayEditDialog() {
             await this.loadContainer({ id: this.container.id, options: { include: 'edit-blocker' } });
@@ -261,6 +272,7 @@ export default {
             await this.lockObject({ id: this.container.id, type: 'courseware-containers' });
             this.changeType = this.type;
             this.changeStyle = this.colSpan;
+            this.changeWidth = this.cwidth;
             this.showChangeDialog = true;
         },
         async storeChange() {
@@ -282,6 +294,7 @@ export default {
             let container = this.container;
             container.attributes['container-type'] = this.changeType;
             container.attributes.payload.colspan = this.changeStyle;
+            container.attributes.payload.cwidth = this.changeWidth;
             await this.updateContainer({
                 container: container,
                 structuralElementId: this.container.relationships['structural-element'].data.id,
@@ -395,32 +408,29 @@ export default {
             this.companionSuccess({ info: this.$gettext('Abschnitt wurde in Merkliste abgelegt.') });
         },
 
-        enableFullHDListMode() {
-            document.querySelector('#content-wrapper').classList.add('cw-colspan-full-hd');
-            document.querySelector('.cw-container-wrapper').classList.add('cw-colspan-full-hd');
-        },
-
-        disableFullHDListMode() {
-            document.querySelector('#content-wrapper').classList.remove('cw-colspan-full-hd');
-            document.querySelector('.cw-container-wrapper').classList.remove('cw-colspan-full-hd');
-        }
-
     },
 
     watch: {
         showEditDialog(state) {
             this.$emit('showEdit', state);
+        },
+        consumeMode(newState) {
+            if (newState && this.cwidth) {
+                if (!this.fullHDEnabled) {
+                    this.toggleFullHD();
+                }
+                this.fullHD = true;
+                document.querySelector('#content-wrapper').classList.add('cw-colspan-full-hd');
+            }
+            if (!newState) {
+                if (this.fullHDEnabled) {
+                    this.toggleFullHD();
+                }
+                this.fullHD = false;
+                document.querySelector('#content-wrapper').classList.remove('cw-colspan-full-hd');
+            }
         }
     },
 
-    mounted() {
-        this.globalOn('consuming-mode-enabled', () => {
-            this.enableFullHDListMode();
-        });
-        this.globalOn('consuming-mode-disabled', () => {
-            this.disableFullHDListMode();
-        });
-    }
-
 };
 </script>
diff --git a/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue b/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
index fc27d5b..2fb70d9 100644
--- a/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
+++ b/resources/vue/components/courseware/structural-element/CoursewareStructuralElement.vue
@@ -148,6 +148,7 @@
                                 class="cw-container-wrapper"
                                 :class="{
                                     'cw-container-wrapper-consume': consumeMode,
+                                    'cw-colspan-full-hd': fullHD,
                                 }"
                             >
                                 <component
@@ -167,6 +168,7 @@
                                 class="cw-container-wrapper"
                                 :class="{
                                     'cw-container-wrapper-consume': consumeMode,
+                                    'cw-colspan-full-hd': fullHD,
                                 }"
                             >
                                 <div v-if="canEdit" class="cw-companion-box-wrapper">
@@ -785,6 +787,7 @@ export default {
             showRatingPopup: false,
             ratingPopupFeedbackElement: null,
             storing: false,
+            fullHD: false
         };
     },
 
@@ -852,6 +855,8 @@ export default {
 
             currentUser: 'currentUser',
             processing: 'processing',
+
+            fullHDEnabled: 'fullHDEnabled'
         }),
 
         currentId() {
@@ -2008,6 +2013,13 @@ export default {
         consumeMode(newState) {
             this.consumModeTrap = newState;
         },
+        fullHDEnabled(newState) {
+            if (newState) {
+                this.fullHD = true;
+            } else {
+                this.fullHD = false;
+            }
+        },
     },
 
     // this line provides all the components to courseware plugins
diff --git a/resources/vue/store/courseware/courseware.module.js b/resources/vue/store/courseware/courseware.module.js
index db55cdd..bd657c5 100644
--- a/resources/vue/store/courseware/courseware.module.js
+++ b/resources/vue/store/courseware/courseware.module.js
@@ -68,6 +68,8 @@ const getDefaultState = () => {
         hideEditLayout: false,
         feedbackSettings: null,
         processing: false,
+
+        fullHDEnabled: false
     };
 };
 
@@ -320,6 +322,9 @@ const getters = {
     canEditFeedbackElement(state, getters) {
         return getters.feedbackSettings?.adminPerm ?? false;
     },
+    fullHDEnabled(state) {
+        return state.fullHDEnabled;
+    }
 };
 
 export const state = { ...initialState };
@@ -1499,6 +1504,9 @@ export const actions = {
     setFeedbackSettings(context, feedbackSettings) {
         context.commit('setFeedbackSettings', feedbackSettings);
     },
+    toggleFullHD({ commit, rootGetters }) {
+        commit('setFullHD', !rootGetters['fullHDEnabled']);
+    }
 };
 
 /* eslint no-param-reassign: ["error", { "props": false }] */
@@ -1710,6 +1718,9 @@ export const mutations = {
     },
     setProcessing(state, processing) {
         state.processing = processing;
+    },
+    setFullHD(state, enabled) {
+        state.fullHDEnabled = enabled;
     }
 };