1/** 2 * frootySearch changes your standard Search input field into somewhat elegant looking 3 * @license GPL 2 (http://www.gnu.org/licenses/gpl.html) 4 * @author i-net software <tools@inetsoftware.de> 5 * @author Gerry Wei�bach <gweissbach@inetsoftware.de> 6 */ 7var frootySearch__searchDecorator = function() { 8 9 var searchField = $('qsearch__in'); 10 if ( !searchField ) { return; } 11 var searchButton = searchField.nextSibling; 12 if ( typeof(searchField) == 'undefined' || searchField === null ) {return;} 13 if ( searchButton && searchButton.nodeName == 'input' && 14 searchButton.className == 'button' ) { 15 searchButton.style.display = 'none'; 16 } 17 18 searchField.setAttribute('autocomplete', 'off'); 19 20 // Get the Submitbutton 21 var button = null; 22 var tmp = searchField.parentNode.firstChild; 23 while( tmp && !button ) { 24 if ( frootySearch__hasClassName(tmp, 'button') ) { 25 button = tmp; 26 continue; 27 } 28 29 tmp = tmp.nextSibling; 30 } 31 32 if ( !button ) { return; } 33 34 var label = document.createElement('label'); 35 label.setAttribute('for', searchField.id); 36 searchField.parentNode.insertBefore(label, searchField); 37 label.appendChild(searchField); 38 39 var placeholder = button.value.split('\n')[0]; 40 button.parentNode.removeChild(button); 41 button = null; 42 43 var standIn = null; 44 if(is_safari) { 45 46 searchField.setAttribute('type', 'search'); 47 48 searchField.setAttribute('autosave', 'off'); 49 searchField.setAttribute('placeholder', placeholder); 50 searchField.setAttribute('results', 0); 51 } else { 52 standIn = document.createElement("input"); 53 var left = document.createElement("div"); 54 frootySearch__addClassName(left, "left"); 55 var right = document.createElement("div"); 56 frootySearch__addClassName(right, "right"); 57 var reset = document.createElement("div"); 58 frootySearch__addClassName(reset, "reset"); 59 reset.setAttribute('title', 'Reset'); 60 var wrapper = document.createElement("div"); 61 frootySearch__addClassName(wrapper, "frootySearch"); 62 var alreadyHasplaceholder = searchField.value == placeholder; 63 var isEmpty = searchField.value.length == 0; 64 if (alreadyHasplaceholder || isEmpty) { 65 searchField.value = placeholder; 66 frootySearch__addClassName(wrapper, "blurred"); 67 frootySearch__addClassName(wrapper, "empty"); 68 } 69 70 searchField.parentNode.replaceChild(standIn, searchField); 71 wrapper.appendChild(left); 72 left.appendChild(searchField); 73 left.appendChild(right); 74 left.appendChild(reset); 75 76 var focus = function () {var blurred = frootySearch__hasClassName(wrapper, "blurred");if (searchField.value == placeholder && blurred) {searchField.value = "";}frootySearch__removeClassName(wrapper, "blurred");}; 77 addEvent(searchField, "focus", focus); 78 var blur = function () {if (searchField.value == "") {frootySearch__addClassName(wrapper, "empty");searchField.value = placeholder;}frootySearch__addClassName(wrapper, "blurred");}; 79 addEvent(searchField, "blur", blur); 80 var toggleReset = function () {if (searchField.value.length >= 0) {frootySearch__removeClassName(wrapper, "empty");}}; 81 addEvent(searchField, "keydown", toggleReset); 82 var resetField = function () {return function (evt) {var escaped = false;if (evt.type == "keydown") {if (evt.keyCode != 27) {return;} else {escaped = true;}}searchField.blur();searchField.value = "";frootySearch__addClassName(wrapper, "empty");if ($('qsearch__out'))$('qsearch__out').style.display='none';searchField.focus();};}; 83 addEvent(reset, "mousedown", resetField()); 84 addEvent(searchField, "keydown", resetField()); 85 if (standIn) { 86 standIn.parentNode.replaceChild(wrapper, standIn); 87 } 88 } 89}; 90 91/* Function taken from prototype library */ 92var frootySearch__addClassName = function(element, className) { 93 if (!(element = $(element))) return; 94 if (!frootySearch__hasClassName(element, className)) 95 element.className += (element.className ? ' ' : '') + className; 96 return element; 97}; 98 99/* Function taken from prototype library */ 100var frootySearch__hasClassName = function(element, className) { 101 if (!(element = $(element))) return; 102 var elementClassName = element.className; 103 return (elementClassName.length > 0 && (elementClassName == className || 104 new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName))); 105}; 106 107/* Function taken from prototype library */ 108var frootySearch__removeClassName = function(element, className) { 109 if (!(element = $(element))) return; 110 /* reimplementation of replace ... */ 111 element.className = String(element.className).replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').replace(/^\s+/, '').replace(/\s+$/, ''); 112 return element; 113}; 114 115addInitEvent(frootySearch__searchDecorator); 116