gistfile1.js

/*
---
 
script: Select.js
 
description: Basic selectbox
 
license: Public domain (http://unlicense.org).

authors: Yaroslaff Fedin
 
requires:
- IGC.Widget
- Widgets/LSD.Widget.Button
- LSD/LSD.Mixin.List
- LSD/LSD.Mixin.Choice
- LSD/LSD.Mixin.Touchable
- LSD/LSD.Mixin.Focusable

provides: [IGC.Widget.Select, IGC.Widget.Select.Button, IGC.Widget.Select.Option]
 
...
*/

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

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

IGC.Widget.Select.Menu = new Class({
  options: {
    tag: 'menu'
  }
});

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();
  }
});