From: dongsheng Date: Thu, 8 Oct 2009 06:37:00 +0000 (+0000) Subject: "MDL-14651, improved chat module interface" X-Git-Url: http://git.mjollnir.org/gw?a=commitdiff_plain;h=75d07096d30b4fc44a67c3b349ff24bb4116def9;p=moodle.git "MDL-14651, improved chat module interface" --- diff --git a/lang/en_utf8/chat.php b/lang/en_utf8/chat.php index ca5a09a0d7..ea1cf3bc71 100644 --- a/lang/en_utf8/chat.php +++ b/lang/en_utf8/chat.php @@ -40,6 +40,7 @@ $string['helpchatting'] = 'Help with chatting'; $string['idle'] = 'Idle'; $string['invalidid'] = 'Could not find that chat room!'; $string['inputarea'] = 'Input area'; +$string['messageyoubeep'] = 'You beeped $a'; $string['messagebeepseveryone'] = '$a beeps everyone!'; $string['messagebeepsyou'] = '$a has just beeped you!'; $string['messageenter'] = '$a has just entered this chat'; diff --git a/mod/chat/chat_ajax.php b/mod/chat/chat_ajax.php index 6af584f6a0..bee3580d0b 100644 --- a/mod/chat/chat_ajax.php +++ b/mod/chat/chat_ajax.php @@ -20,6 +20,7 @@ require_once(dirname(__FILE__) . '/lib.php'); $action = optional_param('action', '', PARAM_ALPHANUM); $beep_id = optional_param('beep', '', PARAM_RAW); $chat_sid = required_param('chat_sid', PARAM_ALPHANUM); +$theme = required_param('theme', PARAM_ALPHANUM); $chat_message = optional_param('chat_message', '', PARAM_RAW); $chat_lasttime = optional_param('chat_lasttime', 0, PARAM_INT); $chat_lastrow = optional_param('chat_lastrow', 1, PARAM_INT); @@ -124,22 +125,15 @@ case 'update': foreach ($messages as $n => &$message) { $tmp = new stdclass; // when somebody enter room, user list will be updated - if($message->system == 1){ + if (!empty($message->system)){ $send_user_list = true; - $tmp->type = 'system'; $users = chat_format_userlist(chat_get_users($chatuser->chatid, $chatuser->groupid, $cm->groupingid), $course); } - if ($html = chat_format_message($message, $chatuser->course, $USER, $chat_lastrow)) { - if ($html->beep) { - $tmp->type = 'beep'; - } elseif (empty($tmp->type)) { - $tmp->type = 'user'; - } - $tmp->mymessage = ($USER->id == $message->userid); - $tmp->msg = $html->html; - $message = $tmp; + if ($html = chat_format_message_theme($message, $chatuser->course, $USER, $theme)) { + $message->mymessage = ($USER->id == $message->userid); + $message->message = $html->html; } else { - unset($message); + unset($messages[$n]); } } } diff --git a/mod/chat/gui_ajax/index.php b/mod/chat/gui_ajax/index.php index 83987ece14..7d69560d17 100644 --- a/mod/chat/gui_ajax/index.php +++ b/mod/chat/gui_ajax/index.php @@ -1,15 +1,16 @@ wwwroot.'/mod/chat/gui_ajax/index.php', array('id'=>$id)); if ($groupid !== 0) { $url->param('groupid', $groupid); } $PAGE->set_url($url); - if (!$chat = $DB->get_record('chat', array('id'=>$id))) { print_error('invalidid', 'chat'); } @@ -53,6 +54,7 @@ if (!$chat_sid = chat_login_user($chat->id, 'ajax', $groupid, $course)) { $str_title = format_string($course->shortname) . ": ".format_string($chat->name,true).$groupname; $str_send = get_string('send', 'chat'); +$str_themes = get_string('themes'); $PAGE->set_generaltype('popup'); $PAGE->set_title('Chat'); @@ -62,13 +64,19 @@ $PAGE->requires->yui_lib('layout'); $PAGE->requires->yui_lib('container'); $PAGE->requires->yui_lib('connection'); $PAGE->requires->yui_lib('json'); -$PAGE->requires->yui_lib('button'); -$PAGE->requires->yui_lib('selector'); +$PAGE->requires->yui_lib('animation'); +$PAGE->requires->yui_lib('menu'); + +if (!file_exists(dirname(__FILE__) . '/theme/'.$theme.'/chat.css')) { + $theme = 'bubble'; +} $PAGE->requires->data_for_js('chat_cfg', array( 'home'=>$CFG->httpswwwroot.'/mod/chat/view.php?id='.$cm->id, + 'chaturl'=>$CFG->httpswwwroot.'/mod/chat/gui_ajax/index.php?id='.$id, + 'theme'=>$theme, 'userid'=>$USER->id, 'sid'=>$chat_sid, - 'timer'=>5000, + 'timer'=>3000, 'chat_lasttime'=>0, 'chat_lastrow'=>null, 'chatroom_name'=>$str_title @@ -84,38 +92,44 @@ $PAGE->requires->string_for_js('talk', 'chat'); $PAGE->requires->js('mod/chat/gui_ajax/script.js'); $PAGE->requires->yui_lib('animation')->in_head(); -$PAGE->requires->css('mod/chat/chat.css'); +$PAGE->requires->css('mod/chat/gui_ajax/theme/'.$theme.'/chat.css'); $PAGE->add_body_class('yui-skin-sam'); +$PAGE->set_generaltype('embedded'); echo $OUTPUT->header(); -echo $OUTPUT->heading($str_title, 1); $intro = format_text($chat->intro, $chat->introformat); +$home_url = $CFG->httpswwwroot.'/mod/chat/gui_ajax/index.php?id='.$id; echo << -{$chat->name} {$intro} +{$chat->name}

{$intro}

+-->
    -
-
-
+
-
-
    -
  • -
      -
-
-
- - +
-
+
+ + + + + +
+ » + + + + {$str_themes} ▶ +
+
DIVS; echo $OUTPUT->footer(); ?> diff --git a/mod/chat/gui_ajax/script.js b/mod/chat/gui_ajax/script.js index 550d83a9eb..a0c848e7ec 100644 --- a/mod/chat/gui_ajax/script.js +++ b/mod/chat/gui_ajax/script.js @@ -1,5 +1,3 @@ -// record msg IDs - YAHOO.namespace('moodle.chat'); YAHOO.moodle.chat.api = moodle_cfg.wwwroot+'/mod/chat/chat_ajax.php'; YAHOO.moodle.chat.interval = null; @@ -7,17 +5,17 @@ YAHOO.moodle.chat.chat_input_element = null; YAHOO.moodle.chat.msgs = []; YAHOO.moodle.chat.scrollable = true; + (function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; // window.onload Event.onDOMReady(function() { - // build layout var layout = new YAHOO.widget.Layout({ units: [ - { position: 'top', height: 50, body: 'chat-header', gutter: '5px', resize: false }, + //{ position: 'top', height: 50, body: 'chat-header', gutter: '5px', resize: false }, { position: 'right', width: 180, resize: true, gutter: '5px', scroll: true, body: 'chat-userlist', animate: false }, - { position: 'bottom', height: 42, resize: false, body: 'chat-input', gutter: '5px', collapse: false, resize: false }, - //{ position: 'left', header: 'Options', width: 200, resize: true, body: 'chat_options', gutter: '5px', collapse: true, close: true, collapseSize: 50, scroll: true, animate: false }, + { position: 'bottom', height: 42, resize: false, body: 'chat-input-area', gutter: '5px', collapse: false, resize: false }, + //{ position: 'left', header: 'Options', width: 200, resize: true, body: 'chat-options', gutter: '5px', collapse: true, close: true, collapseSize: 50, scroll: true, animate: false }, { position: 'center', body: 'chat-messages', gutter: '5px', scroll: true } ] }); @@ -27,7 +25,7 @@ Event.onDOMReady(function() { }); }); layout.render(); - Event.on('btn_send', 'click', function(ev) { + Event.on('button-send', 'click', function(ev) { Event.stopEvent(ev); YAHOO.moodle.chat.send_message(); }); @@ -39,7 +37,7 @@ Event.onDOMReady(function() { Event.stopEvent(ev); YAHOO.moodle.chat.scrollable = true; }); - YAHOO.moodle.chat.chat_input_element = document.getElementById('input_msgbox'); + YAHOO.moodle.chat.chat_input_element = document.getElementById('input-message'); YAHOO.moodle.chat.chat_input_element.onkeypress = function(ev) { var e = (ev)?ev:event; if (e.keyCode == 13) { @@ -51,6 +49,9 @@ Event.onDOMReady(function() { this.cb = { success: function(o){ YAHOO.moodle.chat.chat_input_element.focus(); + document.getElementById('input-message').disabled = false; + document.getElementById('input-message').value = ''; + document.getElementById('input-message').focus(); if(o.responseText){ var data = YAHOO.lang.JSON.parse(o.responseText); } else { @@ -63,10 +64,22 @@ Event.onDOMReady(function() { params.action = 'init'; params.chat_init = 1; params.chat_sid = chat_cfg.sid; + params.theme = chat_cfg.theme; var trans = YAHOO.util.Connect.asyncRequest('POST', YAHOO.moodle.chat.api, this.cb, build_querystring(params)); YAHOO.moodle.chat.interval = setInterval(function(){ YAHOO.moodle.chat.update_messages(); }, chat_cfg.timer); + var oMenu = new YAHOO.widget.Menu("basicmenu", { xy:[0,0] }); + oMenu.addItems([ + { text: "Bubble", url: chat_cfg.chaturl+'&theme=bubble'}, + { text: "Compact", url: chat_cfg.chaturl+'&theme=compact'}, + ]); + oMenu.render(document.body); + YAHOO.util.Event.addListener('choosetheme', 'click', function(e) { + var position = YAHOO.util.Event.getXY(e); + oMenu.moveTo(position[0]-120, position[1]-70); + oMenu.show(); + }); }); })(); @@ -82,7 +95,7 @@ function in_array(f, t){ } YAHOO.moodle.chat.talkto = function(name) { - var msg = document.getElementById('input_msgbox'); + var msg = document.getElementById('input-message'); msg.value = "To "+name+": "; msg.focus(); } @@ -90,8 +103,8 @@ YAHOO.moodle.chat.talkto = function(name) { YAHOO.moodle.chat.send_callback = { success: function(o) { if(o.responseText == 200){ - document.getElementById('btn_send').value = mstr.chat.send; - document.getElementById('input_msgbox').value = ''; + document.getElementById('button-send').value = mstr.chat.send; + document.getElementById('input-message').value = ''; } clearInterval(YAHOO.moodle.chat.interval) @@ -99,20 +112,20 @@ YAHOO.moodle.chat.send_callback = { YAHOO.moodle.chat.interval = setInterval(function(){ YAHOO.moodle.chat.update_messages(); }, chat_cfg.timer); - //document.getElementById('input_msgbox').focus(); + //document.getElementById('input-message').focus(); } } YAHOO.moodle.chat.send_message = function(ev) { - var msg = document.getElementById('input_msgbox').value; - var el_send = document.getElementById('btn_send'); + var msg = document.getElementById('input-message').value; + var el_send = document.getElementById('button-send'); if (!msg) { - alert('Empty message not allowed'); return; } el_send.value = mstr.chat.sending; var params = {}; params.chat_message=msg; params.chat_sid=chat_cfg.sid; + params.theme = chat_cfg.theme; var trans = YAHOO.util.Connect.asyncRequest('POST', YAHOO.moodle.chat.api+"?action=chat", YAHOO.moodle.chat.send_callback, build_querystring(params)); } @@ -121,6 +134,7 @@ YAHOO.moodle.chat.send_beep = function(user_id) { var params = {}; params.chat_sid = chat_cfg.sid; params.beep=user_id; + params.theme = chat_cfg.theme; var trans = YAHOO.util.Connect.asyncRequest('POST', YAHOO.moodle.chat.api+"?action=chat", YAHOO.moodle.chat.send_callback, build_querystring(params)); } @@ -137,9 +151,16 @@ YAHOO.moodle.chat.update_users = function(users) { html += ''; html += '' + users[i].picture + ''; html += ''; - html += ' '+ users[i].name+'
'; - html += ' '+mstr.chat.talk+' '; - html += ' '+mstr.chat.beep+''; + if (users[i].id==chat_cfg.userid) { + html += ' '+ users[i].name+''; + } else { + html += ' '+ users[i].name+''; + } + html += '
'; + if (users[i].id!=chat_cfg.userid) { + html += ' '+mstr.chat.talk+' '; + html += ' '+mstr.chat.beep+''; + } html += ''; html += ''; html += ''; @@ -160,6 +181,7 @@ YAHOO.moodle.chat.update_messages = function() { } params.chat_lasttime = chat_cfg.chat_lasttime; params.chat_sid = chat_cfg.sid; + params.theme = chat_cfg.theme; var trans = YAHOO.util.Connect.asyncRequest('POST', YAHOO.moodle.chat.api+"?action=update", YAHOO.moodle.chat.update_cb, build_querystring(params)); } @@ -184,14 +206,14 @@ YAHOO.moodle.chat.append_msg = function(key, msg, row) { } else { item.className = 'mdl-chat-entry'; } - item.innerHTML = msg.msg; - if(msg.type && msg.type == 'beep'){ - document.getElementById('notify').innerHTML = ''; + item.innerHTML = msg.message; + if(msg.type && msg.type == 'beep') { + document.getElementById('chat-notify').innerHTML = ''; } list.appendChild(item); if (!row) { var anim = new YAHOO.util.ColorAnim(item.id, YAHOO.moodle.chat.oddmsg_cfg); - anim.animate(); + //anim.animate(); } if (msg.mymessage) { //var anim = new YAHOO.util.ColorAnim(item.id, YAHOO.moodle.chat.mymsg_cfg); diff --git a/mod/chat/gui_ajax/theme/bubble/bubbles.png b/mod/chat/gui_ajax/theme/bubble/bubbles.png new file mode 100755 index 0000000000..e81653b9c8 Binary files /dev/null and b/mod/chat/gui_ajax/theme/bubble/bubbles.png differ diff --git a/mod/chat/gui_ajax/theme/bubble/chat.css b/mod/chat/gui_ajax/theme/bubble/chat.css new file mode 100755 index 0000000000..cda0463803 --- /dev/null +++ b/mod/chat/gui_ajax/theme/bubble/chat.css @@ -0,0 +1,37 @@ +.yui-skin-sam .yui-layout .yui-layout-hd { border:0; } +.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-nohd { border:0; } +.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd { border:0; } +.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-unit-right { background: white; } +.yui-skin-sam .yui-layout-unit-bottom { background: #F2F2F2; } +.yui-skin-sam .yui-layout-unit-right { background: #eef2f8; } +.yui-skin-sam .yui-layout-unit-center { background: white; } +.yui-skin-sam .yui-layout-unit-top { background: #FFE39D; } +.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd { background: transparent; } + +#input-message { + background:#FFFFFF url(input.png) repeat-x scroll 0 0; + padding:0 9px; + border: 1px solid #999; + border-radius: 9px; + -moz-border-radius: 9px; +} + +.mdl-chat-entry .topleft { background:transparent url(bubbles.png) no-repeat scroll left top; height:9px; width:18px; } +.mdl-chat-entry .top { background:transparent url(horizontal.png) repeat-x scroll center top; font-size:1px; height:9px; } +.mdl-chat-entry .topright { background:transparent url(bubbles.png) no-repeat scroll -18px top; height:9px; width:11px; } +.mdl-chat-entry .left { background:transparent url(vertical.png) repeat-y scroll left center; width:18px; } +.mdl-chat-entry .conmts { background:#DCDCDC none repeat scroll 0 0; color:#000000; text-shadow:0 1px 0 #EEEEEE; } +.mdl-chat-entry .right { background:transparent url(vertical.png) repeat-y scroll -18px 0; width:11px; } +.mdl-chat-entry .bottomleft { background:transparent url(bubbles.png) no-repeat scroll left -9px; height:12px; width:18px; } +.mdl-chat-entry .bottomright { background:transparent url(bubbles.png) no-repeat scroll right -9px; height:12px; width:11px; } +.mdl-chat-entry .bottom { background:transparent url(horizontal.png) repeat-x scroll 0 -9px; height:12px; } + +.mdl-chat-my-entry .topleft{background:url(bubbles.png) no-repeat 0 -21px;height:9px;width:11px;} +.mdl-chat-my-entry .topright{background:url(bubbles.png) no-repeat -11px -21px;height:9px;width:18px;} +.mdl-chat-my-entry .bottomleft{background:url(bubbles.png) no-repeat 0 bottom;width:11px;height:12px;} +.mdl-chat-my-entry .bottomright{background:url(bubbles.png) no-repeat right bottom;width:18px;height:12px;} +.mdl-chat-my-entry .top{background:url(horizontal.png) repeat-x 0 -21px;font-size:1px;height:9px;} +.mdl-chat-my-entry .bottom{background:url(horizontal.png) repeat-x bottom;height:12px;} +.mdl-chat-my-entry .left{background:url(vertical.png) repeat-y -29px 0;width:11px;} +.mdl-chat-my-entry .right{background:url(vertical.png) repeat-y right;width:18px;} +.mdl-chat-my-entry .conmts{background:#C0E668;color:#000;} diff --git a/mod/chat/gui_ajax/theme/bubble/config.php b/mod/chat/gui_ajax/theme/bubble/config.php new file mode 100755 index 0000000000..dbdf3c2915 --- /dev/null +++ b/mod/chat/gui_ajax/theme/bubble/config.php @@ -0,0 +1,73 @@ +avatar = true; +$chattheme_cfg->align = true; +$chattheme_cfg->event_message = <<