Commit f77b9367 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Build comments button into the toolbar itself. 

Instead of injecting the button to the toolbar from outside, the toolbar
itself manages the button, providing methods to show and update it.

Also the toolbar now fires an event when the comment count button is
clicked - the comments controller just needs to handle that event, not
deal with binding the event to toolbar element after render.
parent 67a0672a

template/app/controller/Comments.js

+4 −8
Original line number Diff line number Diff line
@@ -136,14 +136,10 @@ Ext.define('Docs.controller.Comments', { 
            },



            'classoverview toolbar': {

                afterrender: function(cmp) {

                    cmp.el.addListener('click', function() {

                commentcountclick: function(cmp) {

                    var commentsDiv = Ext.get(Ext.query('.comments-section .comments-div')[0]);

                    this.getOverview().scrollToEl('.comments-section', -20);

                    this.openComments(commentsDiv);

                    }, this, {

                        delegate: '.comment-btn'

                    });

                }

            }

        });

template/app/view/Comments.js

+7 −10
Original line number Diff line number Diff line
@@ -316,14 +316,7 @@ Ext.define('Docs.view.Comments', { 
     */

    renderClassCommentContainers: function(cls) {

        // Add comment button to class toolbar

        Ext.ComponentQuery.query('classoverview toolbar')[0].insert(-2, {

            xtype: 'container',

            id: 'classCommentToolbarBtn',

            width: 24,

            margin: '0 4 0 0',

            cls: 'comment-btn',

            html: '0'

        });

        this.getClassToolbar().showCommentCount();



        // Insert class level comment container under class intro docs

        this.classCommentsTpl.insertFirst(Ext.query('.members')[0], {
@@ -350,7 +343,7 @@ Ext.define('Docs.view.Comments', { 
        if (clsMeta && clsMeta['']) {



            // Update toolbar icon

            Ext.getCmp('classCommentToolbarBtn').update(clsMeta['']);

            this.getClassToolbar().setCommentCount(clsMeta['']);



            // Update class level comments meta

            this.numCommentsTpl.overwrite(Ext.get(Ext.query('.comments-section a.name')[0]), {
@@ -358,7 +351,7 @@ Ext.define('Docs.view.Comments', { 
            });

        } else {

            // Update toolbar icon

            Ext.getCmp('classCommentToolbarBtn').update('0');

            this.getClassToolbar().setCommentCount(0);



            // Update class level comments meta

            this.numCommentsTpl.overwrite(Ext.get(Ext.query('.comments-section a.name')[0]), {
@@ -398,6 +391,10 @@ Ext.define('Docs.view.Comments', { 
        });

    },



    getClassToolbar: function() {

        return Ext.ComponentQuery.query('classoverview toolbar')[0];

    },



    updateGuideCommentMeta: function(guide) {

        var guideMeta = Docs.commentMeta['guide'][guide];

template/app/view/cls/Toolbar.js

+40 −0
Original line number Diff line number Diff line
@@ -32,6 +32,11 @@ Ext.define('Docs.view.cls.Toolbar', { 
             * @param {String} type Type of button that was clicked "cfg", "method", "event", etc

             */

            "menubuttonclick",

            /**

             * @event commentcountclick

             * Fired when the comment count button clicked.

             */

            "commentcountclick",

            /**

             * @event filter

             * Fires when text typed to filter, or one of the hide-checkboxes clicked.
@@ -124,6 +129,7 @@ Ext.define('Docs.view.cls.Toolbar', { 
                }

            }),

            { xtype: 'tbspacer', width: 10 },

            this.commentCount = this.createCommentCount(),

            {

                xtype: 'button',

                text: 'Show',
@@ -256,5 +262,39 @@ Ext.define('Docs.view.cls.Toolbar', { 
     */

    getFilterValue: function() {

        return this.filterField.getValue();

    },



    createCommentCount: function() {

        return Ext.create('Ext.container.Container', {

            width: 24,

            margin: '0 4 0 0',

            cls: 'comment-btn',

            html: '0',

            hidden: true,

            listeners: {

                afterrender: function(cmp) {

                    cmp.el.addListener('click', function() {

                        this.fireEvent("commentcountclick");

                    }, this);

                },

                scope: this

            }

        });

    },



    /**

     * Makes the comment-count button visible.

     */

    showCommentCount: function() {

        this.commentCount.show();

    },



    /**

     * Updates the number shown on comment count button.

     *

     * @param {Number} n

     */

    setCommentCount: function(n) {

        this.commentCount.update(""+n);

    }

});