gistfile1.js

/*
* script: prompter.js
* @author: Martin Winkel
* 
 */
var Prompter = new Class({
	Implements:[Options,Events],
	options: {
		onShow: $empty,
		onHide: $empty,
		onSubmit: $empty,
		stickyWinToUse: StickyWin.Modal,
		stickyWinOptions: {},
		useUi: true,
		stickyWinUiOptions: {
			width: 500
		},
		useWaiter: true,
		ok:'OK',
		cancel:'Cancel'
	},
	initialize: function(title, prompt, value, options){
		
		this.setOptions(options);
		this.makeStickyWin(title, prompt, value);
		this.prompt();
		//this.addEvent('success', this.hide.bind(this));
	},
	makeStickyWin: function(title, prompt, value){
		
		var paragraph = new Element('p');
		paragraph.set('text', prompt);
		paragraph.grab( new Element('br') );
		
		this.element = new Element('input', {type:'text', value:value });
		paragraph.grab( this.element );
		paragraph.grab( new Element('br') );
		
		paragraph.grab( new Element('input', {type:'button', value: this.options.ok, events:{ click:this.submit.bindWithEvent(this) } }));
		paragraph.grab( new Element('input', {type:'button', value: this.options.cancel, events:{ click:this.hide.bindWithEvent(this) } }));
		
		this.swin = new this.options.stickyWinToUse({
			content: StickyWin.ui(title, paragraph, this.options.stickyWinUiOptions),
			showNow: false,
			onClose: this.hideSwin.bindWithEvent(this),
			onDisplay: this.setFocus.bindWithEvent(this)
		});
		
		//this.initAfterUpdate();
	},
	hideSwin: function(){
		this.fireEvent('hide');
		return this;
	},
	
	hide: function(){
		this.swin.hide();
		return this;
	},
	
	prompt: function(){
		this.fireEvent('show' );
		this.swin.show();
		
		return this;
	},
	
	setFocus: function(){
		(function(){
			this.focus();
		}).delay(150, this.element);
		return this;
	},
	
	submit: function(){
	
		// store the value before the element is destroyed
		var value = this.element.get('value');
		this.hide();
		
		this.fireEvent('submit', [null, value] );
		
		return this;
	}
});

/**
* example
* This doesn't do anything really, but I think it makes clear how it should be used
 */

function whatIsYourName(evt, name ){
    if( !name ){
        new Prompter( 'ThePrompter', 'Please enter your name:', '',
    		{
    			//onShow: ,
    			//onHide: ,
    			onSubmit: whatIsYourName
    		}
    	);
    }else{
        alert( 'Hello ' + name );
    }
}