arctic_admin - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

app/assets/javascripts/arctic_admin/main.js

@@ -1,44 +0,66 @@
-document.addEventListener('DOMContentLoaded', () => {
+// right filter sidebar toggle
+function sidebar() {
+  return document.querySelector('#sidebar')
+}
+function sidebarToggle(event) {
+  const insideSection = document.querySelector('#filters_sidebar_section')
 
-  // 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')
-      }
-    })
+  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')
+// 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')
+  }
+}
 
-  // 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')
-    }
-  })
+// 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')
+  }
+}
 
-  // 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')
-    }
-  })
+// nested menu items toggle
+function nestedMenuItems() {
+  return document.querySelectorAll('#tabs .has_nested')
+}
 
-  // toggle of nested menu items
-  const nestedMenuItems = document.querySelectorAll('#tabs .has_nested')
-  nestedMenuItems.forEach(
+// 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)
+
+  // nested menu items toggle
+  nestedMenuItems().forEach(
     (nestedMenuItem) => {
@@ -51,3 +73,34 @@ nestedMenuItem.addEventListener('click', (e) => {
   )
+}
 
+// 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()
 })

package.json

 {
   "name": "arctic_admin",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Responsive Theme for ActiveAdmin",
@@ -5,0 +5,0 @@ "main": "app/assets/javascripts/arctic_admin/main.js",

src/main.js

@@ -1,44 +0,66 @@
-document.addEventListener('DOMContentLoaded', () => {
+// right filter sidebar toggle
+function sidebar() {
+  return document.querySelector('#sidebar')
+}
+function sidebarToggle(event) {
+  const insideSection = document.querySelector('#filters_sidebar_section')
 
-  // 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')
-      }
-    })
+  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')
+// 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')
+  }
+}
 
-  // 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')
-    }
-  })
+// 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')
+  }
+}
 
-  // 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')
-    }
-  })
+// nested menu items toggle
+function nestedMenuItems() {
+  return document.querySelectorAll('#tabs .has_nested')
+}
 
-  // toggle of nested menu items
-  const nestedMenuItems = document.querySelectorAll('#tabs .has_nested')
-  nestedMenuItems.forEach(
+// 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)
+
+  // nested menu items toggle
+  nestedMenuItems().forEach(
     (nestedMenuItem) => {
@@ -51,3 +73,34 @@ nestedMenuItem.addEventListener('click', (e) => {
   )
+}
 
+// 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()
 })

No alert changes

Improved metrics

Total package byte prevSize

5590984

0.08%

Number of package files

64

3.23%

Lines of code

182

89.58%

No dependency changes