Fixes to the search box, adding placeholder code.

svn path=/trunk/; revision=15552

fsfeurope.xsl

@@ -55,6 +55,7 @@
         <xsl:attribute name="href">/events/events.<xsl:value-of select="/buildinfo/@language" />.rss</xsl:attribute>
         <xsl:attribute name="type">application/rss+xml</xsl:attribute>
       </xsl:element>
+      <script src="/scripts/placeholder.js"></script>
       <xsl:apply-templates select="@*|node()"/>
     </xsl:copy>
   </xsl:template>
@@ -161,6 +162,7 @@
           
           <xsl:element name="div">
             <xsl:attribute name="id">search</xsl:attribute>
+            
             <xsl:element name="h2">
               <xsl:attribute name="class">n</xsl:attribute>
               <xsl:value-of select="/buildinfo/textset/text[@id='search']" />

scripts/placeholder.js

@@ -0,0 +1,107 @@
+/**
+ * This is an implementation of the placeholder="" attribute as
+ * implemented in WebKit.
+ *
+ * Suggested styling: input[_placeholder_on] { color:GrayText; }
+ *
+ * Known issues:
+ *  - WebKit doesn't support the .placeholder DOM attribute, so this will
+ *    override its native implementation. :-(
+ *  - Placeholders are submitted to the server.
+ */
+
+if (!HTMLInputElement.prototype.__lookupGetter__("placeholder")) {
+  HTMLInputElement.prototype.__defineGetter__("placeholder", function() {
+    return this.getAttribute("placeholder");
+  });
+  HTMLInputElement.prototype.__defineSetter__("placeholder", function(value) {
+    this.setAttribute("placeholder", value);
+  });
+
+  function isTextField(elm) {
+    if (!(elm instanceof HTMLInputElement))
+      return false;
+    return (elm.type != "checkbox" && 
+            elm.type != "radio" &&
+            elm.type != "button" &&
+            elm.type != "submit" &&
+            elm.type != "reset" &&
+            elm.type != "add" &&
+            elm.type != "remove" &&
+            elm.type != "move-up" &&
+            elm.type != "move-down" &&
+            elm.type != "file" &&
+            elm.type != "hidden" &&
+            elm.type != "image" &&
+            elm.type != "datetime" &&
+            elm.type != "datetime-local" &&
+            elm.type != "date" &&
+            elm.type != "month" &&
+            elm.type != "week" &&
+            elm.type != "time" &&
+            elm.type != "range");
+  }
+  
+  function addPlaceholder(elm) {
+    elm.setAttribute("_placeholder_on", elm.type);
+    if (elm.type == "password")
+      elm.type = "text";
+    elm.value = "\uFEFF" + elm.placeholder;
+  }
+  
+  function removePlaceholder(elm) {
+    if (elm.getAttribute("_placeholder_on") == "password")
+      elm.type = "password"
+    elm.value = "";
+    elm.removeAttribute("_placeholder_on");
+  }
+
+  function submitForm(form) {
+    var elms = form.getElementsByTagName("*");
+    for (var i = 0, length = elms.length; i < length; ++i) {
+      var elm = elms[i];
+      if (elm.getAttribute("_placeholder_on")) {
+        elm.value = "";
+      }
+    }
+  }
+
+  // add placeholders on load
+  window.addEventListener("DOMContentLoaded", function() {
+    var elms = document.getElementsByTagName("*");
+    for (var i = 0, length = elms.length; i < length; ++i) {
+      var elm = elms[i];
+      if (!isTextField(elm))
+        continue;
+      if (elm.value == "" && document.activeElement != elm) {
+        addPlaceholder(elm);
+      }
+    }
+  }, false);
+
+  // remove placeholder when focused
+  document.addEventListener("focus", function(e) {
+    if (!isTextField(e.target))
+      return;
+    if (e.target.value == "\uFEFF" + e.target.placeholder) {
+      removePlaceholder(e.target);
+      e.target.focus(); // XXX remove this line when opera bug 286219 is fixed
+    }
+  }, true);
+
+  // add placeholder when blurred
+  document.addEventListener("blur", function(e) {
+    if (!isTextField(e.target))
+      return;
+    if (e.target.value == "") {
+      addPlaceholder(e.target);
+    }
+  }, true);
+
+  // remove placeholder value when submitting form
+  document.addEventListener("submit", function(e) {
+    var form = e.target;
+    submitForm(form);
+  }, true);
+}
+