Mercurial > hg > ltpdarepo
changeset 57:84c1573a3e97
Add jsquery replacement for select input elements.
author | Daniele Nicolodi <daniele@grinta.net> |
---|---|
date | Sat, 13 Aug 2011 20:27:24 +0200 |
parents | fc907b00604a |
children | bce8c427a5c5 |
files | src/ltpdarepo/static/arrow.png src/ltpdarepo/static/dropdown.css src/ltpdarepo/static/dropdown.js |
diffstat | 3 files changed, 214 insertions(+), 0 deletions(-) [+] |
line wrap: on
line diff
--- /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: ''; +}
--- /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);