Converted Mobile Sidebar to new JS and removed old reference

themes/grav/app/main.js

@@ -12,6 +12,9 @@ import 'bootstrap/js/transition';
 import 'bootstrap/js/dropdown';
 import 'bootstrap/js/collapse';
 
+// Mobile
+import MobileSidebar, { Instance as mobilesidebar } from './utils/mobile-sidebar';
+
 // starts the keep alive, auto runs every X seconds
 KeepAlive.start();
 
@@ -27,5 +30,9 @@ export default {
     Updates: {
         Updates,
         Instance: updates
+    },
+    MobileSidebar: {
+        MobileSidebar,
+        Instance: mobilesidebar
     }
 };

themes/grav/app/utils/mobile-sidebar.js

@@ -0,0 +1,81 @@
+import $ from 'jquery';
+
+const BREAKPOINT = 48 - 0.062;
+const EVENTS = 'touchstart._grav click._grav';
+const TARGETS = '#titlebar h1 > .fa, #overlay';
+const QUERY = `(max-width: ${BREAKPOINT}em)`;
+
+let map = new Map();
+
+export default class MobileSidebar {
+    constructor() {
+        this.isOpen = false;
+        this.matchMedia = global.matchMedia(QUERY);
+        this.enable();
+    }
+
+    enable() {
+        this.matchMedia.addListener(this._getBound('checkMatch'));
+        this.checkMatch(this.matchMedia);
+    }
+
+    disable() {
+        this.close();
+        this.matchMedia.removeListener(this._getBound('checkMatch'));
+    }
+
+    attach() {
+        $('body').on(EVENTS, TARGETS, this._getBound('toggle'));
+    }
+
+    detach() {
+        $('body').off(EVENTS, TARGETS, this._getBound('toggle'));
+    }
+
+    open(event) {
+        event && event.preventDefault();
+
+        $('#overlay').css('display', 'block');
+        $('#admin-sidebar').toggle({
+            easing: 'swing',
+            duration: 200,
+            complete: () => this.isOpen = true
+        });
+    }
+
+    close(event) {
+        event && event.preventDefault();
+
+        $('#overlay').css('display', 'none');
+        $('#admin-sidebar').toggle({
+            easing: 'swing',
+            duration: 200,
+            complete: () => this.isOpen = false
+        });
+    }
+
+    toggle(event) {
+        event && event.preventDefault();
+        return this[this.isOpen ? 'close' : 'open'](event);
+    }
+
+    checkMatch(data) {
+        let sidebar = $('#admin-sidebar');
+        let overlay = $('#overlay');
+        this.isOpen = false;
+
+        overlay.css('display', 'none');
+        sidebar.css('display', data.matches ? 'none' : 'inherit');
+        this[data.matches ? 'attach' : 'detach']();
+    }
+
+    _getBound(fn) {
+        if (map.has(fn)) {
+            return map.get(fn);
+        }
+
+        return map.set(fn, this[fn].bind(this)).get(fn);
+    }
+}
+
+export let Instance = new MobileSidebar();

themes/grav/js/mobile.js

@@ -1,82 +0,0 @@
-$(document).ready(function(){
-    var large_desktop_container =		75.000;
-    var desktop_container=				60.000;
-    var tablet_container=				48.000;
-    var large_mobile_container=		   30.000;
-
-    var mobile_only= tablet_container - 0.062;
-    var no_mobile= tablet_container;
-    var small_mobile_range= large_mobile_container;
-
-    var media_mobile = window.matchMedia('(max-width:' + mobile_only + 'em)');
-
-    var titlebar = document.getElementById("titlebar");
-    var sidebar = document.getElementById("admin-sidebar");
-    var overlay = document.getElementById("overlay");
-
-    var mobile = {
-        setup: function() {
-            //add event listeners
-            titlebar.addEventListener('click',mobile.titlebar_click);
-            sidebar.addEventListener('click',mobile.sidebar_click);
-            overlay.addEventListener('click',mobile.overlay_click);
-        },
-        teardown: function() {
-            //remove event listeners
-            titlebar.removeEventListener('click',mobile.titlebar_click);
-            sidebar.removeEventListener('click',mobile.sidebar_click);
-            overlay.removeEventListener('click',mobile.overlay_click);
-        },
-        titlebar_click: function(event){
-            //titlebar on click - open sidebar (make sure not a button bar child)
-            if(!$(event.target).parents('.button-bar').length>0){
-                $(sidebar).toggle('slide');
-                overlay.style.display = "inherit";
-            }
-        },
-        sidebar_click: function(){
-            //sidebar on click - close sidebar
-            if(event.target == sidebar || event.target == selected[0]) {
-                $(sidebar).toggle('slide');
-                overlay.style.display = "none";
-            }
-        },
-        overlay_click: function(){
-            //overlay on click - close sidebar
-            $(sidebar).toggle('slide');
-            overlay.style.display = "none";
-        }
-    };
-
-    var other = {
-        setup: function() {
-            if(sidebar && sidebar.style.display == 'none') {
-                sidebar.style.display = 'block';
-            }
-        },
-        teardown: function() {
-            //teardown actions here please
-            //console.log("Other teardown");
-        },
-        onClick: function(){
-            //onclick event stuff here;
-            //console.log("Other onClick");
-        }
-    };
-
-    media_mobile.addListener(function(data) {
-        if(data.matches) {
-            other.teardown();
-            mobile.setup();
-        } else {
-            mobile.teardown();
-            other.setup();
-        }
-    });
-
-    if (media_mobile.matches) {
-        mobile.setup();
-    } else {
-        other.setup();
-    }
-});

themes/grav/templates/partials/base.html.twig

@@ -42,8 +42,6 @@
         {#
         {% do assets.addJs(theme_url~'/js/ajax.js') %}
 
-        {% do assets.addJs(theme_url~'/js/mobile.js') %}
-
         {#{% if browser.getBrowser == 'msie' or browser.getBrowser == 'edge' %}
             {% do assets.addJs(theme_url~'/js/form-attr.polyfill.js') %}
         {% endif %}#}