5 Dec
2014
5 Dec
'14
6:21 p.m.
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 <lm(a)mathias-kettner.de>
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;
-}
-