From d795a70d2da02110fe517dc8d1e79d5986ac2946 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Fri, 18 Nov 2016 14:52:20 -0600 Subject: rename subscription.js to subscription.js.es6 --- app/assets/javascripts/subscription.js | 52 ------------------------------ app/assets/javascripts/subscription.js.es6 | 52 ++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 52 deletions(-) delete mode 100644 app/assets/javascripts/subscription.js create mode 100644 app/assets/javascripts/subscription.js.es6 (limited to 'app/assets') diff --git a/app/assets/javascripts/subscription.js b/app/assets/javascripts/subscription.js deleted file mode 100644 index 6d75688deeb..00000000000 --- a/app/assets/javascripts/subscription.js +++ /dev/null @@ -1,52 +0,0 @@ -/* 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); - } - - 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'); - } - - 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'); - } - } - }; - })(this)); - }; - - return Subscription; - - })(); - -}).call(this); diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6 new file mode 100644 index 00000000000..6d75688deeb --- /dev/null +++ b/app/assets/javascripts/subscription.js.es6 @@ -0,0 +1,52 @@ +/* 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); + } + + 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'); + } + + 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'); + } + } + }; + })(this)); + }; + + return Subscription; + + })(); + +}).call(this); -- cgit v1.2.1 From e0e5ea0e19d2527c9787eb7c23001fca8e7f58a8 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Thu, 17 Nov 2016 09:48:45 -0600 Subject: rewrite subscription javascript to accomodate new design --- .../boards/components/board_sidebar.js.es6 | 2 +- app/assets/javascripts/subscription.js.es6 | 98 ++++++++++++---------- app/assets/stylesheets/pages/boards.scss | 1 - 3 files changed, 53 insertions(+), 48 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6 index d5cb6164e0b..1644a772737 100644 --- a/app/assets/javascripts/boards/components/board_sidebar.js.es6 +++ b/app/assets/javascripts/boards/components/board_sidebar.js.es6 @@ -47,7 +47,7 @@ new gl.DueDateSelectors(); new LabelsSelect(); new Sidebar(); - new Subscription('.subscription'); + gl.Subscription.bindAll('.subscription'); } }); })(); 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 = {})); diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 4327f8bf640..82f36f24867 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -325,7 +325,6 @@ } .issuable-header-text { - width: 100%; padding-right: 35px; > strong { -- cgit v1.2.1 From d23a888ba3cc31a1f6f69d70a090acd3625b186b Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Tue, 22 Nov 2016 15:47:11 -0600 Subject: move eslint rules to top of script --- app/assets/javascripts/subscription.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6 index 58b380e0f2e..f043e3e6850 100644 --- a/app/assets/javascripts/subscription.js.es6 +++ b/app/assets/javascripts/subscription.js.es6 @@ -1,3 +1,4 @@ +/* eslint-disable no-param-reassign */ /* global Vue */ ((global) => { @@ -53,6 +54,5 @@ } } - // eslint-disable-next-line no-param-reassign global.Subscription = Subscription; })(window.gl || (window.gl = {})); -- cgit v1.2.1 From 85a82ed4d6ef12100a7e4df19e6b6506a92e2ee9 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Tue, 22 Nov 2016 15:56:52 -0600 Subject: use less error-prone lowercase comparison for isSubscribed --- app/assets/javascripts/subscription.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6 index f043e3e6850..ae596916c9d 100644 --- a/app/assets/javascripts/subscription.js.es6 +++ b/app/assets/javascripts/subscription.js.es6 @@ -24,7 +24,7 @@ } button.classList.add('disabled'); - const isSubscribed = buttonSpan.innerHTML.trim() !== 'Subscribe'; + const isSubscribed = buttonSpan.innerHTML.trim().toLowerCase() !== 'subscribe'; const toggleActionUrl = this.containerElm.getAttribute('data-url'); $.post(toggleActionUrl, () => { -- cgit v1.2.1 From ee99de6e61a02a61bef8fb0f85a114d2a28c5425 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Wed, 30 Nov 2016 17:20:06 -0600 Subject: add comma to satisfy eslint comma-dangle --- app/assets/javascripts/subscription.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6 index ae596916c9d..8ca3281d824 100644 --- a/app/assets/javascripts/subscription.js.es6 +++ b/app/assets/javascripts/subscription.js.es6 @@ -35,7 +35,7 @@ Vue.set( gl.issueBoards.BoardsStore.detail.issue, 'subscribed', - !gl.issueBoards.BoardsStore.detail.issue.subscribed + !gl.issueBoards.BoardsStore.detail.issue.subscribed, ); } else { const newToggleText = isSubscribed ? 'Subscribe' : 'Unsubscribe'; -- cgit v1.2.1 From 31356c203d6333158872ecad98d1cc071631a559 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Wed, 30 Nov 2016 17:21:28 -0600 Subject: satisfy eslint no-param-reassign and remove rule exception --- app/assets/javascripts/subscription.js.es6 | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6 index 8ca3281d824..73d484f85c7 100644 --- a/app/assets/javascripts/subscription.js.es6 +++ b/app/assets/javascripts/subscription.js.es6 @@ -1,7 +1,6 @@ -/* eslint-disable no-param-reassign */ /* global Vue */ -((global) => { +(() => { class Subscription { constructor(containerSelector) { this.containerElm = (typeof containerSelector === 'string') @@ -54,5 +53,6 @@ } } - global.Subscription = Subscription; -})(window.gl || (window.gl = {})); + window.gl = window.gl || {}; + window.gl.Subscription = Subscription; +})(); -- cgit v1.2.1 From d2ac77177dccfdd079605c4fe1c4cfe75a64653d Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Wed, 30 Nov 2016 17:43:21 -0600 Subject: remove tooltip logic --- app/assets/javascripts/subscription.js.es6 | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6 index 73d484f85c7..d5876ee3944 100644 --- a/app/assets/javascripts/subscription.js.es6 +++ b/app/assets/javascripts/subscription.js.es6 @@ -37,13 +37,7 @@ !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'); - } + buttonSpan.innerHTML = isSubscribed ? 'Subscribe' : 'Unsubscribe'; } }); } -- cgit v1.2.1 From eed2de205852afbc4ff56eaaff7e9299f7928317 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Thu, 1 Dec 2016 00:11:21 -0600 Subject: use HTMLElement.dataset over getAttribute since all browsers GitLab supports implement it --- app/assets/javascripts/subscription.js.es6 | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6 index d5876ee3944..02be594135d 100644 --- a/app/assets/javascripts/subscription.js.es6 +++ b/app/assets/javascripts/subscription.js.es6 @@ -24,7 +24,7 @@ button.classList.add('disabled'); const isSubscribed = buttonSpan.innerHTML.trim().toLowerCase() !== 'subscribe'; - const toggleActionUrl = this.containerElm.getAttribute('data-url'); + const toggleActionUrl = this.containerElm.dataset.url; $.post(toggleActionUrl, () => { button.classList.remove('disabled'); -- cgit v1.2.1 From 1f6ec183154369f8a11d63713970cded0b1474fa Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Thu, 1 Dec 2016 00:14:12 -0600 Subject: remove selector string option from Subscription constructor --- app/assets/javascripts/subscription.js.es6 | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6 index 02be594135d..62d1604fe9e 100644 --- a/app/assets/javascripts/subscription.js.es6 +++ b/app/assets/javascripts/subscription.js.es6 @@ -2,12 +2,10 @@ (() => { class Subscription { - constructor(containerSelector) { - this.containerElm = (typeof containerSelector === 'string') - ? document.querySelector(containerSelector) - : containerSelector; + constructor(containerElm) { + this.containerElm = containerElm; - const subscribeButton = this.containerElm.querySelector('.js-subscribe-button'); + const subscribeButton = containerElm.querySelector('.js-subscribe-button'); if (subscribeButton) { // remove class so we don't bind twice subscribeButton.classList.remove('js-subscribe-button'); -- cgit v1.2.1