Remove jquery from todos icon with badge

Adds polyfill for custom Event

Fix es6 files

Removes unused var

Fixes after review

Adds entry to CHANGELOG

Fixes eslint rule for quotes

Fix eslint error

Revert changes CHANGELOG

Fix broken test

Fix eslint error

Fix eslint error

Simplifies the polyfill

Removes eslint disable comment for new constructors

5 files changed, 46 insertions, 4 deletions

diff --git a/app/assets/javascripts/header.js.es6 b/app/assets/javascripts/header.js.es6
new file mode 100644
index 00000000000..0dd0cebf3a3
--- /dev/null
+++ b/app/assets/javascripts/header.js.es6
@@ -0,0 +1,14 @@
+document.addEventListener('todo:toggle', (event) => {
+  const todoPendingCount = document.querySelector('.todos-pending-count');
+  const count = event.detail.count;
+
+  if (todoPendingCount !== null) {
+    todoPendingCount.textContent = gl.text.addDelimiter(count);
+  }
+
+  if (count === 0 && !todoPendingCount.classList.contains('hidden')) {
+    todoPendingCount.classList.add('hidden');
+  } else if (count !== 0 && todoPendingCount.classList.contains('hidden')) {
+    todoPendingCount.classList.remove('hidden');
+  }
+});
diff --git a/app/assets/javascripts/lib/utils/customevent_polyfill.js.es6 b/app/assets/javascripts/lib/utils/customevent_polyfill.js.es6
new file mode 100644
index 00000000000..416edb674dd
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/customevent_polyfill.js.es6
@@ -0,0 +1,11 @@
+/**
+ * CustomEvent support for IE
+ */
+window.CustomEvent = window.CustomEvent || function CustomEvent(event, params) {
+  const options = params || { bubbles: false, cancelable: false, detail: undefined };
+  const evt = document.createEvent('CustomEvent');
+  evt.initCustomEvent(event, options.bubbles, options.cancelable, options.detail);
+  return evt;
+};
+
+window.CustomEvent.prototype = window.CustomEvent.prototype || window.Event.prototype;
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index b1e844b7302..c6fbc508f38 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -84,7 +84,13 @@
     };
 
     Sidebar.prototype.todoUpdateDone = function(data, $btn, $btnText, $todoLoading) {
-      $(document).trigger('todo:toggle', data.count);
+      const event = new CustomEvent('todo:toggle', {
+        detail: {
+          count: data.count,
+        },
+      });
+
+      document.dispatchEvent(event);
 
       $btn.enable();
       $todoLoading.addClass('hidden');
diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6
index 9790a44972d..d73d775074c 100644
--- a/app/assets/javascripts/sidebar.js.es6
+++ b/app/assets/javascripts/sidebar.js.es6
@@ -40,8 +40,12 @@
         .on('click', sidebarToggleSelector, () => this.toggleSidebar())
         .on('click', pinnedToggleSelector, () => this.togglePinnedState())
         .on('click', 'html, body', (e) => this.handleClickEvent(e))
-        .on('page:change', () => this.renderState())
-        .on('todo:toggle', (e, count) => this.updateTodoCount(count));
+        .on('page:change', () => this.renderState());
+
+      document.addEventListener('todo:toggle', (event) => {
+        this.updateTodoCount(event.detail.count);
+      });
+
       this.renderState();
     }
 
diff --git a/app/assets/javascripts/todos.js.es6 b/app/assets/javascripts/todos.js.es6
index d8713600030..d9c1a739ee4 100644
--- a/app/assets/javascripts/todos.js.es6
+++ b/app/assets/javascripts/todos.js.es6
@@ -101,7 +101,14 @@
     }
 
     updateBadges(data) {
-      $(document).trigger('todo:toggle', data.count);
+      const event = new CustomEvent('todo:toggle', {
+        detail: {
+          count: data.count,
+        },
+      });
+
+      document.dispatchEvent(event);
+
       $('.todos-pending .badge').text(data.count);
       return $('.todos-done .badge').text(data.done_count);
     }