Expanding/collapsing navbar.

app/js/tarski.dev.js

@@ -3,6 +3,87 @@
  **/
 window.Tarski = {};
 
+Tarski.Navbar = function(navbar) {
+    var self = this;
+
+    this._container = jQuery(navbar).addClass('expanded');
+    this._maxHeight = this._container.height();
+    this._container.removeClass('expanded').addClass('collapsed');
+    this._minHeight = this._container.height();
+    this._container.height(this._minHeight)
+
+    this._container.mouseenter(function() { self.expand(); });
+    this._container.mouseleave(function() { self.collapse(); });
+
+    this.setState('COLLAPSED');
+};
+
+Tarski.Navbar.prototype.expand = function(cb) {
+    var self = this;
+
+    if (this.isAnimating()) return;
+
+    this.setState('ANIMATING');
+
+    this._container
+        .removeClass('collapsed')
+        .addClass('expanded')
+        .animate(
+            {height: this._maxHeight},
+            500,
+            function() { self.setState('EXPANDED'); });
+
+    return this;
+};
+
+Tarski.Navbar.prototype.collapse = function(elem, cb) {
+    var self = this;
+
+    if (this.isAnimating()) return;
+
+    this.setState('ANIMATING');
+
+    this._container
+        .animate(
+            {height: this._minHeight},
+            500,
+            function() {
+                self._container
+                    .removeClass('expanded')
+                    .addClass('collapsed');
+
+                self.setState('COLLAPSED');
+            });
+
+    return this;
+};
+
+Tarski.Navbar.prototype.setNextAction = function(action) {
+    this._nextAction = action;
+};
+
+Tarski.Navbar.prototype.fireNextAction = function() {
+    if (Tarski.Navbar.ACTIONS.indexOf(this._nextAction) === 1) {
+        this[this._nextAction](function(self) {
+            self._nextAction = null;
+        });
+    }
+};
+
+Tarski.Navbar.prototype.isAnimating = function() {
+    return this.inState('ANIMATING');
+};
+
+Tarski.Navbar.prototype.inState = function(state) {
+    return this._state === state;
+};
+
+Tarski.Navbar.prototype.setState = function(state) {
+    this._state = state;
+};
+
+Tarski.Navbar.ACTIONS = ['expand', 'collapse'];
+
 /**
  *  new Tarski.Searchbox(field, label)
  *  - field (HTMLElement): the search field
@@ -70,10 +151,12 @@ Tarski.Searchbox.PLACEHOLDER_SUPPORTED = (function() {
 })();
 
 jQuery(document).ready(function() {
-    var searchForm, searchField, searchLabel, searchBox;
+    var searchForm, searchField, searchLabel, searchBox, navbar;
 
     jQuery('body').addClass('js');
 
+    navbar = new Tarski.Navbar(jQuery('#navigation'));
+
     searchField = jQuery('#s');
     searchLabel = jQuery('#searchlabel');