[56] | 1 | /** |
---|
| 2 | * |
---|
| 3 | * Copyright 2005 Sabre Airline Solutions |
---|
| 4 | * |
---|
| 5 | * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this |
---|
| 6 | * file except in compliance with the License. You may obtain a copy of the License at |
---|
| 7 | * |
---|
| 8 | * http://www.apache.org/licenses/LICENSE-2.0 |
---|
| 9 | * |
---|
| 10 | * Unless required by applicable law or agreed to in writing, software distributed under the |
---|
| 11 | * License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, |
---|
| 12 | * either express or implied. See the License for the specific language governing permissions |
---|
| 13 | * and limitations under the License. |
---|
| 14 | **/ |
---|
| 15 | |
---|
| 16 | |
---|
| 17 | //-------------------- rico.js |
---|
| 18 | var Rico = { |
---|
| 19 | Version: '1.1-beta2' |
---|
| 20 | } |
---|
| 21 | |
---|
| 22 | Rico.ArrayExtensions = new Array(); |
---|
| 23 | |
---|
| 24 | if (Object.prototype.extend) { |
---|
| 25 | // in prototype.js... |
---|
| 26 | Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Object.prototype.extend; |
---|
| 27 | } |
---|
| 28 | |
---|
| 29 | if (Array.prototype.push) { |
---|
| 30 | // in prototype.js... |
---|
| 31 | Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.push; |
---|
| 32 | } |
---|
| 33 | |
---|
| 34 | if (!Array.prototype.remove) { |
---|
| 35 | Array.prototype.remove = function(dx) { |
---|
| 36 | if( isNaN(dx) || dx > this.length ) |
---|
| 37 | return false; |
---|
| 38 | for( var i=0,n=0; i<this.length; i++ ) |
---|
| 39 | if( i != dx ) |
---|
| 40 | this[n++]=this[i]; |
---|
| 41 | this.length-=1; |
---|
| 42 | }; |
---|
| 43 | Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.remove; |
---|
| 44 | } |
---|
| 45 | |
---|
| 46 | if (!Array.prototype.removeItem) { |
---|
| 47 | Array.prototype.removeItem = function(item) { |
---|
| 48 | for ( var i = 0 ; i < this.length ; i++ ) |
---|
| 49 | if ( this[i] == item ) { |
---|
| 50 | this.remove(i); |
---|
| 51 | break; |
---|
| 52 | } |
---|
| 53 | }; |
---|
| 54 | Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.removeItem; |
---|
| 55 | } |
---|
| 56 | |
---|
| 57 | if (!Array.prototype.indices) { |
---|
| 58 | Array.prototype.indices = function() { |
---|
| 59 | var indexArray = new Array(); |
---|
| 60 | for ( index in this ) { |
---|
| 61 | var ignoreThis = false; |
---|
| 62 | for ( var i = 0 ; i < Rico.ArrayExtensions.length ; i++ ) { |
---|
| 63 | if ( this[index] == Rico.ArrayExtensions[i] ) { |
---|
| 64 | ignoreThis = true; |
---|
| 65 | break; |
---|
| 66 | } |
---|
| 67 | } |
---|
| 68 | if ( !ignoreThis ) |
---|
| 69 | indexArray[ indexArray.length ] = index; |
---|
| 70 | } |
---|
| 71 | return indexArray; |
---|
| 72 | } |
---|
| 73 | Rico.ArrayExtensions[ Rico.ArrayExtensions.length ] = Array.prototype.indices; |
---|
| 74 | } |
---|
| 75 | |
---|
| 76 | // Create the loadXML method and xml getter for Mozilla |
---|
| 77 | if ( window.DOMParser && |
---|
| 78 | window.XMLSerializer && |
---|
| 79 | window.Node && Node.prototype && Node.prototype.__defineGetter__ ) { |
---|
| 80 | |
---|
| 81 | if (!Document.prototype.loadXML) { |
---|
| 82 | Document.prototype.loadXML = function (s) { |
---|
| 83 | var doc2 = (new DOMParser()).parseFromString(s, "text/xml"); |
---|
| 84 | while (this.hasChildNodes()) |
---|
| 85 | this.removeChild(this.lastChild); |
---|
| 86 | |
---|
| 87 | for (var i = 0; i < doc2.childNodes.length; i++) { |
---|
| 88 | this.appendChild(this.importNode(doc2.childNodes[i], true)); |
---|
| 89 | } |
---|
| 90 | }; |
---|
| 91 | } |
---|
| 92 | |
---|
| 93 | Document.prototype.__defineGetter__( "xml", |
---|
| 94 | function () { |
---|
| 95 | return (new XMLSerializer()).serializeToString(this); |
---|
| 96 | } |
---|
| 97 | ); |
---|
| 98 | } |
---|
| 99 | |
---|
| 100 | document.getElementsByTagAndClassName = function(tagName, className) { |
---|
| 101 | if ( tagName == null ) |
---|
| 102 | tagName = '*'; |
---|
| 103 | |
---|
| 104 | var children = document.getElementsByTagName(tagName) || document.all; |
---|
| 105 | var elements = new Array(); |
---|
| 106 | |
---|
| 107 | if ( className == null ) |
---|
| 108 | return children; |
---|
| 109 | |
---|
| 110 | for (var i = 0; i < children.length; i++) { |
---|
| 111 | var child = children[i]; |
---|
| 112 | var classNames = child.className.split(' '); |
---|
| 113 | for (var j = 0; j < classNames.length; j++) { |
---|
| 114 | if (classNames[j] == className) { |
---|
| 115 | elements.push(child); |
---|
| 116 | break; |
---|
| 117 | } |
---|
| 118 | } |
---|
| 119 | } |
---|
| 120 | |
---|
| 121 | return elements; |
---|
| 122 | } |
---|
| 123 | |
---|
| 124 | |
---|
| 125 | //-------------------- ricoAccordion.js |
---|
| 126 | |
---|
| 127 | Rico.Accordion = Class.create(); |
---|
| 128 | |
---|
| 129 | Rico.Accordion.prototype = { |
---|
| 130 | |
---|
| 131 | initialize: function(container, options) { |
---|
| 132 | this.container = $(container); |
---|
| 133 | this.lastExpandedTab = null; |
---|
| 134 | this.accordionTabs = new Array(); |
---|
| 135 | this.setOptions(options); |
---|
| 136 | this._attachBehaviors(); |
---|
| 137 | |
---|
| 138 | this.container.style.borderBottom = '1px solid ' + this.options.borderColor; |
---|
| 139 | |
---|
| 140 | // set the initial visual state... |
---|
| 141 | for ( var i=1 ; i < this.accordionTabs.length ; i++ ) |
---|
| 142 | { |
---|
| 143 | this.accordionTabs[i].collapse(); |
---|
| 144 | this.accordionTabs[i].content.style.display = 'none'; |
---|
| 145 | } |
---|
| 146 | this.lastExpandedTab = this.accordionTabs[0]; |
---|
| 147 | this.lastExpandedTab.content.style.height = this.options.panelHeight + "px"; |
---|
| 148 | this.lastExpandedTab.showExpanded(); |
---|
| 149 | this.lastExpandedTab.titleBar.style.fontWeight = this.options.expandedFontWeight; |
---|
| 150 | }, |
---|
| 151 | |
---|
| 152 | setOptions: function(options) { |
---|
| 153 | this.options = { |
---|
| 154 | expandedBg : '#63699c', |
---|
| 155 | hoverBg : '#63699c', |
---|
| 156 | collapsedBg : '#6b79a5', |
---|
| 157 | expandedTextColor : '#ffffff', |
---|
| 158 | expandedFontWeight : 'bold', |
---|
| 159 | hoverTextColor : '#ffffff', |
---|
| 160 | collapsedTextColor : '#ced7ef', |
---|
| 161 | collapsedFontWeight : 'normal', |
---|
| 162 | hoverTextColor : '#ffffff', |
---|
| 163 | borderColor : '#1f669b', |
---|
| 164 | panelHeight : 200, |
---|
| 165 | onHideTab : null, |
---|
| 166 | onShowTab : null |
---|
| 167 | }.extend(options || {}); |
---|
| 168 | }, |
---|
| 169 | |
---|
| 170 | showTabByIndex: function( anIndex, animate ) { |
---|
| 171 | var doAnimate = arguments.length == 1 ? true : animate; |
---|
| 172 | this.showTab( this.accordionTabs[anIndex], doAnimate ); |
---|
| 173 | }, |
---|
| 174 | |
---|
| 175 | showTab: function( accordionTab, animate ) { |
---|
| 176 | |
---|
| 177 | var doAnimate = arguments.length == 1 ? true : animate; |
---|
| 178 | |
---|
| 179 | if ( this.options.onHideTab ) |
---|
| 180 | this.options.onHideTab(this.lastExpandedTab); |
---|
| 181 | |
---|
| 182 | this.lastExpandedTab.showCollapsed(); |
---|
| 183 | var accordion = this; |
---|
| 184 | var lastExpandedTab = this.lastExpandedTab; |
---|
| 185 | |
---|
| 186 | this.lastExpandedTab.content.style.height = (this.options.panelHeight - 1) + 'px'; |
---|
| 187 | accordionTab.content.style.display = ''; |
---|
| 188 | |
---|
| 189 | accordionTab.titleBar.style.fontWeight = this.options.expandedFontWeight; |
---|
| 190 | |
---|
| 191 | if ( doAnimate ) { |
---|
| 192 | new Effect.AccordionSize( this.lastExpandedTab.content, |
---|
| 193 | accordionTab.content, |
---|
| 194 | 1, |
---|
| 195 | this.options.panelHeight, |
---|
| 196 | 100, 10, |
---|
| 197 | { complete: function() {accordion.showTabDone(lastExpandedTab)} } ); |
---|
| 198 | this.lastExpandedTab = accordionTab; |
---|
| 199 | } |
---|
| 200 | else { |
---|
| 201 | this.lastExpandedTab.content.style.height = "1px"; |
---|
| 202 | accordionTab.content.style.height = this.options.panelHeight + "px"; |
---|
| 203 | this.lastExpandedTab = accordionTab; |
---|
| 204 | this.showTabDone(lastExpandedTab); |
---|
| 205 | } |
---|
| 206 | }, |
---|
| 207 | |
---|
| 208 | showTabDone: function(collapsedTab) { |
---|
| 209 | collapsedTab.content.style.display = 'none'; |
---|
| 210 | this.lastExpandedTab.showExpanded(); |
---|
| 211 | if ( this.options.onShowTab ) |
---|
| 212 | this.options.onShowTab(this.lastExpandedTab); |
---|
| 213 | }, |
---|
| 214 | |
---|
| 215 | _attachBehaviors: function() { |
---|
| 216 | var panels = this._getDirectChildrenByTag(this.container, 'DIV'); |
---|
| 217 | for ( var i = 0 ; i < panels.length ; i++ ) { |
---|
| 218 | |
---|
| 219 | var tabChildren = this._getDirectChildrenByTag(panels[i],'DIV'); |
---|
| 220 | if ( tabChildren.length != 2 ) |
---|
| 221 | continue; // unexpected |
---|
| 222 | |
---|
| 223 | var tabTitleBar = tabChildren[0]; |
---|
| 224 | var tabContentBox = tabChildren[1]; |
---|
| 225 | this.accordionTabs.push( new Rico.Accordion.Tab(this,tabTitleBar,tabContentBox) ); |
---|
| 226 | } |
---|
| 227 | }, |
---|
| 228 | |
---|
| 229 | _getDirectChildrenByTag: function(e, tagName) { |
---|
| 230 | var kids = new Array(); |
---|
| 231 | var allKids = e.childNodes; |
---|
| 232 | for( var i = 0 ; i < allKids.length ; i++ ) |
---|
| 233 | if ( allKids[i] && allKids[i].tagName && allKids[i].tagName == tagName ) |
---|
| 234 | kids.push(allKids[i]); |
---|
| 235 | return kids; |
---|
| 236 | } |
---|
| 237 | |
---|
| 238 | }; |
---|
| 239 | |
---|
| 240 | Rico.Accordion.Tab = Class.create(); |
---|
| 241 | |
---|
| 242 | Rico.Accordion.Tab.prototype = { |
---|
| 243 | |
---|
| 244 | initialize: function(accordion, titleBar, content) { |
---|
| 245 | this.accordion = accordion; |
---|
| 246 | this.titleBar = titleBar; |
---|
| 247 | this.content = content; |
---|
| 248 | this._attachBehaviors(); |
---|
| 249 | }, |
---|
| 250 | |
---|
| 251 | collapse: function() { |
---|
| 252 | this.showCollapsed(); |
---|
| 253 | this.content.style.height = "1px"; |
---|
| 254 | }, |
---|
| 255 | |
---|
| 256 | showCollapsed: function() { |
---|
| 257 | this.expanded = false; |
---|
| 258 | this.titleBar.style.backgroundColor = this.accordion.options.collapsedBg; |
---|
| 259 | this.titleBar.style.color = this.accordion.options.collapsedTextColor; |
---|
| 260 | this.titleBar.style.fontWeight = this.accordion.options.collapsedFontWeight; |
---|
| 261 | this.content.style.overflow = "hidden"; |
---|
| 262 | }, |
---|
| 263 | |
---|
| 264 | showExpanded: function() { |
---|
| 265 | this.expanded = true; |
---|
| 266 | this.titleBar.style.backgroundColor = this.accordion.options.expandedBg; |
---|
| 267 | this.titleBar.style.color = this.accordion.options.expandedTextColor; |
---|
| 268 | this.content.style.overflow = "visible"; |
---|
| 269 | }, |
---|
| 270 | |
---|
| 271 | titleBarClicked: function(e) { |
---|
| 272 | if ( this.accordion.lastExpandedTab == this ) |
---|
| 273 | return; |
---|
| 274 | this.accordion.showTab(this); |
---|
| 275 | }, |
---|
| 276 | |
---|
| 277 | hover: function(e) { |
---|
| 278 | this.titleBar.style.backgroundColor = this.accordion.options.hoverBg; |
---|
| 279 | this.titleBar.style.color = this.accordion.options.hoverTextColor; |
---|
| 280 | }, |
---|
| 281 | |
---|
| 282 | unhover: function(e) { |
---|
| 283 | if ( this.expanded ) { |
---|
| 284 | this.titleBar.style.backgroundColor = this.accordion.options.expandedBg; |
---|
| 285 | this.titleBar.style.color = this.accordion.options.expandedTextColor; |
---|
| 286 | } |
---|
| 287 | else { |
---|
| 288 | this.titleBar.style.backgroundColor = this.accordion.options.collapsedBg; |
---|
| 289 | this.titleBar.style.color = this.accordion.options.collapsedTextColor; |
---|
| 290 | } |
---|
| 291 | }, |
---|
| 292 | |
---|
| 293 | _attachBehaviors: function() { |
---|
| 294 | this.content.style.border = "1px solid " + this.accordion.options.borderColor; |
---|
| 295 | this.content.style.borderTopWidth = "0px"; |
---|
| 296 | this.content.style.borderBottomWidth = "0px"; |
---|
| 297 | this.content.style.margin = "0px"; |
---|
| 298 | |
---|
| 299 | this.titleBar.onclick = this.titleBarClicked.bindAsEventListener(this); |
---|
| 300 | this.titleBar.onmouseover = this.hover.bindAsEventListener(this); |
---|
| 301 | this.titleBar.onmouseout = this.unhover.bindAsEventListener(this); |
---|
| 302 | } |
---|
| 303 | |
---|
| 304 | }; |
---|
| 305 | |
---|
| 306 | |
---|
| 307 | //-------------------- ricoAjaxEngine.js |
---|
| 308 | |
---|
| 309 | Rico.AjaxEngine = Class.create(); |
---|
| 310 | |
---|
| 311 | Rico.AjaxEngine.prototype = { |
---|
| 312 | |
---|
| 313 | initialize: function() { |
---|
| 314 | this.ajaxElements = new Array(); |
---|
| 315 | this.ajaxObjects = new Array(); |
---|
| 316 | this.requestURLS = new Array(); |
---|
| 317 | }, |
---|
| 318 | |
---|
| 319 | registerAjaxElement: function( anId, anElement ) { |
---|
| 320 | if ( arguments.length == 1 ) |
---|
| 321 | anElement = $(anId); |
---|
| 322 | this.ajaxElements[anId] = anElement; |
---|
| 323 | }, |
---|
| 324 | |
---|
| 325 | registerAjaxObject: function( anId, anObject ) { |
---|
| 326 | this.ajaxObjects[anId] = anObject; |
---|
| 327 | }, |
---|
| 328 | |
---|
| 329 | registerRequest: function (requestLogicalName, requestURL) { |
---|
| 330 | this.requestURLS[requestLogicalName] = requestURL; |
---|
| 331 | }, |
---|
| 332 | |
---|
| 333 | sendRequest: function(requestName) { |
---|
| 334 | var requestURL = this.requestURLS[requestName]; |
---|
| 335 | if ( requestURL == null ) |
---|
| 336 | return; |
---|
| 337 | |
---|
| 338 | var queryString = ""; |
---|
| 339 | |
---|
| 340 | if ( arguments.length > 1 ) { |
---|
| 341 | if(typeof(arguments[1]) == "object" && arguments[1].length != undefined) { |
---|
| 342 | queryString = this._createQueryString(arguments[1], 0); |
---|
| 343 | } |
---|
| 344 | else { |
---|
| 345 | queryString = this._createQueryString(arguments, 1); |
---|
| 346 | } |
---|
| 347 | } |
---|
| 348 | |
---|
| 349 | new Ajax.Request(requestURL, this._requestOptions(queryString)); |
---|
| 350 | }, |
---|
| 351 | |
---|
| 352 | sendRequestWithData: function(requestName, xmlDocument) { |
---|
| 353 | var requestURL = this.requestURLS[requestName]; |
---|
| 354 | if ( requestURL == null ) |
---|
| 355 | return; |
---|
| 356 | |
---|
| 357 | var queryString = ""; |
---|
| 358 | if ( arguments.length > 2 ) { |
---|
| 359 | if(typeof(arguments[2]) == "object" && arguments[2].length != undefined) { |
---|
| 360 | queryString = this._createQueryString(arguments[2], 0); |
---|
| 361 | } |
---|
| 362 | else { |
---|
| 363 | queryString = this._createQueryString(arguments, 2); |
---|
| 364 | } |
---|
| 365 | } |
---|
| 366 | |
---|
| 367 | new Ajax.Request(requestURL + "?" + queryString, this._requestOptions(null,xmlDocument)); |
---|
| 368 | }, |
---|
| 369 | |
---|
| 370 | sendRequestAndUpdate: function(requestName,container,options) { |
---|
| 371 | var requestURL = this.requestURLS[requestName]; |
---|
| 372 | if ( requestURL == null ) |
---|
| 373 | return; |
---|
| 374 | |
---|
| 375 | var queryString = ""; |
---|
| 376 | if ( arguments.length > 3 ) { |
---|
| 377 | if(typeof(arguments[3]) == "object" && arguments[3].length != undefined) { |
---|
| 378 | queryString = this._createQueryString(arguments[3], 0); |
---|
| 379 | } |
---|
| 380 | else { |
---|
| 381 | queryString = this._createQueryString(arguments, 3); |
---|
| 382 | } |
---|
| 383 | } |
---|
| 384 | |
---|
| 385 | var updaterOptions = this._requestOptions(queryString); |
---|
| 386 | updaterOptions.onComplete = null; |
---|
| 387 | updaterOptions.extend(options); |
---|
| 388 | |
---|
| 389 | new Ajax.Updater(container, requestURL, updaterOptions); |
---|
| 390 | }, |
---|
| 391 | |
---|
| 392 | sendRequestWithDataAndUpdate: function(requestName,xmlDocument,container,options) { |
---|
| 393 | var requestURL = this.requestURLS[requestName]; |
---|
| 394 | if ( requestURL == null ) |
---|
| 395 | return; |
---|
| 396 | |
---|
| 397 | var queryString = ""; |
---|
| 398 | if ( arguments.length > 4 ) { |
---|
| 399 | if(typeof(arguments[4]) == "object" && arguments[4].length != undefined) { |
---|
| 400 | queryString = this._createQueryString(arguments[4], 0); |
---|
| 401 | } |
---|
| 402 | else { |
---|
| 403 | queryString = this._createQueryString(arguments, 4); |
---|
| 404 | } |
---|
| 405 | } |
---|
| 406 | |
---|
| 407 | |
---|
| 408 | var updaterOptions = this._requestOptions(queryString,xmlDocument); |
---|
| 409 | updaterOptions.onComplete = null; |
---|
| 410 | updaterOptions.extend(options); |
---|
| 411 | |
---|
| 412 | new Ajax.Updater(container, requestURL + "?" + queryString, updaterOptions); |
---|
| 413 | }, |
---|
| 414 | |
---|
| 415 | // Private -- not part of intended engine API -------------------------------------------------------------------- |
---|
| 416 | |
---|
| 417 | _requestOptions: function(queryString,xmlDoc) { |
---|
| 418 | var self = this; |
---|
| 419 | |
---|
| 420 | var requestHeaders = ['X-Rico-Version', Rico.Version ]; |
---|
| 421 | var sendMethod = "post" |
---|
| 422 | if ( arguments[1] ) |
---|
| 423 | requestHeaders.push( 'Content-type', 'text/xml' ); |
---|
| 424 | else |
---|
| 425 | sendMethod = "get"; |
---|
| 426 | |
---|
| 427 | return { requestHeaders: requestHeaders, |
---|
| 428 | parameters: queryString, |
---|
| 429 | postBody: arguments[1] ? xmlDoc : null, |
---|
| 430 | method: sendMethod, |
---|
| 431 | onComplete: self._onRequestComplete.bind(self) }; |
---|
| 432 | }, |
---|
| 433 | |
---|
| 434 | _createQueryString: function( theArgs, offset ) { |
---|
| 435 | var self = this; |
---|
| 436 | var queryString = "" |
---|
| 437 | for ( var i = offset ; i < theArgs.length ; i++ ) { |
---|
| 438 | if ( i != offset ) |
---|
| 439 | queryString += "&"; |
---|
| 440 | |
---|
| 441 | var anArg = theArgs[i]; |
---|
| 442 | |
---|
| 443 | if ( anArg.name != undefined && anArg.value != undefined ) { |
---|
| 444 | queryString += anArg.name + "=" + escape(anArg.value); |
---|
| 445 | } |
---|
| 446 | else { |
---|
| 447 | var ePos = anArg.indexOf('='); |
---|
| 448 | var argName = anArg.substring( 0, ePos ); |
---|
| 449 | var argValue = anArg.substring( ePos + 1 ); |
---|
| 450 | queryString += argName + "=" + escape(argValue); |
---|
| 451 | } |
---|
| 452 | } |
---|
| 453 | |
---|
| 454 | return queryString; |
---|
| 455 | }, |
---|
| 456 | _onRequestComplete : function(request) { |
---|
| 457 | |
---|
| 458 | //!!TODO: error handling infrastructure?? |
---|
| 459 | if (request.status != 200) |
---|
| 460 | return; |
---|
| 461 | |
---|
| 462 | var response = request.responseXML.getElementsByTagName("ajax-response"); |
---|
| 463 | if (response == null || response.length != 1) |
---|
| 464 | return; |
---|
| 465 | this._processAjaxResponse( response[0].childNodes ); |
---|
| 466 | }, |
---|
| 467 | |
---|
| 468 | _processAjaxResponse: function( xmlResponseElements ) { |
---|
| 469 | for ( var i = 0 ; i < xmlResponseElements.length ; i++ ) { |
---|
| 470 | var responseElement = xmlResponseElements[i]; |
---|
| 471 | |
---|
| 472 | // only process nodes of type element..... |
---|
| 473 | if ( responseElement.nodeType != 1 ) |
---|
| 474 | continue; |
---|
| 475 | |
---|
| 476 | var responseType = responseElement.getAttribute("type"); |
---|
| 477 | var responseId = responseElement.getAttribute("id"); |
---|
| 478 | |
---|
| 479 | if ( responseType == "object" ) |
---|
| 480 | this._processAjaxObjectUpdate( this.ajaxObjects[ responseId ], responseElement ); |
---|
| 481 | else if ( responseType == "element" ) |
---|
| 482 | this._processAjaxElementUpdate( this.ajaxElements[ responseId ], responseElement ); |
---|
| 483 | else |
---|
| 484 | alert('unrecognized AjaxResponse type : ' + responseType ); |
---|
| 485 | } |
---|
| 486 | }, |
---|
| 487 | |
---|
| 488 | _processAjaxObjectUpdate: function( ajaxObject, responseElement ) { |
---|
| 489 | ajaxObject.ajaxUpdate( responseElement ); |
---|
| 490 | }, |
---|
| 491 | |
---|
| 492 | _processAjaxElementUpdate: function( ajaxElement, responseElement ) { |
---|
| 493 | ajaxElement.innerHTML = RicoUtil.getContentAsString(responseElement); |
---|
| 494 | } |
---|
| 495 | |
---|
| 496 | } |
---|
| 497 | |
---|
| 498 | var ajaxEngine = new Rico.AjaxEngine(); |
---|
| 499 | |
---|
| 500 | |
---|
| 501 | //-------------------- ricoColor.js |
---|
| 502 | Rico.Color = Class.create(); |
---|
| 503 | |
---|
| 504 | Rico.Color.prototype = { |
---|
| 505 | |
---|
| 506 | initialize: function(red, green, blue) { |
---|
| 507 | this.rgb = { r: red, g : green, b : blue }; |
---|
| 508 | }, |
---|
| 509 | |
---|
| 510 | setRed: function(r) { |
---|
| 511 | this.rgb.r = r; |
---|
| 512 | }, |
---|
| 513 | |
---|
| 514 | setGreen: function(g) { |
---|
| 515 | this.rgb.g = g; |
---|
| 516 | }, |
---|
| 517 | |
---|
| 518 | setBlue: function(b) { |
---|
| 519 | this.rgb.b = b; |
---|
| 520 | }, |
---|
| 521 | |
---|
| 522 | setHue: function(h) { |
---|
| 523 | |
---|
| 524 | // get an HSB model, and set the new hue... |
---|
| 525 | var hsb = this.asHSB(); |
---|
| 526 | hsb.h = h; |
---|
| 527 | |
---|
| 528 | // convert back to RGB... |
---|
| 529 | this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b); |
---|
| 530 | }, |
---|
| 531 | |
---|
| 532 | setSaturation: function(s) { |
---|
| 533 | // get an HSB model, and set the new hue... |
---|
| 534 | var hsb = this.asHSB(); |
---|
| 535 | hsb.s = s; |
---|
| 536 | |
---|
| 537 | // convert back to RGB and set values... |
---|
| 538 | this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b); |
---|
| 539 | }, |
---|
| 540 | |
---|
| 541 | setBrightness: function(b) { |
---|
| 542 | // get an HSB model, and set the new hue... |
---|
| 543 | var hsb = this.asHSB(); |
---|
| 544 | hsb.b = b; |
---|
| 545 | |
---|
| 546 | // convert back to RGB and set values... |
---|
| 547 | this.rgb = Rico.Color.HSBtoRGB( hsb.h, hsb.s, hsb.b ); |
---|
| 548 | }, |
---|
| 549 | |
---|
| 550 | darken: function(percent) { |
---|
| 551 | var hsb = this.asHSB(); |
---|
| 552 | this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.max(hsb.b - percent,0)); |
---|
| 553 | }, |
---|
| 554 | |
---|
| 555 | brighten: function(percent) { |
---|
| 556 | var hsb = this.asHSB(); |
---|
| 557 | this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.min(hsb.b + percent,1)); |
---|
| 558 | }, |
---|
| 559 | |
---|
| 560 | blend: function(other) { |
---|
| 561 | this.rgb.r = Math.floor((this.rgb.r + other.rgb.r)/2); |
---|
| 562 | this.rgb.g = Math.floor((this.rgb.g + other.rgb.g)/2); |
---|
| 563 | this.rgb.b = Math.floor((this.rgb.b + other.rgb.b)/2); |
---|
| 564 | }, |
---|
| 565 | |
---|
| 566 | isBright: function() { |
---|
| 567 | var hsb = this.asHSB(); |
---|
| 568 | return this.asHSB().b > 0.5; |
---|
| 569 | }, |
---|
| 570 | |
---|
| 571 | isDark: function() { |
---|
| 572 | return ! this.isBright(); |
---|
| 573 | }, |
---|
| 574 | |
---|
| 575 | asRGB: function() { |
---|
| 576 | return "rgb(" + this.rgb.r + "," + this.rgb.g + "," + this.rgb.b + ")"; |
---|
| 577 | }, |
---|
| 578 | |
---|
| 579 | asHex: function() { |
---|
| 580 | return "#" + this.rgb.r.toColorPart() + this.rgb.g.toColorPart() + this.rgb.b.toColorPart(); |
---|
| 581 | }, |
---|
| 582 | |
---|
| 583 | asHSB: function() { |
---|
| 584 | return Rico.Color.RGBtoHSB(this.rgb.r, this.rgb.g, this.rgb.b); |
---|
| 585 | }, |
---|
| 586 | |
---|
| 587 | toString: function() { |
---|
| 588 | return this.asHex(); |
---|
| 589 | } |
---|
| 590 | |
---|
| 591 | }; |
---|
| 592 | |
---|
| 593 | Rico.Color.createFromHex = function(hexCode) { |
---|
| 594 | |
---|
| 595 | if ( hexCode.indexOf('#') == 0 ) |
---|
| 596 | hexCode = hexCode.substring(1); |
---|
| 597 | var red = hexCode.substring(0,2); |
---|
| 598 | var green = hexCode.substring(2,4); |
---|
| 599 | var blue = hexCode.substring(4,6); |
---|
| 600 | return new Rico.Color( parseInt(red,16), parseInt(green,16), parseInt(blue,16) ); |
---|
| 601 | } |
---|
| 602 | |
---|
| 603 | /** |
---|
| 604 | * Factory method for creating a color from the background of |
---|
| 605 | * an HTML element. |
---|
| 606 | */ |
---|
| 607 | Rico.Color.createColorFromBackground = function(elem) { |
---|
| 608 | |
---|
| 609 | var actualColor = RicoUtil.getElementsComputedStyle($(elem), "backgroundColor", "background-color"); |
---|
| 610 | |
---|
| 611 | if ( actualColor == "transparent" && elem.parent ) |
---|
| 612 | return Rico.Color.createColorFromBackground(elem.parent); |
---|
| 613 | |
---|
| 614 | if ( actualColor == null ) |
---|
| 615 | return new Rico.Color(255,255,255); |
---|
| 616 | |
---|
| 617 | if ( actualColor.indexOf("rgb(") == 0 ) { |
---|
| 618 | var colors = actualColor.substring(4, actualColor.length - 1 ); |
---|
| 619 | var colorArray = colors.split(","); |
---|
| 620 | return new Rico.Color( parseInt( colorArray[0] ), |
---|
| 621 | parseInt( colorArray[1] ), |
---|
| 622 | parseInt( colorArray[2] ) ); |
---|
| 623 | |
---|
| 624 | } |
---|
| 625 | else if ( actualColor.indexOf("#") == 0 ) { |
---|
| 626 | var redPart = parseInt(actualColor.substring(1,3), 16); |
---|
| 627 | var greenPart = parseInt(actualColor.substring(3,5), 16); |
---|
| 628 | var bluePart = parseInt(actualColor.substring(5), 16); |
---|
| 629 | return new Rico.Color( redPart, greenPart, bluePart ); |
---|
| 630 | } |
---|
| 631 | else |
---|
| 632 | return new Rico.Color(255,255,255); |
---|
| 633 | } |
---|
| 634 | |
---|
| 635 | Rico.Color.HSBtoRGB = function(hue, saturation, brightness) { |
---|
| 636 | |
---|
| 637 | var red = 0; |
---|
| 638 | var green = 0; |
---|
| 639 | var blue = 0; |
---|
| 640 | |
---|
| 641 | if (saturation == 0) { |
---|
| 642 | red = parseInt(brightness * 255.0 + 0.5); |
---|
| 643 | green = red; |
---|
| 644 | blue = red; |
---|
| 645 | } |
---|
| 646 | else { |
---|
| 647 | var h = (hue - Math.floor(hue)) * 6.0; |
---|
| 648 | var f = h - Math.floor(h); |
---|
| 649 | var p = brightness * (1.0 - saturation); |
---|
| 650 | var q = brightness * (1.0 - saturation * f); |
---|
| 651 | var t = brightness * (1.0 - (saturation * (1.0 - f))); |
---|
| 652 | |
---|
| 653 | switch (parseInt(h)) { |
---|
| 654 | case 0: |
---|
| 655 | red = (brightness * 255.0 + 0.5); |
---|
| 656 | green = (t * 255.0 + 0.5); |
---|
| 657 | blue = (p * 255.0 + 0.5); |
---|
| 658 | break; |
---|
| 659 | case 1: |
---|
| 660 | red = (q * 255.0 + 0.5); |
---|
| 661 | green = (brightness * 255.0 + 0.5); |
---|
| 662 | blue = (p * 255.0 + 0.5); |
---|
| 663 | break; |
---|
| 664 | case 2: |
---|
| 665 | red = (p * 255.0 + 0.5); |
---|
| 666 | green = (brightness * 255.0 + 0.5); |
---|
| 667 | blue = (t * 255.0 + 0.5); |
---|
| 668 | break; |
---|
| 669 | case 3: |
---|
| 670 | red = (p * 255.0 + 0.5); |
---|
| 671 | green = (q * 255.0 + 0.5); |
---|
| 672 | blue = (brightness * 255.0 + 0.5); |
---|
| 673 | break; |
---|
| 674 | case 4: |
---|
| 675 | red = (t * 255.0 + 0.5); |
---|
| 676 | green = (p * 255.0 + 0.5); |
---|
| 677 | blue = (brightness * 255.0 + 0.5); |
---|
| 678 | break; |
---|
| 679 | case 5: |
---|
| 680 | red = (brightness * 255.0 + 0.5); |
---|
| 681 | green = (p * 255.0 + 0.5); |
---|
| 682 | blue = (q * 255.0 + 0.5); |
---|
| 683 | break; |
---|
| 684 | } |
---|
| 685 | } |
---|
| 686 | |
---|
| 687 | return { r : parseInt(red), g : parseInt(green) , b : parseInt(blue) }; |
---|
| 688 | } |
---|
| 689 | |
---|
| 690 | Rico.Color.RGBtoHSB = function(r, g, b) { |
---|
| 691 | |
---|
| 692 | var hue; |
---|
| 693 | var saturaton; |
---|
| 694 | var brightness; |
---|
| 695 | |
---|
| 696 | var cmax = (r > g) ? r : g; |
---|
| 697 | if (b > cmax) |
---|
| 698 | cmax = b; |
---|
| 699 | |
---|
| 700 | var cmin = (r < g) ? r : g; |
---|
| 701 | if (b < cmin) |
---|
| 702 | cmin = b; |
---|
| 703 | |
---|
| 704 | brightness = cmax / 255.0; |
---|
| 705 | if (cmax != 0) |
---|
| 706 | saturation = (cmax - cmin)/cmax; |
---|
| 707 | else |
---|
| 708 | saturation = 0; |
---|
| 709 | |
---|
| 710 | if (saturation == 0) |
---|
| 711 | hue = 0; |
---|
| 712 | else { |
---|
| 713 | var redc = (cmax - r)/(cmax - cmin); |
---|
| 714 | var greenc = (cmax - g)/(cmax - cmin); |
---|
| 715 | var bluec = (cmax - b)/(cmax - cmin); |
---|
| 716 | |
---|
| 717 | if (r == cmax) |
---|
| 718 | hue = bluec - greenc; |
---|
| 719 | else if (g == cmax) |
---|
| 720 | hue = 2.0 + redc - bluec; |
---|
| 721 | else |
---|
| 722 | hue = 4.0 + greenc - redc; |
---|
| 723 | |
---|
| 724 | hue = hue / 6.0; |
---|
| 725 | if (hue < 0) |
---|
| 726 | hue = hue + 1.0; |
---|
| 727 | } |
---|
| 728 | |
---|
| 729 | return { h : hue, s : saturation, b : brightness }; |
---|
| 730 | } |
---|
| 731 | |
---|
| 732 | |
---|
| 733 | //-------------------- ricoCorner.js |
---|
| 734 | |
---|
| 735 | Rico.Corner = { |
---|
| 736 | |
---|
| 737 | round: function(e, options) { |
---|
| 738 | var e = $(e); |
---|
| 739 | this._setOptions(options); |
---|
| 740 | |
---|
| 741 | var color = this.options.color; |
---|
| 742 | if ( this.options.color == "fromElement" ) |
---|
| 743 | color = this._background(e); |
---|
| 744 | |
---|
| 745 | var bgColor = this.options.bgColor; |
---|
| 746 | if ( this.options.bgColor == "fromParent" ) |
---|
| 747 | bgColor = this._background(e.offsetParent); |
---|
| 748 | |
---|
| 749 | this._roundCornersImpl(e, color, bgColor); |
---|
| 750 | }, |
---|
| 751 | |
---|
| 752 | _roundCornersImpl: function(e, color, bgColor) { |
---|
| 753 | if(this.options.border) |
---|
| 754 | this._renderBorder(e,bgColor); |
---|
| 755 | if(this._isTopRounded()) |
---|
| 756 | this._roundTopCorners(e,color,bgColor); |
---|
| 757 | if(this._isBottomRounded()) |
---|
| 758 | this._roundBottomCorners(e,color,bgColor); |
---|
| 759 | }, |
---|
| 760 | |
---|
| 761 | _renderBorder: function(el,bgColor) { |
---|
| 762 | var borderValue = "1px solid " + this._borderColor(bgColor); |
---|
| 763 | var borderL = "border-left: " + borderValue; |
---|
| 764 | var borderR = "border-right: " + borderValue; |
---|
| 765 | var style = "style='" + borderL + ";" + borderR + "'"; |
---|
| 766 | el.innerHTML = "<div " + style + ">" + el.innerHTML + "</div>" |
---|
| 767 | }, |
---|
| 768 | |
---|
| 769 | _roundTopCorners: function(el, color, bgColor) { |
---|
| 770 | var corner = this._createCorner(bgColor); |
---|
| 771 | for(var i=0 ; i < this.options.numSlices ; i++ ) |
---|
| 772 | corner.appendChild(this._createCornerSlice(color,bgColor,i,"top")); |
---|
| 773 | el.style.paddingTop = 0; |
---|
| 774 | el.insertBefore(corner,el.firstChild); |
---|
| 775 | }, |
---|
| 776 | |
---|
| 777 | _roundBottomCorners: function(el, color, bgColor) { |
---|
| 778 | var corner = this._createCorner(bgColor); |
---|
| 779 | for(var i=(this.options.numSlices-1) ; i >= 0 ; i-- ) |
---|
| 780 | corner.appendChild(this._createCornerSlice(color,bgColor,i,"bottom")); |
---|
| 781 | el.style.paddingBottom = 0; |
---|
| 782 | el.appendChild(corner); |
---|
| 783 | }, |
---|
| 784 | |
---|
| 785 | _createCorner: function(bgColor) { |
---|
| 786 | var corner = document.createElement("div"); |
---|
| 787 | corner.style.backgroundColor = (this._isTransparent() ? "transparent" : bgColor); |
---|
| 788 | return corner; |
---|
| 789 | }, |
---|
| 790 | |
---|
| 791 | _createCornerSlice: function(color,bgColor, n, position) { |
---|
| 792 | var slice = document.createElement("span"); |
---|
| 793 | |
---|
| 794 | var inStyle = slice.style; |
---|
| 795 | inStyle.backgroundColor = color; |
---|
| 796 | inStyle.display = "block"; |
---|
| 797 | inStyle.height = "1px"; |
---|
| 798 | inStyle.overflow = "hidden"; |
---|
| 799 | inStyle.fontSize = "1px"; |
---|
| 800 | |
---|
| 801 | var borderColor = this._borderColor(color,bgColor); |
---|
| 802 | if ( this.options.border && n == 0 ) { |
---|
| 803 | inStyle.borderTopStyle = "solid"; |
---|
| 804 | inStyle.borderTopWidth = "1px"; |
---|
| 805 | inStyle.borderLeftWidth = "0px"; |
---|
| 806 | inStyle.borderRightWidth = "0px"; |
---|
| 807 | inStyle.borderBottomWidth = "0px"; |
---|
| 808 | inStyle.height = "0px"; // assumes css compliant box model |
---|
| 809 | inStyle.borderColor = borderColor; |
---|
| 810 | } |
---|
| 811 | else if(borderColor) { |
---|
| 812 | inStyle.borderColor = borderColor; |
---|
| 813 | inStyle.borderStyle = "solid"; |
---|
| 814 | inStyle.borderWidth = "0px 1px"; |
---|
| 815 | } |
---|
| 816 | |
---|
| 817 | if ( !this.options.compact && (n == (this.options.numSlices-1)) ) |
---|
| 818 | inStyle.height = "2px"; |
---|
| 819 | |
---|
| 820 | this._setMargin(slice, n, position); |
---|
| 821 | this._setBorder(slice, n, position); |
---|
| 822 | |
---|
| 823 | return slice; |
---|
| 824 | }, |
---|
| 825 | |
---|
| 826 | _setOptions: function(options) { |
---|
| 827 | this.options = { |
---|
| 828 | corners : "all", |
---|
| 829 | color : "fromElement", |
---|
| 830 | bgColor : "fromParent", |
---|
| 831 | blend : true, |
---|
| 832 | border : false, |
---|
| 833 | compact : false |
---|
| 834 | }.extend(options || {}); |
---|
| 835 | |
---|
| 836 | this.options.numSlices = this.options.compact ? 2 : 4; |
---|
| 837 | if ( this._isTransparent() ) |
---|
| 838 | this.options.blend = false; |
---|
| 839 | }, |
---|
| 840 | |
---|
| 841 | _whichSideTop: function() { |
---|
| 842 | if ( this._hasString(this.options.corners, "all", "top") ) |
---|
| 843 | return ""; |
---|
| 844 | |
---|
| 845 | if ( this.options.corners.indexOf("tl") >= 0 && this.options.corners.indexOf("tr") >= 0 ) |
---|
| 846 | return ""; |
---|
| 847 | |
---|
| 848 | if (this.options.corners.indexOf("tl") >= 0) |
---|
| 849 | return "left"; |
---|
| 850 | else if (this.options.corners.indexOf("tr") >= 0) |
---|
| 851 | return "right"; |
---|
| 852 | return ""; |
---|
| 853 | }, |
---|
| 854 | |
---|
| 855 | _whichSideBottom: function() { |
---|
| 856 | if ( this._hasString(this.options.corners, "all", "bottom") ) |
---|
| 857 | return ""; |
---|
| 858 | |
---|
| 859 | if ( this.options.corners.indexOf("bl")>=0 && this.options.corners.indexOf("br")>=0 ) |
---|
| 860 | return ""; |
---|
| 861 | |
---|
| 862 | if(this.options.corners.indexOf("bl") >=0) |
---|
| 863 | return "left"; |
---|
| 864 | else if(this.options.corners.indexOf("br")>=0) |
---|
| 865 | return "right"; |
---|
| 866 | return ""; |
---|
| 867 | }, |
---|
| 868 | |
---|
| 869 | _borderColor : function(color,bgColor) { |
---|
| 870 | if ( color == "transparent" ) |
---|
| 871 | return bgColor; |
---|
| 872 | else if ( this.options.border ) |
---|
| 873 | return this.options.border; |
---|
| 874 | else if ( this.options.blend ) |
---|
| 875 | return this._blend( bgColor, color ); |
---|
| 876 | else |
---|
| 877 | return ""; |
---|
| 878 | }, |
---|
| 879 | |
---|
| 880 | |
---|
| 881 | _setMargin: function(el, n, corners) { |
---|
| 882 | var marginSize = this._marginSize(n); |
---|
| 883 | var whichSide = corners == "top" ? this._whichSideTop() : this._whichSideBottom(); |
---|
| 884 | |
---|
| 885 | if ( whichSide == "left" ) { |
---|
| 886 | el.style.marginLeft = marginSize + "px"; el.style.marginRight = "0px"; |
---|
| 887 | } |
---|
| 888 | else if ( whichSide == "right" ) { |
---|
| 889 | el.style.marginRight = marginSize + "px"; el.style.marginLeft = "0px"; |
---|
| 890 | } |
---|
| 891 | else { |
---|
| 892 | el.style.marginLeft = marginSize + "px"; el.style.marginRight = marginSize + "px"; |
---|
| 893 | } |
---|
| 894 | }, |
---|
| 895 | |
---|
| 896 | _setBorder: function(el,n,corners) { |
---|
| 897 | var borderSize = this._borderSize(n); |
---|
| 898 | var whichSide = corners == "top" ? this._whichSideTop() : this._whichSideBottom(); |
---|
| 899 | |
---|
| 900 | if ( whichSide == "left" ) { |
---|
| 901 | el.style.borderLeftWidth = borderSize + "px"; el.style.borderRightWidth = "0px"; |
---|
| 902 | } |
---|
| 903 | else if ( whichSide == "right" ) { |
---|
| 904 | el.style.borderRightWidth = borderSize + "px"; el.style.borderLeftWidth = "0px"; |
---|
| 905 | } |
---|
| 906 | else { |
---|
| 907 | el.style.borderLeftWidth = borderSize + "px"; el.style.borderRightWidth = borderSize + "px"; |
---|
| 908 | } |
---|
| 909 | }, |
---|
| 910 | |
---|
| 911 | _marginSize: function(n) { |
---|
| 912 | if ( this._isTransparent() ) |
---|
| 913 | return 0; |
---|
| 914 | |
---|
| 915 | var marginSizes = [ 5, 3, 2, 1 ]; |
---|
| 916 | var blendedMarginSizes = [ 3, 2, 1, 0 ]; |
---|
| 917 | var compactMarginSizes = [ 2, 1 ]; |
---|
| 918 | var smBlendedMarginSizes = [ 1, 0 ]; |
---|
| 919 | |
---|
| 920 | if ( this.options.compact && this.options.blend ) |
---|
| 921 | return smBlendedMarginSizes[n]; |
---|
| 922 | else if ( this.options.compact ) |
---|
| 923 | return compactMarginSizes[n]; |
---|
| 924 | else if ( this.options.blend ) |
---|
| 925 | return blendedMarginSizes[n]; |
---|
| 926 | else |
---|
| 927 | return marginSizes[n]; |
---|
| 928 | }, |
---|
| 929 | |
---|
| 930 | _borderSize: function(n) { |
---|
| 931 | var transparentBorderSizes = [ 5, 3, 2, 1 ]; |
---|
| 932 | var blendedBorderSizes = [ 2, 1, 1, 1 ]; |
---|
| 933 | var compactBorderSizes = [ 1, 0 ]; |
---|
| 934 | var actualBorderSizes = [ 0, 2, 0, 0 ]; |
---|
| 935 | |
---|
| 936 | if ( this.options.compact && (this.options.blend || this._isTransparent()) ) |
---|
| 937 | return 1; |
---|
| 938 | else if ( this.options.compact ) |
---|
| 939 | return compactBorderSizes[n]; |
---|
| 940 | else if ( this.options.blend ) |
---|
| 941 | return blendedBorderSizes[n]; |
---|
| 942 | else if ( this.options.border ) |
---|
| 943 | return actualBorderSizes[n]; |
---|
| 944 | else if ( this._isTransparent() ) |
---|
| 945 | return transparentBorderSizes[n]; |
---|
| 946 | return 0; |
---|
| 947 | }, |
---|
| 948 | |
---|
| 949 | _hasString: function(str) { for(var i=1 ; i<arguments.length ; i++) if (str.indexOf(arguments[i]) >= 0) return true; return false; }, |
---|
| 950 | _blend: function(c1, c2) { var cc1 = Rico.Color.createFromHex(c1); cc1.blend(Rico.Color.createFromHex(c2)); return cc1; }, |
---|
| 951 | _background: function(el) { try { return Rico.Color.createColorFromBackground(el).asHex(); } catch(err) { return "#ffffff"; } }, |
---|
| 952 | _isTransparent: function() { return this.options.color == "transparent"; }, |
---|
| 953 | _isTopRounded: function() { return this._hasString(this.options.corners, "all", "top", "tl", "tr"); }, |
---|
| 954 | _isBottomRounded: function() { return this._hasString(this.options.corners, "all", "bottom", "bl", "br"); }, |
---|
| 955 | _hasSingleTextChild: function(el) { return el.childNodes.length == 1 && el.childNodes[0].nodeType == 3; } |
---|
| 956 | } |
---|
| 957 | |
---|
| 958 | |
---|
| 959 | //-------------------- ricoDragAndDrop.js |
---|
| 960 | Rico.DragAndDrop = Class.create(); |
---|
| 961 | |
---|
| 962 | Rico.DragAndDrop.prototype = { |
---|
| 963 | |
---|
| 964 | initialize: function() { |
---|
| 965 | this.dropZones = new Array(); |
---|
| 966 | this.draggables = new Array(); |
---|
| 967 | this.currentDragObjects = new Array(); |
---|
| 968 | this.dragElement = null; |
---|
| 969 | this.lastSelectedDraggable = null; |
---|
| 970 | this.currentDragObjectVisible = false; |
---|
| 971 | this.interestedInMotionEvents = false; |
---|
| 972 | }, |
---|
| 973 | |
---|
| 974 | registerDropZone: function(aDropZone) { |
---|
| 975 | this.dropZones[ this.dropZones.length ] = aDropZone; |
---|
| 976 | }, |
---|
| 977 | |
---|
| 978 | deregisterDropZone: function(aDropZone) { |
---|
| 979 | var newDropZones = new Array(); |
---|
| 980 | var j = 0; |
---|
| 981 | for ( var i = 0 ; i < this.dropZones.length ; i++ ) { |
---|
| 982 | if ( this.dropZones[i] != aDropZone ) |
---|
| 983 | newDropZones[j++] = this.dropZones[i]; |
---|
| 984 | } |
---|
| 985 | |
---|
| 986 | this.dropZones = newDropZones; |
---|
| 987 | }, |
---|
| 988 | |
---|
| 989 | clearDropZones: function() { |
---|
| 990 | this.dropZones = new Array(); |
---|
| 991 | }, |
---|
| 992 | |
---|
| 993 | registerDraggable: function( aDraggable ) { |
---|
| 994 | this.draggables[ this.draggables.length ] = aDraggable; |
---|
| 995 | this._addMouseDownHandler( aDraggable ); |
---|
| 996 | }, |
---|
| 997 | |
---|
| 998 | clearSelection: function() { |
---|
| 999 | for ( var i = 0 ; i < this.currentDragObjects.length ; i++ ) |
---|
| 1000 | this.currentDragObjects[i].deselect(); |
---|
| 1001 | this.currentDragObjects = new Array(); |
---|
| 1002 | this.lastSelectedDraggable = null; |
---|
| 1003 | }, |
---|
| 1004 | |
---|
| 1005 | hasSelection: function() { |
---|
| 1006 | return this.currentDragObjects.length > 0; |
---|
| 1007 | }, |
---|
| 1008 | |
---|
| 1009 | setStartDragFromElement: function( e, mouseDownElement ) { |
---|
| 1010 | this.origPos = RicoUtil.toDocumentPosition(mouseDownElement); |
---|
| 1011 | this.startx = e.screenX - this.origPos.x |
---|
| 1012 | this.starty = e.screenY - this.origPos.y |
---|
| 1013 | //this.startComponentX = e.layerX ? e.layerX : e.offsetX; |
---|
| 1014 | //this.startComponentY = e.layerY ? e.layerY : e.offsetY; |
---|
| 1015 | //this.adjustedForDraggableSize = false; |
---|
| 1016 | |
---|
| 1017 | this.interestedInMotionEvents = this.hasSelection(); |
---|
| 1018 | this._terminateEvent(e); |
---|
| 1019 | }, |
---|
| 1020 | |
---|
| 1021 | updateSelection: function( draggable, extendSelection ) { |
---|
| 1022 | if ( ! extendSelection ) |
---|
| 1023 | this.clearSelection(); |
---|
| 1024 | |
---|
| 1025 | if ( draggable.isSelected() ) { |
---|
| 1026 | this.currentDragObjects.removeItem(draggable); |
---|
| 1027 | draggable.deselect(); |
---|
| 1028 | if ( draggable == this.lastSelectedDraggable ) |
---|
| 1029 | this.lastSelectedDraggable = null; |
---|
| 1030 | } |
---|
| 1031 | else { |
---|
| 1032 | this.currentDragObjects[ this.currentDragObjects.length ] = draggable; |
---|
| 1033 | draggable.select(); |
---|
| 1034 | this.lastSelectedDraggable = draggable; |
---|
| 1035 | } |
---|
| 1036 | }, |
---|
| 1037 | |
---|
| 1038 | _mouseDownHandler: function(e) { |
---|
| 1039 | if ( arguments.length == 0 ) |
---|
| 1040 | e = event; |
---|
| 1041 | |
---|
| 1042 | // if not button 1 ignore it... |
---|
| 1043 | var nsEvent = e.which != undefined; |
---|
| 1044 | if ( (nsEvent && e.which != 1) || (!nsEvent && e.button != 1)) |
---|
| 1045 | return; |
---|
| 1046 | |
---|
| 1047 | var eventTarget = e.target ? e.target : e.srcElement; |
---|
| 1048 | var draggableObject = eventTarget.draggable; |
---|
| 1049 | |
---|
| 1050 | var candidate = eventTarget; |
---|
| 1051 | while (draggableObject == null && candidate.parentNode) { |
---|
| 1052 | candidate = candidate.parentNode; |
---|
| 1053 | draggableObject = candidate.draggable; |
---|
| 1054 | } |
---|
| 1055 | |
---|
| 1056 | if ( draggableObject == null ) |
---|
| 1057 | return; |
---|
| 1058 | |
---|
| 1059 | this.updateSelection( draggableObject, e.ctrlKey ); |
---|
| 1060 | |
---|
| 1061 | // clear the drop zones postion cache... |
---|
| 1062 | if ( this.hasSelection() ) |
---|
| 1063 | for ( var i = 0 ; i < this.dropZones.length ; i++ ) |
---|
| 1064 | this.dropZones[i].clearPositionCache(); |
---|
| 1065 | |
---|
| 1066 | this.setStartDragFromElement( e, draggableObject.getMouseDownHTMLElement() ); |
---|
| 1067 | }, |
---|
| 1068 | |
---|
| 1069 | |
---|
| 1070 | _mouseMoveHandler: function(e) { |
---|
| 1071 | var nsEvent = e.which != undefined; |
---|
| 1072 | if ( !this.interestedInMotionEvents ) { |
---|
| 1073 | this._terminateEvent(e); |
---|
| 1074 | return; |
---|
| 1075 | } |
---|
| 1076 | |
---|
| 1077 | if ( ! this.hasSelection() ) |
---|
| 1078 | return; |
---|
| 1079 | |
---|
| 1080 | if ( ! this.currentDragObjectVisible ) |
---|
| 1081 | this._startDrag(e); |
---|
| 1082 | |
---|
| 1083 | if ( !this.activatedDropZones ) |
---|
| 1084 | this._activateRegisteredDropZones(); |
---|
| 1085 | |
---|
| 1086 | //if ( !this.adjustedForDraggableSize ) |
---|
| 1087 | // this._adjustForDraggableSize(e); |
---|
| 1088 | |
---|
| 1089 | this._updateDraggableLocation(e); |
---|
| 1090 | this._updateDropZonesHover(e); |
---|
| 1091 | |
---|
| 1092 | this._terminateEvent(e); |
---|
| 1093 | }, |
---|
| 1094 | |
---|
| 1095 | _makeDraggableObjectVisible: function(e) |
---|
| 1096 | { |
---|
| 1097 | if ( !this.hasSelection() ) |
---|
| 1098 | return; |
---|
| 1099 | |
---|
| 1100 | var dragElement; |
---|
| 1101 | if ( this.currentDragObjects.length > 1 ) |
---|
| 1102 | dragElement = this.currentDragObjects[0].getMultiObjectDragGUI(this.currentDragObjects); |
---|
| 1103 | else |
---|
| 1104 | dragElement = this.currentDragObjects[0].getSingleObjectDragGUI(); |
---|
| 1105 | |
---|
| 1106 | // go ahead and absolute position it... |
---|
| 1107 | if ( RicoUtil.getElementsComputedStyle(dragElement, "position") != "absolute" ) |
---|
| 1108 | dragElement.style.position = "absolute"; |
---|
| 1109 | |
---|
| 1110 | // need to parent him into the document... |
---|
| 1111 | if ( dragElement.parentNode == null || dragElement.parentNode.nodeType == 11 ) |
---|
| 1112 | document.body.appendChild(dragElement); |
---|
| 1113 | |
---|
| 1114 | this.dragElement = dragElement; |
---|
| 1115 | this._updateDraggableLocation(e); |
---|
| 1116 | |
---|
| 1117 | this.currentDragObjectVisible = true; |
---|
| 1118 | }, |
---|
| 1119 | |
---|
| 1120 | /** |
---|
| 1121 | _adjustForDraggableSize: function(e) { |
---|
| 1122 | var dragElementWidth = this.dragElement.offsetWidth; |
---|
| 1123 | var dragElementHeight = this.dragElement.offsetHeight; |
---|
| 1124 | if ( this.startComponentX > dragElementWidth ) |
---|
| 1125 | this.startx -= this.startComponentX - dragElementWidth + 2; |
---|
| 1126 | if ( e.offsetY ) { |
---|
| 1127 | if ( this.startComponentY > dragElementHeight ) |
---|
| 1128 | this.starty -= this.startComponentY - dragElementHeight + 2; |
---|
| 1129 | } |
---|
| 1130 | this.adjustedForDraggableSize = true; |
---|
| 1131 | }, |
---|
| 1132 | **/ |
---|
| 1133 | |
---|
| 1134 | _updateDraggableLocation: function(e) { |
---|
| 1135 | var dragObjectStyle = this.dragElement.style; |
---|
| 1136 | dragObjectStyle.left = (e.screenX - this.startx) + "px" |
---|
| 1137 | dragObjectStyle.top = (e.screenY - this.starty) + "px"; |
---|
| 1138 | }, |
---|
| 1139 | |
---|
| 1140 | _updateDropZonesHover: function(e) { |
---|
| 1141 | var n = this.dropZones.length; |
---|
| 1142 | for ( var i = 0 ; i < n ; i++ ) { |
---|
| 1143 | if ( ! this._mousePointInDropZone( e, this.dropZones[i] ) ) |
---|
| 1144 | this.dropZones[i].hideHover(); |
---|
| 1145 | } |
---|
| 1146 | |
---|
| 1147 | for ( var i = 0 ; i < n ; i++ ) { |
---|
| 1148 | if ( this._mousePointInDropZone( e, this.dropZones[i] ) ) { |
---|
| 1149 | if ( this.dropZones[i].canAccept(this.currentDragObjects) ) |
---|
| 1150 | this.dropZones[i].showHover(); |
---|
| 1151 | } |
---|
| 1152 | } |
---|
| 1153 | }, |
---|
| 1154 | |
---|
| 1155 | _startDrag: function(e) { |
---|
| 1156 | for ( var i = 0 ; i < this.currentDragObjects.length ; i++ ) |
---|
| 1157 | this.currentDragObjects[i].startDrag(); |
---|
| 1158 | |
---|
| 1159 | this._makeDraggableObjectVisible(e); |
---|
| 1160 | }, |
---|
| 1161 | |
---|
| 1162 | _mouseUpHandler: function(e) { |
---|
| 1163 | if ( ! this.hasSelection() ) |
---|
| 1164 | return; |
---|
| 1165 | |
---|
| 1166 | var nsEvent = e.which != undefined; |
---|
| 1167 | if ( (nsEvent && e.which != 1) || (!nsEvent && e.button != 1)) |
---|
| 1168 | return; |
---|
| 1169 | |
---|
| 1170 | this.interestedInMotionEvents = false; |
---|
| 1171 | |
---|
| 1172 | if ( this.dragElement == null ) { |
---|
| 1173 | this._terminateEvent(e); |
---|
| 1174 | return; |
---|
| 1175 | } |
---|
| 1176 | |
---|
| 1177 | if ( this._placeDraggableInDropZone(e) ) |
---|
| 1178 | this._completeDropOperation(e); |
---|
| 1179 | else { |
---|
| 1180 | this._terminateEvent(e); |
---|
| 1181 | new Effect.Position( this.dragElement, |
---|
| 1182 | this.origPos.x, |
---|
| 1183 | this.origPos.y, |
---|
| 1184 | 200, |
---|
| 1185 | 20, |
---|
| 1186 | { complete : this._doCancelDragProcessing.bind(this) } ); |
---|
| 1187 | } |
---|
| 1188 | }, |
---|
| 1189 | |
---|
| 1190 | _completeDropOperation: function(e) { |
---|
| 1191 | if ( this.dragElement != this.currentDragObjects[0].getMouseDownHTMLElement() ) { |
---|
| 1192 | if ( this.dragElement.parentNode != null ) |
---|
| 1193 | this.dragElement.parentNode.removeChild(this.dragElement); |
---|
| 1194 | } |
---|
| 1195 | |
---|
| 1196 | this._deactivateRegisteredDropZones(); |
---|
| 1197 | this._endDrag(); |
---|
| 1198 | this.clearSelection(); |
---|
| 1199 | this.dragElement = null; |
---|
| 1200 | this.currentDragObjectVisible = false; |
---|
| 1201 | this._terminateEvent(e); |
---|
| 1202 | }, |
---|
| 1203 | |
---|
| 1204 | _doCancelDragProcessing: function() { |
---|
| 1205 | this._cancelDrag(); |
---|
| 1206 | |
---|
| 1207 | if ( this.dragElement != this.currentDragObjects[0].getMouseDownHTMLElement() ) { |
---|
| 1208 | if ( this.dragElement.parentNode != null ) { |
---|
| 1209 | this.dragElement.parentNode.removeChild(this.dragElement); |
---|
| 1210 | } |
---|
| 1211 | } |
---|
| 1212 | |
---|
| 1213 | this._deactivateRegisteredDropZones(); |
---|
| 1214 | this.dragElement = null; |
---|
| 1215 | this.currentDragObjectVisible = false; |
---|
| 1216 | }, |
---|
| 1217 | |
---|
| 1218 | _placeDraggableInDropZone: function(e) { |
---|
| 1219 | var foundDropZone = false; |
---|
| 1220 | var n = this.dropZones.length; |
---|
| 1221 | for ( var i = 0 ; i < n ; i++ ) { |
---|
| 1222 | if ( this._mousePointInDropZone( e, this.dropZones[i] ) ) { |
---|
| 1223 | if ( this.dropZones[i].canAccept(this.currentDragObjects) ) { |
---|
| 1224 | this.dropZones[i].hideHover(); |
---|
| 1225 | this.dropZones[i].accept(this.currentDragObjects); |
---|
| 1226 | foundDropZone = true; |
---|
| 1227 | break; |
---|
| 1228 | } |
---|
| 1229 | } |
---|
| 1230 | } |
---|
| 1231 | |
---|
| 1232 | return foundDropZone; |
---|
| 1233 | }, |
---|
| 1234 | |
---|
| 1235 | _cancelDrag: function() { |
---|
| 1236 | for ( var i = 0 ; i < this.currentDragObjects.length ; i++ ) |
---|
| 1237 | this.currentDragObjects[i].cancelDrag(); |
---|
| 1238 | }, |
---|
| 1239 | |
---|
| 1240 | _endDrag: function() { |
---|
| 1241 | for ( var i = 0 ; i < this.currentDragObjects.length ; i++ ) |
---|
| 1242 | this.currentDragObjects[i].endDrag(); |
---|
| 1243 | }, |
---|
| 1244 | |
---|
| 1245 | _mousePointInDropZone: function( e, dropZone ) { |
---|
| 1246 | |
---|
| 1247 | var absoluteRect = dropZone.getAbsoluteRect(); |
---|
| 1248 | |
---|
| 1249 | return e.clientX > absoluteRect.left && |
---|
| 1250 | e.clientX < absoluteRect.right && |
---|
| 1251 | e.clientY > absoluteRect.top && |
---|
| 1252 | e.clientY < absoluteRect.bottom; |
---|
| 1253 | }, |
---|
| 1254 | |
---|
| 1255 | _addMouseDownHandler: function( aDraggable ) |
---|
| 1256 | { |
---|
| 1257 | var htmlElement = aDraggable.getMouseDownHTMLElement(); |
---|
| 1258 | if ( htmlElement != null ) { |
---|
| 1259 | htmlElement.draggable = aDraggable; |
---|
| 1260 | this._addMouseDownEvent( htmlElement ); |
---|
| 1261 | } |
---|
| 1262 | }, |
---|
| 1263 | |
---|
| 1264 | _activateRegisteredDropZones: function() { |
---|
| 1265 | var n = this.dropZones.length; |
---|
| 1266 | for ( var i = 0 ; i < n ; i++ ) { |
---|
| 1267 | var dropZone = this.dropZones[i]; |
---|
| 1268 | if ( dropZone.canAccept(this.currentDragObjects) ) |
---|
| 1269 | dropZone.activate(); |
---|
| 1270 | } |
---|
| 1271 | |
---|
| 1272 | this.activatedDropZones = true; |
---|
| 1273 | }, |
---|
| 1274 | |
---|
| 1275 | _deactivateRegisteredDropZones: function() { |
---|
| 1276 | var n = this.dropZones.length; |
---|
| 1277 | for ( var i = 0 ; i < n ; i++ ) |
---|
| 1278 | this.dropZones[i].deactivate(); |
---|
| 1279 | this.activatedDropZones = false; |
---|
| 1280 | }, |
---|
| 1281 | |
---|
| 1282 | _addMouseDownEvent: function( htmlElement ) { |
---|
| 1283 | if ( typeof document.implementation != "undefined" && |
---|
| 1284 | document.implementation.hasFeature("HTML", "1.0") && |
---|
| 1285 | document.implementation.hasFeature("Events", "2.0") && |
---|
| 1286 | document.implementation.hasFeature("CSS", "2.0") ) { |
---|
| 1287 | htmlElement.addEventListener("mousedown", this._mouseDownHandler.bindAsEventListener(this), false); |
---|
| 1288 | } |
---|
| 1289 | else { |
---|
| 1290 | htmlElement.attachEvent( "onmousedown", this._mouseDownHandler.bindAsEventListener(this) ); |
---|
| 1291 | } |
---|
| 1292 | }, |
---|
| 1293 | |
---|
| 1294 | _terminateEvent: function(e) { |
---|
| 1295 | if ( e.stopPropagation != undefined ) |
---|
| 1296 | e.stopPropagation(); |
---|
| 1297 | else if ( e.cancelBubble != undefined ) |
---|
| 1298 | e.cancelBubble = true; |
---|
| 1299 | |
---|
| 1300 | if ( e.preventDefault != undefined ) |
---|
| 1301 | e.preventDefault(); |
---|
| 1302 | else |
---|
| 1303 | e.returnValue = false; |
---|
| 1304 | }, |
---|
| 1305 | |
---|
| 1306 | initializeEventHandlers: function() { |
---|
| 1307 | if ( typeof document.implementation != "undefined" && |
---|
| 1308 | document.implementation.hasFeature("HTML", "1.0") && |
---|
| 1309 | document.implementation.hasFeature("Events", "2.0") && |
---|
| 1310 | document.implementation.hasFeature("CSS", "2.0") ) { |
---|
| 1311 | document.addEventListener("mouseup", this._mouseUpHandler.bindAsEventListener(this), false); |
---|
| 1312 | document.addEventListener("mousemove", this._mouseMoveHandler.bindAsEventListener(this), false); |
---|
| 1313 | } |
---|
| 1314 | else { |
---|
| 1315 | document.attachEvent( "onmouseup", this._mouseUpHandler.bindAsEventListener(this) ); |
---|
| 1316 | document.attachEvent( "onmousemove", this._mouseMoveHandler.bindAsEventListener(this) ); |
---|
| 1317 | } |
---|
| 1318 | } |
---|
| 1319 | } |
---|
| 1320 | |
---|
| 1321 | //var dndMgr = new Rico.DragAndDrop(); |
---|
| 1322 | //dndMgr.initializeEventHandlers(); |
---|
| 1323 | |
---|
| 1324 | |
---|
| 1325 | //-------------------- ricoDraggable.js |
---|
| 1326 | Rico.Draggable = Class.create(); |
---|
| 1327 | |
---|
| 1328 | Rico.Draggable.prototype = { |
---|
| 1329 | |
---|
| 1330 | initialize: function( type, htmlElement ) { |
---|
| 1331 | this.type = type; |
---|
| 1332 | this.htmlElement = $(htmlElement); |
---|
| 1333 | this.selected = false; |
---|
| 1334 | }, |
---|
| 1335 | |
---|
| 1336 | /** |
---|
| 1337 | * Returns the HTML element that should have a mouse down event |
---|
| 1338 | * added to it in order to initiate a drag operation |
---|
| 1339 | * |
---|
| 1340 | **/ |
---|
| 1341 | getMouseDownHTMLElement: function() { |
---|
| 1342 | return this.htmlElement; |
---|
| 1343 | }, |
---|
| 1344 | |
---|
| 1345 | select: function() { |
---|
| 1346 | this.selected = true; |
---|
| 1347 | |
---|
| 1348 | if ( this.showingSelected ) |
---|
| 1349 | return; |
---|
| 1350 | |
---|
| 1351 | var htmlElement = this.getMouseDownHTMLElement(); |
---|
| 1352 | |
---|
| 1353 | var color = Rico.Color.createColorFromBackground(htmlElement); |
---|
| 1354 | color.isBright() ? color.darken(0.033) : color.brighten(0.033); |
---|
| 1355 | |
---|
| 1356 | this.saveBackground = RicoUtil.getElementsComputedStyle(htmlElement, "backgroundColor", "background-color"); |
---|
| 1357 | htmlElement.style.backgroundColor = color.asHex(); |
---|
| 1358 | this.showingSelected = true; |
---|
| 1359 | }, |
---|
| 1360 | |
---|
| 1361 | deselect: function() { |
---|
| 1362 | this.selected = false; |
---|
| 1363 | if ( !this.showingSelected ) |
---|
| 1364 | return; |
---|
| 1365 | |
---|
| 1366 | var htmlElement = this.getMouseDownHTMLElement(); |
---|
| 1367 | |
---|
| 1368 | htmlElement.style.backgroundColor = this.saveBackground; |
---|
| 1369 | this.showingSelected = false; |
---|
| 1370 | }, |
---|
| 1371 | |
---|
| 1372 | isSelected: function() { |
---|
| 1373 | return this.selected; |
---|
| 1374 | }, |
---|
| 1375 | |
---|
| 1376 | startDrag: function() { |
---|
| 1377 | }, |
---|
| 1378 | |
---|
| 1379 | cancelDrag: function() { |
---|
| 1380 | }, |
---|
| 1381 | |
---|
| 1382 | endDrag: function() { |
---|
| 1383 | }, |
---|
| 1384 | |
---|
| 1385 | getSingleObjectDragGUI: function() { |
---|
| 1386 | return this.htmlElement; |
---|
| 1387 | }, |
---|
| 1388 | |
---|
| 1389 | getMultiObjectDragGUI: function( draggables ) { |
---|
| 1390 | return this.htmlElement; |
---|
| 1391 | }, |
---|
| 1392 | |
---|
| 1393 | getDroppedGUI: function() { |
---|
| 1394 | return this.htmlElement; |
---|
| 1395 | }, |
---|
| 1396 | |
---|
| 1397 | toString: function() { |
---|
| 1398 | return this.type + ":" + this.htmlElement + ":"; |
---|
| 1399 | } |
---|
| 1400 | |
---|
| 1401 | } |
---|
| 1402 | |
---|
| 1403 | |
---|
| 1404 | //-------------------- ricoDropzone.js |
---|
| 1405 | Rico.Dropzone = Class.create(); |
---|
| 1406 | |
---|
| 1407 | Rico.Dropzone.prototype = { |
---|
| 1408 | |
---|
| 1409 | initialize: function( htmlElement ) { |
---|
| 1410 | this.htmlElement = $(htmlElement); |
---|
| 1411 | this.absoluteRect = null; |
---|
| 1412 | }, |
---|
| 1413 | |
---|
| 1414 | getHTMLElement: function() { |
---|
| 1415 | return this.htmlElement; |
---|
| 1416 | }, |
---|
| 1417 | |
---|
| 1418 | clearPositionCache: function() { |
---|
| 1419 | this.absoluteRect = null; |
---|
| 1420 | }, |
---|
| 1421 | |
---|
| 1422 | getAbsoluteRect: function() { |
---|
| 1423 | if ( this.absoluteRect == null ) { |
---|
| 1424 | var htmlElement = this.getHTMLElement(); |
---|
| 1425 | var pos = RicoUtil.toViewportPosition(htmlElement); |
---|
| 1426 | |
---|
| 1427 | this.absoluteRect = { |
---|
| 1428 | top: pos.y, |
---|
| 1429 | left: pos.x, |
---|
| 1430 | bottom: pos.y + htmlElement.offsetHeight, |
---|
| 1431 | right: pos.x + htmlElement.offsetWidth |
---|
| 1432 | }; |
---|
| 1433 | } |
---|
| 1434 | return this.absoluteRect; |
---|
| 1435 | }, |
---|
| 1436 | |
---|
| 1437 | activate: function() { |
---|
| 1438 | var htmlElement = this.getHTMLElement(); |
---|
| 1439 | if (htmlElement == null || this.showingActive) |
---|
| 1440 | return; |
---|
| 1441 | |
---|
| 1442 | this.showingActive = true; |
---|
| 1443 | this.saveBackgroundColor = htmlElement.style.backgroundColor; |
---|
| 1444 | |
---|
| 1445 | var fallbackColor = "#ffea84"; |
---|
| 1446 | var currentColor = Rico.Color.createColorFromBackground(htmlElement); |
---|
| 1447 | if ( currentColor == null ) |
---|
| 1448 | htmlElement.style.backgroundColor = fallbackColor; |
---|
| 1449 | else { |
---|
| 1450 | currentColor.isBright() ? currentColor.darken(0.2) : currentColor.brighten(0.2); |
---|
| 1451 | htmlElement.style.backgroundColor = currentColor.asHex(); |
---|
| 1452 | } |
---|
| 1453 | }, |
---|
| 1454 | |
---|
| 1455 | deactivate: function() { |
---|
| 1456 | var htmlElement = this.getHTMLElement(); |
---|
| 1457 | if (htmlElement == null || !this.showingActive) |
---|
| 1458 | return; |
---|
| 1459 | |
---|
| 1460 | htmlElement.style.backgroundColor = this.saveBackgroundColor; |
---|
| 1461 | this.showingActive = false; |
---|
| 1462 | this.saveBackgroundColor = null; |
---|
| 1463 | }, |
---|
| 1464 | |
---|
| 1465 | showHover: function() { |
---|
| 1466 | var htmlElement = this.getHTMLElement(); |
---|
| 1467 | if ( htmlElement == null || this.showingHover ) |
---|
| 1468 | return; |
---|
| 1469 | |
---|
| 1470 | this.saveBorderWidth = htmlElement.style.borderWidth; |
---|
| 1471 | this.saveBorderStyle = htmlElement.style.borderStyle; |
---|
| 1472 | this.saveBorderColor = htmlElement.style.borderColor; |
---|
| 1473 | |
---|
| 1474 | this.showingHover = true; |
---|
| 1475 | htmlElement.style.borderWidth = "1px"; |
---|
| 1476 | htmlElement.style.borderStyle = "solid"; |
---|
| 1477 | //htmlElement.style.borderColor = "#ff9900"; |
---|
| 1478 | htmlElement.style.borderColor = "#ffff00"; |
---|
| 1479 | }, |
---|
| 1480 | |
---|
| 1481 | hideHover: function() { |
---|
| 1482 | var htmlElement = this.getHTMLElement(); |
---|
| 1483 | if ( htmlElement == null || !this.showingHover ) |
---|
| 1484 | return; |
---|
| 1485 | |
---|
| 1486 | htmlElement.style.borderWidth = this.saveBorderWidth; |
---|
| 1487 | htmlElement.style.borderStyle = this.saveBorderStyle; |
---|
| 1488 | htmlElement.style.borderColor = this.saveBorderColor; |
---|
| 1489 | this.showingHover = false; |
---|
| 1490 | }, |
---|
| 1491 | |
---|
| 1492 | canAccept: function(draggableObjects) { |
---|
| 1493 | return true; |
---|
| 1494 | }, |
---|
| 1495 | |
---|
| 1496 | accept: function(draggableObjects) { |
---|
| 1497 | var htmlElement = this.getHTMLElement(); |
---|
| 1498 | if ( htmlElement == null ) |
---|
| 1499 | return; |
---|
| 1500 | |
---|
| 1501 | n = draggableObjects.length; |
---|
| 1502 | for ( var i = 0 ; i < n ; i++ ) |
---|
| 1503 | { |
---|
| 1504 | var theGUI = draggableObjects[i].getDroppedGUI(); |
---|
| 1505 | if ( RicoUtil.getElementsComputedStyle( theGUI, "position" ) == "absolute" ) |
---|
| 1506 | { |
---|
| 1507 | theGUI.style.position = "static"; |
---|
| 1508 | theGUI.style.top = ""; |
---|
| 1509 | theGUI.style.top = ""; |
---|
| 1510 | } |
---|
| 1511 | htmlElement.appendChild(theGUI); |
---|
| 1512 | } |
---|
| 1513 | } |
---|
| 1514 | } |
---|
| 1515 | |
---|
| 1516 | |
---|
| 1517 | //-------------------- ricoEffects.js |
---|
| 1518 | |
---|
| 1519 | /** |
---|
| 1520 | * Use the Effect namespace for effects. If using scriptaculous effects |
---|
| 1521 | * this will already be defined, otherwise we'll just create an empty |
---|
| 1522 | * object for it... |
---|
| 1523 | **/ |
---|
| 1524 | if ( window.Effect == undefined ) |
---|
| 1525 | Effect = {}; |
---|
| 1526 | |
---|
| 1527 | Effect.SizeAndPosition = Class.create(); |
---|
| 1528 | Effect.SizeAndPosition.prototype = { |
---|
| 1529 | |
---|
| 1530 | initialize: function(element, x, y, w, h, duration, steps, options) { |
---|
| 1531 | this.element = $(element); |
---|
| 1532 | this.x = x; |
---|
| 1533 | this.y = y; |
---|
| 1534 | this.w = w; |
---|
| 1535 | this.h = h; |
---|
| 1536 | this.duration = duration; |
---|
| 1537 | this.steps = steps; |
---|
| 1538 | this.options = arguments[7] || {}; |
---|
| 1539 | |
---|
| 1540 | this.sizeAndPosition(); |
---|
| 1541 | }, |
---|
| 1542 | |
---|
| 1543 | sizeAndPosition: function() { |
---|
| 1544 | if (this.isFinished()) { |
---|
| 1545 | if(this.options.complete) this.options.complete(this); |
---|
| 1546 | return; |
---|
| 1547 | } |
---|
| 1548 | |
---|
| 1549 | if (this.timer) |
---|
| 1550 | clearTimeout(this.timer); |
---|
| 1551 | |
---|
| 1552 | var stepDuration = Math.round(this.duration/this.steps) ; |
---|
| 1553 | |
---|
| 1554 | // Get original values: x,y = top left corner; w,h = width height |
---|
| 1555 | var currentX = this.element.offsetLeft; |
---|
| 1556 | var currentY = this.element.offsetTop; |
---|
| 1557 | var currentW = this.element.offsetWidth; |
---|
| 1558 | var currentH = this.element.offsetHeight; |
---|
| 1559 | |
---|
| 1560 | // If values not set, or zero, we do not modify them, and take original as final as well |
---|
| 1561 | this.x = (this.x) ? this.x : currentX; |
---|
| 1562 | this.y = (this.y) ? this.y : currentY; |
---|
| 1563 | this.w = (this.w) ? this.w : currentW; |
---|
| 1564 | this.h = (this.h) ? this.h : currentH; |
---|
| 1565 | |
---|
| 1566 | // how much do we need to modify our values for each step? |
---|
| 1567 | var difX = this.steps > 0 ? (this.x - currentX)/this.steps : 0; |
---|
| 1568 | var difY = this.steps > 0 ? (this.y - currentY)/this.steps : 0; |
---|
| 1569 | var difW = this.steps > 0 ? (this.w - currentW)/this.steps : 0; |
---|
| 1570 | var difH = this.steps > 0 ? (this.h - currentH)/this.steps : 0; |
---|
| 1571 | |
---|
| 1572 | this.moveBy(difX, difY); |
---|
| 1573 | this.resizeBy(difW, difH); |
---|
| 1574 | |
---|
| 1575 | this.duration -= stepDuration; |
---|
| 1576 | this.steps--; |
---|
| 1577 | |
---|
| 1578 | this.timer = setTimeout(this.sizeAndPosition.bind(this), stepDuration); |
---|
| 1579 | }, |
---|
| 1580 | |
---|
| 1581 | isFinished: function() { |
---|
| 1582 | return this.steps <= 0; |
---|
| 1583 | }, |
---|
| 1584 | |
---|
| 1585 | moveBy: function( difX, difY ) { |
---|
| 1586 | var currentLeft = this.element.offsetLeft; |
---|
| 1587 | var currentTop = this.element.offsetTop; |
---|
| 1588 | var intDifX = parseInt(difX); |
---|
| 1589 | var intDifY = parseInt(difY); |
---|
| 1590 | |
---|
| 1591 | var style = this.element.style; |
---|
| 1592 | if ( intDifX != 0 ) |
---|
| 1593 | style.left = (currentLeft + intDifX) + "px"; |
---|
| 1594 | if ( intDifY != 0 ) |
---|
| 1595 | style.top = (currentTop + intDifY) + "px"; |
---|
| 1596 | }, |
---|
| 1597 | |
---|
| 1598 | resizeBy: function( difW, difH ) { |
---|
| 1599 | var currentWidth = this.element.offsetWidth; |
---|
| 1600 | var currentHeight = this.element.offsetHeight; |
---|
| 1601 | var intDifW = parseInt(difW); |
---|
| 1602 | var intDifH = parseInt(difH); |
---|
| 1603 | |
---|
| 1604 | var style = this.element.style; |
---|
| 1605 | if ( intDifW != 0 ) |
---|
| 1606 | style.width = (currentWidth + intDifW) + "px"; |
---|
| 1607 | if ( intDifH != 0 ) |
---|
| 1608 | style.height = (currentHeight + intDifH) + "px"; |
---|
| 1609 | } |
---|
| 1610 | } |
---|
| 1611 | |
---|
| 1612 | Effect.Size = Class.create(); |
---|
| 1613 | Effect.Size.prototype = { |
---|
| 1614 | |
---|
| 1615 | initialize: function(element, w, h, duration, steps, options) { |
---|
| 1616 | new Effect.SizeAndPosition(element, null, null, w, h, duration, steps, options); |
---|
| 1617 | } |
---|
| 1618 | } |
---|
| 1619 | |
---|
| 1620 | Effect.Position = Class.create(); |
---|
| 1621 | Effect.Position.prototype = { |
---|
| 1622 | |
---|
| 1623 | initialize: function(element, x, y, duration, steps, options) { |
---|
| 1624 | new Effect.SizeAndPosition(element, x, y, null, null, duration, steps, options); |
---|
| 1625 | } |
---|
| 1626 | } |
---|
| 1627 | |
---|
| 1628 | Effect.Round = Class.create(); |
---|
| 1629 | Effect.Round.prototype = { |
---|
| 1630 | |
---|
| 1631 | initialize: function(tagName, className, options) { |
---|
| 1632 | var elements = document.getElementsByTagAndClassName(tagName,className); |
---|
| 1633 | for ( var i = 0 ; i < elements.length ; i++ ) |
---|
| 1634 | Rico.Corner.round( elements[i], options ); |
---|
| 1635 | } |
---|
| 1636 | }; |
---|
| 1637 | |
---|
| 1638 | Effect.FadeTo = Class.create(); |
---|
| 1639 | Effect.FadeTo.prototype = { |
---|
| 1640 | |
---|
| 1641 | initialize: function( element, opacity, duration, steps, options) { |
---|
| 1642 | this.element = $(element); |
---|
| 1643 | this.opacity = opacity; |
---|
| 1644 | this.duration = duration; |
---|
| 1645 | this.steps = steps; |
---|
| 1646 | this.options = arguments[4] || {}; |
---|
| 1647 | this.fadeTo(); |
---|
| 1648 | }, |
---|
| 1649 | |
---|
| 1650 | fadeTo: function() { |
---|
| 1651 | if (this.isFinished()) { |
---|
| 1652 | if(this.options.complete) this.options.complete(this); |
---|
| 1653 | return; |
---|
| 1654 | } |
---|
| 1655 | |
---|
| 1656 | if (this.timer) |
---|
| 1657 | clearTimeout(this.timer); |
---|
| 1658 | |
---|
| 1659 | var stepDuration = Math.round(this.duration/this.steps) ; |
---|
| 1660 | var currentOpacity = this.getElementOpacity(); |
---|
| 1661 | var delta = this.steps > 0 ? (this.opacity - currentOpacity)/this.steps : 0; |
---|
| 1662 | |
---|
| 1663 | this.changeOpacityBy(delta); |
---|
| 1664 | this.duration -= stepDuration; |
---|
| 1665 | this.steps--; |
---|
| 1666 | |
---|
| 1667 | this.timer = setTimeout(this.fadeTo.bind(this), stepDuration); |
---|
| 1668 | }, |
---|
| 1669 | |
---|
| 1670 | changeOpacityBy: function(v) { |
---|
| 1671 | var currentOpacity = this.getElementOpacity(); |
---|
| 1672 | var newOpacity = Math.max(0, Math.min(currentOpacity+v, 1)); |
---|
| 1673 | this.element.ricoOpacity = newOpacity; |
---|
| 1674 | |
---|
| 1675 | this.element.style.filter = "alpha(opacity:"+Math.round(newOpacity*100)+")"; |
---|
| 1676 | this.element.style.opacity = newOpacity; /*//*/; |
---|
| 1677 | }, |
---|
| 1678 | |
---|
| 1679 | isFinished: function() { |
---|
| 1680 | return this.steps <= 0; |
---|
| 1681 | }, |
---|
| 1682 | |
---|
| 1683 | getElementOpacity: function() { |
---|
| 1684 | if ( this.element.ricoOpacity == undefined ) { |
---|
| 1685 | var opacity; |
---|
| 1686 | if ( this.element.currentStyle ) { |
---|
| 1687 | opacity = this.element.currentStyle.opacity; |
---|
| 1688 | } |
---|
| 1689 | else if ( document.defaultView.getComputedStyle != undefined ) { |
---|
| 1690 | var computedStyle = document.defaultView.getComputedStyle; |
---|
| 1691 | opacity = computedStyle(this.element, null).getPropertyValue('opacity'); |
---|
| 1692 | } |
---|
| 1693 | |
---|
| 1694 | this.element.ricoOpacity = opacity != undefined ? opacity : 1.0; |
---|
| 1695 | } |
---|
| 1696 | |
---|
| 1697 | return parseFloat(this.element.ricoOpacity); |
---|
| 1698 | } |
---|
| 1699 | } |
---|
| 1700 | |
---|
| 1701 | Effect.AccordionSize = Class.create(); |
---|
| 1702 | |
---|
| 1703 | Effect.AccordionSize.prototype = { |
---|
| 1704 | |
---|
| 1705 | initialize: function(e1, e2, start, end, duration, steps, options) { |
---|
| 1706 | this.e1 = $(e1); |
---|
| 1707 | this.e2 = $(e2); |
---|
| 1708 | this.start = start; |
---|
| 1709 | this.end = end; |
---|
| 1710 | this.duration = duration; |
---|
| 1711 | this.steps = steps; |
---|
| 1712 | this.options = arguments[6] || {}; |
---|
| 1713 | |
---|
| 1714 | this.accordionSize(); |
---|
| 1715 | }, |
---|
| 1716 | |
---|
| 1717 | accordionSize: function() { |
---|
| 1718 | |
---|
| 1719 | if (this.isFinished()) { |
---|
| 1720 | // just in case there are round errors or such... |
---|
| 1721 | this.e1.style.height = this.start + "px"; |
---|
| 1722 | this.e2.style.height = this.end + "px"; |
---|
| 1723 | |
---|
| 1724 | if(this.options.complete) |
---|
| 1725 | this.options.complete(this); |
---|
| 1726 | return; |
---|
| 1727 | } |
---|
| 1728 | |
---|
| 1729 | if (this.timer) |
---|
| 1730 | clearTimeout(this.timer); |
---|
| 1731 | |
---|
| 1732 | var stepDuration = Math.round(this.duration/this.steps) ; |
---|
| 1733 | |
---|
| 1734 | var diff = this.steps > 0 ? (parseInt(this.e1.offsetHeight) - this.start)/this.steps : 0; |
---|
| 1735 | this.resizeBy(diff); |
---|
| 1736 | |
---|
| 1737 | this.duration -= stepDuration; |
---|
| 1738 | this.steps--; |
---|
| 1739 | |
---|
| 1740 | this.timer = setTimeout(this.accordionSize.bind(this), stepDuration); |
---|
| 1741 | }, |
---|
| 1742 | |
---|
| 1743 | isFinished: function() { |
---|
| 1744 | return this.steps <= 0; |
---|
| 1745 | }, |
---|
| 1746 | |
---|
| 1747 | resizeBy: function(diff) { |
---|
| 1748 | var h1Height = this.e1.offsetHeight; |
---|
| 1749 | var h2Height = this.e2.offsetHeight; |
---|
| 1750 | var intDiff = parseInt(diff); |
---|
| 1751 | if ( diff != 0 ) { |
---|
| 1752 | this.e1.style.height = (h1Height - intDiff) + "px"; |
---|
| 1753 | this.e2.style.height = (h2Height + intDiff) + "px"; |
---|
| 1754 | } |
---|
| 1755 | } |
---|
| 1756 | |
---|
| 1757 | }; |
---|
| 1758 | |
---|
| 1759 | |
---|
| 1760 | //-------------------- ricoLiveGrid.js |
---|
| 1761 | |
---|
| 1762 | // Rico.LiveGridMetaData ----------------------------------------------------- |
---|
| 1763 | |
---|
| 1764 | Rico.LiveGridMetaData = Class.create(); |
---|
| 1765 | |
---|
| 1766 | Rico.LiveGridMetaData.prototype = { |
---|
| 1767 | |
---|
| 1768 | initialize: function( pageSize, totalRows, columnCount, options ) { |
---|
| 1769 | this.pageSize = pageSize; |
---|
| 1770 | this.totalRows = totalRows; |
---|
| 1771 | this.setOptions(options); |
---|
| 1772 | this.scrollArrowHeight = 16; |
---|
| 1773 | this.columnCount = columnCount; |
---|
| 1774 | }, |
---|
| 1775 | |
---|
| 1776 | setOptions: function(options) { |
---|
| 1777 | this.options = { |
---|
| 1778 | largeBufferSize : 7.0, // 7 pages |
---|
| 1779 | nearLimitFactor : 0.2 // 20% of buffer |
---|
| 1780 | }.extend(options || {}); |
---|
| 1781 | }, |
---|
| 1782 | |
---|
| 1783 | getPageSize: function() { |
---|
| 1784 | return this.pageSize; |
---|
| 1785 | }, |
---|
| 1786 | |
---|
| 1787 | getTotalRows: function() { |
---|
| 1788 | return this.totalRows; |
---|
| 1789 | }, |
---|
| 1790 | |
---|
| 1791 | setTotalRows: function(n) { |
---|
| 1792 | this.totalRows = n; |
---|
| 1793 | }, |
---|
| 1794 | |
---|
| 1795 | getLargeBufferSize: function() { |
---|
| 1796 | return parseInt(this.options.largeBufferSize * this.pageSize); |
---|
| 1797 | }, |
---|
| 1798 | |
---|
| 1799 | getLimitTolerance: function() { |
---|
| 1800 | return parseInt(this.getLargeBufferSize() * this.options.nearLimitFactor); |
---|
| 1801 | } |
---|
| 1802 | }; |
---|
| 1803 | |
---|
| 1804 | // Rico.LiveGridScroller ----------------------------------------------------- |
---|
| 1805 | |
---|
| 1806 | Rico.LiveGridScroller = Class.create(); |
---|
| 1807 | |
---|
| 1808 | Rico.LiveGridScroller.prototype = { |
---|
| 1809 | |
---|
| 1810 | initialize: function(liveGrid, viewPort) { |
---|
| 1811 | this.isIE = navigator.userAgent.toLowerCase().indexOf("msie") >= 0; |
---|
| 1812 | this.liveGrid = liveGrid; |
---|
| 1813 | this.metaData = liveGrid.metaData; |
---|
| 1814 | this.createScrollBar(); |
---|
| 1815 | this.scrollTimeout = null; |
---|
| 1816 | this.lastScrollPos = 0; |
---|
| 1817 | this.viewPort = viewPort; |
---|
| 1818 | this.rows = new Array(); |
---|
| 1819 | }, |
---|
| 1820 | |
---|
| 1821 | isUnPlugged: function() { |
---|
| 1822 | return this.scrollerDiv.onscroll == null; |
---|
| 1823 | }, |
---|
| 1824 | |
---|
| 1825 | plugin: function() { |
---|
| 1826 | this.scrollerDiv.onscroll = this.handleScroll.bindAsEventListener(this); |
---|
| 1827 | }, |
---|
| 1828 | |
---|
| 1829 | unplug: function() { |
---|
| 1830 | this.scrollerDiv.onscroll = null; |
---|
| 1831 | }, |
---|
| 1832 | |
---|
| 1833 | sizeIEHeaderHack: function() { |
---|
| 1834 | if ( !this.isIE ) return; |
---|
| 1835 | var headerTable = $(this.liveGrid.tableId + "_header"); |
---|
| 1836 | if ( headerTable ) |
---|
| 1837 | headerTable.rows[0].cells[0].style.width = |
---|
| 1838 | (headerTable.rows[0].cells[0].offsetWidth + 1) + "px"; |
---|
| 1839 | }, |
---|
| 1840 | |
---|
| 1841 | createScrollBar: function() { |
---|
| 1842 | var visibleHeight = this.liveGrid.viewPort.visibleHeight(); |
---|
| 1843 | // create the outer div... |
---|
| 1844 | this.scrollerDiv = document.createElement("div"); |
---|
| 1845 | var scrollerStyle = this.scrollerDiv.style; |
---|
| 1846 | scrollerStyle.borderRight = "1px solid #ababab"; // hard coded color!!! |
---|
| 1847 | scrollerStyle.position = "relative"; |
---|
| 1848 | scrollerStyle.left = this.isIE ? "-6px" : "-3px"; |
---|
| 1849 | scrollerStyle.width = "19px"; |
---|
| 1850 | scrollerStyle.height = visibleHeight + "px"; |
---|
| 1851 | scrollerStyle.overflow = "auto"; |
---|
| 1852 | |
---|
| 1853 | // create the inner div... |
---|
| 1854 | this.heightDiv = document.createElement("div"); |
---|
| 1855 | this.heightDiv.style.width = "1px"; |
---|
| 1856 | |
---|
| 1857 | this.heightDiv.style.height = parseInt(visibleHeight * |
---|
| 1858 | this.metaData.getTotalRows()/this.metaData.getPageSize()) + "px" ; |
---|
| 1859 | this.scrollerDiv.appendChild(this.heightDiv); |
---|
| 1860 | this.scrollerDiv.onscroll = this.handleScroll.bindAsEventListener(this); |
---|
| 1861 | |
---|
| 1862 | var table = this.liveGrid.table; |
---|
| 1863 | table.parentNode.parentNode.insertBefore( this.scrollerDiv, table.parentNode.nextSibling ); |
---|
| 1864 | }, |
---|
| 1865 | |
---|
| 1866 | updateSize: function() { |
---|
| 1867 | var table = this.liveGrid.table; |
---|
| 1868 | var visibleHeight = this.viewPort.visibleHeight(); |
---|
| 1869 | this.heightDiv.style.height = parseInt(visibleHeight * |
---|
| 1870 | this.metaData.getTotalRows()/this.metaData.getPageSize()) + "px"; |
---|
| 1871 | }, |
---|
| 1872 | |
---|
| 1873 | rowToPixel: function(rowOffset) { |
---|
| 1874 | return (rowOffset / this.metaData.getTotalRows()) * this.heightDiv.offsetHeight |
---|
| 1875 | }, |
---|
| 1876 | |
---|
| 1877 | moveScroll: function(rowOffset) { |
---|
| 1878 | this.scrollerDiv.scrollTop = this.rowToPixel(rowOffset); |
---|
| 1879 | if ( this.metaData.options.onscroll ) |
---|
| 1880 | this.metaData.options.onscroll( this.liveGrid, rowOffset ); |
---|
| 1881 | }, |
---|
| 1882 | |
---|
| 1883 | handleScroll: function() { |
---|
| 1884 | if ( this.scrollTimeout ) |
---|
| 1885 | clearTimeout( this.scrollTimeout ); |
---|
| 1886 | |
---|
| 1887 | var contentOffset = parseInt(this.scrollerDiv.scrollTop / this.viewPort.rowHeight); |
---|
| 1888 | this.liveGrid.requestContentRefresh(contentOffset); |
---|
| 1889 | this.viewPort.scrollTo(this.scrollerDiv.scrollTop); |
---|
| 1890 | |
---|
| 1891 | if ( this.metaData.options.onscroll ) |
---|
| 1892 | this.metaData.options.onscroll( this.liveGrid, contentOffset ); |
---|
| 1893 | |
---|
| 1894 | this.scrollTimeout = setTimeout( this.scrollIdle.bind(this), 1200 ); |
---|
| 1895 | }, |
---|
| 1896 | |
---|
| 1897 | scrollIdle: function() { |
---|
| 1898 | if ( this.metaData.options.onscrollidle ) |
---|
| 1899 | this.metaData.options.onscrollidle(); |
---|
| 1900 | } |
---|
| 1901 | }; |
---|
| 1902 | |
---|
| 1903 | // Rico.LiveGridBuffer ----------------------------------------------------- |
---|
| 1904 | |
---|
| 1905 | Rico.LiveGridBuffer = Class.create(); |
---|
| 1906 | |
---|
| 1907 | Rico.LiveGridBuffer.prototype = { |
---|
| 1908 | |
---|
| 1909 | initialize: function(metaData, viewPort) { |
---|
| 1910 | this.startPos = 0; |
---|
| 1911 | this.size = 0; |
---|
| 1912 | this.metaData = metaData; |
---|
| 1913 | this.rows = new Array(); |
---|
| 1914 | this.updateInProgress = false; |
---|
| 1915 | this.viewPort = viewPort; |
---|
| 1916 | this.maxBufferSize = metaData.getLargeBufferSize() * 2; |
---|
| 1917 | this.maxFetchSize = metaData.getLargeBufferSize(); |
---|
| 1918 | this.lastOffset = 0; |
---|
| 1919 | }, |
---|
| 1920 | |
---|
| 1921 | getBlankRow: function() { |
---|
| 1922 | if (!this.blankRow ) { |
---|
| 1923 | this.blankRow = new Array(); |
---|
| 1924 | for ( var i=0; i < this.metaData.columnCount ; i++ ) |
---|
| 1925 | this.blankRow[i] = " "; |
---|
| 1926 | } |
---|
| 1927 | return this.blankRow; |
---|
| 1928 | }, |
---|
| 1929 | |
---|
| 1930 | loadRows: function(ajaxResponse) { |
---|
| 1931 | var rowsElement = ajaxResponse.getElementsByTagName('rows')[0]; |
---|
| 1932 | this.updateUI = rowsElement.getAttribute("update_ui") == "true" |
---|
| 1933 | var newRows = new Array() |
---|
| 1934 | var trs = rowsElement.getElementsByTagName("tr"); |
---|
| 1935 | for ( var i=0 ; i < trs.length; i++ ) { |
---|
| 1936 | var row = newRows[i] = new Array(); |
---|
| 1937 | var cells = trs[i].getElementsByTagName("td"); |
---|
| 1938 | for ( var j=0; j < cells.length ; j++ ) { |
---|
| 1939 | var cell = cells[j]; |
---|
| 1940 | var convertSpaces = cell.getAttribute("convert_spaces") == "true"; |
---|
| 1941 | var cellContent = RicoUtil.getContentAsString(cell); |
---|
| 1942 | row[j] = convertSpaces ? this.convertSpaces(cellContent) : cellContent; |
---|
| 1943 | if (!row[j]) |
---|
| 1944 | row[j] = ' '; |
---|
| 1945 | } |
---|
| 1946 | } |
---|
| 1947 | return newRows; |
---|
| 1948 | }, |
---|
| 1949 | |
---|
| 1950 | update: function(ajaxResponse, start) { |
---|
| 1951 | var newRows = this.loadRows(ajaxResponse); |
---|
| 1952 | if (this.rows.length == 0) { // initial load |
---|
| 1953 | this.rows = newRows; |
---|
| 1954 | this.size = this.rows.length; |
---|
| 1955 | this.startPos = start; |
---|
| 1956 | return; |
---|
| 1957 | } |
---|
| 1958 | if (start > this.startPos) { //appending |
---|
| 1959 | if (this.startPos + this.rows.length < start) { |
---|
| 1960 | this.rows = newRows; |
---|
| 1961 | this.startPos = start;// |
---|
| 1962 | } else { |
---|
| 1963 | this.rows = this.rows.concat( newRows.slice(0, newRows.length)); |
---|
| 1964 | if (this.rows.length > this.maxBufferSize) { |
---|
| 1965 | var fullSize = this.rows.length; |
---|
| 1966 | this.rows = this.rows.slice(this.rows.length - this.maxBufferSize, this.rows.length) |
---|
| 1967 | this.startPos = this.startPos + (fullSize - this.rows.length); |
---|
| 1968 | } |
---|
| 1969 | } |
---|
| 1970 | } else { //prepending |
---|
| 1971 | if (start + newRows.length < this.startPos) { |
---|
| 1972 | this.rows = newRows; |
---|
| 1973 | } else { |
---|
| 1974 | this.rows = newRows.slice(0, this.startPos).concat(this.rows); |
---|
| 1975 | if (this.rows.length > this.maxBufferSize) |
---|
| 1976 | this.rows = this.rows.slice(0, this.maxBufferSize) |
---|
| 1977 | } |
---|
| 1978 | this.startPos = start; |
---|
| 1979 | } |
---|
| 1980 | this.size = this.rows.length; |
---|
| 1981 | }, |
---|
| 1982 | |
---|
| 1983 | clear: function() { |
---|
| 1984 | this.rows = new Array(); |
---|
| 1985 | this.startPos = 0; |
---|
| 1986 | this.size = 0; |
---|
| 1987 | }, |
---|
| 1988 | |
---|
| 1989 | isOverlapping: function(start, size) { |
---|
| 1990 | return ((start < this.endPos()) && (this.startPos < start + size)) || (this.endPos() == 0) |
---|
| 1991 | }, |
---|
| 1992 | |
---|
| 1993 | isInRange: function(position) { |
---|
| 1994 | return (position >= this.startPos) && (position + this.metaData.getPageSize() <= this.endPos()); |
---|
| 1995 | //&& this.size() != 0; |
---|
| 1996 | }, |
---|
| 1997 | |
---|
| 1998 | isNearingTopLimit: function(position) { |
---|
| 1999 | return position - this.startPos < this.metaData.getLimitTolerance(); |
---|
| 2000 | }, |
---|
| 2001 | |
---|
| 2002 | endPos: function() { |
---|
| 2003 | return this.startPos + this.rows.length; |
---|
| 2004 | }, |
---|
| 2005 | |
---|
| 2006 | isNearingBottomLimit: function(position) { |
---|
| 2007 | return this.endPos() - (position + this.metaData.getPageSize()) < this.metaData.getLimitTolerance(); |
---|
| 2008 | }, |
---|
| 2009 | |
---|
| 2010 | isAtTop: function() { |
---|
| 2011 | return this.startPos == 0; |
---|
| 2012 | }, |
---|
| 2013 | |
---|
| 2014 | isAtBottom: function() { |
---|
| 2015 | return this.endPos() == this.metaData.getTotalRows(); |
---|
| 2016 | }, |
---|
| 2017 | |
---|
| 2018 | isNearingLimit: function(position) { |
---|
| 2019 | return ( !this.isAtTop() && this.isNearingTopLimit(position)) || |
---|
| 2020 | ( !this.isAtBottom() && this.isNearingBottomLimit(position) ) |
---|
| 2021 | }, |
---|
| 2022 | |
---|
| 2023 | getFetchSize: function(offset) { |
---|
| 2024 | var adjustedOffset = this.getFetchOffset(offset); |
---|
| 2025 | var adjustedSize = 0; |
---|
| 2026 | if (adjustedOffset >= this.startPos) { //apending |
---|
| 2027 | var endFetchOffset = this.maxFetchSize + adjustedOffset; |
---|
| 2028 | if (endFetchOffset > this.metaData.totalRows) |
---|
| 2029 | endFetchOffset = this.metaData.totalRows; |
---|
| 2030 | adjustedSize = endFetchOffset - adjustedOffset; |
---|
| 2031 | } else {//prepending |
---|
| 2032 | var adjustedSize = this.startPos - adjustedOffset; |
---|
| 2033 | if (adjustedSize > this.maxFetchSize) |
---|
| 2034 | adjustedSize = this.maxFetchSize; |
---|
| 2035 | } |
---|
| 2036 | return adjustedSize; |
---|
| 2037 | }, |
---|
| 2038 | |
---|
| 2039 | getFetchOffset: function(offset) { |
---|
| 2040 | var adjustedOffset = offset; |
---|
| 2041 | if (offset > this.startPos) //apending |
---|
| 2042 | adjustedOffset = (offset > this.endPos()) ? offset : this.endPos(); |
---|
| 2043 | else { //prepending |
---|
| 2044 | if (offset + this.maxFetchSize >= this.startPos) { |
---|
| 2045 | var adjustedOffset = this.startPos - this.maxFetchSize; |
---|
| 2046 | if (adjustedOffset < 0) |
---|
| 2047 | adjustedOffset = 0; |
---|
| 2048 | } |
---|
| 2049 | } |
---|
| 2050 | this.lastOffset = adjustedOffset; |
---|
| 2051 | return adjustedOffset; |
---|
| 2052 | }, |
---|
| 2053 | |
---|
| 2054 | getRows: function(start, count) { |
---|
| 2055 | var begPos = start - this.startPos |
---|
| 2056 | var endPos = begPos + count |
---|
| 2057 | |
---|
| 2058 | // er? need more data... |
---|
| 2059 | if ( endPos > this.size ) |
---|
| 2060 | endPos = this.size |
---|
| 2061 | |
---|
| 2062 | var results = new Array() |
---|
| 2063 | var index = 0; |
---|
| 2064 | for ( var i=begPos ; i < endPos; i++ ) { |
---|
| 2065 | results[index++] = this.rows[i] |
---|
| 2066 | } |
---|
| 2067 | return results |
---|
| 2068 | }, |
---|
| 2069 | |
---|
| 2070 | convertSpaces: function(s) { |
---|
| 2071 | return s.split(" ").join(" "); |
---|
| 2072 | } |
---|
| 2073 | |
---|
| 2074 | }; |
---|
| 2075 | |
---|
| 2076 | |
---|
| 2077 | //Rico.GridViewPort -------------------------------------------------- |
---|
| 2078 | Rico.GridViewPort = Class.create(); |
---|
| 2079 | |
---|
| 2080 | Rico.GridViewPort.prototype = { |
---|
| 2081 | |
---|
| 2082 | initialize: function(table, rowHeight, visibleRows, buffer, liveGrid) { |
---|
| 2083 | this.lastDisplayedStartPos = 0; |
---|
| 2084 | this.div = table.parentNode; |
---|
| 2085 | this.table = table |
---|
| 2086 | this.rowHeight = rowHeight; |
---|
| 2087 | this.div.style.height = this.rowHeight * visibleRows; |
---|
| 2088 | this.div.style.overflow = "hidden"; |
---|
| 2089 | this.buffer = buffer; |
---|
| 2090 | this.liveGrid = liveGrid; |
---|
| 2091 | this.visibleRows = visibleRows + 1; |
---|
| 2092 | this.lastPixelOffset = 0; |
---|
| 2093 | this.startPos = 0; |
---|
| 2094 | }, |
---|
| 2095 | |
---|
| 2096 | populateRow: function(htmlRow, row) { |
---|
| 2097 | for (var j=0; j < row.length; j++) { |
---|
| 2098 | htmlRow.cells[j].innerHTML = row[j] |
---|
| 2099 | } |
---|
| 2100 | }, |
---|
| 2101 | |
---|
| 2102 | bufferChanged: function() { |
---|
| 2103 | this.refreshContents( parseInt(this.lastPixelOffset / this.rowHeight)); |
---|
| 2104 | }, |
---|
| 2105 | |
---|
| 2106 | clearRows: function() { |
---|
| 2107 | if (!this.isBlank) { |
---|
| 2108 | for (var i=0; i < this.visibleRows; i++) |
---|
| 2109 | this.populateRow(this.table.rows[i], this.buffer.getBlankRow()); |
---|
| 2110 | this.isBlank = true; |
---|
| 2111 | } |
---|
| 2112 | }, |
---|
| 2113 | |
---|
| 2114 | clearContents: function() { |
---|
| 2115 | this.clearRows(); |
---|
| 2116 | this.scrollTo(0); |
---|
| 2117 | this.startPos = 0; |
---|
| 2118 | this.lastStartPos = -1; |
---|
| 2119 | }, |
---|
| 2120 | |
---|
| 2121 | refreshContents: function(startPos) { |
---|
| 2122 | if (startPos == this.lastRowPos && !this.isPartialBlank && !this.isBlank) { |
---|
| 2123 | return; |
---|
| 2124 | } |
---|
| 2125 | if ((startPos + this.visibleRows < this.buffer.startPos) |
---|
| 2126 | || (this.buffer.startPos + this.buffer.size < startPos) |
---|
| 2127 | || (this.buffer.size == 0)) { |
---|
| 2128 | this.clearRows(); |
---|
| 2129 | return; |
---|
| 2130 | } |
---|
| 2131 | this.isBlank = false; |
---|
| 2132 | var viewPrecedesBuffer = this.buffer.startPos > startPos |
---|
| 2133 | var contentStartPos = viewPrecedesBuffer ? this.buffer.startPos: startPos; |
---|
| 2134 | |
---|
| 2135 | var contentEndPos = (this.buffer.startPos + this.buffer.size < startPos + this.visibleRows) |
---|
| 2136 | ? this.buffer.startPos + this.buffer.size |
---|
| 2137 | : startPos + this.visibleRows; |
---|
| 2138 | var rowSize = contentEndPos - contentStartPos; |
---|
| 2139 | var rows = this.buffer.getRows(contentStartPos, rowSize ); |
---|
| 2140 | var blankSize = this.visibleRows - rowSize; |
---|
| 2141 | var blankOffset = viewPrecedesBuffer ? 0: rowSize; |
---|
| 2142 | var contentOffset = viewPrecedesBuffer ? blankSize: 0; |
---|
| 2143 | |
---|
| 2144 | for (var i=0; i < rows.length; i++) {//initialize what we have |
---|
| 2145 | this.populateRow(this.table.rows[i + contentOffset], rows[i]); |
---|
| 2146 | } |
---|
| 2147 | for (var i=0; i < blankSize; i++) {// blank out the rest |
---|
| 2148 | this.populateRow(this.table.rows[i + blankOffset], this.buffer.getBlankRow()); |
---|
| 2149 | } |
---|
| 2150 | this.isPartialBlank = blankSize > 0; |
---|
| 2151 | this.lastRowPos = startPos; |
---|
| 2152 | }, |
---|
| 2153 | |
---|
| 2154 | scrollTo: function(pixelOffset) { |
---|
| 2155 | if (this.lastPixelOffset == pixelOffset) |
---|
| 2156 | return; |
---|
| 2157 | |
---|
| 2158 | this.refreshContents(parseInt(pixelOffset / this.rowHeight)) |
---|
| 2159 | this.div.scrollTop = pixelOffset % this.rowHeight |
---|
| 2160 | |
---|
| 2161 | this.lastPixelOffset = pixelOffset; |
---|
| 2162 | }, |
---|
| 2163 | |
---|
| 2164 | visibleHeight: function() { |
---|
| 2165 | return parseInt(this.div.style.height); |
---|
| 2166 | } |
---|
| 2167 | |
---|
| 2168 | }; |
---|
| 2169 | |
---|
| 2170 | |
---|
| 2171 | Rico.LiveGridRequest = Class.create(); |
---|
| 2172 | Rico.LiveGridRequest.prototype = { |
---|
| 2173 | initialize: function( requestOffset, options ) { |
---|
| 2174 | this.requestOffset = requestOffset; |
---|
| 2175 | } |
---|
| 2176 | }; |
---|
| 2177 | |
---|
| 2178 | // Rico.LiveGrid ----------------------------------------------------- |
---|
| 2179 | |
---|
| 2180 | Rico.LiveGrid = Class.create(); |
---|
| 2181 | |
---|
| 2182 | Rico.LiveGrid.prototype = { |
---|
| 2183 | |
---|
| 2184 | initialize: function( tableId, visibleRows, totalRows, url, options ) { |
---|
| 2185 | if ( options == null ) |
---|
| 2186 | options = {}; |
---|
| 2187 | |
---|
| 2188 | this.tableId = tableId; |
---|
| 2189 | this.table = $(tableId); |
---|
| 2190 | var columnCount = this.table.rows[0].cells.length |
---|
| 2191 | this.metaData = new Rico.LiveGridMetaData(visibleRows, totalRows, columnCount, options); |
---|
| 2192 | this.buffer = new Rico.LiveGridBuffer(this.metaData); |
---|
| 2193 | |
---|
| 2194 | var rowCount = this.table.rows.length; |
---|
| 2195 | this.viewPort = new Rico.GridViewPort(this.table, |
---|
| 2196 | this.table.offsetHeight/rowCount, |
---|
| 2197 | visibleRows, |
---|
| 2198 | this.buffer, this); |
---|
| 2199 | this.scroller = new Rico.LiveGridScroller(this,this.viewPort); |
---|
| 2200 | |
---|
| 2201 | this.additionalParms = options.requestParameters || []; |
---|
| 2202 | |
---|
| 2203 | options.sortHandler = this.sortHandler.bind(this); |
---|
| 2204 | |
---|
| 2205 | if ( $(tableId + '_header') ) |
---|
| 2206 | this.sort = new Rico.LiveGridSort(tableId + '_header', options) |
---|
| 2207 | |
---|
| 2208 | this.processingRequest = null; |
---|
| 2209 | this.unprocessedRequest = null; |
---|
| 2210 | |
---|
| 2211 | this.initAjax(url); |
---|
| 2212 | if ( options.prefetchBuffer || options.prefetchOffset > 0) { |
---|
| 2213 | var offset = 0; |
---|
| 2214 | if (options.offset ) { |
---|
| 2215 | offset = options.offset; |
---|
| 2216 | this.scroller.moveScroll(offset); |
---|
| 2217 | this.viewPort.scrollTo(this.scroller.rowToPixel(offset)); |
---|
| 2218 | } |
---|
| 2219 | if (options.sortCol) { |
---|
| 2220 | this.sortCol = options.sortCol; |
---|
| 2221 | this.sortDir = options.sortDir; |
---|
| 2222 | } |
---|
| 2223 | this.requestContentRefresh(offset); |
---|
| 2224 | } |
---|
| 2225 | }, |
---|
| 2226 | |
---|
| 2227 | resetContents: function() { |
---|
| 2228 | this.scroller.moveScroll(0); |
---|
| 2229 | this.buffer.clear(); |
---|
| 2230 | this.viewPort.clearContents(); |
---|
| 2231 | }, |
---|
| 2232 | |
---|
| 2233 | sortHandler: function(column) { |
---|
| 2234 | this.sortCol = column.name; |
---|
| 2235 | this.sortDir = column.currentSort; |
---|
| 2236 | |
---|
| 2237 | this.resetContents(); |
---|
| 2238 | this.requestContentRefresh(0) |
---|
| 2239 | }, |
---|
| 2240 | |
---|
| 2241 | setRequestParams: function() { |
---|
| 2242 | this.additionalParms = []; |
---|
| 2243 | for ( var i=0 ; i < arguments.length ; i++ ) |
---|
| 2244 | this.additionalParms[i] = arguments[i]; |
---|
| 2245 | }, |
---|
| 2246 | |
---|
| 2247 | setTotalRows: function( newTotalRows ) { |
---|
| 2248 | this.resetContents(); |
---|
| 2249 | this.metaData.setTotalRows(newTotalRows); |
---|
| 2250 | this.scroller.updateSize(); |
---|
| 2251 | }, |
---|
| 2252 | |
---|
| 2253 | initAjax: function(url) { |
---|
| 2254 | ajaxEngine.registerRequest( this.tableId + '_request', url ); |
---|
| 2255 | ajaxEngine.registerAjaxObject( this.tableId + '_updater', this ); |
---|
| 2256 | }, |
---|
| 2257 | |
---|
| 2258 | invokeAjax: function() { |
---|
| 2259 | }, |
---|
| 2260 | |
---|
| 2261 | handleTimedOut: function() { |
---|
| 2262 | //server did not respond in 4 seconds... assume that there could have been |
---|
| 2263 | //an error or something, and allow requests to be processed again... |
---|
| 2264 | this.processingRequest = null; |
---|
| 2265 | this.processQueuedRequest(); |
---|
| 2266 | }, |
---|
| 2267 | |
---|
| 2268 | fetchBuffer: function(offset) { |
---|
| 2269 | if ( this.buffer.isInRange(offset) && |
---|
| 2270 | !this.buffer.isNearingLimit(offset)) { |
---|
| 2271 | return; |
---|
| 2272 | } |
---|
| 2273 | if (this.processingRequest) { |
---|
| 2274 | this.unprocessedRequest = new Rico.LiveGridRequest(offset); |
---|
| 2275 | return; |
---|
| 2276 | } |
---|
| 2277 | var bufferStartPos = this.buffer.getFetchOffset(offset); |
---|
| 2278 | this.processingRequest = new Rico.LiveGridRequest(offset); |
---|
| 2279 | this.processingRequest.bufferOffset = bufferStartPos; |
---|
| 2280 | var fetchSize = this.buffer.getFetchSize(offset); |
---|
| 2281 | var partialLoaded = false; |
---|
| 2282 | var callParms = []; |
---|
| 2283 | callParms.push(this.tableId + '_request'); |
---|
| 2284 | callParms.push('id=' + this.tableId); |
---|
| 2285 | callParms.push('page_size=' + fetchSize); |
---|
| 2286 | callParms.push('offset=' + bufferStartPos); |
---|
| 2287 | if ( this.sortCol) { |
---|
| 2288 | callParms.push('sort_col=' + this.sortCol); |
---|
| 2289 | callParms.push('sort_dir=' + this.sortDir); |
---|
| 2290 | } |
---|
| 2291 | |
---|
| 2292 | for( var i=0 ; i < this.additionalParms.length ; i++ ) |
---|
| 2293 | callParms.push(this.additionalParms[i]); |
---|
| 2294 | ajaxEngine.sendRequest.apply( ajaxEngine, callParms ); |
---|
| 2295 | |
---|
| 2296 | this.timeoutHandler = setTimeout( this.handleTimedOut.bind(this), 20000 ); //todo: make as option |
---|
| 2297 | }, |
---|
| 2298 | |
---|
| 2299 | requestContentRefresh: function(contentOffset) { |
---|
| 2300 | this.fetchBuffer(contentOffset); |
---|
| 2301 | }, |
---|
| 2302 | |
---|
| 2303 | ajaxUpdate: function(ajaxResponse) { |
---|
| 2304 | try { |
---|
| 2305 | clearTimeout( this.timeoutHandler ); |
---|
| 2306 | this.buffer.update(ajaxResponse,this.processingRequest.bufferOffset); |
---|
| 2307 | this.viewPort.bufferChanged(); |
---|
| 2308 | } |
---|
| 2309 | catch(err) {} |
---|
| 2310 | finally {this.processingRequest = null; } |
---|
| 2311 | this.processQueuedRequest(); |
---|
| 2312 | }, |
---|
| 2313 | |
---|
| 2314 | processQueuedRequest: function() { |
---|
| 2315 | if (this.unprocessedRequest != null) { |
---|
| 2316 | this.requestContentRefresh(this.unprocessedRequest.requestOffset); |
---|
| 2317 | this.unprocessedRequest = null |
---|
| 2318 | } |
---|
| 2319 | } |
---|
| 2320 | |
---|
| 2321 | }; |
---|
| 2322 | |
---|
| 2323 | |
---|
| 2324 | //-------------------- ricoLiveGridSort.js |
---|
| 2325 | Rico.LiveGridSort = Class.create(); |
---|
| 2326 | |
---|
| 2327 | Rico.LiveGridSort.prototype = { |
---|
| 2328 | |
---|
| 2329 | initialize: function(headerTableId, options) { |
---|
| 2330 | this.headerTableId = headerTableId; |
---|
| 2331 | this.headerTable = $(headerTableId); |
---|
| 2332 | this.setOptions(options); |
---|
| 2333 | this.applySortBehavior(); |
---|
| 2334 | |
---|
| 2335 | if ( this.options.sortCol ) { |
---|
| 2336 | this.setSortUI( this.options.sortCol, this.options.sortDir ); |
---|
| 2337 | } |
---|
| 2338 | }, |
---|
| 2339 | |
---|
| 2340 | setSortUI: function( columnName, sortDirection ) { |
---|
| 2341 | var cols = this.options.columns; |
---|
| 2342 | for ( var i = 0 ; i < cols.length ; i++ ) { |
---|
| 2343 | if ( cols[i].name == columnName ) { |
---|
| 2344 | this.setColumnSort(i, sortDirection); |
---|
| 2345 | break; |
---|
| 2346 | } |
---|
| 2347 | } |
---|
| 2348 | }, |
---|
| 2349 | |
---|
| 2350 | setOptions: function(options) { |
---|
| 2351 | this.options = { |
---|
| 2352 | sortAscendImg: 'images/sort_asc.gif', |
---|
| 2353 | sortDescendImg: 'images/sort_desc.gif', |
---|
| 2354 | imageWidth: 9, |
---|
| 2355 | imageHeight: 5, |
---|
| 2356 | ajaxSortURLParms: [] |
---|
| 2357 | }.extend(options); |
---|
| 2358 | |
---|
| 2359 | // preload the images... |
---|
| 2360 | new Image().src = this.options.sortAscendImg; |
---|
| 2361 | new Image().src = this.options.sortDescendImg; |
---|
| 2362 | |
---|
| 2363 | this.sort = options.sortHandler; |
---|
| 2364 | if ( !this.options.columns ) |
---|
| 2365 | this.options.columns = this.introspectForColumnInfo(); |
---|
| 2366 | else { |
---|
| 2367 | // allow client to pass { columns: [ ["a", true], ["b", false] ] } |
---|
| 2368 | // and convert to an array of Rico.TableColumn objs... |
---|
| 2369 | this.options.columns = this.convertToTableColumns(this.options.columns); |
---|
| 2370 | } |
---|
| 2371 | }, |
---|
| 2372 | |
---|
| 2373 | applySortBehavior: function() { |
---|
| 2374 | var headerRow = this.headerTable.rows[0]; |
---|
| 2375 | var headerCells = headerRow.cells; |
---|
| 2376 | for ( var i = 0 ; i < headerCells.length ; i++ ) { |
---|
| 2377 | this.addSortBehaviorToColumn( i, headerCells[i] ); |
---|
| 2378 | } |
---|
| 2379 | }, |
---|
| 2380 | |
---|
| 2381 | addSortBehaviorToColumn: function( n, cell ) { |
---|
| 2382 | if ( this.options.columns[n].isSortable() ) { |
---|
| 2383 | cell.id = this.headerTableId + '_' + n; |
---|
| 2384 | cell.style.cursor = 'pointer'; |
---|
| 2385 | cell.onclick = this.headerCellClicked.bindAsEventListener(this); |
---|
| 2386 | cell.innerHTML = cell.innerHTML + '<span id="' + this.headerTableId + '_img_' + n + '">' |
---|
| 2387 | + ' </span>'; |
---|
| 2388 | } |
---|
| 2389 | }, |
---|
| 2390 | |
---|
| 2391 | // event handler.... |
---|
| 2392 | headerCellClicked: function(evt) { |
---|
| 2393 | var eventTarget = evt.target ? evt.target : evt.srcElement; |
---|
| 2394 | var cellId = eventTarget.id; |
---|
| 2395 | var columnNumber = parseInt(cellId.substring( cellId.lastIndexOf('_') + 1 )); |
---|
| 2396 | var sortedColumnIndex = this.getSortedColumnIndex(); |
---|
| 2397 | if ( sortedColumnIndex != -1 ) { |
---|
| 2398 | if ( sortedColumnIndex != columnNumber ) { |
---|
| 2399 | this.removeColumnSort(sortedColumnIndex); |
---|
| 2400 | this.setColumnSort(columnNumber, Rico.TableColumn.SORT_ASC); |
---|
| 2401 | } |
---|
| 2402 | else |
---|
| 2403 | this.toggleColumnSort(sortedColumnIndex); |
---|
| 2404 | } |
---|
| 2405 | else |
---|
| 2406 | this.setColumnSort(columnNumber, Rico.TableColumn.SORT_ASC); |
---|
| 2407 | |
---|
| 2408 | if (this.options.sortHandler) { |
---|
| 2409 | this.options.sortHandler(this.options.columns[columnNumber]); |
---|
| 2410 | } |
---|
| 2411 | }, |
---|
| 2412 | |
---|
| 2413 | removeColumnSort: function(n) { |
---|
| 2414 | this.options.columns[n].setUnsorted(); |
---|
| 2415 | this.setSortImage(n); |
---|
| 2416 | }, |
---|
| 2417 | |
---|
| 2418 | setColumnSort: function(n, direction) { |
---|
| 2419 | this.options.columns[n].setSorted(direction); |
---|
| 2420 | this.setSortImage(n); |
---|
| 2421 | }, |
---|
| 2422 | |
---|
| 2423 | toggleColumnSort: function(n) { |
---|
| 2424 | this.options.columns[n].toggleSort(); |
---|
| 2425 | this.setSortImage(n); |
---|
| 2426 | }, |
---|
| 2427 | |
---|
| 2428 | setSortImage: function(n) { |
---|
| 2429 | var sortDirection = this.options.columns[n].getSortDirection(); |
---|
| 2430 | |
---|
| 2431 | var sortImageSpan = $( this.headerTableId + '_img_' + n ); |
---|
| 2432 | if ( sortDirection == Rico.TableColumn.UNSORTED ) |
---|
| 2433 | sortImageSpan.innerHTML = ' '; |
---|
| 2434 | else if ( sortDirection == Rico.TableColumn.SORT_ASC ) |
---|
| 2435 | sortImageSpan.innerHTML = ' <img width="' + this.options.imageWidth + '" ' + |
---|
| 2436 | 'height="'+ this.options.imageHeight + '" ' + |
---|
| 2437 | 'src="' + this.options.sortAscendImg + '"/>'; |
---|
| 2438 | else if ( sortDirection == Rico.TableColumn.SORT_DESC ) |
---|
| 2439 | sortImageSpan.innerHTML = ' <img width="' + this.options.imageWidth + '" ' + |
---|
| 2440 | 'height="'+ this.options.imageHeight + '" ' + |
---|
| 2441 | 'src="' + this.options.sortDescendImg + '"/>'; |
---|
| 2442 | }, |
---|
| 2443 | |
---|
| 2444 | getSortedColumnIndex: function() { |
---|
| 2445 | var cols = this.options.columns; |
---|
| 2446 | for ( var i = 0 ; i < cols.length ; i++ ) { |
---|
| 2447 | if ( cols[i].isSorted() ) |
---|
| 2448 | return i; |
---|
| 2449 | } |
---|
| 2450 | |
---|
| 2451 | return -1; |
---|
| 2452 | }, |
---|
| 2453 | |
---|
| 2454 | introspectForColumnInfo: function() { |
---|
| 2455 | var columns = new Array(); |
---|
| 2456 | var headerRow = this.headerTable.rows[0]; |
---|
| 2457 | var headerCells = headerRow.cells; |
---|
| 2458 | for ( var i = 0 ; i < headerCells.length ; i++ ) |
---|
| 2459 | columns.push( new Rico.TableColumn( this.deriveColumnNameFromCell(headerCells[i],i), true ) ); |
---|
| 2460 | return columns; |
---|
| 2461 | }, |
---|
| 2462 | |
---|
| 2463 | convertToTableColumns: function(cols) { |
---|
| 2464 | var columns = new Array(); |
---|
| 2465 | for ( var i = 0 ; i < cols.length ; i++ ) |
---|
| 2466 | columns.push( new Rico.TableColumn( cols[i][0], cols[i][1] ) ); |
---|
| 2467 | }, |
---|
| 2468 | |
---|
| 2469 | deriveColumnNameFromCell: function(cell,columnNumber) { |
---|
| 2470 | var cellContent = cell.innerText != undefined ? cell.innerText : cell.textContent; |
---|
| 2471 | return cellContent ? cellContent.toLowerCase().split(' ').join('_') : "col_" + columnNumber; |
---|
| 2472 | } |
---|
| 2473 | }; |
---|
| 2474 | |
---|
| 2475 | Rico.TableColumn = Class.create(); |
---|
| 2476 | |
---|
| 2477 | Rico.TableColumn.UNSORTED = 0; |
---|
| 2478 | Rico.TableColumn.SORT_ASC = "ASC"; |
---|
| 2479 | Rico.TableColumn.SORT_DESC = "DESC"; |
---|
| 2480 | |
---|
| 2481 | Rico.TableColumn.prototype = { |
---|
| 2482 | initialize: function(name, sortable) { |
---|
| 2483 | this.name = name; |
---|
| 2484 | this.sortable = sortable; |
---|
| 2485 | this.currentSort = Rico.TableColumn.UNSORTED; |
---|
| 2486 | }, |
---|
| 2487 | |
---|
| 2488 | isSortable: function() { |
---|
| 2489 | return this.sortable; |
---|
| 2490 | }, |
---|
| 2491 | |
---|
| 2492 | isSorted: function() { |
---|
| 2493 | return this.currentSort != Rico.TableColumn.UNSORTED; |
---|
| 2494 | }, |
---|
| 2495 | |
---|
| 2496 | getSortDirection: function() { |
---|
| 2497 | return this.currentSort; |
---|
| 2498 | }, |
---|
| 2499 | |
---|
| 2500 | toggleSort: function() { |
---|
| 2501 | if ( this.currentSort == Rico.TableColumn.UNSORTED || this.currentSort == Rico.TableColumn.SORT_DESC ) |
---|
| 2502 | this.currentSort = Rico.TableColumn.SORT_ASC; |
---|
| 2503 | else if ( this.currentSort == Rico.TableColumn.SORT_ASC ) |
---|
| 2504 | this.currentSort = Rico.TableColumn.SORT_DESC; |
---|
| 2505 | }, |
---|
| 2506 | |
---|
| 2507 | setUnsorted: function(direction) { |
---|
| 2508 | this.setSorted(Rico.TableColumn.UNSORTED); |
---|
| 2509 | }, |
---|
| 2510 | |
---|
| 2511 | setSorted: function(direction) { |
---|
| 2512 | // direction must by one of Rico.TableColumn.UNSORTED, .SORT_ASC, or .SET_DESC... |
---|
| 2513 | this.currentSort = direction; |
---|
| 2514 | } |
---|
| 2515 | |
---|
| 2516 | }; |
---|
| 2517 | |
---|
| 2518 | |
---|
| 2519 | //-------------------- ricoUtil.js |
---|
| 2520 | |
---|
| 2521 | var RicoUtil = { |
---|
| 2522 | |
---|
| 2523 | getElementsComputedStyle: function ( htmlElement, cssProperty, mozillaEquivalentCSS) { |
---|
| 2524 | if ( arguments.length == 2 ) |
---|
| 2525 | mozillaEquivalentCSS = cssProperty; |
---|
| 2526 | |
---|
| 2527 | var el = $(htmlElement); |
---|
| 2528 | if ( el.currentStyle ) |
---|
| 2529 | return el.currentStyle[cssProperty]; |
---|
| 2530 | else |
---|
| 2531 | return document.defaultView.getComputedStyle(el, null).getPropertyValue(mozillaEquivalentCSS); |
---|
| 2532 | }, |
---|
| 2533 | |
---|
| 2534 | createXmlDocument : function() { |
---|
| 2535 | if (document.implementation && document.implementation.createDocument) { |
---|
| 2536 | var doc = document.implementation.createDocument("", "", null); |
---|
| 2537 | |
---|
| 2538 | if (doc.readyState == null) { |
---|
| 2539 | doc.readyState = 1; |
---|
| 2540 | doc.addEventListener("load", function () { |
---|
| 2541 | doc.readyState = 4; |
---|
| 2542 | if (typeof doc.onreadystatechange == "function") |
---|
| 2543 | doc.onreadystatechange(); |
---|
| 2544 | }, false); |
---|
| 2545 | } |
---|
| 2546 | |
---|
| 2547 | return doc; |
---|
| 2548 | } |
---|
| 2549 | |
---|
| 2550 | if (window.ActiveXObject) |
---|
| 2551 | return Try.these( |
---|
| 2552 | function() { return new ActiveXObject('MSXML2.DomDocument') }, |
---|
| 2553 | function() { return new ActiveXObject('Microsoft.DomDocument')}, |
---|
| 2554 | function() { return new ActiveXObject('MSXML.DomDocument') }, |
---|
| 2555 | function() { return new ActiveXObject('MSXML3.DomDocument') } |
---|
| 2556 | ) || false; |
---|
| 2557 | |
---|
| 2558 | return null; |
---|
| 2559 | }, |
---|
| 2560 | |
---|
| 2561 | getContentAsString: function( parentNode ) { |
---|
| 2562 | return parentNode.xml != undefined ? |
---|
| 2563 | this._getContentAsStringIE(parentNode) : |
---|
| 2564 | this._getContentAsStringMozilla(parentNode); |
---|
| 2565 | }, |
---|
| 2566 | |
---|
| 2567 | _getContentAsStringIE: function(parentNode) { |
---|
| 2568 | var contentStr = ""; |
---|
| 2569 | for ( var i = 0 ; i < parentNode.childNodes.length ; i++ ) |
---|
| 2570 | contentStr += parentNode.childNodes[i].xml; |
---|
| 2571 | return contentStr; |
---|
| 2572 | }, |
---|
| 2573 | |
---|
| 2574 | _getContentAsStringMozilla: function(parentNode) { |
---|
| 2575 | var xmlSerializer = new XMLSerializer(); |
---|
| 2576 | var contentStr = ""; |
---|
| 2577 | for ( var i = 0 ; i < parentNode.childNodes.length ; i++ ) |
---|
| 2578 | contentStr += xmlSerializer.serializeToString(parentNode.childNodes[i]); |
---|
| 2579 | return contentStr; |
---|
| 2580 | }, |
---|
| 2581 | |
---|
| 2582 | toViewportPosition: function(element) { |
---|
| 2583 | return this._toAbsolute(element,true); |
---|
| 2584 | }, |
---|
| 2585 | |
---|
| 2586 | toDocumentPosition: function(element) { |
---|
| 2587 | return this._toAbsolute(element,false); |
---|
| 2588 | }, |
---|
| 2589 | |
---|
| 2590 | /** |
---|
| 2591 | * Compute the elements position in terms of the window viewport |
---|
| 2592 | * so that it can be compared to the position of the mouse (dnd) |
---|
| 2593 | * This is additions of all the offsetTop,offsetLeft values up the |
---|
| 2594 | * offsetParent hierarchy, ...taking into account any scrollTop, |
---|
| 2595 | * scrollLeft values along the way... |
---|
| 2596 | * |
---|
| 2597 | * IE has a bug reporting a correct offsetLeft of elements within a |
---|
| 2598 | * a relatively positioned parent!!! |
---|
| 2599 | **/ |
---|
| 2600 | _toAbsolute: function(element,accountForDocScroll) { |
---|
| 2601 | |
---|
| 2602 | if ( navigator.userAgent.toLowerCase().indexOf("msie") == -1 ) |
---|
| 2603 | return this._toAbsoluteMozilla(element,accountForDocScroll); |
---|
| 2604 | |
---|
| 2605 | var x = 0; |
---|
| 2606 | var y = 0; |
---|
| 2607 | var parent = element; |
---|
| 2608 | while ( parent ) { |
---|
| 2609 | |
---|
| 2610 | var borderXOffset = 0; |
---|
| 2611 | var borderYOffset = 0; |
---|
| 2612 | if ( parent != element ) { |
---|
| 2613 | var borderXOffset = parseInt(this.getElementsComputedStyle(parent, "borderLeftWidth" )); |
---|
| 2614 | var borderYOffset = parseInt(this.getElementsComputedStyle(parent, "borderTopWidth" )); |
---|
| 2615 | borderXOffset = isNaN(borderXOffset) ? 0 : borderXOffset; |
---|
| 2616 | borderYOffset = isNaN(borderYOffset) ? 0 : borderYOffset; |
---|
| 2617 | } |
---|
| 2618 | |
---|
| 2619 | x += parent.offsetLeft - parent.scrollLeft + borderXOffset; |
---|
| 2620 | y += parent.offsetTop - parent.scrollTop + borderYOffset; |
---|
| 2621 | parent = parent.offsetParent; |
---|
| 2622 | } |
---|
| 2623 | |
---|
| 2624 | if ( accountForDocScroll ) { |
---|
| 2625 | x -= this.docScrollLeft(); |
---|
| 2626 | y -= this.docScrollTop(); |
---|
| 2627 | } |
---|
| 2628 | |
---|
| 2629 | return { x:x, y:y }; |
---|
| 2630 | }, |
---|
| 2631 | |
---|
| 2632 | /** |
---|
| 2633 | * Mozilla did not report all of the parents up the hierarchy via the |
---|
| 2634 | * offsetParent property that IE did. So for the calculation of the |
---|
| 2635 | * offsets we use the offsetParent property, but for the calculation of |
---|
| 2636 | * the scrollTop/scrollLeft adjustments we navigate up via the parentNode |
---|
| 2637 | * property instead so as to get the scroll offsets... |
---|
| 2638 | * |
---|
| 2639 | **/ |
---|
| 2640 | _toAbsoluteMozilla: function(element,accountForDocScroll) { |
---|
| 2641 | var x = 0; |
---|
| 2642 | var y = 0; |
---|
| 2643 | var parent = element; |
---|
| 2644 | while ( parent ) { |
---|
| 2645 | x += parent.offsetLeft; |
---|
| 2646 | y += parent.offsetTop; |
---|
| 2647 | parent = parent.offsetParent; |
---|
| 2648 | } |
---|
| 2649 | |
---|
| 2650 | parent = element; |
---|
| 2651 | while ( parent && |
---|
| 2652 | parent != document.body && |
---|
| 2653 | parent != document.documentElement ) { |
---|
| 2654 | if ( parent.scrollLeft ) |
---|
| 2655 | x -= parent.scrollLeft; |
---|
| 2656 | if ( parent.scrollTop ) |
---|
| 2657 | y -= parent.scrollTop; |
---|
| 2658 | parent = parent.parentNode; |
---|
| 2659 | } |
---|
| 2660 | |
---|
| 2661 | if ( accountForDocScroll ) { |
---|
| 2662 | x -= this.docScrollLeft(); |
---|
| 2663 | y -= this.docScrollTop(); |
---|
| 2664 | } |
---|
| 2665 | |
---|
| 2666 | return { x:x, y:y }; |
---|
| 2667 | }, |
---|
| 2668 | |
---|
| 2669 | docScrollLeft: function() { |
---|
| 2670 | if ( window.pageXOffset ) |
---|
| 2671 | return window.pageXOffset; |
---|
| 2672 | else if ( document.documentElement && document.documentElement.scrollLeft ) |
---|
| 2673 | return document.documentElement.scrollLeft; |
---|
| 2674 | else if ( document.body ) |
---|
| 2675 | return document.body.scrollLeft; |
---|
| 2676 | else |
---|
| 2677 | return 0; |
---|
| 2678 | }, |
---|
| 2679 | |
---|
| 2680 | docScrollTop: function() { |
---|
| 2681 | if ( window.pageYOffset ) |
---|
| 2682 | return window.pageYOffset; |
---|
| 2683 | else if ( document.documentElement && document.documentElement.scrollTop ) |
---|
| 2684 | return document.documentElement.scrollTop; |
---|
| 2685 | else if ( document.body ) |
---|
| 2686 | return document.body.scrollTop; |
---|
| 2687 | else |
---|
| 2688 | return 0; |
---|
| 2689 | } |
---|
| 2690 | |
---|
| 2691 | }; |
---|