Finished up margin JS logic

2 files changed, 35 insertions, 28 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 8d99b12102d..45494afe7aa 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -126,6 +126,9 @@
             new TreeView();
           }
           break;
+        case 'projects:pipelines:show':
+          new window.gl.Pipelines();
+          break;
         case 'groups:activity':
           new Activities();
           break;
diff --git a/app/assets/javascripts/pipeline.js.es6 b/app/assets/javascripts/pipeline.js.es6
index f501761b1ec..6299ba2269d 100644
--- a/app/assets/javascripts/pipeline.js.es6
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -1,36 +1,40 @@
-(function() {
-
-  function addMarginToBuild () {
-    const $secondChildBuildNode = $('.build:nth-child(2)');
-    const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
-    // const $previousBuildColumn = $secondChildBuildNode.closest('.stage-column').prev('.stage-column');
-    if ($secondChildBuildNode.length) {
-      $secondChildBuildNode.closest('.stage-column').addClass('left-margin');
-      $firstChildBuildNode.addClass('left-connector');
+((global) => {
+
+  class Pipelines {
+    constructor() {
+      $(document).off('click', '.toggle-pipeline-btn').on('click', '.toggle-pipeline-btn', this.toggleGraph);
+      $(document).off('ready.addMarginToBuildColumns').on('ready.addMarginToBuildColumns', this.addMarginToBuildColumns);
     }
-  }
 
-  function toggleGraph() {
-    const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
-    const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
-    const $btnText = $(this).find('.toggle-btn-text');
-    const $icon = $(this).find('.fa');
+    toggleGraph() {
+      const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
+      const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
+      const $btnText = $(this).find('.toggle-btn-text');
 
-    $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
+      $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
 
-    const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
-    const expandIcon = 'fa-caret-down';
-    const hideIcon = 'fa-caret-up';
+      const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
 
-    if(graphCollapsed) {
-      $btnText.text('Expand');
-      $icon.removeClass(hideIcon).addClass(expandIcon);
-    } else {
-      $btnText.text('Hide');
-      $icon.removeClass(expandIcon).addClass(hideIcon);
+      graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide')
+    }
+
+    addMarginToBuildColumns() {
+      const $secondChildBuildNode = $('.build:nth-child(2)');
+      if ($secondChildBuildNode.length) {
+        const $firstChildBuildNode = $secondChildBuildNode.prev('.build');
+        const $multiBuildColumn = $secondChildBuildNode.closest('.stage-column');
+        const $previousColumn = $multiBuildColumn.prev('.stage-column');
+        $multiBuildColumn.addClass('left-margin');
+        $firstChildBuildNode.addClass('left-connector');
+        $previousColumn.each(function() {
+          $this = $(this);
+          if ($('.build', $this).length === 1) $this.addClass('no-margin');
+        });
+      }
+      $('.pipeline-graph-container').removeClass('hidden');
     }
   }
 
-  $(document).on('click', '.toggle-pipeline-btn', toggleGraph);
-  $(document).on('ready', addMarginToBuild);
-})();
+  global.Pipelines = Pipelines;
+
+})(window.gl || (window.gl = {}));