Add todo toggle event

6 files changed, 24 insertions, 11 deletions

diff --git a/app/assets/javascripts/header.js b/app/assets/javascripts/header.js
new file mode 100644
index 00000000000..5215ce9c4ba
--- /dev/null
+++ b/app/assets/javascripts/header.js
@@ -0,0 +1,9 @@
+(function() {
+
+  $(document).on('todo:toggle', function(e, count) {
+    var $todoPendingCount = $('.todos-pending-count');
+    $todoPendingCount.text(gl.text.addDelimiter(count));
+    $todoPendingCount.toggleClass('hidden', count === 0);
+  });
+
+})();
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index d761a844be9..6206c7f9237 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -7,6 +7,9 @@
     if ((base = w.gl).text == null) {
       base.text = {};
     }
+    gl.text.addDelimiter = function(text) {
+      return text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : text;
+    }
     gl.text.randomString = function() {
       return Math.random().toString(36).substring(7);
     };
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index e3d5f413c77..9f2385a3de8 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -74,16 +74,11 @@
     };
 
     Sidebar.prototype.todoUpdateDone = function(data, $btn, $btnText, $todoLoading) {
-      var $todoPendingCount;
-      $todoPendingCount = $('.todos-pending-count');
-      $todoPendingCount.text(data.count);
+      $(document).trigger('todo:toggle', data.count);
+
       $btn.enable();
       $todoLoading.addClass('hidden');
-      if (data.count === 0) {
-        $todoPendingCount.addClass('hidden');
-      } else {
-        $todoPendingCount.removeClass('hidden');
-      }
+
       if (data.delete_path != null) {
         $btn.attr('aria-label', $btn.data('mark-text')).attr('data-delete-path', data.delete_path);
         return $btnText.text($btn.data('mark-text'));
diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6
index 755fac8107b..50c9440de5f 100644
--- a/app/assets/javascripts/sidebar.js.es6
+++ b/app/assets/javascripts/sidebar.js.es6
@@ -37,7 +37,8 @@
         .on('click', sidebarToggleSelector, () => this.toggleSidebar())
         .on('click', pinnedToggleSelector, () => this.togglePinnedState())
         .on('click', 'html, body', (e) => this.handleClickEvent(e))
-        .on('page:change', () => this.renderState());
+        .on('page:change', () => this.renderState())
+        .on('todo:toggle', (e, count) => this.updateTodoCount(count));
       this.renderState();
     }
 
@@ -52,6 +53,10 @@
       }
     }
 
+    updateTodoCount(count) {
+      $('.js-todos-count').text(gl.text.addDelimiter(count));
+    }
+
     toggleSidebar() {
       this.isExpanded = !this.isExpanded;
       this.renderState();
diff --git a/app/assets/javascripts/todos.js.es6 b/app/assets/javascripts/todos.js.es6
index 055228c5df8..42539ef43e2 100644
--- a/app/assets/javascripts/todos.js.es6
+++ b/app/assets/javascripts/todos.js.es6
@@ -97,7 +97,8 @@
     }
 
     updateBadges(data) {
-      $('.todos-pending .badge, .todos-pending-count').text(data.count);
+      $(document).trigger('todo:toggle', data.count);
+      $('.todos-pending .badge').text(data.count);
       return $('.todos-done .badge').text(data.done_count);
     }
 
diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index 67f558c854b..3b1295dc3c0 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -7,7 +7,7 @@
     = link_to dashboard_todos_path, title: 'Todos' do
       %span
         Todos
-        %span.count= number_with_delimiter(todos_pending_count)
+        %span.count.js-todos-count= number_with_delimiter(todos_pending_count)
   = nav_link(path: 'dashboard#activity') do
     = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do
       %span