rewrite subscription javascript to accomodate new design

1 files changed, 52 insertions, 46 deletions

diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6
index 6d75688deeb..58b380e0f2e 100644
--- a/app/assets/javascripts/subscription.js.es6
+++ b/app/assets/javascripts/subscription.js.es6
@@ -1,52 +1,58 @@
-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, vars-on-top, no-unused-vars, one-var, one-var-declaration-per-line, camelcase, consistent-return, no-undef, padded-blocks, max-len */
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-
-  this.Subscription = (function() {
-    function Subscription(container) {
-      this.toggleSubscription = bind(this.toggleSubscription, this);
-      var $container;
-      this.$container = $(container);
-      this.url = this.$container.attr('data-url');
-      this.subscribe_button = this.$container.find('.js-subscribe-button');
-      this.subscription_status = this.$container.find('.subscription-status');
-      this.subscribe_button.unbind('click').click(this.toggleSubscription);
+/* global Vue */
+
+((global) => {
+  class Subscription {
+    constructor(containerSelector) {
+      this.containerElm = (typeof containerSelector === 'string')
+        ? document.querySelector(containerSelector)
+        : containerSelector;
+
+      const subscribeButton = this.containerElm.querySelector('.js-subscribe-button');
+      if (subscribeButton) {
+        // remove class so we don't bind twice
+        subscribeButton.classList.remove('js-subscribe-button');
+        subscribeButton.addEventListener('click', this.toggleSubscription.bind(this));
+      }
     }
 
-    Subscription.prototype.toggleSubscription = function(event) {
-      var action, btn, current_status;
-      btn = $(event.currentTarget);
-      action = btn.find('span').text();
-      current_status = this.subscription_status.attr('data-status');
-      btn.addClass('disabled');
-
-      if ($('html').hasClass('issue-boards-page')) {
-        this.url = this.$container.attr('data-url');
+    toggleSubscription(event) {
+      const button = event.currentTarget;
+      const buttonSpan = button.querySelector('span');
+      if (!buttonSpan || button.classList.contains('disabled')) {
+        return;
       }
-
-      return $.post(this.url, (function(_this) {
-        return function() {
-          var status;
-          btn.removeClass('disabled');
-
-          if ($('html').hasClass('issue-boards-page')) {
-            Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'subscribed', !gl.issueBoards.BoardsStore.detail.issue.subscribed);
-          } else {
-            status = current_status === 'subscribed' ? 'unsubscribed' : 'subscribed';
-            _this.subscription_status.attr('data-status', status);
-            action = status === 'subscribed' ? 'Unsubscribe' : 'Subscribe';
-            btn.find('span').text(action);
-            _this.subscription_status.find('>div').toggleClass('hidden');
-            if (btn.attr('data-original-title')) {
-              return btn.tooltip('hide').attr('data-original-title', action).tooltip('fixTitle');
-            }
+      button.classList.add('disabled');
+
+      const isSubscribed = buttonSpan.innerHTML.trim() !== 'Subscribe';
+      const toggleActionUrl = this.containerElm.getAttribute('data-url');
+
+      $.post(toggleActionUrl, () => {
+        button.classList.remove('disabled');
+
+        // hack to allow this to work with the issue boards Vue object
+        if (document.querySelector('html').classList.contains('issue-boards-page')) {
+          Vue.set(
+            gl.issueBoards.BoardsStore.detail.issue,
+            'subscribed',
+            !gl.issueBoards.BoardsStore.detail.issue.subscribed
+          );
+        } else {
+          const newToggleText = isSubscribed ? 'Subscribe' : 'Unsubscribe';
+          buttonSpan.innerHTML = newToggleText;
+
+          if (button.getAttribute('data-original-title')) {
+            button.setAttribute('data-original-title', newToggleText);
+            $(button).tooltip('hide').tooltip('fixTitle');
           }
-        };
-      })(this));
-    };
-
-    return Subscription;
+        }
+      });
+    }
 
-  })();
+    static bindAll(selector) {
+      [].forEach.call(document.querySelectorAll(selector), elm => new Subscription(elm));
+    }
+  }
 
-}).call(this);
+  // eslint-disable-next-line no-param-reassign
+  global.Subscription = Subscription;
+})(window.gl || (window.gl = {}));