# HG changeset patch
# User Daniele Nicolodi <daniele@grinta.net>
# Date 1313260044 -7200
# Node ID 84c1573a3e97c0631ffe03e7e8683063cec0ff2a
# Parent  fc907b00604ae9c4a7ccba670b1ffe0c107e699d
Add jsquery replacement for select input elements.

diff -r fc907b00604a -r 84c1573a3e97 src/ltpdarepo/static/arrow.png
Binary file src/ltpdarepo/static/arrow.png has changed
diff -r fc907b00604a -r 84c1573a3e97 src/ltpdarepo/static/dropdown.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/ltpdarepo/static/dropdown.css	Sat Aug 13 20:27:24 2011 +0200
@@ -0,0 +1,54 @@
+.dropdown {
+    display: inline-block;
+    width: auto;
+    position: relative;
+}
+
+.dropdown dd, .dropdown dt {
+    margin: 0px;
+    padding: 0px;
+}
+
+.dropdown a, .dropdown a:visited {
+    color: inherit;
+    text-decoration: none;
+    white-space: nowrap;
+    padding: 5px 25px 5px 10px;
+    cursor: default;
+    display: block;
+}
+
+.dropdown dt a {
+    background: white url(arrow.png) no-repeat scroll right center;
+    border: 1px solid #BFBFBF;
+}
+
+.dropdown dd {
+    display: block;
+    position: absolute;
+    z-index: 100;
+    width: 100%;
+}
+
+.dropdown dd ul {
+    background: white none repeat scroll 0 0;
+    border: 1px solid #BFBFBF;
+    border-top: none;
+    display: none;
+    padding: 0px;
+    margin: 0px;
+    list-style: none;
+    line-height: 1em;
+}
+
+.dropdown dd ul li.current a { 
+    background-color: #EEE;
+}
+
+.dropdown .value {
+    display: none;
+}
+
+.dropdown li:before {
+    content: '';
+}
diff -r fc907b00604a -r 84c1573a3e97 src/ltpdarepo/static/dropdown.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/ltpdarepo/static/dropdown.js	Sat Aug 13 20:27:24 2011 +0200
@@ -0,0 +1,160 @@
+;(function($) {
+
+    // namespace
+    if (typeof($.dropdown) == "undefined") {
+      $.dropdown = {
+        config: {},
+        initialized: false
+      };
+    }
+
+    // init
+    $(document).ready(function () {
+        $.dropdown.init();
+    });
+
+    // init widget
+    $.dropdown.init = function () {
+
+      // check if already initialized
+      if ($.dropdown.initialized == true) {
+        // return nothing done
+        return false;
+      }
+      
+      // set initialized
+      $.dropdown.initialized = true;
+
+      // keyboard handling
+      $(document).bind('keydown', function (e) {
+          var dropdown = $('.dropdown:focus');
+          if (open.length)
+            $.dropdown.handleKeyBoardNav(e, dropdown);
+        });
+    };      
+
+    function _set_current(item, dropdown) {
+      $('.current', dropdown).removeClass('current');
+      item.addClass('current');
+    }
+
+    $.dropdown.handleKeyBoardNav = function (e, dropdown) {
+
+      // convenience keys for keyboard navigation
+      var keymap = {
+        'left'  : 37,
+        'up'    : 38,
+        'right' : 39,
+        'down'  : 40,
+        'enter' : 13
+      };
+
+      var first = $('li', dropdown).first();
+      var last = $('li', dropdown).last(); 
+      var current = $('li.current', dropdown);
+      var next, prev;
+
+      if (! current.length)
+        current = first;
+
+      switch (e.keyCode) {
+      case keymap.enter:
+        $("a", current).click();
+        break;
+
+      case keymap.up:
+        current.parent().show();
+        prev = current.prev('li');
+        if (prev.length) {
+          _set_current(prev, dropdown);
+        } else {
+          _set_current(last, dropdown);
+        }
+        e.preventDefault();
+        break;
+
+      case keymap.down:
+        current.parent().show();
+        next = current.next('li').first();
+        if (next.length) {
+          _set_current(next, dropdown);
+        } else {
+          _set_current(first, dropdown);
+        }
+        e.preventDefault();
+        break;
+
+      default:
+        break;
+      }
+    };
+
+
+    $.dropdown.bind = function (source, dropdown) {
+
+      $("dd ul li a", dropdown).bind('mouseover', function(e) {
+          _set_current($(e.target).parent(), dropdown);
+        });
+
+      $("dt a", dropdown).click(function(e) {
+          $("dd ul", dropdown).toggle();
+          e.preventDefault();
+          return false;
+        });
+
+      $("dd ul li a", dropdown).click(function(e) {
+          $("dt a", dropdown).html($(this).html());
+          $("dd ul", dropdown).hide();
+          source.val($(this).find("span.value").text());
+          source.change();
+          e.preventDefault();
+          return false;
+        });
+
+      source.bind('change', function() {
+          var selected = $(this).find(":selected");
+          $("dt a", dropdown).html(selected.text());
+          var e = $("dd ul li", dropdown).filter(function (index) { return $('.value', this).text() == selected.val() });
+          _set_current(e, dropdown);
+        });
+
+      dropdown.bind('blur', function() {          
+          $("dd ul", dropdown).hide();
+        });
+
+    };
+
+    $.dropdown.replace = function(target) {
+      $(target).each(function() {
+          var source = $(this);
+          var selected = source.find(":selected");
+          var options = $("option", source);
+
+          var dropdown = $(document.createElement('dl'))
+            .attr({'class': 'dropdown', 'tabindex': '0'})
+            .append('<dt><a>' + selected.text() +
+                    '<span class="value">' + selected.val() +
+                    '</span></a></dt><dd><ul></ul></dd></dl>');
+
+          var list = $("dd ul", dropdown);
+          options.each(function() {
+              if ($(this).val()) {
+                  list.append('<li><a>' + $(this).text() +
+                              '<span class="value">' + $(this).val() + '</span>' +
+                              '</a></li>');
+              }
+            });
+
+          // add original ids and classes
+          dropdown.addClass(source.attr('class'));
+          dropdown.attr('id', source.attr('id') + '-dropdown');
+          
+          source.after(dropdown);
+          source.hide();
+
+          $.dropdown.bind(source, dropdown);
+          source.change();
+        });
+    };
+
+  })(jQuery);