gistfile1.js

IGC.Widget.Select = new Class({
  options: {
    tag: 'select',
    pseudos: Array.object('focusable', 'value', 'form-associated'),
    states: Array.fast('collapsed'),
    events: {
      self: {
        set: function(item) {
          this.setValue(item.getValue());
          this.write(item.getTitle(), true);
          this.collapse();
        },
        blur: 'collapse',
        element: {
          'click:relay(.button)': 'expand'
        }
      }
    },
    layout: Array.object('::button'),
    has: {
      many: {
        items: {
          through: 'menu'
        }
      },
      one: {
        menu: {
          selector: 'menu',
          source: 'select-menu',
          mutation: '> menu',
          as: 'listWidget',
          pseudos: Array.object('choice'),
          has: {
            many: {
              items: {
                source: 'select-menu-option',
                mutation: '> option, > li',
                states: {
                  hover: 'chosen'
                },
                events: {
                  select: function() {
                    this.list.listWidget.selectItem(this);
                  }
                },
                pseudos: Array.object('clickable', 'hoverable', 'command')
              }
            }
          }
        },
        button: {
          selector: 'button',
          source: 'select-button'
        }
      }
    }
  },
  
  expand: function() {
    if (this.menu) this.menu.show();
  },
  
  collapse: function() {
    if (this.menu) this.menu.hide();
  },

  selectItem: function(item) {
    this.fireEvent('set', item);
    return item;
  }
});

IGC.Widget.Select.Button = LSD.Widget.Button;

IGC.Widget.Select.Menu = new Class({
  options: {
    tag: 'menu',
    pseudos: Array.object('list')
  }
});

IGC.Widget.Select.Menu.Option = new Class({
  options: {
    tag: 'option',
    pseudos: Array.object('item'),
    classes: Array.object('option')
  },
  
  getTitle: function() {
    return this.element.get('text').trim();
  },
  
  getValue: function() {
    return this.attributes.value || this.element.get('text').trim();
  }
});