From a057b0621ce0d7933856007c860503b1f2f0b4f4 Mon Sep 17 00:00:00 2001 From: hickert Date: Wed, 5 May 2010 14:31:48 +0000 Subject: [PATCH] Added tooltips git-svn-id: https://oss.gonicus.de/repositories/gosa/trunk@18148 594d385d-05f5-0310-b6e9-bd551577e9d8 --- gosa-core/html/include/tooltip-v0.2.js | 208 ++++++++++++++++++ gosa-core/html/themes/default/style.css | 7 + .../configViewer/class_configViewer.inc | 27 ++- .../addons/configViewer/property-list.tpl | 15 ++ .../addons/configViewer/property-list.xml | 4 +- 5 files changed, 247 insertions(+), 14 deletions(-) create mode 100644 gosa-core/html/include/tooltip-v0.2.js diff --git a/gosa-core/html/include/tooltip-v0.2.js b/gosa-core/html/include/tooltip-v0.2.js new file mode 100644 index 000000000..56d883537 --- /dev/null +++ b/gosa-core/html/include/tooltip-v0.2.js @@ -0,0 +1,208 @@ +/* + * Copyright (c) 2006 Jonathan Weiss + * + * Permission to use, copy, modify, and distribute this software for any + * purpose with or without fee is hereby granted, provided that the above + * copyright notice and this permission notice appear in all copies. + * + * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES + * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF + * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR + * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES + * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN + * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF + * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. + */ + + +/* tooltip-0.2.js - Small tooltip library on top of Prototype + * by Jonathan Weiss distributed under the BSD license. + * + * This tooltip library works in two modes. If it gets a valid DOM element + * or DOM id as an argument it uses this element as the tooltip. This + * element will be placed (and shown) near the mouse pointer when a trigger- + * element is moused-over. + * If it gets only a text as an argument instead of a DOM id or DOM element + * it will create a div with the classname 'tooltip' that holds the given text. + * This newly created div will be used as the tooltip. This is usefull if you + * want to use tooltip.js to create popups out of title attributes. + * + * + * Usage: + * + * + * + * + * Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will + * be shown. On o mouseOut the tooltip disappears. + * + * Example: + * + * + * + * + * + * + * + *
+ * This is product 1 + *
+ * + * + * + * You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip. + */ + +var Tooltip = Class.create(); +Tooltip.prototype = { + initialize: function(element, tool_tip) { + var options = Object.extend({ + default_css: false, + margin: "0px", + padding: "5px", + backgroundColor: "#d6d6fc", + min_distance_x: 5, + min_distance_y: 5, + delta_x: 0, + delta_y: 0, + zindex: 1000 + }, arguments[2] || {}); + + this.element = $(element); + + this.options = options; + + // use the supplied tooltip element or create our own div + if($(tool_tip)) { + this.tool_tip = $(tool_tip); + } else { + this.tool_tip = $(document.createElement("div")); + document.body.appendChild(this.tool_tip); + this.tool_tip.addClassName("tooltip"); + this.tool_tip.appendChild(document.createTextNode(tool_tip)); + } + + // hide the tool-tip by default + this.tool_tip.hide(); + + this.eventMouseOver = this.showTooltip.bindAsEventListener(this); + this.eventMouseOut = this.hideTooltip.bindAsEventListener(this); + this.eventMouseMove = this.moveTooltip.bindAsEventListener(this); + + this.registerEvents(); + }, + + destroy: function() { + Event.stopObserving(this.element, "mouseover", this.eventMouseOver); + Event.stopObserving(this.element, "mouseout", this.eventMouseOut); + Event.stopObserving(this.element, "mousemove", this.eventMouseMove); + }, + + registerEvents: function() { + Event.observe(this.element, "mouseover", this.eventMouseOver); + Event.observe(this.element, "mouseout", this.eventMouseOut); + Event.observe(this.element, "mousemove", this.eventMouseMove); + }, + + moveTooltip: function(event){ + Event.stop(event); + // get Mouse position + var mouse_x = Event.pointerX(event); + var mouse_y = Event.pointerY(event); + + // decide if wee need to switch sides for the tooltip + var dimensions = Element.getDimensions( this.tool_tip ); + var element_width = dimensions.width; + var element_height = dimensions.height; + + if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.min_distance_x) ){ // too big for X + mouse_x = mouse_x - element_width; + // apply min_distance to make sure that the mouse is not on the tool-tip + mouse_x = mouse_x - this.options.min_distance_x; + } else { + mouse_x = mouse_x + this.options.min_distance_x; + } + + if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.min_distance_y) ){ // too big for Y + mouse_y = mouse_y - element_height; + // apply min_distance to make sure that the mouse is not on the tool-tip + mouse_y = mouse_y - this.options.min_distance_y; + } else { + mouse_y = mouse_y + this.options.min_distance_y; + } + + // now set the right styles + this.setStyles(mouse_x, mouse_y); + }, + + + showTooltip: function(event) { + Event.stop(event); + this.moveTooltip(event); + new Element.show(this.tool_tip); + }, + + setStyles: function(x, y){ + // set the right styles to position the tool tip + Element.setStyle(this.tool_tip, { position:'absolute', + top:y + this.options.delta_y + "px", + left:x + this.options.delta_x + "px", + zindex:this.options.zindex + }); + + // apply default theme if wanted + if (this.options.default_css){ + Element.setStyle(this.tool_tip, { margin:this.options.margin, + padding:this.options.padding, + backgroundColor:this.options.backgroundColor, + zindex:this.options.zindex + }); + } + }, + + hideTooltip: function(event){ + new Element.hide(this.tool_tip); + }, + + getWindowHeight: function(){ + var innerHeight; + if (navigator.appVersion.indexOf('MSIE')>0) { + innerHeight = document.body.clientHeight; + } else { + innerHeight = window.innerHeight; + } + return innerHeight; + }, + + getWindowWidth: function(){ + var innerWidth; + if (navigator.appVersion.indexOf('MSIE')>0) { + innerWidth = document.body.clientWidth; + } else { + innerWidth = window.innerWidth; + } + return innerWidth; + } + +} diff --git a/gosa-core/html/themes/default/style.css b/gosa-core/html/themes/default/style.css index aa06d7f38..4fef2a0c8 100644 --- a/gosa-core/html/themes/default/style.css +++ b/gosa-core/html/themes/default/style.css @@ -159,6 +159,13 @@ input[type=submit].img{ cursor:pointer; } +div.tooltip{ + padding: 5px; + width: 500px; + border: 1px solid #000; + background-color: #F0F0F0; +} + div.img{ display:inline-block; display:-moz-inline-block; diff --git a/gosa-core/plugins/addons/configViewer/class_configViewer.inc b/gosa-core/plugins/addons/configViewer/class_configViewer.inc index 7cc728a08..c52f32aa8 100644 --- a/gosa-core/plugins/addons/configViewer/class_configViewer.inc +++ b/gosa-core/plugins/addons/configViewer/class_configViewer.inc @@ -52,6 +52,9 @@ class configViewer extends management { // Walk trough all properties and check if there posts for us. $all = $this->config->configRegistry->getAllProperties(); + + $htmlTooltips = ""; + $jsTooltips = ""; foreach($all as $prop){ $modified = in_array($prop->getStatus(),array('modified','removed')); if($modified) break; @@ -59,6 +62,8 @@ class configViewer extends management $smarty = get_smarty(); $smarty->assign('is_modified', $modified); + $smarty->assign('htmlTooltips', $htmlTooltips); + $smarty->assign('jsTooltips', $jsTooltips); return(management::renderList()); } @@ -94,9 +99,7 @@ class configViewer extends management static function propertyGroup($group, $description = array()) { - $title = _("No description"); - if(!empty($description[0])) $title=htmlentities($description[0], ENT_COMPAT, 'UTF-8'); - return("{$group[0]}"); + return($group[0]); } static function propertyClass($class, $description = array()) { @@ -106,26 +109,26 @@ class configViewer extends management }else{ $class = $class[0]; } - $title = _("No description"); - if(!empty($description[0])) $title=htmlentities($description[0], ENT_COMPAT, 'UTF-8'); - return("{$class}"); + return($class); } - static function propertyName($cn, $description = array()) + static function propertyName($class,$cn, $description = array()) { + $id = "{$class[0]}_{$cn[0]}"; + $title = _("No description"); - if(!empty($description[0])) $title=htmlentities($description[0], ENT_COMPAT, 'UTF-8'); - return("{$cn[0]}"); + if(isset($description[0])) $title = htmlentities($description[0],ENT_COMPAT, 'UTF-8'); + $title = preg_replace("/\n/", "
", $title); + $tooltip = "
".$title."
"; + return($tooltip."{$cn[0]}"); } static function propertyValue($class,$cn, $value,$type,$default,$description) { $name = "{$class[0]}:{$cn[0]}"; $value = htmlentities($value[0], ENT_COMPAT , 'UTF-8'); - $title = _("No description"); - if(!empty($description[0])) $title=htmlentities($description[0], ENT_COMPAT, 'UTF-8'); switch($type[0]){ case 'string': case 'integer': - $res = ""; + $res = ""; break; default: $res = ""; } diff --git a/gosa-core/plugins/addons/configViewer/property-list.tpl b/gosa-core/plugins/addons/configViewer/property-list.tpl index 785129092..552db9178 100644 --- a/gosa-core/plugins/addons/configViewer/property-list.tpl +++ b/gosa-core/plugins/addons/configViewer/property-list.tpl @@ -1,3 +1,5 @@ + +
@@ -15,6 +17,18 @@ {$LIST}
+ + {if !$is_modified} {/if} @@ -23,3 +37,4 @@
+ diff --git a/gosa-core/plugins/addons/configViewer/property-list.xml b/gosa-core/plugins/addons/configViewer/property-list.xml index 5bce28048..db88d6a99 100644 --- a/gosa-core/plugins/addons/configViewer/property-list.xml +++ b/gosa-core/plugins/addons/configViewer/property-list.xml @@ -54,7 +54,7 @@ - |20px;c|80px|100px|100px||60px;r| + |20px;c|80px|100px|200px||60px;r| %{filter:objectType(dn,objectClass)} @@ -80,7 +80,7 @@ cn string - %{filter:propertyName(cn,description)} + %{filter:propertyName(class,cn,description)} true -- 2.30.2