Changeset ed60fef in github


Ignore:
Timestamp:
Apr 13, 2010 6:17:39 AM (3 years ago)
Author:
alecpl <alec@…>
Branches:
master, HEAD, courier-fix, dev-browser-capabilities, pdo, release-0.6, release-0.7, release-0.8
Children:
6c11ee2
Parents:
8e3a603
Message:
  • Code cleanup + fixed IE7,8 error when moving splitter out of the screen
  • Improved iframes handling (#1486610)
File:
1 edited

Legend:

Unmodified
Added
Removed

  • skins/default/splitter.js

    ra4865ad red60fef  
    66 */ 
    77function rcube_splitter(attrib) 
    8   { 
     8{ 
    99  this.p1id = attrib.p1; 
    1010  this.p2id = attrib.p2; 
    … …  
    1818 
    1919  this.init = function() 
    20     { 
     20  { 
    2121    this.p1 = document.getElementById(this.p1id); 
    2222    this.p2 = document.getElementById(this.p2id); 
    … …  
    2626    this.p2pos = this.relative ? $(this.p2).position() : $(this.p2).offset(); 
    2727     
    28     if (this.horizontal) 
    29       { 
     28    if (this.horizontal) { 
    3029      var top = this.p1pos.top + this.p1.offsetHeight; 
    3130      this.layer = new rcube_layer(this.id, {x: 0, y: top, height: 10,  
    3231            width: '100%', vis: 1, parent: this.p1.parentNode}); 
    33       } 
    34     else 
    35       { 
     32    } 
     33    else { 
    3634      var left = this.p1pos.left + this.p1.offsetWidth; 
    3735      this.layer = new rcube_layer(this.id, {x: left, y: 0, width: 10,  
    3836            height: '100%', vis: 1,  parent: this.p1.parentNode}); 
    39       } 
     37    } 
    4038 
    4139    this.elm = this.layer.elm; 
    … …  
    5048    // read saved position from cookie 
    5149    var cookie = bw.get_cookie(this.id); 
    52     if (cookie && !isNaN(cookie)) 
    53       { 
     50    if (cookie && !isNaN(cookie)) { 
    5451      this.pos = parseFloat(cookie); 
    5552      this.resize(); 
    56       } 
    57     else if (this.pos) 
    58       { 
     53    } 
     54    else if (this.pos) { 
    5955      this.resize(); 
    6056      this.set_cookie(); 
    61       } 
    62     }; 
     57    } 
     58  }; 
    6359 
    6460  /** 
    … …  
    6763   */ 
    6864  this.resize = function() 
    69     { 
    70     if (this.horizontal) 
    71       { 
     65  { 
     66    if (this.horizontal) { 
    7267      var lh = this.layer.height - this.offset * 2; 
    7368      this.p1.style.height = Math.floor(this.pos - this.p1pos.top - lh / 2) + 'px'; 
    7469      this.p2.style.top = Math.ceil(this.pos + lh / 2) + 'px'; 
    7570      this.layer.move(this.layer.x, Math.round(this.pos - lh / 2 + 1)); 
    76       if (bw.ie) 
    77         { 
     71      if (bw.ie) { 
    7872        var new_height = parseInt(this.p2.parentNode.offsetHeight, 10) - parseInt(this.p2.style.top, 10) - (bw.ie8 ? 2 : 0); 
    79         this.p2.style.height = (new_height > 0 ? new_height : 0) +'px'; 
    80         } 
     73        this.p2.style.height = (new_height > 0 ? new_height : 0) + 'px'; 
    8174      } 
    82     else 
    83       { 
     75    } 
     76    else { 
    8477      this.p1.style.width = Math.floor(this.pos - this.p1pos.left - this.layer.width / 2) + 'px'; 
    8578      this.p2.style.left = Math.ceil(this.pos + this.layer.width / 2) + 'px'; 
    8679      this.layer.move(Math.round(this.pos - this.layer.width / 2 + 1), this.layer.y); 
    87       if (bw.ie) 
    88         this.p2.style.width = parseInt(this.p2.parentNode.offsetWidth, 10) - parseInt(this.p2.style.left, 10) + 'px'; 
     80      if (bw.ie) { 
     81        var new_width = parseInt(this.p2.parentNode.offsetWidth, 10) - parseInt(this.p2.style.left, 10) ; 
     82        this.p2.style.width = (new_width > 0 ? new_width : 0) + 'px'; 
    8983      } 
    90     }; 
     84    } 
     85  }; 
    9186 
    9287  /** 
    … …  
    9489   */ 
    9590  this.onDragStart = function(e) 
    96     { 
     91  { 
    9792    // disable text selection while dragging the splitter 
    9893    if (window.webkit || bw.safari) 
    … …  
    107102    rcube_event.add_listener({element:document, event:'mouseup', object:this, method:'onDragStop'}); 
    108103 
    109     // need to listen in any iframe documents too, b/c otherwise the splitter stops moving when we move over an iframe 
    110     var iframes = document.getElementsByTagName('iframe'); 
    111     this.iframe_events = Object(); 
    112     for (var n in iframes) 
    113       { 
    114       var iframedoc = null; 
    115       if (iframes[n].contentDocument) 
    116         iframedoc = iframes[n].contentDocument; 
    117       else if (iframes[n].contentWindow) 
    118         iframedoc = iframes[n].contentWindow.document; 
    119       else if (iframes[n].document) 
    120         iframedoc = iframes[n].document; 
    121       if (iframedoc) 
    122         { 
    123         // I don't use the add_listener function for this one because I need to create closures to fetch 
    124         // the position of each iframe when the event is received 
    125         var s = this; 
    126         var id = '#'+iframes[n].id; 
    127         this.iframe_events[n] = function(e){ e._offset = $(id).offset(); return s.onDrag(e); }; 
    128  
    129         if (iframedoc.addEventListener) 
    130           iframedoc.addEventListener('mousemove', this.iframe_events[n], false); 
    131         else if (iframes[n].attachEvent) 
    132           iframedoc.attachEvent('onmousemove', this.iframe_events[n]); 
    133         else 
    134           iframedoc.onmousemove = this.iframe_events[n]; 
    135  
    136         rcube_event.add_listener({element:iframedoc, event:'mouseup', object:this, method:'onDragStop'}); 
    137         } 
    138       } 
    139     } 
     104    // enable dragging above iframes 
     105    $('iframe').each(function() { 
     106      $('<div class="iframe-splitter-fix"></div>') 
     107        .css({background: '#fff', 
     108          width: this.offsetWidth+'px', height: this.offsetHeight+'px', 
     109          position: 'absolute', opacity: '0.001', zIndex: 1000 
     110        }) 
     111        .css($(this).offset()) 
     112        .appendTo('body'); 
     113      }); 
     114  }; 
    140115 
    141116  /** 
    … …  
    143118   */ 
    144119  this.onDrag = function(e) 
    145     { 
    146     if (!this.drag_active) return false; 
     120  { 
     121    if (!this.drag_active) 
     122      return false; 
    147123 
    148124    var pos = rcube_event.get_mouse_pos(e); 
    149125 
    150     if (this.relative) 
    151       { 
     126    if (this.relative) { 
    152127      var parent = $(this.p1.parentNode).offset(); 
    153128      pos.x -= parent.left; 
    154129      pos.y -= parent.top; 
    155       } 
     130    } 
    156131 
    157     if (this.horizontal) 
    158       { 
    159       if (((pos.y - this.layer.height * 1.5) > this.p1pos.top) && ((pos.y + this.layer.height * 1.5) < (this.p2pos.top + this.p2.offsetHeight))) 
    160         { 
     132    if (this.horizontal) { 
     133      if (((pos.y - this.layer.height * 1.5) > this.p1pos.top) && ((pos.y + this.layer.height * 1.5) < (this.p2pos.top + this.p2.offsetHeight))) { 
    161134        this.pos = pos.y; 
    162135        this.resize(); 
    163         } 
    164136      } 
    165     else 
    166       { 
    167       if (((pos.x - this.layer.width * 1.5) > this.p1pos.left) && ((pos.x + this.layer.width * 1.5) < (this.p2pos.left + this.p2.offsetWidth))) 
    168         { 
     137    } 
     138    else { 
     139      if (((pos.x - this.layer.width * 1.5) > this.p1pos.left) && ((pos.x + this.layer.width * 1.5) < (this.p2pos.left + this.p2.offsetWidth))) { 
    169140        this.pos = pos.x; 
    170141        this.resize(); 
    171         } 
    172142      } 
     143    } 
    173144 
    174145    this.p1pos = this.relative ? $(this.p1).position() : $(this.p1).offset(); 
    175146    this.p2pos = this.relative ? $(this.p2).position() : $(this.p2).offset(); 
    176147    return false; 
    177     }; 
     148  }; 
    178149 
    179150  /** 
    … …  
    181152   */ 
    182153  this.onDragStop = function(e) 
    183     { 
     154  { 
    184155    // resume the ability to highlight text 
    185     if(window.webkit || bw.safari) 
     156    if (window.webkit || bw.safari) 
    186157      document.body.style.webkitUserSelect = 'auto'; 
    187158 
    … …  
    191162    this.drag_active = false; 
    192163 
    193     var iframes = document.getElementsByTagName('iframe'); 
    194  
    195     for (var n in iframes) 
    196       { 
    197       var iframedoc; 
    198       if (iframes[n].contentDocument) 
    199         iframedoc = iframes[n].contentDocument; 
    200       else if (iframes[n].contentWindow) 
    201         iframedoc = iframes[n].contentWindow.document; 
    202       else if (iframes[n].document) 
    203         iframedoc = iframes[n].document; 
    204  
    205       if (iframedoc) 
    206         { 
    207         if (this.iframe_events[n]) { 
    208           if (iframedoc.removeEventListener) 
    209             iframedoc.removeEventListener('mousemove', this.iframe_events[n], false); 
    210           else if (iframedoc.detachEvent) 
    211             iframedoc.detachEvent('onmousemove', this.iframe_events[n]); 
    212           else 
    213             iframedoc.onmousemove = null; 
    214           } 
    215  
    216         rcube_event.remove_listener({element:iframedoc, event:'mouseup', object:this, method:'onDragStop'}); 
    217         } 
    218       } 
     164    // remove temp divs 
     165    $('div.iframe-splitter-fix').each(function() { this.parentNode.removeChild(this); }); 
    219166 
    220167    this.set_cookie(); 
    221168 
    222169    return bw.safari ? true : rcube_event.cancel(e); 
    223     }; 
     170  }; 
    224171 
    225172  /** 
    … …  
    227174   */ 
    228175  this.onResize = function(e) 
    229     { 
    230     if (this.horizontal) 
    231       { 
     176  { 
     177    if (this.horizontal) { 
    232178      var new_height = parseInt(this.p2.parentNode.offsetHeight, 10) - parseInt(this.p2.style.top, 10) - (bw.ie8 ? 2 : 0); 
    233179      this.p2.style.height = (new_height > 0 ? new_height : 0) +'px'; 
    234       } 
    235     else 
    236       this.p2.style.width = parseInt(this.p2.parentNode.offsetWidth, 10) - parseInt(this.p2.style.left, 10) + 'px'; 
    237     }; 
     180    } 
     181    else { 
     182      var new_width = parseInt(this.p2.parentNode.offsetWidth, 10) - parseInt(this.p2.style.left, 10); 
     183      this.p2.style.width = (new_width > 0 ? new_width : 0) + 'px'; 
     184    } 
     185  }; 
    238186 
     187  /** 
     188   * Saves splitter position in cookie 
     189   */ 
    239190  this.set_cookie = function() 
    240     { 
    241     // save state in cookie 
     191  { 
    242192    var exp = new Date(); 
    243193    exp.setYear(exp.getFullYear() + 1); 
    244194    bw.set_cookie(this.id, this.pos, exp); 
    245     }; 
     195  }; 
    246196 
    247   } // end class rcube_splitter 
     197} // end class rcube_splitter 
Note: See TracChangeset for help on using the changeset viewer.