gistfile1.txt

:style
  body.examples > .example_item
    :margin-top 200px
    
  .example_item
    :margin-top 20px
    :position relative
    input
      :position absolute
      :right 0
      :height 20px
      :width 20px
    .name
      :font-family "Helvetica Neue"
      :font-size 18px
      :padding-right 30px
    &.info .name
      :color blue
    &.success .name
      :color green
    &.failure .name
      :color red
    &.error .name
      :color red
    &.disabled
      .name
        :color #aaa
        :font-size 16px
      .result
        :display none
    .check 
      .name
        :font-size 16px
      &.success .name
        :color green
      &.info .name
        :color blue
    .info_output, .output
      :white-space pre
      +inconsolata
      :line-height 1.4
      :margin 5px 0
    .failure
      +rel
      +border-box
      +clearfix
      .name
        :font-size 16px
      .expected, .actual
        +left
        +border-box
        +inconsolata
        :width 50%
        :margin 5px 0
    .error
      .class_and_message
        +inconsolata
      .class
        :text-decoration underline
        :margin-right 1em
      .backtrace
        +inconsolata
        :margin 5px 0


:script
  views.define('example_item',function(view,el) {
    
    view.load = function(attribs) {
      el.addClass(attribs.status);
      checkbox(attribs.status != 'disabled').appendTo(el);
      name(attribs.name).appendTo(el);
      el.append('<hr>');
      var resultsEl = $('<div class=result>').appendTo(el);
      switch(attribs.status) {
      case 'info': 
        if (attribs.checks) checks(attribs.checks).appendTo(resultsEl);
        else info(attribs.output).appendTo(resultsEl);
        break;
      case 'success':
        checks(attribs.checks).appendTo(resultsEl);
        break;
      case 'failure':
        if (attribs.checks) checks(attribs.checks).appendTo(resultsEl);
        failure(attribs.failure).appendTo(resultsEl);
        break;
      case 'error':
        error(attribs.error).appendTo(resultsEl);
        break;
      case 'disabled':
        disable();
      }
    }
    
    function name(name) {
      return $('<div class=name>').text(name)
    }
    
    function checkbox(toggle) { 
      return $('<input type=checkbox>').
        attr('checked', toggle ? 'checked' : '').
        change(function() {
          toggleEnabled(this.attr('checked') == 'checked');
        });
    }
    
    function info(output) {
      return $('<div class=info_output>').text(output)
    }
    
    function checks(checks) {
      return $('<div class=checks>').tap(function(group) {
        $.each(checks, function() { group.append(check(this)) });
      });
    }
    
    function check(attribs) {
      return $('<div class=check>').addClass(attribs.status).
        append($('<div class=name>').text(attribs.name)).
        append($('<div class=output>').text(attribs.output));
    }
    
    function failure(attribs) {
      return $('<div class=failure>').
        append($('<div class=name>').text(attribs.name)).
        append($('<div class=expected>').text(attribs.expected)).
        append($('<div class=actual>').text(attribs.actual));
    }
    
    function error(attribs) {
      return $('<div class=error>').append(
        $('<div class=class_and_message>').
          append($('<span class=class>').text(attribs['class'])).
          append($('<span class=message>').text(attribs.message))
      ).append(
        $('<div class=backtrace>').text(attribs.backtrace)
      );
    }
    
    function disable() {
      el.addClass('disabled');
    }
    
    function toggleEnabled(onOff) {
      // TODO: fire event
      el.toggleClass('disabled', !onOff);
    }
    
  });