Module: check_mk Branch: master Commit: 6c5c3ab75a8986bcda0d1851945d8c3af7af3700 URL: http://git.mathias-kettner.de/git/?p=check_mk.git;a=commit;h=6c5c3ab75a8986… Author: Lars Michelsen &lt;lm(a)mathias-kettner.de&gt; Date: Fri Dec 5 17:57:29 2014 +0100 #1687 FIX Add visual to dashboard menu can now be closed with click anywhere on page --- .werks/1687 | 9 +++++ ChangeLog | 1 + web/htdocs/htmllib.py | 5 +-- web/htdocs/js/checkmk.js | 87 +++++++++++++++++++++++++++++++++++++++------- web/htdocs/pages.css | 31 +++++++++++++++-- web/htdocs/views.css | 26 -------------- 6 files changed, 116 insertions(+), 43 deletions(-) diff --git a/.werks/1687 b/.werks/1687 new file mode 100644 index 0000000..e7a8e15 --- /dev/null +++ b/.werks/1687 @@ -0,0 +1,9 @@ +Title: Add visual to dashboard menu can now be closed with click anywhere on page +Level: 1 +Component: multisite +Compatible: compat +Version: 1.2.5i7 +Date: 1417798625 +Class: fix + + diff --git a/ChangeLog b/ChangeLog index ec0fc2a..9ae8b6a 100644 --- a/ChangeLog +++ b/ChangeLog @@ -177,6 +177,7 @@ * 1678 FIX: Fixed problem with garbled styles on user profile page after saving * 1680 FIX: Fixed various dashlet designer position/resizing issues... * 1683 FIX: Replaced a lot of old GIF images with better looking PNG images + * 1687 FIX: Add visual to dashboard menu can now be closed with click anywhere on page WATO: * 1170 Added buttons to move rules to top/bottom of the list to ruleset edit dialog diff --git a/web/htdocs/htmllib.py b/web/htdocs/htmllib.py index af869fb..9d7740a 100644 --- a/web/htdocs/htmllib.py +++ b/web/htdocs/htmllib.py @@ -883,10 +883,11 @@ class html: if self.myfile == "view": mode_name = self.var('mode') == "availability" and "availability" or "view" + encoded_vars = self.attrencode([ (k, v != None and v or '') for k,v in self.page_context.items() ]) h += '<div class="visualadd"><a class="visualadd" href="javascript:void(0)" ' \ - 'onclick="toggle_add_to_visual(this, \'%s\', %s, {\'name\': \'%s\'})">' \ + 'onclick="toggle_add_to_visual(event, this, \'%s\', %s, {\'name\': \'%s\'})">' \ '<img class=statusicon src="images/status_add_dashlet.png" title="%s"></a></div>\n' % \ - (mode_name, self.attrencode(self.page_context), self.var('view_name'), _("Add this view to...")) + (mode_name, encoded_vars, self.var('view_name'), _("Add this view to...")) for img, tooltip in self.status_icons.items(): if type(tooltip) == tuple: diff --git a/web/htdocs/js/checkmk.js b/web/htdocs/js/checkmk.js index 04987ef..163dda4 100644 --- a/web/htdocs/js/checkmk.js +++ b/web/htdocs/js/checkmk.js @@ -156,6 +156,21 @@ function add_event_handler(type, func) { } } +function del_event_handler(type, func) { + if (window.removeEventListener) { + // W3 stadnard browsers + window.removeEventListener(type, func, false); + } + else if (window.detachEvent) { + // IE<9 + document.documentElement.detachEvent("on"+type, func); + } + else { + window["on" + type] = null; + } +} + + function prevent_default_events(event) { if (event.preventDefault) event.preventDefault(); @@ -561,8 +576,8 @@ function create_graph(data, params) { visualadd.title = 'Add to dashboard'; visualadd.setAttribute('class', 'visualadd'); visualadd.onclick = function(host, service, view, source) { - return function() { - toggle_add_to_visual(this, 'pnpgraph', + return function(event) { + toggle_add_to_visual(event, this, 'pnpgraph', { 'host': host, 'service': service }, { 'timerange': view, 'source': source } ); @@ -946,6 +961,8 @@ function folding_step(oImg, state, step) { /* Check if an element has a certain css class. */ function has_class(o, cn) { + if (typeof(o.className) === 'undefined') + return false; var parts = o.className.split(' '); for (x=0; x<parts.length; x++) { if (parts[x] == cn) @@ -2197,9 +2214,9 @@ function toggle_popup(event, id) // Add to Visual -var add_visual_data = null; -var visualadd_popup_id = null; -var visualadd_popup_content = null; +var add_visual_data = null; +var visualadd_popup_id = null; +var visualadd_popup_contents = {}; function close_visualadd_popup() { @@ -2209,10 +2226,31 @@ function close_visualadd_popup() menu.parentNode.removeChild(menu); menu = null; } + visualadd_popup_id = null; } -function toggle_add_to_visual(trigger_obj, element_type, context, params) +// Registerd as click handler on the page while the visualadd menu is opened +// This is used to close the menu when the user clicks elsewhere +function handle_visualadd_close(event) { + var target = getTarget(event); + + // Check whether or not a parent of the clicked node is the popup menu + while (target && target.id != 'visualadd_popup' && !has_class(target, 'statusicon')) { + target = target.parentNode; + } + + if (target) { + return true; // clicked menu or statusicon + } + + close_visualadd_popup(); + del_event_handler('click', handle_visualadd_close); +} + +function toggle_add_to_visual(event, trigger_obj, element_type, context, params) { + if(!event) + event = window.event; var container = trigger_obj.parentNode; var ident; for (var i in container.parentNode.childNodes) { @@ -2230,6 +2268,8 @@ function toggle_add_to_visual(trigger_obj, element_type, context, params) } visualadd_popup_id = ident; + add_event_handler('click', handle_visualadd_close); + menu = document.createElement('div'); menu.setAttribute('id', 'visualadd_popup'); menu.className = "popup_menu"; @@ -2237,22 +2277,43 @@ function toggle_add_to_visual(trigger_obj, element_type, context, params) // populate the menu using a webservice, because the list of dashboards // is not known in the javascript code. But it might have been cached // before. In this case do not perform a second request. - if (visualadd_popup_content !== null) - menu.innerHTML = visualadd_popup_content; + if (ident in visualadd_popup_contents) + menu.innerHTML = visualadd_popup_contents[ident]; else - get_url('ajax_popup_add_visual.py', add_dashboard_response_handler); + get_url('ajax_popup_add_visual.py', add_dashboard_response_handler, [ident, event]); add_visual_data = [ element_type, context, params ]; container.appendChild(menu); + fix_visualadd_menu_position(event, menu); } function add_dashboard_response_handler(data, response_text) { - visualadd_popup_content = response_text; - var popup = document.getElementById('visualadd_popup'); - if (popup) { - popup.innerHTML = response_text; + var ident = data[0]; + var event = data[1]; + visualadd_popup_contents[ident] = response_text; + var menu = document.getElementById('visualadd_popup'); + if (menu) { + menu.innerHTML = response_text; + fix_visualadd_menu_position(event, menu); + } +} + +function fix_visualadd_menu_position(event, menu) { + var target = getTarget(event); + var dashboard = document.getElementById('dashboard'); + + // When menu is out of screen on the right, move to left + if (menu.offsetLeft + menu.clientWidth > pageWidth()) { + menu.style.left = (menu.offsetLeft - menu.clientWidth - 15) + 'px'; + menu.style.right = 'auto'; + } + + // When menu is out of screen on the top, move to bottom + if (menu.offsetTop < 0) { + menu.style.top = (menu.offsetTop + menu.clientHeight) + 'px'; + menu.style.bottom = 'auto'; } } diff --git a/web/htdocs/pages.css b/web/htdocs/pages.css index 264c98a..8676337 100644 --- a/web/htdocs/pages.css +++ b/web/htdocs/pages.css @@ -931,7 +931,8 @@ div.help tt { padding: 0px 5px 5px 10px; } -body.main table.footer .popup_menu a, .popup_menu span { +body.main table.footer .popup_menu a, +.popup_menu span { display: block; padding-top: 1px; padding-bottom: 1px; @@ -946,7 +947,7 @@ body.main table.footer .popup_menu a, .popup_menu span { margin-top: 8px; } -.popup_menu a:hover { +body.main table.footer .popup_menu a:hover { text-decoration: underline; } @@ -1039,3 +1040,29 @@ table.debug_vars td { font-family: courier, monospace; } +/* Popup for adding to visuals (Dashboard, Reports */ + +div.graph, div.visualadd { + position: relative; +} + +div.visualadd { + display: inline-block; +} + +div.graph a.visualadd { + position: absolute; + top: 10px; + left: 10px; + + display: block; + width: 20px; + height: 20px; + background-image: url(images/button_add_dashlet_lo.png); +} + +div.graph a.visualadd:hover { + background-image: url(images/button_add_dashlet_hi.png); + cursor: pointer; +} + diff --git a/web/htdocs/views.css b/web/htdocs/views.css index 822f9a0..75e1f1d 100644 --- a/web/htdocs/views.css +++ b/web/htdocs/views.css @@ -714,29 +714,3 @@ td.invtree table td { background-color: #fff; } -/* Popup for adding to visuals (Dashboard, Reports */ - -div.graph, div.visualadd { - position: relative; -} - -div.visualadd { - display: inline-block; -} - -div.graph a.visualadd { - position: absolute; - top: 10px; - left: 10px; - - display: block; - width: 20px; - height: 20px; - background-image: url(images/button_add_dashlet_lo.png); -} - -div.graph a.visualadd:hover { - background-image: url(images/button_add_dashlet_hi.png); - cursor: pointer; -} -