Commit 6f80bf1b authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Extract LargeExpander class. 

This will take care of rendering the comments expander together with a
large heading "Comments".  Use in the main comments section of class
and in guides and videos.
parent 23243216

template/app/controller/Comments.js

+11 −6
Original line number Diff line number Diff line
@@ -13,6 +13,7 @@ Ext.define('Docs.controller.Comments', { 
    requires: [

        "Docs.view.auth.LoginHelper",

        "Docs.view.comments.Form",

        "Docs.view.comments.LargeExpander",

        "Docs.Settings",

        "Docs.Syntax",

        "Docs.Tip"
@@ -643,16 +644,20 @@ Ext.define('Docs.controller.Comments', { 
    },



    renderGuideCommentContainers: function(guide) {

        Docs.view.Comments.classCommentsTpl.append(Ext.get('guide').down(".x-panel-body"), {

            num: 0,

            id: 'guide-' + guide

        new Docs.view.comments.LargeExpander({

            count: 0,

            type: "guide",

            name: guide,

            el: Ext.get('guide').down(".x-panel-body")

        });

    },



    renderVideoCommentContainers: function(video) {

        Docs.view.Comments.classCommentsTpl.append(Ext.get('video').down(".x-panel-body"), {

            num: 0,

            id: 'video-' + video

        new Docs.view.comments.LargeExpander({

            count: 0,

            type: "video",

            name: video,

            el: Ext.get('video').down(".x-panel-body")

        });

    },

template/app/view/cls/Overview.js

+6 −6
Original line number Diff line number Diff line
@@ -8,7 +8,7 @@ Ext.define('Docs.view.cls.Overview', { 
    requires: [

        'Docs.view.cls.Toolbar',

        'Docs.view.examples.Inline',

        'Docs.view.comments.Expander',

        'Docs.view.comments.LargeExpander',

        'Docs.view.comments.MemberWrap',

        'Docs.Syntax',

        'Docs.Settings'
@@ -113,16 +113,16 @@ Ext.define('Docs.view.cls.Overview', { 
        this.toolbar.showCommentCount();



        // Insert class level comment container under class intro docs

        this.clsExpander = new Docs.view.comments.Expander({

            num: 0,

            className: this.docClass.name,

            renderTo: Ext.DomHelper.append(Ext.query('.doc-contents')[0], "<div></div>")

        this.clsExpander = new Docs.view.comments.LargeExpander({

            count: 0,

            name: this.docClass.name,

            el: Ext.query('.doc-contents')[0]

        });



        // Add a comment container to each class member

        this.memberWrappers = Ext.Array.map(Ext.query('.member'), function(memberDoc) {

            return new Docs.view.comments.MemberWrap({

                num: 0,

                count: 0,

                className: this.docClass.name,

                el: memberDoc

            });

template/app/view/comments/Expander.js

+9 −13
Original line number Diff line number Diff line
@@ -4,6 +4,12 @@ 
Ext.define('Docs.view.comments.Expander', {

    extend: 'Ext.Component',



    /**

     * @cfg {String} type

     * One of: "class", "guide", "video".

     */

    type: "class",



    /**

     * @cfg {String} className

     */
@@ -16,11 +22,6 @@ Ext.define('Docs.view.comments.Expander', { 


    initComponent: function() {

        this.tpl = new Ext.XTemplate(

            '<tpl if="isClass">',

                '<div class="comments-section">',

                    '<h3 class="members-title icon-comment">Comments</h3>',

            '</tpl>',



            '<div class="comments-div first-child" id="comments-{id}">',

                '<a href="#" class="side toggleComments"><span></span></a>',

                '<a href="#" class="name toggleComments">',
@@ -34,11 +35,7 @@ Ext.define('Docs.view.comments.Expander', { 
                        '</tpl>',

                    '</tpl>',

                '</a>',

            '</div>',



            '<tpl if="isClass">',

                '</div>',

            '</tpl>'

            '</div>'

        );



        this.data = this.prepareData();
@@ -56,12 +53,11 @@ Ext.define('Docs.view.comments.Expander', { 
    },



    prepareData: function() {

        var cls = 'class-' + this.className.replace(/\./g, '-');

        var cls = this.type + '-' + this.className.replace(/\./g, '-');



        return {

            id: this.memberId ? cls+"-"+this.memberId : cls,

            count: this.count,

            isClass: !this.memberId

            count: this.count

        };

    }

template/app/view/comments/LargeExpander.js

0 → 100644
+58 −0
Original line number Diff line number Diff line 
/**

 * The Expander with a h3 heading "Comments".

 */

Ext.define('Docs.view.comments.LargeExpander', {

    requires: ["Docs.view.comments.Expander"],



    html: [

        '<div class="comments-section">',

            '<h3 class="members-title icon-comment">Comments</h3>',

            '<div></div>',

        '</div>'

    ].join(""),



    /**

     * @cfg {Ext.Element/HTMLElement} el

     * The member element to wrap.

     */



    /**

     * @cfg {String} type

     * One of: "class", "guide", "video".

     */

    type: "class",



    /**

     * @cfg {String} name

     * The name of the current class, guide or video.

     */



    /**

     * @cfg {Number} count

     * The comment count of the member.

     */



    constructor: function(cfg) {

        Ext.apply(this, cfg);

        this.el = Ext.get(cfg.el);



        // The expander needs to reside inside some element.

        var expanderWrap = Ext.DomHelper.append(this.el, this.html, true).down("div");



        this.expander = new Docs.view.comments.Expander({

            count: this.count,

            type: this.type,

            className: this.name,

            renderTo: expanderWrap

        });

    },



    /**

     * Updates the comment count.

     * @param {Number} count

     */

    setCount: function(count) {

        this.expander.setCount(count);

    }



});

template/app/view/comments/MemberWrap.js

+3 −1
Original line number Diff line number Diff line
@@ -3,6 +3,8 @@ 
 * comments data inside it.

 */

Ext.define('Docs.view.comments.MemberWrap', {

    requires: ["Docs.view.comments.Expander"],



    tpl: Ext.create("Ext.XTemplate", '<span class="toggleMemberComments">{0}</span>'),



    /**
@@ -28,7 +30,7 @@ Ext.define('Docs.view.comments.MemberWrap', { 
        var expanderWrap = Ext.DomHelper.append(this.el.down('.long'), "<div></div>");



        this.expander = new Docs.view.comments.Expander({

            num: this.num,

            count: this.count,

            className: this.className,

            memberId: this.getMemberId(),

            renderTo: expanderWrap