[Sommaire] [Imprimer]

   1  var Position = {
   2    // set to true if needed, warning: firefox performance problems
   3    // NOT neeeded for page scrolling, only if draggable contained in
   4    // scrollable elements
   5    includeScrollOffsets: false, 
   6  
   7    // must be called before calling withinIncludingScrolloffset, every time the
   8    // page is scrolled
   9    prepare: function() {
  10      this.deltaX =  window.pageXOffset 
  11                  || document.documentElement.scrollLeft 
  12                  || document.body.scrollLeft 
  13                  || 0;
  14      this.deltaY =  window.pageYOffset 
  15                  || document.documentElement.scrollTop 
  16                  || document.body.scrollTop 
  17                  || 0;
  18    },
  19  
  20    realOffset: function(element) {
  21      var valueT = 0, valueL = 0;
  22      do {
  23        valueT += element.scrollTop  || 0;
  24        valueL += element.scrollLeft || 0; 
  25        element = element.parentNode;
  26      } while (element);
  27      return [valueL, valueT];
  28    },
  29  
  30    cumulativeOffset: function(element) {
  31      var valueT = 0, valueL = 0;
  32      do {
  33        valueT += element.offsetTop  || 0;
  34        valueL += element.offsetLeft || 0;
  35        element = element.offsetParent;
  36      } while (element);
  37      return [valueL, valueT];
  38    },
  39  
  40    positionedOffset: function(element) {
  41      var valueT = 0, valueL = 0;
  42      do {
  43        valueT += element.offsetTop  || 0;
  44        valueL += element.offsetLeft || 0;
  45        element = element.offsetParent;
  46        if (element) {
  47          p = Element.getStyle(element, 'position');
  48          if (p == 'relative' || p == 'absolute') break;
  49        }
  50      } while (element);
  51      return [valueL, valueT];
  52    },
  53    
  54    offsetParent: function(element) {
  55      if (element.offsetParent) return element.offsetParent;
  56      if (element == document.body) return element;
  57  
  58      while ((element = element.parentNode) && element != document.body)
  59        if (Element.getStyle(element, 'position') != 'static')
  60          return element;
  61  
  62      return document.body;
  63    },
  64    
  65    // caches x/y coordinate pair to use with overlap
  66    within: function(element, x, y) {
  67      if (this.includeScrollOffsets)
  68        return this.withinIncludingScrolloffsets(element, x, y);
  69      this.xcomp = x;
  70      this.ycomp = y;
  71      this.offset = this.cumulativeOffset(element);
  72  
  73      return (y >= this.offset[1] &&
  74              y <  this.offset[1] + element.offsetHeight &&
  75              x >= this.offset[0] && 
  76              x <  this.offset[0] + element.offsetWidth);
  77    },
  78  
  79    withinIncludingScrolloffsets: function(element, x, y) {
  80      var offsetcache = this.realOffset(element);
  81  
  82      this.xcomp = x + offsetcache[0] - this.deltaX;
  83      this.ycomp = y + offsetcache[1] - this.deltaY;
  84      this.offset = this.cumulativeOffset(element);
  85  
  86      return (this.ycomp >= this.offset[1] &&
  87              this.ycomp <  this.offset[1] + element.offsetHeight &&
  88              this.xcomp >= this.offset[0] && 
  89              this.xcomp <  this.offset[0] + element.offsetWidth);
  90    },
  91  
  92    // within must be called directly before
  93    overlap: function(mode, element) {  
  94      if (!mode) return 0;  
  95      if (mode == 'vertical') 
  96        return ((this.offset[1] + element.offsetHeight) - this.ycomp) / 
  97          element.offsetHeight;
  98      if (mode == 'horizontal')
  99        return ((this.offset[0] + element.offsetWidth) - this.xcomp) / 
 100          element.offsetWidth;
 101    },
 102  
 103    clone: function(source, target) {
 104      source = $(source);
 105      target = $(target);
 106      target.style.position = 'absolute';
 107      var offsets = this.cumulativeOffset(source);
 108      target.style.top    = offsets[1] + 'px';
 109      target.style.left   = offsets[0] + 'px';
 110      target.style.width  = source.offsetWidth + 'px';
 111      target.style.height = source.offsetHeight + 'px';
 112    },
 113  
 114    page: function(forElement) {
 115      var valueT = 0, valueL = 0;
 116  
 117      var element = forElement;
 118      do {
 119        valueT += element.offsetTop  || 0;
 120        valueL += element.offsetLeft || 0;
 121  
 122        // Safari fix
 123        if (element.offsetParent==document.body)
 124          if (Element.getStyle(element,'position')=='absolute') break;
 125  
 126      } while (element = element.offsetParent);
 127  
 128      element = forElement;
 129      do {
 130        valueT -= element.scrollTop  || 0;
 131        valueL -= element.scrollLeft || 0;    
 132      } while (element = element.parentNode);
 133  
 134      return [valueL, valueT];
 135    },
 136  
 137    clone: function(source, target) {
 138      var options = Object.extend({
 139        setLeft:    true,
 140        setTop:     true,
 141        setWidth:   true,
 142        setHeight:  true,
 143        offsetTop:  0,
 144        offsetLeft: 0
 145      }, arguments[2] || {})
 146  
 147      // find page position of source
 148      source = $(source);
 149      var p = Position.page(source);
 150  
 151      // find coordinate system to use
 152      target = $(target);
 153      var delta = [0, 0];
 154      var parent = null;
 155      // delta [0,0] will do fine with position: fixed elements, 
 156      // position:absolute needs offsetParent deltas
 157      if (Element.getStyle(target,'position') == 'absolute') {
 158        parent = Position.offsetParent(target);
 159        delta = Position.page(parent);
 160      }
 161  
 162      // correct by body offsets (fixes Safari)
 163      if (parent == document.body) {
 164        delta[0] -= document.body.offsetLeft;
 165        delta[1] -= document.body.offsetTop; 
 166      }
 167  
 168      // set position
 169      if(options.setLeft)   target.style.left  = (p[0] - delta[0] + options.offsetLeft) + 'px';
 170      if(options.setTop)    target.style.top   = (p[1] - delta[1] + options.offsetTop) + 'px';
 171      if(options.setWidth)  target.style.width = source.offsetWidth + 'px';
 172      if(options.setHeight) target.style.height = source.offsetHeight + 'px';
 173    },
 174  
 175    absolutize: function(element) {
 176      element = $(element);
 177      if (element.style.position == 'absolute') return;
 178      Position.prepare();
 179  
 180      var offsets = Position.positionedOffset(element);
 181      var top     = offsets[1];
 182      var left    = offsets[0];
 183      var width   = element.clientWidth;
 184      var height  = element.clientHeight;
 185  
 186      element._originalLeft   = left - parseFloat(element.style.left  || 0);
 187      element._originalTop    = top  - parseFloat(element.style.top || 0);
 188      element._originalWidth  = element.style.width;
 189      element._originalHeight = element.style.height;
 190  
 191      element.style.position = 'absolute';
 192      element.style.top    = top + 'px';;
 193      element.style.left   = left + 'px';;
 194      element.style.width  = width + 'px';;
 195      element.style.height = height + 'px';;
 196    },
 197  
 198    relativize: function(element) {
 199      element = $(element);
 200      if (element.style.position == 'relative') return;
 201      Position.prepare();
 202  
 203      element.style.position = 'relative';
 204      var top  = parseFloat(element.style.top  || 0) - (element._originalTop || 0);
 205      var left = parseFloat(element.style.left || 0) - (element._originalLeft || 0);
 206  
 207      element.style.top    = top + 'px';
 208      element.style.left   = left + 'px';
 209      element.style.height = element._originalHeight;
 210      element.style.width  = element._originalWidth;
 211    }
 212  }
 213  
 214  // Safari returns margins on body which is incorrect if the child is absolutely
 215  // positioned.  For performance reasons, redefine Position.cumulativeOffset for
 216  // KHTML/WebKit only.
 217  if (/Konqueror|Safari|KHTML/.test(navigator.userAgent)) {
 218    Position.cumulativeOffset = function(element) {
 219      var valueT = 0, valueL = 0;
 220      do {
 221        valueT += element.offsetTop  || 0;
 222        valueL += element.offsetLeft || 0;
 223        if (element.offsetParent == document.body)
 224          if (Element.getStyle(element, 'position') == 'absolute') break;
 225          
 226        element = element.offsetParent;
 227      } while (element);
 228      
 229      return [valueL, valueT];
 230    }
 231  }
 232  
 233