| 291 | | |
| 292 | | Prado.WebUI.TTabPanel = Class.create(); |
| 293 | | Prado.WebUI.TTabPanel.prototype = |
| 294 | | { |
| 295 | | initialize : function(options) |
| 296 | | { |
| 297 | | this.element = $(options.ID); |
| 298 | | this.onInit(options); |
| 299 | | }, |
| 300 | | |
| 301 | | onInit : function(options) |
| 302 | | { |
| 303 | | this.views = options.Views; |
| 304 | | this.hiddenField = $(options.ID+'_1'); |
| 305 | | this.activeCssClass = options.ActiveCssClass; |
| 306 | | this.normalCssClass = options.NormalCssClass; |
| 307 | | var length = options.Views.length; |
| 308 | | for(var i = 0; i<length; i++) |
| 309 | | { |
| 310 | | var item = options.Views[i]; |
| 311 | | var element = $(item+'_0'); |
| 312 | | if (element) |
| 313 | | { |
| 314 | | Event.observe(element, "click", this.elementClicked.bindEvent(this,item)); |
| 315 | | } |
| 316 | | } |
| 317 | | }, |
| 318 | | |
| 319 | | elementClicked : function(event,viewID) |
| 320 | | { |
| 321 | | var length = this.views.length; |
| 322 | | for(var i = 0; i<length; i++) |
| 323 | | { |
| 324 | | var item = this.views[i]; |
| 325 | | if ($(item)) |
| 326 | | { |
| 327 | | if(item == viewID) |
| 328 | | { |
| 329 | | $(item+'_0').className=this.activeCssClass; |
| 330 | | $(item).show(); |
| 331 | | this.hiddenField.value=i; |
| 332 | | } |
| 333 | | else |
| 334 | | { |
| 335 | | $(item+'_0').className=this.normalCssClass; |
| 336 | | $(item).hide(); |
| 337 | | } |
| 338 | | } |
| 339 | | } |
| 340 | | } |
| 341 | | }; |
| 342 | | |
| 343 | | |
| 344 | | Prado.WebUI.TKeyboard = Class.create(); |
| 345 | | Prado.WebUI.TKeyboard.prototype = |
| 346 | | { |
| 347 | | initialize : function(options) |
| 348 | | { |
| 349 | | this.element = $(options.ID); |
| 350 | | this.onInit(options); |
| 351 | | }, |
| 352 | | |
| 353 | | onInit : function(options) |
| 354 | | { |
| 355 | | this.cssClass = options['CssClass']; |
| 356 | | this.forControl = document.getElementById(options['ForControl']); |
| 357 | | this.autoHide = options['AutoHide']; |
| 358 | | |
| 359 | | this.flagShift = false; |
| 360 | | this.flagCaps = false; |
| 361 | | this.flagHover = false; |
| 362 | | this.flagFocus = false; |
| 363 | | |
| 364 | | this.keys = new Array |
| 365 | | ( |
| 366 | | new Array('` ~ D', '1 ! D', '2 @ D', '3 # D', '4 $ D', '5 % D', '6 ^ D', '7 & D', '8 * D', '9 ( D', '0 ) D', '- _ D', '= + D', 'Bksp Bksp Bksp'), |
| 367 | | new Array('Del Del Del', 'q Q L', 'w W L', 'e E L', 'r R L', 't T L', 'y Y L', 'u U L', 'i I L', 'o O L', 'p P L', '[ { D', '] } D', '\\ | \\'), |
| 368 | | new Array('Caps Caps Caps', 'a A L', 's S L', 'd D L', 'f F L', 'g G L', 'h H L', 'j J L', 'k K L', 'l L L', '; : D', '\' " D', 'Exit Exit Exit'), |
| 369 | | new Array('Shift Shift Shift', 'z Z L', 'x X L', 'c C L', 'v V L', 'b B L', 'n N L', 'm M L', ', < D', '. > D', '/ ? D', 'Shift Shift Shift') |
| 370 | | ); |
| 371 | | |
| 372 | | if (this.isObject(this.forControl)) |
| 373 | | { |
| 374 | | this.forControl.keyboard = this; |
| 375 | | this.forControl.onfocus = function() {this.keyboard.show(); }; |
| 376 | | this.forControl.onblur = function() {if (this.keyboard.flagHover == false) this.keyboard.hide();}; |
| 377 | | this.forControl.onkeydown = function(e) {if (!e) e = window.event; var key = (e.keyCode)?e.keyCode:e.which; if(key == 9) this.keyboard.hide();;}; |
| 378 | | this.forControl.onselect = this.saveSelection; |
| 379 | | this.forControl.onclick = this.saveSelection; |
| 380 | | this.forControl.onkeyup = this.saveSelection; |
| 381 | | } |
| 382 | | |
| 383 | | this.render(); |
| 384 | | |
| 385 | | this.tagKeyboard.onmouseover = function() {this.keyboard.flagHover = true;}; |
| 386 | | this.tagKeyboard.onmouseout = function() {this.keyboard.flagHover = false;}; |
| 387 | | |
| 388 | | if (!this.autoHide) this.show(); |
| 389 | | }, |
| 390 | | |
| 391 | | isObject : function(a) |
| 392 | | { |
| 393 | | return (typeof a == 'object' && !!a) || typeof a == 'function'; |
| 394 | | }, |
| 395 | | |
| 396 | | createElement : function(tagName, attributes, parent) |
| 397 | | { |
| 398 | | var tagElement = document.createElement(tagName); |
| 399 | | if (this.isObject(attributes)) for (attribute in attributes) tagElement[attribute] = attributes[attribute]; |
| 400 | | if (this.isObject(parent)) parent.appendChild(tagElement); |
| 401 | | return tagElement; |
| 402 | | }, |
| 403 | | |
| 404 | | onmouseover : function() |
| 405 | | { |
| 406 | | this.className += ' Hover'; |
| 407 | | }, |
| 408 | | |
| 409 | | onmouseout : function() |
| 410 | | { |
| 411 | | this.className = this.className.replace(/( Hover| Active)/ig, ''); |
| 412 | | }, |
| 413 | | |
| 414 | | onmousedown : function() |
| 415 | | { |
| 416 | | this.className += ' Active'; |
| 417 | | }, |
| 418 | | |
| 419 | | onmouseup : function() |
| 420 | | { |
| 421 | | this.className = this.className.replace(/( Active)/ig, ''); |
| 422 | | this.keyboard.type(this.innerHTML); |
| 423 | | }, |
| 424 | | |
| 425 | | render : function() |
| 426 | | { |
| 427 | | this.tagKeyboard = this.createElement('div', {className: this.cssClass, onselectstart: function() {return false;}}, this.element); |
| 428 | | this.tagKeyboard.keyboard = this; |
| 429 | | |
| 430 | | for (var line = 0; line < this.keys.length; line++) |
| 431 | | { |
| 432 | | var tagLine = this.createElement('div', {className: 'Line'}, this.tagKeyboard); |
| 433 | | for (var key = 0; key < this.keys[line].length; key++) |
| 434 | | { |
| 435 | | var split = this.keys[line][key].split(' '); |
| 436 | | var tagKey = this.createElement('div', {className: 'Key ' + split[2]}, tagLine); |
| 437 | | var tagKey1 = this.createElement('div', {className: 'Key1', innerHTML: split[0], keyboard: this, onmouseover: this.onmouseover, onmouseout: this.onmouseout, onmousedown: this.onmousedown, onmouseup: this.onmouseup}, tagKey); |
| 438 | | var tagKey2 = this.createElement('div', {className: 'Key2', innerHTML: split[1], keyboard: this, onmouseover: this.onmouseover, onmouseout: this.onmouseout, onmousedown: this.onmousedown, onmouseup: this.onmouseup}, tagKey); |
| 439 | | } |
| 440 | | } |
| 441 | | }, |
| 442 | | |
| 443 | | isShown : function() |
| 444 | | { |
| 445 | | return (this.tagKeyboard.style.visibility.toLowerCase() == 'visible'); |
| 446 | | }, |
| 447 | | |
| 448 | | show : function() |
| 449 | | { |
| 450 | | if (this.isShown() == false) this.tagKeyboard.style.visibility = 'visible'; |
| 451 | | }, |
| 452 | | |
| 453 | | hide : function() |
| 454 | | { |
| 455 | | if (this.isShown() == true && this.autoHide) {this.tagKeyboard.style.visibility = 'hidden'; } |
| 456 | | }, |
| 457 | | |
| 458 | | type : function(key) |
| 459 | | { |
| 460 | | var input = this.forControl; |
| 461 | | var command = key.toLowerCase(); |
| 462 | | |
| 463 | | if (command == 'exit') {this.hide();} |
| 464 | | else if (input != 'undefined' && input != null && command == 'bksp') {this.insert(input, 'bksp');} |
| 465 | | else if (input != 'undefined' && input != null && command == 'del') {this.insert(input, 'del');} |
| 466 | | else if (command == 'shift') {this.tagKeyboard.className = this.flagShift?'Keyboard Off':'Keyboard Shift';this.flagShift = this.flagShift?false:true;} |
| 467 | | else if (command == 'caps') {this.tagKeyboard.className = this.caps?'Keyboard Off':'Keyboard Caps';this.caps = this.caps?false:true;} |
| 468 | | else if (input != 'undefined' && input != null) |
| 469 | | { |
| 470 | | if (this.flagShift == true) {this.flagShift = false; this.tagKeyboard.className = 'Keyboard Off';} |
| 471 | | key = key.replace(/>/, '>'); key = key.replace(/</, '<'); key = key.replace(/&/, '&'); |
| 472 | | this.insert(input, key); |
| 473 | | } |
| 474 | | |
| 475 | | if (command != 'exit') input.focus(); |
| 476 | | }, |
| 477 | | |
| 478 | | saveSelection : function() |
| 479 | | { |
| 480 | | if (this.keyboard.forControl.createTextRange) |
| 481 | | { |
| 482 | | this.keyboard.selection = document.selection.createRange().duplicate(); |
| 483 | | return; |
| 484 | | } |
| 485 | | }, |
| 486 | | |
| 487 | | insert : function(field, value) |
| 488 | | { |
| 489 | | if (this.forControl.createTextRange && this.selection) |
| 490 | | { |
| 491 | | if (value == 'bksp') {this.selection.moveStart("character", -1); this.selection.text = '';} |
| 492 | | else if (value == 'del') {this.selection.moveEnd("character", 1); this.selection.text = '';} |
| 493 | | else {this.selection.text = value;} |
| 494 | | this.selection.select(); |
| 495 | | } |
| 496 | | else |
| 497 | | { |
| 498 | | var selectStart = this.forControl.selectionStart; |
| 499 | | var selectEnd = this.forControl.selectionEnd; |
| 500 | | var start = (this.forControl.value).substring(0, selectStart); |
| 501 | | var end = (this.forControl.value).substring(selectEnd, this.forControl.textLength); |
| 502 | | |
| 503 | | if (value == 'bksp') {start = start.substring(0, start.length - 1); selectStart -= 1; value = '';} |
| 504 | | if (value == 'del') {end = end.substring(1, end.length); value = '';} |
| 505 | | |
| 506 | | this.forControl.value = start + value + end; |
| 507 | | this.forControl.selectionStart = selectEnd + value.length; |
| 508 | | this.forControl.selectionEnd = selectStart + value.length; |
| 509 | | } |
| 510 | | } |
| 511 | | } |
