source: ether_megapoli/trunk/web/resources/js/Select.js @ 155

//********************************************************
// Class Select
// Display a Select
//
// obj objParam: {id, [parent], [specificClass], [maxOptionSize], [isDisable], [isDisplayed], [arrayData]}
//    int objParam.id: id of the dom element
//    [dom objParam.parent]: in which dom element to draw the button
//    [str objParam.specificClass]
//    [int objParam.maxOptionSize]: define a max number of line to display
//    [int objParam.isDisable]: is the Select disable by default?
//    [int objParam.isDisplayed]: is the Select opened by default?
//    [arr objParam.arrayData]: array of data to display
//
// Public functions
//    Select.getValue
//    Select.getName
//    Select.disable
//    Select.enable
//    Select.add
//    Select.remove
//    Select.clear
//    Select.select
//    Select.selectFirst
//********************************************************

var Select = Class.create( {

    // Public functions ********************************************************

    initialize: function( objectParameter )
    {
        // Param
        this.id = objectParameter.id;
        this.parent = objectParameter.parent ? objectParameter.parent : document.body;
        this.isDisplayed = (true == objectParameter.isDisplayed) ? true : false;
        this.isDisable = (true == objectParameter.isDisable) ? true : false;
        this.maxOptionSize = objectParameter.maxOptionSize ? objectParameter.maxOptionSize : 0;
        this.indexOption = 0;
        this.isHover = false;
        this.arrayData = objectParameter.arrayData ? objectParameter.arrayData : $A();
        this.arrayOptions = $A();

        // Select div
        this.divSelect = document.createElement( "div" );
        this.divSelect.id = this.id;
        this.divSelect.className = "select_container";

        this.divSelectLeft = document.createElement( "div" );
        this.divSelectLeft.className = "select_selectLeft";
        this.divSelect.appendChild( this.divSelectLeft );

        this.divSelectMiddle = document.createElement( "div" );
        this.divSelectMiddle.className = "select_selectMiddle";
        this.divSelect.appendChild( this.divSelectMiddle );

        this.divSelectRight = document.createElement( "div" );
        this.divSelectRight.className = "select_selectRight";
        this.divSelect.appendChild( this.divSelectRight );

        this.parent.appendChild( this.divSelect );

        // Options div
        this.divOption = document.createElement( "div" );
        this.divSelect.id = this.id;
        this.divOption.className = "select_choicelist";
        this.parent.appendChild( this.divOption );

        Event.observe( this.divSelect, "mouseup", this.toggleOption.bindAsEventListener( this ) );
        Event.observe( document.body, "mousedown", this.hideOption.bindAsEventListener( this ) );
        Event.observe( this.divSelect, 'mouseover', this.onMouseHover.bindAsEventListener( this ) );
        Event.observe( this.divSelect, 'mouseout', this.onMouseOut.bindAsEventListener( this ) );
        Event.observe( this.divOption, 'mouseover', this.onMouseHover.bindAsEventListener( this ) );
        Event.observe( this.divOption, 'mouseout', this.onMouseOut.bindAsEventListener( this ) );

        if( this.isDisplayed )
            this.showOption();

        if( this.isDisable )
            this.hideOption();
    },

    getName: function()
    {
        return this.itemName;
    },

    getValue: function()
    {
        return this.itemValue;
    },

    // private
    toggleOption:function()
    {
        if( this.isDisplayed )
        {
            this.isHover = false;
            this.hideOption();
        }
        else
            this.showOption();
    },

    // private
    showOption:function()
    {
        if( this.isDisable )
            return;

        this.isDisplayed = true;
        this.displayOptions();
        this.divOption.style.display = "block";
    },

    // private
    hideOption: function()
    {
        if( this.isHover )
            return;

        this.isDisplayed = false;
        this.divOption.style.display = "none";
    },

    // public
    disable: function()
    {
        this.isDisable = true;
        this.divSelect.addClassName( "disable" );
        this.hideOption();
    },

    // public
    enable: function()
    {
        this.isDisable = false;
        this.divSelect.removeClassName( "disable" );
    },

    // public
    add: function( itemValue, itemName, callback )
    {

        var divOption = document.createElement( "div" );
        divOption.className = "select_item_middle";
        divOption.innerHTML = itemName;
        divOption.itemName = itemName;
        divOption.itemValue = itemValue;
        divOption.callback = callback;
        this.divOption.appendChild( divOption );

        Event.observe( divOption, 'click', this.onOptionClick.bind( this, divOption ) );

        this.arrayOptions.push( divOption );
    },

    // public
    remove: function( itemValue )
    {
        this.arrayOptions.each( function( divOption )
        {
            if( divOption.itemValue == itemValue )
            {
                this.divOption.removeChild( divOption );
                this.arrayOptions = this.arrayOptions.without( divOption );
                throw $break;
            }
        }.bind( this ) );
    },

    // public
    clear: function()
    {
        this.arrayOptions.each( function( divOption )
        {
            this.divOption.removeChild( divOption );
            this.arrayOptions = this.arrayOptions.without( divOption );
        }.bind( this ) );
    },

    // public
    // @itemValue : code of the selected line
    // @ execute : true / false. Execute the callback.
    select: function( itemValue, execute )
    {
        this.arrayOptions.each( function( divOption )
        {
            if( divOption.itemValue == itemValue )
            {
                this.selectOption( divOption );
                if( execute && undefined != divOption.callback )
                    divOption.callback( divOption.itemValue );
                throw $break;
            }
        }.bind( this ) );
    },

    // public
    // @ execute : true / false. Execute the callback.
    selectFirst: function( execute )
    {
        var divOption = this.arrayOptions.first();
        if( undefined == divOption )
            return;

        this.selectOption( divOption );
        if( execute && undefined != divOption.callback )
            divOption.callback( divOption.itemValue );
    },

    // private
    selectOption: function( divOption )
    {
        this.itemName = divOption.itemName;
        this.itemValue = divOption.itemValue;
        this.divSelectMiddle.innerHTML = divOption.itemName;
    },

    // private
    onOptionClick: function( divOption )
    {
        this.isHover = false;
        this.hideOption();
        this.select( divOption.itemValue, true );
        if( undefined != divOption.callback )
            divOption.callback( divOption.itemValue );
    },

    // private
    onMouseHover: function()
    {
        this.isHover = true;
    },

    // private
    onMouseOut: function()
    {
        this.isHover = false;
    },

    // private
    displayOptions: function()
    {
        var fromOption = this.indexOption;
        var toOption = this.indexOption + this.maxOptionSize - 1;
        for( var i = 0; i < this.arrayOptions.size(); i++ )
        {
            if( 0 == this.maxOptionSize )
                this.arrayOptions[i].style.display = "";
            else if( i >= fromOption && i <= toOption )
                this.arrayOptions[i].style.display = "";
            else
                this.arrayOptions[i].style.display = "none";
        }
    }
} );