Auto refresh menu

Put the navigation into a container and reload it once every 15 seconds from a distinct menu action. Include the current
path into an URL param to still be able to mark the current menu item as active.

fixes #6955
This commit is contained in:
Matthias Jentsch 2014-09-08 15:21:14 +02:00
parent e8d526fcf9
commit 545db945da
4 changed files with 45 additions and 13 deletions

View File

@ -18,10 +18,11 @@ class LayoutController extends ActionController
*/
public function menuAction()
{
$this->setAutorefreshInterval(15);
$this->_helper->layout()->disableLayout();
$this->view->menuRenderer = new MenuRenderer(
Menu::load(), Url::fromRequest()->without('renderLayout')->getRelativeUrl()
);
$url = Url::fromPath($this->getParam('url'));
$this->view->menuRenderer = new MenuRenderer(Menu::load(), $url->getRelativeUrl());
}
/**

View File

@ -9,13 +9,20 @@ use Icinga\Web\Widget\SearchDashboard;
if (! $this->auth()->isAuthenticated()) {
return;
}
$dataIcingaUrl = $this->href(
'layout/menu',
array('url' => Url::fromRequest()->without('renderLayout')->getAbsoluteUrl())
);
?>
<div id="menu" data-base-target="_main">
<div
id="menu" data-base-target="_main" class="container" data-icinga-url="<?= $dataIcingaUrl?>" data-icinga-refresh="15"
>
<? if (SearchDashboard::search('dummy')->getPane('search')->hasComponents()): ?>
<form action="<?= $this->href('search') ?>" method="get" role="search">
<input type="text" name="q" class="search autofocus" placeholder="<?= $this->translate('Search...') ?>" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</form>
<form action="<?= $this->href('search') ?>" method="get" role="search">
<input type="text" name="q" class="search autofocus" placeholder="<?= $this->translate('Search...') ?>"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</form>
<? endif; ?>
<?= new MenuRenderer(Menu::load(), Url::fromRequest()->without('renderLayout')->getRelativeUrl()); ?>
<?= new MenuRenderer(Menu::load(), Url::fromRequest()->without('renderLayout')->getRelativeUrl()); ?>
</div>

View File

@ -1 +1,13 @@
<?= $menuRenderer; ?>
<?php
use Icinga\Web\Widget\SearchDashboard;
?>
<? if (SearchDashboard::search('dummy')->getPane('search')->hasComponents()): ?>
<form action="<?= $this->href('search') ?>" method="get" role="search">
<input
type="text" name="q" class="search autofocus" placeholder="<?= $this->translate('Search...') ?>"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
/>
</form>
<? endif; ?>
<?= $menuRenderer; ?>

View File

@ -10,6 +10,8 @@
'use strict';
var activeMenuId;
var mouseX, mouseY;
Icinga.Events = function (icinga) {
@ -133,22 +135,25 @@
if (!icinga.utils.elementsOverlap(arrow, el)) {
return;
}
var title = $(this).find('.tipsy-inner').html();
var atMouse = document.elementFromPoint(mouseX, mouseY);
var nearestTip = $(atMouse)
.closest('[original-title="' + title + '"]')[0];
if (nearestTip) {
console.log ('migrating orphan...');
var tipsy = $.data(nearestTip, 'tipsy');
tipsy.$tip = $(this);
$.data(this, 'tipsy-pointee', nearestTip);
} else {
// doesn't match delete
console.log ('deleting orphan...');
$(this).remove();
}
});
// restore menu state
if (activeMenuId) {
$('#menu .active').removeClass('active');
$('#' + activeMenuId).addClass('active');
}
},
/**
@ -569,7 +574,9 @@
$li = $a.closest('li');
$('#menu .active').removeClass('active');
$li.addClass('active');
activeMenuId = $($li).attr('id');
if ($li.hasClass('hover')) {
$('#menu .active').removeClass('active');
$li.removeClass('hover');
}
}
@ -600,8 +607,13 @@
// Load link URL
icinga.loader.loadUrl(href, $target);
// Menu links should remove all but the first layout column
if (isMenuLink) {
// update target url of the menu container to the clicked link
var menuDataUrl = icinga.utils.parseUrl($('#menu').data('icinga-url'));
menuDataUrl = icinga.utils.addUrlParams(menuDataUrl.path, { url: href });
$('#menu').data('icinga-url', menuDataUrl);
// Menu links should remove all but the first layout column
icinga.ui.layout1col();
}