/** * frootySearch changes your standard Search input field into somewhat elegant looking * @license GPL 2 (http://www.gnu.org/licenses/gpl.html) * @author i-net software * @author Gerry Weißbach */ var frootySearch__searchDecorator = function() { var searchField = $('qsearch__in'); if ( !searchField ) { return; } var searchButton = searchField.nextSibling; if ( typeof(searchField) == 'undefined' || searchField === null ) {return;} if ( searchButton && searchButton.nodeName == 'input' && searchButton.className == 'button' ) { searchButton.style.display = 'none'; } searchField.setAttribute('autocomplete', 'off'); // Get the Submitbutton var button = null; var tmp = searchField.parentNode.firstChild; while( tmp && !button ) { if ( frootySearch__hasClassName(tmp, 'button') ) { button = tmp; continue; } tmp = tmp.nextSibling; } if ( !button ) { return; } var label = document.createElement('label'); label.setAttribute('for', searchField.id); searchField.parentNode.insertBefore(label, searchField); label.appendChild(searchField); var placeholder = button.value.split('\n')[0]; button.parentNode.removeChild(button); button = null; var standIn = null; if(is_safari) { searchField.setAttribute('type', 'search'); searchField.setAttribute('autosave', 'off'); searchField.setAttribute('placeholder', placeholder); searchField.setAttribute('results', 0); } else { standIn = document.createElement("input"); var left = document.createElement("div"); frootySearch__addClassName(left, "left"); var right = document.createElement("div"); frootySearch__addClassName(right, "right"); var reset = document.createElement("div"); frootySearch__addClassName(reset, "reset"); reset.setAttribute('title', 'Reset'); var wrapper = document.createElement("div"); frootySearch__addClassName(wrapper, "frootySearch"); var alreadyHasplaceholder = searchField.value == placeholder; var isEmpty = searchField.value.length == 0; if (alreadyHasplaceholder || isEmpty) { searchField.value = placeholder; frootySearch__addClassName(wrapper, "blurred"); frootySearch__addClassName(wrapper, "empty"); } searchField.parentNode.replaceChild(standIn, searchField); wrapper.appendChild(left); left.appendChild(searchField); left.appendChild(right); left.appendChild(reset); var focus = function () {var blurred = frootySearch__hasClassName(wrapper, "blurred");if (searchField.value == placeholder && blurred) {searchField.value = "";}frootySearch__removeClassName(wrapper, "blurred");}; addEvent(searchField, "focus", focus); var blur = function () {if (searchField.value == "") {frootySearch__addClassName(wrapper, "empty");searchField.value = placeholder;}frootySearch__addClassName(wrapper, "blurred");}; addEvent(searchField, "blur", blur); var toggleReset = function () {if (searchField.value.length >= 0) {frootySearch__removeClassName(wrapper, "empty");}}; addEvent(searchField, "keydown", toggleReset); 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();};}; addEvent(reset, "mousedown", resetField()); addEvent(searchField, "keydown", resetField()); if (standIn) { standIn.parentNode.replaceChild(wrapper, standIn); } } }; /* Function taken from prototype library */ var frootySearch__addClassName = function(element, className) { if (!(element = $(element))) return; if (!frootySearch__hasClassName(element, className)) element.className += (element.className ? ' ' : '') + className; return element; }; /* Function taken from prototype library */ var frootySearch__hasClassName = function(element, className) { if (!(element = $(element))) return; var elementClassName = element.className; return (elementClassName.length > 0 && (elementClassName == className || new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName))); }; /* Function taken from prototype library */ var frootySearch__removeClassName = function(element, className) { if (!(element = $(element))) return; /* reimplementation of replace ... */ element.className = String(element.className).replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').replace(/^\s+/, '').replace(/\s+$/, ''); return element; }; addInitEvent(frootySearch__searchDecorator);