Removed inline JS and added new affix declaration

Tidied up UX

Corrected naming convention issues with removing inline JS

@deckar01 saves the day! Simplified `toggleSidebar` and `hideSidebar`

Review changes

Merge conflicts and update autoscroll button

app/assets/javascripts/build.js

@@ -8,41 +8,44 @@
     Build.state = null;
 
     function Build(options) {
-      this.page_url = options.page_url;
-      this.build_url = options.build_url;
-      this.build_status = options.build_status;
+      options = options || $('.js-build-options').data();
+      this.pageUrl = options.pageUrl;
+      this.buildUrl = options.buildUrl;
+      this.buildStatus = options.buildStatus;
       this.state = options.state1;
-      this.build_stage = options.build_stage;
-      this.hideSidebar = bind(this.hideSidebar, this);
-      this.toggleSidebar = bind(this.toggleSidebar, this);
+      this.buildStage = options.buildStage;
       this.updateDropdown = bind(this.updateDropdown, this);
       this.$document = $(document);
       clearInterval(Build.interval);
       // Init breakpoint checker
       this.bp = Breakpoints.get();
+
       this.initSidebar();
+      this.$buildScroll = $('#js-build-scroll');
 
-      this.populateJobs(this.build_stage);
-      this.updateStageDropdownText(this.build_stage);
+      this.populateJobs(this.buildStage);
+      this.updateStageDropdownText(this.buildStage);
+      this.sidebarOnResize();
 
-      $(window).off('resize.build').on('resize.build', this.hideSidebar);
+      this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
       this.$document.off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
-      $('#js-build-scroll > a').off('click').on('click', this.stepTrace);
+      $(window).off('resize.build').on('resize.build', this.sidebarOnResize.bind(this));
+      $('a', this.$buildScroll).off('click.stepTrace').on('click.stepTrace', this.stepTrace);
       this.updateArtifactRemoveDate();
       if ($('#build-trace').length) {
         this.getInitialBuildTrace();
-        this.initScrollButtons();
+        this.initScrollButtonAffix();
       }
-      if (this.build_status === "running" || this.build_status === "pending") {
+      if (this.buildStatus === "running" || this.buildStatus === "pending") {
         $('#autoscroll-button').on('click', function() {
           var state;
           state = $(this).data("state");
           if ("enabled" === state) {
             $(this).data("state", "disabled");
-            return $(this).text("enable autoscroll");
+            return $(this).text("Enable autoscroll");
           } else {
             $(this).data("state", "enabled");
-            return $(this).text("disable autoscroll");
+            return $(this).text("Disable autoscroll");
           }
         //
         // Bind autoscroll button to follow build output
@@ -50,7 +53,7 @@
         });
         Build.interval = setInterval((function(_this) {
           return function() {
-            if (window.location.href.split("#").first() === _this.page_url) {
+            if (window.location.href.split("#").first() === _this.pageUrl) {
               return _this.getBuildTrace();
             }
           };
@@ -72,7 +75,6 @@
         top: this.sidebarTranslationLimits.max
       });
       this.$sidebar.niceScroll();
-      this.hideSidebar();
       this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
       this.$document.off('scroll.translateSidebar').on('scroll.translateSidebar', this.translateSidebar.bind(this));
     };
@@ -81,11 +83,11 @@
       var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped']
 
       return $.ajax({
-        url: this.build_url,
+        url: this.buildUrl,
         dataType: 'json',
-        success: function(build_data) {
-          $('.js-build-output').html(build_data.trace_html);
-          if (removeRefreshStatuses.indexOf(build_data.status) >= 0) {
+        success: function(buildData) {
+          $('.js-build-output').html(buildData.trace_html);
+          if (removeRefreshStatuses.indexOf(buildData.status) >= 0) {
             return $('.js-build-refresh').remove();
           }
         }
@@ -94,7 +96,7 @@
 
     Build.prototype.getBuildTrace = function() {
       return $.ajax({
-        url: this.page_url + "/trace.json?state=" + (encodeURIComponent(this.state)),
+        url: this.pageUrl + "/trace.json?state=" + (encodeURIComponent(this.state)),
         dataType: "json",
         success: (function(_this) {
           return function(log) {
@@ -108,8 +110,8 @@
                 $('.js-build-output').html(log.html);
               }
               return _this.checkAutoscroll();
-            } else if (log.status !== _this.build_status) {
-              return Turbolinks.visit(_this.page_url);
+            } else if (log.status !== _this.buildStatus) {
+              return Turbolinks.visit(_this.pageUrl);
             }
           };
         })(this)
@@ -122,12 +124,11 @@
       }
     };
 
-    Build.prototype.initScrollButtons = function() {
-      var $body, $buildScroll, $buildTrace;
-      $buildScroll = $('#js-build-scroll');
+    Build.prototype.initScrollButtonAffix = function() {
+      var $body, $buildTrace;
       $body = $('body');
       $buildTrace = $('#build-trace');
-      return $buildScroll.affix({
+      return this.$buildScroll.affix({
         offset: {
           bottom: function() {
             return $body.outerHeight() - ($buildTrace.outerHeight() + $buildTrace.offset().top);
@@ -136,18 +137,12 @@
       });
     };
 
-    Build.prototype.shouldHideSidebar = function() {
+    Build.prototype.shouldHideSidebarForViewport = function() {
       var bootstrapBreakpoint;
       bootstrapBreakpoint = this.bp.getBreakpointSize();
       return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
     };
 
-    Build.prototype.toggleSidebar = function() {
-      if (this.shouldHideSidebar()) {
-        return this.$sidebar.toggleClass('right-sidebar-expanded right-sidebar-collapsed');
-      }
-    };
-
     Build.prototype.translateSidebar = function(e) {
       var newPosition = this.sidebarTranslationLimits.max - (document.body.scrollTop || document.documentElement.scrollTop);
       if (newPosition < this.sidebarTranslationLimits.min) newPosition = this.sidebarTranslationLimits.min;
@@ -156,12 +151,20 @@
       });
     };
 
-    Build.prototype.hideSidebar = function() {
-      if (this.shouldHideSidebar()) {
-        return this.$sidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
-      } else {
-        return this.$sidebar.removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
-      }
+    Build.prototype.toggleSidebar = function(shouldHide) {
+      var shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
+      this.$buildScroll.toggleClass('sidebar-expanded', shouldShow)
+        .toggleClass('sidebar-collapsed', shouldHide);
+      this.$sidebar.toggleClass('right-sidebar-expanded', shouldShow)
+        .toggleClass('right-sidebar-collapsed', shouldHide);
+    };
+
+    Build.prototype.sidebarOnResize = function() {
+      this.toggleSidebar(this.shouldHideSidebarForViewport());
+    };
+
+    Build.prototype.sidebarOnClick = function() {
+      if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
     };
 
     Build.prototype.updateArtifactRemoveDate = function() {

app/assets/javascripts/dispatcher.js.es6

@@ -29,6 +29,9 @@
         case 'projects:boards:index':
           shortcut_handler = new ShortcutsNavigation();
           break;
+        case 'projects:builds:show':
+          new Build();
+          break;
         case 'projects:merge_requests:index':
         case 'projects:issues:index':
           Issuable.init();

app/assets/stylesheets/pages/builds.scss

@@ -14,18 +14,10 @@
     }
   }
 
-  .autoscroll-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 100;
-  }
-
   .scroll-controls {
-    &.affix-top {
-      position: absolute;
-      top: 10px;
-      right: 25px;
+    .scroll-step {
+      width: 31px;
+      margin: 0 0 0 auto;
     }
 
     &.affix-bottom {
@@ -34,13 +26,13 @@
     }
 
     &.affix {
-      right: 30px;
+      right: 25px;
       bottom: 15px;
       z-index: 1;
-
-      @media (min-width: $screen-md-min) {
-        right: 26%;
     }
+
+    &.sidebar-expanded {
+      right: #{$gutter_width + ($gl-padding * 2)};
     }
 
     a {

app/helpers/builds_helper.rb

@@ -5,4 +5,14 @@ module BuildsHelper
     build_class += ' retried' if build.retried?
     build_class
   end
+
+  def javascript_build_options
+    {
+      page_url: namespace_project_build_url(@project.namespace, @project, @build),
+      build_url: namespace_project_build_url(@project.namespace, @project, @build, :json),
+      build_status: @build.status,
+      build_stage: @build.stage,
+      state1: @build.trace_with_state[:state]
+    }
+  end
 end

app/views/projects/builds/show.html.haml

 - @no_container = true
 - page_title "#{@build.name} (##{@build.id})", "Builds"
-- trace_with_state = @build.trace_with_state
 - header_title project_title(@project, "Builds", project_builds_path(@project))
 = render "projects/pipelines/head", build_subnav: true
 
@@ -28,19 +27,21 @@
               Runners page
 
     .prepend-top-default
-      - if @build.active?
-        .autoscroll-container
-          %button.btn.btn-success.btn-sm#autoscroll-button{:type => "button", :data => {:state => 'disabled'}} enable autoscroll
       - if @build.erased?
         .erased.alert.alert-warning
           - erased_by = "by #{link_to @build.erased_by.name, user_path(@build.erased_by)}" if @build.erased_by
           Build has been erased #{erased_by.html_safe} #{time_ago_with_tooltip(@build.erased_at)}
       - else
         #js-build-scroll.scroll-controls
+          .scroll-step
             = link_to '#build-trace', class: 'btn' do
               %i.fa.fa-angle-up
             = link_to '#down-build-trace', class: 'btn' do
               %i.fa.fa-angle-down
+          - if @build.active?
+            .autoscroll-container
+              %button.btn.btn-sm#autoscroll-button{:type => "button", :data => {:state => 'disabled'}}
+                Enable autoscroll
         %pre.build-trace#build-trace
           %code.bash.js-build-output
           = icon("refresh spin", class: "js-build-refresh")
@@ -49,11 +50,4 @@
 
   = render "sidebar"
 
-  :javascript
-    new Build({
-      page_url: "#{namespace_project_build_url(@project.namespace, @project, @build)}",
-      build_url: "#{namespace_project_build_url(@project.namespace, @project, @build, :json)}",
-      build_status: "#{@build.status}",
-      build_stage: "#{@build.stage}",
-      state1: "#{trace_with_state[:state]}"
-    })
+.js-build-options{ data: javascript_build_options }