✨ Turbolinks support

Pull-request : #84
Issue : Closes #66

Adaptation of the code of @vieditcom

Co-authored-by: Viedit com <49990587+vieditcom@users.noreply.github.com>

app/assets/javascripts/arctic_admin/main.js

@@ -1,52 +1,105 @@
-document.addEventListener('DOMContentLoaded', () => {
-
-  // right filter sidebar
-  const sidebar = document.querySelector('#sidebar')
-  if (sidebar) {
-    sidebar.addEventListener('click', event => {
-      const insideSection = document.querySelector('#filters_sidebar_section')
-      if (!(event.target === insideSection || insideSection.contains(event.target)) && event.target.className != "select2-selection__choice__remove") {
-        sidebar.classList.toggle('sidebar_open')
-      }
-    })
+// right filter sidebar toggle
+function sidebar() {
+  return document.querySelector('#sidebar')
+}
+function sidebarToggle(event) {
+  const insideSection = document.querySelector('#filters_sidebar_section')
+
+  if (!(event.target === insideSection || insideSection.contains(event.target)) && event.target.className != "select2-selection__choice__remove") {
+    sidebar().classList.toggle('sidebar_open')
   }
+}
 
-  const menuButton = document.querySelector('#utility_nav')
-  const menu = document.querySelector('#tabs')
-
-  // toggle menu sidebar with the menu button
-  menuButton.addEventListener('click', event => {
-    const currentUser = document.querySelector('#current_user')
-    const logout = document.querySelector('#logout')
-    const forbiddenLinks = event.target === logout ||
-        logout.contains(event.target) ||
-        event.target === currentUser ||
-        currentUser.contains(event.target)
-    if (!forbiddenLinks) {
-      menu.classList.toggle('tabs_open')
-    }
-  })
-
-  // close left menu sidebar on any click outside
-  document.body.addEventListener('click', event => {
-    const forbiddenLinks = event.target === menu ||
-        menu.contains(event.target) ||
-        event.target === menuButton ||
-        menuButton.contains(event.target)
-    if (menu.classList.contains('tabs_open') && !forbiddenLinks) {
-      menu.classList.remove('tabs_open')
-    }
-  })
+// left menu sidebar toggle with menu button
+function menuButton() {
+  return document.querySelector('#utility_nav')
+}
+function menu() {
+  return document.querySelector('#tabs')
+}
+function menuToggle(event) {
+  const currentUser = document.querySelector('#current_user')
+  const logout = document.querySelector('#logout')
+  const forbiddenLinks = event.target === logout ||
+    logout.contains(event.target) ||
+    event.target === currentUser ||
+    currentUser.contains(event.target)
+  if (!forbiddenLinks) {
+    menu().classList.toggle('tabs_open')
+  }
+}
+
+// left menu sidebar close on any click outside
+function menuClose(event) {
+  const forbiddenLinks = event.target === menu ||
+    menu().contains(event.target) ||
+    event.target === menuButton() ||
+    menuButton().contains(event.target)
+  if (menu().classList.contains('tabs_open') && !forbiddenLinks) {
+    menu().classList.remove('tabs_open')
+  }
+}
+
+// nested menu items toggle
+function nestedMenuItems() {
+  return document.querySelectorAll('#tabs .has_nested')
+}
+
+// add event listeners
+function addListeners() {
+
+  // right filter sidebar toggle
+  if (sidebar()) {
+    sidebar().addEventListener('click', sidebarToggle)
+  }
+
+  // left menu sidebar toggle with menu button
+  if (menuButton()) {
+    menuButton().addEventListener('click', menuToggle)
+  }
+
+  // left menu sidebar close on any click outside
+  document.body.addEventListener('click', menuClose)
 
-  // toggle of nested menu items
-  const nestedMenuItems = document.querySelectorAll('#tabs .has_nested')
-  nestedMenuItems.forEach(
+  // nested menu items toggle
+  nestedMenuItems().forEach(
     (nestedMenuItem) => {
       nestedMenuItem.addEventListener('click', (e) => {
         e.stopPropagation()
         nestedMenuItem.classList.toggle('open')
       })
     }
   )
+}
+
+// remove all previous eventListeners
+function removeListeners() {
+
+  // right filter sidebar toggle
+  if (sidebar()) {
+    sidebar().removeEventListener('click', sidebarToggle)
+  }
+
+  // left menu sidebar toggle with menu button
+  menuButton().removeEventListener('click', menuToggle)
+
+  // left menu sidebar close on any click outside
+  document.body.removeEventListener('click', menuClose)
+
+  // nested menu items toggle
+  nestedMenuItems().forEach(
+    (nestedMenuItem) => {
+      nestedMenuItem.removeEventListener('click', (e) => {
+        e.stopPropagation()
+        nestedMenuItem.classList.toggle('open')
+      })
+    }
+  )
+}
+
+document.addEventListener('DOMContentLoaded', addListeners)
 
+document.addEventListener('turbolinks:load', () => {
+  removeListeners()
+  addListeners()
 })