x-select custom tag

xselect.coffee

###

  PandaSelect - replaces HTML selects
  Dependencies: RequreJS for loading, jQuery for selectors


  Part of Plee.co Frontend
  (c) 2012 PlasticPanda.com

  ~ relying solely on what’s been done in the past 
    is the death of progression ~

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 3 of the License, or
  (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.


USAGE:
    x-select(name="pipposelect", selectedItem="Giuseppe", id="asdasd")
    x-option(value="Pippo") Malusa
    x-option(value="Giuseppe") Nardone

    <script type="text/javascript">$(init(););</script>

###

## PandaSelect module file for Require.js


define ['jquery', 'underscore', 'xtag'], ($, _, xtag) ->

    init = () ->

        xtag.register 'x-select',
            onCreate: () ->
                $(@).prepend "<span role=\"selectLabel\">#{$(@).attr('default')}</span>"
                $(@).append '<input role="selectValue" type="hidden" name="'+$(@).attr('name')+'" value="'+$(@).attr('default-value')+'" />'
                $('x-option', $(@)).wrapAll '<div class="x-options" style="display: none;" />'

            onInsert: () ->
                sVal = $(@).attr 'selectedItem'
                $('x-option[value="'+sVal+'"]', $(@)).attr('data-selected', true)
                @value = sVal

                # cleanup
                $(@).removeAttr 'selectedItem'
                $(@).removeAttr 'name'

            getters:
                value: () ->
                    return $('input[role="selectValue"]', $(@)).val()

            setters:
                value: (val) ->
                    content = $('x-option[value="'+val+'"]', $(@)).html()
                    if not content
                        console?.warn "Select value #{val} has no related x-option tag. Defaulting to first child's value."
                        target = $('x-option', $(@))[0]
                        content = $(target).html()
                        val = target.xtag.val()

                    $('input[role="selectValue"]', $(@)).val val
                    $('span[role="selectLabel"]', $(@)).html content

            methods:
                val: (v) ->
                    if v?
                        @value = v
                    else
                        return @value

            events:
                click: (evt) ->
                    me = $('.x-options', @)
                    $('.x-options').not(me).hide()
                    me.toggle()

                    evt.stopPropagation()
                    evt.preventDefault()
                    return false


        xtag.register 'x-option',

            methods:
                val: (v) ->
                    if v?
                        $(@).attr 'value', v
                    else
                        return $(@).attr 'value'

            events: 
                click: (evt) ->
                    $(@).closest('x-select')[0]?.value = $(@).attr 'value'
                    $(@).parent().hide()
                    evt.stopPropagation()
    return init