Hi,

Another go at a preview pane.

I implemented conditional HTML which works like this:

<roundcube:if condition="config:preview==true" /> html bla bla <roundcube:else /> other html bla bla <roundcube:endif />

The preview code was mostly Thomas', plus a bit of myself to let the user decide for herself.

Code is not yet optimized, so it looks like poo, and I suspect IE6 will have problems, because I delete some CSS which made it look strange in IE7.

Robin

Index: config/main.inc.php.dist

--- config/main.inc.php.dist (revision 380) +++ config/main.inc.php.dist (working copy) @@ -228,5 +228,11 @@ // save compose message every 300 seconds (5min) $rcmail_config['draft_autosave'] = 300;

+// Enable preview pane +$rcmail_config['enable_preview'] = FALSE;

+// Default setting if preview pane is enabled +$rcmail_config['preview'] = FALSE;

// end of config file ?> Index: program/include/main.inc =================================================================== --- program/include/main.inc (revision 380) +++ program/include/main.inc (working copy) @@ -1106,9 +1106,8 @@ return FALSE; }

• // parse for specialtags
• $output = parse_rcube_xml($templ);

• $output = parse_rcube_xml(parse_rcube_conditions($templ));

  $OUTPUT->write(trim(parse_with_globals($output)), $skin_path);

@@ -1269,6 +1268,48 @@ }

+// parse conditional code +function parse_rcube_conditions($input)

• {
• global $CONFIG;
• if (($matches = preg_split('/roundcube:(if|elseif|else|endif)\s+([^]+)>/is', $input, 2, PREG_SPLIT_DELIM_CAPTURE)) &&

•  (count($matches)==4))
  

• {

•  if (preg_match('/^(else|endif)$/i', $matches[1]))
  

•    return $matches[0] . '<!-- ' . $matches[1] . ' ' . $matches[2] . ' -->' . parse_rcube_conditions($matches[3]);
  

•  else
  

•    {
  

•    $attrib = parse_attrib_string($matches[2]);
  

•    if (isset($attrib['condition']) &&
  

•        preg_match('/^(session|config):([a-zA-Z0-9_]+)([=<>!]+)(.*)$/i', $attrib['condition'], $opts))
  

•      {
  

•      $condmet = false;
  

•      if ($opts[1]=='session')
  

•        $condmet = eval("return (\$_SESSION['" . $opts[2] . "']" . $opts[3] . "'" . $opts[4] . "');");
  

•   elseif ($opts[1]=='config')
  

•        $condmet = eval("return (\$CONFIG['" . $opts[2] . "']" . $opts[3] . "'" . $opts[4] . "');");
  

•      $submatches = preg_split('/<roundcube:(elseif|else|endif)\s+([^>]+)>/is', $matches[3], 2, PREG_SPLIT_DELIM_CAPTURE);
  

•   if ($condmet)
  

• 	$result = $submatches[0] . preg_replace('/.*<roundcube:endif\s+[^>]+>/is', '', $submatches[3]);
  

•      else
  

•        $result = '<roundcube:' . $submatches[1] . $submatches[2] . $submatches[3];
  

•      return $matches[0] . '<!-- ' . $matches[1] . ' ' . $matches[2] . ' -->' . parse_rcube_conditions($result);
  

•      }
  

•      else
  

•      {
  

•      raise_error(array('code' => 500,
  

•                        'type' => 'php',
  

•                        'line' => __LINE__,
  

•                        'file' => __FILE__,
  

•                        'message' => "Unable to parse conditional tag " . $matches[2]), TRUE, FALSE);
  

•      }
  

•    }
  

• }
• else
• return $input;
• }

// create and register a button function rcube_button($attrib) { Index: program/localization/en_US/labels.inc =================================================================== --- program/localization/en_US/labels.inc (revision 380) +++ program/localization/en_US/labels.inc (working copy) @@ -211,6 +211,7 @@ $labels['dstactive'] = 'Daylight savings'; $labels['htmleditor'] = 'Compose HTML messages'; $labels['htmlsignature'] = 'HTML signature'; +$labels['preview'] = 'Show preview pane';

$labels['autosavedraft'] = 'Automatically save draft'; $labels['everynminutes'] = 'every $n minutes'; Index: program/js/app.js =================================================================== --- program/js/app.js (revision 380) +++ program/js/app.js (working copy) @@ -151,8 +151,15 @@ this.enable_command('firstmessage', true); } }

•    // make preview/message frame visible
  

•    if (this.env.action == 'preview' && this.env.framed && parent.rcmail)
  

•      {
  

•      this.enable_command('compose', 'add-contact', false);
  

•      parent.rcmail.show_messageframe(true);
  

•      }
  
  

•    if (this.env.action=='show' && this.env.blockedobjects)
  

•    if ((this.env.action=='show' || this.env.action=='preview') && this.env.blockedobjects)
       {
       if (this.gui_objects.remoteobjectsmsg)
         this.gui_objects.remoteobjectsmsg.style.display = 'block';
  

@@ -637,7 +644,7 @@

   case 'load-images':
     if (this.env.uid)

•      this.show_message(this.env.uid, true);
  

•      this.show_message(this.env.uid, true, this.env.action=='preview');
     break;
  
   case 'load-attachment':
  

@@ -667,22 +674,22 @@

   case 'nextmessage':
     if (this.env.next_uid)

•      this.show_message(this.env.next_uid);
  

•      this.show_message(this.env.next_uid, false, this.env.action=='preview');
     break;
  
  case 'lastmessage':
     if (this.env.last_uid)
  

•      this.show_message(this.env.last_uid);
  

•      this.show_message(this.env.last_uid, false, this.env.action=='preview');
     break;
  
   case 'previousmessage':
     if (this.env.prev_uid)
  

•      this.show_message(this.env.prev_uid);
  

•      this.show_message(this.env.prev_uid, false, this.env.action=='preview');
     break;
  
   case 'firstmessage':
     if (this.env.first_uid)
  

•      this.show_message(this.env.first_uid);
  

•      this.show_message(this.env.first_uid, false, this.env.action=='preview');
     break;
  
   case 'checkmail':
  

@@ -1052,6 +1059,9 @@

this.msglist_select = function(list) {

• if (this.preview_timer)

•  clearTimeout(this.preview_timer);
  

• var selected = list.selection.length==1; if (this.env.mailbox == this.env.drafts_mailbox) {

@@ -1063,16 +1073,25 @@ this.enable_command('show', 'reply', 'reply-all', 'forward', 'print', selected); this.enable_command('delete', 'moveto', list.selection.length>0 ? true : false); }

• // start timer for message preview (wait for double click)

• if (selected && this.env.contentframe)

•  this.preview_timer = setTimeout(this.ref+'.msglist_get_preview()', this.dblclick_time + 10);
  

• else if (this.env.contentframe)

•  this.show_messageframe(false);
  

  };

  this.msglist_dbl_click = function(list) {

• if (this.preview_timer)

•  clearTimeout(this.preview_timer);
  

• var uid = list.get_single_selection(); if (uid && this.env.mailbox == this.env.drafts_mailbox) this.goto_url('compose', '_draft_uid='+uid+'&_mbox='+urlencode(this.env.mailbox), true); else if (uid)

•  this.show_message(uid);
  

•  this.show_message(uid, false, false);
  

  };

@@ -1085,18 +1104,29 @@ };

• this.msglist_get_preview = function()

• {

• var uid = this.get_single_uid();

• if (uid && this.env.contentframe)

•  this.show_message(uid, false, true);
  

• else if (this.env.contentframe)

•  this.show_messageframe(false);
  

• };

• /*********************************************************/ /********* (message) list functionality *********/ /*********************************************************/

  // when user doble-clicks on a row

• this.show_message = function(id, safe)

• this.show_message = function(id, safe, preview) { var add_url = '';
• var action = preview ? 'preview': 'show'; var target = window;

• if (this.env.contentframe && window.frames && window.frames[this.env.contentframe])

• if (preview && this.env.contentframe && window.frames && window.frames[this.env.contentframe]) { target = window.frames[this.env.contentframe]; add_url = '&_framed=1';

@@ -1107,13 +1137,27 @@

 if (id)
   {

•  this.set_busy(true, 'loading');
  

•  target.location.href = this.env.comm_path+'&_action=show&_uid='+id+'&_mbox='+urlencode(this.env.mailbox)+add_url;
  

•  var url = '&_action='+action+'&_uid='+id+'&_mbox='+urlencode(this.env.mailbox)+add_url;
  

•  if (action == 'preview' && String(target.location.href).indexOf(url) >= 0)
  

•    this.show_messageframe(true);
  

•  else
  

•    {
  

•    this.set_busy(true, 'loading');
  

•    target.location.href = this.env.comm_path+url;
  

•    }
   }
  

  };

• this.show_messageframe = function(show)

• {

• var frm;

• if (this.env.contentframe && (frm = rcube_find_object(this.env.contentframe)))

•  frm.style.display = show ? 'block' : 'none';
  

• };

• // list a specific page this.list_page = function(page) {

Index: program/steps/settings/func.inc

--- program/steps/settings/func.inc (revision 380) +++ program/steps/settings/func.inc (working copy) @@ -155,6 +155,16 @@ rep_specialchars_output(rcube_label('htmleditor')), $input_htmleditor->show($CONFIG['htmleditor']?1:0));

• if ($CONFIG['enable_preview'])
• {
• $field_id = 'rcmfd_preview';
• $input_preview = new checkbox(array('name' => '_preview', 'id' => $field_id, 'value' => 1));
• $out .= sprintf("<tr><td class="title"><label for="%s">%s</label></td><td>%s</td></tr>\n",

•                $field_id,
  

•                rep_specialchars_output(rcube_label('preview')),
  

•                $input_preview->show($CONFIG['preview']?1:0));
  

• }
• if (!empty($CONFIG['drafts_mbox'])) { $field_id = 'rcmfd_autosave';

@@ -242,4 +252,4 @@ }

-?> \ No newline at end of file +?> Index: program/steps/settings/save_prefs.inc =================================================================== --- program/steps/settings/save_prefs.inc (revision 380) +++ program/steps/settings/save_prefs.inc (working copy) @@ -29,6 +29,8 @@ $a_user_prefs['pagesize'] = is_numeric($_POST['_pagesize']) ? (int)$_POST['_pagesize'] : $CONFIG['pagesize']; $a_user_prefs['prefer_html'] = isset($_POST['_prefer_html']) ? TRUE : FALSE; $a_user_prefs['htmleditor'] = isset($_POST['_htmleditor']) ? TRUE : FALSE; +if ($CONFIG['enable_preview'])

• $a_user_prefs['preview'] = isset($_POST['_preview']) ? TRUE : FALSE;

$a_user_prefs['draft_autosave'] = isset($_POST['_draft_autosave']) ? intval($_POST['_draft_autosave']) : 0;

// MM: Date format toggle (Pretty / Standard) Index: program/steps/mail/show.inc =================================================================== --- program/steps/mail/show.inc (revision 380) +++ program/steps/mail/show.inc (working copy) @@ -34,8 +34,14 @@ // go back to list if message not found (wrong UID) if (!$MESSAGE['headers'] || !$MESSAGE['structure']) {

• $_action = 'list';
• return;

• show_message('messageopenerror', 'error');

• if ($_action=='preview' && template_exists('messagepreview'))

•  parse_template('messagepreview');
  

• else

•  {
  

•  $_action = 'list';
  

•  return;
  

•  }
  

  }

  $MESSAGE['subject'] = $IMAP->decode_header($MESSAGE['headers']->subject);

@@ -131,28 +137,6 @@

-// return an HTML iframe for loading mail content -function rcmail_messagecontent_frame($attrib)

• {
• global $COMM_PATH, $OUTPUT, $GET_URL, $JS_OBJECT_NAME;
• // allow the following attributes to be added to the <iframe> tag
• $attrib_str = create_attrib_string($attrib);
• $framename = 'rcmailcontentwindow';
• $out = sprintf('<iframe src="%s" name="%s"%s>%s</iframe>'."\n",

•     $GET_URL,
  

•     $framename,
  

•     $attrib_str,
  

•     rcube_label('loading'));
  

• $OUTPUT->add_script("$JS_OBJECT_NAME.set_env('contentframe', '$framename');");
• return $out;
• }

function rcmail_remote_objects_msg($attrib) { global $CONFIG, $OUTPUT, $JS_OBJECT_NAME; @@ -177,8 +161,10 @@ }

-if ($_action=='print') +if ($_action=='print' && template_exists('printmessage')) parse_template('printmessage'); +else if ($_action=='preview' && template_exists('messagepreview'))

• parse_template('messagepreview');

else parse_template('message'); -?> \ No newline at end of file +?> Index: program/steps/mail/func.inc =================================================================== --- program/steps/mail/func.inc (revision 380) +++ program/steps/mail/func.inc (working copy) @@ -481,6 +481,7 @@ $javascript .= sprintf("%s.set_env('pagecount', %d);\n", $JS_OBJECT_NAME, ceil($message_count/$IMAP->page_size)); $javascript .= sprintf("%s.set_env('sort_col', '%s');\n", $JS_OBJECT_NAME, $sort_col); $javascript .= sprintf("%s.set_env('sort_order', '%s');\n", $JS_OBJECT_NAME, $sort_order);

• $javascript .= sprintf("%s.set_env('preview', '%s');\n", $JS_OBJECT_NAME, $CONFIG['enable_preview'] && $CONFIG['preview']);

  if ($attrib['messageicon']) $javascript .= sprintf("%s.set_env('messageicon', '%s%s');\n", $JS_OBJECT_NAME, $skin_path, $attrib['messageicon']);

@@ -558,6 +559,28 @@ }

+// return an HTML iframe for loading mail content +function rcmail_messagecontent_frame($attrib)

• {
• global $OUTPUT, $JS_OBJECT_NAME;
• if (empty($attrib['id']))
• $attrib['id'] = 'rcmailcontentwindow';
• // allow the following attributes to be added to the <iframe> tag
• $attrib_str = create_attrib_string($attrib, array('id', 'class', 'style', 'src', 'width', 'height', 'frameborder'));
• $framename = $attrib['id'];
• $out = sprintf('<iframe name="%s"%s></iframe>'."\n",

•     $framename,
  

•     $attrib_str);
  

• $OUTPUT->add_script("$JS_OBJECT_NAME.set_env('contentframe', '$framename');");
• return $out;
• }

// return code for search function function rcmail_search_form($attrib) { Index: skins/default/templates/mail.html =================================================================== --- skins/default/templates/mail.html (revision 380) +++ skins/default/templates/mail.html (working copy) @@ -42,6 +42,22 @@

</div>

+<roundcube:if condition="config:preview==true" /> +<div id="mailcontframe" class="preview"> +<roundcube:object name="messages"

• id="messagelist"
• cellspacing="0"
• summary="Message list"
• messageIcon="/images/icons/dot.png"
• unreadIcon="/images/icons/unread.png"
• deletedIcon="/images/icons/deleted.png"
• repliedIcon="/images/icons/replied.png"
• attachmentIcon="/images/icons/attachment.png" />

+</div> +<div id="mailpreviewframe"> +<roundcube:object name="messagecontentframe" id="messagecontframe" width="100%" height="100%" frameborder="0" src="/watermark.html" /> +</div> +<roundcube:else />

<div id="mailcontframe"> <roundcube:object name="messages" id="messagelist" @@ -53,6 +69,7 @@ repliedIcon="/images/icons/replied.png" attachmentIcon="/images/icons/attachment.png" /> </div> +<roundcube:endif />

<div id="listcontrols"> <roundcube:label name="select" />:&nbsp; Index: skins/default/templates/messagepreview.html =================================================================== --- skins/default/templates/messagepreview.html (revision 0) +++ skins/default/templates/messagepreview.html (revision 0) @@ -0,0 +1,19 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title><roundcube:object name="pagetitle" /></title> +<link rel="stylesheet" type="text/css" href="/common.css" /> +<link rel="stylesheet" type="text/css" href="/mail.css" /> +</head> +<body class="iframe"> + +<div class="messageheaderbox"> +<roundcube:object name="messageHeaders" class="headers-table" cellspacing="0" cellpadding="2" addicon="/images/icons/plus.gif" summary="Message headers" /> +<roundcube:object name="messageAttachments" id="attachment-list" /> +</div> + +<roundcube:object name="blockedObjects" id="remote-objects-message" /> +<roundcube:object name="messageBody" id="messagebody" /> + +</body> +</html> Index: skins/default/mail.css =================================================================== --- skins/default/mail.css (revision 380) +++ skins/default/mail.css (working copy) @@ -117,10 +117,34 @@ overflow: auto; /* css hack for IE */ width: expression((parseInt(document.documentElement.clientWidth)-240)+'px'); - height: expression((parseInt(document.documentElement.clientHeight)-125)+'px'); }

+#mailcontframe.preview {

• bottom: auto;
• height: 210px;

+}

+#mailpreviewframe +{

• position: absolute;
• top: 300px;
• left: 200px;
• right: 40px;
• bottom: 40px;
• border: 1px solid #999999;
• background-color: #F9F9F9;
• /* css hack for IE */
• width: expression((parseInt(document.documentElement.clientWidth)-240)+'px');
• height: expression((parseInt(document.documentElement.clientHeight)-340)+'px');

+}

+#messagecontframe +{

• width: 100%;
• height: 100%;
• border: 0;

+}

#messagepartframe { border: 1px solid #999999; Index: index.php =================================================================== --- index.php (revision 380) +++ index.php (working copy) @@ -262,7 +262,7 @@ { include_once('program/steps/mail/func.inc');

• if ($_action=='show' || $_action=='print')

• if ($_action=='show' || $_action=='preview' || $_action=='print') include('program/steps/mail/show.inc');

  if ($_action=='get')