Turn the UI into a class, instead of a ragtag collection of functions

1 files changed, 148 insertions, 90 deletions

diff --git a/src/js/lib/ui.js b/src/js/lib/ui.js
index cc24ddb..385a0e7 100644
--- a/src/js/lib/ui.js
+++ b/src/js/lib/ui.js
@@ -1,123 +1,181 @@
 
+var fiveui = fiveui || {};
+
 ;(function() {
 
-core = {};
-
-/**
- * Template for the UI dialog
- */
-var uiTemplate = _.template(
-  [ '<div class="fiveui">'
-  , '  <div class="fiveui-titlebar">'
-  , '    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>'
-  , '  <div class="fiveui-problems">'
-  , '   problems!'
-  , '  </div>'
-  , '  <div class="fiveui-stats">stats</div>'
-  , '</div>'
-  ].join(''));
-
-// setup the functionality of the close button on the ui
-var setupClose = function(ui) {
-
-  var close = ui.find('.fiveui-close');
-
-  close.on('click.fiveui', function() {
-    ui.hide();
-  });
+/* Templates ******************************************************************/
+
+fiveui.UI = function() {
+
+  this._initialize();
 
 };
 
-// set the titlebar object of the ui to be its drag handle
-var setupDragDrop = function(ui) {
 
-  var header = ui.find('.fiveui-titlebar');
+_.extend(fiveui.UI, {
+
+  /**
+   * Template for the UI dialog
+   */
+  uiTemplate:_.template(
+    [ '<div class="fiveui">'
+    , '  <div class="fiveui-titlebar">'
+    , '    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>'
+    , '  <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>'
+    ].join('')),
 
-  var offset = { x: 0, y: 0 };
+});
 
-  // update the location of the ui
-  var mouseMove = function(e) {
-    ui.css({
-      left: e.originalEvent.clientX + offset.x,
-      top:  e.originalEvent.clientY + offset.y,
-    });
-  };
 
-  var cancel = function(e) {
-    e.stopPropagation();
-  };
 
-  // both of these will cause funny things to happen with the text of the title
-  // bar.
-  header.on('dragstart',   cancel);
-  header.on('selectstart', cancel);
+_.extend(fiveui.UI.prototype, {
 
-  // figure out how far the cursor is from the top-left of the ui
-  header.on('mousedown.fiveui', function(e) {
+  /**
+   * Create the UI, and attach all event handlers.
+   * @private
+   */
+  _initialize:function() {
 
-    // prevent the close button from being used as a drag handle
-    if(e.target != header[0]) {
-      return false;
-    }
+    this.$el = $(fiveui.UI.uiTemplate());
 
-    var pos = ui.position();
-    offset.x = pos.left - e.originalEvent.clientX;
-    offset.y = pos.top  - e.originalEvent.clientY;
+    this._setupClose();
+    this._setupDragDrop();
+    this._setup
 
-    $(window).on('mousemove.fiveui', mouseMove);
-    header.one('mouseup.fiveui', function() {
-      $(window).off('mousemove.fiveui', mouseMove);
-    });
-  });
+  },
 
-};
+  /**
+   * Setup the functionality of the close button on the ui
+   * @private
+   */
+  _setupClose:function() {
 
-// hook resize events in the UI to reposition the stats pane
-var setupResize = function(ui) {
+    var close = this.$el.find('.fiveui-close');
+    close.on('click.fiveui', _.bind(this.hide, this));
 
-  ui.on('resize', function() {
-    console.log('resize!');
-  });
+  },
 
-};
+  /**
+   * Setup the drag and drop functionality for the problems window.
+   * @private
+   */
+  _setupDragDrop:function() {
 
-var problemTemplate = _.template(
-  [ '<div class="fiveui-problem">'
-  , '  <div class="fiveui-problem-header">'
-  , '    <div class="fiveui-problem-toggle"></div>'
-  , '  </div>'
-  , '  <div class="fiveui-problem-body">'
-  , '  </div>'
-  , '</div>'
-  ].join(''));
+    var self   = this;
+    var header = this.$el.find('.fiveui-titlebar');
+    var offset = { x: 0, y: 0 };
 
-var addProblem = function(ui, problem) {
 
-  var el = $(problemTemplate(problem));
+    // update the location of the ui
+    var mouseMove = function(e) {
+      self.$el.css({
+        left: e.originalEvent.clientX + offset.x,
+        top:  e.originalEvent.clientY + offset.y,
+      });
+    };
 
-  var problems = ui.find('.fiveui-problems');
-  problems.append(el);
+    var cancel = function(e) {
+      e.stopPropagation();
+    };
 
-};
+    // both of these will cause funny things to happen with the text of the title
+    // bar.
+    header.on('dragstart',   cancel);
+    header.on('selectstart', cancel);
 
-var createUI = function() {
-  var ui = $(uiTemplate());
+    // figure out how far the cursor is from the top-left of the ui
+    header.on('mousedown.fiveui', function(e) {
 
-  setupClose(ui);
-  setupDragDrop(ui);
-  setupResize(ui);
+      // prevent the close button from being used as a drag handle
+      if(e.target != header[0]) {
+        return false;
+      }
+
+      var pos  = self.$el.position();
+      offset.x = pos.left - e.originalEvent.clientX;
+      offset.y = pos.top  - e.originalEvent.clientY;
+
+      $(window).on('mousemove.fiveui', mouseMove);
+      header.one('mouseup.fiveui', function() {
+        $(window).off('mousemove.fiveui', mouseMove);
+      });
+    });
+
+  },
+
+  /**
+   * Clear the problems list
+   * @public
+   */
+  clearProblems:function() {
+    this.$el.find('.fiveui-problems').children().remove();
+  },
+
+  /**
+   * Add an entry in the problems list.
+   * @public
+   */
+  addProblem:function(problem) {
+
+    var el = $(problemTemplate(problem));
+
+    var problems = this.$el.find('.fiveui-problems');
+    problems.append(el);
+
+  },
+
+  /**
+   * Attach the UI to a jquery selector.
+   * @public
+   */
+  appendTo:function(el) {
+    el.append(this.$el);
+  },
+
+  /**
+   * Hide the UI
+   * @public
+   */
+  hide:function() {
+    this.$el.hide();
+  },
+
+  /**
+   * Show the UI
+   * @public
+   */
+  show:function() {
+    this.$el.show();
+  },
+
+});
 
-  return ui;
-};
 
 $(function() {
 
-  jQuery('body').append(createUI());
+  var ui = new fiveui.UI();
+  ui.appendTo(jQuery('body'));
 
 });