Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
12f15267 by Jeff Balicki
Options

mobile menu working 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 05bdb5e2
Inline Side-by-side
Showing 14 changed files with 1313 additions and 299 deletions
...@@ -14985,127 +14985,237 @@ body { ...@@ -14985,127 +14985,237 @@ body {
14985 font-family: "PT Sans", sans-serif; 14985 font-family: "PT Sans", sans-serif;
14986 } 14986 }
14987 14987
14988 #mega-menu-wrap-primary { 14988 @media only screen and (min-width: 1000px) {
14989 width: 100%; 14989 #mega-menu-wrap-primary {
14990 } 14990 width: 100%;
14991 14991 }
14992 #mega-menu-primary { 14992 #mega-menu-primary {
14993 width: 100%; 14993 width: 100%;
14994 display: flex !important; 14994 display: flex !important;
14995 flex-direction: row; 14995 flex-direction: row;
14996 flex-wrap: wrap; 14996 flex-wrap: wrap;
14997 justify-content: space-between; 14997 justify-content: space-between;
14998 } 14998 }
14999 14999 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
15000 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item { 15000 width: 24%;
15001 width: 24%; 15001 color: #fff;
15002 color: #fff; 15002 background-color: #EE0000;
15003 background-color: #EE0000; 15003 border-radius: 1.25rem;
15004 border-radius: 1.25rem; 15004 text-align: center;
15005 text-align: center; 15005 height: 2.5rem;
15006 height: 2.5rem; 15006 margin-top: 0rem;
15007 margin-top: 0rem; 15007 font-size: 18px;
15008 font-size: 18px; 15008 position: relative;
15009 position: relative; 15009 font-family: "PT Sans", sans-serif;
15010 font-family: "PT Sans", sans-serif; 15010 }
15011 } 15011 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
15012 15012 width: 100%;
15013 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { 15013 text-align: center;
15014 width: 100%; 15014 font-family: "PT Sans", sans-serif;
15015 text-align: center; 15015 font-size: 18px;
15016 font-family: "PT Sans", sans-serif; 15016 height: 2.5rem;
15017 font-size: 18px; 15017 }
15018 height: 2.5rem; 15018 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-item-has-children > a.mega-menu-link:before {
15019 } 15019 content: "";
15020 15020 width: 13px;
15021 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-item-has-children > a.mega-menu-link:before { 15021 height: 0.4831rem;
15022 content: ""; 15022 position: absolute;
15023 width: 13px; 15023 background-size: contain;
15024 height: 0.4831rem; 15024 background-repeat: no-repeat;
15025 position: absolute; 15025 margin-left: -30px;
15026 background-size: contain; 15026 margin-top: 15px;
15027 background-repeat: no-repeat; 15027 display: inline-block;
15028 margin-left: -30px; 15028 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.742" height="7.726" viewBox="0 0 12.742 7.726"><path id="Path_1491" data-name="Path 1491" d="M6.383,4.709c.442-.447.875-.89,1.313-1.328Q9.274,1.8,10.855.231a.708.708,0,0,1,1.047,0c.2.206.405.407.608.61a.694.694,0,0,1,0,1.038L9.667,4.721,6.913,7.48a.768.768,0,0,1-.515.246.734.734,0,0,1-.567-.245Q4.769,6.415,3.706,5.349L.812,2.454c-.2-.2-.395-.393-.591-.591A.69.69,0,0,1,.228.844l.6-.6a.708.708,0,0,1,1.062,0L4.456,2.792,6.311,4.64Z" transform="translate(0 0)" fill="%23fff"/></svg>');
15029 margin-top: 15px; 15029 }
15030 display: inline-block; 15030 .mega-indicator {
15031 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.742" height="7.726" viewBox="0 0 12.742 7.726"><path id="Path_1491" data-name="Path 1491" d="M6.383,4.709c.442-.447.875-.89,1.313-1.328Q9.274,1.8,10.855.231a.708.708,0,0,1,1.047,0c.2.206.405.407.608.61a.694.694,0,0,1,0,1.038L9.667,4.721,6.913,7.48a.768.768,0,0,1-.515.246.734.734,0,0,1-.567-.245Q4.769,6.415,3.706,5.349L.812,2.454c-.2-.2-.395-.393-.591-.591A.69.69,0,0,1,.228.844l.6-.6a.708.708,0,0,1,1.062,0L4.456,2.792,6.311,4.64Z" transform="translate(0 0)" fill="%23fff"/></svg>'); 15031 display: none !important;
15032 } 15032 }
15033 15033 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
15034 .mega-indicator { 15034 background-color: #669999;
15035 display: none !important; 15035 border-radius: 1.25rem 1.25rem 0rem 0rem;
15036 } 15036 height: 3.75rem;
15037 15037 margin-top: 0rem;
15038 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { 15038 margin-bottom: -1.25rem;
15039 background-color: #669999; 15039 }
15040 border-radius: 1.25rem 1.25rem 0rem 0rem; 15040 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
15041 height: 3.75rem; 15041 margin-top: 17px;
15042 margin-top: 0rem; 15042 padding: 20px 28px 20px 20px;
15043 margin-bottom: -1.25rem; 15043 background-color: #f0f0f0;
15044 } 15044 border-radius: 0rem 0rem 1.25rem 1.25rem;
15045 15045 }
15046 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { 15046 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:nth-child(2) > ul.mega-sub-menu {
15047 margin-top: 17px; 15047 left: unset !important;
15048 padding: 20px 28px 20px 20px; 15048 }
15049 background-color: #f0f0f0; 15049 .mega-sub-menu:has(.mega-menu-columns-4-of-12) {
15050 border-radius: 0rem 0rem 1.25rem 1.25rem; 15050 width: 75% !important;
15051 } 15051 }
15052 15052 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:nth-child(4) > ul.mega-sub-menu {
15053 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:nth-child(2) > ul.mega-sub-menu { 15053 left: unset !important;
15054 left: unset !important; 15054 right: 0px !important;
15055 } 15055 }
15056 15056 .mega-menu-row .mega-sub-menu,
15057 .mega-sub-menu:has(.mega-menu-columns-4-of-12) { 15057 .mega-menu-column .mega-sub-menu {
15058 width: 75% !important; 15058 width: 100% !important;
15059 } 15059 }
15060 15060 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
15061 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:nth-child(4) > ul.mega-sub-menu { 15061 margin: 0;
15062 left: unset !important; 15062 padding: 0px 15px 18px 10px;
15063 right: 0px !important; 15063 }
15064 } 15064 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
15065 15065 margin: 0;
15066 .mega-menu-row .mega-sub-menu, 15066 color: #000;
15067 .mega-menu-column .mega-sub-menu { 15067 text-decoration: none;
15068 width: 100% !important; 15068 white-space: break-spaces;
15069 } 15069 font-size: 18px;
15070 15070 font-weight: 400;
15071 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item { 15071 font-family: "PT Sans", sans-serif;
15072 margin: 0; 15072 font-weight: bold;
15073 padding: 0px 15px 18px 10px; 15073 }
15074 } 15074 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover .mega-menu-title {
15075 15075 text-decoration: underline;
15076 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link { 15076 font-weight: bold;
15077 margin: 0; 15077 color: #000;
15078 color: #000; 15078 }
15079 text-decoration: none; 15079 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover .mega-menu-description {
15080 white-space: break-spaces; 15080 color: #000;
15081 font-size: 18px; 15081 }
15082 font-weight: 400; 15082 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.break-here > a.mega-menu-link {
15083 font-family: "PT Sans", sans-serif; 15083 font-size: 20px;
15084 font-weight: bold; 15084 font-family: "PT Sans", sans-serif;
15085 } 15085 }
15086 15086 #mega-menu-wrap-primary #mega-menu-primary a.mega-menu-link .mega-description-group .mega-menu-description {
15087 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover .mega-menu-title { 15087 font-style: normal;
15088 text-decoration: underline; 15088 font-size: 16px;
15089 font-weight: bold; 15089 line-height: 20px;
15090 color: #000; 15090 font-family: "PT Sans", sans-serif;
15091 } 15091 }
15092 15092 .list-wrapper2,
15093 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover .mega-menu-description { 15093 .list-wrapper3 {
15094 color: #000; 15094 display: none;
15095 }
15095 } 15096 }
15096 15097 @media only screen and (max-width: 1000px) {
15097 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item.break-here > a.mega-menu-link { 15098 #mega-menu-primary {
15098 font-size: 20px; 15099 margin-top: 60px !important;
15099 font-family: "PT Sans", sans-serif; 15100 padding-top: 20px !important;
15101 padding-bottom: 100px !important;
15102 overflow-x: scroll !important;
15103 height: calc(100vh - 80px) !important;
15104 }
15105 #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open:after {
15106 display: none !important;
15107 }
15108 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
15109 width: 100%;
15110 max-width: 100%;
15111 padding: 0px 10%;
15112 margin: auto;
15113 }
15114 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
15115 left: -100%;
15116 }
15117 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu {
15118 margin-top: 0px;
15119 }
15120 .sub-mobile-menu .mega-menu-item {
15121 margin-top: 15px !important;
15122 }
15123 .sub-mobile-menu .mega-indicator {
15124 margin-top: -50px !important;
15125 position: relative !important;
15126 margin-right: 0px !important;
15127 width: 30px !important;
15128 }
15129 .sub-mobile-menu .mega-indicator:after {
15130 margin-right: 0px !important;
15131 }
15132 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
15133 margin-left: 20px;
15134 color: #555;
15135 font-family: inherit;
15136 font-size: 14px;
15137 text-transform: uppercase;
15138 text-decoration: none;
15139 font-weight: bold;
15140 text-align: left;
15141 vertical-align: top;
15142 display: block;
15143 border: 0;
15144 }
15145 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
15146 width: 100%;
15147 margin: 10px auto 0px auto;
15148 color: #fff;
15149 background-color: #EE0000;
15150 border-radius: 1.25rem;
15151 text-align: center;
15152 height: 2.5rem;
15153 margin-top: 0rem;
15154 font-size: 18px;
15155 position: relative;
15156 font-family: "PT Sans", sans-serif;
15157 }
15158 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
15159 width: 100%;
15160 margin: 10px auto 0px auto !important;
15161 color: #fff;
15162 background-color: #EE0000;
15163 border-radius: 1.25rem;
15164 text-align: center !important;
15165 height: 2.5rem;
15166 font-size: 18px;
15167 position: relative;
15168 font-family: "PT Sans", sans-serif;
15169 }
15170 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
15171 width: 100%;
15172 margin: 10px auto 0px auto !important;
15173 color: #fff;
15174 background-color: #EE0000;
15175 border-radius: 1.25rem;
15176 text-align: center !important;
15177 height: 2.5rem;
15178 font-size: 18px;
15179 position: relative;
15180 font-family: "PT Sans", sans-serif;
15181 }
15182 .sub-menu-wrapper {
15183 background-color: #fff;
15184 width: 100% !important;
15185 padding: 0px 10% !important;
15186 margin: auto !important;
15187 float: none !important;
15188 }
15100 } 15189 }
15101 15190 @media only screen and (max-width: 1000px) {
15102 #mega-menu-wrap-primary #mega-menu-primary a.mega-menu-link .mega-description-group .mega-menu-description { 15191 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu, #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu.mega-menu-item.mega-toggle-on ul.mega-sub-menu {
15103 font-style: normal; 15192 display: none !important;
15104 font-size: 16px; 15193 }
15105 line-height: 20px; 15194 .list-wrapper2 ul.mega-sub-menu,
15106 font-family: "PT Sans", sans-serif; 15195 .list-wrapper3 ul.mega-sub-menu {
15196 display: block !important;
15197 }
15198 .list-wrapper2,
15199 .list-wrapper3 {
15200 position: absolute !important;
15201 top: 0 !important;
15202 left: 0 !important;
15203 right: 0 !important;
15204 height: 100vh !important;
15205 transform: translateX(100%) !important;
15206 -webkit-backface-visibility: hidden !important;
15207 backface-visibility: hidden !important;
15208 transition: transform 0.5s !important;
15209 background-color: #fff !important;
15210 }
15211 .list-wrapper2.is-visible,
15212 .list-wrapper3.is-visible {
15213 transform: none !important;
15214 }
15215 .mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu {
15216 display: none;
15217 }
15107 } 15218 }
15108
15109 .site-title { 15219 .site-title {
15110 font-size: 2.1875rem; 15220 font-size: 2.1875rem;
15111 line-height: 3.125rem; 15221 line-height: 3.125rem;
...@@ -15137,6 +15247,17 @@ body { ...@@ -15137,6 +15247,17 @@ body {
15137 margin-bottom: 10px; 15247 margin-bottom: 10px;
15138 } 15248 }
15139 15249
15250 @media only screen and (max-width: 1000px) {
15251 .branding {
15252 margin-top: 0px;
15253 }
15254 .site-title {
15255 font-size: 20px;
15256 }
15257 .navbar-brand {
15258 width: 100px;
15259 }
15260 }
15140 #search-wrapper { 15261 #search-wrapper {
15141 margin-top: 1rem; 15262 margin-top: 1rem;
15142 padding-top: 3rem; 15263 padding-top: 3rem;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -103,4 +103,11 @@ function megamenu_override_default_theme($value) { ...@@ -103,4 +103,11 @@ function megamenu_override_default_theme($value) {
103 return $value; 103 return $value;
104 } 104 }
105 add_filter('default_option_megamenu_settings', 'megamenu_override_default_theme'); 105 add_filter('default_option_megamenu_settings', 'megamenu_override_default_theme');
106
...\ No newline at end of file ...\ No newline at end of file
106
107 function fixUlisting() {
108 wp_deregister_script( 'megamenu' );
109 wp_dequeue_script( 'megamenu' );
110
111 wp_enqueue_script( 'megamenu', get_stylesheet_directory_uri().'/js/maxmegamenu.js' );
112 }
113 add_action( 'wp_enqueue_scripts', 'fixUlisting', 100 );
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
4 * Licensed under GPL-3.0 (undefined) 4 * Licensed under GPL-3.0 (undefined)
5 */ 5 */
6 (function (global, factory) { 6 (function (global, factory) {
7 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery')) : 7 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
8 typeof define === 'function' && define.amd ? define(['exports', 'jquery'], factory) : 8 typeof define === 'function' && define.amd ? define(['exports'], factory) :
9 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.understrap = {}, global.jQuery)); 9 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.understrap = {}));
10 })(this, (function (exports, jquery) { 'use strict'; 10 })(this, (function (exports) { 'use strict';
11 11
12 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; 12 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
13 13
...@@ -6743,183 +6743,78 @@ ...@@ -6743,183 +6743,78 @@
6743 } 6743 }
6744 })(); 6744 })();
6745 6745
6746 var Responsive = function ($) { 6746 // Add your custom JS here.
6747 // $('.play-pause-btn').on('click', function() { 6747
6748 // if(!this.isDesktop()) { 6748 //import "./_header_menu";
6749 // $(this).hide(); 6749
6750 // $(this).parents('.swiper-wrapper').find('.header-video').trigger('play'); 6750 var addstuff = '<div class="list-wrapper2 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div><div class="list-wrapper3 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div>';
6751 // } 6751 const pageHeader = document.querySelector("#main-nav");
6752 // }); 6752 const toggleMenu = pageHeader.querySelector(".mega-toggle-block");
6753 6753 const menuWrapper = pageHeader.querySelector("#mega-menu-primary");
6754 var desk = window.matchMedia("(min-width: 1150px)"); 6754 menuWrapper.innerHTML = menuWrapper.innerHTML + addstuff;
6755 function isDesktop() { 6755 const level1Links = pageHeader.querySelectorAll("li.mega-menu-item-has-children > a.mega-menu-link");
6756 return desk.matches; 6756 const listWrapper2 = pageHeader.querySelector(".list-wrapper2");
6757 } 6757 const listWrapper3 = pageHeader.querySelector(".list-wrapper3");
6758 function toggleMobileMenu() { 6758 const subMenuWrapper2 = listWrapper2.querySelector(".sub-menu-wrapper");
6759 $('#navbarNavDropdown').toggleClass('show'); 6759 const subMenuWrapper3 = listWrapper3.querySelector(".sub-menu-wrapper");
6760 $('.navbar-toggler').toggleClass('active'); 6760 const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
6761 if ($('#navbarNavDropdown').hasClass('show')) { 6761 const isVisibleClass = "is-visible";
6762 $('body').addClass('locked'); 6762 const isActiveClass = "is-active";
6763 } else { 6763 toggleMenu.addEventListener("click", function () {
6764 $('body').removeClass('locked'); 6764 menuWrapper.classList.toggle(isVisibleClass);
6765 if (!this.classList.contains(isVisibleClass)) {
6766 listWrapper2.classList.remove(isVisibleClass);
6767 listWrapper3.classList.remove(isVisibleClass);
6768 const menuLinks = menuWrapper.querySelectorAll("a");
6769 for (const menuLink of menuLinks) {
6770 menuLink.classList.remove(isActiveClass);
6765 } 6771 }
6766 } 6772 }
6767 $(document).on('click', '.navbar-toggler', function () { 6773 });
6768 toggleMobileMenu(); 6774 for (const level1Link of level1Links) {
6769 }); 6775 level1Link.addEventListener("click", function (e) {
6770 $.fn.classChange = function (cb) { 6776 const siblingList = level1Link.nextElementSibling;
6771 return $(this).each((_, el) => { 6777 console.log('clicked level1Links');
6772 new MutationObserver(mutations => { 6778 if (siblingList) {
6773 mutations.forEach(mutation => cb && cb(mutation.target, $(mutation.target).prop(mutation.attributeName))); 6779 e.preventDefault();
6774 }).observe(el, { 6780 this.classList.add(isActiveClass);
6775 attributes: true, 6781 const cloneSiblingList = siblingList.cloneNode(true);
6776 attributeFilter: ['class'] // only listen for class attribute changes 6782 subMenuWrapper2.innerHTML = "";
6777 }); 6783 subMenuWrapper2.append(cloneSiblingList);
6778 }); 6784 listWrapper2.classList.add(isVisibleClass);
6779 };
6780
6781 function init() {
6782 $('body').classChange(function (el, new_class) {
6783 if (new_class.indexOf('pojo-a11y-resize-font-130') !== -1) {
6784 setTimeout(function () {
6785 $(window).trigger('resize');
6786 }, 500);
6787 }
6788 });
6789 function putBackMenuItemsToLastIndex() {
6790 $('.mi-image-container').each(function () {
6791 var item = $(this).parentsUntil('.menu-item');
6792 var last_idx = $(item).data('last-idx');
6793 var cur_idx = $(item).index();
6794 console.log(last_idx + " " + cur_idx);
6795 if (last_idx != cur_idx) {
6796 var item = $(this).parents('.menu-item')[0];
6797 var dropdown = $(this).parents('.dropdown-menu');
6798 $(dropdown).children().eq(last_idx).before(item);
6799 }
6800 });
6801 }
6802 function makeImageMenuItemsLastItems() {
6803 $('.mi-image-container').each(function () {
6804 var item = $(this).parents('.menu-item')[0];
6805 if (last_idx != 1) {
6806 var dropdown = $(this).parents('.dropdown-menu');
6807 var last_idx = $(dropdown).find('li').index(item);
6808 $(item).data('last-idx', last_idx);
6809 $(dropdown).append(item);
6810 }
6811 });
6812 }
6813 function setupDropdownMenuHeights() {
6814 $('.dropdown-menu').each(function () {
6815 $(this).css('height', $(this).height() + 5);
6816 $(this).addClass('ready');
6817 });
6818 }
6819 function makeMobileCarousels() {
6820 LegacyCalc.mobilize();
6821 ImageCollage.mobilize();
6822 }
6823 function demobilize() {
6824 $('.donate.menu-item').append($('#main-nav .donate-btn'));
6825 $('.navbar-toggler').after($('#navbarNavDropdown'));
6826 $('.news-and-stories-block').each(function () {
6827 var btn = $(this).find('.post-list-load-more');
6828 $(this).append(btn);
6829 });
6830 // HeaderMenu.alignTheSideCaptions();
6831 putBackMenuItemsToLastIndex();
6832 // demobilizeJobIframes();
6833
6834 if ($('.menu-item-11505').length > 0) {
6835 $('.menu-item-11503').parents('.dropdown-menu').find('li:last-of-type').before($('.menu-item-11503'));
6836 $('.menu-item-11505').parents('.dropdown-menu').find('li:last-of-type').before($('.menu-item-11505'));
6837 }
6838 if ($('.menu-item-15438').length > 0) {
6839 $('.menu-item-15438').parents('.dropdown-menu').find('li:last-of-type').before($('.menu-item-15438'));
6840 $('.menu-item-15442').parents('.dropdown-menu').find('li:last-of-type').before($('.menu-item-15442'));
6841 }
6842 }
6843 function mobilize() {
6844 var donate_btn = $('#main-menu .donate > a');
6845 if (!$(donate_btn).hasClass('donate-btn')) {
6846 $(donate_btn).addClass('donate-btn');
6847 }
6848 $('#main-nav .container').append(donate_btn);
6849 $('#wrapper-navbar').append($('#navbarNavDropdown'));
6850 $('.news-and-stories-block').each(function () {
6851 var btn = $(this).find('.post-list-load-more');
6852 $(this).prepend(btn);
6853 });
6854 // HeaderMenu.alignTheSideCaptions();
6855 makeMobileCarousels();
6856 makeImageMenuItemsLastItems();
6857 setupDropdownMenuHeights();
6858 if ($('.menu-item-11505').length > 0) {
6859 $('.menu-item-11505').parents('.dropdown-menu').prepend($('.menu-item-11505'));
6860 $('.menu-item-11503').parents('.dropdown-menu').prepend($('.menu-item-11503'));
6861 }
6862 if ($('.menu-item-15438').length > 0) {
6863 $('.menu-item-15442').parents('.dropdown-menu').prepend($('.menu-item-15442'));
6864 $('.menu-item-15438').parents('.dropdown-menu').prepend($('.menu-item-15438'));
6865 }
6866 }
6867 desk.addEventListener('change', event => {
6868 if (event.matches) {
6869 demobilize();
6870 } else {
6871 mobilize();
6872 }
6873 });
6874 if (desk.matches) ; else {
6875 mobilize();
6876 }
6877 }
6878 return {
6879 init: init,
6880 isDesktop: isDesktop
6881 };
6882 }(jquery);
6883 jquery(document).ready(Responsive.init);
6884
6885 var HeaderMenu = function () {
6886 return {
6887 alignTheSideCaptions: function () {
6888 jQuery('.side-caption').each(function () {
6889 var that = this;
6890 var _bottom = jQuery(this).find('.image-side-caption').innerHeight();
6891 if (!Responsive.isDesktop()) {
6892 if (jQuery(that).parent().is('.entry-header') && !jQuery(that).parent().is('.no-photo')) {
6893 jQuery(that).css('margin-bottom', -_bottom);
6894 var _bottom = jQuery(that).parent().find('.title-container').innerHeight();
6895 jQuery(that).css('bottom', _bottom);
6896 setTimeout(function () {
6897 jQuery(that).addClass('ready');
6898 }, 500);
6899 } else {
6900 jQuery(that).css('bottom', -_bottom);
6901 setTimeout(function () {
6902 jQuery(that).addClass('ready');
6903 }, 500);
6904 }
6905 } else {
6906 jQuery(this).css('bottom', -_bottom);
6907 setTimeout(function () {
6908 jQuery(that).addClass('ready');
6909 }, 500);
6910 }
6911 });
6912 } 6785 }
6913 };
6914 }();
6915 jQuery(function ($) {
6916 setInterval(function () {
6917 HeaderMenu.alignTheSideCaptions();
6918 }, 1000);
6919 $('.copy-link').on('click', function (e) {
6920 e.preventDefault();
6921 }); 6786 });
6787 }
6788 listWrapper2.addEventListener("click", function (e) {
6789 const target = e.target;
6790 const parent = target.closest("a");
6791 if (target.tagName.toLowerCase() === "a" && target.nextElementSibling) {
6792 const siblingList = target.nextElementSibling;
6793 e.preventDefault();
6794 target.classList.add(isActiveClass);
6795 const cloneSiblingList = siblingList.cloneNode(true);
6796 subMenuWrapper3.innerHTML = "";
6797 subMenuWrapper3.append(cloneSiblingList);
6798 listWrapper3.classList.add(isVisibleClass);
6799 } else if (parent.tagName.toLowerCase() === "a" && parent.nextElementSibling) {
6800 const siblingList = parent.nextElementSibling;
6801 e.preventDefault();
6802 parent.classList.add(isActiveClass);
6803 const cloneSiblingList = siblingList.cloneNode(true);
6804 subMenuWrapper3.innerHTML = "";
6805 subMenuWrapper3.append(cloneSiblingList);
6806 listWrapper3.classList.add(isVisibleClass);
6807 }
6922 }); 6808 });
6809 for (const backOneLevelBtn of backOneLevelBtns) {
6810 backOneLevelBtn.addEventListener("click", function () {
6811 const parent = this.closest(".list-wrapper");
6812 parent.classList.remove(isVisibleClass);
6813 // parent.previousElementSibling
6814 // .querySelector(".is-active")
6815 // .classList.remove(isActiveClass);
6816 });
6817 }
6923 6818
6924 exports.Alert = alert; 6819 exports.Alert = alert;
6925 exports.Button = button; 6820 exports.Button = button;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
1 /*jslint browser: true, white: true, this: true, long: true */
2 /*global console,jQuery,megamenu,window,navigator*/
3
4 /*! Max Mega Menu jQuery Plugin */
5 (function ( $ ) {
6 "use strict";
7
8 $.maxmegamenu = function(menu, options) {
9 var plugin = this;
10 var $menu = $(menu);
11 var $toggle_bar = $menu.siblings(".mega-menu-toggle");
12 var html_body_class_timeout;
13
14 var defaults = {
15 event: $menu.attr("data-event"),
16 effect: $menu.attr("data-effect"),
17 effect_speed: parseInt($menu.attr("data-effect-speed")),
18 effect_mobile: $menu.attr("data-effect-mobile"),
19 effect_speed_mobile: parseInt($menu.attr("data-effect-speed-mobile")),
20 panel_width: $menu.attr("data-panel-width"),
21 panel_inner_width: $menu.attr("data-panel-inner-width"),
22 mobile_force_width: $menu.attr("data-mobile-force-width"),
23 mobile_overlay: $menu.attr("data-mobile-overlay"),
24 mobile_state: $menu.attr("data-mobile-state"),
25 second_click: $menu.attr("data-second-click"),
26 vertical_behaviour: $menu.attr("data-vertical-behaviour"),
27 document_click: $menu.attr("data-document-click"),
28 breakpoint: $menu.attr("data-breakpoint"),
29 unbind_events: $menu.attr("data-unbind"),
30 hover_intent_timeout: $menu.attr("data-hover-intent-timeout"),
31 hover_intent_interval: $menu.attr("data-hover-intent-interval")
32 };
33
34 plugin.settings = {};
35
36 var items_with_submenus = $("li.mega-menu-megamenu.mega-menu-item-has-children," +
37 "li.mega-menu-flyout.mega-menu-item-has-children," +
38 "li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item-has-children," +
39 "li.mega-menu-flyout li.mega-menu-item-has-children", menu);
40
41 var collapse_children_parents = $("li.mega-menu-megamenu li.mega-menu-item-has-children.mega-collapse-children > a.mega-menu-link", menu);
42
43 plugin.addAnimatingClass = function(element) {
44 if (plugin.settings.effect === "disabled") {
45 return;
46 }
47
48 $(".mega-animating").removeClass("mega-animating");
49
50 var timeout = plugin.settings.effect_speed + parseInt(megamenu.timeout, 10);
51
52 element.addClass("mega-animating");
53
54 setTimeout(function() {
55 element.removeClass("mega-animating");
56 }, timeout );
57 };
58
59 plugin.hideAllPanels = function() {
60 $(".mega-toggle-on > a.mega-menu-link", $menu).each(function() {
61 plugin.hidePanel($(this), false);
62 });
63 };
64
65 plugin.expandMobileSubMenus = function() {
66 $(".mega-menu-item-has-children.mega-expand-on-mobile > a.mega-menu-link", $menu).each(function() {
67 plugin.showPanel($(this));
68 });
69
70 if ( plugin.settings.mobile_state == 'expand_all' ) {
71 $(".mega-menu-item-has-children > a.mega-menu-link", $menu).each(function() {
72 plugin.showPanel($(this));
73 });
74 }
75
76 if ( plugin.settings.mobile_state == 'expand_active' ) {
77 $("li.mega-current-menu-ancestor.mega-menu-item-has-children > a.mega-menu-link," +
78 "li.mega-current-menu-item.mega-menu-item-has-children > a.mega-menu-link" +
79 "li.mega-current-menu-parent.mega-menu-item-has-children > a.mega-menu-link" +
80 "li.mega-current_page_ancestor.mega-menu-item-has-children > a.mega-menu-link" +
81 "li.mega-current_page_item.mega-menu-item-has-children > a.mega-menu-link", $menu).each(function() {
82 plugin.showPanel($(this));
83 });
84 }
85 }
86
87 plugin.hideSiblingPanels = function(anchor, immediate) {
88 anchor.parent().parent().find(".mega-toggle-on").children("a.mega-menu-link").each(function() { // all open children of open siblings
89 plugin.hidePanel($(this), immediate);
90 });
91 };
92
93 plugin.isDesktopView = function() {
94 return Math.max(window.outerWidth, $(window).width()) > plugin.settings.breakpoint; // account for scrollbars
95 };
96
97 plugin.isMobileView = function() {
98 return !plugin.isDesktopView();
99 };
100
101 plugin.showPanel = function(anchor) {
102 if ( anchor.is("li.mega-menu-item") ) {
103 anchor = anchor.find("a.mega-menu-link").first();
104 }
105
106 anchor.parent().triggerHandler("before_open_panel");
107
108 anchor.parent().find("[aria-expanded]").first().attr("aria-expanded", "true");
109
110 $(".mega-animating").removeClass("mega-animating");
111
112 if (plugin.isMobileView() && anchor.parent().hasClass("mega-hide-sub-menu-on-mobile")) {
113 return;
114 }
115
116 if (plugin.isDesktopView() && ( $menu.hasClass("mega-menu-horizontal") || $menu.hasClass("mega-menu-vertical") ) && !anchor.parent().hasClass("mega-collapse-children")) {
117 plugin.hideSiblingPanels(anchor, true);
118 }
119
120 if ((plugin.isMobileView() && $menu.hasClass("mega-keyboard-navigation")) || plugin.settings.vertical_behaviour === "accordion") {
121 plugin.hideSiblingPanels(anchor, false);
122 }
123
124 plugin.calculateDynamicSubmenuWidths(anchor);
125
126 // apply jQuery transition (only if the effect is set to "slide", other transitions are CSS based)
127 if ( anchor.parent().hasClass("mega-collapse-children") || plugin.settings.effect === "slide" ||
128 ( plugin.isMobileView() && ( plugin.settings.effect_mobile === "slide" || plugin.settings.effect_mobile === "slide_left" || plugin.settings.effect_mobile === "slide_right" ) )
129 ) {
130 var speed = plugin.isMobileView() ? plugin.settings.effect_speed_mobile : plugin.settings.effect_speed;
131
132 anchor.siblings(".mega-sub-menu").css("display", "none").animate({"height":"show", "paddingTop":"show", "paddingBottom":"show", "minHeight":"show"}, speed, function() {
133 $(this).css("display", "");
134 });
135 }
136
137 anchor.parent().addClass("mega-toggle-on").triggerHandler("open_panel");
138 };
139
140 plugin.hidePanel = function(anchor, immediate) {
141 if ( anchor.is("li.mega-menu-item") ) {
142 anchor = anchor.find("a.mega-menu-link").first();
143 }
144
145 anchor.parent().triggerHandler("before_close_panel");
146
147 anchor.parent().find("[aria-expanded]").first().attr("aria-expanded", "false");
148
149 if ( anchor.parent().hasClass("mega-collapse-children") || ( ! immediate && plugin.settings.effect === "slide" ) ||
150 ( plugin.isMobileView() && ( plugin.settings.effect_mobile === "slide" || plugin.settings.effect_mobile === "slide_left" || plugin.settings.effect_mobile === "slide_right" ) )
151 ) {
152 var speed = plugin.isMobileView() ? plugin.settings.effect_speed_mobile : plugin.settings.effect_speed;
153
154 anchor.siblings(".mega-sub-menu").animate({"height":"hide", "paddingTop":"hide", "paddingBottom":"hide", "minHeight":"hide"}, speed, function() {
155 anchor.siblings(".mega-sub-menu").css("display", "");
156 anchor.parent().removeClass("mega-toggle-on").triggerHandler("close_panel");
157 });
158
159 return;
160 }
161
162 if (immediate) {
163 anchor.siblings(".mega-sub-menu").css("display", "none").delay(plugin.settings.effect_speed).queue(function(){
164 $(this).css("display", "").dequeue();
165 });
166 }
167
168 // pause video widget videos
169 anchor.siblings(".mega-sub-menu").find(".widget_media_video video").each(function() {
170 this.player.pause();
171 });
172
173 anchor.parent().removeClass("mega-toggle-on").triggerHandler("close_panel");
174 plugin.addAnimatingClass(anchor.parent());
175 };
176
177 plugin.calculateDynamicSubmenuWidths = function(anchor) {
178 // apply dynamic width and sub menu position (only to top level mega menus)
179 if (anchor.parent().hasClass("mega-menu-megamenu") && anchor.parent().parent().hasClass("max-mega-menu") && plugin.settings.panel_width && $(plugin.settings.panel_width).length > 0) {
180 if (plugin.isDesktopView()) {
181 var submenu_offset = $menu.offset();
182 var target_offset = $(plugin.settings.panel_width).offset();
183
184 anchor.siblings(".mega-sub-menu").css({
185 width: $(plugin.settings.panel_width).outerWidth(),
186 left: (target_offset.left - submenu_offset.left) + "px"
187 });
188 } else {
189 anchor.siblings(".mega-sub-menu").css({
190 width: "",
191 left: ""
192 });
193 }
194 }
195
196 // apply inner width to sub menu by adding padding to the left and right of the mega menu
197 if (anchor.parent().hasClass("mega-menu-megamenu") && anchor.parent().parent().hasClass("max-mega-menu") && plugin.settings.panel_inner_width && $(plugin.settings.panel_inner_width).length > 0) {
198 var target_width = 0;
199
200 if ($(plugin.settings.panel_inner_width).length) {
201 // jQuery selector
202 target_width = parseInt($(plugin.settings.panel_inner_width).width(), 10);
203 } else {
204 // we"re using a pixel width
205 target_width = parseInt(plugin.settings.panel_inner_width, 10);
206 }
207
208 var submenu_width = parseInt(anchor.siblings(".mega-sub-menu").innerWidth(), 10);
209
210 if (plugin.isDesktopView() && target_width > 0 && target_width < submenu_width) {
211 anchor.siblings(".mega-sub-menu").css({
212 "paddingLeft": (submenu_width - target_width) / 2 + "px",
213 "paddingRight": (submenu_width - target_width) / 2 + "px"
214 });
215 } else {
216 anchor.siblings(".mega-sub-menu").css({
217 "paddingLeft": "",
218 "paddingRight": ""
219 });
220 }
221 }
222 };
223
224 plugin.bindClickEvents = function() {
225 var dragging = false;
226
227 $(document).on({
228 "touchmove": function(e) { dragging = true; },
229 "touchstart": function(e) { dragging = false; }
230 });
231
232 // $(document).on("click touchend", function(e) { // hide menu when clicked away from
233 // if (!dragging && plugin.settings.document_click === "collapse" && ! $(e.target).closest(".max-mega-menu li").length && ! $(e.target).closest(".mega-menu-toggle").length ) {
234 // plugin.hideAllPanels();
235 // plugin.hideMobileMenu();
236 // }
237 // dragging = false;
238 // });
239
240 var clickable_parents = $("> a.mega-menu-link", items_with_submenus).add(collapse_children_parents);
241
242 clickable_parents.on("touchend.megamenu", function(e) {
243 if (plugin.settings.event === "hover_intent") {
244 plugin.unbindHoverIntentEvents();
245 }
246
247 if (plugin.settings.event === "hover") {
248 plugin.unbindHoverEvents();
249 }
250 });
251
252 clickable_parents.not("[data-has-click-event]").on("click.megamenu", function(e) {
253 if ( $menu.parent().hasClass("mega-keyboard-navigation") ) {
254 return;
255 }
256
257 if (plugin.isDesktopView() && $(this).parent().hasClass("mega-toggle-on") && $(this).closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") ) {
258 if (plugin.settings.second_click === "go") {
259 return;
260 } else {
261 e.preventDefault();
262 return;
263 }
264 }
265 if (dragging) {
266 return;
267 }
268 if (plugin.isMobileView() && $(this).parent().hasClass("mega-hide-sub-menu-on-mobile")) {
269 return; // allow all clicks on parent items when sub menu is hidden on mobile
270 }
271 if ((plugin.settings.second_click === "go" || $(this).parent().hasClass("mega-click-click-go")) && $(this).attr("href") !== undefined) { // check for second click
272 if (!$(this).parent().hasClass("mega-toggle-on")) {
273 e.preventDefault();
274 plugin.showPanel($(this));
275 }
276 } else {
277 e.preventDefault();
278
279 if ($(this).parent().hasClass("mega-toggle-on")) {
280 plugin.hidePanel($(this), false);
281 } else {
282 plugin.showPanel($(this));
283 }
284 }
285 });
286
287 collapse_children_parents.each(function() {
288 $(this).attr("data-has-click-event", "true");
289 });
290
291 if ( plugin.settings.second_click === "disabled" ) {
292 clickable_parents.off("click.megamenu");
293 }
294
295 $(".mega-close-after-click:not(.mega-menu-item-has-children) > a.mega-menu-link", menu).on("click", function() {
296 plugin.hideAllPanels();
297 plugin.hideMobileMenu();
298 });
299 };
300
301 plugin.bindHoverEvents = function() {
302 items_with_submenus.on({
303 "mouseenter.megamenu" : function() {
304 plugin.unbindClickEvents();
305 if (! $(this).hasClass("mega-toggle-on")) {
306 plugin.showPanel($(this).children("a.mega-menu-link"));
307 }
308 },
309 "mouseleave.megamenu" : function() {
310 if ($(this).hasClass("mega-toggle-on") && ! $(this).hasClass("mega-disable-collapse") && ! $(this).parent().parent().hasClass("mega-menu-tabbed")) {
311 plugin.hidePanel($(this).children("a.mega-menu-link"), false);
312 }
313 }
314 });
315 };
316
317 plugin.bindHoverIntentEvents = function() {
318 items_with_submenus.hoverIntent({
319 over: function () {
320 plugin.unbindClickEvents();
321 if (! $(this).hasClass("mega-toggle-on")) {
322 plugin.showPanel($(this).children("a.mega-menu-link"));
323 }
324 },
325 out: function () {
326 if ($(this).hasClass("mega-toggle-on") && ! $(this).hasClass("mega-disable-collapse") && ! $(this).parent().parent().hasClass("mega-menu-tabbed")) {
327 plugin.hidePanel($(this).children("a.mega-menu-link"), false);
328 }
329 },
330 timeout: plugin.settings.hover_intent_timeout,
331 interval: plugin.settings.hover_intent_interval
332 });
333 };
334
335 plugin.bindKeyboardEvents = function() {
336 var tab_key = 9;
337 var escape_key = 27;
338 var enter_key = 13;
339 var left_arrow_key = 37;
340 var right_arrow_key = 39;
341 var space_key = 32;
342
343 $menu.parent().on("keyup.megamenu", function(e) {
344 var keyCode = e.keyCode || e.which;
345 var active_link = $(e.target);
346
347 if (keyCode === tab_key) {
348 $menu.parent().addClass("mega-keyboard-navigation");
349
350 if ( active_link.parent().parent().is(".max-mega-menu" ) ) {
351 plugin.hideAllPanels();
352 }
353 }
354 });
355
356 $menu.parent().on("keydown.megamenu", function(e) {
357 var keyCode = e.keyCode || e.which;
358 var active_link = $(e.target);
359
360 if ( keyCode === space_key && active_link.is(".mega-menu-link") && $menu.parent().hasClass("mega-keyboard-navigation") ) {
361 e.preventDefault();
362
363 // pressing space on a parent item will always toggle the sub menu
364 if ( active_link.parent().is(items_with_submenus) ) {
365 if ( active_link.parent().hasClass("mega-toggle-on") && ! active_link.closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") ) {
366 plugin.hidePanel(active_link);
367 } else {
368 plugin.showPanel(active_link);
369 }
370 }
371 }
372
373 if ( keyCode === space_key && active_link.is("mega-indicator") && $menu.parent().hasClass("mega-keyboard-navigation") ) {
374 e.preventDefault();
375
376 if ( active_link.parent().parent().hasClass("mega-toggle-on") && ! active_link.closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") ) {
377 plugin.hidePanel(active_link.parent());
378 } else {
379 plugin.showPanel(active_link.parent());
380 }
381 }
382
383 if ( keyCode === escape_key && $menu.parent().hasClass("mega-keyboard-navigation") ) {
384 var submenu_open = $("> .mega-toggle-on", $menu).length !== 0;
385
386 $("> .mega-toggle-on", $menu).find("[tabindex]:visible").first().focus();
387
388 plugin.hideAllPanels();
389
390 if ( plugin.isMobileView() && ! submenu_open ) {
391 plugin.hideMobileMenu();
392 $(".mega-menu-toggle-block, button.mega-toggle-animated", $toggle_bar).first().focus();
393 }
394 }
395
396 if ( keyCode === enter_key && $menu.parent().hasClass("mega-keyboard-navigation") ) {
397 if ( active_link.hasClass("mega-menu-toggle-block") ) {
398 if ( $toggle_bar.hasClass("mega-menu-open") ) {
399 plugin.hideMobileMenu();
400 } else {
401 plugin.showMobileMenu();
402 }
403 }
404
405 // pressing enter on an arrow will toggle the sub menu
406 if ( active_link.hasClass("mega-indicator") ) {
407 if ( active_link.closest("li.mega-menu-item").hasClass("mega-toggle-on") && ! active_link.closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") ) {
408 plugin.hidePanel(active_link.parent());
409 } else {
410 plugin.showPanel(active_link.parent());
411 }
412
413 return;
414 }
415
416 // pressing enter on a parent link
417 if ( active_link.parent().is(items_with_submenus) ) {
418 // when the arrow has been moved (i.e. it is clickable and visible, don't show the sub menu - just follow the link)
419 if ( active_link.is("[href]") && active_link.siblings(".mega-indicator[tabindex]:visible").length !== 0 ) {
420 return;
421 }
422
423 // pressing enter on a parent item without a link will toggle the sub menu
424 if ( active_link.is("[href]") === false ) {
425 if ( active_link.parent().hasClass("mega-toggle-on") && ! active_link.closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") ) {
426 plugin.hidePanel(active_link);
427 } else {
428 plugin.showPanel(active_link);
429 }
430
431 return;
432 }
433
434 // pressing enter on a parent item will first open the sub menu, then follow the link
435 if ( active_link.parent().hasClass("mega-toggle-on") && ! active_link.closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") ) {
436 return;
437 } else {
438 e.preventDefault();
439 plugin.showPanel(active_link);
440 }
441 }
442 }
443
444 if ( keyCode === right_arrow_key && plugin.isDesktopView() && $menu.parent().hasClass("mega-keyboard-navigation") && $menu.hasClass("mega-menu-horizontal") ) {
445 e.preventDefault();
446
447 var next_top_level_item = $("> .mega-toggle-on", $menu).nextAll("li.mega-menu-item:visible").find("> a.mega-menu-link, .mega-search input[type=text]").first();
448
449 if (next_top_level_item.length === 0) {
450 next_top_level_item = $(":focus", $menu).parent().nextAll("li.mega-menu-item:visible").find("> a.mega-menu-link, .mega-search input[type=text]").first();
451 }
452
453 if (next_top_level_item.length === 0) {
454 next_top_level_item = $(":focus", $menu).parent().parent().nextAll("li.mega-menu-item:visible").find("> a.mega-menu-link, .mega-search input[type=text]").first();
455 }
456
457 plugin.hideAllPanels();
458 next_top_level_item.focus();
459 }
460
461 if ( keyCode === left_arrow_key && plugin.isDesktopView() && $menu.parent().hasClass("mega-keyboard-navigation") && $menu.hasClass("mega-menu-horizontal") ) {
462 e.preventDefault();
463
464 var prev_top_level_item = $("> .mega-toggle-on", $menu).prevAll("li.mega-menu-item:visible").find("> a.mega-menu-link, .mega-search input[type=text]").last();
465
466 if (prev_top_level_item.length === 0) {
467 prev_top_level_item = $(":focus", $menu).parent().prevAll("li.mega-menu-item:visible").find("> a.mega-menu-link, .mega-search input[type=text]").last();
468 }
469
470 if (prev_top_level_item.length === 0) {
471 prev_top_level_item = $(":focus", $menu).parent();
472 }
473
474 plugin.hideAllPanels();
475 prev_top_level_item.focus();
476 }
477 });
478
479 $menu.parent().on("focusout.megamenu", function(e) {
480 if ( $menu.parent().hasClass("mega-keyboard-navigation") ) {
481 setTimeout(function() {
482 var menu_has_focus = $menu.parent().find(":focus").length > 0;
483 if (! menu_has_focus) {
484 $menu.parent().removeClass("mega-keyboard-navigation");
485 plugin.hideAllPanels();
486 plugin.hideMobileMenu();
487 }
488 }, 10);
489 }
490 });
491 };
492
493 plugin.unbindAllEvents = function() {
494 $("ul.mega-sub-menu, li.mega-menu-item, li.mega-menu-row, li.mega-menu-column, a.mega-menu-link, .mega-indicator", menu).off().unbind();
495 };
496
497 plugin.unbindClickEvents = function() {
498 // collapsable parents always have a click event
499 $("> a.mega-menu-link", items_with_submenus).not(collapse_children_parents).off("click.megamenu touchend.megamenu");
500 };
501
502 plugin.unbindHoverEvents = function() {
503 items_with_submenus.unbind("mouseenter.megamenu mouseleave.megamenu");
504 };
505
506 plugin.unbindHoverIntentEvents = function() {
507 items_with_submenus.unbind("mouseenter mouseleave").removeProp("hoverIntent_t").removeProp("hoverIntent_s"); // hoverintent does not allow namespaced events
508 };
509
510 plugin.unbindKeyboardEvents = function() {
511 $menu.parent().off("keyup.megamenu keydown.megamenu focusout.megamenu");
512 };
513
514 plugin.unbindMegaMenuEvents = function() {
515 if (plugin.settings.event === "hover_intent") {
516 plugin.unbindHoverIntentEvents();
517 }
518
519 if (plugin.settings.event === "hover") {
520 plugin.unbindHoverEvents();
521 }
522
523 plugin.unbindClickEvents();
524 plugin.unbindKeyboardEvents();
525 };
526
527 plugin.bindMegaMenuEvents = function() {
528 plugin.unbindMegaMenuEvents();
529
530 if (plugin.isDesktopView() && plugin.settings.event === "hover_intent") {
531 plugin.bindHoverIntentEvents();
532 }
533
534 if (plugin.isDesktopView() && plugin.settings.event === "hover") {
535 plugin.bindHoverEvents();
536 }
537
538 plugin.bindClickEvents(); // always bind click events for touch screen devices
539 plugin.bindKeyboardEvents();
540 };
541
542 plugin.checkWidth = function() {
543 if ( plugin.isMobileView() && $menu.data("view") === "desktop" ) {
544 plugin.switchToMobile();
545 }
546
547 if ( plugin.isDesktopView() && $menu.data("view") === "mobile" ) {
548 plugin.switchToDesktop();
549 }
550
551 plugin.calculateDynamicSubmenuWidths($("> li.mega-menu-megamenu > a.mega-menu-link", $menu));
552 };
553
554 plugin.reverseRightAlignedItems = function() {
555 if ( ! $("body").hasClass("rtl") && $menu.hasClass("mega-menu-horizontal") ) {
556 $menu.append($menu.children("li.mega-item-align-right").get().reverse());
557 }
558 };
559
560 plugin.addClearClassesToMobileItems = function() {
561 $(".mega-menu-row", $menu).each(function() {
562 $("> .mega-sub-menu > .mega-menu-column:not(.mega-hide-on-mobile)", $(this)).filter(":even").addClass("mega-menu-clear"); // :even is 0 based
563 });
564 };
565
566 plugin.initDesktop = function() {
567 $menu.data("view", "desktop");
568 plugin.bindMegaMenuEvents();
569 plugin.initIndicators();
570 };
571
572 plugin.switchToDesktop = function() {
573 $menu.data("view", "desktop");
574 plugin.bindMegaMenuEvents();
575 plugin.reverseRightAlignedItems();
576 plugin.hideAllPanels();
577 plugin.hideMobileMenu(true);
578 };
579
580 plugin.initMobile = function() {
581 plugin.switchToMobile();
582 };
583
584 plugin.switchToMobile = function() {
585 $menu.data("view", "mobile");
586 plugin.bindMegaMenuEvents();
587 plugin.initIndicators();
588 plugin.reverseRightAlignedItems();
589 plugin.addClearClassesToMobileItems();
590 plugin.hideAllPanels();
591 plugin.expandMobileSubMenus();
592 };
593
594 plugin.initToggleBar = function() {
595 $toggle_bar.on("click", function(e) {
596 if ( $(e.target).is(".mega-menu-toggle, .mega-menu-toggle-custom-block *, .mega-menu-toggle-block, .mega-menu-toggle-animated-block, .mega-menu-toggle-animated-block *, .mega-toggle-blocks-left, .mega-toggle-blocks-center, .mega-toggle-blocks-right, .mega-toggle-label, .mega-toggle-label span") ) {
597 e.preventDefault();
598
599 if ($(this).hasClass("mega-menu-open")) {
600 plugin.hideMobileMenu();
601 } else {
602 plugin.showMobileMenu();
603 }
604 }
605 });
606 };
607
608 plugin.initIndicators = function() {
609 $(".mega-indicator", $menu).not("[data-has-click-event]").on("click.megamenu", function(e) {
610 e.preventDefault();
611 e.stopPropagation();
612
613 if ( $(this).closest(".mega-menu-item").hasClass("mega-toggle-on") ) {
614 if ( ! $(this).closest("ul.mega-sub-menu").parent().hasClass("mega-menu-tabbed") || plugin.isMobileView() ) {
615 plugin.hidePanel($(this).parent(), false);
616 }
617 } else {
618 plugin.showPanel($(this).parent(), false);
619 }
620 });
621
622 $(".mega-indicator", $menu).each(function() {
623 $(this).attr('data-has-click-event', 'true');
624 });
625 }
626
627 plugin.hideMobileMenu = function(force) {
628 force = force || false;
629
630 if ( ! $toggle_bar.is(":visible") && ! force ) {
631 return;
632 }
633
634 html_body_class_timeout = setTimeout(function() {
635 $("body").removeClass($menu.attr("id") + "-mobile-open");
636 $("html").removeClass($menu.attr("id") + "-off-canvas-open");
637 }, plugin.settings.effect_speed_mobile);
638
639 $(".mega-toggle-label, .mega-toggle-animated", $toggle_bar).attr("aria-expanded", "false");
640
641 if (plugin.settings.effect_mobile === "slide" && ! force ) {
642 $menu.animate({"height":"hide"}, plugin.settings.effect_speed_mobile, function() {
643 $menu.css({
644 width: "",
645 left: "",
646 display: ""
647 });
648
649 $toggle_bar.removeClass("mega-menu-open");
650 });
651 } else {
652 $menu.css({
653 width: "",
654 left: "",
655 display: ""
656 });
657
658 $toggle_bar.removeClass("mega-menu-open");
659 }
660
661 $menu.triggerHandler("mmm:hideMobileMenu");
662 };
663
664 plugin.showMobileMenu = function() {
665 if ( ! $toggle_bar.is(":visible")) {
666 return;
667 }
668
669 clearTimeout(html_body_class_timeout);
670
671 $("body").addClass($menu.attr("id") + "-mobile-open");
672
673 plugin.expandMobileSubMenus();
674
675 if ( plugin.settings.effect_mobile === "slide_left" || plugin.settings.effect_mobile === "slide_right" ) {
676 $("html").addClass($menu.attr("id") + "-off-canvas-open");
677 }
678
679 $(".mega-toggle-label, .mega-toggle-animated", $toggle_bar).attr("aria-expanded", "true");
680
681 if (plugin.settings.effect_mobile === "slide") {
682 $menu.animate({"height":"show"}, plugin.settings.effect_speed_mobile);
683 }
684
685 $toggle_bar.addClass("mega-menu-open");
686
687 plugin.toggleBarForceWidth();
688
689 $menu.triggerHandler("mmm:showMobileMenu");
690 };
691
692 plugin.toggleBarForceWidth = function() {
693 if ($(plugin.settings.mobile_force_width).length && ( plugin.settings.effect_mobile === "slide" || plugin.settings.effect_mobile === "disabled" ) ) {
694 var submenu_offset = $toggle_bar.offset();
695 var target_offset = $(plugin.settings.mobile_force_width).offset();
696
697 $menu.css({
698 width: $(plugin.settings.mobile_force_width).outerWidth(),
699 left: (target_offset.left - submenu_offset.left) + "px"
700 });
701 }
702 };
703
704 plugin.init = function() {
705 $menu.triggerHandler("before_mega_menu_init");
706 plugin.settings = $.extend({}, defaults, options);
707 $menu.removeClass("mega-no-js");
708
709 plugin.initToggleBar();
710
711 if (plugin.settings.unbind_events === "true") {
712 plugin.unbindAllEvents();
713 }
714
715 $(window).on("load", function() {
716 plugin.calculateDynamicSubmenuWidths($("> li.mega-menu-megamenu > a.mega-menu-link", $menu));
717 });
718
719 if ( plugin.isDesktopView() ) {
720 plugin.initDesktop();
721 } else {
722 plugin.initMobile();
723 }
724
725 $(window).resize(function() {
726 plugin.checkWidth();
727 });
728
729 $menu.triggerHandler("after_mega_menu_init");
730 };
731
732 plugin.init();
733 };
734
735 $.fn.maxmegamenu = function(options) {
736 return this.each(function() {
737 if (undefined === $(this).data("maxmegamenu")) {
738 var plugin = new $.maxmegamenu(this, options);
739 $(this).data("maxmegamenu", plugin);
740 }
741 });
742 };
743
744 $(function() {
745 $(".max-mega-menu").maxmegamenu();
746 });
747 }( jQuery ));
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
4 "compress": { 4 "compress": {
5 "booleans": true, 5 "booleans": true,
6 "conditionals": true, 6 "conditionals": true,
7 "drop_console": true, 7 "drop_console": false,
8 "drop_debugger": true, 8 "drop_debugger": false,
9 "if_return": true, 9 "if_return": true,
10 "join_vars": true, 10 "join_vars": true,
11 "keep_classnames": false, 11 "keep_classnames": false,
......
1 // Add your custom JS here. 1 // Add your custom JS here.
2 2
3 import "./_header_menu";
...\ No newline at end of file ...\ No newline at end of file
3 //import "./_header_menu";
4
5
6 var addstuff = '<div class="list-wrapper2 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div><div class="list-wrapper3 list-wrapper"><button type="button" class="back-one-level"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg><span>Back</span></button><div class="sub-menu-wrapper"></div></div>';
7
8 const pageHeader = document.querySelector("#main-nav");
9 const toggleMenu = pageHeader.querySelector(".mega-toggle-block");
10 const menuWrapper = pageHeader.querySelector("#mega-menu-primary");
11 menuWrapper.innerHTML =menuWrapper.innerHTML + addstuff;
12
13 const level1Links = pageHeader.querySelectorAll("li.mega-menu-item-has-children > a.mega-menu-link");
14 const listWrapper2 = pageHeader.querySelector(".list-wrapper2");
15 const listWrapper3 = pageHeader.querySelector(".list-wrapper3");
16 const subMenuWrapper2 = listWrapper2.querySelector(".sub-menu-wrapper");
17 const subMenuWrapper3 = listWrapper3.querySelector(".sub-menu-wrapper");
18 const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
19 const isVisibleClass = "is-visible";
20 const isActiveClass = "is-active";
21
22 toggleMenu.addEventListener("click", function () {
23 menuWrapper.classList.toggle(isVisibleClass);
24 if (!this.classList.contains(isVisibleClass)) {
25 listWrapper2.classList.remove(isVisibleClass);
26 listWrapper3.classList.remove(isVisibleClass);
27 const menuLinks = menuWrapper.querySelectorAll("a");
28 for (const menuLink of menuLinks) {
29 menuLink.classList.remove(isActiveClass);
30 }
31 }
32 });
33
34 for (const level1Link of level1Links) {
35 level1Link.addEventListener("click", function (e) {
36 const siblingList = level1Link.nextElementSibling;
37 console.log('clicked level1Links')
38 if (siblingList) {
39 e.preventDefault();
40 this.classList.add(isActiveClass);
41 const cloneSiblingList = siblingList.cloneNode(true);
42 subMenuWrapper2.innerHTML = "";
43 subMenuWrapper2.append(cloneSiblingList);
44 listWrapper2.classList.add(isVisibleClass);
45 }
46 });
47 }
48
49 listWrapper2.addEventListener("click", function (e) {
50 const target = e.target;
51 const parent = target.closest("a");
52 if (target.tagName.toLowerCase() === "a" && target.nextElementSibling) {
53 const siblingList = target.nextElementSibling;
54 e.preventDefault();
55 target.classList.add(isActiveClass);
56 const cloneSiblingList = siblingList.cloneNode(true);
57 subMenuWrapper3.innerHTML = "";
58 subMenuWrapper3.append(cloneSiblingList);
59 listWrapper3.classList.add(isVisibleClass);
60 }else if (parent.tagName.toLowerCase() === "a" && parent.nextElementSibling) {
61 const siblingList = parent.nextElementSibling;
62 e.preventDefault();
63 parent.classList.add(isActiveClass);
64 const cloneSiblingList = siblingList.cloneNode(true);
65 subMenuWrapper3.innerHTML = "";
66 subMenuWrapper3.append(cloneSiblingList);
67 listWrapper3.classList.add(isVisibleClass);
68 }
69 });
70
71 for (const backOneLevelBtn of backOneLevelBtns) {
72 backOneLevelBtn.addEventListener("click", function () {
73 const parent = this.closest(".list-wrapper");
74 parent.classList.remove(isVisibleClass);
75 // parent.previousElementSibling
76 // .querySelector(".is-active")
77 // .classList.remove(isActiveClass);
78 });
79 }
80
......
...@@ -14,6 +14,8 @@ ...@@ -14,6 +14,8 @@
14 14
15 } 15 }
16 16
17
18
17 .branding{ 19 .branding{
18 display: flex; 20 display: flex;
19 margin-bottom: 0px; 21 margin-bottom: 0px;
...@@ -27,3 +29,16 @@ ...@@ -27,3 +29,16 @@
27 align-items: flex-start; 29 align-items: flex-start;
28 margin-bottom: 10px; 30 margin-bottom: 10px;
29 } 31 }
32
33
34 @media only screen and (max-width: 1000px) {
35 .branding{
36 margin-top: 0px;
37 }
38 .site-title{
39 font-size: 20px;
40 }
41 .navbar-brand{
42 width:100px;
43 }
44 }
...\ No newline at end of file ...\ No newline at end of file
......
1 1 @media only screen and (min-width: 1000px) {
2 2
3 #mega-menu-wrap-primary{ 3 #mega-menu-wrap-primary{
4 width: 100%; 4 width: 100%;
...@@ -116,3 +116,155 @@ ...@@ -116,3 +116,155 @@
116 line-height: 20px; 116 line-height: 20px;
117 font-family: "PT Sans",sans-serif; 117 font-family: "PT Sans",sans-serif;
118 } 118 }
119 .list-wrapper2,
120 .list-wrapper3 {
121 display: none;
122 }
123
124 }
125
126 @media only screen and (max-width: 1000px) {
127
128
129 #mega-menu-primary{
130 margin-top: 60px !important;
131 padding-top: 20px !important;
132 padding-bottom: 100px !important;
133 overflow-x: scroll !important;
134 height: calc(100vh - 80px) !important;
135 }
136 #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open:after{
137 display: none !important;
138 }
139 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
140 width: 100%;
141 max-width: 100%;
142 padding: 0px 10%;
143 margin: auto;
144 }
145
146 #mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary{
147 left: -100%;
148
149 }
150 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu{
151 margin-top: 0px;
152 }
153
154 .sub-mobile-menu{
155
156 .mega-menu-item{
157 margin-top: 15px !important;
158 }
159
160 .mega-indicator{
161 margin-top: -50px !important;
162 position: relative !important;
163 margin-right: 0px !important;
164 width: 30px !important;
165 &:after{
166 margin-right: 0px !important;
167 }
168 }
169
170
171 }
172
173 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
174 margin-left: 20px;
175 color: #555;
176 font-family: inherit;
177 font-size: 14px;
178 text-transform: uppercase;
179 text-decoration: none;
180 font-weight: bold;
181 text-align: left;
182 vertical-align: top;
183 display: block;
184 border: 0;
185 }
186 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link{
187 width: 100%;
188 margin: 10px auto 0px auto;
189 color:#fff;
190 background-color: #EE0000;
191 border-radius: 1.25rem;
192 text-align: center;
193 height: 2.5rem;
194 margin-top: 0rem;
195 font-size: 18px;
196 position: relative;
197 font-family: "PT Sans",sans-serif;
198 }
199 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{
200 width: 100%;
201 margin: 10px auto 0px auto !important;
202 color:#fff;
203 background-color: #EE0000;
204 border-radius: 1.25rem;
205 text-align: center !important;
206 height: 2.5rem;
207 font-size: 18px;
208 position: relative;
209 font-family: "PT Sans",sans-serif;
210 }
211 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
212 width: 100%;
213 margin: 10px auto 0px auto !important;
214 color:#fff;
215 background-color: #EE0000;
216 border-radius: 1.25rem;
217 text-align: center !important;
218 height: 2.5rem;
219 font-size: 18px;
220 position: relative;
221 font-family: "PT Sans",sans-serif;
222 }
223
224
225 .sub-menu-wrapper{
226 background-color: #fff;
227 width: 100% !important;
228 padding: 0px 10% !important;
229 margin: auto !important;
230 float: none !important;
231 }
232
233
234 }
235
236
237 @media only screen and (max-width: 1000px) {
238 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu, #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu.mega-menu-item.mega-toggle-on ul.mega-sub-menu{
239 display: none !important;
240 }
241 .list-wrapper2,
242 .list-wrapper3 {
243 ul.mega-sub-menu{
244 display: block !important;
245 }
246 }
247 .list-wrapper2,
248 .list-wrapper3 {
249 position: absolute !important;
250 top: 0 !important;
251 left: 0 !important;
252 right: 0 !important;
253 height: 100vh !important;
254 transform: translateX(100%) !important;
255 backface-visibility: hidden !important;
256 transition: transform 0.5s !important;
257 background-color: #fff !important;
258 }
259
260
261 .list-wrapper2.is-visible,
262 .list-wrapper3.is-visible {
263 transform: none !important;
264 }
265
266 .mega-menu-item .list-wrapper:nth-child(1) > ul > li > .sub-menu{
267 display: none;
268 }
269
270 }
...\ No newline at end of file ...\ No newline at end of file
......