openlayers/lib/OpenLayers/BaseTypes/Element.js

   1 /* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
   2  * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the
   3  * full text of the license. */
   4
   5 /**
   6  * Namespace: OpenLayers.Element
   7  */
   8 OpenLayers.Element = {
   9
  10     /**
  11      * APIFunction: visible
  12      *
  13      * Parameters:
  14      * element - {DOMElement}
  15      *
  16      * Returns:
  17      * {Boolean} Is the element visible?
  18      */
  19     visible: function(element) {
  20         return OpenLayers.Util.getElement(element).style.display != 'none';
  21     },
  22
  23     /**
  24      * APIFunction: toggle
  25      * Toggle the visibility of element(s) passed in
  26      *
  27      * Parameters:
  28      * element - {DOMElement} Actually user can pass any number of elements
  29      */
  30     toggle: function() {
  31         for (var i=0, len=arguments.length; i<len; i++) {
  32             var element = OpenLayers.Util.getElement(arguments[i]);
  33             var display = OpenLayers.Element.visible(element) ? 'hide'
  34                                                               : 'show';
  35             OpenLayers.Element[display](element);
  36         }
  37     },
  38
  39
  40     /**
  41      * APIFunction: hide
  42      * Hide element(s) passed in
  43      *
  44      * Parameters:
  45      * element - {DOMElement} Actually user can pass any number of elements
  46      */
  47     hide: function() {
  48         for (var i=0, len=arguments.length; i<len; i++) {
  49             var element = OpenLayers.Util.getElement(arguments[i]);
  50             element.style.display = 'none';
  51         }
  52     },
  53
  54     /**
  55      * APIFunction: show
  56      * Show element(s) passed in
  57      *
  58      * Parameters:
  59      * element - {DOMElement} Actually user can pass any number of elements
  60      */
  61     show: function() {
  62         for (var i=0, len=arguments.length; i<len; i++) {
  63             var element = OpenLayers.Util.getElement(arguments[i]);
  64             element.style.display = '';
  65         }
  66     },
  67
  68     /**
  69      * APIFunction: remove
  70      * Remove the specified element from the DOM.
  71      *
  72      * Parameters:
  73      * element - {DOMElement}
  74      */
  75     remove: function(element) {
  76         element = OpenLayers.Util.getElement(element);
  77         element.parentNode.removeChild(element);
  78     },
  79
  80     /**
  81      * APIFunction: getHeight
  82      *
  83      * Parameters:
  84      * element - {DOMElement}
  85      *
  86      * Returns:
  87      * {Integer} The offset height of the element passed in
  88      */
  89     getHeight: function(element) {
  90         element = OpenLayers.Util.getElement(element);
  91         return element.offsetHeight;
  92     },
  93
  94     /**
  95      * APIFunction: getDimensions
  96      *
  97      * Parameters:
  98      * element - {DOMElement}
  99      *
 100      * Returns:
 101      * {Object} Object with 'width' and 'height' properties which are the
 102      *          dimensions of the element passed in.
 103      */
 104     getDimensions: function(element) {
 105         element = OpenLayers.Util.getElement(element);
 106         if (OpenLayers.Element.getStyle(element, 'display') != 'none') {
 107             return {width: element.offsetWidth, height: element.offsetHeight};
 108         }
 109
 110         // All *Width and *Height properties give 0 on elements with display none,
 111         // so enable the element temporarily
 112         var els = element.style;
 113         var originalVisibility = els.visibility;
 114         var originalPosition = els.position;
 115         els.visibility = 'hidden';
 116         els.position = 'absolute';
 117         els.display = '';
 118         var originalWidth = element.clientWidth;
 119         var originalHeight = element.clientHeight;
 120         els.display = 'none';
 121         els.position = originalPosition;
 122         els.visibility = originalVisibility;
 123         return {width: originalWidth, height: originalHeight};
 124     },
 125
 126     /**
 127      * Function: hasClass
 128      * Tests if an element has the given CSS class name.
 129      *
 130      * Parameters:
 131      * element - {DOMElement} A DOM element node.
 132      * name - {String} The CSS class name to search for.
 133      *
 134      * Returns:
 135      * {Boolean} The element has the given class name.
 136      */
 137     hasClass: function(element, name) {
 138         var names = element.className;
 139         return (!!names && new RegExp("(^|\\s)" + name + "(\\s|$)").test(names));
 140     },
 141
 142     /**
 143      * Function: addClass
 144      * Add a CSS class name to an element.  Safe where element already has
 145      *     the class name.
 146      *
 147      * Parameters:
 148      * element - {DOMElement} A DOM element node.
 149      * name - {String} The CSS class name to add.
 150      *
 151      * Returns:
 152      * {DOMElement} The element.
 153      */
 154     addClass: function(element, name) {
 155         if(!OpenLayers.Element.hasClass(element, name)) {
 156             element.className += (element.className ? " " : "") + name;
 157         }
 158         return element;
 159     },
 160
 161     /**
 162      * Function: removeClass
 163      * Remove a CSS class name from an element.  Safe where element does not
 164      *     have the class name.
 165      *
 166      * Parameters:
 167      * element - {DOMElement} A DOM element node.
 168      * name - {String} The CSS class name to remove.
 169      *
 170      * Returns:
 171      * {DOMElement} The element.
 172      */
 173     removeClass: function(element, name) {
 174         var names = element.className;
 175         if(names) {
 176             element.className = OpenLayers.String.trim(
 177                 names.replace(
 178                     new RegExp("(^|\\s+)" + name + "(\\s+|$)"), " "
 179                 )
 180             );
 181         }
 182         return element;
 183     },
 184
 185     /**
 186      * Function: toggleClass
 187      * Remove a CSS class name from an element if it exists.  Add the class name
 188      *     if it doesn't exist.
 189      *
 190      * Parameters:
 191      * element - {DOMElement} A DOM element node.
 192      * name - {String} The CSS class name to toggle.
 193      *
 194      * Returns:
 195      * {DOMElement} The element.
 196      */
 197     toggleClass: function(element, name) {
 198         if(OpenLayers.Element.hasClass(element, name)) {
 199             OpenLayers.Element.removeClass(element, name);
 200         } else {
 201             OpenLayers.Element.addClass(element, name);
 202         }
 203         return element;
 204     },
 205
 206     /**
 207      * APIFunction: getStyle
 208      *
 209      * Parameters:
 210      * element - {DOMElement}
 211      * style - {?}
 212      *
 213      * Returns:
 214      * {?}
 215      */
 216     getStyle: function(element, style) {
 217         element = OpenLayers.Util.getElement(element);
 218
 219         var value = null;
 220         if (element && element.style) {
 221             value = element.style[OpenLayers.String.camelize(style)];
 222             if (!value) {
 223                 if (document.defaultView &&
 224                     document.defaultView.getComputedStyle) {
 225
 226                     var css = document.defaultView.getComputedStyle(element, null);
 227                     value = css ? css.getPropertyValue(style) : null;
 228                 } else if (element.currentStyle) {
 229                     value = element.currentStyle[OpenLayers.String.camelize(style)];
 230                 }
 231             }
 232
 233             var positions = ['left', 'top', 'right', 'bottom'];
 234             if (window.opera &&
 235                 (OpenLayers.Util.indexOf(positions,style) != -1) &&
 236                 (OpenLayers.Element.getStyle(element, 'position') == 'static')) {
 237                 value = 'auto';
 238             }
 239         }
 240
 241         return value == 'auto' ? null : value;
 242     }
 243
 244 };