"MDL-21170, comment system upgraded to yui3"

comment/comment.js

@@ -1,18 +1,165 @@
-/**
+// This file is part of Moodle - http://moodle.org/
- * Javascript for comments 2.0
+//
- */
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
 
-function cmt_replace(client_id,list,newcmt) {
+/**
+ * Comment Helper
+ * @author Dongsheng Cai <dongsheng@moodle.com>
+ */
+// initialize commenting system
+M.core_comment = (function(){
+    function core_comment (args) {
+        core_comment.superclass.constructor.apply(this, arguments);
+    }
+    core_comment.NAME = "COMMENT";
+    core_comment.ATTRS = {
+        options: {},
+        lang: {}
+    };
+    Y.extend(core_comment, Y.Base, {
+        api: M.cfg.wwwroot+'/comment/comment_ajax.php',
+        initializer: function(args) {
+            var scope = this;
+            this.client_id = args.client_id;
+            this.itemid = args.itemid;
+            this.commentarea = args.commentarea;
+            this.courseid = args.courseid;
+            this.contextid = args.contextid;
+            if (args.autostart) {
+                this.view(args.page);
+            }
+            if (args.notoggle) {
+                Y.one('#comment-link-'+this.client_id).setStyle('display', 'none');
+            }
+            // load comments
+            Y.one('#comment-link-'+this.client_id).on('click', function(e) {
+                e.preventDefault();
+                this.view(0);
+                return false;
+            }, this);
+            Y.one('#comment-action-cancel'+this.client_id).on('click', function(e) {
+                e.preventDefault();
+                this.view(0);
+                return false;
+            }, this);
+            // add new comment
+            Y.one('#comment-action-post-'+this.client_id).on('click', function(e) {
+                e.preventDefault();
+                this.post();
+                return false;
+            }, this);
+        },
+        post: function() {
+            var ta = Y.one('#dlg-content-'+this.client_id);
+            var scope = this;
+            var value = ta.get('value');
+            if (value && value != mstr.moodle.addcomment) {
+                this.request({
+                    action: 'add',
+                    scope: scope,
+                    form: {id:'comment-form-'+this.client_id},
+                    callback: function(id, obj, args) {
+                        var scope = args.scope;
+                        var cid = scope.client_id;
+                        var ta = Y.one('#dlg-content-'+cid);
+                        ta.set('value', '');
+                        var container = Y.one('#comment-list-'+cid);
+                        var result = scope.render([obj], true);
+                        var newcomment = Y.Node.create(result.html);
+                        container.appendChild(newcomment);
+                        var ids = result.ids;
+                        var linktext = Y.one('#comment-link-text-'+cid);
+                        linktext.set('innerHTML', mstr.moodle.comments + ' ('+obj.count+')');
+                        for(var i in ids) {
+                            var attributes = {
+                                color: { to: '#06e' },
+                                backgroundColor: { to: '#FFE390' }
+                            };
+                            var anim = new YAHOO.util.ColorAnim(ids[i], attributes);
+                            anim.animate();
+                        }
+                    }
+                }, true);
+            } else {
+                var attributes = {
+                    backgroundColor: { from: '#FFE390', to:'#FFFFFF' }
+                };
+                var anim = new YAHOO.util.ColorAnim('dlg-content-'+cid, attributes);
+                anim.animate();
+            }
+        },
+        request: function(args, redraw) {
+            var params = {};
+            var scope = this;
+            if (args['scope']) {
+                scope = args['scope'];
+            }
+            //params['page'] = args.page?args.page:'';
+            params['env']       = '';
+            // the form element only accept certain file types
+            params['sesskey']   = M.cfg.sesskey;
+            params['action']    = args.action?args.action:'';
+            params['client_id'] = this.client_id;
+            params['itemid']    = this.itemid;
+            params['area']      = this.commentarea;
+            params['courseid']  = this.courseid;
+            params['contextid'] = this.contextid;
+            if (args['params']) {
+                for (i in args['params']) {
+                    params[i] = args['params'][i];
+                }
+            }
+            var cfg = {
+                method: 'POST',
+                on: {
+                    complete: function(id,o,p) {
+                        if (!o) {
+                            alert('IO FATAL');
+                            return;
+                        }
+                        var data = json_decode(o.responseText);
+                        args.callback(id,data,p);
+                    }
+                },
+                arguments: {
+                    scope: scope
+                },
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+                    'User-Agent': 'MoodleComment/3.0'
+                },
+                data: build_querystring(params)
+            };
+            if (args.form) {
+                cfg.form = args.form;
+            }
+            Y.io(this.api, cfg);
+            if (!redraw) {
+                this.wait();
+            }
+        },
+        render: function(list, newcmt) {
             var ret = {};
             ret.ids = [];
-    var template = document.getElementById('cmt-tmpl');
+            var template = Y.one('#cmt-tmpl');
             var html = '';
             for(var i in list) {
-        var htmlid = 'comment-'+list[i].id+'-'+client_id;
+                var htmlid = 'comment-'+list[i].id+'-'+this.client_id;
-        var val = template.innerHTML;
+                var val = template.get('innerHTML');
                 val = val.replace('___name___', list[i].username);
                 if (list[i]['delete']||newcmt) {
-            list[i].content = '<div class="comment-delete"><a href="###" title="'+mstr.moodle.deletecomment+'" onclick="delete_comment(\''+client_id+'\',\''+list[i].id+'\')"><img src="'+M.cfg.wwwroot+'/pix/t/delete.gif" /></a></div>' + list[i].content;
+                    list[i].content = '<div class="comment-delete"><a href="###" id ="comment-delete-'+this.client_id+'-'+list[i].id+'" title="'+mstr.moodle.deletecomment+'"><img src="'+M.cfg.wwwroot+'/pix/t/delete.gif" /></a></div>' + list[i].content;
                 }
                 val = val.replace('___time___', list[i].time);
                 val = val.replace('___picture___', list[i].avatar);
@@ -23,97 +170,58 @@ function cmt_replace(client_id,list,newcmt) {
             }
             ret.html = html;
             return ret;
-}
+        },
-function cmt_load(cid) {
+        load: function(page) {
-    var container = document.getElementById('comment-list-'+cid);
+            var scope = this;
-    container.innerHTML = '<div style="text-align:center"><img src="'+M.cfg.wwwroot+'/pix/i/loading.gif'+'" /></div>';
+            var container = Y.one('#comment-ctrl-'+this.client_id);
-}
+            var params = {
-function get_comments(client_id, area, itemid, page) {
-    var url = M.cfg.wwwroot + '/comment/comment_ajax.php';
-    var data = {
-        'courseid': comment_params.courseid,
-        'contextid': comment_params.contextid,
-        'area': area,
-        'itemid': itemid,
                 'page': page,
-        'client_id': client_id,
-        'sesskey': M.cfg.sesskey
             }
-    this.cb = {
+            this.request({
-        success: function(o) {
+                scope: scope,
-            var ret = json_decode(o.responseText);
+                params: params,
-            if (!comment_check_response(ret)) {
+                callback: function(id, ret, args) {
-                return;
+                    var linktext = Y.one('#comment-link-text-'+scope.client_id);
-            }
+                    linktext.set('innerHTML', mstr.moodle.comments + ' ('+ret.count+')');
-            var linktext = document.getElementById('comment-link-text-'+ret.client_id);
+                    var container = Y.one('#comment-list-'+scope.client_id);
-            linktext.innerHTML = mstr.moodle.comments + ' ('+ret.count+')';
+                    var pagination = Y.one('#comment-pagination-'+scope.client_id);
-            var container = document.getElementById('comment-list-'+ret.client_id);
-            var pagination = document.getElementById('comment-pagination-'+ret.client_id);
                     if (ret.pagination) {
-                pagination.innerHTML = ret.pagination;
+                        pagination.set('innerHTML', ret.pagination);
                     } else {
                         //empty paging bar
-                pagination.innerHTML = '';
+                        pagination.set('innerHTML', '');
                     }
-            var result = cmt_replace(ret.client_id, ret.list);
+                    var result = scope.render(ret.list);
-            container.innerHTML = result.html;
+                    container.set('innerHTML', result.html);
+                    args.scope.register_pagination();
+                    args.scope.register_delete_buttons();
                 }
+            });
+        },
+        delete: function(id) {
+            var scope = this;
+            var params = {'commentid': id};
+
+            function remove_dom(type, anmi, cmt) {
+                cmt.remove();
             }
-    cmt_load(client_id);
+            this.request({
-    var trans = YAHOO.util.Connect.asyncRequest('POST',
+                action: 'delete',
-        url+'?action=get', this.cb, build_querystring(data));
+                scope: scope,
-}
+                params: params,
-function post_comment(cid) {
+                callback: function(id, resp, args) {
-    this.cb = {
+                    var htmlid= 'comment-'+resp.commentid+'-'+resp.client_id;
-        success: function(o) {
-            var resp = json_decode(o.responseText);
-            if (!comment_check_response(resp)) {
-                return;
-            }
-            if(resp) {
-                var cid = resp.client_id;
-                var ta = document.getElementById('dlg-content-'+cid);
-                ta.value = '';
-                var container = document.getElementById('comment-list-'+cid);
-                var result = cmt_replace(cid,[resp], true);
-                container.innerHTML += result.html;
-                var ids = result.ids;
-                var linktext = document.getElementById('comment-link-text-'+resp.client_id);
-                linktext.innerHTML = mstr.moodle.comments + ' ('+resp.count+')';
-                for(var i in ids) {
                     var attributes = {
-                        color: { to: '#06e' },
+                        width:{to:0},
-                        backgroundColor: { to: '#FFE390' }
+                        height:{to:0}
                     };
-                    var anim = new YAHOO.util.ColorAnim(ids[i], attributes);
+                    var cmt = Y.one('#'+htmlid);
+                    cmt.setStyle('overflow', 'hidden');
+                    var anim = new YAHOO.util.Anim(htmlid, attributes, 1, YAHOO.util.Easing.easeOut);
+                    anim.onComplete.subscribe(remove_dom, cmt, this);
                     anim.animate();
                 }
-            }
+            });
-        }
-    }
-    var ta = document.getElementById('dlg-content-'+cid);
-    if (ta.value && ta.value != mstr.moodle.addcomment) {
-        var url = M.cfg.wwwroot + '/comment/comment_ajax.php';
-        var formObject = document.getElementById('comment-form-'+cid);
-        YAHOO.util.Connect.setForm(formObject);
-        var trans = YAHOO.util.Connect.asyncRequest('POST', url+'?action=add', this.cb);
-    } else {
-        var attributes = {
-            backgroundColor: { from: '#FFE390', to:'#FFFFFF' }
-        };
-        var anim = new YAHOO.util.ColorAnim('dlg-content-'+cid, attributes);
-        anim.animate();
-    }
-}
-function delete_comment(client_id, comment_id) {
-    var url = M.cfg.wwwroot + '/comment/comment_ajax.php';
-    var data = {
-        'courseid': comment_params.courseid,
-        'contextid': comment_params.contextid,
-        'commentid': comment_id,
-        'client_id': client_id,
-        'sesskey': M.cfg.sesskey
-    }
             this.cb = {
                 success: function(o) {
                     var resp = json_decode(o.responseText);
@@ -131,67 +239,88 @@ function delete_comment(client_id, comment_id) {
                     anim.onComplete.subscribe(this.remove_dom, [], this);
                     anim.animate();
                 },
-        remove_dom: function() {
-            this.el.parentNode.removeChild(this.el);
             }
+        },
+        register_delete_buttons: function() {
+            var scope = this;
+            // page buttons
+            Y.all('div.comment-content a').each(
+                function(node, id) {
+                    node.on('click', function(e, node) {
+                        var id = node.get('id');
+                        var re = new RegExp("comment-delete-"+this.client_id+"-(\\d+)", "i");
+                        var result = id.match(re);
+                        if (result[1]) {
+                            this.delete(result[1]);
                         }
-    var trans = YAHOO.util.Connect.asyncRequest('POST',
+                        //this.load(result[1]);
-        url+'?action=delete', this.cb, build_querystring(data));
+                    }, scope, node);
-}
+                }
-function view_comments(client_id, area, itemid, page) {
+            );
-    var container = document.getElementById('comment-ctrl-'+client_id);
+        },
-    var ta = document.getElementById('dlg-content-'+client_id);
+        register_pagination: function() {
-    var img = document.getElementById('comment-img-'+client_id);
+            var scope = this;
-    if (container.style.display=='none'||container.style.display=='') {
+            // page buttons
+            Y.all('#comment-paging-'+this.client_id+' a').each(
+                function(node, id) {
+                    node.on('click', function(e, node) {
+                        var id = node.get('id');
+                        var re = new RegExp("comment-page-"+this.client_id+"-(\\d+)", "i");
+                        var result = id.match(re);
+                        this.load(result[1]);
+                    }, scope, node);
+                }
+            );
+        },
+        view: function(page) {
+            var container = Y.one('#comment-ctrl-'+this.client_id);
+            var ta = Y.one('#dlg-content-'+this.client_id);
+            var img = Y.one('#comment-img-'+this.client_id);
+            var d = container.getStyle('display');
+            if (d=='none'||d=='') {
                 // show
-        get_comments(client_id, area, itemid, page);
+                this.load(page);
-        container.style.display = 'block';
+                container.setStyle('display', 'block');
                 img.src=M.cfg.wwwroot+'/pix/t/expanded.png';
             } else {
                 // hide
-        container.style.display = 'none';
+                container.setStyle('display', 'none');
                 img.src=M.cfg.wwwroot+'/pix/t/collapsed.png';
-        ta.value = '';
+                ta.set('value','');
-    }
-    toggle_textarea.apply(ta, [false]);
-    // reset textarea size
-    ta.onclick = function() {
-        toggle_textarea.apply(this, [true]);
-    }
-    ta.onkeypress = function() {
-        if (this.scrollHeight > this.clientHeight && !window.opera)
-            this.rows += 1;
-    }
-    ta.onblur = function() {
-        toggle_textarea.apply(this, [false]);
             }
+            //toggle_textarea.apply(ta, [false]);
+            //// reset textarea size
+            ta.on('click', function() {
+                this.toggle_textarea(true);
+            }, this)
+            //ta.onkeypress = function() {
+                //if (this.scrollHeight > this.clientHeight && !window.opera)
+                    //this.rows += 1;
+            //}
+            ta.on('blur', function() {
+                this.toggle_textarea(false);
+            }, this);
             return false;
-}
+        },
-function comment_hide_link(cid) {
+        toggle_textarea: function(focus) {
-    var link = document.getElementById('comment-link-'+cid);
+            var t = Y.one('#dlg-content-'+this.client_id);
-    if(link){
-        link.style.display='none';
-    } else {
-    }
-}
-function toggle_textarea(focus) {
             if (focus) {
-        if (this.value == mstr.moodle.addcomment) {
+                if (t.get('value') == mstr.moodle.addcomment) {
-            this.value = '';
+                    t.set('value', '');
-            this.style.color = 'black';
+                    t.setStyle('color', 'black');
                 }
             }else{
-        if (this.value == '') {
+                if (t.get('value') == '') {
-            this.value = mstr.moodle.addcomment;
+                    t.set('value', mstr.moodle.addcomment);
-            this.style.color = 'grey';
+                    t.setStyle('color','grey');
-            this.rows = 1;
+                    t.set('rows', 1);
                 }
             }
-}
+        },
-function comment_check_response(data) {
+        wait: function() {
-    if (data.error) {
+            var container = Y.one('#comment-list-'+this.client_id);
-        alert(data.error);
+            container.set('innerHTML', '<div style="text-align:center"><img src="'+M.cfg.wwwroot+'/pix/i/loading.gif'+'" /></div>');
-        return false;
         }
-    return true;
+    });
-}
+    return core_comment;
+})();

lib/ajax/ajaxlib.php

@@ -349,6 +349,9 @@ class page_requirements_manager {
             } else if($name === 'core_filemanager') {
                 $pathtofilemanager = $CFG->httpswwwroot.'/lib/form/filemanager.js';
                 $module = array('fullpath'=>$pathtofilemanager, 'requires' => array('base', 'io', 'node', 'json', 'yui2-button', 'yui2-container', 'yui2-layout', 'yui2-menu', 'yui2-treeview'));
+            } else if($name === 'core_comment') {
+                $pathtocomment = $CFG->httpswwwroot.'/comment/comment.js';
+                $module = array('fullpath'=>$pathtocomment, 'requires' => array('base', 'io', 'node', 'json', 'yui2-animation'));
             }
         } else {
             //TODO: look for plugin info?

lib/commentlib.php

@@ -178,13 +178,6 @@ EOD;
         self::$comment_context = optional_param('comment_context', '', PARAM_INT);
         self::$comment_area    = optional_param('comment_area',    '', PARAM_ALPHAEXT);
 
-        $PAGE->requires->yui2_lib('yahoo');
-        $PAGE->requires->yui2_lib('dom');
-        $PAGE->requires->yui2_lib('event');
-        $PAGE->requires->yui2_lib('animation');
-        $PAGE->requires->yui2_lib('json');
-        $PAGE->requires->yui2_lib('connection');
-        $PAGE->requires->js('/comment/comment.js')->in_head();
         $PAGE->requires->string_for_js('addcomment', 'moodle');
         $PAGE->requires->string_for_js('deletecomment', 'moodle');
         $PAGE->requires->string_for_js('comments', 'moodle');
@@ -259,6 +252,7 @@ EOD;
     public function init($return = true) {
         global $CFG, $COURSE, $PAGE;
 
+
         $this->link = qualified_me();
         $murl = new moodle_url($this->link);
         $murl->remove_params('nonjscomment');
@@ -268,12 +262,21 @@ EOD;
         $murl->param('comment_area', $this->options->commentarea);
         $murl->remove_params('page');
         $this->link = $murl->out();
-        if ($this->env === 'block_comments') {
+        $options = new stdclass;
-            // auto expends comments
+        $options->client_id = $this->cid;
-            $PAGE->requires->js_function_call('view_comments', array($this->cid, $this->commentarea, $this->itemid, 0))->on_dom_ready();
+        $options->commentarea = $this->commentarea;
-            $PAGE->requires->js_function_call('comment_hide_link', array($this->cid))->on_dom_ready();
+        $options->itemid = $this->itemid;
+        $options->page   = 0;
+        $options->courseid = $this->course->id;
+        $options->contextid = $this->contextid;
+        if ($this->env == 'block_comments') {
+            $options->autostart = true;
+            $options->notoggle = true;
         }
 
+        $PAGE->requires->js_module('core_comment');
+        $PAGE->requires->js_function_call('initialize_comment', array($options))->on_dom_ready();
+
         if (!empty(self::$nonjs)) {
             return $this->print_comments($this->page, $return);
         }
@@ -298,7 +301,7 @@ EOD;
             // print commenting icon and tooltip
             $html = <<<EOD
 <div style="text-align:left">
-<a id="comment-link-{$this->cid}" onclick="return view_comments('{$this->cid}', '{$this->commentarea}', '{$this->itemid}', 0)" href="{$this->link}">
+<a id="comment-link-{$this->cid}" href="{$this->link}">
 <img id="comment-img-{$this->cid}" src="{$CFG->wwwroot}/pix/t/collapsed.png" alt="{$this->linktext}" title="{$this->linktext}" />
 <span id="comment-link-text-{$this->cid}">{$this->linktext} {$this->count}</span>
 </a>
@@ -327,12 +330,12 @@ EOD;
         </form>
     </div>
     <div class="fd" id="comment-action-{$this->cid}">
-        <a href="###" onclick="post_comment('{$this->cid}')"> {$strsubmit} </a>
+        <a href="###" id="comment-action-post-{$this->cid}"> {$strsubmit} </a>
 EOD;
         if ($this->env != 'block_comments') {
             $html .= <<<EOD
         <span> | </span>
-        <a href="###" onclick="view_comments('{$this->cid}')"> {$strcancel} </a>
+        <a href="###" id="comment-action-cancel-{$this->cid}"> {$strcancel} </a>
 EOD;
         }
 
@@ -434,13 +437,13 @@ EOD;
         } else {
             // return ajax paging bar
             $str = '';
-            $str .= '<div class="comment-paging">';
+            $str .= '<div class="comment-paging" id="comment-paging-'.$this->cid.'">';
             for ($p=0; $p<$pages; $p++) {
                 $extra = '';
                 if ($p == $page) {
                     $extra = ' style="border:1px solid grey" ';
                 }
-                $str .= '<a class="pageno" href="###"'.$extra.' onclick="get_comments(\''.$this->cid.'\', \''.$this->commentarea.'\', \''.$this->itemid.'\', \''.$p.'\')">'.($p+1).'</a> ';
+                $str .= '<a class="pageno" href="###"'.$extra.' id="comment-page-'.$this->cid.'-'.$p.'">'.($p+1).'</a> ';
             }
             $str .= '</div>';
         }

lib/javascript-static.js

@@ -14,10 +14,6 @@ M.yui.add_module = function(modules) {
 	}
 };
 
-
-
-// old JS functions, to be converted soon
-
 function launch_filemanager(options) {
     Y.use('core_filemanager', function() {
             var client_id = options.client_id;
@@ -28,6 +24,14 @@ function launch_filemanager(options) {
     });
 }
 
+function initialize_comment(options) {
+    Y.use('core_comment', function() {
+        new M.core_comment(options); 
+    });
+}
+
+// old JS functions, to be converted soon
+
 // === old legacy JS code, hopefully to be replaced soon by M.xx.yy and YUI3 code ===
 
 function popupchecker(msg) {