Resolve "StEP00348: Responsive Navigation Stud.IP 5.x"

Closes #32

Merge request studip/studip!65

5 files changed, 29 insertions, 150 deletions

diff --git a/resources/assets/javascripts/bootstrap/responsive-navigation.js b/resources/assets/javascripts/bootstrap/responsive-navigation.js
new file mode 100644
index 0000000..aa81107
--- /dev/null
+++ b/resources/assets/javascripts/bootstrap/responsive-navigation.js
@@ -0,0 +1,10 @@
+import ResponsiveNavigation from '../../../vue/components/responsive/ResponsiveNavigation.vue';
+
+STUDIP.ready(() => {
+    STUDIP.Vue.load().then(({ createApp }) => {
+        createApp({
+            el: '#responsive-menu',
+            components: { ResponsiveNavigation }
+        });
+    });
+});
diff --git a/resources/assets/javascripts/bootstrap/responsive.js b/resources/assets/javascripts/bootstrap/responsive.js
index e7c1aed..8e216d0 100644
--- a/resources/assets/javascripts/bootstrap/responsive.js
+++ b/resources/assets/javascripts/bootstrap/responsive.js
@@ -9,6 +9,11 @@ STUDIP.domReady(() => {
     }
 
     STUDIP.Responsive.engage();
+
+    if (STUDIP.Responsive.isFullscreen()) {
+        document.querySelector('html').classList.add('fullscreen-mode');
+    }
+
 }, true);
 
 // Trigger search in responsive display
diff --git a/resources/assets/javascripts/entry-base.js b/resources/assets/javascripts/entry-base.js
index 09779dd..b577ce4 100644
--- a/resources/assets/javascripts/entry-base.js
+++ b/resources/assets/javascripts/entry-base.js
@@ -87,6 +87,7 @@ import "./bootstrap/cache-admin.js"
 import "./bootstrap/oer.js"
 import "./bootstrap/courseware.js"
 import "./bootstrap/beforeunload-event-listener.js"
+import "./bootstrap/responsive-navigation.js"
 
 import "./mvv_course_wizard.js"
 import "./mvv.js"
diff --git a/resources/assets/javascripts/lib/header_magic.js b/resources/assets/javascripts/lib/header_magic.js
index 410b754..f465e7e 100644
--- a/resources/assets/javascripts/lib/header_magic.js
+++ b/resources/assets/javascripts/lib/header_magic.js
@@ -10,27 +10,6 @@ const scroll = function(scrolltop) {
     if (is_below_the_fold !== was_below_the_fold) {
         $('body').toggleClass('fixed', is_below_the_fold);
 
-        menu = $('#navigation-level-1-items').remove();
-        if (is_below_the_fold) {
-            menu.append(
-                $('.action-menu-list li', menu)
-                    .remove()
-                    .addClass('from-action-menu')
-            );
-            menu.appendTo('#responsive-menu');
-        } else {
-            $('.action-menu-list', menu).append(
-                $('.from-action-menu', menu)
-                    .remove()
-                    .removeClass('from-action-menu')
-            );
-            menu.prependTo('#navigation-level-1');
-
-            NavigationShrinker();
-
-            $('#navigation-level-1-items-toggle').prop('checked', false);
-        }
-
         was_below_the_fold = is_below_the_fold;
     }
 };
diff --git a/resources/assets/javascripts/lib/responsive.js b/resources/assets/javascripts/lib/responsive.js
index 16e6354..a493e8d 100644
--- a/resources/assets/javascripts/lib/responsive.js
+++ b/resources/assets/javascripts/lib/responsive.js
@@ -4,127 +4,6 @@ import Sidebar from './sidebar.js';
 const Responsive = {
     media_query: window.matchMedia('(max-width: 767px)'),
 
-    // Builds a dom element from a navigation object
-    buildMenu (navigation, id, activated) {
-        var list = $('<ul>');
-
-        if (id) {
-            list.attr('id', id);
-        }
-
-        // TODO: Templating?
-        _.forEach(navigation, (nav, node) => {
-            nav.url = STUDIP.URLHelper.getURL(nav.url, {}, true);
-            let li = $('<li class="navigation-item">');
-            let title = $('<div class="nav-title">').appendTo(li);
-            let link = $(`<a href="${nav.url}">`).text(nav.title).appendTo(title);
-
-            if (nav.icon) {
-                if (!nav.icon.match(/^https?:\/\//)) {
-                    nav.icon = STUDIP.ASSETS_URL + nav.icon;
-                }
-                $(link).prepend(`<img class="icon" src="${nav.icon}">`);
-            }
-
-            if (nav.children) {
-                let active = activated.indexOf(node) !== -1;
-                $(`<input type="checkbox" id="resp/${node}">`)
-                    .prop('checked', active)
-                    .appendTo(li);
-                li.append(
-                    `<label class="nav-label" for="resp/${node}"> </label>`,
-                    Responsive.buildMenu(nav.children, false, activated)
-                );
-            }
-
-            list.append(li);
-        });
-
-        return list;
-    },
-
-    // Adds the responsive menu to the dom
-    addMenu () {
-        let wrapper = $('<div id="responsive-container">').append(
-            '<label for="responsive-toggle">',
-            '<input type="checkbox" id="responsive-toggle">',
-            Responsive.buildMenu(
-                STUDIP.Navigation.navigation,
-                'responsive-navigation',
-                STUDIP.Navigation.activated
-            ),
-            '<label for="responsive-toggle">'
-        );
-
-        $('<li>', { html: wrapper }).prependTo('#header-links > ul');
-    },
-
-    // Responsifies the layout. Builds the responsive menu from existing
-    // STUDIP.Navigation object
-    responsify () {
-        Responsive.media_query.removeListener(Responsive.responsify);
-
-        $('html').addClass('responsified');
-
-        Responsive.addMenu();
-
-        if ($('#sidebar > section').length > 0) {
-            $('<li id="sidebar-menu">')
-                .on('click', () => Sidebar.open())
-                .appendTo('#header-links > ul');
-
-            $('<label id="sidebar-shadow-toggle">')
-                .on('click', () => Sidebar.close())
-                .prependTo('#sidebar');
-
-            $('#responsive-toggle').on('change', function() {
-                $('#sidebar').removeClass('visible-sidebar');
-                $('#responsive-navigation').toggleClass('visible', this.checked);
-            });
-        } else {
-            $('#responsive-toggle').on('change', function() {
-                $('#responsive-navigation').toggleClass('visible', this.checked);
-            });
-        }
-
-        $('#responsive-navigation :checkbox').on('change', function () {
-            let li = $(this).closest('li');
-            if ($(this).is(':checked')) {
-                li.siblings().find(':checkbox:checked').prop('checked', false);
-            }
-
-            // Force redraw of submenu (at least ios safari/chrome would
-            // not show it without a forced redraw)
-            $(this).siblings('ul').hide(0, function () {
-                $(this).show();
-            });
-        }).reverse().trigger('change');
-
-        var sidebar_avatar_menu = $('<div class="sidebar-widget sidebar-avatar-menu">');
-        var avatar_menu = $('#avatar-menu');
-        var title = $('.action-menu-title', avatar_menu).text();
-        var list = $('<ul class="widget-list widget-links">');
-        $('<div class="sidebar-widget-header">').text(title).appendTo(sidebar_avatar_menu);
-
-        $('.action-menu-item', avatar_menu).each(function() {
-            var src = $('img', this).attr('src');
-            var link = $('a', this).clone();
-
-            link.find('img').remove();
-
-            $('<li>').append(link).css({
-                backgroundSize: '16px',
-                backgroundImage: `url(${src})`
-            }).appendTo(list);
-        });
-
-        $('<div class="sidebar-widget-content">')
-            .append(list)
-            .appendTo(sidebar_avatar_menu);
-
-        $('#sidebar').prepend(sidebar_avatar_menu);
-    },
-
     setResponsiveDisplay (state = true) {
         $('html').toggleClass('responsive-display', state);
 
@@ -136,16 +15,21 @@ const Responsive = {
     },
 
     engage () {
-        if (Responsive.media_query.matches) {
-            Responsive.responsify();
-            Responsive.setResponsiveDisplay();
-        } else {
-            Responsive.media_query.addListener(Responsive.responsify);
-        }
+        Responsive.setResponsiveDisplay(Responsive.isResponsive());
 
-        Responsive.media_query.addListener(() => {
-            Responsive.setResponsiveDisplay(Responsive.media_query.matches);
+        Responsive.media_query.addEventListener('change', () => {
+            Responsive.setResponsiveDisplay(Responsive.isResponsive());
         });
+    },
+
+    isResponsive() {
+        return Responsive.media_query.matches;
+    },
+
+    isFullscreen() {
+        const cache = STUDIP.Cache.getInstance('responsive.');
+
+        return cache.get('fullscreen-mode') ?? false;
     }
 };