From 3ce6a7be4a49403b39819c41875f88400279a58e Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Tue, 19 Nov 2013 10:41:57 +1100
Subject: [PATCH] defer rendering of the site map add new and unread links in
 the site map categories section

---
 .../discourse-header-category-info.js.handlebars  | 13 +++++++++++++
 .../discourse/templates/header.js.handlebars      |  6 ++++--
 .../javascripts/discourse/views/header_view.js    | 15 ++++++++++++++-
 3 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/templates/components/discourse-header-category-info.js.handlebars

diff --git a/app/assets/javascripts/discourse/templates/components/discourse-header-category-info.js.handlebars b/app/assets/javascripts/discourse/templates/components/discourse-header-category-info.js.handlebars
new file mode 100644
index 00000000000..8fadda9a16f
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/discourse-header-category-info.js.handlebars
@@ -0,0 +1,13 @@
+{{categoryLink category allowUncategorized=true}}
+{{#if currentUser}}
+  {{#with view.category}}
+    {{#if unreadTopics}}
+      <a href={{unbound unreadUrl}} class='badge new-posts badge-notification' title='{{i18n topic.unread_topics count="unreadTopics"}}'>{{unbound unreadTopics}}</a>
+    {{/if}}
+    {{#if newTopics}}
+      <a href={{unbound newUrl}} class='badge new-posts badge-notification' title='{{i18n topic.new_topics count="newTopics"}}'>{{unbound newTopics}} <i class='icon icon-asterisk'></i></a>
+    {{/if}}
+  {{/with}}
+{{else}}
+<b>{{unbound category.topic_count}}</b></a>
+{{/if}}
diff --git a/app/assets/javascripts/discourse/templates/header.js.handlebars b/app/assets/javascripts/discourse/templates/header.js.handlebars
index c483fc287f0..7971f9d76af 100644
--- a/app/assets/javascripts/discourse/templates/header.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/header.js.handlebars
@@ -74,6 +74,7 @@
           {{else}}
             <a class='icon'
                data-dropdown="site-map-dropdown"
+               data-render="renderSiteMap"
                href="#"
                title='{{i18n site_map}}'>
                <i class='icon-reorder'></i>
@@ -96,6 +97,7 @@
 
       {{render notifications notifications}}
 
+      {{#if view.renderSiteMap}}
       <section class='d-dropdown' id='site-map-dropdown'>
       <ul class="location-links">
         {{#if currentUser.staff}}
@@ -131,14 +133,14 @@
 
           {{#each categories}}
             <li class='category'>
-              {{categoryLink this allowUncategorized=true}}
-              <b>{{unbound topic_count}}</b></a>
+              {{discourse-header-category-info category=this currentUser=controller.currentUser}}
             </li>
           {{/each}}
         </ul>
       {{/if}}
 
     </section>
+    {{/if}}
 
     </div>
   </div>
diff --git a/app/assets/javascripts/discourse/views/header_view.js b/app/assets/javascripts/discourse/views/header_view.js
index b2e3e2271a6..7212809d5e8 100644
--- a/app/assets/javascripts/discourse/views/header_view.js
+++ b/app/assets/javascripts/discourse/views/header_view.js
@@ -20,6 +20,19 @@ Discourse.HeaderView = Discourse.View.extend({
         $ul = $target.closest('ul'),
         $html = $('html');
 
+    // we need to ensure we are rendered,
+    //  this optimises the speed of the initial render
+    var render = $target.data('render');
+    if(render){
+      if(!this.get(render)){
+        this.set(render, true);
+        Em.run.next(this, function(){
+          this.showDropdown($target);
+        });
+        return;
+      }
+    }
+
     var hideDropdown = function() {
       $dropdown.fadeOut('fast');
       $li.removeClass('active');
@@ -27,7 +40,7 @@ Discourse.HeaderView = Discourse.View.extend({
       return $html.off('click.d-dropdown');
     };
 
-    // if a dropdown is active and the user clics on it, close it
+    // if a dropdown is active and the user clicks on it, close it
     if($li.hasClass('active')) { return hideDropdown(); }
     // otherwhise, mark it as active
     $li.addClass('active');