MDL-22937 mod_chat: switched chat from tables to div/span + css and m…

…ade chat, comment and message formats more similar
safatshahin · Aug 3, 2012 · a2592fe · a2592fe
1 parent 55a568f
commit a2592fe
Show file tree

Hide file tree

Showing 12 changed files with 290 additions and 154 deletions.
diff --git a/comment/lib.php b/comment/lib.php
@@ -201,12 +201,19 @@ public function __construct(stdClass $options) {
         $this->check_permissions();
 
         // load template
-        $this->template  = html_writer::tag('div', '___picture___', array('class' => 'comment-userpicture'));
-        $this->template .= html_writer::start_tag('div', array('class' => 'comment-content'));
-        $this->template .= '___name___ - ';
-        $this->template .= html_writer::tag('span', '___time___');
-        $this->template .= html_writer::tag('div', '___content___');
-        $this->template .= html_writer::end_tag('div'); // .comment-content
+        $this->template = html_writer::start_tag('div', array('class' => 'comment-message'));
+
+        $this->template .= html_writer::start_tag('div', array('class' => 'comment-message-meta'));
+
+        $this->template .= html_writer::tag('span', '___picture___', array('class' => 'picture'));
+        $this->template .= html_writer::tag('span', '___name___', array('class' => 'user')) . ' - ';
+        $this->template .= html_writer::tag('span', '___time___', array('class' => 'time'));
+
+        $this->template .= html_writer::end_tag('div'); // .comment-message-meta
+        $this->template .= html_writer::tag('div', '___content___', array('class' => 'text'));
+
+        $this->template .= html_writer::end_tag('div'); // .comment-message
+
         if (!empty($this->plugintype)) {
             $this->template = plugin_callback($this->plugintype, $this->pluginname, 'comment', 'template', array($this->comment_param), $this->template);
         }

diff --git a/message/lib.php b/message/lib.php
@@ -1969,7 +1969,12 @@ function message_format_message($message, $format='', $keywords='', $class='othe
         $messagetext = highlight($keywords, $messagetext);
     }
 
-    return '<div class="message '.$class.'"><a name="m'.$message->id.'"></a> <span class="time">'.$time.'</span>: <span class="content">'.$messagetext.'</span></div>';
+    return <<<TEMPLATE
+<div class='message $class'>
+    <a name="m'.{$message->id}.'"></a>
+    <span class="message-meta"><span class="time">$time</span></span>: <span class="text">$messagetext</span>
+</div>
+TEMPLATE;
 }
 
 /**

diff --git a/mod/chat/gui_ajax/theme/bubble/chat.css b/mod/chat/gui_ajax/theme/bubble/chat.css
diff --git a/mod/chat/gui_ajax/theme/bubble/config.php b/mod/chat/gui_ajax/theme/bubble/config.php
@@ -10,64 +10,26 @@
 </div>
 TEMPLATE;
 $chattheme_cfg->user_message_left = <<<TEMPLATE
-<table class='chat-message'___tablealign___><tr>
-<td class="picture" valign="middle" width="32px">
-___avatar___
-</td>
-<td class="text">
-    <table cellspacing="0" cellpadding="0" border="0" ___mymessageclass___>
-    <tbody>
-        <tr><td class="topleft"></td><td class="top"></td><td class="topright"></td></tr>
-        <tr>
-            <td class="left"></td>
-            <td class="conmts">
-            ___message___
-            </td>
-            <td class="right"></td>
-        </tr>
-        <tr>
-            <td class="bottomleft"></td>
-            <td class="bottom"></td>
-            <td class="bottomright"></td>
-        </tr>
-    </tbody>
-    </table>
-</td>
-<tr>
-<td colspan="2"___align___>
-    <span class="time">___time___</span>
-    <span class="user">___sender___</span>
-</td>
-</tr>
+<div class='chat-message ___mymessageclass___'>
+    <div class="left">
+        <span class="picture">___avatar___</span>
+        <span class="text triangle-border left">___message___</span>
+    </div>
+    <div class="chat-message-meta left">
+        <span class="time">___time___</span>
+        <span class="user">___sender___</span>
+    </div>
+</div>
 TEMPLATE;
 $chattheme_cfg->user_message_right = <<<TEMPLATE
-<table class='chat-message'___tablealign___><tr>
-<td class="text">
-    <table cellspacing="0" cellpadding="0" border="0" ___mymessageclass___>
-    <tbody>
-        <tr><td class="topleft"></td><td class="top"></td><td class="topright"></td></tr>
-        <tr>
-            <td class="left"></td>
-            <td class="conmts">
-            ___message___
-            </td>
-            <td class="right"></td>
-        </tr>
-        <tr>
-            <td class="bottomleft"></td>
-            <td class="bottom"></td>
-            <td class="bottomright"></td>
-        </tr>
-    </tbody>
-    </table>
-</td>
-<td class="picture" valign="middle" width="32px">
-___avatar___
-</td>
-<tr>
-<td colspan="2" ___tablealign___>
-    <span class="time">___time___</span>
-    <span class="user">___sender___</span>
-</td>
-</tr>
+<div class='chat-message ___mymessageclass___'>
+    <div class="right">
+        <span class="text triangle-border right">___message___</span>
+        <span class="picture">___avatar___</span>
+    </div>
+    <div class="chat-message-meta right">
+        <span class="time">___time___</span>
+        <span class="user">___sender___</span>
+    </div>
+</div>
 TEMPLATE;
diff --git a/mod/chat/gui_ajax/theme/compact/config.php b/mod/chat/gui_ajax/theme/compact/config.php
@@ -11,7 +11,7 @@
 TEMPLATE;
 $chattheme_cfg->user_message = <<<TEMPLATE
 <div class='chat-message'>
-    <div class="meta">
+    <div class="chat-message-meta">
         <span class="time">___time___</span>
         <span class="user"><a href="___senderprofile___" target="_blank">___sender___</a></span>
     </div>

diff --git a/mod/chat/lib.php b/mod/chat/lib.php
@@ -875,7 +875,8 @@ function chat_format_message($message, $courseid, $currentuser, $chat_lastrow=NU
  * @return bool|string Returns HTML or false
  */
 function chat_format_message_theme ($message, $chatuser, $currentuser, $groupingid, $theme = 'bubble') {
-    global $CFG, $USER, $OUTPUT, $COURSE, $DB;
+    global $CFG, $USER, $OUTPUT, $COURSE, $DB, $PAGE;
+    require_once($CFG->dirroot.'/mod/chat/locallib.php');
 
     static $users;     // Cache user lookups
 
@@ -912,19 +913,13 @@ function chat_format_message_theme ($message, $chatuser, $currentuser, $grouping
     if(!empty($message->system)) {
         $result->type = 'system';
 
-        $userlink = new moodle_url('/user/view.php', array('id'=>$message->userid,'course'=>$courseid));
-
-        $patterns = array();
-        $replacements = array();
-        $patterns[] = '___senderprofile___';
-        $patterns[] = '___sender___';
-        $patterns[] = '___time___';
-        $patterns[] = '___event___';
-        $replacements[] = $CFG->wwwroot.'/user/view.php?id='.$sender->id.'&amp;course='.$courseid;
-        $replacements[] = fullname($sender);
-        $replacements[] = $message->strtime;
-        $replacements[] = get_string('message'.$message->message, 'chat', fullname($sender));
-        $result->html = str_replace($patterns, $replacements, $chattheme_cfg->event_message);
+        $senderprofile = $CFG->wwwroot.'/user/view.php?id='.$sender->id.'&amp;course='.$courseid;
+        $event = get_string('message'.$message->message, 'chat', fullname($sender));
+        $eventmessage = new event_message($senderprofile, fullname($sender), $message->strtime, $event, $theme);
+
+        $output = $PAGE->get_renderer('mod_chat');
+        $result->html = $output->render($eventmessage);
+
         return $result;
     }
 
@@ -994,38 +989,17 @@ function chat_format_message_theme ($message, $chatuser, $currentuser, $grouping
 
     $result->text = strip_tags($outtime.': '.$outmain);
 
-    $ismymessage = '';
-    $rightalign = '';
+    $mymessageclass = '';
     if ($sender->id == $USER->id) {
-        $ismymessage = ' class="mymessage"';
-        $rightalign = ' align="right"';
-    }
-    $patterns = array();
-    $replacements = array();
-    $patterns[] = '___avatar___';
-    $patterns[] = '___sender___';
-    $patterns[] = '___senderprofile___';
-    $patterns[] = '___time___';
-    $patterns[] = '___message___';
-    $patterns[] = '___mymessageclass___';
-    $patterns[] = '___tablealign___';
-    $replacements[] = $message->picture;
-    $replacements[] = fullname($sender);
-    $replacements[] = $CFG->wwwroot.'/user/view.php?id='.$sender->id.'&amp;course='.$courseid;
-    $replacements[] = $outtime;
-    $replacements[] = $outmain;
-    $replacements[] = $ismymessage;
-    $replacements[] = $rightalign;
-    if (!empty($chattheme_cfg->avatar) and !empty($chattheme_cfg->align)) {
-        if (!empty($ismymessage)) {
-            $result->html = str_replace($patterns, $replacements, $chattheme_cfg->user_message_right);
-        } else {
-            $result->html = str_replace($patterns, $replacements, $chattheme_cfg->user_message_left);
-        }
-    } else {
-        $result->html = str_replace($patterns, $replacements, $chattheme_cfg->user_message);
+        $mymessageclass = 'chat-message-mymessage';
     }
 
+    $senderprofile = $CFG->wwwroot.'/user/view.php?id='.$sender->id.'&amp;course='.$courseid;
+    $usermessage = new user_message($senderprofile, fullname($sender), $message->picture, $mymessageclass, $outtime, $outmain, $theme);
+
+    $output = $PAGE->get_renderer('mod_chat');
+    $result->html = $output->render($usermessage);
+
     //When user beeps other user, then don't show any timestamp to other users in chat.
     if (('' === $outmain) && $special) {
         return false;

diff --git a/mod/chat/locallib.php b/mod/chat/locallib.php
@@ -154,3 +154,97 @@ public function get_return_url() {
                 : '');
     }
 }
+
+/**
+ * A chat event such a user entering or leaving a chat activity
+ *
+ * @package    mod_chat
+ * @copyright  2012 Andrew Davis
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class event_message implements renderable {
+
+    /** @var string The URL of the profile of the user who caused the event */
+    public $senderprofile;
+
+    /** @var string The ready to display name of the user who caused the event */
+    public $sendername;
+
+    /** @var string Ready to display event time */
+    public $time;
+
+    /** @var string Event description */
+    public $event;
+
+    /** @var string The chat theme name */
+    public $theme;
+
+    /**
+     * event_message constructor
+     *
+     * @param string $senderprofile The URL of the profile of the user who caused the event
+     * @param string $sendername The ready to display name of the user who caused the event
+     * @param string $time Ready to display event time
+     * @param string $theme The chat theme name
+     */
+    function __construct($senderprofile, $sendername, $time, $event, $theme) {
+
+        $this->senderprofile = $senderprofile;
+        $this->sendername = $sendername;
+        $this->time = $time;
+        $this->event = $event;
+        $this->theme = $theme;
+    }
+}
+
+/**
+ * A chat message from a user
+ *
+ * @package    mod_chat
+ * @copyright  2012 Andrew Davis
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class user_message implements renderable {
+
+    /** @var string The URL of the profile of the user sending the message */
+    public $senderprofile;
+
+    /** @var string The ready to display name of the user sending the message */
+    public $sendername;
+
+    /** @var string HTML for the avatar of the user sending the message */
+    public $avatar;
+
+    /** @var string Empty or a html class definition to append to the html */
+    public $mymessageclass;
+
+    /** @var string Ready to display message time */
+    public $time;
+
+    /** @var string The message */
+    public $message;
+
+    /** @var string The name of the chat theme to use */
+    public $theme;
+
+    /**
+     * user_message constructor
+     *
+     * @param string $senderprofile The URL of the profile of the user sending the message
+     * @param string $sendername The ready to display name of the user sending the message
+     * @param string $avatar HTML for the avatar of the user sending the message
+     * @param string $mymessageclass Empty or a html class definition to append to the html
+     * @param string $time Ready to display message time
+     * @param string $message The message
+     * @param string $theme The name of the chat theme to use
+     */
+    function __construct($senderprofile, $sendername, $avatar, $mymessageclass, $time, $message, $theme) {
+
+        $this->sendername = $sendername;
+        $this->avatar = $avatar;
+        $this->mymessageclass = $mymessageclass;
+        $this->time = $time;
+        $this->message = $message;
+        $this->theme = $theme;
+    }
+}