oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

- Replaced color picker form control with a more robust version.

Browse source
This commit is contained in:
JT Smith 2007-07-09 09:03:56 +00:00
parent 6fe068e42d
commit 6e0470771e
1193 changed files with 342 additions and 223 deletions
Download patch file Download diff file Expand all files Collapse all files

697
www/extras/extjs/source/legacy/Actor.js vendored Normal file
View file

@ -0,0 +1,697 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
/**
* @class Ext.Actor
* Provides support for syncing and chaining of Element Yahoo! UI based animation and some common effects. Actors support "self-play" without an Animator.<br><br>
* <b>Note: Along with the animation methods defined below, this class inherits and captures all of the "set" or animation methods of {@link Ext.Element}. "get" methods are not captured and execute immediately.</b>
* <br><br>Usage:<br>
* <pre><code>
* var actor = new Ext.Actor("myElementId");
* actor.startCapture(true);
* actor.moveTo(100, 100, true);
* actor.squish();
* actor.play();
* <br>
* // or to start capturing immediately, with no Animator (the null second param)
* <br>
* var actor = new Ext.Actor("myElementId", null, true);
* actor.moveTo(100, 100, true);
* actor.squish();
* actor.play();
* </code></pre>
* @extends Ext.Element
* @requires Ext.Element
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @requires YAHOO.util.CustomEvent
* @requires YAHOO.util.Anim
* @requires YAHOO.util.ColorAnim
* @requires YAHOO.util.Motion
* @className Ext.Actor
* @constructor
* Create new Actor.
* @param {String/HTMLElement} el The dom element or element id
* @param {Ext.Animator} animator (optional) The Animator that will capture this Actor's actions
* @param {Boolean} selfCapture (optional) Whether this actor should capture its own actions to support self playback without an animator (defaults to false)
*/
Ext.Actor = function(element, animator, selfCapture){
this.el = Ext.get(element); // cache el object for playback
Ext.Actor.superclass.constructor.call(this, this.el.dom, true);
this.onCapture = new Ext.util.Event();
if(animator){
/**
* The animator used to sync this actor with other actors
* @member Ext.Actor
*/
animator.addActor(this);
}
/**
* Whether this actor is currently capturing
* @member Ext.Actor
*/
this.capturing = selfCapture;
this.playlist = selfCapture ? new Ext.Animator.AnimSequence() : null;
};
(function(){
/** @ignore */
var qa = function(method, animParam, onParam){
return function(){
if(!this.capturing){
return method.apply(this, arguments);
}
var args = Array.prototype.slice.call(arguments, 0);
if(args[animParam] === true){
return this.capture(new Ext.Actor.AsyncAction(this, method, args, onParam));
}else{
return this.capture(new Ext.Actor.Action(this, method, args));
}
};
};
/** @ignore */
var q = function(method){
return function(){
if(!this.capturing){
return method.apply(this, arguments);
}
var args = Array.prototype.slice.call(arguments, 0);
return this.capture(new Ext.Actor.Action(this, method, args));
};
};
var spr = Ext.Element.prototype;
Ext.extend(Ext.Actor, Ext.Element, {
/**
* Captures an action for this actor. Generally called internally but can be called directly.
* @param {Ext.Actor.Action} action
*/
capture : function(action){
if(this.playlist != null){
this.playlist.add(action);
}
this.onCapture.fire(this, action);
return this;
},
// basic
setVisibilityMode : q(spr.setVisibilityMode),
enableDisplayMode : q(spr.enableDisplayMode),
focus : q(spr.focus),
addClass : q(spr.addClass),
removeClass : q(spr.removeClass),
replaceClass : q(spr.replaceClass),
setStyle : q(spr.setStyle),
setLeft : q(spr.setLeft),
setTop : q(spr.setTop),
clearPositioning : q(spr.clearPositioning),
setPositioning : q(spr.setPositioning),
clip : q(spr.clip),
unclip : q(spr.unclip),
clearOpacity : q(spr.clearOpacity),
update : q(spr.update),
remove : q(spr.remove),
fitToParent : q(spr.fitToParent),
appendChild : q(spr.appendChild),
createChild : q(spr.createChild),
appendTo : q(spr.appendTo),
insertBefore : q(spr.insertBefore),
insertAfter : q(spr.insertAfter),
wrap : q(spr.wrap),
replace : q(spr.replace),
insertHtml : q(spr.insertHtml),
set : q(spr.set),
// anims
setVisible : qa(spr.setVisible, 1, 3),
toggle : qa(spr.toggle, 0, 2),
setXY : qa(spr.setXY, 1, 3),
setLocation : qa(spr.setLocation, 2, 4),
setWidth : qa(spr.setWidth, 1, 3),
setHeight : qa(spr.setHeight, 1, 3),
setSize : qa(spr.setSize, 2, 4),
setBounds : qa(spr.setBounds, 4, 6),
setOpacity : qa(spr.setOpacity, 1, 3),
moveTo : qa(spr.moveTo, 2, 4),
move : qa(spr.move, 2, 4),
alignTo : qa(spr.alignTo, 3, 5),
hide : qa(spr.hide, 0, 2),
show : qa(spr.show, 0, 2),
setBox : qa(spr.setBox, 2, 4),
autoHeight : qa(spr.autoHeight, 0, 2),
setX : qa(spr.setX, 1, 3),
setY : qa(spr.setY, 1, 3),
load : function(){
if(!this.capturing){
return spr.load.apply(this, arguments);
}
var args = Array.prototype.slice.call(arguments, 0);
return this.capture(new Ext.Actor.AsyncAction(this, spr.load,
args, 2));
},
animate : function(args, duration, onComplete, easing, animType){
if(!this.capturing){
return spr.animate.apply(this, arguments);
}
return this.capture(new Ext.Actor.AsyncAction(this, spr.animate,
[args, duration, onComplete, easing, animType], 2));
},
/**
* Start self capturing calls on this Actor. All subsequent calls are captured and executed when play() is called.
*/
startCapture : function(){
this.capturing = true;
this.playlist = new Ext.Animator.AnimSequence();
},
/**
* Stop self capturing calls on this Actor.
*/
stopCapture : function(){
this.capturing = false;
},
/**
* Clears any calls that have been self captured.
*/
clear : function(){
this.playlist = new Ext.Animator.AnimSequence();
},
/**
* Starts playback of self captured calls.
* @param {Function} oncomplete (optional) Callback to execute when playback has completed
*/
play : function(oncomplete){
this.capturing = false;
if(this.playlist){
this.playlist.play(oncomplete);
}
},
/**
* Stops the sequence if this actor is being used without an animator
*/
stop : function(){
if(this.playlist.isPlaying()){
this.playlist.stop();
}
},
/**
* Returns true if this actor is animated and not part of an animator
* @return {Boolean}
*/
isPlaying : function(){
return this.playlist.isPlaying();
},
/**
* Capture a function call.
* @param {Function} fcn The function to call
* @param {Array} args (optional) The arguments to call the function with
* @param {Object} scope (optional) The scope of the function
*/
addCall : function(fcn, args, scope){
if(!this.capturing){
fcn.apply(scope || this, args || []);
}else{
this.capture(new Ext.Actor.Action(scope, fcn, args || []));
}
},
/**
* Capture an async function call.
* @param {Function} fcn The function to call
* @param {Number} callbackIndex The index of the callback parameter on the passed function. A CALLBACK IS REQUIRED.
* @param {Array} args The arguments to call the function with
* @param {Object} scope (optional) The scope of the function
*/
addAsyncCall : function(fcn, callbackIndex, args, scope){
if(!this.capturing){
fcn.apply(scope || this, args || []);
}else{
this.capture(new Ext.Actor.AsyncAction(scope, fcn, args || [], callbackIndex));
}
},
/**
* Capture a pause (in seconds).
* @param {Number} seconds The seconds to pause
*/
pause : function(seconds){
this.capture(new Ext.Actor.PauseAction(seconds));
},
/**
* Shake this element from side to side
*/
shake : function(){
this.move("left", 20, true, .05);
this.move("right", 40, true, .05);
this.move("left", 40, true, .05);
this.move("right", 20, true, .05);
},
/**
* Bounce this element from up and down
*/
bounce : function(){
this.move("up", 20, true, .05);
this.move("down", 40, true, .05);
this.move("up", 40, true, .05);
this.move("down", 20, true, .05);
},
/**
* Show the element using a "blinds" effect
* @param {String} anchor The part of the element that it should appear to exapand from.
The short/long options currently are t/top, l/left
* @param {Number} newSize (optional) The size to animate to. (Default to current size)
* @param {Float} duration (optional) How long the effect lasts (in seconds)
* @param {Function} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeOut)
*/
blindShow : function(anchor, newSize, duration, easing){
var size = this.getSize();
this.clip();
anchor = anchor.toLowerCase();
switch(anchor){
case "t":
case "top":
this.setHeight(1);
this.setVisible(true);
this.setHeight(newSize || size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut);
break;
case "l":
case "left":
this.setWidth(1);
this.setVisible(true);
this.setWidth(newSize || size.width, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut);
break;
}
this.unclip();
return size;
},
/**
* Hide the element using a "blinds" effect
* @param {String} anchor The part of the element that it should appear to collapse to.
The short/long options are t/top, l/left, b/bottom, r/right.
* @param {Float} duration (optional) How long the effect lasts (in seconds)
* @param {Function} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeIn)
*/
blindHide : function(anchor, duration, easing){
var size = this.getSize();
this.clip();
anchor = anchor.toLowerCase();
switch(anchor){
case "t":
case "top":
this.setSize(size.width, 1, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn);
this.setVisible(false);
break;
case "l":
case "left":
this.setSize(1, size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn);
this.setVisible(false);
break;
case "r":
case "right":
this.animate({width: {to: 1}, points: {by: [size.width, 0]}},
duration || .5, null, YAHOO.util.Easing.easeIn, YAHOO.util.Motion);
this.setVisible(false);
break;
case "b":
case "bottom":
this.animate({height: {to: 1}, points: {by: [0, size.height]}},
duration || .5, null, YAHOO.util.Easing.easeIn, YAHOO.util.Motion);
this.setVisible(false);
break;
}
return size;
},
/**
* Show the element using a "slide in" effect - In order for this effect to work the element MUST have a child element container that can be "slid" otherwise a blindShow effect is rendered.
* @param {String} anchor The part of the element that it should appear to slide from.
The short/long options currently are t/top, l/left
* @param {Number} newSize (optional) The size to animate to. (Default to current size)
* @param {Float} duration (optional) How long the effect lasts (in seconds)
* @param {Function} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeOuth)
*/
slideShow : function(anchor, newSize, duration, easing, clearPositioning){
var size = this.getSize();
this.clip();
var firstChild = this.dom.firstChild;
if(!firstChild || (firstChild.nodeName && "#TEXT" == firstChild.nodeName.toUpperCase())) { // can't do a slide with only a textnode
this.blindShow(anchor, newSize, duration, easing);
return;
}
var child = Ext.get(firstChild, true);
var pos = child.getPositioning();
this.addCall(child.position, ["absolute"], child);
this.setVisible(true);
anchor = anchor.toLowerCase();
switch(anchor){
case "t":
case "top":
this.addCall(child.setStyle, ["right", ""], child);
this.addCall(child.setStyle, ["top", ""], child);
this.addCall(child.setStyle, ["left", "0px"], child);
this.addCall(child.setStyle, ["bottom", "0px"], child);
this.setHeight(1);
this.setHeight(newSize || size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut);
break;
case "l":
case "left":
this.addCall(child.setStyle, ["left", ""], child);
this.addCall(child.setStyle, ["bottom", ""], child);
this.addCall(child.setStyle, ["right", "0px"], child);
this.addCall(child.setStyle, ["top", "0px"], child);
this.setWidth(1);
this.setWidth(newSize || size.width, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut);
break;
case "r":
case "right":
this.addCall(child.setStyle, ["left", "0px"], child);
this.addCall(child.setStyle, ["top", "0px"], child);
this.addCall(child.setStyle, ["right", ""], child);
this.addCall(child.setStyle, ["bottom", ""], child);
this.setWidth(1);
this.setWidth(newSize || size.width, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut);
break;
case "b":
case "bottom":
this.addCall(child.setStyle, ["right", ""], child);
this.addCall(child.setStyle, ["top", "0px"], child);
this.addCall(child.setStyle, ["left", "0px"], child);
this.addCall(child.setStyle, ["bottom", ""], child);
this.setHeight(1);
this.setHeight(newSize || size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut);
break;
}
if(clearPositioning !== false){
this.addCall(child.setPositioning, [pos], child);
}
this.unclip();
return size;
},
/**
* Hide the element using a "slide in" effect - In order for this effect to work the element MUST have a child element container that can be "slid" otherwise a blindHide effect is rendered.
* @param {String} anchor The part of the element that it should appear to slide to.
The short/long options are t/top, l/left, b/bottom, r/right.
* @param {Float} duration (optional) How long the effect lasts (in seconds)
* @param {Function} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeIn)
*/
slideHide : function(anchor, duration, easing){
var size = this.getSize();
this.clip();
var firstChild = this.dom.firstChild;
if(!firstChild || (firstChild.nodeName && "#TEXT" == firstChild.nodeName.toUpperCase())) { // can't do a slide with only a textnode
this.blindHide(anchor, duration, easing);
return;
}
var child = Ext.get(firstChild, true);
var pos = child.getPositioning();
this.addCall(child.position, ["absolute"], child);
anchor = anchor.toLowerCase();
switch(anchor){
case "t":
case "top":
this.addCall(child.setStyle, ["right", ""], child);
this.addCall(child.setStyle, ["top", ""], child);
this.addCall(child.setStyle, ["left", "0px"], child);
this.addCall(child.setStyle, ["bottom", "0px"], child);
this.setSize(size.width, 1, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn);
this.setVisible(false);
break;
case "l":
case "left":
this.addCall(child.setStyle, ["left", ""], child);
this.addCall(child.setStyle, ["bottom", ""], child);
this.addCall(child.setStyle, ["right", "0px"], child);
this.addCall(child.setStyle, ["top", "0px"], child);
this.setSize(1, size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn);
this.setVisible(false);
break;
case "r":
case "right":
this.addCall(child.setStyle, ["right", ""], child);
this.addCall(child.setStyle, ["bottom", ""], child);
this.addCall(child.setStyle, ["left", "0px"], child);
this.addCall(child.setStyle, ["top", "0px"], child);
this.setSize(1, size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn);
this.setVisible(false);
break;
case "b":
case "bottom":
this.addCall(child.setStyle, ["right", ""], child);
this.addCall(child.setStyle, ["top", "0px"], child);
this.addCall(child.setStyle, ["left", "0px"], child);
this.addCall(child.setStyle, ["bottom", ""], child);
this.setSize(size.width, 1, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn);
this.setVisible(false);
break;
}
this.addCall(child.setPositioning, [pos], child);
return size;
},
/**
* Hide the element by "squishing" it into the corner
* @param {Float} duration (optional) How long the effect lasts (in seconds)
*/
squish : function(duration){
var size = this.getSize();
this.clip();
this.setSize(1, 1, true, duration || .5);
this.setVisible(false);
return size;
},
/**
* Fade an element in
* @param {Float} duration (optional) How long the effect lasts (in seconds)
*/
appear : function(duration){
this.setVisible(true, true, duration);
return this;
},
/**
* Fade an element out
* @param {Float} duration (optional) How long the effect lasts (in seconds)
*/
fade : function(duration){
this.setVisible(false, true, duration);
return this;
},
/**
* Blink the element as if it was clicked and then collapse on its center
* @param {Float} duration (optional) How long the effect lasts (in seconds)
*/
switchOff : function(duration){
this.clip();
this.setOpacity(0.3, true, 0.1);
this.clearOpacity();
this.setVisible(true);
this.pause(0.1);
this.animate({height:{to:1}, points:{by:[0, this.getHeight() / 2]}}, duration || 0.3, null, YAHOO.util.Easing.easeIn, YAHOO.util.Motion);
this.setVisible(false);
return this;
},
/**
* Fade the element in and out the specified amount of times
* @param {Number} count (optional) How many times to pulse (Defaults to 3)
* @param {Float} duration (optional) How long the effect lasts (in seconds)
*/
pulsate : function(count, duration){
count = count || 3;
for(var i = 0; i < count; i++){
this.toggle(true, duration || .25);
this.toggle(true, duration || .25);
}
return this;
},
/**
* Fade the element as it is falling from its current position
* @param {Float} duration (optional) How long the effect lasts (in seconds)
*/
dropOut : function(duration){
this.animate({opacity: {to: 0}, points: {by: [0, this.getHeight()]}},
duration || .5, null, YAHOO.util.Easing.easeIn, YAHOO.util.Motion);
this.setVisible(false);
return this;
},
/**
* Hide the element in a way that it appears as if it is flying off the screen
* @param {String} anchor The part of the page that the element should appear to move to.
The short/long options are t/top, l/left, b/bottom, r/right, tl/top-left,
tr/top-right, bl/bottom-left or br/bottom-right.
* @param {Float} duration (optional) How long the effect lasts (in seconds)
* @param {Function} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeIn)
*/
moveOut : function(anchor, duration, easing){
var Y = YAHOO.util;
var vw = Y.Dom.getViewportWidth();
var vh = Y.Dom.getViewportHeight();
var cpoints = this.getCenterXY();
var centerX = cpoints[0];
var centerY = cpoints[1];
anchor = anchor.toLowerCase();
var p;
switch(anchor){
case "t":
case "top":
p = [centerX, -this.getHeight()];
break;
case "l":
case "left":
p = [-this.getWidth(), centerY];
break;
case "r":
case "right":
p = [vw+this.getWidth(), centerY];
break;
case "b":
case "bottom":
p = [centerX, vh+this.getHeight()];
break;
case "tl":
case "top-left":
p = [-this.getWidth(), -this.getHeight()];
break;
case "bl":
case "bottom-left":
p = [-this.getWidth(), vh+this.getHeight()];
break;
case "br":
case "bottom-right":
p = [vw+this.getWidth(), vh+this.getHeight()];
break;
case "tr":
case "top-right":
p = [vw+this.getWidth(), -this.getHeight()];
break;
}
this.moveTo(p[0], p[1], true, duration || .35, null, easing || Y.Easing.easeIn);
this.setVisible(false);
return this;
},
/**
* Show the element in a way that it appears as if it is flying onto the screen
* @param {String} anchor The part of the page that the element should appear to move from.
The short/long options are t/top, l/left, b/bottom, r/right, tl/top-left,
tr/top-right, bl/bottom-left or br/bottom-right.
* @param {Array} to (optional) Array of x and y position to move to like [x, y] (Defaults to center screen)
* @param {Float} duration (optional) How long the effect lasts (in seconds)
* @param {Function} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeOut)
*/
moveIn : function(anchor, to, duration, easing){
to = to || this.getCenterXY();
this.moveOut(anchor, .01);
this.setVisible(true);
this.setXY(to, true, duration || .35, null, easing || YAHOO.util.Easing.easeOut);
return this;
},
/**
* Show a ripple of exploding, attenuating borders to draw attention to an Element.
* @param {Number<i>} color (optional) The color of the border.
* @param {Number} count (optional) How many ripples.
* @param {Float} duration (optional) How long each ripple takes to expire
*/
frame : function(color, count, duration){
color = color || "red";
count = count || 3;
duration = duration || .5;
var frameFn = function(callback){
var box = this.getBox();
var animFn = function(){
var proxy = this.createProxy({
tag:"div",
style:{
visbility:"hidden",
position:"absolute",
"z-index":"35000", // yee haw
border:"0px solid " + color
}
});
var scale = proxy.isBorderBox() ? 2 : 1;
proxy.animate({
top:{from:box.y, to:box.y - 20},
left:{from:box.x, to:box.x - 20},
borderWidth:{from:0, to:10},
opacity:{from:1, to:0},
height:{from:box.height, to:(box.height + (20*scale))},
width:{from:box.width, to:(box.width + (20*scale))}
}, duration, function(){
proxy.remove();
});
if(--count > 0){
animFn.defer((duration/2)*1000, this);
}else{
if(typeof callback == "function"){
callback();
}
}
}
animFn.call(this);
}
this.addAsyncCall(frameFn, 0, null, this);
return this;
}
});
})();
Ext.Actor.Action = function(actor, method, args){
this.actor = actor;
this.method = method;
this.args = args;
}
Ext.Actor.Action.prototype = {
play : function(onComplete){
this.method.apply(this.actor || window, this.args);
onComplete();
}
};
Ext.Actor.AsyncAction = function(actor, method, args, onIndex){
Ext.Actor.AsyncAction.superclass.constructor.call(this, actor, method, args);
this.onIndex = onIndex;
this.originalCallback = this.args[onIndex];
}
Ext.extend(Ext.Actor.AsyncAction, Ext.Actor.Action, {
play : function(onComplete){
var callbackArg = this.originalCallback ?
this.originalCallback.createSequence(onComplete) : onComplete;
this.args[this.onIndex] = callbackArg;
this.method.apply(this.actor, this.args);
}
});
Ext.Actor.PauseAction = function(seconds){
this.seconds = seconds;
};
Ext.Actor.PauseAction.prototype = {
play : function(onComplete){
setTimeout(onComplete, this.seconds * 1000);
}
};

483
www/extras/extjs/source/legacy/Animator.js vendored Normal file
View file

@ -0,0 +1,483 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
/**
* @class Ext.Animator
* Provides support for syncing animations for multiple {@link Ext.Actor}s.<br><br>
* <br><br>This example can be seen in action <a href="http://www.jackslocum.com/yui/2006/08/19/a-splitbar-component-for-yahoo-ui/" target="_new">here</a>
* by clicking on "Click here and I will point it out" at the end of the first paragraph.<br>
* <pre><code>
var animator = new Ext.Animator();
var cursor = new Ext.Actor("cursor-img", animator);
var click = new Ext.Actor("click-img", animator);
var resize = new Ext.Actor("resize-img", animator);
// start capturing
animator.startCapture();
// these animations will be run in sequence
cursor.show();
cursor.moveTo(500,400);
cursor.moveTo(20, Ext.get("navbar").getY()+10, true, .75);
click.show();
click.alignTo(cursor, "tl", [-4, -4]);
// Add an async function call, pass callback to argument 1
animator.addAsyncCall(Blog.navbar.undockDelegate, 1);
// pause .5 seconds
animator.pause(.5);
// again, these animations will be run in sequence
click.hide(true, .7);
cursor.alignTo("splitter", "tr", [0, +100], true, 1);
resize.alignTo("splitter", "tr", [-12, +100]);
// start sync block: these animations will run at the same time
animator.beginSync();
cursor.hide();
resize.show();
animator.endSync();
// play the captured animation sequences, call myCallback when done
animator.play(myCallback);
* </code></pre>
* @requires Ext.Element
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @requires YAHOO.util.CustomEvent
* @requires YAHOO.util.Anim
* @requires YAHOO.util.ColorAnim
* @requires YAHOO.util.Motion
* @constructor
* @param {String/HTMLElement} el The dom element or element id
* @param {Ext.Animator} animator (optional) The Animator that will capture this Actor's actions
* @param {Boolean} selfCapture (optional) Whether this actor should capture its own actions to support self playback without an animator (defaults to false)
*/
Ext.Animator = function(/*Actors...*/){
this.actors = [];
this.playlist = new Ext.Animator.AnimSequence();
this.captureDelegate = this.capture.createDelegate(this);
this.playDelegate = this.play.createDelegate(this);
this.syncing = false;
this.stopping = false;
this.playing = false;
for(var i = 0; i < arguments.length; i++){
this.addActor(arguments[i]);
}
};
Ext.Animator.prototype = {
capture : function(actor, action){
if(this.syncing){
if(!this.syncMap[actor.id]){
this.syncMap[actor.id] = new Ext.Animator.AnimSequence();
}
this.syncMap[actor.id].add(action);
}else{
this.playlist.add(action);
}
},
/**
* Add an actor. The actor is also set to capturing = true.
* @param {Ext.Actor} actor
*/
addActor : function(actor){
actor.onCapture.addListener(this.captureDelegate);
this.actors.push(actor);
},
/**
* Start capturing actions on the added actors.
* @param {Boolean} clearPlaylist Whether to also create a new playlist
*/
startCapture : function(clearPlaylist){
for(var i = 0; i < this.actors.length; i++){
var a = this.actors[i];
if(!this.isCapturing(a)){
a.onCapture.addListener(this.captureDelegate);
}
a.capturing = true;
}
if(clearPlaylist){
this.playlist = new Ext.Animator.AnimSequence();
}
},
/**
* Checks whether this animator is listening to a specific actor.
* @param {Ext.Actor} actor
*/
isCapturing : function(actor){
return actor.onCapture.isListening(this.captureDelegate);
},
/**
* Stop capturing on all added actors.
*/
stopCapture : function(){
for(var i = 0; i < this.actors.length; i++){
var a = this.actors[i];
a.onCapture.removeListener(this.captureDelegate);
a.capturing = false;
}
},
/**
* Start a multi-actor sync block. By default all animations are run in sequence. While in the sync block
* each actor's own animations will still be sequenced, but all actors will animate at the same time.
*/
beginSync : function(){
this.syncing = true;
this.syncMap = {};
},
/**
* End the multi-actor sync block
*/
endSync : function(){
this.syncing = false;
var composite = new Ext.Animator.CompositeSequence();
for(key in this.syncMap){
if(typeof this.syncMap[key] != "function"){
composite.add(this.syncMap[key]);
}
}
this.playlist.add(composite);
this.syncMap = null;
},
/**
* Starts playback of the playlist, also stops any capturing. To start capturing again call {@link #startCapture}.
* @param {Function} oncomplete (optional) Callback to execute when playback has completed
*/
play : function(oncomplete){
if(this.playing) return; // can't play the same animation twice at once
this.stopCapture();
this.playlist.play(oncomplete);
},
/**
* Stop at the next available stopping point
*/
stop : function(){
this.playlist.stop();
},
/**
* Check if this animator is currently playing
*/
isPlaying : function(){
return this.playlist.isPlaying();
},
/**
* Clear the playlist
*/
clear : function(){
this.playlist = new Ext.Animator.AnimSequence();
},
/**
* Add a function call to the playlist.
* @param {Function} fcn The function to call
* @param {Array} args The arguments to call the function with
* @param {Object} scope (optional) The scope of the function
*/
addCall : function(fcn, args, scope){
this.playlist.add(new Ext.Actor.Action(scope, fcn, args || []));
},
/**
* Add an async function call to the playlist.
* @param {Function} fcn The function to call
* @param {Number} callbackIndex The index of the callback parameter on the passed function. A CALLBACK IS REQUIRED.
* @param {Array} args The arguments to call the function with
* @param {Object} scope (optional) The scope of the function
*/
addAsyncCall : function(fcn, callbackIndex, args, scope){
this.playlist.add(new Ext.Actor.AsyncAction(scope, fcn, args || [], callbackIndex));
},
/**
* Add a pause to the playlist (in seconds)
* @param {Number} seconds The number of seconds to pause.
*/
pause : function(seconds){
this.playlist.add(new Ext.Actor.PauseAction(seconds));
}
};
/**
* Static function to build a AnimatorComposite from a css selector (requires Ext.Element.selectorFunction be defined)
* @param {String/Array} selector The css selector or an array of nodes to animate
* @method @static
*/
Ext.Animator.select = function(selector){
var els;
if(typeof selector == "string"){
els = Ext.Element.selectorFunction(selector);
}else if(selector instanceof Array){
els = selector;
}else{
throw "Invalid selector";
}
return new Ext.AnimatorComposite(els);
};
//var getActors = Ext.Animator.select;
Ext.actors = Ext.Animator.select;
/**
* @class Ext.AnimatorComposite
* Composite class with synchronized animations. This is the class returned by getActors(selector) or Ext.Animator.select().
*/
Ext.AnimatorComposite = function(els){
this.animator = new Ext.Animator();
this.addElements(els);
this.syncAnims = true;
};
Ext.AnimatorComposite.prototype = {
isComposite: true,
/**
* Adds elements to this composite.
* @param {Array} els An array of elements to add
* @return {AnimatorComposite} this
*/
addElements : function(els){
if(!els) return this;
var anim = this.animator;
for(var i = 0, len = els.length; i < len; i++) {
anim.addActor(new Ext.Actor(els[i]));
}
anim.startCapture();
return this;
},
/**
* Operations called after sequence() will be performed one by one on each element in this composite.
* @return {AnimatorComposite} this
*/
sequence : function(){
this.syncAnims = false;
return this;
},
/**
* Operations called after sync() will be performed at the same time on each element in this composite.
* @return {AnimatorComposite} this
*/
sync : function(){
this.syncAnims = true;
return this;
},
invoke : function(fn, args){
var els = this.animator.actors;
if(this.syncAnims) this.animator.beginSync();
for(var i = 0, len = els.length; i < len; i++) {
Ext.Actor.prototype[fn].apply(els[i], args);
}
if(this.syncAnims) this.animator.endSync();
return this;
},
/**
* Play the actions queued in this composite.
* @param {Function} callback (optional) callback is called when all animations have compelted
* @return {AnimatorComposite} this
*/
play : function(callback){
this.animator.play(callback);
return this;
},
/**
* Clear all actions in the queue.
* @param {Function} callback (optional) callback is called when all animations have compelted
* @return {AnimatorComposite} this
*/
reset : function(callback){
this.animator.startCapture(true);
return this;
},
/**
* Add a pause
* @param {Number} seconds
* @return {AnimatorComposite} this
*/
pause : function(seconds){
this.animator.pause(seconds);
return this;
},
/**
* Get the Ext.Animator that controls the animations for this composite.
* @return {Ext.Animator}
*/
getAnimator : function(){
return this.animator;
},
/**
* Calls the passed function passing (el, this, index) for each element in this composite.
* @param {Function} fn The function to call
* @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
* @return {AnimatorComposite} this
*/
each : function(fn, scope){
var els = this.animator.actors;
if(this.syncAnims) this.animator.beginSync();
for(var i = 0, len = els.length; i < len; i++){
fn.call(scope || els[i], els[i], this, i);
}
if(this.syncAnims) this.animator.endSync();
return this;
},
/**
* Add a function call to the playlist.
* @param {Function} fcn The function to call
* @param {Array} args (optional) The arguments to call the function with
* @param {Object} scope (optional) The scope of the function
* @return {AnimatorComposite} this
*/
addCall : function(fcn, args, scope){
this.animator.addCall(fcn, args, scope);
return this;
},
/**
* Add an async function call to the playlist.
* @param {Function} fcn The function to call
* @param {Number} callbackIndex The index of the callback parameter on the passed function. <b>A CALLBACK IS REQUIRED</b>.
* @param {Array} args (optional) The arguments to call the function with
* @param {Object} scope (optional) The scope of the function
* @return {AnimatorComposite} this
*/
addAsyncCall : function(fcn, callbackIndex, args, scope){
this.animator.addAsyncCall(fcn, callbackIndex, args, scope);
return this;
}
};
for(var fnName in Ext.Actor.prototype){
if(typeof Ext.Actor.prototype[fnName] == "function"){
Ext.CompositeElement.createCall(Ext.AnimatorComposite.prototype, fnName);
}
}
Ext.Animator.AnimSequence = function(){
this.actions = [];
this.nextDelegate = this.next.createDelegate(this);
this.playDelegate = this.play.createDelegate(this);
this.oncomplete = null;
this.playing = false;
this.stopping = false;
this.actionIndex = -1;
};
Ext.Animator.AnimSequence.prototype = {
add : function(action){
this.actions.push(action);
},
next : function(){
if(this.stopping){
this.playing = false;
if(this.oncomplete){
this.oncomplete(this, false);
}
return;
}
var nextAction = this.actions[++this.actionIndex];
if(nextAction){
nextAction.play(this.nextDelegate);
}else{
this.playing = false;
if(this.oncomplete){
this.oncomplete(this, true);
}
}
},
play : function(oncomplete){
if(this.playing) return; // can't play the same sequence twice at once
this.oncomplete = oncomplete;
this.stopping = false;
this.playing = true;
this.actionIndex = -1;
this.next();
},
stop : function(){
this.stopping = true;
},
isPlaying : function(){
return this.playing;
},
clear : function(){
this.actions = [];
},
addCall : function(fcn, args, scope){
this.actions.push(new Ext.Actor.Action(scope, fcn, args || []));
},
addAsyncCall : function(fcn, callbackIndex, args, scope){
this.actions.push(new Ext.Actor.AsyncAction(scope, fcn, args || [], callbackIndex));
},
pause : function(seconds){
this.actions.push(new Ext.Actor.PauseAction(seconds));
}
};
Ext.Animator.CompositeSequence = function(){
this.sequences = [];
this.completed = 0;
this.trackDelegate = this.trackCompletion.createDelegate(this);
};
Ext.Animator.CompositeSequence.prototype = {
add : function(sequence){
this.sequences.push(sequence);
},
play : function(onComplete){
this.completed = 0;
if(this.sequences.length < 1){
if(onComplete)onComplete();
return;
}
this.onComplete = onComplete;
for(var i = 0; i < this.sequences.length; i++){
this.sequences[i].play(this.trackDelegate);
}
},
trackCompletion : function(){
++this.completed;
if(this.completed >= this.sequences.length && this.onComplete){
this.onComplete();
}
},
stop : function(){
for(var i = 0; i < this.sequences.length; i++){
this.sequences[i].stop();
}
},
isPlaying : function(){
for(var i = 0; i < this.sequences.length; i++){
if(this.sequences[i].isPlaying()){
return true;
}
}
return false;
}
};

223
www/extras/extjs/source/legacy/InlineEditor.js vendored Normal file
View file

@ -0,0 +1,223 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
Ext.InlineEditor = function(config, existingEl){
Ext.apply(this, config);
var dh = Ext.DomHelper;
this.wrap = dh.append(this.container || document.body, {
tag:"div",
cls:"yinline-editor-wrap"
}, true);
this.textSizeEl = dh.append(document.body, {
tag: "div",
cls: "yinline-editor-sizer " + (this.cls || "")
});
if(Ext.isSafari){ // extra padding for safari's textboxes
this.textSizeEl.style.padding = "4px";
this.textSizeEl.style["padding-right"] = "10px";
}
if(!Ext.isGecko){ // no one else needs FireFox cursor fix
this.wrap.setStyle("overflow", "hidden");
}
if(existingEl){
this.el = Ext.get(existingEl);
}
if(!this.el){
this.id = this.id || Ext.id();
if(!this.multiline){
this.el = this.wrap.createChild({
tag: "input",
name: this.name || this.id,
id: this.id,
type: this.type || "text",
autocomplete: "off",
value: this.value || "",
cls: "yinline-editor " + (this.cls || ""),
maxlength: this.maxLength || ""
});
}else{
this.el = this.wrap.createChild({
tag: "textarea",
name: this.name || this.id,
id: this.id,
html: this.value || "",
cls: "yinline-editor yinline-editor-multiline " + (this.cls || ""),
wrap: "none"
});
}
}else{
this.wrap.dom.appendChild(this.el.dom);
}
this.el.addKeyMap([{
key: [10, 13],
fn: this.onEnter,
scope: this
},{
key: 27,
fn: this.onEsc,
scope: this
}]);
this.el.on("keyup", this.onKeyUp, this);
this.el.on("blur", this.onBlur, this);
this.el.swallowEvent("keydown");
this.events = {
"startedit" : true,
"beforecomplete" : true,
"complete" : true
};
this.editing = false;
this.autoSizeTask = new Ext.util.DelayedTask(this.autoSize, this);
};
Ext.extend(Ext.InlineEditor, Ext.util.Observable, {
onEnter : function(k, e){
if(this.multiline && (e.ctrlKey || e.shiftKey)){
return;
}
this.completeEdit();
e.stopEvent();
},
onEsc : function(){
if(this.ignoreNoChange){
this.revert(true);
}else{
this.revert(false);
this.completeEdit();
}
},
onBlur : function(){
if(this.editing && this.completeOnBlur !== false){
this.completeEdit();
}
},
startEdit : function(el, value){
this.boundEl = Ext.getDom(el);
if(this.hideEl !== false){
this.boundEl.style.visibility = "hidden";
}
var v = value || this.boundEl.innerHTML;
this.startValue = v;
this.setValue(v);
this.moveTo(Ext.lib.Dom.getXY(this.boundEl));
this.editing = true;
if(Ext.QuickTips){
Ext.QuickTips.disable();
}
this.show.defer(10, this);
},
onKeyUp : function(e){
var k = e.getKey();
if(this.editing && (k < 33 || k > 40) && k != 27){
this.autoSizeTask.delay(50);
}
},
completeEdit : function(){
var v = this.getValue();
if(this.revertBlank !== false && v.length < 1){
v = this.startValue;
this.revert();
}
if(v == this.startValue && this.ignoreNoChange){
this.hide();
}
if(this.fireEvent("beforecomplete", this, v, this.startValue) !== false){
if(this.updateEl !== false && this.boundEl){
this.boundEl.innerHTML = v;
}
this.hide();
this.fireEvent("complete", this, v, this.startValue);
}
},
revert : function(hide){
this.setValue(this.startValue);
if(hide){
this.hide();
}
},
show : function(){
this.autoSize();
this.wrap.show();
this.el.focus();
if(this.selectOnEdit !== false){
this.el.dom.select();
}
},
hide : function(){
this.editing = false;
this.wrap.hide();
this.wrap.setLeftTop(-10000,-10000);
this.el.blur();
if(this.hideEl !== false){
this.boundEl.style.visibility = "visible";
}
if(Ext.QuickTips){
Ext.QuickTips.enable();
}
},
setValue : function(v){
this.el.dom.value = v;
},
getValue : function(){
return this.el.dom.value;
},
autoSize : function(){
var el = this.el;
var wrap = this.wrap;
var v = el.dom.value;
var ts = this.textSizeEl;
if(v.length < 1){
ts.innerHTML = "&#160;&#160;";
}else{
v = v.replace(/[<> ]/g, "&#160;");
if(this.multiline){
v = v.replace(/\n/g, "<br />&#160;");
}
ts.innerHTML = v;
}
var ww = wrap.dom.offsetWidth;
var wh = wrap.dom.offsetHeight;
var w = ts.offsetWidth;
var h = ts.offsetHeight;
// lots of magic numbers in this block - wtf?
// the logic is to prevent the scrollbars from flashing
// in firefox. Updates the correct element first
// so there's never overflow.
if(ww > w+4){
el.setWidth(w+4);
wrap.setWidth(w+8);
}else{
wrap.setWidth(w+8);
el.setWidth(w+4);
}
if(wh > h+4){
el.setHeight(h);
wrap.setHeight(h+4);
}else{
wrap.setHeight(h+4);
el.setHeight(h);
}
},
moveTo : function(xy){
this.wrap.setXY(xy);
}
});

168
www/extras/extjs/source/legacy/compat.js vendored Normal file
View file

@ -0,0 +1,168 @@
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
// backwards compat
YAHOO.ext = Ext;
YAHOO.extendX = Ext.extend;
YAHOO.namespaceX = Ext.namespace;
Ext.Strict = Ext.isStrict;
Ext.util.Config = {};
Ext.util.Config.apply = Ext.apply;
// this is nasty
Ext.util.Browser = Ext;
// removed
YAHOO.override = Ext.override;
/*
* Enable custom handler signature and event cancelling. Using fireDirect() instead of fire() calls the subscribed event handlers
* with the exact parameters passed to fireDirect, instead of the usual (eventType, args[], obj). IMO this is more intuitive
* and promotes cleaner code. Also, if an event handler returns false, it is returned by fireDirect and no other handlers will be called.<br>
* Example:<br><br><pre><code>
* if(beforeUpdateEvent.fireDirect(myArg, myArg2) !== false){
* // do update
* }</code></pre>
*/
YAHOO.util.CustomEvent.prototype.fireDirect = function(){
var len=this.subscribers.length;
for (var i=0; i<len; ++i) {
var s = this.subscribers[i];
if(s){
var scope = (s.override) ? s.obj : this.scope;
if(s.fn.apply(scope, arguments) === false){
return false;
}
}
}
return true;
};
Ext.apply(Ext.util.Observable.prototype, {
delayedListener : function(eventName, fn, scope, delay){
return this.addListener(eventName, fn, {scope: scope, delay: delay || 10});
},
bufferedListener : function(eventName, fn, scope, millis){
return this.addListener(eventName, fn, {scope: scope, buffer: millis || 250});
}
});
Ext.apply(Ext.Element.prototype, {
// replaced with more powerful selector functions
/**
* Gets an array of child Ext.Element objects by tag name
* @param {String} tagName
* @return {Array} The children
*/
getChildrenByTagName : function(tagName){
var children = this.dom.getElementsByTagName(tagName);
var len = children.length;
var ce = new Array(len);
for(var i = 0; i < len; ++i){
ce[i] = El.get(children[i], true);
}
return ce;
},
/**
* Gets an array of child Ext.Element objects by class name and optional tagName
* @param {String} className
* @param {String} tagName (optional)
* @return {Array} The children
*/
getChildrenByClassName : function(className, tagName){
var children = D.getElementsByClassName(className, tagName, this.dom);
var len = children.length;
var ce = new Array(len);
for(var i = 0; i < len; ++i){
ce[i] = El.get(children[i], true);
}
return ce;
},
// these 2 where replaced by "position()"
/**
* Set the element as absolute positioned with the specified z-index
* @param {Number} zIndex (optional)
* @return {Ext.Element} this
*/
setAbsolutePositioned : function(zIndex){
this.setStyle("position", "absolute");
if(zIndex){
this.setStyle("z-index", zIndex);
}
return this;
},
/**
* Set the element as relative positioned with the specified z-index
* @param {Number} zIndex (optional)
* @return {Ext.Element} this
*/
setRelativePositioned : function(zIndex){
this.setStyle("position", "relative");
if(zIndex){
this.setStyle("z-index", zIndex);
}
return this;
},
// replaced by new Event system
bufferedListener : function(eventName, fn, scope, millis){
return this.on(eventName, fn, scope || this, {buffer: millis || 250});
},
addHandler : function(eventName, stopPropagation, handler, scope, override){
return this.on(eventName, fn, scope || this, {stopPropagation: stopPropagation, preventDefault: true});
},
addManagedListener : function(eventName, fn, scope, override){
return Ext.EventManager.on(this.dom, eventName, fn, scope || this);
}
});
// replaced by more advanced getTarget()
Ext.EventObject.findTarget = function(className, tagName){
if(tagName) tagName = tagName.toLowerCase();
if(this.browserEvent){
function isMatch(el){
if(!el){
return false;
}
if(className && !D.hasClass(el, className)){
return false;
}
return !(tagName && el.tagName.toLowerCase() != tagName);
};
var t = this.getTarget();
if(!t || isMatch(t)){
return t;
}
var p = t.parentNode;
var b = document.body;
while(p && p != b){
if(isMatch(p)){
return p;
}
p = p.parentNode;
}
}
return null;
};