Fix scrolling of the problems list

2 files changed, 146 insertions, 29 deletions

diff --git a/src/js/lib/ui.css b/src/js/lib/ui.css
index da70eb4..c7c6c79 100644
--- a/src/js/lib/ui.css
+++ b/src/js/lib/ui.css
@@ -4,11 +4,13 @@ div.fiveui {
   background-color: #e1e1e1;
   min-width: 400px;
   min-height: 300px;
+  width: 400px;
+  height: 300px;
   position: absolute;
   z-index: 1000;
   border: 1px solid black;
-  overflow: hidden;
   resize: both;
+  overflow: hidden;
 }
 
 div.fiveui>* {
@@ -59,15 +61,17 @@ div.fiveui-control {
 }
 
 div.fiveui-control:active {
-  background-color: #000;
+  background-color: #366689;
 }
 
 div.fiveui-problems {
   overflow-y: auto;
   overflow-x: hidden;
-  resize:     none;
   width:      100%;
   border-top: 1px solid black;
+  margin:     0;
+  padding:    0;
+  resize:     none;
 }
 
 div.fiveui-stats {
@@ -79,3 +83,30 @@ div.fiveui-stats {
   border-top: 1px solid black;
   border-bottom: 1px solid black;
 }
+
+div.fiveui-problem {
+  border-bottom: 1px solid black;
+  padding: 0;
+  margin: 0;
+  cursor: hand;
+  cursor: pointer;
+}
+
+div.fiveui-problem-header {
+  padding: 4px;
+  font-size: 1.1em;
+}
+
+div.fiveui-problem-toggle {
+  float: left;
+  width: 1em;
+  padding-left: 4px;
+}
+
+div.fiveui-problem-body {
+  padding: 4px;
+}
+
+div.fiveui-severity-0 {
+  background-color: #F5B3B3;
+}
diff --git a/src/js/lib/ui.js b/src/js/lib/ui.js
index 385a0e7..7c91769 100644
--- a/src/js/lib/ui.js
+++ b/src/js/lib/ui.js
@@ -6,9 +6,7 @@ var fiveui = fiveui || {};
 /* Templates ******************************************************************/
 
 fiveui.UI = function() {
-
-  this._initialize();
-
+  this._initialize.apply(this, arguments);
 };
 
 
@@ -23,25 +21,11 @@ _.extend(fiveui.UI, {
     , '    FiveUI<div class="fiveui-close"><span class="icon-remove"></span></div>'
     , '  </div>'
     , '  <div class="fiveui-controls">'
-    , '    <div class="fiveui-control fiveui-clear"><span class="icon-ok"></span></div>'
-    , '    <div class="fiveui-control fiveui-break"><span class="icon-pause"></span></div>'
+    , '    <div class="fiveui-control fiveui-clear" title="clear"><span class="icon-ok"></span></div>'
+    , '    <div class="fiveui-control fiveui-break" title="break"><span class="icon-pause"></span></div>'
     , '  </div>'
     , '  <div class="fiveui-problems"></div>'
-    , '  <div class="fiveui-stats">stats</div>'
-    , '</div>'
-    ].join('')),
-
-  /**
-   * Template for entries in the problems list
-   */
-  problemTemplate:_.template(
-    [ '<div class="fiveui-problem">'
-    , '  <div class="fiveui-problem-header">'
-    , '    <div class="fiveui-problem-toggle"></div>'
-    , '    <%= name %>'
-    , '  </div>'
-    , '  <div class="fiveui-problem-body">'
-    , '  </div>'
+    , '  <div class="fiveui-stats"></div>'
     , '</div>'
     ].join('')),
 
@@ -57,11 +41,21 @@ _.extend(fiveui.UI.prototype, {
    */
   _initialize:function() {
 
-    this.$el = $(fiveui.UI.uiTemplate());
+    this.$el       = $(fiveui.UI.uiTemplate());
+    this.$problems = this.$el.find('.fiveui-problems');
+    this.$stats    = this.$el.find('.fiveui-stats');
+
+    this.$el.find('.fiveui').resize(function() {
+      console.log('resize');
+    });
+
+    this.$el.resize(function() {
+      console.log('resize');
+    });
 
     this._setupClose();
     this._setupDragDrop();
-    this._setup
+    this._pollResize();
 
   },
 
@@ -124,6 +118,22 @@ _.extend(fiveui.UI.prototype, {
 
   },
 
+  _pollResize:function() {
+
+    var height = this.$el.height();
+
+    if(height != this.height) {
+      this.height = height;
+
+      var ppos = this.$problems.position();
+      var spos = this.$stats.position();
+
+      this.$problems.height(spos.top - ppos.top)
+    }
+
+    setTimeout(_.bind(this._pollResize, this), 100);
+  },
+
   /**
    * Clear the problems list
    * @public
@@ -138,10 +148,8 @@ _.extend(fiveui.UI.prototype, {
    */
   addProblem:function(problem) {
 
-    var el = $(problemTemplate(problem));
-
-    var problems = this.$el.find('.fiveui-problems');
-    problems.append(el);
+    var p = new fiveui.Problem(problem);
+    p.appendTo(this.$el.find('.fiveui-problems'));
 
   },
 
@@ -172,11 +180,89 @@ _.extend(fiveui.UI.prototype, {
 });
 
 
+/**
+ * Entries in the problem list.
+ */
+fiveui.Problem = function() {
+  this._initialize.apply(this, arguments);
+};
+
+_.extend(fiveui.Problem, {
+
+  /**
+   * Template for entries in the problems list
+   */
+  problemTemplate:_.template(
+    [ '<div class="fiveui-problem fiveui-severity-<%= severity %>">'
+    , '  <div class="fiveui-problem-header">'
+    , '    <div class="fiveui-problem-toggle"><span></span></div>'
+    , '    <%= name %>'
+    , '  </div>'
+    , '  <div class="fiveui-problem-body">'
+    , '    <%= descr %><br />'
+    , '    <span class="fiveui-xpath"><%= xpath %></span>'
+    , '  </div>'
+    , '</div>'
+    ].join('')),
+
+});
+
+_.extend(fiveui.Problem.prototype, {
+
+  _initialize:function(problem) {
+    this.$el     = $(fiveui.Problem.problemTemplate(problem));
+    this.$toggle = this.$el.find('.fiveui-problem-toggle');
+    this.$body   = this.$el.find('.fiveui-problem-body');
+    this.$header = this.$el.find('.fiveui-problem-header');
+
+    this.$body.hide();
+
+    this.close();
+  },
+
+  appendTo:function(el) {
+    el.append(this.$el);
+  },
+
+  /**
+   * Close the context for a problem entry.
+   * @public
+   */
+  close:function() {
+    this.$toggle.find('span').removeClass('icon-caret-down')
+                             .addClass('icon-caret-right');
+
+    this.$el.one('click', _.bind(this.open, this));
+    this.$body.slideUp(100);
+  },
+
+  open:function() {
+    console.log('open');
+
+    this.$toggle.find('span').addClass('icon-caret-down')
+                             .removeClass('icon-caret-right');
+
+    this.$el.one('click', _.bind(this.close, this));
+    this.$body.slideDown(100);
+  },
+
+});
+
+
 $(function() {
 
   var ui = new fiveui.UI();
   ui.appendTo(jQuery('body'));
 
+  for(var i=0; i<10; i++) {
+    ui.addProblem({
+      name:    'foobar',
+      descr:   'thinger',
+      xpath:   'totally an xpath',
+      severity: 0,
+    });
+  }
+
 });
 
 })();