rosa-build/app/views/projects/build_lists/_log.html.haml

.hr
%a{:name => 'log'}
.log-wrapper
  .log-header
    .text-wrap
      = link_to({:anchor => :log}, {:id => 'log_anchor'}) do
        %h3= t("layout.build_lists.log.build_log")
    %span
    .both
  .log-body.hidden
    .reloader
      %table.options
        %tr.top
          %td.first
            = label_tag :word_wrap do
              = check_box_tag :word_wrap
              = t("layout.word_wrap")
          %td.last{ :class => @build_list.build_started? ? nil : :hidden }
            = label_tag :autoreload do
              = check_box_tag :autoreload, true, @build_list.build_started?
              = t("layout.build_lists.log.autoreload")
            = select_tag :reload_interval, log_reload_time_options
        %tr.bottom
          %td.first
            = link_to t("layout.build_lists.log.download"), build_list_log_url(:build), :id => :log_url
          %td.last{ :class => @build_list.build_started? ? nil : :hidden }
            = label_tag :load_lines do
              = raw t("layout.build_lists.log.load_lines", :count => select_tag(:load_lines, log_reload_lines_options))
    .both
    %textarea.log{ :readonly => :readonly, :wrap => 'off',
                   :data => { :url => log_build_list_path(@build_list), :log_type => :build } }
      = t("layout.build_lists.log.not_available")

:javascript
  $(function() {
    (function() {
      var $wrapper = $('div.log-wrapper');
      var $logBody = $wrapper.children('div.log-body').first();
      var $logCont = $logBody.children('.log').first();

      var logUrl   = $logCont.data('url');
      var $logHead = $wrapper.children('div.log-header').first();

      var $trigger = $logHead.children('span').first();
      var $autoload = $('#autoreload');

      var state = $logBody.is(':visible');
      var t = null; // timer
      var first_open = true;

      if (state) {
        $trigger.removeClass('closed');
        $wrapper.removeClass('inactive')
                .addClass('active');
      } else {
        $trigger.addClass('closed');
        $logBody.addClass('hidden');
        $wrapper.removeClass('active')
                .addClass('inactive');
      }

      function getLineHeight(element){
        var temp = document.createElement(element.nodeName);
        temp.setAttribute("style","margin:0px;padding:0px;font-family:"+element.style.fontFamily+";font-size:"+element.style.fontSize);
        temp.innerHTML = "test";
        temp = element.parentNode.appendChild(temp);
        var ret = temp.clientHeight;
        temp.parentNode.removeChild(temp);
        return ret;
      }

      var loadLog = function() {
        $.ajax({
          url: logUrl,
          type: "GET",
          dataType: 'json',
          data: $logCont.data(),
          beforeSend: function( xhr ) {
            var token = $('meta[name="csrf-token"]').attr('content');
            if (token) xhr.setRequestHeader('X-CSRF-Token', token);
          },
          success: function(data, textStatus, jqXHR) {
            var l = $logCont[0];
            var vScroll = l.scrollTop;
            var hScroll = l.scrollLeft;
            var onBottom = Math.abs((l.clientHeight + vScroll - l.scrollHeight)) < getLineHeight(l);

            $logCont.text(data.log);

            $logCont.scrollLeft(hScroll);
            $logCont.scrollTop((onBottom || first_open) ? l.scrollHeight - l.clientHeight : vScroll);
            first_open = false;
            if (!data.building) $autoload.attr({'checked': false}).trigger('change');
          }
        });
      }

      var reloadChange = function() {
        if ($(this).is(':checked')) {
          first_open = true;
          loadLog();
          $logCont.scrollTop($logCont[0].scrollHeight - $logCont[0].clientHeight);
          t = setInterval(function() {
            loadLog();
          }, $('#reload_interval').val());
        } else {
          clearInterval(t);
        }
      }

      var toggleHandler = function() {
        state = !state;
        // if log opened
        if (state) {
          if ($autoload.is(':checked')) {
            $autoload.trigger('change');
          }
        } else {
          clearInterval(t);
        }
        $logBody.slideToggle('slow')
                .toggleClass('hidden');
        $logHead.toggleClass('active inactive');
        $trigger.toggleClass('closed');

        window.location.href = $('a#log_anchor').attr('href');
      }

      $wrapper.on('click', '.log-header > span', toggleHandler);
      $autoload.on('change', reloadChange);

      $('#word_wrap').on('change', function() {
        $logCont.attr({'wrap': ($(this).is(':checked')) ? 'soft' : 'off'});
      });

      $('#reload_interval').on('change', function() {
        clearInterval(t);
        if ($autoload.is(':checked')) {
          t = setInterval($(this).val());
        }
      });
      $('#load_lines').on('change', function() {
        $logCont.data('load_lines', $(this).val());
      }).trigger('change');
      loadLog();

    })();
  });