ajax.lib.js - AJAX Code Search ~ Ajax Training, Learn Ajax Video Tutorials Online, Ajax Examples
Ajax Training, Learn Ajax Video Tutorials Online, Ajax Examples: ajax.lib.js - AJAX Code Search

ajax.lib.js - AJAX Code Search

// Copyright (c) 2006 J. Woodo (http://www.phpcow.com)
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
// VERSION 0.1

/**
* @fileoverview file contains four main classess for handling request/response between client and server:
* <br />1) XmlHttpRequst - for handling asynchronous requests to server;
* <br />2) XmlHttpResponse - for precessing returned data by XmlHttpRequest class.
* <br />3) AjaxAction - for building correct URL strings;
* <br />4) Ajax - implementation for easy XmlHttpRequst and XmlHttpResponse interaction;
* @author J. Woodo phpcow at gmail.com
* @version 0.1
*/

/**
* Create a new XmlHttpRequest instance.
* @class XmlHttpRequest class.
* Wrapper class for <b>XMLHttpRequest</b>
* @constructor
* @return a new instance of XmlHttpRequest
* @author J. Woodo
* @version 0.1
*/
function XmlHttpRequest() {

/**
* Ready state UNINITIALIZED - open() has not been called yet.
* @public
* @int
*/
this.UNINITIALIZED = 0;

/**
* Ready state LOADING - send() has not been called yet.
* @public
* @int
*/
this.LOADING = 1;

/**
* Ready state LOADED - send() has been called, headers and status are available.
* @public
* @int
*/
this.LOADED = 2;

/**
* Ready state INTERACTIVE - Downloading, responseText holds the partial data.
* @public
* @int
*/
this.INTERACTIVE = 3;

/**
* Ready state COMPLETED - Finished with all operations.
* @public
* @int
*/
this.COMPLETE = 4;

/**
* HTML form default enctype.
* @public
* @string
*/
this.ENCTYPE_GENERAL = "application/x-www-form-urlencoded";

/**
* HTML form multipart enctype.
* @public
* @string
*/
this.ENCTYPE_MULTIPART = "multipart/form-data";

/**
* Stores instantiated XMLHttpRequest object.
* @private
* @XMLHttpRequest
*/
var request = null;

/**
* Stores XMLHttpRequest object's current ready state.
* @private
* @int
*/
var state = 0;

/**
* Array of handlres according to each ready state index.
* @private
* @Array
* @see #addHandler
* @see #runHandlers
*/
var handlers = new Array();

/**
* Default enctype used for request.
* @private
* @int
*/
var enctype = this.ENCTYPE_GENERAL;

/**
* Array of parameters which must be exluded from request.
* @private
* @Array
*/
var excludeParams = new Array();

/**
* Parameters encoding method.
* @private
* @void
* @see #formToParams
*/
var encode = encodeURIComponent;

/**
* Exclude field from HTML form
* @public
* @param {String} name of HTML form element
* @see #formToParams
*/
this.excludeParam = function(paramName) {
excludeParams[paramName] = paramName;
}

/**
* Resets excluded HTML form elements array,
* method is needed if application uses only one instance of XmlHttpRequest class
* @public
*/
this.resetExcludeParams = function() {
excludeParams = new Array();
}

/**

* Main method wich sends request to server
* @public
* @param {String} url of the server side script which will process request
* @param {String} prepared string of parameters (param1=value1¶m2=value2 etc...)
* @param {String} method to be used for HTTP request e.g. POST, GET...
* @see #getHttpRequest
* @see #doGet
* @see #doPost
*/
this.doRequest = function(url, params, method) {

if (!method) {
method = "POST";
}

var req = null;
if (!request) {
req = this.getHttpRequest();
} else {
req = request;
}

if (req) {
state = this.LOADING;
this.runHandlers(this.LOADING);
var obj = this;
req.open(method, url, true);
req.onreadystatechange = function() {
obj.onReadyState();
}
req.setRequestHeader("content-type", enctype);
req.send(params);
request = req;
}

}

/**
* Instantiates new XMLHttpRequest or Microsoft.XMLHTTP object
* @public
* @see #doRequest
* @returns XMLHttpRequest object
*/
this.getHttpRequest = function() {
var request = null;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
return request;
}

/**
* function for XMLHttpRequest onreadystatechange event handler
* @public
* @see #doRequest
* @see #addHandler
* @see #runHandlers
*/
this.onReadyState = function() {
if (request) {
state = request.readyState;
}
this.runHandlers(state);
}

/**
* Loops trough handlers Array and evaluates items according to XMLHtppRequest state
* @public
* @param {int} state
* @see #addHandler
* @see #onReadyState
*/
this.runHandlers = function(state) {
if (handlers[state]) {
var _handlers = handlers[state];
for (var key in _handlers) {
try {
eval(_handlers[key] + "()");
} catch (e) {
//alert(e.message);
}
}
}
}

/**
* Adds new handler for apropriate state
* @public
* @param {String} name of handler
* @param {int} state
* @see #addHandler
* @see #onReadyState
*/
this.addHandler = function(name, state) {

if (!state) {
state = this.COMPLETE;
}

if (!handlers[state]) {
handlers[state] = new Array();
}

if (!handlers[state][name]) {
handlers[state][name] = name;
}

}

/**
* Checks wheather handler exists or not
* @public
* @param {String} name of handler
* @see #runHanlders
*/
this.hasHandler = function(name) {
return handlers[name];
}

/**
* Resets handlers array.
* method is needed if application uses only one instance of XmlHttpRequest class
* @public
* @see #addHandler
*/
this.resetHandlers = function() {
handlers = new Array();
}

/**
* Performs HTTP POST request.
* @public
* @requires {@link AjaxAction} AaxAction class
* @param {AjaxAction} AjaxAction instance
* @param {Form} HTML form element
* @see #doRequest
* @see #formToParams
*/
this.doPost = function(url, form) {
var formParams = this.formToParams(form);
var _url = (typeof(url) == 'object') ? url.getUrl() : url;
var idx = _url.indexOf('?');
if (idx > -1) {
if (formParams) {
if (formParams.substr(formParams.length - 1) != "&") {
formParams += "&";
}
}
formParams += _url.substr(idx + 1);
}
this.doRequest(_url, formParams, "POST");
}

/**
* Performs HTTP GET request.
* @public
* @param {AjaxAction} AjaxAction instance
* @param {Form} HTML form element
* @see #doRequest
* @see #formToParams
*/
this.doGet = function(url, form) {
var ulrStr = typeof(url) == 'object' ? url.getUrl() : url;
if (ulrStr.indexOf('?') == -1) {
ulrStr += '?';
}
this.doRequest(ulrStr + '&' + this.formToParams(form), null, "GET");
}

/**
* Returns response text
* @public
* @returns String
*/
this.getText = function() {
return request.responseText;
}

/**
* Returns response XML document
* @public
* @returns XML DOM document
*/
this.getXml = function() {
return request.responseXML;
}

/**
* Transform HTML form element to request parameter string e.g. param1=value1¶m2=value2 etc...
* @public
* @returns String
*/
this.formToParams = function(form) {
var params = '';
var type = null;
if (form) {
for (var i = 0; i<form.length; i++) {
if (!excludeParams[form[i].name] && form[i].name) {
type = form[i].type;
if (type == 'checkbox' || type == 'radio') {
if (form[i].checked) {
params += form[i].name + "=" + encode(form[i].value);
} else {
if (type == 'checkbox') {
params += form[i].name + "=";
}
}
} else if (type == 'select-one') {
if (!form[i].value && form[i].options.length > 0) {
params += form[i].name + "=" + encode(form[i].options[form[i].selectedIndex].text);
} else {
params += form[i].name + "=" + encode(form[i].value);
}
} else if (type == 'select-multiple') {
var opts = form[i].options;
var optParamValue = new Array();
for (var j=0; j<opts.length; j++) {
if (opts[j].selected) {
optParamValue[j] = form[i].name + "=" + encode((opts[j].getAttribute("value") || opts[j].text));
}
}
if (optParamValue.length > 0) {
params += optParamValue.join("&");
}
} else {
if (type != 'button' && type != 'reset' && type != 'file' && type != undefined) {
params += form[i].name + "=" + encode(form[i].value);
}
}
if ((i+1) < form.length && params.substr(params.length - 1) != '&') {
params += "&";
}
}
}
}
return params;
}

}

/**
* Create a new XmlHttpResponse instance. Class is used for processing server response.
* @class XmlHttpResponse class.
* @constructor
* @return a new instance of XmlHttpResponse
* @requires {@link Fader} Fader class
* @author J. Woodo
* @version 0.1
*/
var XmlHttpResponse = function() {

/**
* Array of instantiated Fader objects.
* @private
*/
var faders = new Array();

/**
* Target object to fade
* @private
*/
var faderTarget = null;

/**
* Processes response XML and performs method calls according to XML document.
* @public
* @param {XmlDomDocument} XML DOM document
* @returns void
*/
this.process = function(xml) {
var elements = xml.getElementsByTagName("elements");
if (elements && elements[0]) {
this.processElements(elements[0]);
}
var data = xml.getElementsByTagName("data");
if (data && data[0]) {
this.processData(data[0]);
Ajax.initializeElements();
}
var htmlForms = xml.getElementsByTagName("forms");
if (htmlForms && htmlForms[0]) {
this.processForms(htmlForms[0]);
}
xml = null;
}

/**
* Assigns styles to HTML elements defined under <elements> node
* @public
* @param XmlDomDocument
* @return void
*/
this.processElements = function(elements) {
var element = null;
var id;
var elementList = elements.getElementsByTagName("element");
if (elementList) {
for (var i = 0; i < elementList.length; i++) {
element = elementList[i];
id = element.getAttribute('id');
var obj = document.getElementById(id);
if (obj) {
var attributeList = element.getElementsByTagName('attributes').item(0);
if (attributeList) {
var attributes = attributeList.getElementsByTagName('attribute');
if (attributes) {
for (var j = 0; j < attributes.length; j++) {
eval("obj." + attributes[j].getAttribute("attributeName") + "=attributes[j].getAttribute('attributeValue')");
}
}
}
}
}
}
}

/**
* Processes <data> node and renderes returned HTML data.
* @public
* @param DOM element
* @see #processDom
* @returns void
*/
this.processData = function(data) {
try {
var items = data.getElementsByTagName("item");
if (items) {
var html = null;
var type = null;
var mode = null;
var callBack = null;
var fader = null;
var fadeTo = null;
var fadingColor = null;
var containerName = null;
var container = null;
cleanUpFaders();
for(var i = 0; i<items.length; i++) {
containerName = items[i].getAttribute("container");
type = items[i].getAttribute("type");
mode = items[i].getAttribute("mode");
callBack = items[i].getAttribute("callBack");
fadeTo = items[i].getAttribute("fadeTo");
fadingColor = items[i].getAttribute("fadingColor");
container = document.getElementById(containerName);
if (container) {
if (callBack) {
eval(callBack + "(items[i])");
} else {
if (type == 'text' && items[i].firstChild.nodeType == 4) {
container.style.display = "block";
container.innerHTML = items[i].firstChild.nodeValue;
} else if (type && type == 'dom') {
if (mode != 'append' && mode != 'prepend' && mode != 'remove') {
while(container.firstChild) {
container.removeChild(container.firstChild);
}
}
if (mode == 'remove') {
fadeElement(fadeTo, container, fadingColor);
//container.parentNode.removeChild(container);
fadeTo = null;
} else {
this.processDom(container, items[i].childNodes, mode);
}
}
fadeElement(fadeTo, faderTarget ? faderTarget : container, fadingColor);
}
}
}
}
} catch(e) {
error = false;
alert(e.message);
}
}

/**
* Processes <data> node and builds part of document using JavaScript DOM functions.
* @public
* @param HTML element (container)
* @param DOM elements
* @see #processData
* @returns Object
*/
this.processDom = function(container, elements, mode) {
var tmpElem = null;
var tmpText = null;
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if (element.nodeType == 1) {
tmpElem = document.createElement(element.tagName);
applyAttributes(tmpElem, element.attributes);
if (element.hasChildNodes()) {
this.processDom(tmpElem, element.childNodes, mode);
}
if (mode == 'append' || mode == 'prepend') {
faderTarget = tmpElem;
}
if (mode == 'prepend') {
container.insertBefore(tmpElem, container.firstChild);
mode = null;
faderTarget = tmpElem;
} else {
container.appendChild(tmpElem);
}
} else if (element.nodeType == 3 || element.nodeType == 4) {
tmpText = document.createTextNode(element.nodeValue);
container.appendChild(tmpText);
}
}
return container;
}

/**
* Processes <forms> node.
* @public
* @param DOM element
* @returns void
*/
this.processForms = function(htmlForms) {

htmlForms = htmlForms.getElementsByTagName('form');
var htmlForm = null;
var formName = null;
var form = null;
var elementList = null;
var elements = null;

for (var i = 0; i < htmlForms.length; i++) {
htmlForm = htmlForms[i];
formName = htmlForm.getAttribute('name');
if (formName) {
if (form = document.forms[formName]) {
if (elementList = htmlForm.getElementsByTagName('elements')) {
elements = elementList[0].getElementsByTagName('element');
if (elements) {
this.processForm(form, elements);
}
}
}
}
}

}

/**
* Processes <form> nodes and assigns values to apropriate HTML form fields.
* @public
* @param DOM element
* @returns void
*/
this.processForm = function(form, elements) {
try {
var element = null;
var fieldName = null;
var selectValue = null;
var selectOpts = null;

for (var i=0; i < elements.length; i++) {

element = elements[i];
fieldName = element.getAttribute('name');
var field = form[fieldName] || form[fieldName+"[]"];

if (field) {
if (field.type == 'select-one') {
selectOpts = field.options;
var xmlOptValue = element.firstChild.nodeValue;
for (var j=0; j<selectOpts.length; j++) {
selectValue = selectOpts[j].value || selectOpts[j].text;
selectOpts[j].selected = (selectValue == xmlOptValue);
}
} else if (field.type == 'select-multiple') {
selectOpts = field.options;
var xmlOpts = element.getElementsByTagName('value');
if (xmlOpts) {
var usedOpts = new Array();
for (var j=0; j < xmlOpts.length; j++) {
var xmlOptValue = xmlOpts[j].firstChild.nodeValue;
for (var k=0; k<selectOpts.length; k++) {
selectValue = selectOpts[k].value || selectOpts[k].text;
if (selectValue == xmlOptValue && !usedOpts[k]) {
usedOpts[k] = selectValue;
selectOpts[k].selected = true;
} else if (!usedOpts[k]) {
selectOpts[k].selected = false;
}
}
}
usedOpts = null;
}
} else if (field.length && field.length > 0) {
for (var j=0; j < field.length; j++) {
if (field[j].type == 'radio') {
if (field[j].value == element.firstChild.nodeValue) {
field[j].checked = true;
} else {
field[j].checked = false;
}
}
}
} else {
if (element.firstChild) {
if (field.type == 'checkbox' || field.type == 'radio') {
if (field.value == element.firstChild.nodeValue) {
field.checked = true;
} else {
field.checked = false;
}
} else {
field.value = element.firstChild.nodeValue;
}
} else {
field.value = '';
}
}
}

}

} catch(e) {
//alert(e.message);
}

}

/**
* Iterates trough attributes array and asigns them to the element.
* @private
* @param DOM element
* @param Array
* @see #applyAttribute
* @returns void
*/
var applyAttributes = function(element, attributes) {
for (var j = 0; j < attributes.length; j++) {
applyAttribute(element, attributes[j].nodeName, attributes[j].nodeValue);
}
}

/**
* Asigns attribute/value pair to element.
* @private
* @param DOM element
* @param {String} Attribute name
* @param {String} Attribute value
* @see #applyAttributes
* @returns void
*/
var applyAttribute = function(element, attributeName, attributeValue) {
if (attributeName == 'class') {
element.className = attributeValue;
} else if (attributeName == 'style') {
element.style.cssText = attributeValue;
} else if (attributeName == 'id') {
element.id = attributeValue;
} else {
element.setAttribute(attributeName, attributeValue);
}
}

/**
* Instantiates and calls one of the Fading methods.
* @private
* @param {String} method name to call
* @param {Object} Html element to fade
* @param {String} Fading start color
* @returns void
*/
var fadeElement = function(fadeTo, container, fadingColor) {
if (fadeTo) {
fader = new Fader(container, fadingColor);
faders[faders.length] = fader;
switch (fadeTo) {
case Fader.FADEIN:
fader.fadeIn();
break;
case Fader.FADEAWAY:
fader.fadeAway();
break;
case Fader.FADEOUT:
fader.fadeOut();
break;
default:
break;
}
}
}

/**
* Destroies instantiated Fader instances.
* @private
* @returns void
*/
var cleanUpFaders = function() {
if (faders) {
for (var i = 0; i < faders.length; i++) {
faders[i].opacity = 10;
}
faders = new Array();
}
}

}

var Ajax = {

/**
* Instance of XmlHttpRequest class
* @public
*/
http: new XmlHttpRequest(),

/**
* Instance of XmlHttpResponse class
* @public
*/
response: new XmlHttpResponse(),

/**
* Instance of Indicator class
* @public
*/
indicator: new Indicator(),

/**
* Performs server call

* @public
* @returns void
*/
doAction: function(obj) {

/*var action = null;

if (obj.href) {
action = obj.href;
} else if (obj.form) {
if (obj.form.action) {
action = obj.form.action;
}
form = obj.form;
}

if (form && typeof(form) == 'string') {
form = document.forms[form];
}

var action = new AjaxAction(action);
action.addParam("event", obj.name.replace('submit.', ''));
this.http.addHandler("Ajax.finish", this.http.COMPLETE);
this.http.doPost(action, form);*/

if (obj.cmd) {
this.indicator.show();
var action = new AjaxAction(obj.cmd.action);
action.addParam("event", obj.cmd.event);
this.http.addHandler("Ajax.finish", this.http.COMPLETE);
if (obj.cmd.method == 'post') {
this.http.doPost(action, obj.cmd.form);
} else {
this.http.doGet(action, obj.cmd.form);
}
}

},

/**
* Finishes response
* @public
* @returns void
*/
finish: function() {
this.response.process(this.http.getXml());
this.indicator.hide();
},

/**
* Initializes HTML anchor and input elements and attach apropriate method calls
* @public
* @returns void
*/
initializeElements: function() {
var anchors = document.getElementsByTagName('a');
var i = 0;
for (; i<anchors.length; i++) {
var anchor = anchors[i];
var href = anchor.getAttribute('href');
var name = anchor.getAttribute('name');
var tmp = null;
var cmd = null;
//get.someEvent.someForm

if (href && name && ((name.indexOf('get.') != -1) || (name.indexOf('post.') != -1) || (name.indexOf('call.') != -1)) && !anchor.onclick) {
tmp = name.split('.');
if (tmp.length >= 2) {
if (tmp[0] == 'call') {
tmp.shift();
anchor.onclick = function() {
return eval(tmp.join('.') + "(this)");
}
} else {
cmd = {};
cmd.action = href;
cmd.method = tmp[0];
cmd.event = tmp[1].toLowerCase();
cmd.form = document.forms[tmp[2]] ? document.forms[tmp[2]] : null;
anchor.cmd = cmd;
anchor.onclick = function() {
Ajax.doAction(this);
return false;
}
}
}
}

/*if (href && name && (name.indexOf('submit.') != -1) && !anchor.onclick) {
anchor.onclick = function() {
Ajax.doAction(this, Dhtml.getParent(anchor, 'form'));
return false;
}
}*/
}

var inputs = document.getElementsByTagName('input');

for (i = 0; i<inputs.length; i++) {
var input = inputs[i];
if (input.getAttribute('type') == 'button' && !input.onclick) {
cmd = {};
cmd.action = input.form.action;
cmd.method = input.form.method.toLowerCase();
cmd.event = input.name;
cmd.form = input.form;
input.cmd = cmd;
input.onclick = function() {
Ajax.doAction(this);
return false;
}
}
}

}
};


/**
* Create a new AjaxAction instance.
* @class AjaxAction class.
* @constructor
* @returns a new instance of AjaxAction
* @author J. Woodo
* @version 0.1
*/
function AjaxAction(action) {

/**
* Associative array of parameters
* @private
* @tepe Array
*/
var params = new Array();

/**
* To prevent IE from caching result each consturcted action string
* has additional _req_date parameter
* @private
* @tepe Date
*/
var date = new Date();
params['_req_date'] = date.getTime();
params.length += 1;

/**
* Builds and Returns action URL.
* @public
* @returns URL
* @type String
* @returns String
*/
this.getUrl = function() {

var keyValues = new Array();

if (params) {
for(var key in params) {
keyValues[keyValues.length] = key + '=' + params[key];
}
}

if (action.indexOf('?') == -1) {
action += '?';
}

if (action.length > 0) {
action += '&';
}

return action + keyValues.join('&');

}

/**
* Adds new request parameter to parameters map.
* @public
* @return void
*/
this.addParam = function(name, value) {
params[name] = value;
params.length += 1;
}

}

/**
* Create a new Indicator instance. Class is used to show some action on page,
* indicator is presented as small red box on the page's right top corner and is visible while some action finishes
* @class Indicator class.
* @constructor
* @return a new instance of Indicator
* @author J. Woodo
* @version 0.1
*/
function Indicator() {
/**
* Displayes indicator on the page
* @public
* @return void
*/
this.show = function() {

var top = 0;

if(document.documentElement && document.documentElement.scrollTop) {
top = document.documentElement.scrollTop;
} else if( document.body && document.body.scrollTop) {
top = document.body.scrollTop;
}

if (document.body) {
document.body.style.cursor = "wait";
}

var div = this.getIndicator();
div.style.top = top + "px";
div.style.display = "block";

}

/**
* Hides indicator when action finished
* @public
* @return void
*/
this.hide = function() {
var div = this.getIndicator();
div.style.display = "none";
if (document.body) {
document.body.style.cursor = "default";
}
}

/**
* Creates (if not exists) and returns indicator HTML element
* @public
* @type Object
* @return void
*/
this.getIndicator = function() {
var indicator = document.getElementById("_indicator");
if (!indicator) {
indicator = document.createElement("div");
indicator.id = "_indicator";
indicator.style.display = "none";
indicator.style.background = "#880000";
indicator.style.padding = "1px";
indicator.style.fontFamily = "arial";
indicator.style.fontSize = "12px";
indicator.style.color = "white";
indicator.style.position = "absolute";
indicator.style.top = "0px";
indicator.style.right = "0px";
var text = document.createTextNode("Processing...");
indicator.appendChild(text);
document.body.appendChild(indicator);
}
return indicator;
}
}

Fader.FADEIN = 'fadein';
Fader.FADEOUT = 'fadeout';
Fader.FADEAWAY = 'fadeaway';

/**
* Create a new Fader instance.
* Class is used to creating various fading effects.
* @class Fader class.
* @constructor
* @param Object - HTML element whic must be faded
* @return a new instance of Fader
* @author J. Woodo
* @version 0.1
*/
function Fader(targetObj, color) {

/**
* Initial opacity value for fading object
* @public
* @type int
*/
this.opacity = 85;

/**
* Stores window interval object
* @private
* @type Object
*/
var interval = null;

/**
* Fading color to be used
* @private
* @type String
*/
var fadingColor = color ? color : '#FDCE5E';
//var fadingColor = color ? color : '#FFFF00';

/**
* Number of milliseconds
* @private
* @type int
*/
var miliseconds = 1;

/**
* Target object to fade
* @private
* @type Object
*/
var faderObj = null;

faderObj = document.getElementById('_fader_' + targetObj.id);
if (!faderObj) {
faderObj = document.createElement('div');
faderObj.id = '_fadertest';
document.body.appendChild(faderObj);
}

var xy = Dhtml.getObjectXY(targetObj);
faderObj.style.zIndex = 9999;
faderObj.style.display = "block";
faderObj.style.position = "absolute";
faderObj.style.top = xy.y + "px";
faderObj.style.left = xy.x + "px";
faderObj.style.background = fadingColor;
faderObj.style.width = Dhtml.getObjectWidth(targetObj) + "px";
faderObj.style.height = Dhtml.getObjectHeight(targetObj) + "px";

/**
* Fades out HTML element
* @public
* @returns void
*/
this.fadeOut = function() {
if (this.opacity > 10) {
this.applyOpacity();
var obj = this;
interval = setTimeout(function() {obj.fadeOut()}, miliseconds);
} else if (this.opacity <= 10) {
this.finish();
}
}

/**
* Fades away HTML element
* @public
* @returns void
*/
this.fadeAway = function() {
if (this.opacity > 10) {
this.applyOpacity();
this.applyOpacity(targetObj);
var obj = this;
interval = setTimeout(function() {obj.fadeAway()}, miliseconds);
} else if (this.opacity <= 10) {
targetObj.parentNode.removeChild(targetObj);
this.finish();
}
}

/**
* Sets calculated opacity to object
* @public
* @return void
*/
this.applyOpacity = function(obj) {
var style = obj || faderObj.style;
style.opacity = (this.opacity / 100);
style.MozOpacity = (this.opacity / 100);
style.KhtmlOpacity = (this.opacity / 100);
style.filter = "alpha(opacity=" + this.opacity + ")";
--this.opacity;
}

this.onfinish = null;

/**
* Finishes fading and removes fading object from document tree
* @public
* @returns void
*/
this.finish = function() {
this.opacity = 10;
document.body.removeChild(faderObj);
clearInterval(interval);
if (this.onfinish) this.onfinish();
this.onfinish = null;
}

}

var Uploader = {uploaderForm: null,
upload: function(form) {
this.uploaderForm = form;
var frame = this.getIFrame();
form.target = frame.name;
form.submit();
form.target = "";
return false;
}, uploadCallBack: function(message, status, tmpFileId) {
var form = this.uploaderForm;
form.tmpFileId.value = tmpFileId;
var frame = this.getIFrame();
frame.src = "";
Loading.hide();
}, getIFrame: function() {
var iFrame = document.getElementById('_file_uploader');
if (iFrame == null) {
iFrame = document.createElement("iframe");
iFrame.name = "_file_uploader";
iFrame.id = "_file_uploader";
iFrame.src = "";
iFrame.target = "_self";
iFrame.style.width = "0px";
iFrame.style.height = "0px";
iFrame.style.border = "none";
document.body.appendChild(iFrame);
}
return iFrame;
}
};

Related Posts by Categories

0 comments:

Useful Links on Adobe Flex

Your Ad Here

Latest Books on Adobe Flex