extract courseware chunk, fixes #2627

Closes #2627

Merge request studip/studip!1778

8 files changed, 44 insertions, 30 deletions

diff --git a/resources/assets/javascripts/bootstrap/courseware.js b/resources/assets/javascripts/bootstrap/courseware.js
index d24bd4d..d50331f 100644
--- a/resources/assets/javascripts/bootstrap/courseware.js
+++ b/resources/assets/javascripts/bootstrap/courseware.js
@@ -1,6 +1,6 @@
 STUDIP.domReady(() => {
     if (document.getElementById('courseware-shelf-app')) {
-        STUDIP.Vue.load().then(({ createApp }) => {
+        STUDIP.loadChunk('courseware').then(({ createApp }) => {
             import(
                 /* webpackChunkName: "courseware-shelf-app" */
                 '@/vue/courseware-shelf-app.js'
@@ -11,7 +11,7 @@ STUDIP.domReady(() => {
     }
 
     if (document.getElementById('courseware-index-app')) {
-        STUDIP.Vue.load().then(({ createApp }) => {
+        STUDIP.loadChunk('courseware').then(({ createApp }) => {
             import(
                 /* webpackChunkName: "courseware-index-app" */
                 '@/vue/courseware-index-app.js'
@@ -22,7 +22,7 @@ STUDIP.domReady(() => {
     }
 
     if (document.getElementById('courseware-activities-app')) {
-        STUDIP.Vue.load().then(({ createApp }) => {
+        STUDIP.loadChunk('courseware').then(({ createApp }) => {
             import(
                 /* webpackChunkName: "courseware-activities-app" */
                 '@/vue/courseware-activities-app.js'
@@ -33,7 +33,7 @@ STUDIP.domReady(() => {
     }
 
     if (document.getElementById('courseware-tasks-app')) {
-        STUDIP.Vue.load().then(({ createApp }) => {
+        STUDIP.loadChunk('courseware').then(({ createApp }) => {
             import(
                 /* webpackChunkName: "courseware-tasks-app" */
                 '@/vue/courseware-tasks-app.js'
@@ -44,7 +44,7 @@ STUDIP.domReady(() => {
     }
 
     if (document.getElementById('courseware-content-bookmark-app')) {
-        STUDIP.Vue.load().then(({ createApp }) => {
+        STUDIP.loadChunk('courseware').then(({ createApp }) => {
             import(
                 /* webpackChunkName: "courseware-content-bookmark-app" */
                 '@/vue/courseware-content-bookmark-app.js'
@@ -55,7 +55,7 @@ STUDIP.domReady(() => {
     }
 
     if (document.getElementById('courseware-admin-app')) {
-        STUDIP.Vue.load().then(({ createApp }) => {
+        STUDIP.loadChunk('courseware').then(({ createApp }) => {
             import(
                 /* webpackChunkName: "courseware-content-bookmark-app" */
                 '@/vue/courseware-admin-app.js'
@@ -66,7 +66,7 @@ STUDIP.domReady(() => {
     }
 
     if (document.getElementById('courseware-public-app')) {
-        STUDIP.Vue.load().then(({ createApp }) => {
+        STUDIP.loadChunk('courseware').then(({ createApp }) => {
             import(
                 /* webpackChunkName: "courseware-public-app" */
                 '@/vue/courseware-public-app.js'
@@ -77,7 +77,7 @@ STUDIP.domReady(() => {
     }
 
     if (document.getElementById('courseware-content-releases-app')) {
-        STUDIP.Vue.load().then(({ createApp }) => {
+        STUDIP.loadChunk('courseware').then(({ createApp }) => {
             import(
                 /* webpackChunkName: "courseware-content-releases-app" */
                 '@/vue/courseware-content-releases-app.js'
diff --git a/resources/assets/javascripts/chunk-loader.js b/resources/assets/javascripts/chunk-loader.js
index d2da2a7..dcd95cc 100644
--- a/resources/assets/javascripts/chunk-loader.js
+++ b/resources/assets/javascripts/chunk-loader.js
@@ -9,10 +9,10 @@ export const loadScript = function (script_name) {
 };
 
 export const loadChunk = (function () {
-    var mathjax_promise = null;
+    let mathjax_promise = null;
 
     return function (chunk) {
-        var promise = null;
+        let promise = null;
         switch (chunk) {
 
             case 'code-highlight':
@@ -24,6 +24,16 @@ export const loadChunk = (function () {
                 });
                 break;
 
+            case 'courseware':
+                promise = Promise.all([
+                    STUDIP.loadChunk('vue'),
+                    import(
+                        /* webpackChunkName: "courseware" */
+                        './chunks/courseware'
+                    ),
+                ]).then(([Vue]) => Vue);
+                break;
+
             case 'chartist':
                 promise = import(
                     /* webpackChunkName: "chartist" */
diff --git a/resources/assets/javascripts/chunks/courseware.js b/resources/assets/javascripts/chunks/courseware.js
new file mode 100644
index 0000000..5e55556
--- /dev/null
+++ b/resources/assets/javascripts/chunks/courseware.js
@@ -0,0 +1 @@
+import "../../stylesheets/scss/courseware.scss";
diff --git a/resources/assets/stylesheets/mixins.scss b/resources/assets/stylesheets/mixins.scss
index a9dd78d..a7bb714 100644
--- a/resources/assets/stylesheets/mixins.scss
+++ b/resources/assets/stylesheets/mixins.scss
@@ -1,6 +1,8 @@
 $image-path: "../images" !default;
 $icon-path: "#{$image-path}/icons" !default;
 
+@import "scss/variables";
+
 @import "mixins/misc";
 @import "mixins/colors";
 @import "mixins/studip";
diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 141bce9..b854bef 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -1,7 +1,7 @@
-@import "courseware_gradients.scss";
-
-
 /* definitions */
+@use '../mixins.scss' as *;
+@import './drag-handle.scss';
+@import "courseware_gradients.scss";
 
 $companion-types: (
     default: basic,
diff --git a/resources/assets/stylesheets/scss/layouts.scss b/resources/assets/stylesheets/scss/layouts.scss
index 72ff2e7..6d0454a 100644
--- a/resources/assets/stylesheets/scss/layouts.scss
+++ b/resources/assets/stylesheets/scss/layouts.scss
@@ -1,21 +1,5 @@
 // TODO: SCSSify
 
-$page-margin: 15px;
-
-$sidebar-padding: 12px;
-$sidebar-width: 270px;
-
-$content-width: 400px;
-$content-margin: 12px;
-$max-content-width: 4 * $sidebar-width + $page-margin;
-
-$footer-height: 32px;
-
-$site-width: ($page-margin * 2 + $sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
-$page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
-
-$grid-gap: 0;
-
 html {
     height: 100vh;
     overflow-y: auto;
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index f82da12..c07fbd0 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -1,5 +1,6 @@
 @import '../mixins/colors.scss';
 
+// Typography
 $text-color:              #000;
 
 $font-family-base:        "Lato", sans-serif;
@@ -42,6 +43,23 @@ $drag_and_drop_border: 1px solid $base-color;
 
 $transition-duration: .3s;
 
+// Layout
+$page-margin: 15px;
+
+$sidebar-padding: 12px;
+$sidebar-width: 270px;
+
+$content-width: 400px;
+$content-margin: 12px;
+$max-content-width: 4 * $sidebar-width + $page-margin;
+
+$footer-height: 32px;
+
+$site-width: ($page-margin * 2 + $sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
+$page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
+
+$grid-gap: 0;
+
 :root {
     // The special handling for -- as #{"--"} seems to be neccessary to make
     // scss evaluate the color variables
diff --git a/resources/assets/stylesheets/studip.scss b/resources/assets/stylesheets/studip.scss
index 1ec3573..2d5b7b1 100644
--- a/resources/assets/stylesheets/studip.scss
+++ b/resources/assets/stylesheets/studip.scss
@@ -32,7 +32,6 @@
 @import "scss/comments";
 @import "scss/copyable-links";
 @import "scss/cronjobs";
-@import "scss/courseware";
 @import "scss/coursewizard";
 @import "scss/css_tree";
 @import "scss/dates";