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

added YUI and YUI-ext

Browse source 
fixed the resizable text area with IE problem
fixed the ad space with IE problem
merged the 7.2.0 and 7.1.4 change logs
This commit is contained in:
JT Smith 2006-11-07 23:15:57 +00:00
parent 6bf329d68d
commit 4f68a0933c
1026 changed files with 331404 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

340
www/extras/yui-ext/source/widgets/DatePicker.js vendored Normal file
View file

@ -0,0 +1,340 @@
/*
* YUI Extensions
* Copyright(c) 2006, Jack Slocum.
*
* This code is licensed under BSD license.
* http://www.opensource.org/licenses/bsd-license.php
*/
YAHOO.ext.DatePicker = function(id, parentElement){
this.id = id;
this.selectedDate = new Date();
this.visibleDate = new Date();
this.element = null;
this.shadow = null;
this.callback = null;
this.buildControl(parentElement || document.body);
this.mouseDownHandler = YAHOO.ext.EventManager.wrap(this.handleMouseDown, this, true);
this.keyDownHandler = YAHOO.ext.EventManager.wrap(this.handleKeyDown, this, true);
this.wheelHandler = YAHOO.ext.EventManager.wrap(this.handleMouseWheel, this, true);
};
YAHOO.ext.DatePicker.prototype = {
show : function(x, y, value, callback){
this.hide();
this.selectedDate = value;
this.visibleDate = value;
this.callback = callback;
this.refresh();
this.element.show();
this.element.moveTo(x, y);
this.shadow.show();
this.shadow.setRegion(this.element.getRegion());
this.element.dom.tabIndex = 1;
this.element.focus();
YAHOO.util.Event.on(document, "mousedown", this.mouseDownHandler);
YAHOO.util.Event.on(document, "keydown", this.keyDownHandler);
YAHOO.util.Event.on(document, "mousewheel", this.wheelHandler);
YAHOO.util.Event.on(document, "DOMMouseScroll", this.wheelHandler);
},
hide : function(){
this.shadow.hide();
this.element.hide();
YAHOO.util.Event.removeListener(document, "mousedown", this.mouseDownHandler);
YAHOO.util.Event.removeListener(document, "keydown", this.keyDownHandler);
YAHOO.util.Event.removeListener(document, "mousewheel", this.wheelHandler);
YAHOO.util.Event.removeListener(document, "DOMMouseScroll", this.wheelHandler);
},
setSelectedDate : function(date){
this.selectedDate = date;
},
getSelectedDate : function(){
return this.selectedDate;
},
showPrevMonth : function(){
this.visibleDate = this.getPrevMonth(this.visibleDate);
this.refresh();
},
showNextMonth : function(){
this.visibleDate = this.getNextMonth(this.visibleDate);
this.refresh();
},
showPrevYear : function(){
var d = this.visibleDate;
this.visibleDate = new Date(d.getFullYear()-1, d.getMonth(), d.getDate());
this.refresh();
},
showNextYear : function(){
var d = this.visibleDate;
this.visibleDate = new Date(d.getFullYear()+1, d.getMonth(), d.getDate());
this.refresh();
},
handleMouseDown : function(e){
var target = e.getTarget();
if(target != this.element.dom && !YAHOO.util.Dom.isAncestor(this.element.dom, target)){
this.hide();
}
},
handleKeyDown : function(e){
switch(e.browserEvent.keyCode){
case e.LEFT:
this.showPrevMonth();
e.stopEvent();
break;
case e.RIGHT:
this.showNextMonth();
e.stopEvent();
break;
case e.DOWN:
this.showPrevYear();
e.stopEvent();
break;
case e.UP:
this.showNextYear();
e.stopEvent();
break;
}
},
handleMouseWheel : function(e){
var delta = e.getWheelDelta();
if(delta > 0){
this.showPrevMonth();
e.stopEvent();
} else if(delta < 0){
this.showNextMonth();
e.stopEvent();
}
},
handleClick : function(e){
var d = this.visibleDate;
var t = e.getTarget();
if(t && t.className){
switch(t.className){
case 'active':
this.handleSelection(new Date(d.getFullYear(), d.getMonth(), parseInt(t.innerHTML)));
break;
case 'prevday':
var p = this.getPrevMonth(d);
this.handleSelection(new Date(p.getFullYear(), p.getMonth(), parseInt(t.innerHTML)));
break;
case 'nextday':
var n = this.getNextMonth(d);
this.handleSelection(new Date(n.getFullYear(), n.getMonth(), parseInt(t.innerHTML)));
break;
case 'ypopcal-today':
this.handleSelection(new Date());
break;
case 'next-month':
this.showNextMonth();
break;
case 'prev-month':
this.showPrevMonth();
break;
}
}
e.stopEvent();
},
selectToday : function(){
this.handleSelection(new Date());
},
handleSelection: function(date){
this.selectedDate = date;
this.callback(date);
this.hide();
},
getPrevMonth : function(d){
var m = d.getMonth();var y = d.getFullYear();
return (m == 0 ? new Date(--y, 11, 1) : new Date(y, --m, 1));
},
getNextMonth : function(d){
var m = d.getMonth();var y = d.getFullYear();
return (m == 11 ? new Date(++y, 0, 1) : new Date(y, ++m, 1));
},
getDaysInMonth : function(m, y){
return (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) ? 31 : (m == 4 || m == 6 || m == 9 || m == 11) ? 30 : this.isLeapYear(y) ? 29 : 28;
},
isLeapYear : function(y){
return (((y % 4) == 0) && ((y % 100) != 0) || ((y % 400) == 0));
},
clearTime : function(date){
if(date){
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
}
return date;
},
refresh : function(){
var d = this.visibleDate;
this.buildInnerCal(d);
this.calHead.update(this.monthNames[d.getMonth()] + ' ' + d.getFullYear());
if(this.element.isVisible()){
this.shadow.setRegion(this.element.getRegion());
}
}
};
/**
* This code is not pretty, but it is fast!
* @ignore
*/
YAHOO.ext.DatePicker.prototype.buildControl = function(parentElement){
var c = document.createElement('div');
c.style.position = 'absolute';
c.style.visibility = 'hidden';
document.body.appendChild(c);
var html = '<iframe id="'+this.id+'_shdw" frameborder="0" style="position:absolute; z-index:2000; display:none; top:0px; left:0px;" class="ypopcal-shadow"></iframe>' +
'<div hidefocus="true" class="ypopcal" id="'+this.id+'" style="-moz-outline:none; position:absolute; z-index:2001; display:none; top:0px; left:0px;">' +
'<table class="ypopcal-head" border=0 cellpadding=0 cellspacing=0><tbody><tr><td class="ypopcal-arrow"><div class="prev-month">&nbsp;</div></td><td class="ypopcal-month">&nbsp;</td><td class="ypopcal-arrow"><div class="next-month">&nbsp;</div></td></tr></tbody></table>' +
'<center><div class="ypopcal-inner">';
html += "<table border=0 cellpadding=2 cellspacing=0 class=\"ypopcal-table\"><thead><tr class=\"ypopcal-daynames\">";
var names = this.dayNames;
for(var i = 0; i < names.length; i++){
html += '<td>' + names[i].substr(0, 1) + '</td>';
}
html+= "</tr></thead><tbody><tr>";
for(var i = 0; i < 42; i++) {
if(i % 7 == 0 && i != 0){
html += '</tr><tr>';
}
html += "<td>&nbsp;</td>";
}
html += "</tr></tbody></table>";
html += '</div><button class="ypopcal-today" style="margin-top:2px;">'+this.todayText+'</button></center></div>';
c.innerHTML = html;
this.shadow = getEl(c.childNodes[0], true);
this.shadow.enableDisplayMode();
this.element = getEl(c.childNodes[1], true);
this.element.enableDisplayMode();
document.body.appendChild(this.shadow.dom);
document.body.appendChild(this.element.dom);
document.body.removeChild(c);
this.element.on("selectstart", function(){return false;});
var tbody = this.element.dom.getElementsByTagName('tbody')[1];
this.cells = tbody.getElementsByTagName('td');
this.calHead = this.element.getChildrenByClassName('ypopcal-month', 'td')[0];
this.element.mon('mousedown', this.handleClick, this, true);
};
YAHOO.ext.DatePicker.prototype.buildInnerCal = function(dateVal){
var days = this.getDaysInMonth(dateVal.getMonth() + 1, dateVal.getFullYear());
var firstOfMonth = new Date(dateVal.getFullYear(), dateVal.getMonth(), 1);
var startingPos = firstOfMonth.getDay();
if(startingPos == 0) startingPos = 7;
var pm = this.getPrevMonth(dateVal);
var prevStart = this.getDaysInMonth(pm.getMonth()+1, pm.getFullYear())-startingPos;
var cells = this.cells;
days += startingPos;
// convert everything to numbers so it's fast
var day = 86400000;
var date = this.clearTime(new Date(pm.getFullYear(), pm.getMonth(), prevStart));
var today = this.clearTime(new Date()).getTime();
var sel = this.selectedDate ? this.clearTime(this.selectedDate).getTime() : today + 1; //today +1 will never match anything
var min = this.minDate ? this.clearTime(this.minDate).getTime() : Number.NEGATIVE_INFINITY;
var max = this.maxDate ? this.clearTime(this.maxDate).getTime() : Number.POSITIVE_INFINITY;
var ddMatch = this.disabledDatesRE;
var ddText = this.disabledDatesText;
var ddays = this.disabledDays;
var ddaysText = this.disabledDaysText;
var format = this.format;
var setCellClass = function(cal, cell, d){
cell.title = '';
var t = d.getTime();
if(t == today){
cell.className += ' today';
cell.title = cal.todayText;
}
if(t == sel){
cell.className += ' selected';
}
// disabling
if(t < min) {
cell.className = ' ypopcal-disabled';
cell.title = cal.minText;
return;
}
if(t > max) {
cell.className = ' ypopcal-disabled';
cell.title = cal.maxText;
return;
}
if(ddays){
var day = d.getDay();
for(var i = 0; i < ddays.length; i++) {
if(day === ddays[i]){
cell.title = ddaysText;
cell.className = ' ypopcal-disabled';
return;
}
}
}
if(ddMatch && format){
var fvalue = d.format(format);
if(ddMatch.test(fvalue)){
cell.title = ddText.replace('%0', fvalue);
cell.className = ' ypopcal-disabled';
return;
}
}
};
var i = 0;
for(; i < startingPos; i++) {
cells[i].innerHTML = (++prevStart);
date.setDate(date.getDate()+1);
cells[i].className = 'prevday';
setCellClass(this, cells[i], date);
}
for(; i < days; i++){
intDay = i - startingPos + 1;
cells[i].innerHTML = (intDay);
date.setDate(date.getDate()+1);
cells[i].className = 'active';
setCellClass(this, cells[i], date);
}
var extraDays = 0;
for(; i < 42; i++) {
cells[i].innerHTML = (++extraDays);
date.setDate(date.getDate()+1);
cells[i].className = 'nextday';
setCellClass(this, cells[i], date);
}
};
YAHOO.ext.DatePicker.prototype.todayText = "Today";
YAHOO.ext.DatePicker.prototype.minDate = null;
YAHOO.ext.DatePicker.prototype.maxDate = null;
YAHOO.ext.DatePicker.prototype.minText = "This date is before the minimum date";
YAHOO.ext.DatePicker.prototype.maxText = "This date is after the maximum date";
YAHOO.ext.DatePicker.prototype.format = 'm/d/y';
YAHOO.ext.DatePicker.prototype.disabledDays = null;
YAHOO.ext.DatePicker.prototype.disabledDaysText = '';
YAHOO.ext.DatePicker.prototype.disabledDatesRE = null;
YAHOO.ext.DatePicker.prototype.disabledDatesText = '';
YAHOO.ext.DatePicker.prototype.monthNames = Date.monthNames;
YAHOO.ext.DatePicker.prototype.dayNames = Date.dayNames;

222
www/extras/yui-ext/source/widgets/Resizable.js vendored Normal file
View file

@ -0,0 +1,222 @@
/*
* YUI Extensions
* Copyright(c) 2006, Jack Slocum.
*
* This code is licensed under BSD license.
* http://www.opensource.org/licenses/bsd-license.php
*/
/**
* @class
* Makes an element resizable.
*/
YAHOO.ext.Resizable = function(el, config){
// in case global fcn not defined
var getEl = YAHOO.ext.Element.get;
this.el = getEl(el, true);
this.el.autoBoxAdjust = true;
// if the element isn't positioned, make it relative
if(this.el.getStyle('position') != 'absolute'){
this.el.setStyle('position', 'relative');
}
// create the handles and proxy
var dh = YAHOO.ext.DomHelper;
var tpl = dh.createTemplate({tag: 'div', cls: 'yresizable-handle yresizable-handle-{0}', html: '&nbsp;'});
this.east = getEl(tpl.append(this.el.dom, ['east']), true);
this.south = getEl(tpl.append(this.el.dom, ['south']), true);
if(config && config.multiDirectional){
this.west = getEl(tpl.append(this.el.dom, ['west']), true);
this.north = getEl(tpl.append(this.el.dom, ['north']), true);
}
this.corner = getEl(tpl.append(this.el.dom, ['southeast']), true);
this.proxy = getEl(dh.insertBefore(document.body.firstChild, {tag: 'div', cls: 'yresizable-proxy', id: this.el.id + '-rzproxy'}), true);
this.proxy.autoBoxAdjust = true;
// wrapped event handlers to add and remove when sizing
this.moveHandler = YAHOO.ext.EventManager.wrap(this.onMouseMove, this, true);
this.upHandler = YAHOO.ext.EventManager.wrap(this.onMouseUp, this, true);
this.selHandler = YAHOO.ext.EventManager.wrap(this.cancelSelection, this, true);
// public events
this.events = {
'beforeresize' : new YAHOO.util.CustomEvent(),
'resize' : new YAHOO.util.CustomEvent()
};
/** @private */
this.dir = null;
// properties
this.resizeChild = false;
this.adjustments = [0, 0];
this.minWidth = 5;
this.minHeight = 5;
this.maxWidth = 10000;
this.maxHeight = 10000;
this.enabled = true;
this.animate = false;
this.duration = .35;
this.dynamic = false;
this.multiDirectional = false;
this.disableTrackOver = false;
this.easing = YAHOO.util.Easing ? YAHOO.util.Easing.easeOutStrong : null;
YAHOO.ext.util.Config.apply(this, config);
// listen for mouse down on the handles
var mdown = this.onMouseDown.createDelegate(this);
this.east.mon('mousedown', mdown);
this.south.mon('mousedown', mdown);
if(this.multiDirectional){
this.west.mon('mousedown', mdown);
this.north.mon('mousedown', mdown);
}
this.corner.mon('mousedown', mdown);
if(!this.disableTrackOver){
// track mouse overs
var mover = this.onMouseOver.createDelegate(this);
// track mouse outs
var mout = this.onMouseOut.createDelegate(this);
this.east.mon('mouseover', mover);
this.east.mon('mouseout', mout);
this.south.mon('mouseover', mover);
this.south.mon('mouseout', mout);
if(this.multiDirectional){
this.west.mon('mouseover', mover);
this.west.mon('mouseout', mout);
this.north.mon('mouseover', mover);
this.north.mon('mouseout', mout);
}
this.corner.mon('mouseover', mover);
this.corner.mon('mouseout', mout);
}
this.updateChildSize();
};
YAHOO.extendX(YAHOO.ext.Resizable, YAHOO.ext.util.Observable, {
resizeTo : function(width, height){
this.el.setSize(width, height);
this.fireEvent('resize', this, width, height, null);
},
cancelSelection : function(e){
e.preventDefault();
},
startSizing : function(e){
this.fireEvent('beforeresize', this, e);
if(this.enabled){ // 2nd enabled check in case disabled before beforeresize handler
e.preventDefault();
this.startBox = this.el.getBox();
this.startPoint = e.getXY();
this.offsets = [(this.startBox.x + this.startBox.width) - this.startPoint[0],
(this.startBox.y + this.startBox.height) - this.startPoint[1]];
this.proxy.setBox(this.startBox);
if(!this.dynamic){
this.proxy.show();
}
YAHOO.util.Event.on(document.body, 'selectstart', this.selHandler);
YAHOO.util.Event.on(document.body, 'mousemove', this.moveHandler);
YAHOO.util.Event.on(document.body, 'mouseup', this.upHandler);
}
},
onMouseDown : function(e){
if(this.enabled){
var t = e.getTarget();
if(t == this.corner.dom){
this.dir = 'both';
this.proxy.setStyle('cursor', this.corner.getStyle('cursor'));
this.startSizing(e);
}else if(t == this.east.dom){
this.dir = 'east';
this.proxy.setStyle('cursor', this.east.getStyle('cursor'));
this.startSizing(e);
}else if(t == this.south.dom){
this.dir = 'south';
this.proxy.setStyle('cursor', this.south.getStyle('cursor'));
this.startSizing(e);
}else if(t == this.west.dom){
this.dir = 'west';
this.proxy.setStyle('cursor', this.west.getStyle('cursor'));
this.startSizing(e);
}else if(t == this.north.dom){
this.dir = 'north';
this.proxy.setStyle('cursor', this.north.getStyle('cursor'));
this.startSizing(e);
}
}
},
onMouseUp : function(e){
YAHOO.util.Event.removeListener(document.body, 'selectstart', this.selHandler);
YAHOO.util.Event.removeListener(document.body, 'mousemove', this.moveHandler);
YAHOO.util.Event.removeListener(document.body, 'mouseup', this.upHandler);
var size = this.resizeElement();
this.fireEvent('resize', this, size.width, size.height, e);
},
updateChildSize : function(){
if(this.resizeChild && this.el.dom.firstChild && this.el.dom.offsetWidth){
var el = this.el;
var adj = this.adjustments;
setTimeout(function(){
var c = YAHOO.ext.Element.get(el.dom.firstChild, true);
var b = el.getBox(true);
c.setSize(b.width+adj[0], b.height+adj[1]);
}, 1);
}
},
resizeElement : function(){
var box = this.proxy.getBox();
this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
this.updateChildSize();
this.proxy.hide();
return box;
},
onMouseMove : function(e){
if(this.enabled){
var xy = e.getXY();
if(this.dir == 'both' || this.dir == 'east' || this.dir == 'south'){
var w = Math.min(Math.max(this.minWidth, xy[0]-this.startBox.x+this.offsets[0]),this.maxWidth);
var h = Math.min(Math.max(this.minHeight, xy[1]-this.startBox.y+this.offsets[1]), this.maxHeight);
if(this.dir == 'both'){
this.proxy.setSize(w, h);
}else if(this.dir == 'east'){
this.proxy.setWidth(w);
}else if(this.dir == 'south'){
this.proxy.setHeight(h);
}
}else{
var x = this.startBox.x + (xy[0]-this.startPoint[0]);
var y = this.startBox.y + (xy[1]-this.startPoint[1]);
var w = this.startBox.width+(this.startBox.x-x);
var h = this.startBox.height+(this.startBox.y-y);
if(this.dir == 'west' && w <= this.maxWidth && w >= this.minWidth){
this.proxy.setX(x);
this.proxy.setWidth(w);
}else if(this.dir == 'north' && h <= this.maxHeight && h >= this.minHeight){
this.proxy.setY(y);
this.proxy.setHeight(h);
}
}
if(this.dynamic){
this.resizeElement();
}
}
},
onMouseOver : function(){
if(this.enabled) this.el.addClass('yresizable-over');
},
onMouseOut : function(){
this.el.removeClass('yresizable-over');
}
});

437
www/extras/yui-ext/source/widgets/SplitBar.js vendored Normal file
View file

@ -0,0 +1,437 @@
/*
* YUI Extensions
* Copyright(c) 2006, Jack Slocum.
*
* This code is licensed under BSD license.
* http://www.opensource.org/licenses/bsd-license.php
*/
/*
* splitbar.js, version .7
* Copyright(c) 2006, Jack Slocum.
* Code licensed under the BSD License
*/
YAHOO.util.DragDropMgr.clickTimeThresh = 350;
/**
* @class Creates draggable splitter bar functionality from two elements.
* <br><br>
* Usage:
* <pre><code>
* var split = new YAHOO.ext.SplitBar('elementToDrag', 'elementToSize',
* YAHOO.ext.SplitBar.HORIZONTAL, YAHOO.ext.SplitBar.LEFT);
* split.setAdapter(new YAHOO.ext.SplitBar.AbsoluteLayoutAdapter("container"));
* split.minSize = 100;
* split.maxSize = 600;
* split.animate = true;
* split.onMoved.subscribe(splitterMoved);
* </code></pre>
* @requires YAHOO.ext.Element
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @requires YAHOO.util.CustomEvent
* @requires YAHOO.util.DDProxy
* @requires YAHOO.util.Anim (optional) to support animation
* @requires YAHOO.util.Easing (optional) to support animation
* @constructor
* @param {String/HTMLElement/Element} dragElement The element to be dragged and act as the SplitBar.
* @param {String/HTMLElement/Element} resizingElement The element to be resized based on where the SplitBar element is dragged
* @param {Number} orientation (optional) Either YAHOO.ext.SplitBar.HORIZONTAL or YAHOO.ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
* @param {Number} placement (optional) Either YAHOO.ext.SplitBar.LEFT or YAHOO.ext.SplitBar.RIGHT for horizontal or
YAHOO.ext.SplitBar.TOP or YAHOO.ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the intial position
position of the SplitBar).
*/
YAHOO.ext.SplitBar = function(dragElement, resizingElement, orientation, placement){
/** @private */
this.el = YAHOO.ext.Element.get(dragElement, true);
/** @private */
this.resizingEl = YAHOO.ext.Element.get(resizingElement, true);
/**
* @private
* The orientation of the split. Either YAHOO.ext.SplitBar.HORIZONTAL or YAHOO.ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
* Note: If this is changed after creating the SplitBar, the placement property must be manually updated
* @type Number
*/
this.orientation = orientation || YAHOO.ext.SplitBar.HORIZONTAL;
/**
* The minimum size of the resizing element. (Defaults to 0)
* @type Number
*/
this.minSize = 0;
/**
* The maximum size of the resizing element. (Defaults to 2000)
* @type Number
*/
this.maxSize = 2000;
/**
* Fires when the SplitBar is moved. Uses fireDirect with signature: (this, newSize)
* @type CustomEvent
*/
this.onMoved = new YAHOO.util.CustomEvent("SplitBarMoved", this);
/**
* Whether to animate the transition to the new size
* @type Boolean
*/
this.animate = false;
/**
* Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
* @type Boolean
*/
this.useShim = false;
/** @private */
this.shim = null;
/** @private */
this.proxy = YAHOO.ext.SplitBar.createProxy(this.orientation);
/** @private */
this.dd = new YAHOO.util.DDProxy(this.el.dom.id, "SplitBars", {dragElId : this.proxy.id});
/** @private */
this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
/** @private */
this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
/** @private */
this.dragSpecs = {};
/**
* @private The adapter to use to positon and resize elements
*/
this.adapter = new YAHOO.ext.SplitBar.BasicLayoutAdapter();
this.adapter.init(this);
if(this.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
/** @private */
this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? YAHOO.ext.SplitBar.LEFT : YAHOO.ext.SplitBar.RIGHT);
this.el.setStyle('cursor', 'e-resize');
}else{
/** @private */
this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? YAHOO.ext.SplitBar.TOP : YAHOO.ext.SplitBar.BOTTOM);
this.el.setStyle('cursor', 'n-resize');
}
this.events = {
'resize' : this.onMoved,
'moved' : this.onMoved
}
}
YAHOO.ext.SplitBar.prototype = {
fireEvent : YAHOO.ext.util.Observable.prototype.fireEvent,
addListener : YAHOO.ext.util.Observable.prototype.addListener,
delayedListener : YAHOO.ext.util.Observable.prototype.delayedListener,
removeListener : YAHOO.ext.util.Observable.prototype.removeListener,
/**
* @private Called before drag operation begins by the DDProxy
*/
onStartProxyDrag : function(x, y){
if(this.useShim){
if(!this.shim){
this.shim = YAHOO.ext.SplitBar.createShim();
}
this.shim.setVisible(true);
}
YAHOO.util.Dom.setStyle(this.proxy, 'display', 'block');
var size = this.adapter.getElementSize(this);
var c1 = size - this.minSize;
var c2 = Math.max(this.maxSize - size, 0);
if(this.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
this.dd.resetConstraints();
this.dd.setXConstraint(
this.placement == YAHOO.ext.SplitBar.LEFT ? c1 : c2,
this.placement == YAHOO.ext.SplitBar.LEFT ? c2 : c1
);
this.dd.setYConstraint(0, 0);
}else{
this.dd.resetConstraints();
this.dd.setXConstraint(0, 0);
this.dd.setYConstraint(
this.placement == YAHOO.ext.SplitBar.TOP ? c1 : c2,
this.placement == YAHOO.ext.SplitBar.TOP ? c2 : c1
);
}
this.dragSpecs.startSize = size;
this.dragSpecs.startPoint = [x, y];
YAHOO.util.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
},
/**
* @private Called after the drag operation by the DDProxy
*/
onEndProxyDrag : function(e){
YAHOO.util.Dom.setStyle(this.proxy, 'display', 'none');
var endPoint = YAHOO.util.Event.getXY(e);
if(this.useShim){
this.shim.setVisible(false);
}
var newSize;
if(this.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
newSize = this.dragSpecs.startSize +
(this.placement == YAHOO.ext.SplitBar.LEFT ?
endPoint[0] - this.dragSpecs.startPoint[0] :
this.dragSpecs.startPoint[0] - endPoint[0]
);
}else{
newSize = this.dragSpecs.startSize +
(this.placement == YAHOO.ext.SplitBar.TOP ?
endPoint[1] - this.dragSpecs.startPoint[1] :
this.dragSpecs.startPoint[1] - endPoint[1]
);
}
newSize = Math.min(Math.max(newSize, this.minSize), this.maxSize);
if(newSize != this.dragSpecs.startSize){
this.adapter.setElementSize(this, newSize);
this.onMoved.fireDirect(this, newSize);
}
},
/**
* Get the adapter this SplitBar uses
* @return The adapter object
*/
getAdapter : function(){
return this.adapter;
},
/**
* Set the adapter this SplitBar uses
* @param {Object} adapter A SplitBar adapter object
*/
setAdapter : function(adapter){
this.adapter = adapter;
this.adapter.init(this);
},
/**
* Gets the minimum size for the resizing element
* @return {Number} The minimum size
*/
getMinimumSize : function(){
return this.minSize;
},
/**
* Sets the minimum size for the resizing element
* @param {Number} minSize The minimum size
*/
setMinimumSize : function(minSize){
this.minSize = minSize;
},
/**
* Gets the maximum size for the resizing element
* @return {Number} The maximum size
*/
getMaximumSize : function(){
return this.maxSize;
},
/**
* Sets the maximum size for the resizing element
* @param {Number} maxSize The maximum size
*/
setMaximumSize : function(maxSize){
this.maxSize = maxSize;
},
/**
* Sets the initialize size for the resizing element
* @param {Number} size The initial size
*/
setCurrentSize : function(size){
var oldAnimate = this.animate;
this.animate = false;
this.adapter.setElementSize(this, size);
this.animate = oldAnimate;
}
};
/**
* @private static Create the shim to drag over iframes
*/
YAHOO.ext.SplitBar.createShim = function(){
var shim = document.createElement('div');
YAHOO.util.Dom.generateId(shim, 'split-shim');
YAHOO.util.Dom.setStyle(shim, 'width', '100%');
YAHOO.util.Dom.setStyle(shim, 'height', '100%');
YAHOO.util.Dom.setStyle(shim, 'position', 'absolute');
YAHOO.util.Dom.setStyle(shim, 'background', 'white');
YAHOO.util.Dom.setStyle(shim, 'visibility', 'hidden');
YAHOO.util.Dom.setStyle(shim, 'z-index', 2);
window.document.body.appendChild(shim);
var shimEl = YAHOO.ext.Element.get(shim);
shimEl.setOpacity(.01);
shimEl.setXY([0, 0]);
return shimEl;
}
/**
* @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
*/
YAHOO.ext.SplitBar.createProxy = function(orientation){
var proxy = document.createElement('div');
YAHOO.util.Dom.generateId(proxy, 'split-proxy');
YAHOO.util.Dom.setStyle(proxy, 'position', 'absolute');
YAHOO.util.Dom.setStyle(proxy, 'visibility', 'hidden');
YAHOO.util.Dom.setStyle(proxy, 'z-index', 999);
YAHOO.util.Dom.setStyle(proxy, 'background-color', "#aaa");
if(orientation == YAHOO.ext.SplitBar.HORIZONTAL){
YAHOO.util.Dom.setStyle(proxy, 'cursor', 'e-resize');
}else{
YAHOO.util.Dom.setStyle(proxy, 'cursor', 'n-resize');
}
// the next 2 fix IE abs position div height problem
YAHOO.util.Dom.setStyle(proxy, 'line-height', '0px');
YAHOO.util.Dom.setStyle(proxy, 'font-size', '0px');
window.document.body.appendChild(proxy);
return proxy;
}
/**
* @class
* Default Adapter. It assumes the splitter and resizing element are not positioned
* elements and only gets/sets the width of the element. Generally used for table based layouts.
*/
YAHOO.ext.SplitBar.BasicLayoutAdapter = function(){
}
YAHOO.ext.SplitBar.BasicLayoutAdapter.prototype = {
// do nothing for now
init : function(s){
},
/**
* Called before drag operations to get the current size of the resizing element.
* @param {YAHOO.ext.SplitBar} s The SplitBar using this adapter
*/
getElementSize : function(s){
if(s.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
return s.resizingEl.getWidth();
}else{
return s.resizingEl.getHeight();
}
},
/**
* Called after drag operations to set the size of the resizing element.
* @param {YAHOO.ext.SplitBar} s The SplitBar using this adapter
* @param {Number} newSize The new size to set
* @param {Function} onComplete A function to be invoke when resizing is complete
*/
setElementSize : function(s, newSize, onComplete){
if(s.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
if(!YAHOO.util.Anim || !s.animate){
s.resizingEl.setWidth(newSize);
if(onComplete){
onComplete(s, newSize);
}
}else{
s.resizingEl.setWidth(newSize, true, .1, onComplete, YAHOO.util.Easing.easeOut);
}
}else{
if(!YAHOO.util.Anim || !s.animate){
s.resizingEl.setHeight(newSize);
if(onComplete){
onComplete(s, newSize);
}
}else{
s.resizingEl.setHeight(newSize, true, .1, onComplete, YAHOO.util.Easing.easeOut);
}
}
}
};
/**
*@class
* Adapter that moves the splitter element to align with the resized sizing element.
* Used with an absolute positioned SplitBar.
* @param {String/HTMLElement/Element} container The container that wraps around the absolute positioned content. If it's
* document.body, make sure you assign an id to the body element.
*/
YAHOO.ext.SplitBar.AbsoluteLayoutAdapter = function(container){
this.basic = new YAHOO.ext.SplitBar.BasicLayoutAdapter();
this.container = getEl(container);
}
YAHOO.ext.SplitBar.AbsoluteLayoutAdapter.prototype = {
init : function(s){
this.basic.init(s);
//YAHOO.util.Event.on(window, 'resize', this.moveSplitter.createDelegate(this, [s]));
},
getElementSize : function(s){
return this.basic.getElementSize(s);
},
setElementSize : function(s, newSize, onComplete){
this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
},
moveSplitter : function(s){
var yes = YAHOO.ext.SplitBar;
switch(s.placement){
case yes.LEFT:
s.el.setX(s.resizingEl.getRight());
break;
case yes.RIGHT:
s.el.setStyle('right', (this.container.getWidth() - s.resizingEl.getLeft()) + 'px');
break;
case yes.TOP:
s.el.setY(s.resizingEl.getBottom());
break;
case yes.BOTTOM:
s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
break;
}
}
};
/**
* Orientation constant - Create a vertical SplitBar
* @type Number
*/
YAHOO.ext.SplitBar.VERTICAL = 1;
/**
* Orientation constant - Create a horizontal SplitBar
* @type Number
*/
YAHOO.ext.SplitBar.HORIZONTAL = 2;
/**
* Placement constant - The resizing element is to the left of the splitter element
* @type Number
*/
YAHOO.ext.SplitBar.LEFT = 1;
/**
* Placement constant - The resizing element is to the right of the splitter element
* @type Number
*/
YAHOO.ext.SplitBar.RIGHT = 2;
/**
* Placement constant - The resizing element is positioned above the splitter element
* @type Number
*/
YAHOO.ext.SplitBar.TOP = 3;
/**
* Placement constant - The resizing element is positioned under splitter element
* @type Number
*/
YAHOO.ext.SplitBar.BOTTOM = 4;

394
www/extras/yui-ext/source/widgets/TabPanel.js vendored Normal file
View file

@ -0,0 +1,394 @@
/*
* YUI Extensions
* Copyright(c) 2006, Jack Slocum.
*
* This code is licensed under BSD license.
* http://www.opensource.org/licenses/bsd-license.php
*/
/*
tabpanel.js, version .1
Copyright(c) 2006, Jack Slocum.
Code licensed under the BSD License
*/
/**
* @class Creates a lightweight TabPanel component using Yahoo! UI.
* <br><br>
* Usage:
* <pre><code>
<font color="#008000">// basic tabs 1, built from existing content</font>
var tabs = new YAHOO.ext.TabPanel('tabs1');
tabs.addTab('script', "View Script");
tabs.addTab('markup', "View Markup");
tabs.activate('script');
<font color="#008000">// more advanced tabs, built from javascript</font>
var jtabs = new YAHOO.ext.TabPanel('jtabs');
jtabs.addTab('jtabs-1', "Normal Tab", "My content was added during construction.");
<font color="#008000">// set up the UpdateManager</font>
var tab2 = jtabs.addTab('jtabs-2', "Ajax Tab 1");
var updater = tab2.getUpdateManager();
updater.setDefaultUrl('ajax1.htm');
tab2.onActivate.subscribe(updater.refresh, updater, true);
<font color="#008000">// Use setUrl for Ajax loading</font>
var tab3 = jtabs.addTab('jtabs-3', "Ajax Tab 2");
tab3.setUrl('ajax2.htm', null, true);
<font color="#008000">// Disabled tab</font>
var tab4 = jtabs.addTab('tabs1-5', "Disabled Tab", "Can't see me cause I'm disabled");
tab4.disable();
jtabs.activate('jtabs-1');
}
* </code></pre>
* @requires YAHOO.ext.Element
* @requires YAHOO.ext.UpdateManager
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @requires YAHOO.util.CustomEvent
* @requires YAHOO.util.DDProxy
* @requires YAHOO.util.Connect (optional)
* @constructor
* Create new TabPanel.
* @param {String/HTMLElement/Element} container The id, DOM element or YAHOO.ext.Element container where this TabPanel is to be rendered.
*/
YAHOO.ext.TabPanel = function(container, onBottom){
/**
* The container element for this TabPanel.
* @type YAHOO.ext.Element
*/
this.el = getEl(container);
if(onBottom){
this.bodyEl = getEl(this.createBody(this.el.dom));
this.el.addClass('ytabs-bottom');
}
/** @private */
this.stripWrap = getEl(this.createStrip(this.el.dom));
/** @private */
this.stripEl = getEl(this.createStripList(this.stripWrap.dom));
/** The body element that contains TabPaneItem bodies.
* @type YAHOO.ext.Element
*/
if(!onBottom){
this.bodyEl = getEl(this.createBody(this.el.dom));
}
/** @private */
this.items = {};
/** @private */
this.active = null;
/**
* Fires when the active TabPanelItem changes. Uses fireDirect with signature: (TabPanel this, TabPanelItem activedTab).
* @type CustomEvent
*/
this.onTabChange = new YAHOO.util.CustomEvent('TabItem.onTabChange');
/** @private */
this.activateDelegate = this.activate.createDelegate(this);
}
YAHOO.ext.TabPanel.prototype = {
/**
* Creates a new TabPanelItem by looking for an existing element with the provided id - if it's not found it creates one.
* @param {String} id The id of the div to use or create
* @param {String} text The text for the tab
* @param {<i>String</i>} content (optional) Content to put in the TabPanelItem body
* @return {YAHOO.ext.TabPanelItem} The created TabPanelItem
*/
addTab : function(id, text, content){
var item = new YAHOO.ext.TabPanelItem(this, id, text);
this.addTabItem(item);
if(content){
item.setContent(content);
}
return item;
},
/**
* Returns the TabPanelItem with the specified id
* @param {String} id The id of the TabPanelItem to fetch.
* @return {YAHOO.ext.TabPanelItem}
*/
getTab : function(id){
return this.items[id];
},
/**
* Add an existing TabPanelItem.
* @param {YAHOO.ext.TabPanelItem} item The TabPanelItem to add
*/
addTabItem : function(item){
this.items[item.id] = item;
},
/**
* Remove a TabPanelItem.
* @param {String} id The id of the TabPanelItem to remove.
*/
removeTab : function(id){
var tab = this.items[id];
if(tab && this.active == tab){// if it's active, activate the first tab
for(var key in this.items){
if(typeof this.items[key] != 'function' && this.items[key] != tab){
this.items[key].activate();
break;
}
}
}
this.stripEl.dom.removeChild(tab.onEl.dom);
this.stripEl.dom.removeChild(tab.offEl.dom);
this.bodyEl.dom.removeChild(tab.bodyEl.dom);
delete this.items[id];
},
/**
* Disable a TabPanelItem. <b>It cannot be the active tab, if it is this call is ignored.</b>.
* @param {String} id The id of the TabPanelItem to disable.
*/
disableTab : function(id){
var tab = this.items[id];
if(tab && this.active != tab){
tab.disable();
}
},
/**
* Enable a TabPanelItem that is disabled.
* @param {String} id The id of the TabPanelItem to enable.
*/
enableTab : function(id){
var tab = this.items[id];
tab.enable();
},
/**
* Activate a TabPanelItem. The currently active will be deactivated.
* @param {String} id The id of the TabPanelItem to activate.
*/
activate : function(id){
var tab = this.items[id];
if(!tab.disabled){
if(this.active){
this.active.hide();
}
this.active = this.items[id];
this.active.show();
this.onTabChange.fireDirect(this, this.active);
}
},
/**
* Get the active TabPanelItem
* @return {YAHOO.ext.TabPanelItem} The active TabPanelItem or null if none are active.
*/
getActiveTab : function(){
return this.active;
}
};
YAHOO.ext.TabPanelItem = function(tabPanel, id, text){
/**
* The TabPanel this TabPanelItem belongs to
* @type YAHOO.ext.TabPanel
*/
this.tabPanel = tabPanel;
/**
* The id for this TabPanelItem
* @type String
*/
this.id = id;
/** @private */
this.disabled = false;
/** @private */
this.text = text;
/** @private */
this.loaded = false;
/**
* The body element for this TabPanelItem
* @type YAHOO.ext.Element
*/
this.bodyEl = getEl(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
this.bodyEl.originalDisplay = 'block';
this.bodyEl.setStyle('display', 'none');
this.bodyEl.enableDisplayMode();
var stripElements =tabPanel.createStripElements(tabPanel.stripEl.dom, text);
/** @private */
this.onEl = getEl(stripElements.on, true);
/** @private */
this.offEl = getEl(stripElements.off, true);
this.onEl.originalDisplay = 'inline';
this.onEl.enableDisplayMode();
this.offEl.originalDisplay = 'inline';
this.offEl.enableDisplayMode();
this.offEl.on('click', tabPanel.activateDelegate.createCallback(id));
/**
* Fires when this TabPanelItem is activated. Uses fireDirect with signature: (TabPanel tabPanel, TabPanelItem this).
* @type CustomEvent
*/
this.onActivate = new YAHOO.util.CustomEvent('TabItem.onActivate');
/**
* Fires when this TabPanelItem is deactivated. Uses fireDirect with signature: (TabPanel tabPanel, TabPanelItem this).
* @type CustomEvent
*/
this.onDeactivate = new YAHOO.util.CustomEvent('TabItem.onDeactivate');
};
YAHOO.ext.TabPanelItem.prototype = {
/**
* Show this TabPanelItem - this <b>does not</b> deactivate the currently active TabPanelItem.
*/
show : function(){
this.onEl.show();
this.offEl.hide();
this.bodyEl.show();
this.onActivate.fireDirect(this.tabPanel, this);
},
setText : function(text){
this.onEl.dom.firstChild.firstChild.firstChild.innerHTML = text;
this.offEl.dom.firstChild.firstChild.innerHTML = text;
},
/**
* Activate this TabPanelItem - this <b>does</b> deactivate the currently active TabPanelItem.
*/
activate : function(){
this.tabPanel.activate(this.id);
},
/**
* Hide this TabPanelItem - if you don't activate another TabPanelItem this could look odd.
*/
hide : function(){
this.onEl.hide();
this.offEl.show();
this.bodyEl.hide();
this.onDeactivate.fireDirect(this.tabPanel, this);
},
/**
* Disable this TabPanelItem - this call is ignore if this is the active TabPanelItem.
*/
disable : function(){
if(this.tabPanel.active != this){
this.disabled = true;
this.offEl.addClass('disabled');
this.offEl.dom.title = 'disabled';
}
},
/**
* Enable this TabPanelItem if it was previously disabled.
*/
enable : function(){
this.disabled = false;
this.offEl.removeClass('disabled');
this.offEl.dom.title = '';
},
/**
* Set the content for this TabPanelItem.
* @param {String} content The content
*/
setContent : function(content){
this.bodyEl.update(content);
},
/**
* Get the {@link YAHOO.ext.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
* @return {YAHOO.ext.UpdateManager} The UpdateManager
*/
getUpdateManager : function(){
return this.bodyEl.getUpdateManager();
},
/**
* Set a URL to be used to load the content for this TabPanelItem.
* @param {String/Function} url The url to load the content from or a function to call to get the url
* @param {<i>String/Object</i>} params (optional) The string params for the update call or an object of the params. See {@link YAHOO.ext.UpdateManager#update} for more details. (Defaults to null)
* @param {<i>Boolean</i>} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
* @return {YAHOO.ext.UpdateManager} The UpdateManager
*/
setUrl : function(url, params, loadOnce){
this.onActivate.subscribe(this._handleRefresh.createDelegate(this, [url, params, loadOnce]));
},
/** @private */
_handleRefresh : function(url, params, loadOnce){
if(!loadOnce || !this.loaded){
var updater = this.bodyEl.getUpdateManager();
updater.update(url, params, this._setLoaded.createDelegate(this));
}
},
/** @private */
_setLoaded : function(){
this.loaded = true;
}
};
/** @private */
YAHOO.ext.TabPanel.prototype.createStrip = function(container){
var strip = document.createElement('div');
YAHOO.util.Dom.addClass(strip, 'tabset');
container.appendChild(strip);
var stripInner = document.createElement('div');
YAHOO.util.Dom.generateId(stripInner, 'tab-strip');
YAHOO.util.Dom.addClass(stripInner, 'hd');
strip.appendChild(stripInner);
return stripInner;
};
/** @private */
YAHOO.ext.TabPanel.prototype.createStripList = function(strip){
var list = document.createElement('ul');
YAHOO.util.Dom.generateId(list, 'tab-strip-list');
strip.appendChild(list);
return list;
};
/** @private */
YAHOO.ext.TabPanel.prototype.createBody = function(container){
var body = document.createElement('div');
YAHOO.util.Dom.generateId(body, 'tab-body');
YAHOO.util.Dom.addClass(body, 'yui-ext-tabbody');
container.appendChild(body);
return body;
};
/** @private */
YAHOO.ext.TabPanel.prototype.createItemBody = function(bodyEl, id){
var body = YAHOO.util.Dom.get(id);
if(!body){
body = document.createElement('div');
body.id = id;
}
YAHOO.util.Dom.addClass(body, 'yui-ext-tabitembody');
bodyEl.appendChild(body);
return body;
};
/** @private */
YAHOO.ext.TabPanel.prototype.createStripElements = function(stripEl, text){
var li = document.createElement('li');
var a = document.createElement('a');
var em = document.createElement('em');
stripEl.appendChild(li);
li.appendChild(a);
a.appendChild(em);
em.innerHTML = text;
var li2 = document.createElement('li');
var a2 = document.createElement('a');
var em2 = document.createElement('em');
var strong = document.createElement('strong');
stripEl.appendChild(li2);
YAHOO.util.Dom.addClass(li2, 'on');
YAHOO.util.Dom.setStyle(li2, 'display', 'none');
li2.appendChild(a2);
a2.appendChild(strong);
strong.appendChild(em2);
em2.innerHTML = text;
return {on: li2, off: li};
};

180
www/extras/yui-ext/source/widgets/Toolbar.js vendored Normal file
View file

@ -0,0 +1,180 @@
/*
* YUI Extensions
* Copyright(c) 2006, Jack Slocum.
*
* This code is licensed under BSD license.
* http://www.opensource.org/licenses/bsd-license.php
*/
/**
* @class
* Basic Toolbar used by the Grid to create the paging toolbar. This class is reusable but functionality
* is limited. Look for more functionality in a future version.
*/
YAHOO.ext.Toolbar = function(container){
this.el = getEl(container, true);
var div = document.createElement('div');
div.className = 'ytoolbar';
var tb = document.createElement('table');
tb.border = 0;
tb.cellPadding = 0;
tb.cellSpacing = 0;
div.appendChild(tb);
var tbody = document.createElement('tbody');
tb.appendChild(tbody);
var tr = document.createElement('tr');
tbody.appendChild(tr);
this.el.dom.appendChild(div);
this.tr = tr;
};
YAHOO.ext.Toolbar.prototype = {
/**
* Adds element(s) to the toolbar - this function takes a variable number of
* arguments of mixed type and adds them to the toolbar...
* If an argument is a ToolbarButton, it is added. If the element is a string, it is wrapped
* in a ytb-text element and added unless the text is "separator" in which case a separator
* is added. Otherwise, it is assumed the element is an HTMLElement and it is added directly.
*/
add : function(){
for(var i = 0; i < arguments.length; i++){
var el = arguments[i];
var td = document.createElement('td');
this.tr.appendChild(td);
if(el instanceof YAHOO.ext.ToolbarButton){
el.init(td);
}else if(typeof el == 'string'){
var span = document.createElement('span');
if(el == 'separator'){
span.className = 'ytb-sep';
}else{
span.innerHTML = el;
span.className = 'ytb-text';
}
td.appendChild(span);
}else if(typeof el == 'object'){ // must be element?
td.appendChild(el);
}
}
},
addSeparator : function(){
var td = document.createElement('td');
this.tr.appendChild(td);
var span = document.createElement('span');
span.className = 'ytb-sep';
td.appendChild(span);
},
/**
* Adds a button, see {@link YAHOO.ext.ToolbarButton} for more info on the config
* @return {YAHOO.ext.ToolbarButton}
*/
addButton : function(config){
var b = new YAHOO.ext.ToolbarButton(config);
this.add(b);
return b;
},
addText : function(text){
var td = document.createElement('td');
this.tr.appendChild(td);
var span = document.createElement('span');
span.className = 'ytb-text';
span.innerHTML = text;
td.appendChild(span);
return span;
}
};
/**
* @class
* A toolbar button. The config has the following options:
* <ul>
* <li>className - The CSS class for the button. Use this to attach a background image for an icon.</li>
* <li>text - The button's text</li>
* <li>tooltip - The buttons tooltip text</li>
* <li>click - function to call when the button is clicked</li>
* <li>mouseover - function to call when the mouse moves over the button</li>
* <li>mouseout - function to call when the mouse moves off the button</li>
* <li>scope - The scope of the above event handlers</li>
* <li></li>
* <li></li>
*/
YAHOO.ext.ToolbarButton = function(config){
YAHOO.ext.util.Config.apply(this, config);
};
YAHOO.ext.ToolbarButton.prototype = {
/** @private */
init : function(appendTo){
var element = document.createElement('span');
element.className = 'ytb-button';
this.disabled = (this.disabled === true);
var inner = document.createElement('span');
inner.className = 'ytb-button-inner ' + this.className;
if(this.tooltip){
element.setAttribute('title', this.tooltip);
}
element.appendChild(inner);
appendTo.appendChild(element);
this.el = getEl(element, true);
inner.innerHTML = (this.text ? this.text : '&nbsp;');
this.el.mon('click', this.onClick, this, true);
this.el.mon('mouseover', this.onMouseOver, this, true);
this.el.mon('mouseout', this.onMouseOut, this, true);
},
disable : function(){
this.disabled = true;
if(this.el){
this.el.addClass('ytb-button-disabled');
}
},
enable : function(){
this.disabled = false;
if(this.el){
this.el.removeClass('ytb-button-disabled');
}
},
isDisabled : function(){
return this.disabled === true;
},
setDisabled : function(disabled){
if(disabled){
this.disable();
}else{
this.enable();
}
},
/** @private */
onClick : function(){
if(!this.disabled && this.click){
this.click.call(this.scope || window, this);
}
},
/** @private */
onMouseOver : function(){
if(!this.disabled){
this.el.addClass('ytb-button-over');
if(this.mouseover){
this.mouseover.call(this.scope || window, this);
}
}
},
/** @private */
onMouseOut : function(){
this.el.removeClass('ytb-button-over');
if(!this.disabled){
if(this.mouseout){
this.mouseout.call(this.scope || window, this);
}
}
}
};