[4.0] metismenu upgrade to 1.1.0 (#26275)

joomla · Sep 25, 2019 · dcb689d · dcb689d
1 parent d488384
commit dcb689d
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 29 deletions.
diff --git a/administrator/modules/mod_menu/tmpl/default_submenu.php b/administrator/modules/mod_menu/tmpl/default_submenu.php
@@ -182,11 +182,11 @@
 	{
 		$id = $current->get('id') ? ' id="menu-' . strtolower($current->get('id')) . '"' : '';
 
-		echo '<ul' . $id . ' class="collapse collapse-level-' . $current->level . '">' . "\n";
+		echo '<ul' . $id . ' class="mm-collapse collapse-level-' . $current->level . '">' . "\n";
 	}
 	else
 	{
-		echo '<ul id="collapse' . $this->getCounter() . '" class="collapse-level-1 collapse">' . "\n";
+		echo '<ul id="collapse' . $this->getCounter() . '" class="collapse-level-1 mm-collapse">' . "\n";
 	}
 
 	// WARNING: Do not use direct 'include' or 'require' as it is important to isolate the scope for each call

diff --git a/administrator/templates/atum/scss/blocks/_sidebar.scss b/administrator/templates/atum/scss/blocks/_sidebar.scss
@@ -164,7 +164,7 @@
         }
 
         &:hover,
-        &.active {
+        &.mm-active {
           background-color: var(--atum-bg-dark-70);
 
           .fa {
@@ -182,7 +182,7 @@
     li {
       .menu-dashboard, .menu-quicktask {
         > a {
-          &.active {
+          &.mm-active {
             background-color: var(--atum-bg-dark-80);
             &::before {
               display: none;
@@ -247,7 +247,7 @@
       }
     }
 
-    &.active {
+    &.mm-active {
       box-shadow: 0 0 6px -6px rgba(0, 0, 0, .8)
     }
   }
@@ -262,7 +262,7 @@
       position: relative;
       display: flex;
 
-      &.active {
+      &.mm-active {
         box-shadow: 0 0 6px -6px rgba(0, 0, 0, .8)
       }
 
@@ -279,7 +279,7 @@
         background-color: rgba(0, 0, 0, .4);
       }
 
-      &.active {
+      &.mm-active {
         color: $white;
         background-color: var(--atum-bg-dark-80);
 
@@ -302,7 +302,7 @@
       a {
         padding-left: 3rem;
 
-        &.active {
+        &.mm-active {
           color: $white;
           background-color: var(--atum-bg-dark-90);
           box-shadow: 0 1px 4px -1px rgba(0, 0, 0, .5);
@@ -360,15 +360,16 @@
      padding: 0 0.4rem 0;
   }
 
-  .collapse {
+  .mm-collapse {
     display: none;
 
-    &.in {
+    &.mm-collapsed,
+    &.mm-show {
       display: block;
     }
   }
 
-  .collapsing {
+  .mm-collapsing {
     position: relative;
     height: 0;
     overflow: hidden;
@@ -391,7 +392,7 @@
     transition: all .3s ease-out;
   }
 
-  .active {
+  .mm-active {
 
     > .has-arrow::after {
       filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
@@ -497,7 +498,7 @@
       }
     }
 
-    &.collapsed {
+    &.mm-collapsed {
       .navbar-toggler-icon::before {
         content: "\f0c9";
       }
@@ -533,7 +534,7 @@
 
   #sidebar-wrapper {
     &:not(.show) {
-      &:not(.collapse) {
+      &:not(.mm-collapse) {
         display: none;
       }
     }

diff --git a/build/media_source/mod_menu/js/admin-menu.es6.js b/build/media_source/mod_menu/js/admin-menu.es6.js
@@ -97,7 +97,7 @@
     });
 
     const menuClose = () => {
-      sidebar.querySelector('.collapse').classList.remove('in');
+      sidebar.querySelector('.mm-collapse').classList.remove('mm-collapsed');
     };
 
     // Toggle menu
@@ -145,15 +145,16 @@
     allLinks.forEach((link) => {
       if (currentUrl === link.href) {
         link.setAttribute('aria-current', 'page');
-        link.classList.add('active');
+        link.classList.add('mm-active');
+
         // Auto Expand Levels
         if (!link.parentNode.classList.contains('parent')) {
           const firstLevel = closest(link, '.collapse-level-1');
           const secondLevel = closest(link, '.collapse-level-2');
-          if (firstLevel) firstLevel.parentNode.classList.add('active');
-          if (firstLevel) firstLevel.classList.add('in');
-          if (secondLevel) secondLevel.parentNode.classList.add('active');
-          if (secondLevel) secondLevel.classList.add('in');
+          if (firstLevel) firstLevel.parentNode.classList.add('mm-active');
+          if (firstLevel) firstLevel.classList.add('mm-collapsed');
+          if (secondLevel) secondLevel.parentNode.classList.add('mm-active');
+          if (secondLevel) secondLevel.classList.add('mm-collapsed');
         }
       }
     });

diff --git a/build/media_source/templates/atum/js/template.es6.js b/build/media_source/templates/atum/js/template.es6.js
@@ -267,11 +267,11 @@
     }
 
     if (smallLandscape.matches) {
-      if (sidebarNav) sidebarNav.classList.add('collapse');
-      if (subhead) subhead.classList.add('collapse');
+      if (sidebarNav) sidebarNav.classList.add('mm-collapse');
+      if (subhead) subhead.classList.add('mm-collapse');
     } else {
-      if (sidebarNav) sidebarNav.classList.remove('collapse');
-      if (subhead) subhead.classList.remove('collapse');
+      if (sidebarNav) sidebarNav.classList.remove('mm-collapse');
+      if (subhead) subhead.classList.remove('mm-collapse');
     }
   }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,11 +43,11 @@
     "jquery": "^3.4",
     "jquery-migrate": "^3.1.0",
     "mediaelement": "4.2.8",
-    "metismenujs": "^1.0.3",
+    "metismenujs": "^1.1.0",
     "popper.js": "^1.15.0",
     "punycode": "1.4.1",
-    "roboto-fontface": "^0.10.0",
     "qrcode-generator": "^1.4.3",
+    "roboto-fontface": "^0.10.0",
     "skipto": "^2.0.4",
     "tinymce": "5.0.14"
   },