Re: Conditional HTML and preview pane

19 Nov 2007

Robin Elfrink wrote:
...
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')


Robin,
How do I enable the previewpane.  I applied the patch but I don't have 
an option to enable it.  Do I need to change the main.inc.php?
Thanks
Geoff

    

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

2012

2011

2010

2009

2008

2007

2006

2005

Re: Conditional HTML and preview pane

Index: config/main.inc.php.dist

Index: program/steps/settings/func.inc