Code:
df.WebForm = function WebForm(sName, oParent){
df.WebForm.base.constructor.call(this, sName, oParent);
this.prop(df.tBool, "pbPromptButton", false);
this.prop(df.tBool, "pbClearButton", false);
this.prop(df.tBool, "pbPassword", false);
this.prop(df.tString, "psPlaceHolder", "");
this.prop(df.tBool, "pbHtml5NumberOnMobile", true);
// Events
this.event("OnPrompt", df.cCallModeWait);
this.event("OnClearPrompt", df.cCallModeWait);
// @privates
this._eWrap = null;
this._ePrompt = null;
this._eClearPrompt = null;
this._bTypeNumber = false;
// Configure super classes
this._sControlClass = "WebForm";
};
/*
This class is the implementation of the client-side part of the WebForm data entry object. It can
render itself to HTML and implements the published properties from the server. It has special prompt
button functionality.
*/
df.defineClass("df.WebForm", "df.WebBaseForm",{
/*
This method generates the HTML for input element. The input element has two wrappers for styling it
and making space for the prompt button. The HTML for the prompt button is available by default and
is made visible when needed.
@param aHtml String builder array to which HTML can be added.
@private
//<span class="WebFrm_Prompt"></span><div class="WebFrm_PromptSpacer"><span class="WebFrm_Clear"></span><div class="WebFrm_PromptSpacer">
*/
openHtml : function(aHtml){
df.WebForm.base.openHtml.call(this, aHtml);
aHtml.push('<div class="WebFrm_Wrapper"><span class="WebFrm_Prompt"></span><div class="WebFrm_PromptSpacer"><span class="WebFrm_Clear"></span><div class="WebFrm_PromptSpacer">',
'<input type="', (this.pbPassword ? 'password' : 'text'),
'" name="', this._sName,
'" value="" id="', this._sControlId,
'" placeholder="', df.dom.encodeAttr(this.psPlaceHolder), '"',
(!this.isEnabled() ? ' disabled="disabled" tabindex="-1"' : ''),
'>');
},
/*
This method generates the closing HTML closing the tags opened by the openHtml. This allows
subclasses to insert HTML inside the WebFrm_PromptSpacer div.
@param aHtml String builder array to which HTML can be added.
@private
*/
closeHtml : function(aHtml){
aHtml.push('</div></div></div>');
df.WebForm.base.closeHtml.call(this, aHtml);
},
/*
This method is called after rendering and gets references, attaches event handlers and sets property
values.
@private
*/
afterRender : function(){
// Get references
this._eControl = df.dom.query(this._eElem, "div.WebFrm_Wrapper input");
this._ePrompt = df.dom.query(this._eElem, "div.WebFrm_Wrapper span.WebFrm_Prompt");
this._eClear = df.dom.query(this._eElem, "div.WebFrm_Wrapper span.WebFrm_Clear");
this._eWrap = df.dom.query(this._eElem, "div.WebFrm_Wrapper");
df.WebForm.base.afterRender.call(this);
// Attach event handlers
df.dom.on("click", this._ePrompt, this.onPromptClick, this);
df.dom.on("click", this._eClear, this.onClearClick, this);
// Set properties
this.set_pbPromptButton(this.pbPromptButton);
this.set_pbClearButton(this.pbClearButton);
},
/*
This setter switches the field between an input type=password and a input type=text field.
@param bVal The new value.
@private
*/
set_pbPassword : function(bVal){
if(this._eControl){
if(df.sys.isIE && df.sys.iVersion < 9){ // For IE8 and older we need to clone the DOM element before we can switch it
var eNew = this._eControl.cloneNode(false);
eNew.type = (bVal ? 'password' : 'text');
this._eControl.parentNode.replaceChild(eNew,this._eControl);
this._eControl = eNew;
}else{ // Modern browser support simply setting the type
this._eControl.type = (bVal ? 'password' : 'text');
}
}
},
/*
This setter sets the background color of the field. The background color is applied to the wrapper
div element.
@param sVal The bew value.
@private
*/
set_psBackgroundColor : function(sVal){
if(this._eWrap){
this._eWrap.style.background = sVal || '';
}
},
/*
This setter hides / shows the prompt button. That is done by removing / setting setting the
"WebFrm_HasPrompt" CSS class on the wrapper div element.
@param bVal The new value.
*/
set_pbPromptButton : function(bVal){
if(this._eWrap && this._ePrompt){
df.dom.toggleClass(this._eWrap, "WebFrm_HasPrompt", bVal);
}
},
set_pbClearButton : function(bVal){
if(this._eWrap && this._eClear){
df.dom.toggleClass(this._eWrap, "WebFrm_HasClear", bVal);
}
},
/*
Sets the placeholder using the HTML5 placeholder attribute (only works on IE10 and higher).
@param sVal The new value.
*/
set_psPlaceHolder : function(sVal){
if(this._eControl){
this._eControl.placeholder = sVal;
}
},
/*
This method handles the onclick event of the prompt button DOM element and fires the OnPrompt event.
@param oEvent The event object (see df.events.DOMEvent).
@private
*/
onPromptClick : function(oEvent){
if(this.isEnabled()){
// Tell webapp object that we have the focus but do not give ourselve the actual focus (prevent Mobile Keyboard flashing)
this.objFocus();
if(this.firePrompt()){
oEvent.stopPropagation();
}else{
// If the prompt button doesn't do anything we still need to give ourself the real focus
this.focus();
}
}
},
onClearClick : function(oEvent){
/*if(this.isEnabled()){
// Tell webapp object that we have the focus but do not give ourselve the actual focus (prevent Mobile Keyboard flashing)
this.objFocus();
if(this.firePrompt()){
oEvent.stopPropagation();
}else{
// If the prompt button doesn't do anything we still need to give ourself the real focus
this.focus();
}
}*/
},