From f26adb6ac182439866ef1349c968079ffb0ae340 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Thu, 28 Oct 2021 13:50:16 +0200
Subject: [PATCH 01/15] remove jquery from components

---
 src/SideMenu.vue               | 4 +++-
 src/SideMenuBig.vue            | 4 +++-
 src/SideMenuWithCategories.vue | 4 +++-
 templates/js/script.php        | 4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/SideMenu.vue b/src/SideMenu.vue
index 68fcccb..908f84c 100644
--- a/src/SideMenu.vue
+++ b/src/SideMenu.vue
@@ -128,7 +128,9 @@ export default {
 
             (function(apps) {
                 window.setTimeout(function() {
-                    jQuery('body').trigger('side-menu.apps', [apps])
+                    document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
+                        detail: {apps: apps},
+                    }));
                 }, 1000)
             })(this.apps)
         },
diff --git a/src/SideMenuBig.vue b/src/SideMenuBig.vue
index 9f6d8f2..31b9992 100644
--- a/src/SideMenuBig.vue
+++ b/src/SideMenuBig.vue
@@ -97,7 +97,9 @@ export default {
                         }
                     }
 
-                    jQuery('body').trigger('side-menu.apps', [apps])
+                    document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
+                        detail: {apps: apps},
+                    }));
                 });
         },
 
diff --git a/src/SideMenuWithCategories.vue b/src/SideMenuWithCategories.vue
index 6b63689..0ba9c45 100644
--- a/src/SideMenuWithCategories.vue
+++ b/src/SideMenuWithCategories.vue
@@ -95,7 +95,9 @@ export default {
                         }
                     }
 
-                    jQuery('body').trigger('side-menu.apps', [apps])
+                    document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
+                        detail: {apps: apps},
+                    }));
                 });
         },
 
diff --git a/templates/js/script.php b/templates/js/script.php
index cf4b2ce..1bf944b 100644
--- a/templates/js/script.php
+++ b/templates/js/script.php
@@ -28,7 +28,9 @@ if ($_['always-displayed']) {
 
     var targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>;
 
-    body.on('side-menu.apps', function(e, apps) {
+    document.querySelector('body').addEventListener('side-menu.apps', function(e) {
+        const apps = e.detail.apps;
+
         <?php if ($_['hide-when-no-apps']): ?>
             sideMenu = jQuery('#side-menu')
 

From cc7c9f6ed578dc9bc63c84c75f6278b48d043c39 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Thu, 28 Oct 2021 15:47:03 +0200
Subject: [PATCH 02/15] remove most of jquery

---
 src/SideMenu.js                  |   2 +-
 templates/js/_alwaysDisplayed.js |  20 ++++-
 templates/js/_loaderEnabled.js   |  17 ++--
 templates/js/script.php          | 146 +++++++++++++++++++------------
 4 files changed, 115 insertions(+), 70 deletions(-)

diff --git a/src/SideMenu.js b/src/SideMenu.js
index 441d0a4..a9848c4 100644
--- a/src/SideMenu.js
+++ b/src/SideMenu.js
@@ -41,7 +41,7 @@ const mountSideMenuComponent = () => {
 
         sideMenu.$mount('#side-menu')
 
-        $('body').trigger('side-menu.ready')
+        document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.ready'))
     } else {
         window.setTimeout(mountSideMenuComponent, 50)
     }
diff --git a/templates/js/_alwaysDisplayed.js b/templates/js/_alwaysDisplayed.js
index 2b58bc7..f56b2a2 100644
--- a/templates/js/_alwaysDisplayed.js
+++ b/templates/js/_alwaysDisplayed.js
@@ -1,5 +1,5 @@
 var alwaysDisplayed = function() {
-    var elements = document.querySelectorAll('*');
+    var elements = querySelectorAll('*')
     var fixedElements = []
 
     for (var i in elements) {
@@ -25,7 +25,21 @@ var alwaysDisplayed = function() {
             continue
         }
 
-        if (jQuery(element).parents('#side-menu').length) {
+        let elementIsInSideMenu = false
+        let parent = element.parentNode
+
+        while (parent && !elementIsInSideMenu) {
+            try {
+                if  (parent.getAttribute('id') === 'side-menu') {
+                    elementIsInSideMenu = true
+                }
+            } catch (e) {
+            }
+
+            parent = parent.parentNode
+        }
+
+        if (elementIsInSideMenu) {
             continue
         }
 
@@ -56,7 +70,7 @@ if (content && content.classList.contains('app-settings')) {
     }
     const observer = new MutationObserver(() => {
         if (loaded) {
-            return;
+            return
         }
 
         const element = content.querySelector('#app-category-your-apps') || content.querySelector('#app-navigation ul')
diff --git a/templates/js/_loaderEnabled.js b/templates/js/_loaderEnabled.js
index b391e4b..1d5ff4e 100644
--- a/templates/js/_loaderEnabled.js
+++ b/templates/js/_loaderEnabled.js
@@ -1,15 +1,14 @@
-var pageLoader = jQuery('<div id="side-menu-loader">')
-var pageLoaderBar = jQuery('<div id="side-menu-loader-bar">')
+let pageLoader = createElement('div', {id: 'side-menu-loader'})
+let pageLoaderBar = createElement('div', {id: 'side-menu-loader-bar'})
 
-body.append(pageLoader)
-pageLoader.append(pageLoaderBar)
+pageLoader.appendChild(pageLoaderBar)
+querySelector('body').appendChild(pageLoader)
 
-var pageLoaderValue = 0
-
-$(window).on('beforeunload', function() {
-    setInterval(function() {
-        pageLoaderBar.width(pageLoaderValue.toString() + '%')
+let pageLoaderValue = 0
 
+window.addEventListener('beforeunload', () => {
+    setInterval(() => {
+        pageLoaderBar.style.width = pageLoaderValue.toString() + '%'
         pageLoaderValue = Math.min(pageLoaderValue + .2, 100)
     }, 25)
 })
diff --git a/templates/js/script.php b/templates/js/script.php
index 1bf944b..e32af22 100644
--- a/templates/js/script.php
+++ b/templates/js/script.php
@@ -13,65 +13,94 @@ if ($_['always-displayed']) {
 ?>
 
 (function() {
-    var sideMenuContainer = jQuery('<div id="side-menu-container">')
-    var sideMenuOpener = jQuery('<button class="side-menu-opener"></button>')
-    var sideMenu = jQuery('<div id="side-menu">')
-    var body = jQuery('body')
-    var html = jQuery('html')
-    var isTouchDevice = window.matchMedia("(pointer: coarse)").matches
+    const querySelector = function(selector, element) {
+        if (element) {
+            return element.querySelector(selector)
+        }
+
+        return document.querySelector(selector)
+    }
+
+    const querySelectorAll = function(selector, element) {
+        if (element) {
+            return element.querySelectorAll(selector)
+        }
+
+        return document.querySelectorAll(selector)
+    }
+
+    const createElement = function(tagName, attributes) {
+        const element = document.createElement(tagName)
+
+        if (typeof attributes === 'object') {
+            for (let i in attributes) {
+                element.setAttribute(i, attributes[i])
+            }
+        }
+
+        return element
+    }
+
+    const sideMenuContainer = createElement('div', {id: 'side-menu-container'})
+    const sideMenuOpener = createElement('button', {'class': 'side-menu-opener'})
+    const sideMenu = createElement('div', {id: 'side-menu'})
+
+    const body = querySelector('body')
+    const html = querySelector('html')
+    const nextcloud = querySelector('#nextcloud')
+
+    const isTouchDevice = window.matchMedia("(pointer: coarse)").matches
+    const targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>
 
     <?php if ($display === 'big-menu'): ?>
-        sideMenu.attr('data-bigmenu', '1')
+        sideMenu.setAttribute('data-bigmenu', '1')
     <?php elseif ($display === 'side-with-categories'): ?>
-        sideMenu.attr('data-sidewithcategories', '1')
+        sideMenu.setAttribute('data-sidewithcategories', '1')
     <?php endif; ?>
 
-    var targetBlankApps = <?php echo json_encode($_['target-blank-apps']) ?>;
-
-    document.querySelector('body').addEventListener('side-menu.apps', function(e) {
+    querySelector('body').addEventListener('side-menu.apps', (e) => {
         const apps = e.detail.apps;
 
         <?php if ($_['hide-when-no-apps']): ?>
-            sideMenu = jQuery('#side-menu')
+            const sideMenu = querySelector('#side-menu')
 
             if (apps.length === 0) {
-                sideMenu.removeClass('open')
-                sideMenu.addClass('hide')
-                sideMenuOpener.addClass('hide')
+                sideMenu.classList.remove('open')
+                sideMenu.classList.add('hide')
+                sideMenuOpener.classList.add('hide')
             } else {
-                sideMenu.removeClass('hide')
-                sideMenuOpener.removeClass('hide')
+                sideMenu.classList.remove('hide')
+                sideMenuOpener.classList.remove('hide')
             }
 
             <?php if ($display === 'always-displayed'): ?>
                 if (apps.length === 0) {
-                    html.removeClass('side-menu-always-displayed');
+                    html.classList.remove('side-menu-always-displayed')
                 } else {
-                    html.addClass('side-menu-always-displayed');
+                    html.classList.add('side-menu-always-displayed')
                 }
             <?php endif; ?>
         <?php else: ?>
             <?php if ($display === 'always-displayed'): ?>
                 if (apps.length === 0) {
-                    html.removeClass('side-menu-always-displayed');
+                    html.classList.remove('side-menu-always-displayed')
                 } else {
-                    html.addClass('side-menu-always-displayed');
+                    html.classList.add('side-menu-always-displayed')
                 }
             <?php endif; ?>
         <?php endif; ?>
     })
 
-    body.on('side-menu.ready', function() {
-        sideMenu = jQuery('#side-menu')
+    body.addEventListener('side-menu.ready', () => {
+        const sideMenu = querySelector('#side-menu')
+        const headerMenuOpener = querySelector('#header .side-menu-opener')
+        const sideMenuOpener = querySelector('#side-menu .side-menu-opener')
 
-        var headerMenuOpener = jQuery('#header .side-menu-opener')
-        var sideMenuOpener = jQuery('#side-menu .side-menu-opener')
-
-        sideMenuFocus = function() {
-            var a = sideMenu.find('.side-menu-app.active a')
+        sideMenuFocus = () => {
+            let a = querySelector('.side-menu-app.active a', sideMenu)
 
             if (a.length === 0) {
-                a = sideMenu.find('.side-menu-app:first-child a')
+                a = querySelector('.side-menu-app:first-child a', sideMenu)
             }
 
             if (a.length > 0) {
@@ -80,78 +109,81 @@ if ($_['always-displayed']) {
         }
 
         <?php if ($_['opener-hover'] || $display === 'always-displayed'): ?>
-            var sideMenuMouseLeave = function() {
-                sideMenu
-                    .removeClass('open')
-                    .off('mouseleave', sideMenuMouseLeave)
+            const sideMenuMouseLeave = () => {
+                sideMenu.classList.remove('open')
+                sideMenu.removeEventListener('mouseleave', sideMenuMouseLeave)
             }
 
-            var sideMenuMouseEnter = function() {
-                sideMenu.on('mouseleave', sideMenuMouseLeave)
+            const sideMenuMouseEnter = () => {
+                sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
             }
 
-            var sideMenuOpenerMouseEnter = function() {
-                sideMenu
-                    .addClass('open')
-                    .on('mouseenter', sideMenuMouseEnter)
+            const sideMenuOpenerMouseEnter = () => {
+                sideMenu.classList.add('open')
+                sideMenu.addEventListener('mouseenter', sideMenuMouseEnter)
 
                 sideMenuFocus()
             }
 
             if (!isTouchDevice) {
                 <?php if ($_['opener-hover']): ?>
-                    headerMenuOpener.on('mouseenter', sideMenuOpenerMouseEnter)
+                    headerMenuOpener.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
 
-                    sideMenu.addClass('hide-opener')
+                    sideMenu.classList.add('hide-opener')
                 <?php endif ?>
 
-                sideMenu.on('mouseleave', sideMenuMouseLeave)
-                sideMenu.on('mouseenter', sideMenuOpenerMouseEnter)
+                sideMenu.addEventListener('mouseleave', sideMenuMouseLeave)
+                sideMenu.addEventListener('mouseenter', sideMenuOpenerMouseEnter)
             }
         <?php endif; ?>
 
-        headerMenuOpener.on('click', function() {
-            sideMenu.addClass('open')
-            sideMenu.find('.side-menu-app.active a').focus()
+        headerMenuOpener.addEventListener('click', () => {
+            sideMenu.classList.add('open')
+
+            const a = querySelector('.side-menu-app.active a', sideMenu)
+
+            if (a.length) {
+                a.focus()
+            }
         })
 
         <?php if ($display === 'always-displayed'): ?>
-            sideMenuOpener.on('click', function() {
-                sideMenu.toggleClass('open')
+            sideMenuOpener.addEventListener('click', () => {
+                sideMenu.classList.toggle('open')
             })
         <?php else: ?>
-            sideMenuOpener.on('click', function() {
-                sideMenu.removeClass('open')
+            sideMenuOpener.addEventListener('click', () => {
+                sideMenu.classList.remove('open')
             })
         <?php endif; ?>
 
-        jQuery(document).keydown(function(e) {
+        document.addEventListener('keydown', (e) => {
             var key = e.key || e.keyCode
 
             if ((key === 'o' || key === 79) && e.ctrlKey === true) {
                 e.preventDefault()
 
-                sideMenu.toggleClass('open')
+                sideMenu.classList.toggle('open')
                 sideMenuFocus()
             }
         })
     })
 
-    body.append(sideMenuContainer)
-    sideMenuContainer.append(sideMenu)
+    body.appendChild(sideMenuContainer)
+    sideMenuContainer.appendChild(sideMenu)
 
     <?php if ($_['loader-enabled'] === true): ?>
         <?php require_once __DIR__.'/_loaderEnabled.js'; ?>
     <?php endif; ?>
 
     <?php if ($_['opener-position'] === 'before'): ?>
-        sideMenuOpener.insertBefore('#nextcloud')
+        nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud)
     <?php else: ?>
-        sideMenuOpener.insertAfter('#nextcloud')
+        nextcloud.parentNode.insertBefore(sideMenuOpener, nextcloud.nextSibling)
     <?php endif; ?>
 
     <?php if (!empty($_['top-menu-apps'])): ?>
-        var topMenuApps = <?php echo json_encode($_['top-menu-apps']); ?>;
+        const topMenuApps = <?php echo json_encode($_['top-menu-apps']); ?>
 
         <?php require_once __DIR__.'/_topMenuApps.js'; ?>
     <?php endif; ?>

From a074d747c19cbc8a66a13fa0e7f088b05e0adeff Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 29 Oct 2021 11:14:27 +0200
Subject: [PATCH 03/15] remove most of jquery from top menu

---
 templates/js/_topMenuApps.js | 221 ++++++++++++++++++++---------------
 templates/js/script.php      |  26 +++--
 2 files changed, 142 insertions(+), 105 deletions(-)

diff --git a/templates/js/_topMenuApps.js b/templates/js/_topMenuApps.js
index 57b7088..589c464 100644
--- a/templates/js/_topMenuApps.js
+++ b/templates/js/_topMenuApps.js
@@ -1,32 +1,55 @@
-var menuCache = null
+let menuCache = null
 
-var updateTopMenu = function() {
-    var breakpointMobileWidth = 1024
-    var menu = jQuery('#appmenu')
-    var apps = menu.find('li')
-    var minAppsDesktop = 8
-    var usePercentualAppMenuLimit = 0.8
-    var isMobile = jQuery(window).width() < breakpointMobileWidth
-    var lastShownApp = null
-    var appShown = []
-    var moreApps = jQuery('#more-apps')
-    var navigation = jQuery('#navigation')
-    var navigationApps = jQuery('#apps ul')
-    var appCount = null
+const breakpointMobileWidth = 1024
+const usePercentualAppMenuLimit = 0.8
+const minAppsDesktop = 8
 
-    var currentMenuCache = menu.html() + menu.next().html()
+const handleMenuClick = (e, icon) => {
+    let element = e.target
 
-    if (currentMenuCache === menuCache) {
+    while (element.tagName !== 'LI') {
+        element = element.parentNode
+    }
+
+    const a = querySelector('a', element)
+
+    if (a.getAttribute('target') !== '_blank' && e.which === 1 && !e.ctrlKey && !e.metaKey) {
+        for (let tag of ['svg', 'div']) {
+            let el = querySelector(tag, element)
+
+            if (el) {
+                el.remove()
+            }
+        }
+
+        const loader = createElement('div', {'class': icon})
+
+        a.insertBefore(loader, querySelector('span', a))
+    }
+}
+
+const updateTopMenu = function() {
+    const isMobile = window.innerWidth < breakpointMobileWidth
+    const menu = querySelector('#appmenu')
+    const moreApps = querySelector('#more-apps')
+    const navigation = querySelector('#navigation')
+    const navigationApps = querySelector('#apps ul')
+
+    let apps = querySelectorAll('li', menu)
+    let lastShownApp = null
+    let appShown = []
+
+    if ((menu.innerHTML + menu.nextSibling.innerHTML) === menuCache) {
         return
     }
 
-    navigationApps.html('')
+    navigationAppsHtml = ''
 
-    apps.each(function(i, app) {
-        var dataId = app.getAttribute('data-id')
+    for (let app of apps) {
+        const dataId = app.getAttribute('data-id')
 
         if (dataId === null) {
-            return
+            continue
         }
 
         if (topMenuApps.indexOf(dataId) === -1) {
@@ -36,25 +59,28 @@ var updateTopMenu = function() {
             app.classList.remove('hidden')
             app.classList.add('app-external-site')
             appShown.push(app)
-            navigationApps.append(app.outerHTML)
+
+            navigationAppsHtml = navigationAppsHtml + app.outerHTML
         }
 
         if (targetBlankApps.indexOf(dataId) !== -1) {
-            jQuery(app).children('a').attr('target', '_blank');
+            querySelector('a', app).setAttribute('target', '_blank')
         }
-    })
-
-    var rightHeaderWidth = jQuery('.header-right').outerWidth()
-    var headerWidth = jQuery('header').outerWidth()
-    var availableWidth = headerWidth - jQuery('#nextcloud').outerWidth()
-                            - jQuery('#header .side-menu-opener').outerWidth()
-                            - (rightHeaderWidth > 230 ? rightHeaderWidth : 230)
-
-    if (!isMobile) {
-        availableWidth = availableWidth * usePercentualAppMenuLimit
     }
 
-    appCount = Math.floor(availableWidth / jQuery('#appmenu li').width())
+    navigationApps.innerHTML = navigationAppsHtml
+
+    const rightHeaderWidth = querySelector('.header-right').offsetWidth
+    const headerWidth = querySelector('header').offsetWidth
+
+    let availableWidth = headerWidth
+
+    availableWidth -= nextcloud.offsetWidth
+    availableWidth -= querySelector('#header .side-menu-opener').offsetWidth
+    availableWidth -= rightHeaderWidth > 230 ? rightHeaderWidth : 230
+    availableWidth *= isMobile ? usePercentualAppMenuLimit : 1
+
+    let appCount = Math.floor(availableWidth / querySelector('#appmenu li:not(.hidden)').offsetWidth)
 
     if (isMobile && appCount > minAppsDesktop) {
         appCount = minAppsDesktop
@@ -63,110 +89,117 @@ var updateTopMenu = function() {
     }
 
     if (appCount === 0) {
-        menu.addClass('hidden')
+        menu.classList.add('hidden')
+    } else {
+        menu.classList.remove('hidden')
     }
 
-    menu.removeClass('hidden')
-    menu.css('opacity', 1)
+    menu.style.opacity = 1
 
     if (appShown.length - 1 - appCount >= 1) {
         appCount--
     }
 
-    moreApps.find('a').removeClass('active')
+    for (let item of querySelectorAll('a', moreApps)) {
+        item.classList.remove('active')
+    }
 
-    var k = 0
-    var notInHeader = 0
-    var name
+    let k = 0
+    let notInHeader = 0
 
-    jQuery(appShown).each(function(i, app) {
-        app = jQuery(app)
-        name = app.data('id')
+    for (let app of appShown) {
+        const name = app.getAttribute('data-id')
+        const item = querySelector('#apps li[data-id=' + name + '].app-external-site')
 
         if (k < appCount && appCount > 0) {
-            app.removeClass('hidden')
+            app.classList.remove('hidden')
             lastShownApp = app
 
-            jQuery('#apps li[data-id=' + name + '].app-external-site').addClass('in-header')
+            item.classList.add('in-header')
         } else {
-            app.addClass('hidden')
+            app.classList.add('hidden')
             notInHeader++
 
-            jQuery('#apps li[data-id=' + name + '].app-external-site').removeClass('in-header')
+            item.classList.remove('in-header')
 
-            if (appCount > 0 && app.children('a').hasClass('active')) {
-                lastShownApp.addClass('hidden')
-                app.removeClass('hidden')
+            const a = querySelector('a', app)
+
+            if (appCount > 0 && a.classList.contains('active')) {
+                lastShownApp.classList.add('hidden')
+                app.classList.remove('hidden')
                 notInHeader++
 
-                jQuery('#apps li[data-id=' + name + '].app-external-site')
-                    .removeClass('in-header')
-                    .addClass('in-header')
+                item.classList.add('in-header')
             }
         }
 
         k++
-    })
+    }
 
-    // Hack for https://github.com/nextcloud/server/blob/23b0b63c213f5b31eecae817ffd4a9e26f6624d0/core/src/components/MainMenu.js#L74-L96
-    menu.undelegate('li:not(#more-apps) > a', 'click')
-    menu.delegate('li:not(#more-apps) > a', 'click', function(e) {
-        var a = $(e.target)
+    // Hack for:
+    // - https://github.com/nextcloud/server/blob/master/core/src/components/MainMenu.js#L97-L119
+    // - https://github.com/nextcloud/server/blob/master/core/src/components/MainMenu.js#L97-L119
+    jQuery(menu).undelegate('li:not(#more-apps) > a', 'click')
+    jQuery(navigation).undelegate('a', 'click')
 
-        if (!a.is('a')) {
-            a = a.closest('a')
+    const confs = [
+        {
+            items: querySelectorAll('#navigation li'), 
+            icon: 'icon-loading-small'
+        },
+        {
+            items: querySelectorAll('li:not(#more-apps)', menu), 
+            icon: OCA.Theming && OCA.Theming.inverted ? 'icon-loading-small' : 'icon-loading-small-dark'
+        },
+    ]
+
+    for (let conf of confs) {
+        for (let item of conf.items) {
+            item.addEventListener('click', (e) => {
+                handleMenuClick(e, conf.icon)
+            })
         }
+    }
 
-        if (a.attr('target') !== '_blank' && e.which === 1 && !e.ctrlKey && !e.metaKey && a.parent('#more-apps').length === 0) {
-            a.find('svg').remove()
-            a.find('div').remove()
-            a.prepend(jQuery('<div/>').addClass(
-                OCA.Theming && OCA.Theming.inverted
-                ? 'icon-loading-small'
-                : 'icon-loading-small-dark'
-            ))
+    for (let app of querySelectorAll('#apps li.app-external-site')) {
+        const appId = app.getAttribute('data-id')
 
-            window.location.href = a.attr('href')
-        }
-    })
-
-    jQuery('#apps li.app-external-site').each(function(i, app) {
-        app = jQuery(app)
-        var appId = app.attr('data-id')
-
-        if (app.hasClass('in-header')) {
-            app.find('svg').find('defs').remove()
+        if (app.classList.contains('in-header')) {
+            for (let defs of querySelectorAll('svg defs', app)) {
+                defs.remove()
+            }
         } else {
-            var svg = app.find('svg');
+            const svg = querySelector('svg', app)
 
-            if (svg.find('defs').length > 0) {
+            if (querySelectorAll('svg defs', app).length > 0) {
                 return;
             }
 
-            var defs = `
+            const defs = `
                 <defs>
                     <filter id="invertMenuMore-${appId}">
                         <feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix>
                     </filter>
                 </defs>`
 
-            svg.prepend(defs)
-            svg.find('image').attr('filter', `url(#invertMenuMore-${appId})`)
+            svg.innerHTML = defs + svg.innerHTML
 
-            var html = svg.get(0).innerHTML.replace(/fecolormatrix/g, 'feColorMatrix');
+            for (let image of querySelectorAll('image', svg)) {
+                image.setAttribute('filter', `url(#invertMenuMore-${appId})`)
+            }
 
-            svg.html(html)
+            svg.innerHTML = svg.innerHTML.replace(/fecolormatrix/g, 'feColorMatrix')
         }
-    })
-
-    if (notInHeader === 0) {
-        moreApps.hide()
-        navigation.hide()
-    } else {
-        moreApps.show()
     }
 
-    menuCache = menu.html() + menu.next().html()
+    if (notInHeader === 0) {
+        moreApps.style.display = 'none'
+        navigation.style.display = 'none'
+    } else {
+        moreApps.style.display = 'flex'
+    }
+
+    menuCache = menu.innerHTML + menu.nextSibling.innerHTML
 }
 
-setInterval(updateTopMenu, 50)
+setInterval(updateTopMenu, 1000)
diff --git a/templates/js/script.php b/templates/js/script.php
index e32af22..8f22477 100644
--- a/templates/js/script.php
+++ b/templates/js/script.php
@@ -94,11 +94,15 @@ if ($_['always-displayed']) {
     body.addEventListener('side-menu.ready', () => {
         const sideMenu = querySelector('#side-menu')
         const headerMenuOpener = querySelector('#header .side-menu-opener')
-        const sideMenuOpener = querySelector('#side-menu .side-menu-opener')
+        const sideMenuOpener = querySelectorAll('#side-menu .side-menu-opener')
 
         sideMenuFocus = () => {
             let a = querySelector('.side-menu-app.active a', sideMenu)
 
+            if (!a) {
+                return
+            }
+
             if (a.length === 0) {
                 a = querySelector('.side-menu-app:first-child a', sideMenu)
             }
@@ -108,7 +112,7 @@ if ($_['always-displayed']) {
             }
         }
 
-        <?php if ($_['opener-hover'] || $display === 'always-displayed'): ?>
+        <?php if ($_['opener-hover']): ?>
             const sideMenuMouseLeave = () => {
                 sideMenu.classList.remove('open')
                 sideMenu.removeEventListener('mouseleave', sideMenuMouseLeave)
@@ -142,20 +146,20 @@ if ($_['always-displayed']) {
 
             const a = querySelector('.side-menu-app.active a', sideMenu)
 
-            if (a.length) {
+            if (a !== null) {
                 a.focus()
             }
         })
 
-        <?php if ($display === 'always-displayed'): ?>
-            sideMenuOpener.addEventListener('click', () => {
-                sideMenu.classList.toggle('open')
+        for (let opener of sideMenuOpener) {
+            opener.addEventListener('click', () => {
+                <?php if ($display === 'always-displayed'): ?>
+                    sideMenu.classList.toggle('open')
+                <?php else: ?>
+                    sideMenu.classList.remove('open')
+                <?php endif; ?>
             })
-        <?php else: ?>
-            sideMenuOpener.addEventListener('click', () => {
-                sideMenu.classList.remove('open')
-            })
-        <?php endif; ?>
+        }
 
         document.addEventListener('keydown', (e) => {
             var key = e.key || e.keyCode

From 5d93d02960b1baffce6e5622d83808b3eccb7a1e Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 29 Oct 2021 11:24:01 +0200
Subject: [PATCH 04/15] refactoring of alwaysDisplayed function

---
 templates/js/_alwaysDisplayed.js | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/templates/js/_alwaysDisplayed.js b/templates/js/_alwaysDisplayed.js
index f56b2a2..7a2a36b 100644
--- a/templates/js/_alwaysDisplayed.js
+++ b/templates/js/_alwaysDisplayed.js
@@ -1,21 +1,19 @@
-var alwaysDisplayed = function() {
-    var elements = querySelectorAll('*')
-    var fixedElements = []
-
-    for (var i in elements) {
-        var element = elements[i]
+const alwaysDisplayed = function() {
+    const elements = querySelectorAll('*')
+    const fixedElements = []
 
+    for (var element of elements) {
         if (typeof element !== 'object') {
             continue
         }
 
-        var position = window.getComputedStyle(element, null).getPropertyValue('position');
+        const position = window.getComputedStyle(element, null).getPropertyValue('position');
 
         if (position !== 'fixed') {
             continue
         }
 
-        var id = element.getAttribute('id')
+        const id = element.getAttribute('id')
 
         if (id === 'header' || id === 'side-menu' || id === 'side-menu-loader') {
             continue
@@ -47,19 +45,19 @@ var alwaysDisplayed = function() {
     }
 
     for (var i in fixedElements) {
-        var element = fixedElements[i]
-        var computedStyle = window.getComputedStyle(element, null)
-        var left = computedStyle.getPropertyValue('left')
-        var right = computedStyle.getPropertyValue('right')
+        const element = fixedElements[i]
+        const computedStyle = window.getComputedStyle(element, null)
+        const left = computedStyle.getPropertyValue('left')
+        const right = computedStyle.getPropertyValue('right')
 
         if (right !== '0px') {
-            var intValue = parseInt(left.replace('px', ''))
-            element.style.setProperty('transform', 'translateX(' + (intValue + 50) + 'px)')
+            const intValue = parseInt(left.replace('px', '')) + 50
+            element.style.setProperty('transform', 'translateX(' + intValue.toString() + 'px)')
         }
     }
 }
 
-let content = document.getElementById('content')
+const content = querySelector('#content')
 
 if (content && content.classList.contains('app-settings')) {
     let loaded = false

From c2e6d24b95e16c420b5af38218bb081925a00b11 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 29 Oct 2021 11:27:45 +0200
Subject: [PATCH 05/15] remove ';' on endline

---
 src/SideMenu.vue                 | 6 +++---
 src/SideMenuBig.vue              | 6 +++---
 src/SideMenuWithCategories.vue   | 6 +++---
 templates/js/_alwaysDisplayed.js | 2 +-
 templates/js/_topMenuApps.js     | 6 +++---
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/SideMenu.vue b/src/SideMenu.vue
index 908f84c..7ab3cab 100644
--- a/src/SideMenu.vue
+++ b/src/SideMenu.vue
@@ -122,7 +122,7 @@ export default {
                         name: trim(element.querySelector('span').innerHTML),
                         icon: svg,
                         active: element.classList.contains('active')
-                    });
+                    })
                 }
             }
 
@@ -130,7 +130,7 @@ export default {
                 window.setTimeout(function() {
                     document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
                         detail: {apps: apps},
-                    }));
+                    }))
                 }, 1000)
             })(this.apps)
         },
@@ -149,7 +149,7 @@ export default {
                     that.logo = config['logo']
                     that.logoLink = config['logo-link']
                     that.settings = config['settings']
-                });
+                })
         },
     },
     mounted() {
diff --git a/src/SideMenuBig.vue b/src/SideMenuBig.vue
index 31b9992..72e6321 100644
--- a/src/SideMenuBig.vue
+++ b/src/SideMenuBig.vue
@@ -99,8 +99,8 @@ export default {
 
                     document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
                         detail: {apps: apps},
-                    }));
-                });
+                    }))
+                })
         },
 
         retrieveActiveApp() {
@@ -118,7 +118,7 @@ export default {
 
                     that.targetBlankApps = config['target-blank-apps']
                     that.settings = config['settings']
-                });
+                })
         },
     },
     mounted() {
diff --git a/src/SideMenuWithCategories.vue b/src/SideMenuWithCategories.vue
index 0ba9c45..7accbf0 100644
--- a/src/SideMenuWithCategories.vue
+++ b/src/SideMenuWithCategories.vue
@@ -97,8 +97,8 @@ export default {
 
                     document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
                         detail: {apps: apps},
-                    }));
-                });
+                    }))
+                })
         },
 
         retrieveActiveApp() {
@@ -116,7 +116,7 @@ export default {
 
                     that.targetBlankApps = config['target-blank-apps']
                     that.settings = config['settings']
-                });
+                })
         },
     },
     mounted() {
diff --git a/templates/js/_alwaysDisplayed.js b/templates/js/_alwaysDisplayed.js
index 7a2a36b..e37230a 100644
--- a/templates/js/_alwaysDisplayed.js
+++ b/templates/js/_alwaysDisplayed.js
@@ -7,7 +7,7 @@ const alwaysDisplayed = function() {
             continue
         }
 
-        const position = window.getComputedStyle(element, null).getPropertyValue('position');
+        const position = window.getComputedStyle(element, null).getPropertyValue('position')
 
         if (position !== 'fixed') {
             continue
diff --git a/templates/js/_topMenuApps.js b/templates/js/_topMenuApps.js
index 589c464..9a6af72 100644
--- a/templates/js/_topMenuApps.js
+++ b/templates/js/_topMenuApps.js
@@ -144,11 +144,11 @@ const updateTopMenu = function() {
 
     const confs = [
         {
-            items: querySelectorAll('#navigation li'), 
+            items: querySelectorAll('#navigation li'),
             icon: 'icon-loading-small'
         },
         {
-            items: querySelectorAll('li:not(#more-apps)', menu), 
+            items: querySelectorAll('li:not(#more-apps)', menu),
             icon: OCA.Theming && OCA.Theming.inverted ? 'icon-loading-small' : 'icon-loading-small-dark'
         },
     ]
@@ -172,7 +172,7 @@ const updateTopMenu = function() {
             const svg = querySelector('svg', app)
 
             if (querySelectorAll('svg defs', app).length > 0) {
-                return;
+                return
             }
 
             const defs = `

From 6f0c4e98e0c72d1b01de1c6e1fcd0d03baeffb5a Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 29 Oct 2021 13:56:48 +0200
Subject: [PATCH 06/15] fix top menu generation; fix issue #66 by removing
 usage of setInterval

---
 templates/js/_topMenuApps.js | 40 +++++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/templates/js/_topMenuApps.js b/templates/js/_topMenuApps.js
index 9a6af72..188382f 100644
--- a/templates/js/_topMenuApps.js
+++ b/templates/js/_topMenuApps.js
@@ -1,4 +1,6 @@
 let menuCache = null
+let updateTopMenuIsRunning = false
+let forceUpdateTopMenu = false
 
 const breakpointMobileWidth = 1024
 const usePercentualAppMenuLimit = 0.8
@@ -58,6 +60,7 @@ const updateTopMenu = function() {
         } else {
             app.classList.remove('hidden')
             app.classList.add('app-external-site')
+
             appShown.push(app)
 
             navigationAppsHtml = navigationAppsHtml + app.outerHTML
@@ -66,6 +69,7 @@ const updateTopMenu = function() {
         if (targetBlankApps.indexOf(dataId) !== -1) {
             querySelector('a', app).setAttribute('target', '_blank')
         }
+
     }
 
     navigationApps.innerHTML = navigationAppsHtml
@@ -88,12 +92,6 @@ const updateTopMenu = function() {
         appCount = minAppsDesktop
     }
 
-    if (appCount === 0) {
-        menu.classList.add('hidden')
-    } else {
-        menu.classList.remove('hidden')
-    }
-
     menu.style.opacity = 1
 
     if (appShown.length - 1 - appCount >= 1) {
@@ -107,20 +105,21 @@ const updateTopMenu = function() {
     let k = 0
     let notInHeader = 0
 
+
     for (let app of appShown) {
         const name = app.getAttribute('data-id')
-        const item = querySelector('#apps li[data-id=' + name + '].app-external-site')
+        const li = querySelector('#apps li[data-id=' + name + '].app-external-site')
 
         if (k < appCount && appCount > 0) {
             app.classList.remove('hidden')
-            lastShownApp = app
+            li.classList.add('in-header')
 
-            item.classList.add('in-header')
+            lastShownApp = app
         } else {
             app.classList.add('hidden')
-            notInHeader++
+            li.classList.remove('in-header')
 
-            item.classList.remove('in-header')
+            notInHeader++
 
             const a = querySelector('a', app)
 
@@ -129,7 +128,7 @@ const updateTopMenu = function() {
                 app.classList.remove('hidden')
                 notInHeader++
 
-                item.classList.add('in-header')
+                li.classList.add('in-header')
             }
         }
 
@@ -172,7 +171,7 @@ const updateTopMenu = function() {
             const svg = querySelector('svg', app)
 
             if (querySelectorAll('svg defs', app).length > 0) {
-                return
+                continue
             }
 
             const defs = `
@@ -202,4 +201,17 @@ const updateTopMenu = function() {
     menuCache = menu.innerHTML + menu.nextSibling.innerHTML
 }
 
-setInterval(updateTopMenu, 1000)
+
+for (let timeout of [300, 500, 700]) {
+    setTimeout(updateTopMenu, timeout)
+}
+
+let resizeTimeout = null;
+
+window.addEventListener('resize', () => {
+    if (resizeTimeout !== null) {
+        clearTimeout(resizeTimeout)
+    }
+
+    resizeTimeout = setTimeout(updateTopMenu, 100)
+})

From 96ffdf93ea099f44cc187c6a39bd6533f1a2b26e Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 29 Oct 2021 15:30:22 +0200
Subject: [PATCH 07/15] remove useless vars

---
 templates/js/_topMenuApps.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/templates/js/_topMenuApps.js b/templates/js/_topMenuApps.js
index 188382f..92658a2 100644
--- a/templates/js/_topMenuApps.js
+++ b/templates/js/_topMenuApps.js
@@ -1,6 +1,4 @@
 let menuCache = null
-let updateTopMenuIsRunning = false
-let forceUpdateTopMenu = false
 
 const breakpointMobileWidth = 1024
 const usePercentualAppMenuLimit = 0.8

From d1faf881daa8c49ef1e292d5b0a25a0015be1392 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 31 Oct 2021 16:54:16 +0100
Subject: [PATCH 08/15] add timeout

---
 templates/js/_topMenuApps.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/templates/js/_topMenuApps.js b/templates/js/_topMenuApps.js
index 92658a2..dee32c8 100644
--- a/templates/js/_topMenuApps.js
+++ b/templates/js/_topMenuApps.js
@@ -199,8 +199,7 @@ const updateTopMenu = function() {
     menuCache = menu.innerHTML + menu.nextSibling.innerHTML
 }
 
-
-for (let timeout of [300, 500, 700]) {
+for (let timeout of [300, 500, 700, 900, 1100]) {
     setTimeout(updateTopMenu, timeout)
 }
 

From 7471e93847ef72235bc82c18c8bdf7fad282b6d5 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 31 Oct 2021 16:55:04 +0100
Subject: [PATCH 09/15] fix null setting update

---
 templates/settings/admin-form.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/settings/admin-form.php b/templates/settings/admin-form.php
index 0f2e509..30fc3a9 100644
--- a/templates/settings/admin-form.php
+++ b/templates/settings/admin-form.php
@@ -799,7 +799,7 @@ $choicesSizes = [
                         🖱️ <?php p($l->t('Show and hide the list of categories')); ?>
                     </a>
 
-                    <div class="side-menu-setting" data-name="categories" id="categories-list" style="display: none">
+                    <div id="categories-list" style="display: none">
                         <ul class="side-menu-setting-list">
                             <?php foreach ($_['categories'] as $key => $label): ?>
                                 <li data-id="<?php echo $key; ?>" class="side-menu-setting-list-item">

From 80369a39e113cdcc36491ec6f70dab0e7c83dd31 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 31 Oct 2021 16:55:43 +0100
Subject: [PATCH 10/15] remove jquery excepted for sorting categories

---
 src/admin.js | 161 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 95 insertions(+), 66 deletions(-)

diff --git a/src/admin.js b/src/admin.js
index c9b3c4d..e732d04 100644
--- a/src/admin.js
+++ b/src/admin.js
@@ -17,7 +17,7 @@
 
 let elements = []
 
-const selector = '#side-menu-message';
+const selector = '#side-menu-message'
 
 const userConfig = (name, value, callbacks) => {
     const url = OC.generateUrl('/apps/side_menu/personalSetting/valueSet')
@@ -31,23 +31,29 @@ const appConfig = (name, value, callbacks) => {
 }
 
 const saveSettings = (key) => {
-    const element = elements.get(key)
+    const element = elements[key]
+
+    if (!element) {
+        return
+    }
+
     let value
     let name
 
-    if (jQuery(element).is('[data-checkbox]')) {
-        name = jQuery(element).attr('data-name')
-        const inputs = jQuery('input[name="' + name + '[]"]:checked')
+    if (element.hasAttribute('data-checkbox')) {
+        name = element.getAttribute('data-name')
         value = []
 
-        inputs.each((i, v) => {
-            value.push(v.value)
-        })
+        const inputs = document.querySelectorAll('input[name="' + name + '[]"]:checked')
+
+        for (let input of inputs) {
+            value.push(input.value)
+        }
 
         value = JSON.stringify(value)
     } else {
-        name = jQuery(element).attr('name')
-        value = jQuery(element).val()
+        name = element.getAttribute('name')
+        value = element.value
     }
 
     const size = elements.length
@@ -63,8 +69,8 @@ const saveSettings = (key) => {
                 t('side_menu', (key + 1) + '/' + size)
             )
 
-            if (key < size - 1) {
-                saveSettings(++key)
+            if (key < size) {
+                saveSettings(key + 1)
             } else {
                 OC.msg.finishedSuccess(selector, t('side_menu', 'Saved'))
             }
@@ -74,7 +80,9 @@ const saveSettings = (key) => {
         }
     }
 
-    if (jQuery(element).is('[data-personal]')) {
+    console.log([name, value, element])
+
+    if (element.hasAttribute('data-personal')) {
         userConfig(name, value, callbacks)
     } else {
         appConfig(name, value, callbacks)
@@ -82,70 +90,93 @@ const saveSettings = (key) => {
 }
 
 const elementToggler = (element) => {
-    jQuery(element).toggle()
+	let display = 'none'
+
+    if (window.getComputedStyle(element).display === 'none') {
+	    display = 'block'
+    }
+
+    element.style.display = display
 }
 
-jQuery(document).ready(() => {
-    elements = jQuery('.side-menu-setting')
+document.addEventListener('DOMContentLoaded', () => {
+    elements = document.querySelectorAll('.side-menu-setting')
 
-    jQuery('#side-menu-save').on('click', (event) => {
+    document.querySelector('#side-menu-save').addEventListener('click', (event) => {
         event.preventDefault()
         OC.msg.startSaving(selector)
 
         saveSettings(0)
-    });
-
-    jQuery('.side-menu-display').on('click', (event) => {
-        var target = jQuery(event.target)
-
-        jQuery('.side-menu-display').removeClass('is-active')
-        target.addClass('is-active')
-
-        jQuery('#side-menu-always-displayed').val(target.attr('data-alwaysdiplayed'))
-        jQuery('#side-menu-big-menu').val(target.attr('data-bigmenu'))
-        jQuery('#side-menu-side-with-categories').val(target.attr('data-sidewithcategories'))
     })
 
-    jQuery('.side-menu-setting-live').on('change', (event) => {
-        var target = jQuery(event.target)
-        var name = target.attr('name')
-        var value = target.val()
+    const displays = document.querySelectorAll('.side-menu-display')
 
-        if ('background-color-opacity' === name) {
-            return $('#side-menu-background-color, #side-menu-background-color-to').trigger('change');
-        } else if ('dark-mode-background-color-opacity' === name) {
-            return $('#side-menu-dark-mode-background-color, #side-menu-dark-mode-background-color-to').trigger('change');
-        }
+    for (let display of displays) {
+        display.addEventListener('click', (event) => {
+            const target = event.target
 
-        if (name === 'opener') {
-            var url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
+            for (let d of displays) {
+                d.classList.toggle('is-active', d === display)
+            }
 
-            value = `url(${url})`;
-        }
+            document.querySelector('#side-menu-always-displayed').value = target.getAttribute('data-alwaysdiplayed')
+            document.querySelector('#side-menu-big-menu').value = target.getAttribute('data-bigmenu')
+            document.querySelector('#side-menu-side-with-categories').value = target.getAttribute('data-sidewithcategories')
+        })
+    }
 
-        if (name === 'icon-invert-filter' || name === 'icon-opacity') {
-            value/=100;
-        }
+    for (let item of document.querySelectorAll('.side-menu-setting-live')) {
+        item.addEventListener('change', (event) => {
+            const target = event.target
+            const name = target.getAttribute('name')
 
-        if (['dark-mode-background-color', 'dark-mode-background-color-to'].indexOf(name) > -1) {
-            var opacity = parseInt($('#side-menu-dark-mode-background-color-opacity').val() * 255 / 100);
+            let value = target.value
+            let id = null
 
-            value = [value, opacity.toString(16)].join('');
-        } else if (['background-color', 'background-color-to'].indexOf(name) > -1) {
-            var opacity = parseInt($('#side-menu-background-color-opacity').val() * 255 / 100);
+            if (name === 'background-color-opacity') {
+                id = '#side-menu-background-color, #side-menu-background-color-to'
+            } else if (name === 'dark-mode-background-color-opacity') {
+                id = '#side-menu-dark-mode-background-color, #side-menu-dark-mode-background-color-to'
+            }
 
-            value = [value, opacity.toString(16)].join('');
-        }
+            if (id) {
+                document.querySelector(id).dispatchEvent(new CustomEvent('change'))
 
-        document.documentElement.style.setProperty('--side-menu-' + name, value)
-    })
+                return
+            }
 
-    jQuery('.side-menu-toggler').on('click', (event) => {
-        var target = jQuery(event.target)
-        var element = target.attr('data-target')
+            if (name === 'opener') {
+                const url = OC.generateUrl(`/apps/side_menu/img/${value}.svg`).replace('/index.php', '')
 
-        elementToggler(element)
-    })
+                value = `url(${url})`
+            }
+
+            if (name === 'icon-invert-filter' || name === 'icon-opacity') {
+                value/=100
+            }
+
+            if (['dark-mode-background-color', 'dark-mode-background-color-to'].indexOf(name) > -1) {
+                const opacity = parseInt(document.querySelector('#side-menu-dark-mode-background-color-opacity').value * 255 / 100)
+
+                value = [value, opacity.toString(16)].join('')
+            } else if (['background-color', 'background-color-to'].indexOf(name) > -1) {
+                const opacity = parseInt(document.querySelector('#side-menu-background-color-opacity').value * 255 / 100)
+
+                value = [value, opacity.toString(16)].join('')
+            }
+
+            document.documentElement.style.setProperty('--side-menu-' + name, value)
+        })
+    }
+
+    for (let toggler of document.querySelectorAll('.side-menu-toggler')) {
+        toggler.addEventListener('click', (event) => {
+            const target = event.target
+            const element = document.querySelector(target.getAttribute('data-target'))
+
+            elementToggler(element)
+        })
+    }
 
     jQuery("#categories-list .side-menu-setting-list").sortable({
 		forcePlaceholderSize: true,
@@ -153,13 +184,11 @@ jQuery(document).ready(() => {
 		stop: function (event, ui) {
             let value = []
 
-            jQuery('#categories-list .side-menu-setting-list-item').each(function() {
-                value.push(jQuery(this).attr('data-id'))
-            });
+            for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
+                value.push(item.getAttribute('data-id'))
+            }
 
-            value = JSON.stringify(value)
-
-            jQuery('input[name="categories-order"]').val(value)
+            document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
 		}
-	});
-});
+	})
+})

From 9a9515115698a71264f82e56b7606a32545776ac Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 31 Oct 2021 16:56:52 +0100
Subject: [PATCH 11/15] remove console log

---
 src/admin.js                         | 2 --
 templates/settings/personal-form.php | 2 --
 2 files changed, 4 deletions(-)

diff --git a/src/admin.js b/src/admin.js
index e732d04..cb9a214 100644
--- a/src/admin.js
+++ b/src/admin.js
@@ -80,8 +80,6 @@ const saveSettings = (key) => {
         }
     }
 
-    console.log([name, value, element])
-
     if (element.hasAttribute('data-personal')) {
         userConfig(name, value, callbacks)
     } else {
diff --git a/templates/settings/personal-form.php b/templates/settings/personal-form.php
index a2250c3..7337a01 100644
--- a/templates/settings/personal-form.php
+++ b/templates/settings/personal-form.php
@@ -44,8 +44,6 @@ $choicesYesNo = [
                 <?php p($l->t('Menu')); ?>
             </h2>
 
-
-
             <div>
                 <label for="side-menu-enabled">
                     <?php p($l->t('Enable the custom menu')); ?>

From c53221d1129a3e6774c3c3094968cb3d251b6c42 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 31 Oct 2021 17:02:09 +0100
Subject: [PATCH 12/15] fix indentation

---
 src/admin.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/admin.js b/src/admin.js
index cb9a214..2be479b 100644
--- a/src/admin.js
+++ b/src/admin.js
@@ -88,10 +88,10 @@ const saveSettings = (key) => {
 }
 
 const elementToggler = (element) => {
-	let display = 'none'
+    let display = 'none'
 
     if (window.getComputedStyle(element).display === 'none') {
-	    display = 'block'
+        display = 'block'
     }
 
     element.style.display = display
@@ -177,9 +177,9 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     jQuery("#categories-list .side-menu-setting-list").sortable({
-		forcePlaceholderSize: true,
-		placeholder: 'placeholder',
-		stop: function (event, ui) {
+        forcePlaceholderSize: true,
+        placeholder: 'placeholder',
+        stop: function (event, ui) {
             let value = []
 
             for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
@@ -187,6 +187,6 @@ document.addEventListener('DOMContentLoaded', () => {
             }
 
             document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
-		}
-	})
+        }
+    })
 })

From ed2531db554fda24f5b509e290f7d5dd216700e6 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Sun, 31 Oct 2021 17:27:08 +0100
Subject: [PATCH 13/15] add fetch to make request

---
 src/admin.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/admin.js b/src/admin.js
index 2be479b..6bd4c22 100644
--- a/src/admin.js
+++ b/src/admin.js
@@ -21,9 +21,19 @@ const selector = '#side-menu-message'
 
 const userConfig = (name, value, callbacks) => {
     const url = OC.generateUrl('/apps/side_menu/personalSetting/valueSet')
+    const formData = new FormData()
+    formData.append('name', name)
+    formData.append('value', value)
 
-    $.post(url, {name: name, value: value}, callbacks.success)
-        .fail(callbacks.error)
+    fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: formData
+    })
+    .then(callbacks.success)
+    .catch(callbacks.error)
 }
 
 const appConfig = (name, value, callbacks) => {

From db2220e745884c9988f09edbcf3a00e8021d604b Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 5 Nov 2021 20:19:08 +0100
Subject: [PATCH 14/15] replace the sortable jquery plugin with html5sortable

---
 css/admin.css                     |  8 +++++++-
 src/admin.js                      | 18 +++++++++---------
 templates/settings/admin-form.php |  1 +
 vendor/html5sortable.min.js       |  2 ++
 4 files changed, 19 insertions(+), 10 deletions(-)
 create mode 100644 vendor/html5sortable.min.js

diff --git a/css/admin.css b/css/admin.css
index 41d9ec1..a15aa64 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -20,7 +20,7 @@
     margin: 10px 0 10px 0;
 }
 
-#side-menu-section input[type="checkbox"] {
+#-dropside-menu-section input[type="checkbox"] {
     vertical-align: middle;
 }
 
@@ -81,6 +81,12 @@
     cursor: pointer;
 }
 
+.side-menu-setting-list-drop {
+    background: yellow;
+    border-color: yellow;
+    height: 34px;
+}
+
 .side-menu-setting.arrow {
     color: #ccc;
     padding-right: 5px;
diff --git a/src/admin.js b/src/admin.js
index 6bd4c22..3058e24 100644
--- a/src/admin.js
+++ b/src/admin.js
@@ -186,17 +186,17 @@ document.addEventListener('DOMContentLoaded', () => {
         })
     }
 
-    jQuery("#categories-list .side-menu-setting-list").sortable({
-        forcePlaceholderSize: true,
-        placeholder: 'placeholder',
-        stop: function (event, ui) {
-            let value = []
+    sortable('#categories-list .side-menu-setting-list', {
+        placeholderClass: 'side-menu-setting-list-drop'
+    })
 
-            for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
-                value.push(item.getAttribute('data-id'))
-            }
+    sortable('#categories-list .side-menu-setting-list')[0].addEventListener('sortstop', (e) => {
+        let value = []
 
-            document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
+        for (let item of document.querySelectorAll('#categories-list .side-menu-setting-list-item')) {
+            value.push(item.getAttribute('data-id'))
         }
+
+        document.querySelector('input[name="categories-order"]').value = JSON.stringify(value)
     })
 })
diff --git a/templates/settings/admin-form.php b/templates/settings/admin-form.php
index 30fc3a9..2aa15fb 100644
--- a/templates/settings/admin-form.php
+++ b/templates/settings/admin-form.php
@@ -20,6 +20,7 @@ use OCP\IURLGenerator;
 use OCP\IConfig;
 use OCA\SideMenu\AppInfo\Application;
 
+vendor_script('side_menu', 'html5sortable.min');
 script('side_menu', 'admin');
 style('side_menu', 'admin');
 
diff --git a/vendor/html5sortable.min.js b/vendor/html5sortable.min.js
new file mode 100644
index 0000000..38d062b
--- /dev/null
+++ b/vendor/html5sortable.min.js
@@ -0,0 +1,2 @@
+var sortable=function(){"use strict";function d(e,t,n){if(void 0===n)return e&&e.h5s&&e.h5s.data&&e.h5s.data[t];e.h5s=e.h5s||{},e.h5s.data=e.h5s.data||{},e.h5s.data[t]=n}var v=function(e,t){if(!(e instanceof NodeList||e instanceof HTMLCollection||e instanceof Array))throw new Error("You must provide a nodeList/HTMLCollection/Array of elements to be filtered.");return"string"!=typeof t?Array.from(e):Array.from(e).filter(function(e){return 1===e.nodeType&&e.matches(t)})},y=new Map,t=function(){function e(){this._config=new Map,this._placeholder=void 0,this._data=new Map}return Object.defineProperty(e.prototype,"config",{get:function(){var n={};return this._config.forEach(function(e,t){n[t]=e}),n},set:function(e){if("object"!=typeof e)throw new Error("You must provide a valid configuration object to the config setter.");var t=Object.assign({},e);this._config=new Map(Object.entries(t))},enumerable:!1,configurable:!0}),e.prototype.setConfig=function(e,t){if(!this._config.has(e))throw new Error("Trying to set invalid configuration item: "+e);this._config.set(e,t)},e.prototype.getConfig=function(e){if(!this._config.has(e))throw new Error("Invalid configuration item requested: "+e);return this._config.get(e)},Object.defineProperty(e.prototype,"placeholder",{get:function(){return this._placeholder},set:function(e){if(!(e instanceof HTMLElement)&&null!==e)throw new Error("A placeholder must be an html element or null.");this._placeholder=e},enumerable:!1,configurable:!0}),e.prototype.setData=function(e,t){if("string"!=typeof e)throw new Error("The key must be a string.");this._data.set(e,t)},e.prototype.getData=function(e){if("string"!=typeof e)throw new Error("The key must be a string.");return this._data.get(e)},e.prototype.deleteData=function(e){if("string"!=typeof e)throw new Error("The key must be a string.");return this._data.delete(e)},e}(),E=function(e){if(!(e instanceof HTMLElement))throw new Error("Please provide a sortable to the store function.");return y.has(e)||y.set(e,new t),y.get(e)};function i(e,t,n){if(e instanceof Array)for(var r=0;r<e.length;++r)i(e[r],t,n);else e.addEventListener(t,n),E(e).setData("event"+t,n)}function a(e,t){if(e instanceof Array)for(var n=0;n<e.length;++n)a(e[n],t);else e.removeEventListener(t,E(e).getData("event"+t)),E(e).deleteData("event"+t)}function l(e,t,n){if(e instanceof Array)for(var r=0;r<e.length;++r)l(e[r],t,n);else e.setAttribute(t,n)}function r(e,t){if(e instanceof Array)for(var n=0;n<e.length;++n)r(e[n],t);else e.removeAttribute(t)}var w=function(e){if(!e.parentElement||0===e.getClientRects().length)throw new Error("target element must be part of the dom");var t=e.getClientRects()[0];return{left:t.left+window.pageXOffset,right:t.right+window.pageXOffset,top:t.top+window.pageYOffset,bottom:t.bottom+window.pageYOffset}},c=function(n,r){var o;return void 0===r&&(r=0),function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];clearTimeout(o),o=setTimeout(function(){n.apply(void 0,e)},r)}},b=function(e,t){if(!(e instanceof HTMLElement&&(t instanceof NodeList||t instanceof HTMLCollection||t instanceof Array)))throw new Error("You must provide an element and a list of elements.");return Array.from(t).indexOf(e)},f=function(e){if(!(e instanceof HTMLElement))throw new Error("Element is not a node element.");return null!==e.parentNode},n=function(e,t,n){if(!(e instanceof HTMLElement&&e.parentElement instanceof HTMLElement))throw new Error("target and element must be a node");e.parentElement.insertBefore(t,"before"===n?e:e.nextElementSibling)},T=function(e,t){return n(e,t,"before")},C=function(e,t){return n(e,t,"after")},o=function(t,n,e){if(void 0===n&&(n=function(e,t){return e}),void 0===e&&(e=function(e){return e}),!(t instanceof HTMLElement)||!0==!t.isSortable)throw new Error("You need to provide a sortableContainer to be serialized.");if("function"!=typeof n||"function"!=typeof e)throw new Error("You need to provide a valid serializer for items and the container.");var r=d(t,"opts").items,o=v(t.children,r),a=o.map(function(e){return{parent:t,node:e,html:e.outerHTML,index:b(e,o)}});return{container:e({node:t,itemCount:a.length}),items:a.map(function(e){return n(e,t)})}},u=function(e,t,n){var r;if(void 0===n&&(n="sortable-placeholder"),!(e instanceof HTMLElement))throw new Error("You must provide a valid element as a sortable.");if(!(t instanceof HTMLElement)&&void 0!==t)throw new Error("You must provide a valid element as a placeholder or set ot to undefined.");return void 0===t&&(["UL","OL"].includes(e.tagName)?t=document.createElement("li"):["TABLE","TBODY"].includes(e.tagName)?(t=document.createElement("tr")).innerHTML='<td colspan="100"></td>':t=document.createElement("div")),"string"==typeof n&&(r=t.classList).add.apply(r,n.split(" ")),t},L=function(e){if(!(e instanceof HTMLElement))throw new Error("You must provide a valid dom element");var n=window.getComputedStyle(e);return"border-box"===n.getPropertyValue("box-sizing")?parseInt(n.getPropertyValue("height"),10):["height","padding-top","padding-bottom"].map(function(e){var t=parseInt(n.getPropertyValue(e),10);return isNaN(t)?0:t}).reduce(function(e,t){return e+t})},x=function(e){if(!(e instanceof HTMLElement))throw new Error("You must provide a valid dom element");var n=window.getComputedStyle(e);return["width","padding-left","padding-right"].map(function(e){var t=parseInt(n.getPropertyValue(e),10);return isNaN(t)?0:t}).reduce(function(e,t){return e+t})},s=function(e,t){if(!(e instanceof Array))throw new Error("You must provide a Array of HTMLElements to be filtered.");return"string"!=typeof t?e:e.filter(function(e){return e.querySelector(t)instanceof HTMLElement||e.shadowRoot&&e.shadowRoot.querySelector(t)instanceof HTMLElement}).map(function(e){return e.querySelector(t)||e.shadowRoot&&e.shadowRoot.querySelector(t)})},p=function(e){return e.composedPath&&e.composedPath()[0]||e.target},m=function(e,t,n){return{element:e,posX:n.pageX-t.left,posY:n.pageY-t.top}},g=function(e,t,n){if(!(e instanceof Event))throw new Error("setDragImage requires a DragEvent as the first argument.");if(!(t instanceof HTMLElement))throw new Error("setDragImage requires the dragged element as the second argument.");if(n||(n=m),e.dataTransfer&&e.dataTransfer.setDragImage){var r=n(t,w(t),e);if(!(r.element instanceof HTMLElement)||"number"!=typeof r.posX||"number"!=typeof r.posY)throw new Error("The customDragImage function you provided must return and object with the properties element[string], posX[integer], posY[integer].");e.dataTransfer.effectAllowed="copyMove",e.dataTransfer.setData("text/plain",p(e).id),e.dataTransfer.setDragImage(r.element,r.posX,r.posY)}},D=function(e,t){if(!0===e.isSortable){var n=E(e).getConfig("acceptFrom");if(null!==n&&!1!==n&&"string"!=typeof n)throw new Error('HTML5Sortable: Wrong argument, "acceptFrom" must be "null", "false", or a valid selector string.');if(null!==n)return!1!==n&&0<n.split(",").filter(function(e){return 0<e.length&&t.matches(e)}).length;if(e===t)return!0;if(void 0!==E(e).getConfig("connectWith")&&null!==E(e).getConfig("connectWith"))return E(e).getConfig("connectWith")===E(t).getConfig("connectWith")}return!1},M={items:null,connectWith:null,disableIEFix:null,acceptFrom:null,copy:!1,placeholder:null,placeholderClass:"sortable-placeholder",draggingClass:"sortable-dragging",hoverClass:!1,dropTargetContainerClass:!1,debounce:0,throttleTime:100,maxItems:0,itemSerializer:void 0,containerSerializer:void 0,customDragImage:null,orientation:"vertical"};var H,I,A,S,Y,_,O,P,z,h=function(e,t){if("string"==typeof E(e).getConfig("hoverClass")){var o=E(e).getConfig("hoverClass").split(" ");!0===t?(i(e,"mousemove",function(r,o){var a=this;if(void 0===o&&(o=250),"function"!=typeof r)throw new Error("You must provide a function as the first argument for throttle.");if("number"!=typeof o)throw new Error("You must provide a number as the second argument for throttle.");var i=null;return function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];var n=Date.now();(null===i||o<=n-i)&&(i=n,r.apply(a,e))}}(function(r){0===r.buttons&&v(e.children,E(e).getConfig("items")).forEach(function(e){var t,n;e===r.target||e.contains(r.target)?(t=e.classList).add.apply(t,o):(n=e.classList).remove.apply(n,o)})},E(e).getConfig("throttleTime"))),i(e,"mouseleave",function(){v(e.children,E(e).getConfig("items")).forEach(function(e){var t;(t=e.classList).remove.apply(t,o)})})):(a(e,"mousemove"),a(e,"mouseleave"))}},W=function(e){a(e,"dragstart"),a(e,"dragend"),a(e,"dragover"),a(e,"dragenter"),a(e,"drop"),a(e,"mouseenter"),a(e,"mouseleave")},N=function(e,t){e&&a(e,"dragleave"),t&&t!==e&&a(t,"dragleave")},j=function(e,t){var n=e;return!0===E(t).getConfig("copy")&&(l(n=e.cloneNode(!0),"aria-copied","true"),e.parentElement.appendChild(n),n.style.display="none",n.oldDisplay=e.style.display),n},F=function(e){var t;(t=e).h5s&&delete t.h5s.data,r(e,"aria-dropeffect")},q=function(e){r(e,"aria-grabbed"),r(e,"aria-copied"),r(e,"draggable"),r(e,"role")};function R(e,t){if(t.composedPath)return t.composedPath().find(function(e){return e.isSortable});for(;!0!==e.isSortable;)e=e.parentElement;return e}function X(e,t){var n=d(e,"opts"),r=v(e.children,n.items).filter(function(e){return e.contains(t)||e.shadowRoot&&e.shadowRoot.contains(t)});return 0<r.length?r[0]:t}var B=function(e){var t=d(e,"opts"),n=v(e.children,t.items),r=s(n,t.handle);(l(e,"aria-dropeffect","move"),d(e,"_disabled","false"),l(r,"draggable","true"),h(e,!0),!1===t.disableIEFix)&&("function"==typeof(document||window.document).createElement("span").dragDrop&&i(r,"mousedown",function(){if(-1!==n.indexOf(this))this.dragDrop();else{for(var e=this.parentElement;-1===n.indexOf(e);)e=e.parentElement;e.dragDrop()}}))},k=function(e){var t=d(e,"opts"),n=v(e.children,t.items),r=s(n,t.handle);d(e,"_disabled","false"),W(n),N(S,P),a(r,"mousedown"),a(e,"dragover"),a(e,"dragenter"),a(e,"drop")};function U(e,h){var a=String(h);return h=h||{},"string"==typeof e&&(e=document.querySelectorAll(e)),e instanceof HTMLElement&&(e=[e]),e=Array.prototype.slice.call(e),/serialize/.test(a)?e.map(function(e){var t=d(e,"opts");return o(e,t.itemSerializer,t.containerSerializer)}):(e.forEach(function(s){if(/enable|disable|destroy/.test(a))return U[a](s);["connectWith","disableIEFix"].forEach(function(e){Object.prototype.hasOwnProperty.call(h,e)&&null!==h[e]&&console.warn('HTML5Sortable: You are using the deprecated configuration "'+e+'". This will be removed in an upcoming version, make sure to migrate to the new options when updating.')}),h=Object.assign({},M,E(s).config,h),E(s).config=h,d(s,"opts",h),s.isSortable=!0,k(s);var e,t=v(s.children,h.items);if(null!==h.placeholder&&void 0!==h.placeholder){var n=document.createElement(s.tagName);h.placeholder instanceof HTMLElement?n.appendChild(h.placeholder):n.innerHTML=h.placeholder,e=n.children[0]}E(s).placeholder=u(s,e,h.placeholderClass),d(s,"items",h.items),h.acceptFrom?d(s,"acceptFrom",h.acceptFrom):h.connectWith&&d(s,"connectWith",h.connectWith),B(s),l(t,"role","option"),l(t,"aria-grabbed","false"),i(s,"dragstart",function(e){var t=p(e);if(!0!==t.isSortable&&(e.stopImmediatePropagation(),(!h.handle||t.matches(h.handle))&&"false"!==t.getAttribute("draggable"))){var n=R(t,e),r=X(n,t);O=v(n.children,h.items),Y=O.indexOf(r),_=b(r,n.children),S=n,g(e,r,h.customDragImage),I=L(r),A=x(r),r.classList.add(h.draggingClass),l(H=j(r,n),"aria-grabbed","true"),n.dispatchEvent(new CustomEvent("sortstart",{detail:{origin:{elementIndex:_,index:Y,container:S},item:H,originalTarget:t}}))}}),i(s,"dragenter",function(e){var n=p(e),r=R(n,e);r&&r!==P&&(z=v(r.children,d(r,"items")).filter(function(e){return e!==E(s).placeholder}),h.dropTargetContainerClass&&r.classList.add(h.dropTargetContainerClass),r.dispatchEvent(new CustomEvent("sortenter",{detail:{origin:{elementIndex:_,index:Y,container:S},destination:{container:r,itemsBeforeUpdate:z},item:H,originalTarget:n}})),i(r,"dragleave",function(e){var t=e.relatedTarget||e.fromElement;e.currentTarget.contains(t)||(h.dropTargetContainerClass&&r.classList.remove(h.dropTargetContainerClass),r.dispatchEvent(new CustomEvent("sortleave",{detail:{origin:{elementIndex:_,index:Y,container:r},item:H,originalTarget:n}})))})),P=r}),i(s,"dragend",function(e){if(H){H.classList.remove(h.draggingClass),l(H,"aria-grabbed","false"),"true"===H.getAttribute("aria-copied")&&"true"!==d(H,"dropped")&&H.remove(),void 0!==H.oldDisplay&&(H.style.display=H.oldDisplay,delete H.oldDisplay);var t=Array.from(y.values()).map(function(e){return e.placeholder}).filter(function(e){return e instanceof HTMLElement}).filter(f)[0];t&&t.remove(),s.dispatchEvent(new CustomEvent("sortstop",{detail:{origin:{elementIndex:_,index:Y,container:S},item:H}})),A=I=H=P=null}}),i(s,"drop",function(e){if(D(s,H.parentElement)){e.preventDefault(),e.stopPropagation(),d(H,"dropped","true");var t=Array.from(y.values()).map(function(e){return e.placeholder}).filter(function(e){return e instanceof HTMLElement}).filter(f)[0];if(t){t.replaceWith(H),void 0!==H.oldDisplay&&(H.style.display=H.oldDisplay,delete H.oldDisplay),s.dispatchEvent(new CustomEvent("sortstop",{detail:{origin:{elementIndex:_,index:Y,container:S},item:H}}));var n=E(s).placeholder,r=v(S.children,h.items).filter(function(e){return e!==n}),o=!0===this.isSortable?this:this.parentElement,a=v(o.children,d(o,"items")).filter(function(e){return e!==n}),i=b(H,Array.from(H.parentElement.children).filter(function(e){return e!==n})),l=b(H,a);h.dropTargetContainerClass&&o.classList.remove(h.dropTargetContainerClass),_===i&&S===o||s.dispatchEvent(new CustomEvent("sortupdate",{detail:{origin:{elementIndex:_,index:Y,container:S,itemsBeforeUpdate:O,items:r},destination:{index:l,elementIndex:i,container:o,itemsBeforeUpdate:z,items:a},item:H}}))}else d(H,"dropped","false")}});var o=c(function(t,e,n,r){if(H)if(h.forcePlaceholderSize&&(E(t).placeholder.style.height=I+"px",E(t).placeholder.style.width=A+"px"),-1<Array.from(t.children).indexOf(e)){var o=L(e),a=x(e),i=b(E(t).placeholder,e.parentElement.children),l=b(e,e.parentElement.children);if(I<o||A<a){var s=o-I,d=a-A,c=w(e).top,f=w(e).left;if(i<l&&("vertical"===h.orientation&&r<c||"horizontal"===h.orientation&&n<f))return;if(l<i&&("vertical"===h.orientation&&c+o-s<r||"horizontal"===h.orientation&&f+a-d<n))return}void 0===H.oldDisplay&&(H.oldDisplay=H.style.display),"none"!==H.style.display&&(H.style.display="none");var u=!1;try{var p=w(e).top+e.offsetHeight/2,m=w(e).left+e.offsetWidth/2;u="vertical"===h.orientation&&p<=r||"horizontal"===h.orientation&&m<=n}catch(e){u=i<l}u?C(e,E(t).placeholder):T(e,E(t).placeholder),Array.from(y.values()).filter(function(e){return void 0!==e.placeholder}).forEach(function(e){e.placeholder!==E(t).placeholder&&e.placeholder.remove()})}else{var g=Array.from(y.values()).filter(function(e){return void 0!==e.placeholder}).map(function(e){return e.placeholder});-1!==g.indexOf(e)||t!==e||v(e.children,h.items).length||(g.forEach(function(e){return e.remove()}),e.appendChild(E(t).placeholder))}},h.debounce),r=function(e){var t=e.target,n=!0===t.isSortable?t:R(t,e);if(t=X(n,t),H&&D(n,H.parentElement)&&"true"!==d(n,"_disabled")){var r=d(n,"opts");parseInt(r.maxItems)&&v(n.children,d(n,"items")).length>parseInt(r.maxItems)&&H.parentElement!==n||(e.preventDefault(),e.stopPropagation(),e.dataTransfer.dropEffect=!0===E(n).getConfig("copy")?"copy":"move",o(n,t,e.pageX,e.pageY))}};i(t.concat(s),"dragover",r),i(t.concat(s),"dragenter",r)}),e)}return U.destroy=function(e){var t,n,r,o;n=d(t=e,"opts")||{},r=v(t.children,n.items),o=s(r,n.handle),h(t,!1),a(t,"dragover"),a(t,"dragenter"),a(t,"dragstart"),a(t,"dragend"),a(t,"drop"),F(t),a(o,"mousedown"),W(r),q(r),N(S,P),t.isSortable=!1},U.enable=function(e){B(e)},U.disable=function(e){var t,n,r,o;n=d(t=e,"opts"),r=v(t.children,n.items),o=s(r,n.handle),l(t,"aria-dropeffect","none"),d(t,"_disabled","true"),l(o,"draggable","false"),a(o,"mousedown"),h(t,!1)},U.__testing={data:d,removeItemEvents:W,removeItemData:q,removeSortableData:F,removeContainerEvents:N},U}();
+//# sourceMappingURL=html5sortable.min.js.map

From 5e308b610dacc64da0abc42c7f8e737603ca88b7 Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 5 Nov 2021 20:20:42 +0100
Subject: [PATCH 15/15] update the build task to include vendor/

---
 Makefile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Makefile b/Makefile
index 09d3f22..124ddc9 100644
--- a/Makefile
+++ b/Makefile
@@ -13,7 +13,7 @@ release: npm-build translations
 
 	test -d releases/$$VERSION && rm -fr releases/$$VERSION
 	mkdir -p releases/$$VERSION/side_menu
-	cp -r README.md CHANGELOG.md appinfo css lib img l10n js src templates screenshots releases/$$VERSION/side_menu
+	cp -r README.md CHANGELOG.md appinfo css lib img l10n js src templates screenshots vendor releases/$$VERSION/side_menu
 	cd releases/$$VERSION
 	zip -r side_menu_v$$VERSION.zip side_menu
 	tar cvzf side_menu_v$$VERSION.tar.gz side_menu