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 | }; |
---|