From 6b6273018811962f313f1b3c18ba4eccdd101b5b Mon Sep 17 00:00:00 2001 From: Benedict Eastaugh Date: Sun, 15 May 2011 00:44:21 +0100 Subject: [PATCH] New, jQuery-powered search form placeholder fallback. --- app/js/tarski.dev.js | 169 +++++++++++++++++-------------------------- app/js/tarski.js | 2 +- changelog.txt | 2 + functions.php | 5 +- 4 files changed, 73 insertions(+), 105 deletions(-) diff --git a/app/js/tarski.dev.js b/app/js/tarski.dev.js index b25b165..5583d16 100644 --- a/app/js/tarski.dev.js +++ b/app/js/tarski.dev.js @@ -1,118 +1,83 @@ -Function.prototype.bind = function(object) { - var method = this; - return function() { - return method.apply(object, arguments); - }; -}; +/** + * Tarski + **/ +window.Tarski = {}; -function addEvent(obj, type, fn) { - if (obj.addEventListener) { - obj.addEventListener(type, fn, false); - EventCache.add(obj, type, fn); - } else if (obj.attachEvent) { - obj["e" + type + fn] = fn; - obj[type + fn] = function() { obj["e" + type + fn](window.event); }; - obj.attachEvent("on"+ type, obj[type + fn]); - EventCache.add(obj, type, fn); +/** + * new Tarski.Searchbox(field, label) + * - field (HTMLElement): the search field + * - label (HTMLElement): the label for the search field + **/ +Tarski.Searchbox = function(field, label) { + var self = this, text; + + this._field = jQuery(field); + this._label = jQuery(label).hide(); + + if (this.constructor.PLACEHOLDER_SUPPORTED) return; + + if (text = this._field.attr('placeholder')) { + this._text = text; } else { - obj["on" + type] = obj["e" + type + fn]; + this._text = this._label.text(); } + + this._field.focus(function() { self.focus(); }); + this._field.blur(function() { self.blur(); }); + + this.blur(); }; -var EventCache = function() { - var listEvents = []; - return { - listEvents : listEvents, - add: function(node, sEventName, fHandler){ - listEvents.push(arguments); - }, - - flush: function() { - var i, item; - for(i = listEvents.length - 1; i >= 0; i = i - 1){ - item = listEvents[i]; - - if (item[0].removeEventListener) { - item[0].removeEventListener(item[1], item[2], item[3]); - }; - - if (item[1].substring(0, 2) !== "on") { - item[1] = "on" + item[1]; - }; - - if (item[0].detachEvent) { - item[0].detachEvent(item[1], item[2]); - }; - - item[0][item[1]] = null; - }; - } - }; -}(); - -addEvent(window, 'unload', EventCache.flush); +/** + * Tarski.Searchbox#focus() -> Tarski.Searchbox + * + * Removes any text in the text field, unless the user has entered a search + * query. + **/ +Tarski.Searchbox.prototype.focus = function() { + if (this._field.val() === this._text) { + this._field.val(''); + } + + return this; +}; /** - *

Replaces element el1's empty 'value' attribute with element el2's content.

- * @param {Object} replaceable - * @param {Object} replacing - */ -function replaceEmpty(replaceable, replacing) { - if ((/^\s*$/).test(replaceable.value)) { - replaceable.value = replacing.firstChild.nodeValue; + * Tarski.Searchbox#blur() -> Tarski.Searchbox + * + * Resets the text field content to the default text, unless the user has + * entered a search query. + **/ +Tarski.Searchbox.prototype.blur = function() { + var current = this._field.val(); + + if (current === '') { + this._field.val(this._text); } + + return this; }; /** - *

Search box object, allowing us to add some default text to the search - * field which will then be removed when that field is given focus. It remains - * accessible because the default text is pulled from the search field's label - * and that label is only hidden when JavaScript is enabled.

- */ -Searchbox = { + * Tarski.Searchbox.PLACEHOLDER_SUPPORTED -> Boolean + * + * Lets us know whether the HTML5 placeholder attribute for text input fields + * is supported or not. + **/ +Tarski.Searchbox.PLACEHOLDER_SUPPORTED = (function() { + var input = document.createElement('input'); + return 'placeholder' in input; +})(); + +jQuery(document).ready(function() { + var searchForm, searchField, searchLabel, searchBox; - /** - *

If the search box and associated label exist, hide the label and - * add the label's content to the search box. Then add two events to the - * search box, one which will reset the box's content when it's given focus - * and one which will add the label content back when it loses focus (as - * long as the box is empty).

- */ - init: function() { - this.sBox = document.getElementById('s'); - this.sLabel = document.getElementById('searchlabel'); - - if (this.sBox && this.sLabel) { - this.sLabel.style.display = 'none'; - - if ('placeholder' in document.createElement('input') && this.sBox.placeholder.length > 1) return; - - replaceEmpty(this.sBox, this.sLabel); - addEvent(this.sBox, 'focus', this.reset_text.bind(this)); - addEvent(this.sBox, 'blur', this.add_text.bind(this)); - } - }, + jQuery('body').addClass('js'); - /** - *

Removes the search box's default content.

- */ - reset_text: function() { - if (this.sBox.value == this.sLabel.firstChild.nodeValue) { - this.sBox.value = ''; - } - }, + searchField = jQuery('#s'); + searchLabel = jQuery('#searchlabel'); - /** - *

Adds the search box's default content back in if it's empty.

- */ - add_text: function() { - replaceEmpty(this.sBox, this.sLabel); + if (searchField.length > 0 && searchLabel.length > 0) { + searchBox = new Tarski.Searchbox(searchField, searchLabel); } -}; - -addEvent(window, 'load', function() { - var body = document.getElementsByTagName('body')[0]; - body.className += " js"; }); - -addEvent(window, 'load', Searchbox.init.bind(Searchbox)); diff --git a/app/js/tarski.js b/app/js/tarski.js index f6de220..ecc8961 100644 --- a/app/js/tarski.js +++ b/app/js/tarski.js @@ -1 +1 @@ -Function.prototype.bind=function(b){var a=this;return function(){return a.apply(b,arguments)}};function addEvent(b,a,c){if(b.addEventListener){b.addEventListener(a,c,false);EventCache.add(b,a,c)}else if(b.attachEvent){b["e"+a+c]=c;b[a+c]=function(){b["e"+a+c](window.event)};b.attachEvent("on"+a,b[a+c]);EventCache.add(b,a,c)}else{b["on"+a]=b["e"+a+c]}};var EventCache=function(){var d=[];return{listEvents:d,add:function(b,a,c){d.push(arguments)},flush:function(){var b,a;for(b=d.length-1;b>=0;b=b-1){a=d[b];if(a[0].removeEventListener){a[0].removeEventListener(a[1],a[2],a[3])};if(a[1].substring(0,2)!=="on"){a[1]="on"+a[1]};if(a[0].detachEvent){a[0].detachEvent(a[1],a[2])};a[0][a[1]]=null}}}}();addEvent(window,'unload',EventCache.flush);function replaceEmpty(b,a){if((/^\s*$/).test(b.value)){b.value=a.firstChild.nodeValue}};Searchbox={init:function(){this.sBox=document.getElementById('s');this.sLabel=document.getElementById('searchlabel');if(this.sBox&&this.sLabel){this.sLabel.style.display='none';if('placeholder'in document.createElement('input')&&this.sBox.placeholder.length>1)return;replaceEmpty(this.sBox,this.sLabel);addEvent(this.sBox,'focus',this.reset_text.bind(this));addEvent(this.sBox,'blur',this.add_text.bind(this))}},reset_text:function(){if(this.sBox.value==this.sLabel.firstChild.nodeValue){this.sBox.value=''}},add_text:function(){replaceEmpty(this.sBox,this.sLabel)}};addEvent(window,'load',function(){var b=document.getElementsByTagName('body')[0];b.className+=" js"});addEvent(window,'load',Searchbox.init.bind(Searchbox)); \ No newline at end of file +window.Tarski={};Tarski.Searchbox=function(a,c){var b=this,d;this._0=jQuery(a);this._2=jQuery(c).hide();if(this.constructor.PLACEHOLDER_SUPPORTED)return;if(d=this._0.attr('placeholder')){this._1=d}else{this._1=this._2.text()}this._0.focus(function(){b.focus()});this._0.blur(function(){b.blur()});this.blur()};Tarski.Searchbox.prototype.focus=function(){if(this._0.val()===this._1){this._0.val('')}return this};Tarski.Searchbox.prototype.blur=function(){var a=this._0.val();if(a===''){this._0.val(this._1)}return this};Tarski.Searchbox.PLACEHOLDER_SUPPORTED=(function(){var a=document.createElement('input');return'placeholder'in a})();jQuery(document).ready(function(){var a,c,b,d;jQuery('body').addClass('js');c=jQuery('#s');b=jQuery('#searchlabel');if(c.length>0&&b.length>0){d=new Tarski.Searchbox(c,b)}}); \ No newline at end of file diff --git a/changelog.txt b/changelog.txt index b407331..de00a6f 100644 --- a/changelog.txt +++ b/changelog.txt @@ -5,6 +5,8 @@ #### Tweaks * Added default navbar for sites without menus defined + * New search form placeholder fallback JavaScript + * Tarski now depends on jQuery * Use `is_multi_author` function in favour of the now-deprecated Tarski function `tarski_should_show_authors` * Deprecated `tarski_count_authors` and `tarski_resave_show_authors` diff --git a/functions.php b/functions.php index 7ac5eaf..40c20e8 100644 --- a/functions.php +++ b/functions.php @@ -174,8 +174,9 @@ add_action('admin_head', 'maybe_wipe_tarski_options'); } else { // JavaScript - wp_register_script('tarski', get_template_directory_uri() . '/app/js/tarski.js'); - wp_enqueue_script('tarski'); + wp_enqueue_script('tarski', + get_template_directory_uri() . '/app/js/tarski.js', + array('jquery'), theme_version()); wp_enqueue_script('comment-reply'); }