/* jqwindow
*
* This is a wrapper for the jQuery Dialog
* It allows you to:
* 1. Add/delete buttons while the dialog is open
* 2. Change the dialog content
* 3. Prohibit/enable the user to close the dialog by hitting the "X" close button
* 4. Open/close the dialog
* 5. Prohibit/enable the user to close the dialog by hitting the Ok/cancel buttons
* 6. It is chainable (except for methods which return values)
*
* Required parameters:
* None
*
* Usage:
*
* $(selector).jqwindow(method,options);
*
* method is a string describing the action to be taken.
* The form taken by options depends on the method called. In some cases it is a boolean, in others a string, and others an object and in some cases it is not used at all
*
* Methods: "method" as have any of the following values:
*
* METHOD ACTION OPTIONS
* create Creates the dialog. Object containing name value pairs for any of the parameters
* open Opens the dialog --
* show Identical to open --
* close Closes the dialog --
* hide Identical to close --
* destroy Destroys the dialog --
* *getReturnValue The value returned when the user closed the dialog --
* by hitting a button
* (returns are "ok","cancel", "close" or ""
* on the default buttons
* May also be set by callback handler
* addButton Creates a new button {buttonName:"Caption",:callBack:function{...} } where Caption is the caption and callBack in the callBackHandler
* removeButton Removes the button whose caption is buttonText "buttonText"
* replaceButtons Replaces the current buttons with a new set of buttons. buttons object as defined by jQuery dialog. ex. {"ok":function(){...}, "Close":function())...} }
* *isOpen Returns true if the dialog is open --
* setHtml Replaces the html in the dialog with newHtml "newHtml"
* setModality Set the dialogs modality true|false
* setMessage Identical to setHtml "newHtml"
* setTitle Set the title of the dialog "Title"
* setCloseLink Shows/Hides "X" in dialog true|false
* setUserCanClose Allows/prohits user from closing dialog true|false
* *exists Returns true or false
* alert Creates an alert message box "message to be displayed"
* confirm Creates a confirm message box and executes {message:"Message to be displayed",nextFunction:function{....}}
* and then executes nextFunction when closed
* *not chainable
*
* Optional paramaters are passed in as an object for the create method
* OPTION NAME DEFAULT COMMENT
* buttons {} A buttons object as used in the dialog parameters ( buttonText:callBack)
* message "" The html to display. If empty or "" the html of the selector is displayed unaltered
* okButton true Ok button is attached
* cancelButton true Cancel button is attached
* closeButton false Close button is attached
* okText "Ok" Text for the Ok button
* cancelText "Cancel" Text for the Cancel button
* closeText "Close" Text for the Close button
* showCloseLink false Show the "X" for closing the dialog.
* userCanClose false Enable the user to close the dialog. Obviously you must either enable this at some point or close the dialog programatically
* width 400 Width of dialog in pixels (you can use auto but it doesn't behave well in IE
* height 200 Height of dialog in pixels ""
* title Please Wait Title for dialog
* modal true Modality
* position "center" Use the same as the standard dialog (e.g. ["top","left"] or [200,400])
* resizable false If true the user can resize the dialog
* closeOnEscape false Close the dialog when the user hits ESC
* autoOpen true Open the dialog upon creation
* closeCallback function(){ callback Handler for close button
* if(!$(this).data("canClose")){
* alert("Close not Allowed");
* return false;
* }
* $(this).data("returnValue","close");
* $(this).dialog("close");
* }
* okCallback function(){ callback Handler for ok button
* if(!$(this).data("canClose")){
* alert("Close not Allowed");
* return false;
* }
* $(this).data("returnValue","ok");
* $(this).dialog("close");
* }
* cancelCallback function(){ callback Handler for cancel button
* if(!$(this).data("canClose")){
* alert("Close not Allowed");
* return false;
* }
* $(this).data("returnValue","close");
* $(this).dialog("cancel");
* }
*
*
* EXAMPLES
*
*
* $("#modal").jqwindow("create"); Creates a dialog based on default parameters using the contents of a DIV with id "modal"
*
* $("#modal").jqwindow("create",{userCanClose:true, cancelButton:false, position:[200,600]})
* Creates a dialog the use can close with only an ok button, positioned 200 px from lett edge, 600 px from top
* $("#modal").jqwindow("replaceButtons",{});
* Remove all buttons from the dialog
* retVal=$("#modal").jqwindow("getReturnValue");
* Store the value returned when the user closed the dialog. The callback handler is responsible for setting the value
*
*
* Dependencies
* Since this is just a wrapper for ui dialog it has the same dependencies namely the jQuery core, the ui javascript, and the ui css.
* (it will actually work without the ui css but it is really ugly)
*
*
* For more information contact:
* Don Vawter
* donvawter@mac.com
*
*
*
*
*
*
*
*/
(function($){
$.fn.extend({
jqwindow:function(method,_options){
var options=_options;
if (method == "isOpen" || method=="getReturnValue" ||method=="exists"){
return $.qWindow.execute(this, method, options);
}
else {
return this.each(function(){
$.qWindow.execute(this, method, options);
});
}
}
});
$.extend({
qWindow:{
element:"",
options:{},
execute:function(el,method,_options){
this.element=el;
this.options=_options;
switch(method) {
case "confirm":
this.confirmModal();
break;
case "exists":
return this.exists();
break;
case "create":
this.createModal();
break;
case "alert":
this.alertModal()
case "setUserCanClose":
this.setUserCanClose();
break;
case "open":
this.openModal();
break;
case "show":
this.openModal();
break;
case "close":
this.closeModal();
break;
case "hide":
this.closeModal();
break;
case "destroy":
this.destroyModal();
break;
case "addButton":
this.addButton();
break;
case "removeButton":
this.removeButton();
break;
case "replaceButtons":
this.replaceButtons();
break;
case "isOpen":
return this.isModalOpen();
break;
case "setHtml":
this.setHtml();
break;
case "setModality":
this.setModality();
break;
case "setMessage":
this.setMessage();
break;
case "setTitle":
this.setTitle();
break;
case "setCloseLink":
this.setCloseLink();
break;
case "getReturnValue":
return this.getReturnValue();
break;
default:
return;
}
},
exists:function(){
return $(this.element).data("exists");
},
confirmModal:function(){
//note that that requires a "next function" because
//we need to suspend operation until confirm is hit
//we do this by queueing
//the function is expected to dequeue
$(this.element).data("returnValue","");
mess="- "+this.options["message"]+"
";
var nextFn=this.options["nextFunction"];
this.options={autoOpen:true,message:mess,closeButton:false,cancelButton:true,userCanClose:true,width:400,height:'auto',title:"Please Confirm",
okCallback:function(){
if(!$(this).data("canClose")){
alert("Close not Allowed");
return false;
}
$(this).data("returnValue",true);
$(this).dialog("close");
$(this).dequeue();
},
cancelCallback:function(){
if(!$(this).data("canClose")){
alert("Close not Allowed");
return false;
}
$(this).data("returnValue",false);
$(this).dialog("close");
$(this).dequeue();
}
};
var _me=this;
$(this.element).queue(function(){
_me.createModal();
});
$(this.element).queue(nextFn);
},
alertModal:function(){
$(this.element).data("returnValue","");
mess="";
this.options={message:mess,cancelButton:false,userCanClose:true,width:400,height:'auto',title:"System alert"};
this.createModal();
},
setUserCanClose:function(){
$(this.element).data("canClose",this.options);
},
getReturnValue:function(){
return $(this.element).data("returnValue");
},
removeButton:function(){
var buttons=$(this.element).dialog("option","buttons");
delete buttons[this.options];
$(this.element).dialog("option","buttons",buttons);
},
addButton:function(){
var buttons=$(this.element).dialog("option","buttons");
buttons[this.options.buttonName]=this.options.callBack;
$(this.element).dialog("option","buttons",buttons);
},
replaceButtons:function(){
$(this.element).dialog("option","buttons",this.options);
},
destroyModal:function(){
$(this.element).dialog("close");
$(this.element).dialog("destroy");
},
openModal:function(){
$(this.element).dialog("open");
},
closeModal:function(){
$(this.element).jqwindows("setUserCanClose",true);
$(this.element).dialog("close");
},
isModalOpen:function(){
return $(this.element).dialog("isOpen");
},
setHtml:function(){
$(this.element).html(this.options);
},
setModality:function(){
$(this.element).dialog("option","modal",this.options);
$(this.element).dialog("close");
$(this.element).dialog("open");
},
setMessage:function(){
$(this.element).html(this.options);
},
setCloseLink:function(){
if(!this.options){
$(" .ui-icon-closethick").parent().hide();
}else{
$(" .ui-icon-closethick").parent().show();
}
},
setTitle:function(){
$(this.element).dialog("option","title",this.options);
},
createModal: function(){
if (typeof(this.element)=='object') {
$(this.element).dialog("destroy");
$(this.element).data("exists",false);
$(this.element).data("returnValue","");
}
config={
buttons:{},
message:'',
okButton:true,
cancelButton:true,
closeButton:false,
okText:"Ok",
cancelText:"Cancel",
closeText:"Close",
userCanClose:false,
width:"400",
height:"auto",
title:"Please Wait",
modal:true,
position:"center",
resizable:false,
closeOnEscape:false,
autoOpen:true,
showCloseLink:false,
okCallback:function(){
if(!$(this).data("canClose")){
alert("Close not Allowed");
return false;
}
$(this).data("returnValue","ok");
$(this).dialog("close");
},
closeCallback: function(){
if(!$(this).data("canClose")){
alert("Close not Allowed");
return false;
}
$(this).data("returnValue","close");
$(this).dialog("close");
},
cancelCallback:function(){
if(!$(this).data("canClose")){
alert("Close not Allowed");
return false;
}
$(this).data("returnValue","cancel");
$(this).dialog("close");
}
}
settings=$.extend(config,this.options);
mybuttons={};
if(settings.okButton){
mybuttons[settings.okText]=settings.okCallback;
}
if(settings.cancelButton){
mybuttons[settings.cancelText]=settings.cancelCallback;
}
if(settings.closeButton){
mybuttons[settings.closeText]=settings.closeCallback;
}
$(this.element).data("canClose",settings.userCanClose);
if (settings.message) {
$(this.element).html(settings.message);
}
params={};
params["closeOnEscape"]=settings["closeOnEscape"];
params["beforeclose"]=function(){
return $(this).data("canClose");
};
params["title"]=settings.title;
params["buttons"]=$.extend(mybuttons,settings.buttons);
params['autoOpen']=settings.autoOpen;
params["modal"]=settings.modal;
params["position"]=settings.position;
params["width"]=settings.width;
params["height"]=settings.height;
params["resizable"]=settings.resizable;
$(this.element).dialog(params);
if(!settings["showCloseLink"]){
$(" .ui-icon-closethick").parent().hide();
}
$(this.element).data("exists",true);
$(this.element).data("returnValue","");}
}
});
})(jQuery)