diff -r d824146a9589 -r 0a2505c3b547 web/res/js/niceforms.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/web/res/js/niceforms.js Mon Mar 05 18:41:11 2012 +0100 @@ -0,0 +1,576 @@ +/*############################################################# +Name: Niceforms +Version: 2.0 +Author: Lucian Slatineanu +URL: http://www.emblematiq.com/projects/niceforms/ + +Feel free to use and modify but please keep this copyright intact. +#################################################################*/ + +//Theme Variables - edit these to match your theme +var imagesPath = "img/"; +var selectRightWidthSimple = 19; +var selectRightWidthScroll = 2; +var selectMaxHeight = 200; +var textareaTopPadding = 10; +var textareaSidePadding = 10; + +//Global Variables +var NF = new Array(); +var isIE = false; +var resizeTest = 1; + +//Initialization function +function NFInit() { + try { + document.execCommand('BackgroundImageCache', false, true); + } catch(e) {} + if(!document.getElementById) {return false;} + //alert("click me first"); + NFDo('start'); +} +function NFDo(what) { + var niceforms = document.getElementsByTagName('form'); + var identifier = new RegExp('(^| )'+'niceform'+'( |$)'); + if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { + var ieversion=new Number(RegExp.$1); + if(ieversion < 7) {return false;} //exit script if IE6 + isIE = true; + } + for(var q = 0; q < niceforms.length; q++) {if(identifier.test(niceforms[q].className)) { + if(what == "start") { //Load Niceforms + NF[q] = new niceform(niceforms[q]); + niceforms[q].start(); + } + else { //Unload Niceforms + niceforms[q].unload(); + NF[q] = ""; + } + }} +} +function NFFix() { + NFDo('stop'); + NFDo('start'); +} +function niceform(nf) { + nf._inputText = new Array(); nf._inputRadio = new Array(); nf._inputCheck = new Array(); nf._inputSubmit = new Array(); nf._inputFile = new Array(); nf._textarea = new Array(); nf._select = new Array(); nf._multiselect = new Array(); + nf.add_inputText = function(obj) {this._inputText[this._inputText.length] = obj; inputText(obj);} + nf.add_inputRadio = function(obj) {this._inputRadio[this._inputRadio.length] = obj; inputRadio(obj);} + nf.add_inputCheck = function(obj) {this._inputCheck[this._inputCheck.length] = obj; inputCheck(obj);} + nf.add_inputSubmit = function(obj) {this._inputSubmit[this._inputSubmit.length] = obj; inputSubmit(obj);} + nf.add_inputFile = function(obj) {this._inputFile[this._inputFile.length] = obj; inputFile(obj);} + nf.add_textarea = function(obj) {this._textarea[this._textarea.length] = obj; textarea(obj);} + nf.add_select = function(obj) {this._select[this._select.length] = obj; selects(obj);} + nf.add_multiselect = function(obj) {this._multiselect[this._multiselect.length] = obj; multiSelects(obj);} + nf.start = function() { + //Separate and assign elements + var allInputs = this.getElementsByTagName('input'); + for(var w = 0; w < allInputs.length; w++) { + switch(allInputs[w].type) { + case "text": case "password": {this.add_inputText(allInputs[w]); break;} + case "radio": {this.add_inputRadio(allInputs[w]); break;} + case "checkbox": {this.add_inputCheck(allInputs[w]); break;} + case "submit": case "reset": case "button": {this.add_inputSubmit(allInputs[w]); break;} + case "file": {this.add_inputFile(allInputs[w]); break;} + } + } + var allButtons = this.getElementsByTagName('button'); + for(var w = 0; w < allButtons.length; w++) { + this.add_inputSubmit(allButtons[w]); + } + var allTextareas = this.getElementsByTagName('textarea'); + for(var w = 0; w < allTextareas.length; w++) { + this.add_textarea(allTextareas[w]); + } + var allSelects = this.getElementsByTagName('select'); + for(var w = 0; w < allSelects.length; w++) { + if(allSelects[w].size == "1") {this.add_select(allSelects[w]);} + else {this.add_multiselect(allSelects[w]);} + } + //Start + for(w = 0; w < this._inputText.length; w++) {this._inputText[w].init();} + for(w = 0; w < this._inputRadio.length; w++) {this._inputRadio[w].init();} + for(w = 0; w < this._inputCheck.length; w++) {this._inputCheck[w].init();} + for(w = 0; w < this._inputSubmit.length; w++) {this._inputSubmit[w].init();} + for(w = 0; w < this._inputFile.length; w++) {this._inputFile[w].init();} + for(w = 0; w < this._textarea.length; w++) {this._textarea[w].init();} + for(w = 0; w < this._select.length; w++) {this._select[w].init(w);} + for(w = 0; w < this._multiselect.length; w++) {this._multiselect[w].init(w);} + } + nf.unload = function() { + //Stop + for(w = 0; w < this._inputText.length; w++) {this._inputText[w].unload();} + for(w = 0; w < this._inputRadio.length; w++) {this._inputRadio[w].unload();} + for(w = 0; w < this._inputCheck.length; w++) {this._inputCheck[w].unload();} + for(w = 0; w < this._inputSubmit.length; w++) {this._inputSubmit[w].unload();} + for(w = 0; w < this._inputFile.length; w++) {this._inputFile[w].unload();} + for(w = 0; w < this._textarea.length; w++) {this._textarea[w].unload();} + for(w = 0; w < this._select.length; w++) {this._select[w].unload();} + for(w = 0; w < this._multiselect.length; w++) {this._multiselect[w].unload();} + } +} +function inputText(el) { //extent Text inputs + el.oldClassName = el.className; + el.left = document.createElement('img'); + el.left.src = imagesPath + "0.png"; + el.left.className = "NFTextLeft"; + el.right = document.createElement('img'); + el.right.src = imagesPath + "0.png"; + el.right.className = "NFTextRight"; + el.dummy = document.createElement('div'); + el.dummy.className = "NFTextCenter"; + el.onfocus = function() { + this.dummy.className = "NFTextCenter NFh"; + this.left.className = "NFTextLeft NFh"; + this.right.className = "NFTextRight NFh"; + } + el.onblur = function() { + this.dummy.className = "NFTextCenter"; + this.left.className = "NFTextLeft"; + this.right.className = "NFTextRight"; + } + el.init = function() { + this.parentNode.insertBefore(this.left, this); + this.parentNode.insertBefore(this.right, this.nextSibling); + this.dummy.appendChild(this); + this.right.parentNode.insertBefore(this.dummy, this.right); + this.className = "NFText"; + } + el.unload = function() { + this.parentNode.parentNode.appendChild(this); + this.parentNode.removeChild(this.left); + this.parentNode.removeChild(this.right); + this.parentNode.removeChild(this.dummy); + this.className = this.oldClassName; + } +} +function inputRadio(el) { //extent Radio buttons + el.oldClassName = el.className; + el.dummy = document.createElement('div'); + if(el.checked) {el.dummy.className = "NFRadio NFh";} + else {el.dummy.className = "NFRadio";} + el.dummy.ref = el; + if(isIE == false) {el.dummy.style.left = findPosX(el) + 'px'; el.dummy.style.top = findPosY(el) + 'px';} + else {el.dummy.style.left = findPosX(el) + 4 + 'px'; el.dummy.style.top = findPosY(el) + 4 + 'px';} + el.dummy.onclick = function() { + if(!this.ref.checked) { + var siblings = getInputsByName(this.ref.name); + for(var q = 0; q < siblings.length; q++) { + siblings[q].checked = false; + siblings[q].dummy.className = "NFRadio"; + } + this.ref.checked = true; + this.className = "NFRadio NFh"; + } + } + el.onclick = function() { + if(this.checked) { + var siblings = getInputsByName(this.name); + for(var q = 0; q < siblings.length; q++) { + siblings[q].dummy.className = "NFRadio"; + } + this.dummy.className = "NFRadio NFh"; + } + } + el.onfocus = function() {this.dummy.className += " NFfocused";} + el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");} + el.init = function() { + this.parentNode.insertBefore(this.dummy, this); + el.className = "NFhidden"; + } + el.unload = function() { + this.parentNode.removeChild(this.dummy); + this.className = this.oldClassName; + } +} +function inputCheck(el) { //extend Checkboxes + el.oldClassName = el.className; + el.dummy = document.createElement('img'); + el.dummy.src = imagesPath + "0.png"; + if(el.checked) {el.dummy.className = "NFCheck NFh";} + else {el.dummy.className = "NFCheck";} + el.dummy.ref = el; + if(isIE == false) {el.dummy.style.left = findPosX(el) + 'px'; el.dummy.style.top = findPosY(el) + 'px';} + else {el.dummy.style.left = findPosX(el) + 4 + 'px'; el.dummy.style.top = findPosY(el) + 4 + 'px';} + el.dummy.onclick = function() { + if(!this.ref.checked) { + this.ref.checked = true; + this.className = "NFCheck NFh"; + } + else { + this.ref.checked = false; + this.className = "NFCheck"; + } + } + el.onclick = function() { + if(this.checked) {this.dummy.className = "NFCheck NFh";} + else {this.dummy.className = "NFCheck";} + } + el.onfocus = function() {this.dummy.className += " NFfocused";} + el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");} + el.init = function() { + this.parentNode.insertBefore(this.dummy, this); + el.className = "NFhidden"; + } + el.unload = function() { + this.parentNode.removeChild(this.dummy); + this.className = this.oldClassName; + } +} +function inputSubmit(el) { //extend Buttons + el.oldClassName = el.className; + el.left = document.createElement('img'); + el.left.className = "NFButtonLeft"; + el.left.src = imagesPath + "0.png"; + el.right = document.createElement('img'); + el.right.src = imagesPath + "0.png"; + el.right.className = "NFButtonRight"; + el.onmouseover = function() { + this.className = "NFButton NFh"; + this.left.className = "NFButtonLeft NFh"; + this.right.className = "NFButtonRight NFh"; + } + el.onmouseout = function() { + this.className = "NFButton"; + this.left.className = "NFButtonLeft"; + this.right.className = "NFButtonRight"; + } + el.init = function() { + this.parentNode.insertBefore(this.left, this); + this.parentNode.insertBefore(this.right, this.nextSibling); + this.className = "NFButton"; + } + el.unload = function() { + this.parentNode.removeChild(this.left); + this.parentNode.removeChild(this.right); + this.className = this.oldClassName; + } +} +function inputFile(el) { //extend File inputs + el.oldClassName = el.className; + el.dummy = document.createElement('div'); + el.dummy.className = "NFFile"; + el.file = document.createElement('div'); + el.file.className = "NFFileNew"; + el.center = document.createElement('div'); + el.center.className = "NFTextCenter"; + el.clone = document.createElement('input'); + el.clone.type = "text"; + el.clone.className = "NFText"; + el.clone.ref = el; + el.left = document.createElement('img'); + el.left.src = imagesPath + "0.png"; + el.left.className = "NFTextLeft"; + el.button = document.createElement('img'); + el.button.src = imagesPath + "0.png"; + el.button.className = "NFFileButton"; + el.button.ref = el; + el.button.onclick = function() {this.ref.click();} + el.init = function() { + var top = this.parentNode; + if(this.previousSibling) {var where = this.previousSibling;} + else {var where = top.childNodes[0];} + top.insertBefore(this.dummy, where); + this.dummy.appendChild(this); + this.center.appendChild(this.clone); + this.file.appendChild(this.center); + this.file.insertBefore(this.left, this.center); + this.file.appendChild(this.button); + this.dummy.appendChild(this.file); + this.className = "NFhidden"; + this.relatedElement = this.clone; + } + el.unload = function() { + this.parentNode.parentNode.appendChild(this); + this.parentNode.removeChild(this.dummy); + this.className = this.oldClassName; + } + el.onchange = el.onmouseout = function() {this.relatedElement.value = this.value;} + el.onfocus = function() { + this.left.className = "NFTextLeft NFh"; + this.center.className = "NFTextCenter NFh"; + this.button.className = "NFFileButton NFh"; + } + el.onblur = function() { + this.left.className = "NFTextLeft"; + this.center.className = "NFTextCenter"; + this.button.className = "NFFileButton"; + } + el.onselect = function() { + this.relatedElement.select(); + this.value = ''; + } +} +function textarea(el) { //extend Textareas + el.oldClassName = el.className; + el.height = el.offsetHeight - textareaTopPadding; + el.width = el.offsetWidth - textareaSidePadding; + el.topLeft = document.createElement('img'); + el.topLeft.src = imagesPath + "0.png"; + el.topLeft.className = "NFTextareaTopLeft"; + el.topRight = document.createElement('div'); + el.topRight.className = "NFTextareaTop"; + el.bottomLeft = document.createElement('img'); + el.bottomLeft.src = imagesPath + "0.png"; + el.bottomLeft.className = "NFTextareaBottomLeft"; + el.bottomRight = document.createElement('div'); + el.bottomRight.className = "NFTextareaBottom"; + el.left = document.createElement('div'); + el.left.className = "NFTextareaLeft"; + el.right = document.createElement('div'); + el.right.className = "NFTextareaRight"; + el.init = function() { + var top = this.parentNode; + if(this.previousSibling) {var where = this.previousSibling;} + else {var where = top.childNodes[0];} + top.insertBefore(el.topRight, where); + top.insertBefore(el.right, where); + top.insertBefore(el.bottomRight, where); + this.topRight.appendChild(this.topLeft); + this.right.appendChild(this.left); + this.right.appendChild(this); + this.bottomRight.appendChild(this.bottomLeft); + el.style.width = el.topRight.style.width = el.bottomRight.style.width = el.width + 'px'; + el.style.height = el.left.style.height = el.right.style.height = el.height + 'px'; + this.className = "NFTextarea"; + } + el.unload = function() { + this.parentNode.parentNode.appendChild(this); + this.parentNode.removeChild(this.topRight); + this.parentNode.removeChild(this.bottomRight); + this.parentNode.removeChild(this.right); + this.className = this.oldClassName; + this.style.width = this.style.height = ""; + } + el.onfocus = function() { + this.topLeft.className = "NFTextareaTopLeft NFh"; + this.topRight.className = "NFTextareaTop NFhr"; + this.left.className = "NFTextareaLeftH"; + this.right.className = "NFTextareaRightH"; + this.bottomLeft.className = "NFTextareaBottomLeft NFh"; + this.bottomRight.className = "NFTextareaBottom NFhr"; + } + el.onblur = function() { + this.topLeft.className = "NFTextareaTopLeft"; + this.topRight.className = "NFTextareaTop"; + this.left.className = "NFTextareaLeft"; + this.right.className = "NFTextareaRight"; + this.bottomLeft.className = "NFTextareaBottomLeft"; + this.bottomRight.className = "NFTextareaBottom"; + } +} +function selects(el) { //extend Selects + el.oldClassName = el.className; + el.dummy = document.createElement('div'); + el.dummy.className = "NFSelect"; + el.dummy.style.width = el.offsetWidth + 'px'; + el.dummy.ref = el; + el.left = document.createElement('img'); + el.left.src = imagesPath + "0.png"; + el.left.className = "NFSelectLeft"; + el.right = document.createElement('div'); + el.right.className = "NFSelectRight"; + el.txt = document.createTextNode(el.options[0].text); + el.bg = document.createElement('div'); + el.bg.className = "NFSelectTarget"; + el.bg.style.display = "none"; + el.opt = document.createElement('ul'); + el.opt.className = "NFSelectOptions"; + el.dummy.style.left = findPosX(el) + 'px'; + el.dummy.style.top = findPosY(el) + 'px'; + el.opts = new Array(el.options.length); + el.init = function(pos) { + this.dummy.appendChild(this.left); + this.right.appendChild(this.txt); + this.dummy.appendChild(this.right); + this.bg.appendChild(this.opt); + this.dummy.appendChild(this.bg); + for(var q = 0; q < this.options.length; q++) { + this.opts[q] = new option(this.options[q], q); + this.opt.appendChild(this.options[q].li); + this.options[q].lnk.onclick = function() { + this._onclick(); + this.ref.dummy.getElementsByTagName('div')[0].innerHTML = this.ref.options[this.pos].text; + this.ref.options[this.pos].selected = "selected"; + for(var w = 0; w < this.ref.options.length; w++) {this.ref.options[w].lnk.className = "";} + this.ref.options[this.pos].lnk.className = "NFOptionActive"; + } + } + if(this.options.selectedIndex) { + this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[this.options.selectedIndex].text; + this.options[this.options.selectedIndex].lnk.className = "NFOptionActive"; + } + this.dummy.style.zIndex = 999 - pos; + this.parentNode.insertBefore(this.dummy, this); + this.className = "NFhidden"; + } + el.unload = function() { + this.parentNode.removeChild(this.dummy); + this.className = this.oldClassName; + } + el.dummy.onclick = function() { + var allDivs = document.getElementsByTagName('div'); for(var q = 0; q < allDivs.length; q++) {if((allDivs[q].className == "NFSelectTarget") && (allDivs[q] != this.ref.bg)) {allDivs[q].style.display = "none";}} + if(this.ref.bg.style.display == "none") {this.ref.bg.style.display = "block";} + else {this.ref.bg.style.display = "none";} + if(this.ref.opt.offsetHeight > selectMaxHeight) { + this.ref.bg.style.width = this.ref.offsetWidth - selectRightWidthScroll + 33 + 'px'; + this.ref.opt.style.width = this.ref.offsetWidth - selectRightWidthScroll + 'px'; + } + else { + this.ref.bg.style.width = this.ref.offsetWidth - selectRightWidthSimple + 33 + 'px'; + this.ref.opt.style.width = this.ref.offsetWidth - selectRightWidthSimple + 'px'; + } + } + el.bg.onmouseout = function(e) { + if (!e) var e = window.event; + e.cancelBubble = true; + if (e.stopPropagation) e.stopPropagation(); + var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; + if((reltg.nodeName == 'A') || (reltg.nodeName == 'LI') || (reltg.nodeName == 'UL')) return; + if((reltg.nodeName == 'DIV') || (reltg.className == 'NFSelectTarget')) return; + else{this.style.display = "none";} + } + el.dummy.onmouseout = function(e) { + if (!e) var e = window.event; + e.cancelBubble = true; + if (e.stopPropagation) e.stopPropagation(); + var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; + if((reltg.nodeName == 'A') || (reltg.nodeName == 'LI') || (reltg.nodeName == 'UL')) return; + if((reltg.nodeName == 'DIV') || (reltg.className == 'NFSelectTarget')) return; + else{this.ref.bg.style.display = "none";} + } + el.onfocus = function() {this.dummy.className += " NFfocused";} + el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");} + el.onkeydown = function(e) { + if (!e) var e = window.event; + var thecode = e.keyCode; + var active = this.selectedIndex; + switch(thecode){ + case 40: //down + if(active < this.options.length - 1) { + for(var w = 0; w < this.options.length; w++) {this.options[w].lnk.className = "";} + var newOne = active + 1; + this.options[newOne].selected = "selected"; + this.options[newOne].lnk.className = "NFOptionActive"; + this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[newOne].text; + } + return false; + break; + case 38: //up + if(active > 0) { + for(var w = 0; w < this.options.length; w++) {this.options[w].lnk.className = "";} + var newOne = active - 1; + this.options[newOne].selected = "selected"; + this.options[newOne].lnk.className = "NFOptionActive"; + this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[newOne].text; + } + return false; + break; + default: + break; + } + } +} +function multiSelects(el) { //extend Multiple Selects + el.oldClassName = el.className; + el.height = el.offsetHeight; + el.width = el.offsetWidth; + el.topLeft = document.createElement('img'); + el.topLeft.src = imagesPath + "0.png"; + el.topLeft.className = "NFMultiSelectTopLeft"; + el.topRight = document.createElement('div'); + el.topRight.className = "NFMultiSelectTop"; + el.bottomLeft = document.createElement('img'); + el.bottomLeft.src = imagesPath + "0.png"; + el.bottomLeft.className = "NFMultiSelectBottomLeft"; + el.bottomRight = document.createElement('div'); + el.bottomRight.className = "NFMultiSelectBottom"; + el.left = document.createElement('div'); + el.left.className = "NFMultiSelectLeft"; + el.right = document.createElement('div'); + el.right.className = "NFMultiSelectRight"; + el.init = function() { + var top = this.parentNode; + if(this.previousSibling) {var where = this.previousSibling;} + else {var where = top.childNodes[0];} + top.insertBefore(el.topRight, where); + top.insertBefore(el.right, where); + top.insertBefore(el.bottomRight, where); + this.topRight.appendChild(this.topLeft); + this.right.appendChild(this.left); + this.right.appendChild(this); + this.bottomRight.appendChild(this.bottomLeft); + el.style.width = el.topRight.style.width = el.bottomRight.style.width = el.width + 'px'; + el.style.height = el.left.style.height = el.right.style.height = el.height + 'px'; + el.className = "NFMultiSelect"; + } + el.unload = function() { + this.parentNode.parentNode.appendChild(this); + this.parentNode.removeChild(this.topRight); + this.parentNode.removeChild(this.bottomRight); + this.parentNode.removeChild(this.right); + this.className = this.oldClassName; + this.style.width = this.style.height = ""; + } + el.onfocus = function() { + this.topLeft.className = "NFMultiSelectTopLeft NFh"; + this.topRight.className = "NFMultiSelectTop NFhr"; + this.left.className = "NFMultiSelectLeftH"; + this.right.className = "NFMultiSelectRightH"; + this.bottomLeft.className = "NFMultiSelectBottomLeft NFh"; + this.bottomRight.className = "NFMultiSelectBottom NFhr"; + } + el.onblur = function() { + this.topLeft.className = "NFMultiSelectTopLeft"; + this.topRight.className = "NFMultiSelectTop"; + this.left.className = "NFMultiSelectLeft"; + this.right.className = "NFMultiSelectRight"; + this.bottomLeft.className = "NFMultiSelectBottomLeft"; + this.bottomRight.className = "NFMultiSelectBottom"; + } +} +function option(el, no) { //extend Options + el.li = document.createElement('li'); + el.lnk = document.createElement('a'); + el.lnk.href = "javascript:;"; + el.lnk.ref = el.parentNode; + el.lnk.pos = no; + el.lnk._onclick = el.onclick || function () {}; + el.txt = document.createTextNode(el.text); + el.lnk.appendChild(el.txt); + el.li.appendChild(el.lnk); +} + +//Get Position +function findPosY(obj) { + var posTop = 0; + do {posTop += obj.offsetTop;} while (obj = obj.offsetParent); + return posTop; +} +function findPosX(obj) { + var posLeft = 0; + do {posLeft += obj.offsetLeft;} while (obj = obj.offsetParent); + return posLeft; +} +//Get Siblings +function getInputsByName(name) { + var inputs = document.getElementsByTagName("input"); + var w = 0; var results = new Array(); + for(var q = 0; q < inputs.length; q++) {if(inputs[q].name == name) {results[w] = inputs[q]; ++w;}} + return results; +} + +//Add events +var existingLoadEvent = window.onload || function () {}; +var existingResizeEvent = window.onresize || function() {}; +window.onload = function () { + existingLoadEvent(); + NFInit(); +} +window.onresize = function() { + if(resizeTest != document.documentElement.clientHeight) { + existingResizeEvent(); + NFFix(); + } + resizeTest = document.documentElement.clientHeight; +} \ No newline at end of file