Admin Control Panel v2.0

✎ Editing: mountselect.js ← Back

/*
    use $().mountselector(params) where params is
    
    {
    // required 
            list: [
        	{ text: displayed in list,
        	  prefix: displayed as prefix of input entry,
        	  edit: if this field is true, then input entry will change its editable state to noneditable, and hides text
        	  icon: url of the icon
        	}
    // maybe skipped
            value: value of created text field
            current:  current state of the input entry, as index of 'list'
            width: width of the input entry
    }
    
    use $().mounselector_prefix() to get currently selected prefix as string
    
    use $().mounselector_value() to get current value of the entry
    
 */

;(function($) {

$.fn.extend({
    mountselector: function( params ){
	return this.each(function() { new $.MountSelector(this,params); });
    },
    mountselector_prefix: function(value){
	if (typeof(value)=='undefined')
	    return this.children('INPUT[type=text]').data('prefix');
	$(this.children('DIV:first')).text(value);
	this.children('INPUT[type=text]').data('prefix',value);    
    },
    mountselector_val: function(value){
	if (typeof(value)=='undefined')
	    return $(this.children('INPUT[type=text]')[0]).attr('value');
        $(this.children('INPUT[type=text]')[0]).attr('value',value);
    }
});

$.MountSelector = function(div,params){
    var needsInit=true,
	drop_list;
    var $maindiv=$(div);
    var input,
	prefix,
	mouseoverlist=false,
	onchange,
	selected_index=-1;

function init(){
	if(!needsInit) return;
	
//	inititalize prefix field

prefix = $('<div/>')
	.css({
	    position: 'absolute',
	    paddingTop: '4px',
	    paddingLeft: '2px'
	})
	.appendTo($maindiv);
	
	
//	inititalize input entry

input = $('<input type="text"/>')
	.show()
	.css({
	    width: ( params.width ? params.width : '200px'),
	    fontSize: '12px',
	    border: '1px solid black',
	    backgroundRepeat: 'no-repeat'
	})
	.appendTo($maindiv)
	.blur(function(){
	    if (!mouseoverlist)
		    hide();
	})
	.keyup(function(){
	    do_onchange();
	})
	.keydown(function(){
	    do_onchange();
	})
	.keypress(function(){
	    do_onchange();
	})
	.change(function(){
	    do_onchange();
	});

if (params.prefix){
	    $(prefix).text(params.prefix);
	    $(input).data('prefix',params.prefix);
	}
	
	$(prefix).css({
	    fontFamily: $(input).css('font-family'),
	    fontSize: $(input).css('font-size')
	});
	
	if (params.value)
	    $(input).attr('value',params.value);
	if (params.onchange)
	    onchange = params.onchange;
	
// 	initialize prefix and icon in input entry

if (typeof(params.current) != 'undefined'){
	    $(prefix).text(params.list[params.current].prefix);
	    
	    icon=params.list[params.current].icon;

//	   temporary image to calculate icon width

img=$('<img src="'+icon+'">')
	    .css({
		visibility: 'hidden',
		position: 'absolute'
	    })
	    .appendTo('BODY');
	    
//	    calculcate paddings
	    
	    $(prefix).css('padding-left',$(img).innerWidth()+2);
	    $(input).css({
		backgroundImage: 'url('+icon+')',
		paddingLeft: $(prefix).innerWidth()
	    });
	    $(img).remove();
	};

//	initialize button to show list
	
	button = $('<input type="button" value="v"/>')
	.show()
	.css({
	    paddingLeft: 0,
	    paddingRight: 0
	})
	.appendTo($maindiv)
	.click( function(){
	    repos();
	    drop_list.toggle();
	    $(input).focus();
	});

//	initialize dropdown list

drop_list = $('<div/>')
	.hide().css({
	    border: '1px solid black',
	    background: 'white',
	    zIndex: 2,
	    paddingTop: $(input).css('paddingTop'),
	    paddingBottom: $(input).css('paddingBottom')
	})
	.appendTo($maindiv)
	.mouseover( function(){ mouseoverlist=true;} )
	.mouseout(  function(){ mouseoverlist=false;} );
	
	needsIint = false;
    }
    
    function fillList(){
	ind=0;
	$(params.list).each( function(){
	    var index=ind;
	    img= this.icon ? '<IMG SRC="'+this.icon+'">':'';
	    $('<DIV>'+img+this.text+'</DIV>')
	    .appendTo(drop_list)
	    .attr({ combo_prefix: this.prefix?this.prefix:this.text,
		    combo_edit: !this.edit
	    })
	    .css('cursor','pointer')
	    .mouseout(function(){  $(this).removeClass('selected'); })
	    .mouseover(function(){ $(this).addClass('selected');    })
	    .click( function(){
		    $(prefix).text($(this).attr('combo_prefix'));
		    rdonly = $(this).attr('combo_edit');
		    prev_rdonly = $(input).attr('readonly');
		    if (rdonly=='true'){
			$(input).attr('readOnly', true);
		    }else
			$(input).removeAttr('readOnly');
		    if (rdonly=='true' && !prev_rdonly){
			$(input).each( function(){ this.combo_text = this.value; this.value='';} );
		    }else if (rdonly=='false' && prev_rdonly){
			$(input).each( function(){ this.value=this.combo_text;} );
		    }

imgwidth=$(this).children('img').innerWidth();
		    $(prefix).css('padding-left',imgwidth+2);
		    $(input).css({
			backgroundImage: 'url(\''+$(this).children('img').attr('src')+'\')',
			paddingLeft: $(prefix).innerWidth()
		    });
		    hide();
		    $(input).focus();
		    selected_index=index;
		    do_onchange();
	    });
	    ind++
	});
    }

function hide(){
        drop_list && drop_list.hide();
    }

init();
    fillList();
    repos();
}

})(jQuery);

Cancel