Index: program/include/main.inc

16 Dec 2006

A friend of mine who does development for the Caravel CMS got interested 
in roundcube yesterday when I was showing him the latest svn. Since I 
can't program my way out of a soggy paper bag with javascript I asked if 
he'd take a shot at making the preview pane resize able. A few hour 
later he threw me this diff that I've just installed and tested. Nifty 
stuff. I'm working on saving the size of the pane in user preferences 
but I wanted to get his unmodified code out here for anyone else to 
use/see. So here's the code to resize the preview pane courtesy of David 
Glick from the Caravel CMS crew.
-Ryan
--
Network Administrator
Goshen College
(574) 535-7004
Index: program/include/main.inc

--- program/include/main.inc	(revision 408)
+++ program/include/main.inc	(working copy)
@@ -1277,6 +1277,7 @@
         // GENERAL
         'loginform' => 'rcmail_login_form',
         'username'  => 'rcmail_current_username',

   'splitter' => 'rcube_splitter',

   // MAIL
   'mailboxlist' => 'rcmail_mailbox_list',



@@ -1912,7 +1913,19 @@
   return $select->show($set);
   }
+function rcube_splitter($attrib)

{

global $OUTPUT, $JS_OBJECT_NAME;


// register splitter in the system

$OUTPUT->add_script(sprintf("%s.register_splitter('%s', '%s', '%s');",

                         $JS_OBJECT_NAME,


                         $attrib['first'],


                         $attrib['second'],


                         $attrib['orientation']));



}



/****** debugging functions ********/
Index: program/js/common.js
--- program/js/common.js	(revision 408)
+++ program/js/common.js	(working copy)
   }
+/**


RoundCube splitter GUI class







@constructor


*/

+function rcube_splitter(attrib)

{
this.p1id = attrib.p1;
this.p2id = attrib.p2;
this.id = this.p1id + '_' + this.p2id + '_splitter';
this.orientation = attrib.orientation;
this.horizontal = (this.orientation == 'horizontal');

this.init = function()
{
this.p1 = document.getElementById(this.p1id);
this.p2 = document.getElementById(this.p2id);

// create and position the handle for this splitter
this.p1pos = rcube_get_object_pos(this.p1);
this.p2pos = rcube_get_object_pos(this.p2);
var top = this.p1pos.y + this.p1.offsetHeight;
var height = this.p2pos.y - this.p1pos.y - this.p1.offsetHeight;
var left = this.p1pos.x + this.p1.offsetWidth;
var width = this.p2pos.x - this.p1pos.x - this.p1.offsetWidth;
if (this.horizontal)
 this.layer = new rcube_layer(this.id, {x: this.p1pos.x, y: top, width: this.p1.offsetWidth, height: height, zindex: 1, vis: 1});


else
 this.layer = new rcube_layer(this.id, {x: left, y: this.p1pos.y, width: width, height: this.p1.offsetHeight, zindex: 1, vis: 1});


this.elm = this.layer.elm;
this.elm.className = 'splitter';
if (this.horizontal)
 this.elm.style.paddingTop = Math.floor(height / 2) + 'px';


else
 this.elm.style.paddingLeft = Math.floor(width / 2) + 'px';


this.line = document.createElement('DIV');
this.line.className = 'splitterLine';
if (this.horizontal)
 {


 this.line.style.borderTopWidth = '1px';


 this.line.style.width = '100%';


 this.line.style.height = '1px';


 }


else
 {


 this.line.style.borderLeftWidth = '1px';


 this.line.style.width = '1px';


 this.line.style.height = '100%';


 }



this.elm.appendChild(this.line);
rcube_event.add_listener({element: this.elm, event:'mouseover', object:this, method:'onMouseOver'});
rcube_event.add_listener({element: this.elm, event:'mouseout', object:this, method:'onMouseOut'});

// add the event to start dragging when the handle is pressed
var s = this;
this.elm.onmousedown = function(e){ return s.onDragStart(e); };
}

this.onDragStart = function(e)
{
this.p1pos = rcube_get_object_pos(this.p1);
this.p2pos = rcube_get_object_pos(this.p2);

// start listening to mousemove events
rcube_event.add_listener({element:document, event:'mousemove', object:this, method:'onDrag'});
rcube_event.add_listener({element:document, event:'mouseup', object:this, method:'onDragStop'});

// need to listen in any iframe documents too, b/c otherwise the splitter stops moving when we move over an iframe
var iframes = document.getElementsByTagName('IFRAME');
this.iframe_events = Object();
for (var n in iframes)
 {


 if (iframes[n].contentDocument)


   {


   // I don't use the add_listener function for this one because I need to create closures to fetch


   // the position of each iframe when the event is received


   var s = this;


   var id = iframes[n].id;


   this.iframe_events[n] = function(e){ e._rc_pos_offset = rcube_get_object_pos(document.getElementById(id)); return s.onDrag(e); }


   if (iframes[n].contentDocument.addEventListener)


     iframes[n].contentDocument.addEventListener('mousemove', this.iframe_events[n], false);


   else if (p.element.attachEvent)


     iframes[n].contentDocument.attachEvent('onmousemove', this.iframe_events[n]);


   else


     iframes[n].contentDocument['onmousemove'] = this.iframe_events[n];



   rcube_event.add_listener({element:iframes[n].contentDocument, event:'mouseup', object:this, method:'onDragStop'});


   }


 }


}

this.onDrag = function(e)
{
var pos = rcube_event.get_mouse_pos(e);
if (e._rc_pos_offset)
 {


 pos.x += e._rc_pos_offset.x;


 pos.y += e._rc_pos_offset.y;


 }



if (this.horizontal)
 {


 // resize the panels


 if (pos.y > this.p1pos.y && pos.y < this.p2pos.y + this.p2.offsetHeight)


   {


   this.p1.style.height = Math.round(pos.y - this.p1pos.y - this.layer.height / 2 - 1) + 'px';


   this.p2.style.top = Math.round(pos.y + this.layer.height / 2 + 1) + 'px';


   }


 // move the splitter handle


 this.layer.move(this.layer.x, Math.round(pos.y - this.layer.height / 2 + 1));


 }


else
 {


 if (pos.x > this.p1pos.x && pos.x < this.p2pos.x + this.p2.offsetWidth)


   {


   this.p1.style.width = Math.round(pos.x - this.p1pos.x - this.layer.width / 2 - 1) + 'px';


   this.p2.style.left = Math.round(pos.x + this.layer.width / 2 + 1) + 'px';


   }


 this.layer.move(Math.round(pos.x - this.layer.width / 2 + 1), this.layer.y);


 }



this.p1pos = rcube_get_object_pos(this.p1);
this.p2pos = rcube_get_object_pos(this.p2);
return false;
}

this.onDragStop = function(e)
{
// cancel the listening for drag events
rcube_event.remove_listener({element:document, event:'mousemove', object:this, method:'onDrag'});
rcube_event.remove_listener({element:document, event:'mouseup', object:this, method:'onDragStop'});
var iframes = document.getElementsByTagName('IFRAME');
for (var n in iframes)
 {


 if (iframes[n].contentDocument)


   {


   if (this.iframe_events[n]) {


     if (iframes[n].contentDocument.removeEventListener)


       iframes[n].contentDocument.removeEventListener('mousemove', this.iframe_events[n], false);


     else if (iframes[n].contentDocument.detachEvent)


       iframes[n].contentDocument.detachEvent('onmousemove', this.iframe_events[n]);


     else


       iframes[n].contentDocument['onmousemove'] = null;


   }



   rcube_event.remove_listener({element:iframes[n].contentDocument, event:'mouseup', object:this, method:'onDragStop'});


   }


 }


return rcube_event.cancel(e);
}

// events to make the handle appear when the mouse hovers over it
// (pure CSS doesn't work b/c IE only applies :hover classes to links)
this.onMouseOver = function(e)
{
this.line.style.visibility = 'visible';
}
this.onMouseOut = function(e)
{
this.line.style.visibility = 'hidden';
}
}


// check if input is a valid email address
 // By Cal Henderson cal@iamcal.com
 // http://code.iamcal.com/php/rfc822/
Index: program/js/app.js
===================================================================
--- program/js/app.js	(revision 408)
+++ program/js/app.js	(working copy)
@@ -24,6 +24,7 @@
   this.env = new Object();
   this.labels = new Object();
   this.buttons = new Object();

this.splitters = new Object();
this.gui_objects = new Object();
this.commands = new Object();

@@ -78,6 +79,13 @@
     };

// add a splitter to the splitter list
this.register_splitter = function(p1, p2, orientation)
{
this.splitters[p1 + '_' + p2] = new rcube_splitter({p1: p1, p2: p2, orientation: orientation});
}

// register a specific gui object
 this.gui_object = function(name, id)
   {

@@ -108,6 +116,10 @@
 // enable general commands
 this.enable_command('logout', 'mail', 'addressbook', 'settings', true);



// initialize splitters

for (var n in this.splitters)

 this.splitters[n].init();


switch (this.task)
     {


Index: skins/default/common.css
--- skins/default/common.css	(revision 408)
+++ skins/default/common.css	(working copy)
@@ -213,7 +213,20 @@
   border: 1px solid #CCCCCC;
 }
+.splitter
+{

position: absolute;
cursor: move;

+}
+.splitterLine
+{

visibility: hidden;
border-color: #ff0000;
border-style: solid;
border-width: 0;

+}



/***** common table settings ******/
table.records-table thead tr td
Index: skins/default/templates/mail.html
===================================================================
--- skins/default/templates/mail.html	(revision 408)
+++ skins/default/templates/mail.html	(working copy)
@@ -55,6 +55,7 @@
 </div>
<roundcube:if condition="config:preview_pane == true" />
+<roundcube:object name="splitter" first="mailcontframe" second="mailpreviewframe" orientation="horizontal" />
 <div id="mailpreviewframe">
 <roundcube:object name="messagecontentframe" id="messagecontframe" width="100%" height="100%" frameborder="0" src="/watermark.html" />
 </div>
Index: skins/default/templates/addressbook.html
===================================================================
--- skins/default/templates/addressbook.html	(revision 408)
+++ skins/default/templates/addressbook.html	(working copy)
@@ -31,6 +31,8 @@
 <roundcube:object name="addresslist" id="contacts-table" class="records-table" cellspacing="0" summary="Contacts list" />
 </div>
+<roundcube:object name="splitter" first="addresslist" second="contacts-box" orientation="vertical" />



 <div id="contacts-box">
 <roundcube:object name="addressframe" id="contact-frame" width="100%" height="100%" frameborder="0" src="/watermark.html" />
 </div>

    

Resizable preview pane!

Index: program/include/main.inc

Index: program/js/common.js

Index: skins/default/common.css