Weishen/Hydro
2
0 Fork 0
mirror of https://gitcode.com/gh_mirrors/hy/Hydro.git synced 2026-10-20 01:38:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui: fix nav resize (#359)

Browse Source
This commit is contained in:
无限UCW authored and GitHub committed 2022-05-21 00:22:17 +08:00
1 parent 8582de2560
commit c556c542a5
1 file changed
+26 -23
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-default/components/navigation/navigation.page.js
+26 -23
View File
@@ -58,19 +58,22 @@ function handlerSwitchAccount(ev) {
ev.preventDefault(); ev.preventDefault();
} }
let trigger; let $trigger;
let menu; let $menu;
function handleNavbar() { function handleNavbar() {
let fromHide = false; let fromHide = false;
if ($(document).width() <= 600) { if ($(document).width() <= 600) {
for (const ele of menu.children()) { $menu.children().each(function () {
ele.insertBefore(trigger, null); const $ele = $(this);
} $ele.addClass('nav__list-item').removeClass('menu__item');
trigger.hide(); $ele.children('a').addClass('nav__item').removeClass('menu__link');
$ele.insertBefore($trigger, null);
});
$trigger.hide();
return; return;
} }
trigger.show(); $trigger.show();
const base = 70; const base = 70;
@@ -80,18 +83,18 @@ function handleNavbar() {
if (!$(navItems[navItem]).children('a').hasClass('nav--active')) { if (!$(navItems[navItem]).children('a').hasClass('nav--active')) {
$(navItems[navItem]).removeClass('nav__list-item').addClass('menu__item'); $(navItems[navItem]).removeClass('nav__list-item').addClass('menu__item');
$(navItems[navItem]).children('a').removeClass('nav__item').addClass('menu__link'); $(navItems[navItem]).children('a').removeClass('nav__item').addClass('menu__link');
$(menu).prepend($(navItems[navItem])); $menu.prepend($(navItems[navItem]));
} }
navItem--; navItem--;
fromHide = true; fromHide = true;
} }
if (!fromHide && menu.children().length) { if (!fromHide && $menu.children().length) {
while ($('#menu').children('div').height() <= base && menu.children().length) { while ($('#menu').children('div').height() <= base && $menu.children().length) {
const ele = menu.children(0); const $ele = $menu.children().first();
$(ele).addClass('nav__list-item').removeClass('menu__item'); $ele.addClass('nav__list-item').removeClass('menu__item');
$(ele).children('a').addClass('nav__item').removeClass('menu__link'); $ele.children('a').addClass('nav__item').removeClass('menu__link');
ele.insertBefore(trigger, null); $ele.insertBefore($trigger, null);
} }
} }
@@ -102,14 +105,13 @@ function handleNavbar() {
if (!$(navItems[navItem]).children('a').hasClass('nav--active')) { if (!$(navItems[navItem]).children('a').hasClass('nav--active')) {
$(navItems[navItem]).removeClass('nav__list-item').addClass('menu__item'); $(navItems[navItem]).removeClass('nav__list-item').addClass('menu__item');
$(navItems[navItem]).children('a').removeClass('nav__item').addClass('menu__link'); $(navItems[navItem]).children('a').removeClass('nav__item').addClass('menu__link');
$(menu).prepend($(navItems[navItem])); $menu.prepend($(navItems[navItem]));
break;
} }
navItem--; navItem--;
} }
} }
if (!menu.children().length) trigger.hide(); if (!$menu.children().length) $trigger.hide();
} }
const navigationPage = new AutoloadPage('navigationPage', () => { const navigationPage = new AutoloadPage('navigationPage', () => {
@@ -130,23 +132,24 @@ const navigationPage = new AutoloadPage('navigationPage', () => {
}); });
const $slideoutOverlay = $('.slideout-overlay'); const $slideoutOverlay = $('.slideout-overlay');
$slideoutOverlay.click(() => slideout.close()); $slideoutOverlay.on('click', () => slideout.close());
slideout.on('beforeopen', () => $slideoutOverlay.show()); slideout.on('beforeopen', () => $slideoutOverlay.show());
slideout.on('beforeclose', () => $slideoutOverlay.hide()); slideout.on('beforeclose', () => $slideoutOverlay.hide());
$('.header__hamburger').click(() => slideout.toggle()); $('.header__hamburger').on('click', () => slideout.toggle());
$(window).on('resize', handleNavbar); $(window).on('resize', handleNavbar);
}, () => { }, () => {
trigger = $(tpl` $trigger = $(tpl`
<li class="nav__list-item nav_more" data-dropdown-pos="bottom right" data-dropdown-target="#menu-nav-more"> <li class="nav__list-item nav_more" data-dropdown-pos="bottom right" data-dropdown-target="#menu-nav-more">
<a href="javascript:;" class="nav__item"> <a href="javascript:;" class="nav__item">
${i18n('More')} <span class="icon icon-expand_more"></span> ${i18n('More')} <span class="icon icon-expand_more"></span>
</a> </a>
</li> </li>
`); `);
menu = $('<ol class="dropdown-target menu menu_more" id="menu-nav-more">'); $menu = $('<ol class="dropdown-target menu menu_more" id="menu-nav-more">');
trigger.append(menu); $trigger.append($menu);
$('.nav__list--main').append(trigger); $('.nav__list--main').append($trigger);
handleNavbar(); handleNavbar();
}); });