copypaste task_list setup and events to own class

app/assets/javascripts/issue.js

@@ -3,7 +3,7 @@
 
 require('./flash');
 require('vendor/jquery.waitforimages');
-require('vendor/task_list');
+require('./task_list');
 
 (function() {
   var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
@@ -11,10 +11,11 @@ require('vendor/task_list');
   this.Issue = (function() {
     function Issue() {
       this.submitNoteForm = bind(this.submitNoteForm, this);
-      // Prevent duplicate event bindings
-      this.disableTaskList();
       if ($('a.btn-close').length) {
-        this.initTaskList();
+        this.taskList = new gl.TaskList({
+          dataType: 'issue',
+          selector: '.detail-page-description'
+        });
         this.initIssueBtnEventListeners();
       }
       this.initMergeRequests();
@@ -22,11 +23,6 @@ require('vendor/task_list');
       this.initCanCreateBranch();
     }
 
-    Issue.prototype.initTaskList = function() {
-      $('.detail-page-description .js-task-list-container').taskList('enable');
-      return $(document).on('tasklist:changed', '.detail-page-description .js-task-list-container', this.updateTaskList);
-    };
-
     Issue.prototype.initIssueBtnEventListeners = function() {
       var _this, issueFailMessage;
       _this = this;
@@ -82,30 +78,6 @@ require('vendor/task_list');
       }
     };
 
-    Issue.prototype.disableTaskList = function() {
-      $('.detail-page-description .js-task-list-container').taskList('disable');
-      return $(document).off('tasklist:changed', '.detail-page-description .js-task-list-container');
-    };
-
-    Issue.prototype.updateTaskList = function() {
-      var patchData;
-      patchData = {};
-      patchData['issue'] = {
-        'description': $('.js-task-list-field', this).val()
-      };
-      return $.ajax({
-        type: 'PATCH',
-        url: $('form.js-issuable-update').attr('action'),
-        data: patchData,
-        success: function(issue) {
-          document.querySelector('#task_status').innerText = issue.task_status;
-          document.querySelector('#task_status_short').innerText = issue.task_status_short;
-        }
-      });
-    // TODO (rspeicher): Make the issue description inline-editable like a note so
-    // that we can re-use its form here
-    };
-
     Issue.prototype.initMergeRequests = function() {
       var $container;
       $container = $('#merge-requests');

app/assets/javascripts/merge_request.js

@@ -2,7 +2,7 @@
 /* global MergeRequestTabs */
 
 require('vendor/jquery.waitforimages');
-require('vendor/task_list');
+require('./task_list');
 require('./merge_request_tabs');
 
 (function() {
@@ -24,12 +24,13 @@ require('./merge_request_tabs');
         };
       })(this));
       this.initTabs();
-      // Prevent duplicate event bindings
-      this.disableTaskList();
       this.initMRBtnListeners();
       this.initCommitMessageListeners();
       if ($("a.btn-close").length) {
-        this.initTaskList();
+        this.taskList = new gl.TaskList({
+          dataType: 'merge_request',
+          selector: '.detail-page-description'
+        });
       }
     }
 
@@ -50,11 +51,6 @@ require('./merge_request_tabs');
       return this.$('.all-commits').removeClass('hide');
     };
 
-    MergeRequest.prototype.initTaskList = function() {
-      $('.detail-page-description .js-task-list-container').taskList('enable');
-      return $(document).on('tasklist:changed', '.detail-page-description .js-task-list-container', this.updateTaskList);
-    };
-
     MergeRequest.prototype.initMRBtnListeners = function() {
       var _this;
       _this = this;
@@ -85,30 +81,6 @@ require('./merge_request_tabs');
       }
     };
 
-    MergeRequest.prototype.disableTaskList = function() {
-      $('.detail-page-description .js-task-list-container').taskList('disable');
-      return $(document).off('tasklist:changed', '.detail-page-description .js-task-list-container');
-    };
-
-    MergeRequest.prototype.updateTaskList = function() {
-      var patchData;
-      patchData = {};
-      patchData['merge_request'] = {
-        'description': $('.js-task-list-field', this).val()
-      };
-      return $.ajax({
-        type: 'PATCH',
-        url: $('form.js-issuable-update').attr('action'),
-        data: patchData,
-        success: function(mergeRequest) {
-          document.querySelector('#task_status').innerText = mergeRequest.task_status;
-          document.querySelector('#task_status_short').innerText = mergeRequest.task_status_short;
-        }
-      });
-    // TODO (rspeicher): Make the merge request description inline-editable like a
-    // note so that we can re-use its form here
-    };
-
     MergeRequest.prototype.initCommitMessageListeners = function() {
       $(document).on('click', 'a.js-with-description-link', function(e) {
         var textarea = $('textarea.js-commit-message');

app/assets/javascripts/task_list.js.es6

+require('vendor/task_list');
+
+class TaskList {
+  constructor(options = {}) {
+    this.selector = options.selector;
+    this.dataType = options.dataType;
+    // Prevent duplicate event bindings
+    this.disable();
+    this.init();
+  }
+
+  init() {
+    $(this.selector + ' .js-task-list-container').taskList('enable');
+    $(document).on('tasklist:changed', this.selector + ' .js-task-list-container', this.update.bind(this));
+  }
+
+  disable() {
+    $(this.selector + ' .js-task-list-container').taskList('disable');
+    return $(document).off('tasklist:changed', this.selector + ' .js-task-list-container');
+  }
+
+  update(e) {
+    var patchData;
+    patchData = {};
+    patchData[this.dataType] = {
+      'description': $(e.target).val()
+    };
+    return $.ajax({
+      type: 'PATCH',
+      url: $('form.js-issuable-update').attr('action'),
+      data: patchData,
+      success: function(result) {
+        document.querySelector('#task_status').innerText = result.task_status;
+        document.querySelector('#task_status_short').innerText = result.task_status_short;
+      }
+    });
+  // TODO (rspeicher): Make the issue description inline-editable like a note so
+  // that we can re-use its form here
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.TaskList = TaskList;