From: cajus <cajus@594d385d-05f5-0310-b6e9-bd551577e9d8>
Date: Wed, 5 May 2010 14:58:54 +0000 (+0000)
Subject: Fixed positioning
X-Git-Url: https://git.tokkee.org/?a=commitdiff_plain;h=8b812be1a0b7a56f9af61ce109a0138baa79694d;p=gosa.git

Fixed positioning


git-svn-id: https://oss.gonicus.de/repositories/gosa/trunk@18150 594d385d-05f5-0310-b6e9-bd551577e9d8
---

diff --git a/gosa-core/html/include/tooltip-v0.2.js b/gosa-core/html/include/tooltip-v0.2.js
deleted file mode 100644
index 56d883537..000000000
--- a/gosa-core/html/include/tooltip-v0.2.js
+++ /dev/null
@@ -1,208 +0,0 @@
-/*
- * Copyright (c) 2006 Jonathan Weiss <jw@innerewut.de>
- *
- * 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 <jw@innerewut.de> 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: 
- *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
- *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
- *   <script type="text/javascript">
- *     // with valid DOM id
- *     var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
- *
- *     // with text
- *     var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description')
- *
- *     // create popups for each element with a title attribute
- *    Event.observe(window,"load",function() {
- *      $$("*").findAll(function(node){
- *        return node.getAttribute('title');
- *      }).each(function(node){
- *        new Tooltip(node,node.title);
- *        node.removeAttribute("title");
- *      });
- *    });
- *    
- *   </script>
- * 
- * Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
- * be shown. On o mouseOut the tooltip disappears. 
- * 
- * Example:
- * 
- *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
- *   <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
- *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
- *
- *   <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
- *     Detail infos on product 1....<br />
- *   </div>
- *
- *   <div id='product_1'>
- *     This is product 1
- *   </div>
- *
- *   <script type="text/javascript">
- *     var my_tooltip = new Tooltip('product_1', 'tooltip')
- *   </script>
- *
- * 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/include/tooltip.js b/gosa-core/html/include/tooltip.js
new file mode 100644
index 000000000..56d883537
--- /dev/null
+++ b/gosa-core/html/include/tooltip.js
@@ -0,0 +1,208 @@
+/*
+ * Copyright (c) 2006 Jonathan Weiss <jw@innerewut.de>
+ *
+ * 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 <jw@innerewut.de> 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: 
+ *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
+ *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
+ *   <script type="text/javascript">
+ *     // with valid DOM id
+ *     var my_tooltip = new Tooltip('id_of_trigger_element', 'id_of_tooltip_to_show_element')
+ *
+ *     // with text
+ *     var my_other_tooltip = new Tooltip('id_of_trigger_element', 'a nice description')
+ *
+ *     // create popups for each element with a title attribute
+ *    Event.observe(window,"load",function() {
+ *      $$("*").findAll(function(node){
+ *        return node.getAttribute('title');
+ *      }).each(function(node){
+ *        new Tooltip(node,node.title);
+ *        node.removeAttribute("title");
+ *      });
+ *    });
+ *    
+ *   </script>
+ * 
+ * Now whenever you trigger a mouseOver on the `trigger` element, the tooltip element will
+ * be shown. On o mouseOut the tooltip disappears. 
+ * 
+ * Example:
+ * 
+ *   <script src="/javascripts/prototype.js" type="text/javascript"></script>
+ *   <script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
+ *   <script src="/javascripts/tooltip.js" type="text/javascript"></script>
+ *
+ *   <div id='tooltip' style="display:none; margin: 5px; background-color: red;">
+ *     Detail infos on product 1....<br />
+ *   </div>
+ *
+ *   <div id='product_1'>
+ *     This is product 1
+ *   </div>
+ *
+ *   <script type="text/javascript">
+ *     var my_tooltip = new Tooltip('product_1', 'tooltip')
+ *   </script>
+ *
+ * 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/plugins/addons/configViewer/class_configViewer.inc b/gosa-core/plugins/addons/configViewer/class_configViewer.inc
index edddd802f..ec2a187ec 100644
--- a/gosa-core/plugins/addons/configViewer/class_configViewer.inc
+++ b/gosa-core/plugins/addons/configViewer/class_configViewer.inc
@@ -118,7 +118,7 @@ class configViewer extends management
         $title = _("No description");
         if(isset($description[0])) $title = htmlentities($description[0],ENT_COMPAT, 'UTF-8');
         $title = preg_replace("/\n/", "<br>", $title);
-        $tooltip = "<div id='tooltip_{$id}' class='tooltip'>".$title."</div>";
+        $tooltip = "<div id='tooltip_{$id}' class='tooltip' style='display:none'>".$title."</div>";
         return($tooltip."<span title='tooltip_{$id}'>{$cn[0]}</span>");
     }
     static function propertyValue($class,$cn,$value,$type,$default,$defaults)
diff --git a/gosa-core/plugins/addons/configViewer/property-list.tpl b/gosa-core/plugins/addons/configViewer/property-list.tpl
index 552db9178..56368e1f2 100644
--- a/gosa-core/plugins/addons/configViewer/property-list.tpl
+++ b/gosa-core/plugins/addons/configViewer/property-list.tpl
@@ -1,4 +1,4 @@
-<script language="javascript" src="include/tooltip-v0.2.js" type="text/javascript"></script>
+<script language="javascript" src="include/tooltip.js" type="text/javascript"></script>
 
 <div id="mainlist">
 
@@ -23,7 +23,9 @@
       return node.getAttribute('title');
     }).each(function(node){
         var test = node.title;
-      new Tooltip(node,test);
+      var t = new Tooltip(node,test);
+      t.options.delta_x = -150;
+      t.options.delta_y = -50;
       node.removeAttribute("title");
     });
   });