New, jQuery-powered search form placeholder fallback.

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;
+};
 
 /**
- * <p>Replaces element el1's empty 'value' attribute with element el2's content.</p>
- * @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;
 };
 
 /**
- * <p>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.</p>
- */
-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;
 
-    /**
-     * <p>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).</p>
-     */
-    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');
 
-    /**
-     * <p>Removes the search box's default content.</p>
-     */
-    reset_text: function() {
-        if (this.sBox.value == this.sLabel.firstChild.nodeValue) {
-            this.sBox.value = '';
-        }
-    },
+    searchField = jQuery('#s');
+    searchLabel = jQuery('#searchlabel');
 
-    /**
-     * <p>Adds the search box's default content back in if it's empty.</p>
-     */
-    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));

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`

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');
 }