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 (file)
index 56d8835..0000000
--- 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 (file)
index 0000000..56d8835
--- /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 edddd802f29cf8b119f2ee2fa3e40d1001aa07a2..ec2a187ec67d1bf45937de6613659f7b23604684 100644 (file)
--- 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 552db9178507f1f7a57958818748f998e3b3eac8..56368e1f2a5c6a682ce89a263f20eaaa7544d075 100644 (file)
--- 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");
     });
   });