mirror of
https://github.com/owntone/owntone-server.git
synced 2024-12-30 09:03:23 -05:00
2845 lines
89 KiB
JavaScript
2845 lines
89 KiB
JavaScript
/**
|
|
*
|
|
* Copyright 2005 Sabre Airline Solutions
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
|
|
* file except in compliance with the License. You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software distributed under the
|
|
* License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
|
|
* either express or implied. See the License for the specific language governing permissions
|
|
* and limitations under the License.
|
|
**/
|
|
|
|
|
|
//-------------------- rico.js
|
|
var Rico = {
|
|
Version: '1.1.2',
|
|
prototypeVersion: parseFloat(Prototype.Version.split(".")[0] + "." + Prototype.Version.split(".")[1])
|
|
}
|
|
|
|
if((typeof Prototype=='undefined') || Rico.prototypeVersion < 1.3)
|
|
throw("Rico requires the Prototype JavaScript framework >= 1.3");
|
|
|
|
Rico.ArrayExtensions = new Array();
|
|
|
|
if (Object.prototype.extend) {
|
|
Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Object.prototype.extend;
|
|
}else{
|
|
Object.prototype.extend = function(object) {
|
|
return Object.extend.apply(this, [this, object]);
|
|
}
|
|
Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Object.prototype.extend;
|
|
}
|
|
|
|
if (Array.prototype.push) {
|
|
Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.push;
|
|
}
|
|
|
|
if (!Array.prototype.remove) {
|
|
Array.prototype.remove = function(dx) {
|
|
if( isNaN(dx) || dx > this.length )
|
|
return false;
|
|
for( var i=0,n=0; i<this.length; i++ )
|
|
if( i != dx )
|
|
this[n++]=this[i];
|
|
this.length-=1;
|
|
};
|
|
Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.remove;
|
|
}
|
|
|
|
if (!Array.prototype.removeItem) {
|
|
Array.prototype.removeItem = function(item) {
|
|
for ( var i = 0 ; i < this.length ; i++ )
|
|
if ( this[i] == item ) {
|
|
this.remove(i);
|
|
break;
|
|
}
|
|
};
|
|
Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.removeItem;
|
|
}
|
|
|
|
if (!Array.prototype.indices) {
|
|
Array.prototype.indices = function() {
|
|
var indexArray = new Array();
|
|
for ( index in this ) {
|
|
var ignoreThis = false;
|
|
for ( var i = 0 ; i < Rico.ArrayExtensions.length ; i++ ) {
|
|
if ( this[index] == Rico.ArrayExtensions[i] ) {
|
|
ignoreThis = true;
|
|
break;
|
|
}
|
|
}
|
|
if ( !ignoreThis )
|
|
indexArray[ indexArray.length ] = index;
|
|
}
|
|
return indexArray;
|
|
}
|
|
Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.indices;
|
|
}
|
|
|
|
// Create the loadXML method and xml getter for Mozilla
|
|
if ( window.DOMParser &&
|
|
window.XMLSerializer &&
|
|
window.Node && Node.prototype && Node.prototype.__defineGetter__ ) {
|
|
|
|
if (!Document.prototype.loadXML) {
|
|
Document.prototype.loadXML = function (s) {
|
|
var doc2 = (new DOMParser()).parseFromString(s, "text/xml");
|
|
while (this.hasChildNodes())
|
|
this.removeChild(this.lastChild);
|
|
|
|
for (var i = 0; i < doc2.childNodes.length; i++) {
|
|
this.appendChild(this.importNode(doc2.childNodes[i], true));
|
|
}
|
|
};
|
|
}
|
|
|
|
Document.prototype.__defineGetter__( "xml",
|
|
function () {
|
|
return (new XMLSerializer()).serializeToString(this);
|
|
}
|
|
);
|
|
}
|
|
|
|
document.getElementsByTagAndClassName = function(tagName, className) {
|
|
if ( tagName == null )
|
|
tagName = '*';
|
|
|
|
var children = document.getElementsByTagName(tagName) || document.all;
|
|
var elements = new Array();
|
|
|
|
if ( className == null )
|
|
return children;
|
|
|
|
for (var i = 0; i < children.length; i++) {
|
|
var child = children[i];
|
|
var classNames = child.className.split(' ');
|
|
for (var j = 0; j < classNames.length; j++) {
|
|
if (classNames[j] == className) {
|
|
elements.push(child);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
return elements;
|
|
}
|
|
|
|
|
|
//-------------------- ricoAccordion.js
|
|
Rico.Accordion = Class.create();
|
|
|
|
Rico.Accordion.prototype = {
|
|
|
|
initialize: function(container, options) {
|
|
this.container = $(container);
|
|
this.lastExpandedTab = null;
|
|
this.accordionTabs = new Array();
|
|
this.setOptions(options);
|
|
this._attachBehaviors();
|
|
if(!container) return;
|
|
|
|
this.container.style.borderBottom = '1px solid ' + this.options.borderColor;
|
|
// validate onloadShowTab
|
|
if (this.options.onLoadShowTab >= this.accordionTabs.length)
|
|
this.options.onLoadShowTab = 0;
|
|
|
|
// set the initial visual state...
|
|
for ( var i=0 ; i < this.accordionTabs.length ; i++ )
|
|
{
|
|
if (i != this.options.onLoadShowTab){
|
|
this.accordionTabs[i].collapse();
|
|
this.accordionTabs[i].content.style.display = 'none';
|
|
}
|
|
}
|
|
this.lastExpandedTab = this.accordionTabs[this.options.onLoadShowTab];
|
|
if (this.options.panelHeight == 'auto'){
|
|
var tabToCheck = (this.options.onloadShowTab === 0)? 1 : 0;
|
|
var titleBarSize = parseInt(RicoUtil.getElementsComputedStyle(this.accordionTabs[tabToCheck].titleBar, 'height'));
|
|
if (isNaN(titleBarSize))
|
|
titleBarSize = this.accordionTabs[tabToCheck].titleBar.offsetHeight;
|
|
|
|
var totalTitleBarSize = this.accordionTabs.length * titleBarSize;
|
|
var parentHeight = parseInt(RicoUtil.getElementsComputedStyle(this.container.parentNode, 'height'));
|
|
if (isNaN(parentHeight))
|
|
parentHeight = this.container.parentNode.offsetHeight;
|
|
|
|
this.options.panelHeight = parentHeight - totalTitleBarSize-2;
|
|
}
|
|
|
|
this.lastExpandedTab.content.style.height = this.options.panelHeight + "px";
|
|
this.lastExpandedTab.showExpanded();
|
|
this.lastExpandedTab.titleBar.style.fontWeight = this.options.expandedFontWeight;
|
|
|
|
},
|
|
|
|
setOptions: function(options) {
|
|
this.options = {
|
|
expandedBg : '#63699c',
|
|
hoverBg : '#63699c',
|
|
collapsedBg : '#6b79a5',
|
|
expandedTextColor : '#ffffff',
|
|
expandedFontWeight : 'bold',
|
|
hoverTextColor : '#ffffff',
|
|
collapsedTextColor : '#ced7ef',
|
|
collapsedFontWeight : 'normal',
|
|
hoverTextColor : '#ffffff',
|
|
borderColor : '#1f669b',
|
|
panelHeight : 200,
|
|
onHideTab : null,
|
|
onShowTab : null,
|
|
onLoadShowTab : 0
|
|
}
|
|
Object.extend(this.options, options || {});
|
|
},
|
|
|
|
showTabByIndex: function( anIndex, animate ) {
|
|
var doAnimate = arguments.length == 1 ? true : animate;
|
|
this.showTab( this.accordionTabs[anIndex], doAnimate );
|
|
},
|
|
|
|
showTab: function( accordionTab, animate ) {
|
|
if ( this.lastExpandedTab == accordionTab )
|
|
return;
|
|
|
|
var doAnimate = arguments.length == 1 ? true : animate;
|
|
|
|
if ( this.options.onHideTab )
|
|
this.options.onHideTab(this.lastExpandedTab);
|
|
|
|
this.lastExpandedTab.showCollapsed();
|
|
var accordion = this;
|
|
var lastExpandedTab = this.lastExpandedTab;
|
|
|
|
this.lastExpandedTab.content.style.height = (this.options.panelHeight - 1) + 'px';
|
|
accordionTab.content.style.display = '';
|
|
|
|
accordionTab.titleBar.style.fontWeight = this.options.expandedFontWeight;
|
|
|
|
if ( doAnimate ) {
|
|
new Rico.Effect.AccordionSize( this.lastExpandedTab.content,
|
|
accordionTab.content,
|
|
1,
|
|
this.options.panelHeight,
|
|
50, 7,
|
|
{ complete: function() {accordion.showTabDone(lastExpandedTab)} } );
|
|
this.lastExpandedTab = accordionTab;
|
|
}
|
|
else {
|
|
this.lastExpandedTab.content.style.height = "1px";
|
|
accordionTab.content.style.height = this.options.panelHeight + "px";
|
|
this.lastExpandedTab = accordionTab;
|
|
this.showTabDone(lastExpandedTab);
|
|
}
|
|
},
|
|
|
|
showTabDone: function(collapsedTab) {
|
|
collapsedTab.content.style.display = 'none';
|
|
this.lastExpandedTab.showExpanded();
|
|
if ( this.options.onShowTab )
|
|
this.options.onShowTab(this.lastExpandedTab);
|
|
},
|
|
|
|
_attachBehaviors: function() {
|
|
var panels = this._getDirectChildrenByTag(this.container, 'DIV');
|
|
for ( var i = 0 ; i < panels.length ; i++ ) {
|
|
|
|
var tabChildren = this._getDirectChildrenByTag(panels[i],'DIV');
|
|
if ( tabChildren.length != 2 )
|
|
continue; // unexpected
|
|
|
|
var tabTitleBar = tabChildren[0];
|
|
var tabContentBox = tabChildren[1];
|
|
this.accordionTabs.push( new Rico.Accordion.Tab(this,tabTitleBar,tabContentBox) );
|
|
}
|
|
},
|
|
|
|
_getDirectChildrenByTag: function(e, tagName) {
|
|
var kids = new Array();
|
|
var allKids = e.childNodes;
|
|
for( var i = 0 ; i < allKids.length ; i++ )
|
|
if ( allKids[i] && allKids[i].tagName && allKids[i].tagName == tagName )
|
|
kids.push(allKids[i]);
|
|
return kids;
|
|
}
|
|
|
|
};
|
|
|
|
Rico.Accordion.Tab = Class.create();
|
|
|
|
Rico.Accordion.Tab.prototype = {
|
|
|
|
initialize: function(accordion, titleBar, content) {
|
|
this.accordion = accordion;
|
|
this.titleBar = titleBar;
|
|
this.content = content;
|
|
this._attachBehaviors();
|
|
},
|
|
|
|
collapse: function() {
|
|
this.showCollapsed();
|
|
this.content.style.height = "1px";
|
|
},
|
|
|
|
showCollapsed: function() {
|
|
this.expanded = false;
|
|
this.titleBar.style.backgroundColor = this.accordion.options.collapsedBg;
|
|
this.titleBar.style.color = this.accordion.options.collapsedTextColor;
|
|
this.titleBar.style.fontWeight = this.accordion.options.collapsedFontWeight;
|
|
this.content.style.overflow = "hidden";
|
|
},
|
|
|
|
showExpanded: function() {
|
|
this.expanded = true;
|
|
this.titleBar.style.backgroundColor = this.accordion.options.expandedBg;
|
|
this.titleBar.style.color = this.accordion.options.expandedTextColor;
|
|
this.content.style.overflow = "auto";
|
|
},
|
|
|
|
titleBarClicked: function(e) {
|
|
if ( this.accordion.lastExpandedTab == this )
|
|
return;
|
|
this.accordion.showTab(this);
|
|
},
|
|
|
|
hover: function(e) {
|
|
this.titleBar.style.backgroundColor = this.accordion.options.hoverBg;
|
|
this.titleBar.style.color = this.accordion.options.hoverTextColor;
|
|
this.titleBar.style.cursor = 'pointer';
|
|
},
|
|
|
|
unhover: function(e) {
|
|
if ( this.expanded ) {
|
|
this.titleBar.style.backgroundColor = this.accordion.options.expandedBg;
|
|
this.titleBar.style.color = this.accordion.options.expandedTextColor;
|
|
}
|
|
else {
|
|
this.titleBar.style.backgroundColor = this.accordion.options.collapsedBg;
|
|
this.titleBar.style.color = this.accordion.options.collapsedTextColor;
|
|
}
|
|
this.titleBar.style.cursor = '';
|
|
},
|
|
|
|
_attachBehaviors: function() {
|
|
this.content.style.border = "1px solid " + this.accordion.options.borderColor;
|
|
this.content.style.borderTopWidth = "0px";
|
|
this.content.style.borderBottomWidth = "0px";
|
|
this.content.style.margin = "0px";
|
|
|
|
this.titleBar.onclick = this.titleBarClicked.bindAsEventListener(this);
|
|
this.titleBar.onmouseover = this.hover.bindAsEventListener(this);
|
|
this.titleBar.onmouseout = this.unhover.bindAsEventListener(this);
|
|
}
|
|
|
|
};
|
|
|
|
|
|
//-------------------- ricoAjaxEngine.js
|
|
Rico.AjaxEngine = Class.create();
|
|
|
|
Rico.AjaxEngine.prototype = {
|
|
|
|
initialize: function() {
|
|
this.ajaxElements = new Array();
|
|
this.ajaxObjects = new Array();
|
|
this.requestURLS = new Array();
|
|
this.options = {};
|
|
},
|
|
|
|
registerAjaxElement: function( anId, anElement ) {
|
|
if ( !anElement )
|
|
anElement = $(anId);
|
|
this.ajaxElements[anId] = anElement;
|
|
},
|
|
|
|
registerAjaxObject: function( anId, anObject ) {
|
|
this.ajaxObjects[anId] = anObject;
|
|
},
|
|
|
|
registerRequest: function (requestLogicalName, requestURL) {
|
|
this.requestURLS[requestLogicalName] = requestURL;
|
|
},
|
|
|
|
sendRequest: function(requestName, options) {
|
|
// Allow for backwards Compatibility
|
|
if ( arguments.length >= 2 )
|
|
if (typeof arguments[1] == 'string')
|
|
options = {parameters: this._createQueryString(arguments, 1)};
|
|
this.sendRequestWithData(requestName, null, options);
|
|
},
|
|
|
|
sendRequestWithData: function(requestName, xmlDocument, options) {
|
|
var requestURL = this.requestURLS[requestName];
|
|
if ( requestURL == null )
|
|
return;
|
|
|
|
// Allow for backwards Compatibility
|
|
if ( arguments.length >= 3 )
|
|
if (typeof arguments[2] == 'string')
|
|
options.parameters = this._createQueryString(arguments, 2);
|
|
|
|
new Ajax.Request(requestURL, this._requestOptions(options,xmlDocument));
|
|
},
|
|
|
|
sendRequestAndUpdate: function(requestName,container,options) {
|
|
// Allow for backwards Compatibility
|
|
if ( arguments.length >= 3 )
|
|
if (typeof arguments[2] == 'string')
|
|
options.parameters = this._createQueryString(arguments, 2);
|
|
|
|
this.sendRequestWithDataAndUpdate(requestName, null, container, options);
|
|
},
|
|
|
|
sendRequestWithDataAndUpdate: function(requestName,xmlDocument,container,options) {
|
|
var requestURL = this.requestURLS[requestName];
|
|
if ( requestURL == null )
|
|
return;
|
|
|
|
// Allow for backwards Compatibility
|
|
if ( arguments.length >= 4 )
|
|
if (typeof arguments[3] == 'string')
|
|
options.parameters = this._createQueryString(arguments, 3);
|
|
|
|
var updaterOptions = this._requestOptions(options,xmlDocument);
|
|
|
|
new Ajax.Updater(container, requestURL, updaterOptions);
|
|
},
|
|
|
|
// Private -- not part of intended engine API --------------------------------------------------------------------
|
|
|
|
_requestOptions: function(options,xmlDoc) {
|
|
var requestHeaders = ['X-Rico-Version', Rico.Version ];
|
|
var sendMethod = 'post';
|
|
if ( xmlDoc == null )
|
|
if (Rico.prototypeVersion < 1.4)
|
|
requestHeaders.push( 'Content-type', 'text/xml' );
|
|
else
|
|
sendMethod = 'get';
|
|
(!options) ? options = {} : '';
|
|
|
|
if (!options._RicoOptionsProcessed){
|
|
// Check and keep any user onComplete functions
|
|
if (options.onComplete)
|
|
options.onRicoComplete = options.onComplete;
|
|
// Fix onComplete
|
|
if (options.overrideOnComplete)
|
|
options.onComplete = options.overrideOnComplete;
|
|
else
|
|
options.onComplete = this._onRequestComplete.bind(this);
|
|
options._RicoOptionsProcessed = true;
|
|
}
|
|
|
|
// Set the default options and extend with any user options
|
|
this.options = {
|
|
requestHeaders: requestHeaders,
|
|
parameters: options.parameters,
|
|
postBody: xmlDoc,
|
|
method: sendMethod,
|
|
onComplete: options.onComplete
|
|
};
|
|
// Set any user options:
|
|
Object.extend(this.options, options);
|
|
return this.options;
|
|
},
|
|
|
|
_createQueryString: function( theArgs, offset ) {
|
|
var queryString = ""
|
|
for ( var i = offset ; i < theArgs.length ; i++ ) {
|
|
if ( i != offset )
|
|
queryString += "&";
|
|
|
|
var anArg = theArgs[i];
|
|
|
|
if ( anArg.name != undefined && anArg.value != undefined ) {
|
|
queryString += anArg.name + "=" + escape(anArg.value);
|
|
}
|
|
else {
|
|
var ePos = anArg.indexOf('=');
|
|
var argName = anArg.substring( 0, ePos );
|
|
var argValue = anArg.substring( ePos + 1 );
|
|
queryString += argName + "=" + escape(argValue);
|
|
}
|
|
}
|
|
return queryString;
|
|
},
|
|
|
|
_onRequestComplete : function(request) {
|
|
if(!request)
|
|
return;
|
|
// User can set an onFailure option - which will be called by prototype
|
|
if (request.status != 200)
|
|
return;
|
|
|
|
var response = request.responseXML.getElementsByTagName("ajax-response");
|
|
if (response == null || response.length != 1)
|
|
return;
|
|
this._processAjaxResponse( response[0].childNodes );
|
|
|
|
// Check if user has set a onComplete function
|
|
var onRicoComplete = this.options.onRicoComplete;
|
|
if (onRicoComplete != null)
|
|
onRicoComplete();
|
|
},
|
|
|
|
_processAjaxResponse: function( xmlResponseElements ) {
|
|
for ( var i = 0 ; i < xmlResponseElements.length ; i++ ) {
|
|
var responseElement = xmlResponseElements[i];
|
|
|
|
// only process nodes of type element.....
|
|
if ( responseElement.nodeType != 1 )
|
|
continue;
|
|
|
|
var responseType = responseElement.getAttribute("type");
|
|
var responseId = responseElement.getAttribute("id");
|
|
|
|
if ( responseType == "object" )
|
|
this._processAjaxObjectUpdate( this.ajaxObjects[ responseId ], responseElement );
|
|
else if ( responseType == "element" )
|
|
this._processAjaxElementUpdate( this.ajaxElements[ responseId ], responseElement );
|
|
else
|
|
alert('unrecognized AjaxResponse type : ' + responseType );
|
|
}
|
|
},
|
|
|
|
_processAjaxObjectUpdate: function( ajaxObject, responseElement ) {
|
|
ajaxObject.ajaxUpdate( responseElement );
|
|
},
|
|
|
|
_processAjaxElementUpdate: function( ajaxElement, responseElement ) {
|
|
ajaxElement.innerHTML = RicoUtil.getContentAsString(responseElement);
|
|
}
|
|
|
|
}
|
|
|
|
var ajaxEngine = new Rico.AjaxEngine();
|
|
|
|
|
|
//-------------------- ricoColor.js
|
|
Rico.Color = Class.create();
|
|
|
|
Rico.Color.prototype = {
|
|
|
|
initialize: function(red, green, blue) {
|
|
this.rgb = { r: red, g : green, b : blue };
|
|
},
|
|
|
|
setRed: function(r) {
|
|
this.rgb.r = r;
|
|
},
|
|
|
|
setGreen: function(g) {
|
|
this.rgb.g = g;
|
|
},
|
|
|
|
setBlue: function(b) {
|
|
this.rgb.b = b;
|
|
},
|
|
|
|
setHue: function(h) {
|
|
|
|
// get an HSB model, and set the new hue...
|
|
var hsb = this.asHSB();
|
|
hsb.h = h;
|
|
|
|
// convert back to RGB...
|
|
this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);
|
|
},
|
|
|
|
setSaturation: function(s) {
|
|
// get an HSB model, and set the new hue...
|
|
var hsb = this.asHSB();
|
|
hsb.s = s;
|
|
|
|
// convert back to RGB and set values...
|
|
this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);
|
|
},
|
|
|
|
setBrightness: function(b) {
|
|
// get an HSB model, and set the new hue...
|
|
var hsb = this.asHSB();
|
|
hsb.b = b;
|
|
|
|
// convert back to RGB and set values...
|
|
this.rgb = Rico.Color.HSBtoRGB( hsb.h, hsb.s, hsb.b );
|
|
},
|
|
|
|
darken: function(percent) {
|
|
var hsb = this.asHSB();
|
|
this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.max(hsb.b - percent,0));
|
|
},
|
|
|
|
brighten: function(percent) {
|
|
var hsb = this.asHSB();
|
|
this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.min(hsb.b + percent,1));
|
|
},
|
|
|
|
blend: function(other) {
|
|
this.rgb.r = Math.floor((this.rgb.r + other.rgb.r)/2);
|
|
this.rgb.g = Math.floor((this.rgb.g + other.rgb.g)/2);
|
|
this.rgb.b = Math.floor((this.rgb.b + other.rgb.b)/2);
|
|
},
|
|
|
|
isBright: function() {
|
|
var hsb = this.asHSB();
|
|
return this.asHSB().b > 0.5;
|
|
},
|
|
|
|
isDark: function() {
|
|
return ! this.isBright();
|
|
},
|
|
|
|
asRGB: function() {
|
|
return "rgb(" + this.rgb.r + "," + this.rgb.g + "," + this.rgb.b + ")";
|
|
},
|
|
|
|
asHex: function() {
|
|
return "#" + this.rgb.r.toColorPart() + this.rgb.g.toColorPart() + this.rgb.b.toColorPart();
|
|
},
|
|
|
|
asHSB: function() {
|
|
return Rico.Color.RGBtoHSB(this.rgb.r, this.rgb.g, this.rgb.b);
|
|
},
|
|
|
|
toString: function() {
|
|
return this.asHex();
|
|
}
|
|
|
|
};
|
|
|
|
Rico.Color.createFromHex = function(hexCode) {
|
|
if(hexCode.length==4) {
|
|
var shortHexCode = hexCode;
|
|
var hexCode = '#';
|
|
for(var i=1;i<4;i++) hexCode += (shortHexCode.charAt(i) +
|
|
shortHexCode.charAt(i));
|
|
}
|
|
if ( hexCode.indexOf('#') == 0 )
|
|
hexCode = hexCode.substring(1);
|
|
var red = hexCode.substring(0,2);
|
|
var green = hexCode.substring(2,4);
|
|
var blue = hexCode.substring(4,6);
|
|
return new Rico.Color( parseInt(red,16), parseInt(green,16), parseInt(blue,16) );
|
|
}
|
|
|
|
/**
|
|
* Factory method for creating a color from the background of
|
|
* an HTML element.
|
|
*/
|
|
Rico.Color.createColorFromBackground = function(elem) {
|
|
|
|
var actualColor = RicoUtil.getElementsComputedStyle($(elem), "backgroundColor", "background-color");
|
|
|
|
if ( actualColor == "transparent" && elem.parentNode )
|
|
return Rico.Color.createColorFromBackground(elem.parentNode);
|
|
|
|
if ( actualColor == null )
|
|
return new Rico.Color(255,255,255);
|
|
|
|
if ( actualColor.indexOf("rgb(") == 0 ) {
|
|
var colors = actualColor.substring(4, actualColor.length - 1 );
|
|
var colorArray = colors.split(",");
|
|
return new Rico.Color( parseInt( colorArray[0] ),
|
|
parseInt( colorArray[1] ),
|
|
parseInt( colorArray[2] ) );
|
|
|
|
}
|
|
else if ( actualColor.indexOf("#") == 0 ) {
|
|
return Rico.Color.createFromHex(actualColor);
|
|
}
|
|
else
|
|
return new Rico.Color(255,255,255);
|
|
}
|
|
|
|
Rico.Color.HSBtoRGB = function(hue, saturation, brightness) {
|
|
|
|
var red = 0;
|
|
var green = 0;
|
|
var blue = 0;
|
|
|
|
if (saturation == 0) {
|
|
red = parseInt(brightness * 255.0 + 0.5);
|
|
green = red;
|
|
blue = red;
|
|
}
|
|
else {
|
|
var h = (hue - Math.floor(hue)) * 6.0;
|
|
var f = h - Math.floor(h);
|
|
var p = brightness * (1.0 - saturation);
|
|
var q = brightness * (1.0 - saturation * f);
|
|
var t = brightness * (1.0 - (saturation * (1.0 - f)));
|
|
|
|
switch (parseInt(h)) {
|
|
case 0:
|
|
red = (brightness * 255.0 + 0.5);
|
|
green = (t * 255.0 + 0.5);
|
|
blue = (p * 255.0 + 0.5);
|
|
break;
|
|
case 1:
|
|
red = (q * 255.0 + 0.5);
|
|
green = (brightness * 255.0 + 0.5);
|
|
blue = (p * 255.0 + 0.5);
|
|
break;
|
|
case 2:
|
|
red = (p * 255.0 + 0.5);
|
|
green = (brightness * 255.0 + 0.5);
|
|
blue = (t * 255.0 + 0.5);
|
|
break;
|
|
case 3:
|
|
red = (p * 255.0 + 0.5);
|
|
green = (q * 255.0 + 0.5);
|
|
blue = (brightness * 255.0 + 0.5);
|
|
break;
|
|
case 4:
|
|
red = (t * 255.0 + 0.5);
|
|
green = (p * 255.0 + 0.5);
|
|
blue = (brightness * 255.0 + 0.5);
|
|
break;
|
|
case 5:
|
|
red = (brightness * 255.0 + 0.5);
|
|
green = (p * 255.0 + 0.5);
|
|
blue = (q * 255.0 + 0.5);
|
|
break;
|
|
}
|
|
}
|
|
|
|
return { r : parseInt(red), g : parseInt(green) , b : parseInt(blue) };
|
|
}
|
|
|
|
Rico.Color.RGBtoHSB = function(r, g, b) {
|
|
|
|
var hue;
|
|
var saturation;
|
|
var brightness;
|
|
|
|
var cmax = (r > g) ? r : g;
|
|
if (b > cmax)
|
|
cmax = b;
|
|
|
|
var cmin = (r < g) ? r : g;
|
|
if (b < cmin)
|
|
cmin = b;
|
|
|
|
brightness = cmax / 255.0;
|
|
if (cmax != 0)
|
|
saturation = (cmax - cmin)/cmax;
|
|
else
|
|
saturation = 0;
|
|
|
|
if (saturation == 0)
|
|
hue = 0;
|
|
else {
|
|
var redc = (cmax - r)/(cmax - cmin);
|
|
var greenc = (cmax - g)/(cmax - cmin);
|
|
var bluec = (cmax - b)/(cmax - cmin);
|
|
|
|
if (r == cmax)
|
|
hue = bluec - greenc;
|
|
else if (g == cmax)
|
|
hue = 2.0 + redc - bluec;
|
|
else
|
|
hue = 4.0 + greenc - redc;
|
|
|
|
hue = hue / 6.0;
|
|
if (hue < 0)
|
|
hue = hue + 1.0;
|
|
}
|
|
|
|
return { h : hue, s : saturation, b : brightness };
|
|
}
|
|
|
|
|
|
//-------------------- ricoCorner.js
|
|
Rico.Corner = {
|
|
|
|
round: function(e, options) {
|
|
var e = $(e);
|
|
this._setOptions(options);
|
|
|
|
var color = this.options.color;
|
|
if ( this.options.color == "fromElement" )
|
|
color = this._background(e);
|
|
|
|
var bgColor = this.options.bgColor;
|
|
if ( this.options.bgColor == "fromParent" )
|
|
bgColor = this._background(e.offsetParent);
|
|
|
|
this._roundCornersImpl(e, color, bgColor);
|
|
},
|
|
|
|
_roundCornersImpl: function(e, color, bgColor) {
|
|
if(this.options.border)
|
|
this._renderBorder(e,bgColor);
|
|
if(this._isTopRounded())
|
|
this._roundTopCorners(e,color,bgColor);
|
|
if(this._isBottomRounded())
|
|
this._roundBottomCorners(e,color,bgColor);
|
|
},
|
|
|
|
_renderBorder: function(el,bgColor) {
|
|
var borderValue = "1px solid " + this._borderColor(bgColor);
|
|
var borderL = "border-left: " + borderValue;
|
|
var borderR = "border-right: " + borderValue;
|
|
var style = "style='" + borderL + ";" + borderR + "'";
|
|
el.innerHTML = "<div " + style + ">" + el.innerHTML + "</div>"
|
|
},
|
|
|
|
_roundTopCorners: function(el, color, bgColor) {
|
|
var corner = this._createCorner(bgColor);
|
|
for(var i=0 ; i < this.options.numSlices ; i++ )
|
|
corner.appendChild(this._createCornerSlice(color,bgColor,i,"top"));
|
|
el.style.paddingTop = 0;
|
|
el.insertBefore(corner,el.firstChild);
|
|
},
|
|
|
|
_roundBottomCorners: function(el, color, bgColor) {
|
|
var corner = this._createCorner(bgColor);
|
|
for(var i=(this.options.numSlices-1) ; i >= 0 ; i-- )
|
|
corner.appendChild(this._createCornerSlice(color,bgColor,i,"bottom"));
|
|
el.style.paddingBottom = 0;
|
|
el.appendChild(corner);
|
|
},
|
|
|
|
_createCorner: function(bgColor) {
|
|
var corner = document.createElement("div");
|
|
corner.style.backgroundColor = (this._isTransparent() ? "transparent" : bgColor);
|
|
return corner;
|
|
},
|
|
|
|
_createCornerSlice: function(color,bgColor, n, position) {
|
|
var slice = document.createElement("span");
|
|
|
|
var inStyle = slice.style;
|
|
inStyle.backgroundColor = color;
|
|
inStyle.display = "block";
|
|
inStyle.height = "1px";
|
|
inStyle.overflow = "hidden";
|
|
inStyle.fontSize = "1px";
|
|
|
|
var borderColor = this._borderColor(color,bgColor);
|
|
if ( this.options.border && n == 0 ) {
|
|
inStyle.borderTopStyle = "solid";
|
|
inStyle.borderTopWidth = "1px";
|
|
inStyle.borderLeftWidth = "0px";
|
|
inStyle.borderRightWidth = "0px";
|
|
inStyle.borderBottomWidth = "0px";
|
|
inStyle.height = "0px"; // assumes css compliant box model
|
|
inStyle.borderColor = borderColor;
|
|
}
|
|
else if(borderColor) {
|
|
inStyle.borderColor = borderColor;
|
|
inStyle.borderStyle = "solid";
|
|
inStyle.borderWidth = "0px 1px";
|
|
}
|
|
|
|
if ( !this.options.compact && (n == (this.options.numSlices-1)) )
|
|
inStyle.height = "2px";
|
|
|
|
this._setMargin(slice, n, position);
|
|
this._setBorder(slice, n, position);
|
|
return slice;
|
|
},
|
|
|
|
_setOptions: function(options) {
|
|
this.options = {
|
|
corners : "all",
|
|
color : "fromElement",
|
|
bgColor : "fromParent",
|
|
blend : true,
|
|
border : false,
|
|
compact : false
|
|
}
|
|
Object.extend(this.options, options || {});
|
|
|
|
this.options.numSlices = this.options.compact ? 2 : 4;
|
|
if ( this._isTransparent() )
|
|
this.options.blend = false;
|
|
},
|
|
|
|
_whichSideTop: function() {
|
|
if ( this._hasString(this.options.corners, "all", "top") )
|
|
return "";
|
|
|
|
if ( this.options.corners.indexOf("tl") >= 0 && this.options.corners.indexOf("tr") >= 0 )
|
|
return "";
|
|
|
|
if (this.options.corners.indexOf("tl") >= 0)
|
|
return "left";
|
|
else if (this.options.corners.indexOf("tr") >= 0)
|
|
return "right";
|
|
return "";
|
|
},
|
|
|
|
_whichSideBottom: function() {
|
|
if ( this._hasString(this.options.corners, "all", "bottom") )
|
|
return "";
|
|
|
|
if ( this.options.corners.indexOf("bl")>=0 && this.options.corners.indexOf("br")>=0 )
|
|
return "";
|
|
|
|
if(this.options.corners.indexOf("bl") >=0)
|
|
return "left";
|
|
else if(this.options.corners.indexOf("br")>=0)
|
|
return "right";
|
|
return "";
|
|
},
|
|
|
|
_borderColor : function(color,bgColor) {
|
|
if ( color == "transparent" )
|
|
return bgColor;
|
|
else if ( this.options.border )
|
|
return this.options.border;
|
|
else if ( this.options.blend )
|
|
return this._blend( bgColor, color );
|
|
else
|
|
return "";
|
|
},
|
|
|
|
|
|
_setMargin: function(el, n, corners) {
|
|
var marginSize = this._marginSize(n);
|
|
var whichSide = corners == "top" ? this._whichSideTop() : this._whichSideBottom();
|
|
|
|
if ( whichSide == "left" ) {
|
|
el.style.marginLeft = marginSize + "px"; el.style.marginRight = "0px";
|
|
}
|
|
else if ( whichSide == "right" ) {
|
|
el.style.marginRight = marginSize + "px"; el.style.marginLeft = "0px";
|
|
}
|
|
else {
|
|
el.style.marginLeft = marginSize + "px"; el.style.marginRight = marginSize + "px";
|
|
}
|
|
},
|
|
|
|
_setBorder: function(el,n,corners) {
|
|
var borderSize = this._borderSize(n);
|
|
var whichSide = corners == "top" ? this._whichSideTop() : this._whichSideBottom();
|
|
if ( whichSide == "left" ) {
|
|
el.style.borderLeftWidth = borderSize + "px"; el.style.borderRightWidth = "0px";
|
|
}
|
|
else if ( whichSide == "right" ) {
|
|
el.style.borderRightWidth = borderSize + "px"; el.style.borderLeftWidth = "0px";
|
|
}
|
|
else {
|
|
el.style.borderLeftWidth = borderSize + "px"; el.style.borderRightWidth = borderSize + "px";
|
|
}
|
|
if (this.options.border != false)
|
|
el.style.borderLeftWidth = borderSize + "px"; el.style.borderRightWidth = borderSize + "px";
|
|
},
|
|
|
|
_marginSize: function(n) {
|
|
if ( this._isTransparent() )
|
|
return 0;
|
|
|
|
var marginSizes = [ 5, 3, 2, 1 ];
|
|
var blendedMarginSizes = [ 3, 2, 1, 0 ];
|
|
var compactMarginSizes = [ 2, 1 ];
|
|
var smBlendedMarginSizes = [ 1, 0 ];
|
|
|
|
if ( this.options.compact && this.options.blend )
|
|
return smBlendedMarginSizes[n];
|
|
else if ( this.options.compact )
|
|
return compactMarginSizes[n];
|
|
else if ( this.options.blend )
|
|
return blendedMarginSizes[n];
|
|
else
|
|
return marginSizes[n];
|
|
},
|
|
|
|
_borderSize: function(n) {
|
|
var transparentBorderSizes = [ 5, 3, 2, 1 ];
|
|
var blendedBorderSizes = [ 2, 1, 1, 1 ];
|
|
var compactBorderSizes = [ 1, 0 ];
|
|
var actualBorderSizes = [ 0, 2, 0, 0 ];
|
|
|
|
if ( this.options.compact && (this.options.blend || this._isTransparent()) )
|
|
return 1;
|
|
else if ( this.options.compact )
|
|
return compactBorderSizes[n];
|
|
else if ( this.options.blend )
|
|
return blendedBorderSizes[n];
|
|
else if ( this.options.border )
|
|
return actualBorderSizes[n];
|
|
else if ( this._isTransparent() )
|
|
return transparentBorderSizes[n];
|
|
return 0;
|
|
},
|
|
|
|
_hasString: function(str) { for(var i=1 ; i<arguments.length ; i++) if (str.indexOf(arguments[i]) >= 0) return true; return false; },
|
|
_blend: function(c1, c2) { var cc1 = Rico.Color.createFromHex(c1); cc1.blend(Rico.Color.createFromHex(c2)); return cc1; },
|
|
_background: function(el) { try { return Rico.Color.createColorFromBackground(el).asHex(); } catch(err) { return "#ffffff"; } },
|
|
_isTransparent: function() { return this.options.color == "transparent"; },
|
|
_isTopRounded: function() { return this._hasString(this.options.corners, "all", "top", "tl", "tr"); },
|
|
_isBottomRounded: function() { return this._hasString(this.options.corners, "all", "bottom", "bl", "br"); },
|
|
_hasSingleTextChild: function(el) { return el.childNodes.length == 1 && el.childNodes[0].nodeType == 3; }
|
|
}
|
|
|
|
|
|
//-------------------- ricoDragAndDrop.js
|
|
Rico.DragAndDrop = Class.create();
|
|
|
|
Rico.DragAndDrop.prototype = {
|
|
|
|
initialize: function() {
|
|
this.dropZones = new Array();
|
|
this.draggables = new Array();
|
|
this.currentDragObjects = new Array();
|
|
this.dragElement = null;
|
|
this.lastSelectedDraggable = null;
|
|
this.currentDragObjectVisible = false;
|
|
this.interestedInMotionEvents = false;
|
|
this._mouseDown = this._mouseDownHandler.bindAsEventListener(this);
|
|
this._mouseMove = this._mouseMoveHandler.bindAsEventListener(this);
|
|
this._mouseUp = this._mouseUpHandler.bindAsEventListener(this);
|
|
},
|
|
|
|
registerDropZone: function(aDropZone) {
|
|
this.dropZones[ this.dropZones.length ] = aDropZone;
|
|
},
|
|
|
|
deregisterDropZone: function(aDropZone) {
|
|
var newDropZones = new Array();
|
|
var j = 0;
|
|
for ( var i = 0 ; i < this.dropZones.length ; i++ ) {
|
|
if ( this.dropZones[i] != aDropZone )
|
|
newDropZones[j++] = this.dropZones[i];
|
|
}
|
|
|
|
this.dropZones = newDropZones;
|
|
},
|
|
|
|
clearDropZones: function() {
|
|
this.dropZones = new Array();
|
|
},
|
|
|
|
registerDraggable: function( aDraggable ) {
|
|
this.draggables[ this.draggables.length ] = aDraggable;
|
|
this._addMouseDownHandler( aDraggable );
|
|
},
|
|
|
|
clearSelection: function() {
|
|
for ( var i = 0 ; i < this.currentDragObjects.length ; i++ )
|
|
this.currentDragObjects[i].deselect();
|
|
this.currentDragObjects = new Array();
|
|
this.lastSelectedDraggable = null;
|
|
},
|
|
|
|
hasSelection: function() {
|
|
return this.currentDragObjects.length > 0;
|
|
},
|
|
|
|
setStartDragFromElement: function( e, mouseDownElement ) {
|
|
this.origPos = RicoUtil.toDocumentPosition(mouseDownElement);
|
|
this.startx = e.screenX - this.origPos.x
|
|
this.starty = e.screenY - this.origPos.y
|
|
//this.startComponentX = e.layerX ? e.layerX : e.offsetX;
|
|
//this.startComponentY = e.layerY ? e.layerY : e.offsetY;
|
|
//this.adjustedForDraggableSize = false;
|
|
|
|
this.interestedInMotionEvents = this.hasSelection();
|
|
this._terminateEvent(e);
|
|
},
|
|
|
|
updateSelection: function( draggable, extendSelection ) {
|
|
if ( ! extendSelection )
|
|
this.clearSelection();
|
|
|
|
if ( draggable.isSelected() ) {
|
|
this.currentDragObjects.removeItem(draggable);
|
|
draggable.deselect();
|
|
if ( draggable == this.lastSelectedDraggable )
|
|
this.lastSelectedDraggable = null;
|
|
}
|
|
else {
|
|
this.currentDragObjects[ this.currentDragObjects.length ] = draggable;
|
|
draggable.select();
|
|
this.lastSelectedDraggable = draggable;
|
|
}
|
|
},
|
|
|
|
_mouseDownHandler: function(e) {
|
|
if ( arguments.length == 0 )
|
|
e = event;
|
|
|
|
// if not button 1 ignore it...
|
|
var nsEvent = e.which != undefined;
|
|
if ( (nsEvent && e.which != 1) || (!nsEvent && e.button != 1))
|
|
return;
|
|
|
|
var eventTarget = e.target ? e.target : e.srcElement;
|
|
var draggableObject = eventTarget.draggable;
|
|
|
|
var candidate = eventTarget;
|
|
while (draggableObject == null && candidate.parentNode) {
|
|
candidate = candidate.parentNode;
|
|
draggableObject = candidate.draggable;
|
|
}
|
|
|
|
if ( draggableObject == null )
|
|
return;
|
|
|
|
this.updateSelection( draggableObject, e.ctrlKey );
|
|
|
|
// clear the drop zones postion cache...
|
|
if ( this.hasSelection() )
|
|
for ( var i = 0 ; i < this.dropZones.length ; i++ )
|
|
this.dropZones[i].clearPositionCache();
|
|
|
|
this.setStartDragFromElement( e, draggableObject.getMouseDownHTMLElement() );
|
|
},
|
|
|
|
|
|
_mouseMoveHandler: function(e) {
|
|
var nsEvent = e.which != undefined;
|
|
if ( !this.interestedInMotionEvents ) {
|
|
//this._terminateEvent(e);
|
|
return;
|
|
}
|
|
|
|
if ( ! this.hasSelection() )
|
|
return;
|
|
|
|
if ( ! this.currentDragObjectVisible )
|
|
this._startDrag(e);
|
|
|
|
if ( !this.activatedDropZones )
|
|
this._activateRegisteredDropZones();
|
|
|
|
//if ( !this.adjustedForDraggableSize )
|
|
// this._adjustForDraggableSize(e);
|
|
|
|
this._updateDraggableLocation(e);
|
|
this._updateDropZonesHover(e);
|
|
|
|
this._terminateEvent(e);
|
|
},
|
|
|
|
_makeDraggableObjectVisible: function(e)
|
|
{
|
|
if ( !this.hasSelection() )
|
|
return;
|
|
|
|
var dragElement;
|
|
if ( this.currentDragObjects.length > 1 )
|
|
dragElement = this.currentDragObjects[0].getMultiObjectDragGUI(this.currentDragObjects);
|
|
else
|
|
dragElement = this.currentDragObjects[0].getSingleObjectDragGUI();
|
|
|
|
// go ahead and absolute position it...
|
|
if ( RicoUtil.getElementsComputedStyle(dragElement, "position") != "absolute" )
|
|
dragElement.style.position = "absolute";
|
|
|
|
// need to parent him into the document...
|
|
if ( dragElement.parentNode == null || dragElement.parentNode.nodeType == 11 )
|
|
document.body.appendChild(dragElement);
|
|
|
|
this.dragElement = dragElement;
|
|
this._updateDraggableLocation(e);
|
|
|
|
this.currentDragObjectVisible = true;
|
|
},
|
|
|
|
/**
|
|
_adjustForDraggableSize: function(e) {
|
|
var dragElementWidth = this.dragElement.offsetWidth;
|
|
var dragElementHeight = this.dragElement.offsetHeight;
|
|
if ( this.startComponentX > dragElementWidth )
|
|
this.startx -= this.startComponentX - dragElementWidth + 2;
|
|
if ( e.offsetY ) {
|
|
if ( this.startComponentY > dragElementHeight )
|
|
this.starty -= this.startComponentY - dragElementHeight + 2;
|
|
}
|
|
this.adjustedForDraggableSize = true;
|
|
},
|
|
**/
|
|
|
|
_leftOffset: function(e) {
|
|
return e.offsetX ? document.body.scrollLeft : 0
|
|
},
|
|
|
|
_topOffset: function(e) {
|
|
return e.offsetY ? document.body.scrollTop:0
|
|
},
|
|
|
|
|
|
_updateDraggableLocation: function(e) {
|
|
var dragObjectStyle = this.dragElement.style;
|
|
dragObjectStyle.left = (e.screenX + this._leftOffset(e) - this.startx) + "px"
|
|
dragObjectStyle.top = (e.screenY + this._topOffset(e) - this.starty) + "px";
|
|
},
|
|
|
|
_updateDropZonesHover: function(e) {
|
|
var n = this.dropZones.length;
|
|
for ( var i = 0 ; i < n ; i++ ) {
|
|
if ( ! this._mousePointInDropZone( e, this.dropZones[i] ) )
|
|
this.dropZones[i].hideHover();
|
|
}
|
|
|
|
for ( var i = 0 ; i < n ; i++ ) {
|
|
if ( this._mousePointInDropZone( e, this.dropZones[i] ) ) {
|
|
if ( this.dropZones[i].canAccept(this.currentDragObjects) )
|
|
this.dropZones[i].showHover();
|
|
}
|
|
}
|
|
},
|
|
|
|
_startDrag: function(e) {
|
|
for ( var i = 0 ; i < this.currentDragObjects.length ; i++ )
|
|
this.currentDragObjects[i].startDrag();
|
|
|
|
this._makeDraggableObjectVisible(e);
|
|
},
|
|
|
|
_mouseUpHandler: function(e) {
|
|
if ( ! this.hasSelection() )
|
|
return;
|
|
|
|
var nsEvent = e.which != undefined;
|
|
if ( (nsEvent && e.which != 1) || (!nsEvent && e.button != 1))
|
|
return;
|
|
|
|
this.interestedInMotionEvents = false;
|
|
|
|
if ( this.dragElement == null ) {
|
|
this._terminateEvent(e);
|
|
return;
|
|
}
|
|
|
|
if ( this._placeDraggableInDropZone(e) )
|
|
this._completeDropOperation(e);
|
|
else {
|
|
this._terminateEvent(e);
|
|
new Rico.Effect.Position( this.dragElement,
|
|
this.origPos.x,
|
|
this.origPos.y,
|
|
200,
|
|
20,
|
|
{ complete : this._doCancelDragProcessing.bind(this) } );
|
|
}
|
|
|
|
Event.stopObserving(document.body, "mousemove", this._mouseMove);
|
|
Event.stopObserving(document.body, "mouseup", this._mouseUp);
|
|
},
|
|
|
|
_retTrue: function () {
|
|
return true;
|
|
},
|
|
|
|
_completeDropOperation: function(e) {
|
|
if ( this.dragElement != this.currentDragObjects[0].getMouseDownHTMLElement() ) {
|
|
if ( this.dragElement.parentNode != null )
|
|
this.dragElement.parentNode.removeChild(this.dragElement);
|
|
}
|
|
|
|
this._deactivateRegisteredDropZones();
|
|
this._endDrag();
|
|
this.clearSelection();
|
|
this.dragElement = null;
|
|
this.currentDragObjectVisible = false;
|
|
this._terminateEvent(e);
|
|
},
|
|
|
|
_doCancelDragProcessing: function() {
|
|
this._cancelDrag();
|
|
|
|
if ( this.dragElement != this.currentDragObjects[0].getMouseDownHTMLElement() && this.dragElement)
|
|
if ( this.dragElement.parentNode != null )
|
|
this.dragElement.parentNode.removeChild(this.dragElement);
|
|
|
|
|
|
this._deactivateRegisteredDropZones();
|
|
this.dragElement = null;
|
|
this.currentDragObjectVisible = false;
|
|
},
|
|
|
|
_placeDraggableInDropZone: function(e) {
|
|
var foundDropZone = false;
|
|
var n = this.dropZones.length;
|
|
for ( var i = 0 ; i < n ; i++ ) {
|
|
if ( this._mousePointInDropZone( e, this.dropZones[i] ) ) {
|
|
if ( this.dropZones[i].canAccept(this.currentDragObjects) ) {
|
|
this.dropZones[i].hideHover();
|
|
this.dropZones[i].accept(this.currentDragObjects);
|
|
foundDropZone = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
return foundDropZone;
|
|
},
|
|
|
|
_cancelDrag: function() {
|
|
for ( var i = 0 ; i < this.currentDragObjects.length ; i++ )
|
|
this.currentDragObjects[i].cancelDrag();
|
|
},
|
|
|
|
_endDrag: function() {
|
|
for ( var i = 0 ; i < this.currentDragObjects.length ; i++ )
|
|
this.currentDragObjects[i].endDrag();
|
|
},
|
|
|
|
_mousePointInDropZone: function( e, dropZone ) {
|
|
|
|
var absoluteRect = dropZone.getAbsoluteRect();
|
|
|
|
return e.clientX > absoluteRect.left + this._leftOffset(e) &&
|
|
e.clientX < absoluteRect.right + this._leftOffset(e) &&
|
|
e.clientY > absoluteRect.top + this._topOffset(e) &&
|
|
e.clientY < absoluteRect.bottom + this._topOffset(e);
|
|
},
|
|
|
|
_addMouseDownHandler: function( aDraggable )
|
|
{
|
|
htmlElement = aDraggable.getMouseDownHTMLElement();
|
|
if ( htmlElement != null ) {
|
|
htmlElement.draggable = aDraggable;
|
|
Event.observe(htmlElement , "mousedown", this._onmousedown.bindAsEventListener(this));
|
|
Event.observe(htmlElement, "mousedown", this._mouseDown);
|
|
}
|
|
},
|
|
|
|
_activateRegisteredDropZones: function() {
|
|
var n = this.dropZones.length;
|
|
for ( var i = 0 ; i < n ; i++ ) {
|
|
var dropZone = this.dropZones[i];
|
|
if ( dropZone.canAccept(this.currentDragObjects) )
|
|
dropZone.activate();
|
|
}
|
|
|
|
this.activatedDropZones = true;
|
|
},
|
|
|
|
_deactivateRegisteredDropZones: function() {
|
|
var n = this.dropZones.length;
|
|
for ( var i = 0 ; i < n ; i++ )
|
|
this.dropZones[i].deactivate();
|
|
this.activatedDropZones = false;
|
|
},
|
|
|
|
_onmousedown: function () {
|
|
Event.observe(document.body, "mousemove", this._mouseMove);
|
|
Event.observe(document.body, "mouseup", this._mouseUp);
|
|
},
|
|
|
|
_terminateEvent: function(e) {
|
|
if ( e.stopPropagation != undefined )
|
|
e.stopPropagation();
|
|
else if ( e.cancelBubble != undefined )
|
|
e.cancelBubble = true;
|
|
|
|
if ( e.preventDefault != undefined )
|
|
e.preventDefault();
|
|
else
|
|
e.returnValue = false;
|
|
},
|
|
|
|
|
|
initializeEventHandlers: function() {
|
|
if ( typeof document.implementation != "undefined" &&
|
|
document.implementation.hasFeature("HTML", "1.0") &&
|
|
document.implementation.hasFeature("Events", "2.0") &&
|
|
document.implementation.hasFeature("CSS", "2.0") ) {
|
|
document.addEventListener("mouseup", this._mouseUpHandler.bindAsEventListener(this), false);
|
|
document.addEventListener("mousemove", this._mouseMoveHandler.bindAsEventListener(this), false);
|
|
}
|
|
else {
|
|
document.attachEvent( "onmouseup", this._mouseUpHandler.bindAsEventListener(this) );
|
|
document.attachEvent( "onmousemove", this._mouseMoveHandler.bindAsEventListener(this) );
|
|
}
|
|
}
|
|
}
|
|
|
|
var dndMgr = new Rico.DragAndDrop();
|
|
dndMgr.initializeEventHandlers();
|
|
|
|
|
|
//-------------------- ricoDraggable.js
|
|
Rico.Draggable = Class.create();
|
|
|
|
Rico.Draggable.prototype = {
|
|
|
|
initialize: function( type, htmlElement ) {
|
|
this.type = type;
|
|
this.htmlElement = $(htmlElement);
|
|
this.selected = false;
|
|
},
|
|
|
|
/**
|
|
* Returns the HTML element that should have a mouse down event
|
|
* added to it in order to initiate a drag operation
|
|
*
|
|
**/
|
|
getMouseDownHTMLElement: function() {
|
|
return this.htmlElement;
|
|
},
|
|
|
|
select: function() {
|
|
this.selected = true;
|
|
|
|
if ( this.showingSelected )
|
|
return;
|
|
|
|
var htmlElement = this.getMouseDownHTMLElement();
|
|
|
|
var color = Rico.Color.createColorFromBackground(htmlElement);
|
|
color.isBright() ? color.darken(0.033) : color.brighten(0.033);
|
|
|
|
this.saveBackground = RicoUtil.getElementsComputedStyle(htmlElement, "backgroundColor", "background-color");
|
|
htmlElement.style.backgroundColor = color.asHex();
|
|
this.showingSelected = true;
|
|
},
|
|
|
|
deselect: function() {
|
|
this.selected = false;
|
|
if ( !this.showingSelected )
|
|
return;
|
|
|
|
var htmlElement = this.getMouseDownHTMLElement();
|
|
|
|
htmlElement.style.backgroundColor = this.saveBackground;
|
|
this.showingSelected = false;
|
|
},
|
|
|
|
isSelected: function() {
|
|
return this.selected;
|
|
},
|
|
|
|
startDrag: function() {
|
|
},
|
|
|
|
cancelDrag: function() {
|
|
},
|
|
|
|
endDrag: function() {
|
|
},
|
|
|
|
getSingleObjectDragGUI: function() {
|
|
return this.htmlElement;
|
|
},
|
|
|
|
getMultiObjectDragGUI: function( draggables ) {
|
|
return this.htmlElement;
|
|
},
|
|
|
|
getDroppedGUI: function() {
|
|
return this.htmlElement;
|
|
},
|
|
|
|
toString: function() {
|
|
return this.type + ":" + this.htmlElement + ":";
|
|
}
|
|
|
|
}
|
|
|
|
|
|
//-------------------- ricoDropzone.js
|
|
Rico.Dropzone = Class.create();
|
|
|
|
Rico.Dropzone.prototype = {
|
|
|
|
initialize: function( htmlElement ) {
|
|
this.htmlElement = $(htmlElement);
|
|
this.absoluteRect = null;
|
|
},
|
|
|
|
getHTMLElement: function() {
|
|
return this.htmlElement;
|
|
},
|
|
|
|
clearPositionCache: function() {
|
|
this.absoluteRect = null;
|
|
},
|
|
|
|
getAbsoluteRect: function() {
|
|
if ( this.absoluteRect == null ) {
|
|
var htmlElement = this.getHTMLElement();
|
|
var pos = RicoUtil.toViewportPosition(htmlElement);
|
|
|
|
this.absoluteRect = {
|
|
top: pos.y,
|
|
left: pos.x,
|
|
bottom: pos.y + htmlElement.offsetHeight,
|
|
right: pos.x + htmlElement.offsetWidth
|
|
};
|
|
}
|
|
return this.absoluteRect;
|
|
},
|
|
|
|
activate: function() {
|
|
var htmlElement = this.getHTMLElement();
|
|
if (htmlElement == null || this.showingActive)
|
|
return;
|
|
|
|
this.showingActive = true;
|
|
this.saveBackgroundColor = htmlElement.style.backgroundColor;
|
|
|
|
var fallbackColor = "#ffea84";
|
|
var currentColor = Rico.Color.createColorFromBackground(htmlElement);
|
|
if ( currentColor == null )
|
|
htmlElement.style.backgroundColor = fallbackColor;
|
|
else {
|
|
currentColor.isBright() ? currentColor.darken(0.2) : currentColor.brighten(0.2);
|
|
htmlElement.style.backgroundColor = currentColor.asHex();
|
|
}
|
|
},
|
|
|
|
deactivate: function() {
|
|
var htmlElement = this.getHTMLElement();
|
|
if (htmlElement == null || !this.showingActive)
|
|
return;
|
|
|
|
htmlElement.style.backgroundColor = this.saveBackgroundColor;
|
|
this.showingActive = false;
|
|
this.saveBackgroundColor = null;
|
|
},
|
|
|
|
showHover: function() {
|
|
var htmlElement = this.getHTMLElement();
|
|
if ( htmlElement == null || this.showingHover )
|
|
return;
|
|
|
|
this.saveBorderWidth = htmlElement.style.borderWidth;
|
|
this.saveBorderStyle = htmlElement.style.borderStyle;
|
|
this.saveBorderColor = htmlElement.style.borderColor;
|
|
|
|
this.showingHover = true;
|
|
htmlElement.style.borderWidth = "1px";
|
|
htmlElement.style.borderStyle = "solid";
|
|
//htmlElement.style.borderColor = "#ff9900";
|
|
htmlElement.style.borderColor = "#ffff00";
|
|
},
|
|
|
|
hideHover: function() {
|
|
var htmlElement = this.getHTMLElement();
|
|
if ( htmlElement == null || !this.showingHover )
|
|
return;
|
|
|
|
htmlElement.style.borderWidth = this.saveBorderWidth;
|
|
htmlElement.style.borderStyle = this.saveBorderStyle;
|
|
htmlElement.style.borderColor = this.saveBorderColor;
|
|
this.showingHover = false;
|
|
},
|
|
|
|
canAccept: function(draggableObjects) {
|
|
return true;
|
|
},
|
|
|
|
accept: function(draggableObjects) {
|
|
var htmlElement = this.getHTMLElement();
|
|
if ( htmlElement == null )
|
|
return;
|
|
|
|
n = draggableObjects.length;
|
|
for ( var i = 0 ; i < n ; i++ )
|
|
{
|
|
var theGUI = draggableObjects[i].getDroppedGUI();
|
|
if ( RicoUtil.getElementsComputedStyle( theGUI, "position" ) == "absolute" )
|
|
{
|
|
theGUI.style.position = "static";
|
|
theGUI.style.top = "";
|
|
theGUI.style.top = "";
|
|
}
|
|
htmlElement.appendChild(theGUI);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//-------------------- ricoEffects.js
|
|
|
|
Rico.Effect = {};
|
|
|
|
Rico.Effect.SizeAndPosition = Class.create();
|
|
Rico.Effect.SizeAndPosition.prototype = {
|
|
|
|
initialize: function(element, x, y, w, h, duration, steps, options) {
|
|
this.element = $(element);
|
|
this.x = x;
|
|
this.y = y;
|
|
this.w = w;
|
|
this.h = h;
|
|
this.duration = duration;
|
|
this.steps = steps;
|
|
this.options = arguments[7] || {};
|
|
|
|
this.sizeAndPosition();
|
|
},
|
|
|
|
sizeAndPosition: function() {
|
|
if (this.isFinished()) {
|
|
if(this.options.complete) this.options.complete(this);
|
|
return;
|
|
}
|
|
|
|
if (this.timer)
|
|
clearTimeout(this.timer);
|
|
|
|
var stepDuration = Math.round(this.duration/this.steps) ;
|
|
|
|
// Get original values: x,y = top left corner; w,h = width height
|
|
var currentX = this.element.offsetLeft;
|
|
var currentY = this.element.offsetTop;
|
|
var currentW = this.element.offsetWidth;
|
|
var currentH = this.element.offsetHeight;
|
|
|
|
// If values not set, or zero, we do not modify them, and take original as final as well
|
|
this.x = (this.x) ? this.x : currentX;
|
|
this.y = (this.y) ? this.y : currentY;
|
|
this.w = (this.w) ? this.w : currentW;
|
|
this.h = (this.h) ? this.h : currentH;
|
|
|
|
// how much do we need to modify our values for each step?
|
|
var difX = this.steps > 0 ? (this.x - currentX)/this.steps : 0;
|
|
var difY = this.steps > 0 ? (this.y - currentY)/this.steps : 0;
|
|
var difW = this.steps > 0 ? (this.w - currentW)/this.steps : 0;
|
|
var difH = this.steps > 0 ? (this.h - currentH)/this.steps : 0;
|
|
|
|
this.moveBy(difX, difY);
|
|
this.resizeBy(difW, difH);
|
|
|
|
this.duration -= stepDuration;
|
|
this.steps--;
|
|
|
|
this.timer = setTimeout(this.sizeAndPosition.bind(this), stepDuration);
|
|
},
|
|
|
|
isFinished: function() {
|
|
return this.steps <= 0;
|
|
},
|
|
|
|
moveBy: function( difX, difY ) {
|
|
var currentLeft = this.element.offsetLeft;
|
|
var currentTop = this.element.offsetTop;
|
|
var intDifX = parseInt(difX);
|
|
var intDifY = parseInt(difY);
|
|
|
|
var style = this.element.style;
|
|
if ( intDifX != 0 )
|
|
style.left = (currentLeft + intDifX) + "px";
|
|
if ( intDifY != 0 )
|
|
style.top = (currentTop + intDifY) + "px";
|
|
},
|
|
|
|
resizeBy: function( difW, difH ) {
|
|
var currentWidth = this.element.offsetWidth;
|
|
var currentHeight = this.element.offsetHeight;
|
|
var intDifW = parseInt(difW);
|
|
var intDifH = parseInt(difH);
|
|
|
|
var style = this.element.style;
|
|
if ( intDifW != 0 )
|
|
style.width = (currentWidth + intDifW) + "px";
|
|
if ( intDifH != 0 )
|
|
style.height = (currentHeight + intDifH) + "px";
|
|
}
|
|
}
|
|
|
|
Rico.Effect.Size = Class.create();
|
|
Rico.Effect.Size.prototype = {
|
|
|
|
initialize: function(element, w, h, duration, steps, options) {
|
|
new Rico.Effect.SizeAndPosition(element, null, null, w, h, duration, steps, options);
|
|
}
|
|
}
|
|
|
|
Rico.Effect.Position = Class.create();
|
|
Rico.Effect.Position.prototype = {
|
|
|
|
initialize: function(element, x, y, duration, steps, options) {
|
|
new Rico.Effect.SizeAndPosition(element, x, y, null, null, duration, steps, options);
|
|
}
|
|
}
|
|
|
|
Rico.Effect.Round = Class.create();
|
|
Rico.Effect.Round.prototype = {
|
|
|
|
initialize: function(tagName, className, options) {
|
|
var elements = document.getElementsByTagAndClassName(tagName,className);
|
|
for ( var i = 0 ; i < elements.length ; i++ )
|
|
Rico.Corner.round( elements[i], options );
|
|
}
|
|
};
|
|
|
|
Rico.Effect.FadeTo = Class.create();
|
|
Rico.Effect.FadeTo.prototype = {
|
|
|
|
initialize: function( element, opacity, duration, steps, options) {
|
|
this.element = $(element);
|
|
this.opacity = opacity;
|
|
this.duration = duration;
|
|
this.steps = steps;
|
|
this.options = arguments[4] || {};
|
|
this.fadeTo();
|
|
},
|
|
|
|
fadeTo: function() {
|
|
if (this.isFinished()) {
|
|
if(this.options.complete) this.options.complete(this);
|
|
return;
|
|
}
|
|
|
|
if (this.timer)
|
|
clearTimeout(this.timer);
|
|
|
|
var stepDuration = Math.round(this.duration/this.steps) ;
|
|
var currentOpacity = this.getElementOpacity();
|
|
var delta = this.steps > 0 ? (this.opacity - currentOpacity)/this.steps : 0;
|
|
|
|
this.changeOpacityBy(delta);
|
|
this.duration -= stepDuration;
|
|
this.steps--;
|
|
|
|
this.timer = setTimeout(this.fadeTo.bind(this), stepDuration);
|
|
},
|
|
|
|
changeOpacityBy: function(v) {
|
|
var currentOpacity = this.getElementOpacity();
|
|
var newOpacity = Math.max(0, Math.min(currentOpacity+v, 1));
|
|
this.element.ricoOpacity = newOpacity;
|
|
|
|
this.element.style.filter = "alpha(opacity:"+Math.round(newOpacity*100)+")";
|
|
this.element.style.opacity = newOpacity; /*//*/;
|
|
},
|
|
|
|
isFinished: function() {
|
|
return this.steps <= 0;
|
|
},
|
|
|
|
getElementOpacity: function() {
|
|
if ( this.element.ricoOpacity == undefined ) {
|
|
var opacity = RicoUtil.getElementsComputedStyle(this.element, 'opacity');
|
|
this.element.ricoOpacity = opacity != undefined ? opacity : 1.0;
|
|
}
|
|
return parseFloat(this.element.ricoOpacity);
|
|
}
|
|
}
|
|
|
|
Rico.Effect.AccordionSize = Class.create();
|
|
|
|
Rico.Effect.AccordionSize.prototype = {
|
|
|
|
initialize: function(e1, e2, start, end, duration, steps, options) {
|
|
this.e1 = $(e1);
|
|
this.e2 = $(e2);
|
|
this.start = start;
|
|
this.end = end;
|
|
this.duration = duration;
|
|
this.steps = steps;
|
|
this.options = arguments[6] || {};
|
|
|
|
this.accordionSize();
|
|
},
|
|
|
|
accordionSize: function() {
|
|
|
|
if (this.isFinished()) {
|
|
// just in case there are round errors or such...
|
|
this.e1.style.height = this.start + "px";
|
|
this.e2.style.height = this.end + "px";
|
|
|
|
if(this.options.complete)
|
|
this.options.complete(this);
|
|
return;
|
|
}
|
|
|
|
if (this.timer)
|
|
clearTimeout(this.timer);
|
|
|
|
var stepDuration = Math.round(this.duration/this.steps) ;
|
|
|
|
var diff = this.steps > 0 ? (parseInt(this.e1.offsetHeight) - this.start)/this.steps : 0;
|
|
this.resizeBy(diff);
|
|
|
|
this.duration -= stepDuration;
|
|
this.steps--;
|
|
|
|
this.timer = setTimeout(this.accordionSize.bind(this), stepDuration);
|
|
},
|
|
|
|
isFinished: function() {
|
|
return this.steps <= 0;
|
|
},
|
|
|
|
resizeBy: function(diff) {
|
|
var h1Height = this.e1.offsetHeight;
|
|
var h2Height = this.e2.offsetHeight;
|
|
var intDiff = parseInt(diff);
|
|
if ( diff != 0 ) {
|
|
this.e1.style.height = (h1Height - intDiff) + "px";
|
|
this.e2.style.height = (h2Height + intDiff) + "px";
|
|
}
|
|
}
|
|
|
|
};
|
|
|
|
|
|
//-------------------- ricoLiveGrid.js
|
|
// Rico.LiveGridMetaData -----------------------------------------------------
|
|
|
|
Rico.LiveGridMetaData = Class.create();
|
|
|
|
Rico.LiveGridMetaData.prototype = {
|
|
|
|
initialize: function( pageSize, totalRows, columnCount, options ) {
|
|
this.pageSize = pageSize;
|
|
this.totalRows = totalRows;
|
|
this.setOptions(options);
|
|
this.ArrowHeight = 16;
|
|
this.columnCount = columnCount;
|
|
},
|
|
|
|
setOptions: function(options) {
|
|
this.options = {
|
|
largeBufferSize : 7.0, // 7 pages
|
|
nearLimitFactor : 0.2 // 20% of buffer
|
|
};
|
|
Object.extend(this.options, options || {});
|
|
},
|
|
|
|
getPageSize: function() {
|
|
return this.pageSize;
|
|
},
|
|
|
|
getTotalRows: function() {
|
|
return this.totalRows;
|
|
},
|
|
|
|
setTotalRows: function(n) {
|
|
this.totalRows = n;
|
|
},
|
|
|
|
getLargeBufferSize: function() {
|
|
return parseInt(this.options.largeBufferSize * this.pageSize);
|
|
},
|
|
|
|
getLimitTolerance: function() {
|
|
return parseInt(this.getLargeBufferSize() * this.options.nearLimitFactor);
|
|
}
|
|
};
|
|
|
|
// Rico.LiveGridScroller -----------------------------------------------------
|
|
|
|
Rico.LiveGridScroller = Class.create();
|
|
|
|
Rico.LiveGridScroller.prototype = {
|
|
|
|
initialize: function(liveGrid, viewPort) {
|
|
this.isIE = navigator.userAgent.toLowerCase().indexOf("msie") >= 0;
|
|
this.liveGrid = liveGrid;
|
|
this.metaData = liveGrid.metaData;
|
|
this.createScrollBar();
|
|
this.scrollTimeout = null;
|
|
this.lastScrollPos = 0;
|
|
this.viewPort = viewPort;
|
|
this.rows = new Array();
|
|
},
|
|
|
|
isUnPlugged: function() {
|
|
return this.scrollerDiv.onscroll == null;
|
|
},
|
|
|
|
plugin: function() {
|
|
this.scrollerDiv.onscroll = this.handleScroll.bindAsEventListener(this);
|
|
},
|
|
|
|
unplug: function() {
|
|
this.scrollerDiv.onscroll = null;
|
|
},
|
|
|
|
sizeIEHeaderHack: function() {
|
|
if ( !this.isIE ) return;
|
|
var headerTable = $(this.liveGrid.tableId + "_header");
|
|
if ( headerTable )
|
|
headerTable.rows[0].cells[0].style.width =
|
|
(headerTable.rows[0].cells[0].offsetWidth + 1) + "px";
|
|
},
|
|
|
|
createScrollBar: function() {
|
|
var visibleHeight = this.liveGrid.viewPort.visibleHeight();
|
|
// create the outer div...
|
|
this.scrollerDiv = document.createElement("div");
|
|
var scrollerStyle = this.scrollerDiv.style;
|
|
scrollerStyle.borderRight = this.liveGrid.options.scrollerBorderRight;
|
|
scrollerStyle.position = "relative";
|
|
scrollerStyle.left = this.isIE ? "-6px" : "-3px";
|
|
scrollerStyle.width = "19px";
|
|
scrollerStyle.height = visibleHeight + "px";
|
|
scrollerStyle.overflow = "auto";
|
|
|
|
// create the inner div...
|
|
this.heightDiv = document.createElement("div");
|
|
this.heightDiv.style.width = "1px";
|
|
|
|
this.heightDiv.style.height = parseInt(visibleHeight *
|
|
this.metaData.getTotalRows()/this.metaData.getPageSize()) + "px" ;
|
|
this.scrollerDiv.appendChild(this.heightDiv);
|
|
this.scrollerDiv.onscroll = this.handleScroll.bindAsEventListener(this);
|
|
|
|
var table = this.liveGrid.table;
|
|
table.parentNode.parentNode.insertBefore( this.scrollerDiv, table.parentNode.nextSibling );
|
|
var eventName = this.isIE ? "mousewheel" : "DOMMouseScroll";
|
|
Event.observe(table, eventName,
|
|
function(evt) {
|
|
if (evt.wheelDelta>=0 || evt.detail < 0) //wheel-up
|
|
this.scrollerDiv.scrollTop -= (2*this.viewPort.rowHeight);
|
|
else
|
|
this.scrollerDiv.scrollTop += (2*this.viewPort.rowHeight);
|
|
this.handleScroll(false);
|
|
}.bindAsEventListener(this),
|
|
false);
|
|
},
|
|
|
|
updateSize: function() {
|
|
var table = this.liveGrid.table;
|
|
var visibleHeight = this.viewPort.visibleHeight();
|
|
this.heightDiv.style.height = parseInt(visibleHeight *
|
|
this.metaData.getTotalRows()/this.metaData.getPageSize()) + "px";
|
|
},
|
|
|
|
rowToPixel: function(rowOffset) {
|
|
return (rowOffset / this.metaData.getTotalRows()) * this.heightDiv.offsetHeight
|
|
},
|
|
|
|
moveScroll: function(rowOffset) {
|
|
this.scrollerDiv.scrollTop = this.rowToPixel(rowOffset);
|
|
if ( this.metaData.options.onscroll )
|
|
this.metaData.options.onscroll( this.liveGrid, rowOffset );
|
|
},
|
|
|
|
handleScroll: function() {
|
|
if ( this.scrollTimeout )
|
|
clearTimeout( this.scrollTimeout );
|
|
|
|
var scrollDiff = this.lastScrollPos-this.scrollerDiv.scrollTop;
|
|
if (scrollDiff != 0.00) {
|
|
var r = this.scrollerDiv.scrollTop % this.viewPort.rowHeight;
|
|
if (r != 0) {
|
|
this.unplug();
|
|
if ( scrollDiff < 0 ) {
|
|
this.scrollerDiv.scrollTop += (this.viewPort.rowHeight-r);
|
|
} else {
|
|
this.scrollerDiv.scrollTop -= r;
|
|
}
|
|
this.plugin();
|
|
}
|
|
}
|
|
var contentOffset = parseInt(this.scrollerDiv.scrollTop / this.viewPort.rowHeight);
|
|
this.liveGrid.requestContentRefresh(contentOffset);
|
|
this.viewPort.scrollTo(this.scrollerDiv.scrollTop);
|
|
|
|
if ( this.metaData.options.onscroll )
|
|
this.metaData.options.onscroll( this.liveGrid, contentOffset );
|
|
|
|
this.scrollTimeout = setTimeout(this.scrollIdle.bind(this), 1200 );
|
|
this.lastScrollPos = this.scrollerDiv.scrollTop;
|
|
|
|
},
|
|
|
|
scrollIdle: function() {
|
|
if ( this.metaData.options.onscrollidle )
|
|
this.metaData.options.onscrollidle();
|
|
}
|
|
};
|
|
|
|
// Rico.LiveGridBuffer -----------------------------------------------------
|
|
|
|
Rico.LiveGridBuffer = Class.create();
|
|
|
|
Rico.LiveGridBuffer.prototype = {
|
|
|
|
initialize: function(metaData, viewPort) {
|
|
this.startPos = 0;
|
|
this.size = 0;
|
|
this.metaData = metaData;
|
|
this.rows = new Array();
|
|
this.updateInProgress = false;
|
|
this.viewPort = viewPort;
|
|
this.maxBufferSize = metaData.getLargeBufferSize() * 2;
|
|
this.maxFetchSize = metaData.getLargeBufferSize();
|
|
this.lastOffset = 0;
|
|
},
|
|
|
|
getBlankRow: function() {
|
|
if (!this.blankRow ) {
|
|
this.blankRow = new Array();
|
|
for ( var i=0; i < this.metaData.columnCount ; i++ )
|
|
this.blankRow[i] = " ";
|
|
}
|
|
return this.blankRow;
|
|
},
|
|
|
|
loadRows: function(ajaxResponse) {
|
|
var newRows = [];
|
|
$A(ajaxResponse.responseXML.getElementsByTagName('dmap.listingitem')).each(function (el) {
|
|
var row = [];
|
|
//,dmap.itemid,,dmap.itemname']
|
|
['dmap.itemname','daap.songtime','daap.songartist','daap.songalbum','daap.songgenre'].each(function (name) {
|
|
if ('daap.songtime' == name) {
|
|
var time = parseInt(Element.textContent(el.getElementsByTagName(name)[0]));
|
|
time = Math.round(time / 1000);
|
|
var seconds = time % 60;
|
|
seconds = (seconds < 10) ? '0'+seconds : seconds;
|
|
row.push(Math.floor(time/60)+ ':' + seconds);
|
|
} else {
|
|
row.push(Element.textContent(el.getElementsByTagName(name)[0]).truncate(10));
|
|
}
|
|
});
|
|
newRows.push(row);
|
|
});
|
|
return newRows;
|
|
|
|
var rowsElement = ajaxResponse.getElementsByTagName('rows')[0];
|
|
this.updateUI = rowsElement.getAttribute("update_ui") == "true"
|
|
var newRows = new Array()
|
|
var trs = rowsElement.getElementsByTagName("tr");
|
|
for ( var i=0 ; i < trs.length; i++ ) {
|
|
var row = newRows[i] = new Array();
|
|
var cells = trs[i].getElementsByTagName("td");
|
|
for ( var j=0; j < cells.length ; j++ ) {
|
|
var cell = cells[j];
|
|
var convertSpaces = cell.getAttribute("convert_spaces") == "true";
|
|
var cellContent = RicoUtil.getContentAsString(cell);
|
|
row[j] = convertSpaces ? this.convertSpaces(cellContent) : cellContent;
|
|
if (!row[j])
|
|
row[j] = ' ';
|
|
}
|
|
}
|
|
return newRows;
|
|
},
|
|
|
|
update: function(ajaxResponse, start) {
|
|
var newRows = this.loadRows(ajaxResponse);
|
|
if (this.rows.length == 0) { // initial load
|
|
this.rows = newRows;
|
|
this.size = this.rows.length;
|
|
this.startPos = start;
|
|
return;
|
|
}
|
|
if (start > this.startPos) { //appending
|
|
if (this.startPos + this.rows.length < start) {
|
|
this.rows = newRows;
|
|
this.startPos = start;//
|
|
} else {
|
|
this.rows = this.rows.concat( newRows.slice(0, newRows.length));
|
|
if (this.rows.length > this.maxBufferSize) {
|
|
var fullSize = this.rows.length;
|
|
this.rows = this.rows.slice(this.rows.length - this.maxBufferSize, this.rows.length)
|
|
this.startPos = this.startPos + (fullSize - this.rows.length);
|
|
}
|
|
}
|
|
} else { //prepending
|
|
if (start + newRows.length < this.startPos) {
|
|
this.rows = newRows;
|
|
} else {
|
|
this.rows = newRows.slice(0, this.startPos).concat(this.rows);
|
|
if (this.rows.length > this.maxBufferSize)
|
|
this.rows = this.rows.slice(0, this.maxBufferSize)
|
|
}
|
|
this.startPos = start;
|
|
}
|
|
this.size = this.rows.length;
|
|
},
|
|
|
|
clear: function() {
|
|
this.rows = new Array();
|
|
this.startPos = 0;
|
|
this.size = 0;
|
|
},
|
|
|
|
isOverlapping: function(start, size) {
|
|
return ((start < this.endPos()) && (this.startPos < start + size)) || (this.endPos() == 0)
|
|
},
|
|
|
|
isInRange: function(position) {
|
|
return (position >= this.startPos) && (position + this.metaData.getPageSize() <= this.endPos());
|
|
//&& this.size() != 0;
|
|
},
|
|
|
|
isNearingTopLimit: function(position) {
|
|
return position - this.startPos < this.metaData.getLimitTolerance();
|
|
},
|
|
|
|
endPos: function() {
|
|
return this.startPos + this.rows.length;
|
|
},
|
|
|
|
isNearingBottomLimit: function(position) {
|
|
return this.endPos() - (position + this.metaData.getPageSize()) < this.metaData.getLimitTolerance();
|
|
},
|
|
|
|
isAtTop: function() {
|
|
return this.startPos == 0;
|
|
},
|
|
|
|
isAtBottom: function() {
|
|
return this.endPos() == this.metaData.getTotalRows();
|
|
},
|
|
|
|
isNearingLimit: function(position) {
|
|
return ( !this.isAtTop() && this.isNearingTopLimit(position)) ||
|
|
( !this.isAtBottom() && this.isNearingBottomLimit(position) )
|
|
},
|
|
|
|
getFetchSize: function(offset) {
|
|
var adjustedOffset = this.getFetchOffset(offset);
|
|
var adjustedSize = 0;
|
|
if (adjustedOffset >= this.startPos) { //apending
|
|
var endFetchOffset = this.maxFetchSize + adjustedOffset;
|
|
if (endFetchOffset > this.metaData.totalRows)
|
|
endFetchOffset = this.metaData.totalRows;
|
|
adjustedSize = endFetchOffset - adjustedOffset;
|
|
if(adjustedOffset == 0 && adjustedSize < this.maxFetchSize){
|
|
adjustedSize = this.maxFetchSize;
|
|
}
|
|
} else {//prepending
|
|
var adjustedSize = this.startPos - adjustedOffset;
|
|
if (adjustedSize > this.maxFetchSize)
|
|
adjustedSize = this.maxFetchSize;
|
|
}
|
|
return adjustedSize;
|
|
},
|
|
|
|
getFetchOffset: function(offset) {
|
|
var adjustedOffset = offset;
|
|
if (offset > this.startPos) //apending
|
|
adjustedOffset = (offset > this.endPos()) ? offset : this.endPos();
|
|
else { //prepending
|
|
if (offset + this.maxFetchSize >= this.startPos) {
|
|
var adjustedOffset = this.startPos - this.maxFetchSize;
|
|
if (adjustedOffset < 0)
|
|
adjustedOffset = 0;
|
|
}
|
|
}
|
|
this.lastOffset = adjustedOffset;
|
|
return adjustedOffset;
|
|
},
|
|
|
|
getRows: function(start, count) {
|
|
var begPos = start - this.startPos
|
|
var endPos = begPos + count
|
|
|
|
// er? need more data...
|
|
if ( endPos > this.size )
|
|
endPos = this.size
|
|
|
|
var results = new Array()
|
|
var index = 0;
|
|
for ( var i=begPos ; i < endPos; i++ ) {
|
|
results[index++] = this.rows[i]
|
|
}
|
|
return results
|
|
},
|
|
|
|
convertSpaces: function(s) {
|
|
return s.split(" ").join(" ");
|
|
}
|
|
|
|
};
|
|
|
|
|
|
//Rico.GridViewPort --------------------------------------------------
|
|
Rico.GridViewPort = Class.create();
|
|
|
|
Rico.GridViewPort.prototype = {
|
|
|
|
initialize: function(table, rowHeight, visibleRows, buffer, liveGrid) {
|
|
this.lastDisplayedStartPos = 0;
|
|
this.div = table.parentNode;
|
|
this.table = table
|
|
this.rowHeight = rowHeight;
|
|
this.div.style.height = (this.rowHeight * visibleRows) + "px";
|
|
this.div.style.overflow = "hidden";
|
|
this.buffer = buffer;
|
|
this.liveGrid = liveGrid;
|
|
this.visibleRows = visibleRows + 1;
|
|
this.lastPixelOffset = 0;
|
|
this.startPos = 0;
|
|
},
|
|
|
|
populateRow: function(htmlRow, row) {
|
|
for (var j=0; j < row.length; j++) {
|
|
htmlRow.cells[j].innerHTML = row[j]
|
|
}
|
|
},
|
|
|
|
bufferChanged: function() {
|
|
this.refreshContents( parseInt(this.lastPixelOffset / this.rowHeight));
|
|
},
|
|
|
|
clearRows: function() {
|
|
if (!this.isBlank) {
|
|
this.liveGrid.table.className = this.liveGrid.options.loadingClass;
|
|
for (var i=0; i < this.visibleRows; i++)
|
|
this.populateRow(this.table.rows[i], this.buffer.getBlankRow());
|
|
this.isBlank = true;
|
|
}
|
|
},
|
|
|
|
clearContents: function() {
|
|
this.clearRows();
|
|
this.scrollTo(0);
|
|
this.startPos = 0;
|
|
this.lastStartPos = -1;
|
|
},
|
|
|
|
refreshContents: function(startPos) {
|
|
if (startPos == this.lastRowPos && !this.isPartialBlank && !this.isBlank) {
|
|
return;
|
|
}
|
|
if ((startPos + this.visibleRows < this.buffer.startPos)
|
|
|| (this.buffer.startPos + this.buffer.size < startPos)
|
|
|| (this.buffer.size == 0)) {
|
|
this.clearRows();
|
|
return;
|
|
}
|
|
this.isBlank = false;
|
|
var viewPrecedesBuffer = this.buffer.startPos > startPos
|
|
var contentStartPos = viewPrecedesBuffer ? this.buffer.startPos: startPos;
|
|
var contentEndPos = (this.buffer.startPos + this.buffer.size < startPos + this.visibleRows)
|
|
? this.buffer.startPos + this.buffer.size
|
|
: startPos + this.visibleRows;
|
|
var rowSize = contentEndPos - contentStartPos;
|
|
var rows = this.buffer.getRows(contentStartPos, rowSize );
|
|
var blankSize = this.visibleRows - rowSize;
|
|
var blankOffset = viewPrecedesBuffer ? 0: rowSize;
|
|
var contentOffset = viewPrecedesBuffer ? blankSize: 0;
|
|
|
|
for (var i=0; i < rows.length; i++) {//initialize what we have
|
|
this.populateRow(this.table.rows[i + contentOffset], rows[i]);
|
|
}
|
|
for (var i=0; i < blankSize; i++) {// blank out the rest
|
|
this.populateRow(this.table.rows[i + blankOffset], this.buffer.getBlankRow());
|
|
}
|
|
this.isPartialBlank = blankSize > 0;
|
|
this.lastRowPos = startPos;
|
|
|
|
this.liveGrid.table.className = this.liveGrid.options.tableClass;
|
|
// Check if user has set a onRefreshComplete function
|
|
var onRefreshComplete = this.liveGrid.options.onRefreshComplete;
|
|
if (onRefreshComplete != null)
|
|
onRefreshComplete();
|
|
},
|
|
|
|
scrollTo: function(pixelOffset) {
|
|
if (this.lastPixelOffset == pixelOffset)
|
|
return;
|
|
|
|
this.refreshContents(parseInt(pixelOffset / this.rowHeight))
|
|
this.div.scrollTop = pixelOffset % this.rowHeight
|
|
|
|
this.lastPixelOffset = pixelOffset;
|
|
},
|
|
|
|
visibleHeight: function() {
|
|
return parseInt(RicoUtil.getElementsComputedStyle(this.div, 'height'));
|
|
}
|
|
|
|
};
|
|
|
|
|
|
Rico.LiveGridRequest = Class.create();
|
|
Rico.LiveGridRequest.prototype = {
|
|
initialize: function( requestOffset, options ) {
|
|
this.requestOffset = requestOffset;
|
|
}
|
|
};
|
|
|
|
// Rico.LiveGrid -----------------------------------------------------
|
|
|
|
Rico.LiveGrid = Class.create();
|
|
|
|
Rico.LiveGrid.prototype = {
|
|
|
|
initialize: function( tableId, visibleRows, totalRows, url, options, ajaxOptions ) {
|
|
|
|
this.options = {
|
|
tableClass: $(tableId).className,
|
|
loadingClass: $(tableId).className,
|
|
scrollerBorderRight: '1px solid #ababab',
|
|
bufferTimeout: 20000,
|
|
sortAscendImg: 'images/sort_asc.gif',
|
|
sortDescendImg: 'images/sort_desc.gif',
|
|
sortImageWidth: 9,
|
|
sortImageHeight: 5,
|
|
ajaxSortURLParms: [],
|
|
onRefreshComplete: null,
|
|
requestParameters: null,
|
|
inlineStyles: true
|
|
};
|
|
Object.extend(this.options, options || {});
|
|
|
|
this.ajaxOptions = {parameters: null};
|
|
Object.extend(this.ajaxOptions, ajaxOptions || {});
|
|
|
|
this.tableId = tableId;
|
|
this.table = $(tableId);
|
|
|
|
this.addLiveGridHtml();
|
|
|
|
var columnCount = this.table.rows[0].cells.length;
|
|
this.metaData = new Rico.LiveGridMetaData(visibleRows, totalRows, columnCount, options);
|
|
this.buffer = new Rico.LiveGridBuffer(this.metaData);
|
|
|
|
var rowCount = this.table.rows.length;
|
|
this.viewPort = new Rico.GridViewPort(this.table,
|
|
this.table.offsetHeight/rowCount,
|
|
visibleRows,
|
|
this.buffer, this);
|
|
this.scroller = new Rico.LiveGridScroller(this,this.viewPort);
|
|
this.options.sortHandler = this.sortHandler.bind(this);
|
|
|
|
if ( $(tableId + '_header') )
|
|
this.sort = new Rico.LiveGridSort(tableId + '_header', this.options)
|
|
|
|
this.processingRequest = null;
|
|
this.unprocessedRequest = null;
|
|
|
|
this.initAjax(url);
|
|
if ( this.options.prefetchBuffer || this.options.prefetchOffset > 0) {
|
|
var offset = 0;
|
|
if (this.options.offset ) {
|
|
offset = this.options.offset;
|
|
this.scroller.moveScroll(offset);
|
|
this.viewPort.scrollTo(this.scroller.rowToPixel(offset));
|
|
}
|
|
if (this.options.sortCol) {
|
|
this.sortCol = options.sortCol;
|
|
this.sortDir = options.sortDir;
|
|
}
|
|
this.requestContentRefresh(offset);
|
|
}
|
|
},
|
|
|
|
addLiveGridHtml: function() {
|
|
// Check to see if need to create a header table.
|
|
if (this.table.getElementsByTagName("thead").length > 0){
|
|
// Create Table this.tableId+'_header'
|
|
var tableHeader = this.table.cloneNode(true);
|
|
tableHeader.setAttribute('id', this.tableId+'_header');
|
|
tableHeader.setAttribute('class', this.table.className+'_header');
|
|
|
|
// Clean up and insert
|
|
for( var i = 0; i < tableHeader.tBodies.length; i++ )
|
|
tableHeader.removeChild(tableHeader.tBodies[i]);
|
|
this.table.deleteTHead();
|
|
this.table.parentNode.insertBefore(tableHeader,this.table);
|
|
}
|
|
|
|
new Insertion.Before(this.table, "<div id='"+this.tableId+"_container'></div>");
|
|
this.table.previousSibling.appendChild(this.table);
|
|
new Insertion.Before(this.table,"<div id='"+this.tableId+"_viewport' style='float:left;'></div>");
|
|
this.table.previousSibling.appendChild(this.table);
|
|
},
|
|
|
|
|
|
resetContents: function() {
|
|
this.scroller.moveScroll(0);
|
|
this.buffer.clear();
|
|
this.viewPort.clearContents();
|
|
},
|
|
|
|
sortHandler: function(column) {
|
|
if(!column) return ;
|
|
this.sortCol = column.name;
|
|
this.sortDir = column.currentSort;
|
|
|
|
this.resetContents();
|
|
this.requestContentRefresh(0)
|
|
},
|
|
|
|
adjustRowSize: function() {
|
|
|
|
},
|
|
|
|
setTotalRows: function( newTotalRows ) {
|
|
this.resetContents();
|
|
this.metaData.setTotalRows(newTotalRows);
|
|
this.scroller.updateSize();
|
|
},
|
|
|
|
initAjax: function(url) {
|
|
ajaxEngine.registerRequest( this.tableId + '_request', url );
|
|
ajaxEngine.registerAjaxObject( this.tableId + '_updater', this );
|
|
},
|
|
|
|
invokeAjax: function() {
|
|
},
|
|
|
|
handleTimedOut: function() {
|
|
//server did not respond in 4 seconds... assume that there could have been
|
|
//an error or something, and allow requests to be processed again...
|
|
this.processingRequest = null;
|
|
this.processQueuedRequest();
|
|
},
|
|
|
|
fetchBuffer: function(offset) {
|
|
if ( this.buffer.isInRange(offset) &&
|
|
!this.buffer.isNearingLimit(offset)) {
|
|
return;
|
|
}
|
|
if (this.processingRequest) {
|
|
this.unprocessedRequest = new Rico.LiveGridRequest(offset);
|
|
return;
|
|
}
|
|
var bufferStartPos = this.buffer.getFetchOffset(offset);
|
|
this.processingRequest = new Rico.LiveGridRequest(offset);
|
|
this.processingRequest.bufferOffset = bufferStartPos;
|
|
var fetchSize = this.buffer.getFetchSize(offset);
|
|
var partialLoaded = false;
|
|
|
|
var queryString
|
|
if (this.options.requestParameters)
|
|
queryString = this._createQueryString(this.options.requestParameters, 0);
|
|
|
|
queryString = (queryString == null) ? '' : queryString+'&';
|
|
queryString = queryString+'id='+this.tableId+'&page_size='+fetchSize+'&offset='+bufferStartPos;
|
|
if (this.sortCol)
|
|
queryString = queryString+'&sort_col='+escape(this.sortCol)+'&sort_dir='+this.sortDir;
|
|
|
|
this.ajaxOptions.parameters = queryString;
|
|
var end = bufferStartPos+fetchSize;
|
|
new Ajax.Request(Query.getFullUrl('songs')+'&index='+bufferStartPos+'-'+end,{method: 'get',onComplete: this.ajaxUpdate.bind(this)});
|
|
// ajaxEngine.sendRequest( this.tableId + '_request', this.ajaxOptions );
|
|
|
|
this.timeoutHandler = setTimeout( this.handleTimedOut.bind(this), this.options.bufferTimeout);
|
|
|
|
},
|
|
|
|
setRequestParams: function() {
|
|
this.options.requestParameters = [];
|
|
for ( var i=0 ; i < arguments.length ; i++ )
|
|
this.options.requestParameters[i] = arguments[i];
|
|
},
|
|
|
|
requestContentRefresh: function(contentOffset) {
|
|
this.fetchBuffer(contentOffset);
|
|
},
|
|
|
|
ajaxUpdate: function(ajaxResponse) {
|
|
try {
|
|
clearTimeout( this.timeoutHandler );
|
|
var totalRows = ajaxResponse.responseXML.getElementsByTagName('dmap.specifiedtotalcount')[0].firstChild.nodeValue;
|
|
if (this.metaData.getTotalRows() != totalRows) {
|
|
this.setTotalRows(totalRows);
|
|
}
|
|
this.buffer.update(ajaxResponse,this.processingRequest.bufferOffset);
|
|
this.viewPort.bufferChanged();
|
|
}
|
|
catch(err) {}
|
|
finally {this.processingRequest = null; }
|
|
this.processQueuedRequest();
|
|
},
|
|
|
|
_createQueryString: function( theArgs, offset ) {
|
|
var queryString = ""
|
|
if (!theArgs)
|
|
return queryString;
|
|
|
|
for ( var i = offset ; i < theArgs.length ; i++ ) {
|
|
if ( i != offset )
|
|
queryString += "&";
|
|
|
|
var anArg = theArgs[i];
|
|
|
|
if ( anArg.name != undefined && anArg.value != undefined ) {
|
|
queryString += anArg.name + "=" + escape(anArg.value);
|
|
}
|
|
else {
|
|
var ePos = anArg.indexOf('=');
|
|
var argName = anArg.substring( 0, ePos );
|
|
var argValue = anArg.substring( ePos + 1 );
|
|
queryString += argName + "=" + escape(argValue);
|
|
}
|
|
}
|
|
return queryString;
|
|
},
|
|
|
|
processQueuedRequest: function() {
|
|
if (this.unprocessedRequest != null) {
|
|
this.requestContentRefresh(this.unprocessedRequest.requestOffset);
|
|
this.unprocessedRequest = null
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
//-------------------- ricoLiveGridSort.js
|
|
Rico.LiveGridSort = Class.create();
|
|
|
|
Rico.LiveGridSort.prototype = {
|
|
|
|
initialize: function(headerTableId, options) {
|
|
this.headerTableId = headerTableId;
|
|
this.headerTable = $(headerTableId);
|
|
this.options = options;
|
|
this.setOptions();
|
|
this.applySortBehavior();
|
|
|
|
if ( this.options.sortCol ) {
|
|
this.setSortUI( this.options.sortCol, this.options.sortDir );
|
|
}
|
|
},
|
|
|
|
setSortUI: function( columnName, sortDirection ) {
|
|
var cols = this.options.columns;
|
|
for ( var i = 0 ; i < cols.length ; i++ ) {
|
|
if ( cols[i].name == columnName ) {
|
|
this.setColumnSort(i, sortDirection);
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
|
|
setOptions: function() {
|
|
// preload the images...
|
|
new Image().src = this.options.sortAscendImg;
|
|
new Image().src = this.options.sortDescendImg;
|
|
|
|
this.sort = this.options.sortHandler;
|
|
if ( !this.options.columns )
|
|
this.options.columns = this.introspectForColumnInfo();
|
|
else {
|
|
// allow client to pass { columns: [ ["a", true], ["b", false] ] }
|
|
// and convert to an array of Rico.TableColumn objs...
|
|
this.options.columns = this.convertToTableColumns(this.options.columns);
|
|
}
|
|
},
|
|
|
|
applySortBehavior: function() {
|
|
var headerRow = this.headerTable.rows[0];
|
|
var headerCells = headerRow.cells;
|
|
for ( var i = 0 ; i < headerCells.length ; i++ ) {
|
|
this.addSortBehaviorToColumn( i, headerCells[i] );
|
|
}
|
|
},
|
|
|
|
addSortBehaviorToColumn: function( n, cell ) {
|
|
if ( this.options.columns[n].isSortable() ) {
|
|
cell.id = this.headerTableId + '_' + n;
|
|
cell.style.cursor = 'pointer';
|
|
cell.onclick = this.headerCellClicked.bindAsEventListener(this);
|
|
cell.innerHTML = cell.innerHTML + '<span id="' + this.headerTableId + '_img_' + n + '">'
|
|
+ ' </span>';
|
|
}
|
|
},
|
|
|
|
// event handler....
|
|
headerCellClicked: function(evt) {
|
|
var eventTarget = evt.target ? evt.target : evt.srcElement;
|
|
var cellId = eventTarget.id;
|
|
var columnNumber = parseInt(cellId.substring( cellId.lastIndexOf('_') + 1 ));
|
|
var sortedColumnIndex = this.getSortedColumnIndex();
|
|
if ( sortedColumnIndex != -1 ) {
|
|
if ( sortedColumnIndex != columnNumber ) {
|
|
this.removeColumnSort(sortedColumnIndex);
|
|
this.setColumnSort(columnNumber, Rico.TableColumn.SORT_ASC);
|
|
}
|
|
else
|
|
this.toggleColumnSort(sortedColumnIndex);
|
|
}
|
|
else
|
|
this.setColumnSort(columnNumber, Rico.TableColumn.SORT_ASC);
|
|
|
|
if (this.options.sortHandler) {
|
|
this.options.sortHandler(this.options.columns[columnNumber]);
|
|
}
|
|
},
|
|
|
|
removeColumnSort: function(n) {
|
|
this.options.columns[n].setUnsorted();
|
|
this.setSortImage(n);
|
|
},
|
|
|
|
setColumnSort: function(n, direction) {
|
|
if(isNaN(n)) return ;
|
|
this.options.columns[n].setSorted(direction);
|
|
this.setSortImage(n);
|
|
},
|
|
|
|
toggleColumnSort: function(n) {
|
|
this.options.columns[n].toggleSort();
|
|
this.setSortImage(n);
|
|
},
|
|
|
|
setSortImage: function(n) {
|
|
var sortDirection = this.options.columns[n].getSortDirection();
|
|
|
|
var sortImageSpan = $( this.headerTableId + '_img_' + n );
|
|
if ( sortDirection == Rico.TableColumn.UNSORTED )
|
|
sortImageSpan.innerHTML = ' ';
|
|
else if ( sortDirection == Rico.TableColumn.SORT_ASC )
|
|
sortImageSpan.innerHTML = ' <img width="' + this.options.sortImageWidth + '" ' +
|
|
'height="'+ this.options.sortImageHeight + '" ' +
|
|
'src="' + this.options.sortAscendImg + '"/>';
|
|
else if ( sortDirection == Rico.TableColumn.SORT_DESC )
|
|
sortImageSpan.innerHTML = ' <img width="' + this.options.sortImageWidth + '" ' +
|
|
'height="'+ this.options.sortImageHeight + '" ' +
|
|
'src="' + this.options.sortDescendImg + '"/>';
|
|
},
|
|
|
|
getSortedColumnIndex: function() {
|
|
var cols = this.options.columns;
|
|
for ( var i = 0 ; i < cols.length ; i++ ) {
|
|
if ( cols[i].isSorted() )
|
|
return i;
|
|
}
|
|
|
|
return -1;
|
|
},
|
|
|
|
introspectForColumnInfo: function() {
|
|
var columns = new Array();
|
|
var headerRow = this.headerTable.rows[0];
|
|
var headerCells = headerRow.cells;
|
|
for ( var i = 0 ; i < headerCells.length ; i++ )
|
|
columns.push( new Rico.TableColumn( this.deriveColumnNameFromCell(headerCells[i],i), true ) );
|
|
return columns;
|
|
},
|
|
|
|
convertToTableColumns: function(cols) {
|
|
var columns = new Array();
|
|
for ( var i = 0 ; i < cols.length ; i++ )
|
|
columns.push( new Rico.TableColumn( cols[i][0], cols[i][1] ) );
|
|
return columns;
|
|
},
|
|
|
|
deriveColumnNameFromCell: function(cell,columnNumber) {
|
|
var cellContent = cell.innerText != undefined ? cell.innerText : cell.textContent;
|
|
return cellContent ? cellContent.toLowerCase().split(' ').join('_') : "col_" + columnNumber;
|
|
}
|
|
};
|
|
|
|
Rico.TableColumn = Class.create();
|
|
|
|
Rico.TableColumn.UNSORTED = 0;
|
|
Rico.TableColumn.SORT_ASC = "ASC";
|
|
Rico.TableColumn.SORT_DESC = "DESC";
|
|
|
|
Rico.TableColumn.prototype = {
|
|
initialize: function(name, sortable) {
|
|
this.name = name;
|
|
this.sortable = sortable;
|
|
this.currentSort = Rico.TableColumn.UNSORTED;
|
|
},
|
|
|
|
isSortable: function() {
|
|
return this.sortable;
|
|
},
|
|
|
|
isSorted: function() {
|
|
return this.currentSort != Rico.TableColumn.UNSORTED;
|
|
},
|
|
|
|
getSortDirection: function() {
|
|
return this.currentSort;
|
|
},
|
|
|
|
toggleSort: function() {
|
|
if ( this.currentSort == Rico.TableColumn.UNSORTED || this.currentSort == Rico.TableColumn.SORT_DESC )
|
|
this.currentSort = Rico.TableColumn.SORT_ASC;
|
|
else if ( this.currentSort == Rico.TableColumn.SORT_ASC )
|
|
this.currentSort = Rico.TableColumn.SORT_DESC;
|
|
},
|
|
|
|
setUnsorted: function(direction) {
|
|
this.setSorted(Rico.TableColumn.UNSORTED);
|
|
},
|
|
|
|
setSorted: function(direction) {
|
|
// direction must by one of Rico.TableColumn.UNSORTED, .SORT_ASC, or .SORT_DESC...
|
|
this.currentSort = direction;
|
|
}
|
|
|
|
};
|
|
|
|
|
|
//-------------------- ricoUtil.js
|
|
var RicoUtil = {
|
|
|
|
getElementsComputedStyle: function ( htmlElement, cssProperty, mozillaEquivalentCSS) {
|
|
if ( arguments.length == 2 )
|
|
mozillaEquivalentCSS = cssProperty;
|
|
|
|
var el = $(htmlElement);
|
|
if ( el.currentStyle )
|
|
return el.currentStyle[cssProperty];
|
|
else
|
|
return document.defaultView.getComputedStyle(el, null).getPropertyValue(mozillaEquivalentCSS);
|
|
},
|
|
|
|
createXmlDocument : function() {
|
|
if (document.implementation && document.implementation.createDocument) {
|
|
var doc = document.implementation.createDocument("", "", null);
|
|
|
|
if (doc.readyState == null) {
|
|
doc.readyState = 1;
|
|
doc.addEventListener("load", function () {
|
|
doc.readyState = 4;
|
|
if (typeof doc.onreadystatechange == "function")
|
|
doc.onreadystatechange();
|
|
}, false);
|
|
}
|
|
|
|
return doc;
|
|
}
|
|
|
|
if (window.ActiveXObject)
|
|
return Try.these(
|
|
function() { return new ActiveXObject('MSXML2.DomDocument') },
|
|
function() { return new ActiveXObject('Microsoft.DomDocument')},
|
|
function() { return new ActiveXObject('MSXML.DomDocument') },
|
|
function() { return new ActiveXObject('MSXML3.DomDocument') }
|
|
) || false;
|
|
|
|
return null;
|
|
},
|
|
|
|
getContentAsString: function( parentNode ) {
|
|
return parentNode.xml != undefined ?
|
|
this._getContentAsStringIE(parentNode) :
|
|
this._getContentAsStringMozilla(parentNode);
|
|
},
|
|
|
|
_getContentAsStringIE: function(parentNode) {
|
|
var contentStr = "";
|
|
for ( var i = 0 ; i < parentNode.childNodes.length ; i++ ) {
|
|
var n = parentNode.childNodes[i];
|
|
if (n.nodeType == 4) {
|
|
contentStr += n.nodeValue;
|
|
}
|
|
else {
|
|
contentStr += n.xml;
|
|
}
|
|
}
|
|
return contentStr;
|
|
},
|
|
|
|
_getContentAsStringMozilla: function(parentNode) {
|
|
var xmlSerializer = new XMLSerializer();
|
|
var contentStr = "";
|
|
for ( var i = 0 ; i < parentNode.childNodes.length ; i++ ) {
|
|
var n = parentNode.childNodes[i];
|
|
if (n.nodeType == 4) { // CDATA node
|
|
contentStr += n.nodeValue;
|
|
}
|
|
else {
|
|
contentStr += xmlSerializer.serializeToString(n);
|
|
}
|
|
}
|
|
return contentStr;
|
|
},
|
|
|
|
toViewportPosition: function(element) {
|
|
return this._toAbsolute(element,true);
|
|
},
|
|
|
|
toDocumentPosition: function(element) {
|
|
return this._toAbsolute(element,false);
|
|
},
|
|
|
|
/**
|
|
* Compute the elements position in terms of the window viewport
|
|
* so that it can be compared to the position of the mouse (dnd)
|
|
* This is additions of all the offsetTop,offsetLeft values up the
|
|
* offsetParent hierarchy, ...taking into account any scrollTop,
|
|
* scrollLeft values along the way...
|
|
*
|
|
* IE has a bug reporting a correct offsetLeft of elements within a
|
|
* a relatively positioned parent!!!
|
|
**/
|
|
_toAbsolute: function(element,accountForDocScroll) {
|
|
|
|
if ( navigator.userAgent.toLowerCase().indexOf("msie") == -1 )
|
|
return this._toAbsoluteMozilla(element,accountForDocScroll);
|
|
|
|
var x = 0;
|
|
var y = 0;
|
|
var parent = element;
|
|
while ( parent ) {
|
|
|
|
var borderXOffset = 0;
|
|
var borderYOffset = 0;
|
|
if ( parent != element ) {
|
|
var borderXOffset = parseInt(this.getElementsComputedStyle(parent, "borderLeftWidth" ));
|
|
var borderYOffset = parseInt(this.getElementsComputedStyle(parent, "borderTopWidth" ));
|
|
borderXOffset = isNaN(borderXOffset) ? 0 : borderXOffset;
|
|
borderYOffset = isNaN(borderYOffset) ? 0 : borderYOffset;
|
|
}
|
|
|
|
x += parent.offsetLeft - parent.scrollLeft + borderXOffset;
|
|
y += parent.offsetTop - parent.scrollTop + borderYOffset;
|
|
parent = parent.offsetParent;
|
|
}
|
|
|
|
if ( accountForDocScroll ) {
|
|
x -= this.docScrollLeft();
|
|
y -= this.docScrollTop();
|
|
}
|
|
|
|
return { x:x, y:y };
|
|
},
|
|
|
|
/**
|
|
* Mozilla did not report all of the parents up the hierarchy via the
|
|
* offsetParent property that IE did. So for the calculation of the
|
|
* offsets we use the offsetParent property, but for the calculation of
|
|
* the scrollTop/scrollLeft adjustments we navigate up via the parentNode
|
|
* property instead so as to get the scroll offsets...
|
|
*
|
|
**/
|
|
_toAbsoluteMozilla: function(element,accountForDocScroll) {
|
|
var x = 0;
|
|
var y = 0;
|
|
var parent = element;
|
|
while ( parent ) {
|
|
x += parent.offsetLeft;
|
|
y += parent.offsetTop;
|
|
parent = parent.offsetParent;
|
|
}
|
|
|
|
parent = element;
|
|
while ( parent &&
|
|
parent != document.body &&
|
|
parent != document.documentElement ) {
|
|
if ( parent.scrollLeft )
|
|
x -= parent.scrollLeft;
|
|
if ( parent.scrollTop )
|
|
y -= parent.scrollTop;
|
|
parent = parent.parentNode;
|
|
}
|
|
|
|
if ( accountForDocScroll ) {
|
|
x -= this.docScrollLeft();
|
|
y -= this.docScrollTop();
|
|
}
|
|
|
|
return { x:x, y:y };
|
|
},
|
|
|
|
docScrollLeft: function() {
|
|
if ( window.pageXOffset )
|
|
return window.pageXOffset;
|
|
else if ( document.documentElement && document.documentElement.scrollLeft )
|
|
return document.documentElement.scrollLeft;
|
|
else if ( document.body )
|
|
return document.body.scrollLeft;
|
|
else
|
|
return 0;
|
|
},
|
|
|
|
docScrollTop: function() {
|
|
if ( window.pageYOffset )
|
|
return window.pageYOffset;
|
|
else if ( document.documentElement && document.documentElement.scrollTop )
|
|
return document.documentElement.scrollTop;
|
|
else if ( document.body )
|
|
return document.body.scrollTop;
|
|
else
|
|
return 0;
|
|
}
|
|
|
|
};
|