Refactored classic skin splitter code to fix it for IE<9

pull/157/head
Aleksander Machniak 11 years ago
parent 7184b3a0e1
commit fac292a410

@ -17,6 +17,8 @@ function rcube_splitter(attrib)
this.drag_active = false; this.drag_active = false;
this.callback = attrib.callback; this.callback = attrib.callback;
var me = this;
this.init = function() this.init = function()
{ {
this.p1 = document.getElementById(this.p1id); this.p1 = document.getElementById(this.p1id);
@ -42,9 +44,9 @@ function rcube_splitter(attrib)
this.elm.unselectable = 'on'; this.elm.unselectable = 'on';
// add the mouse event listeners // add the mouse event listeners
rcube_event.add_listener({element: this.elm, event:'mousedown', object:this, method:'onDragStart'}); $(this.elm).mousedown(onDragStart);
if (bw.ie) if (bw.ie)
rcube_event.add_listener({element: window, event:'resize', object:this, method:'onResize'}); $(window).resize(onResize);
// read saved position from cookie // read saved position from cookie
var cookie = rcmail.get_cookie(this.id); var cookie = rcmail.get_cookie(this.id);
@ -90,19 +92,19 @@ function rcube_splitter(attrib)
/** /**
* Handler for mousedown events * Handler for mousedown events
*/ */
this.onDragStart = function(e) function onDragStart(e)
{ {
me.drag_active = true;
// disable text selection while dragging the splitter // disable text selection while dragging the splitter
if (bw.konq || bw.chrome || bw.safari) if (bw.konq || bw.chrome || bw.safari)
document.body.style.webkitUserSelect = 'none'; document.body.style.webkitUserSelect = 'none';
this.p1pos = this.relative ? $(this.p1).position() : $(this.p1).offset(); me.p1pos = me.relative ? $(me.p1).position() : $(me.p1).offset();
this.p2pos = this.relative ? $(this.p2).position() : $(this.p2).offset(); me.p2pos = me.relative ? $(me.p2).position() : $(me.p2).offset();
this.drag_active = true;
// start listening to mousemove events // start listening to mousemove events
rcube_event.add_listener({element:document, event:'mousemove', object:this, method:'onDrag'}); $(document).bind('mousemove.'+me.id, onDrag).bind('mouseup.'+me.id, onDragStop);
rcube_event.add_listener({element:document, event:'mouseup', object:this, method:'onDragStop'});
// enable dragging above iframes // enable dragging above iframes
$('iframe').each(function() { $('iframe').each(function() {
@ -119,68 +121,64 @@ function rcube_splitter(attrib)
/** /**
* Handler for mousemove events * Handler for mousemove events
*/ */
this.onDrag = function(e) function onDrag(e)
{ {
if (!this.drag_active) if (!me.drag_active)
return false; return false;
ref = this;
// with timing events dragging action is more responsive // with timing events dragging action is more responsive
window.clearTimeout(this.ts); window.clearTimeout(me.ts);
this.ts = window.setTimeout(function() { ref.onDragAction(e); }, 1); me.ts = window.setTimeout(function() { onDragAction(e); }, 1);
return false; return false;
}; };
this.onDragAction = function(e) function onDragAction(e)
{ {
var pos = rcube_event.get_mouse_pos(e); var pos = rcube_event.get_mouse_pos(e);
if (this.relative) { if (me.relative) {
var parent = $(this.p1.parentNode).offset(); var parent = $(me.p1.parentNode).offset();
pos.x -= parent.left; pos.x -= parent.left;
pos.y -= parent.top; pos.y -= parent.top;
} }
if (this.horizontal) { if (me.horizontal) {
if (((pos.y - this.layer.height * 1.5) > this.p1pos.top) && ((pos.y + this.layer.height * 1.5) < (this.p2pos.top + this.p2.offsetHeight))) { if (((pos.y - me.layer.height * 1.5) > me.p1pos.top) && ((pos.y + me.layer.height * 1.5) < (me.p2pos.top + me.p2.offsetHeight))) {
this.pos = pos.y; me.pos = pos.y;
this.resize(); me.resize();
} }
} }
else { else if (((pos.x - me.layer.width * 1.5) > me.p1pos.left) && ((pos.x + me.layer.width * 1.5) < (me.p2pos.left + me.p2.offsetWidth))) {
if (((pos.x - this.layer.width * 1.5) > this.p1pos.left) && ((pos.x + this.layer.width * 1.5) < (this.p2pos.left + this.p2.offsetWidth))) { me.pos = pos.x;
this.pos = pos.x; me.resize();
this.resize();
}
} }
this.p1pos = this.relative ? $(this.p1).position() : $(this.p1).offset(); me.p1pos = me.relative ? $(me.p1).position() : $(me.p1).offset();
this.p2pos = this.relative ? $(this.p2).position() : $(this.p2).offset(); me.p2pos = me.relative ? $(me.p2).position() : $(me.p2).offset();
}; };
/** /**
* Handler for mouseup events * Handler for mouseup events
*/ */
this.onDragStop = function(e) function onDragStop(e)
{ {
me.drag_active = false;
// resume the ability to highlight text // resume the ability to highlight text
if (bw.konq || bw.chrome || bw.safari) if (bw.konq || bw.chrome || bw.safari)
document.body.style.webkitUserSelect = 'auto'; document.body.style.webkitUserSelect = 'auto';
// cancel the listening for drag events // cancel the listening for drag events
rcube_event.remove_listener({element:document, event:'mousemove', object:this, method:'onDrag'}); $(document).unbind('.' + me.id);
rcube_event.remove_listener({element:document, event:'mouseup', object:this, method:'onDragStop'});
this.drag_active = false;
// remove temp divs // remove temp divs
$('div.iframe-splitter-fix').each(function() { this.parentNode.removeChild(this); }); $('div.iframe-splitter-fix').remove();
this.set_cookie(); me.set_cookie();
if (typeof this.callback == 'function') if (typeof me.callback == 'function')
this.callback(this); me.callback(me);
return bw.safari ? true : rcube_event.cancel(e); return bw.safari ? true : rcube_event.cancel(e);
}; };
@ -188,15 +186,15 @@ function rcube_splitter(attrib)
/** /**
* Handler for window resize events * Handler for window resize events
*/ */
this.onResize = function(e) function onResize(e)
{ {
if (this.horizontal) { if (me.horizontal) {
var new_height = parseInt(this.p2.parentNode.offsetHeight, 10) - parseInt(this.p2.style.top, 10) - (bw.ie8 ? 2 : 0); var new_height = parseInt(me.p2.parentNode.offsetHeight, 10) - parseInt(me.p2.style.top, 10) - (bw.ie8 ? 2 : 0);
this.p2.style.height = (new_height > 0 ? new_height : 0) +'px'; me.p2.style.height = (new_height > 0 ? new_height : 0) +'px';
} }
else { else {
var new_width = parseInt(this.p2.parentNode.offsetWidth, 10) - parseInt(this.p2.style.left, 10); var new_width = parseInt(me.p2.parentNode.offsetWidth, 10) - parseInt(me.p2.style.left, 10);
this.p2.style.width = (new_width > 0 ? new_width : 0) + 'px'; me.p2.style.width = (new_width > 0 ? new_width : 0) + 'px';
} }
}; };

Loading…
Cancel
Save