From 6f80bf1b724f77a76f4b2ca5f51aa75a2008c451 Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Tue, 25 Sep 2012 14:40:40 +0300
Subject: [PATCH] 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.
---
 template/app/controller/Comments.js         | 17 +++---
 template/app/view/cls/Overview.js           | 12 ++---
 template/app/view/comments/Expander.js      | 22 ++++----
 template/app/view/comments/LargeExpander.js | 58 +++++++++++++++++++++
 template/app/view/comments/MemberWrap.js    |  4 +-
 5 files changed, 87 insertions(+), 26 deletions(-)
 create mode 100644 template/app/view/comments/LargeExpander.js

diff --git a/template/app/controller/Comments.js b/template/app/controller/Comments.js
index d82a1685..c1ac8a7d 100644
--- a/template/app/controller/Comments.js
+++ b/template/app/controller/Comments.js
@@ -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")
         });
     },
 
diff --git a/template/app/view/cls/Overview.js b/template/app/view/cls/Overview.js
index 00ff18a9..2bfb1bac 100644
--- a/template/app/view/cls/Overview.js
+++ b/template/app/view/cls/Overview.js
@@ -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
             });
diff --git a/template/app/view/comments/Expander.js b/template/app/view/comments/Expander.js
index 971cd043..c1d913c3 100644
--- a/template/app/view/comments/Expander.js
+++ b/template/app/view/comments/Expander.js
@@ -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
         };
     }
 
diff --git a/template/app/view/comments/LargeExpander.js b/template/app/view/comments/LargeExpander.js
new file mode 100644
index 00000000..1dd6762b
--- /dev/null
+++ b/template/app/view/comments/LargeExpander.js
@@ -0,0 +1,58 @@
+/**
+ * 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);
+    }
+
+});
diff --git a/template/app/view/comments/MemberWrap.js b/template/app/view/comments/MemberWrap.js
index 262e158f..e79c0140 100644
--- a/template/app/view/comments/MemberWrap.js
+++ b/template/app/view/comments/MemberWrap.js
@@ -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
-- 
GitLab