Author: jonathan
Date: Fri Feb 29 14:46:23 2008
New Revision: 14379
Log:
MASHUP-641. Now the "for" field, when empty, displays "(anything)" with
appropriate styling, similar to the type hints in the try-it. This is an
unobtrusive way to indicate that an empty field finds ... anything.
Modified:
trunk/mashup/java/modules/www/css/styles.css
trunk/mashup/java/modules/www/js/common.js
trunk/mashup/java/modules/www/search.jsp
trunk/mashup/java/modules/www/searchbox.jsp
Modified: trunk/mashup/java/modules/www/css/styles.css
==============================================================================
--- trunk/mashup/java/modules/www/css/styles.css (original)
+++ trunk/mashup/java/modules/www/css/styles.css Fri Feb 29 14:46:23 2008
@@ -607,3 +607,11 @@
font-size: 10px;
}
+.emptyfield {
+ color:#BBB;
+ font-style:italic;
+}
+
+.nonemptyfield {
+}
+
Modified: trunk/mashup/java/modules/www/js/common.js
==============================================================================
--- trunk/mashup/java/modules/www/js/common.js (original)
+++ trunk/mashup/java/modules/www/js/common.js Fri Feb 29 14:46:23 2008
@@ -83,3 +83,65 @@
}
+/*
+ * initInput : Call upon page load to make sure the style corresponds to the
+ * presence or absence of a hint.
+ *
+ * inputId : The id of an input area to examine.
+ * hint : The hint to add if the input is empty.
+ */
+function initInput(inputId, hint) {
+ var thisInput = document.getElementById(inputId);
+ if (thisInput.className == "emptyfield") {
+ if (thisInput.value == '')
+ thisInput.value = hint;
+ else if (thisInput.value != hint)
+ thisInput.className = 'nonemptyfield';
+ }
+}
+
+/*
+ * prepareInput : A user is about to type into an empty field. Clear out
+ * the hint.
+ *
+ * e: event triggering this call.
+ */
+function prepareInput(e) {
+ var thisInput = sourceElement(e);
+ if (thisInput.className == "emptyfield") {
+ thisInput.value = "";
+ thisInput.className = "nonemptyfield";
+ }
+}
+
+/*
+ * restoreInput : A user has finished typing into an empty field. If he
+ * left it empty, restore the hint.
+ *
+ * e: event triggering this call.
+ * hint: the hint text
+ */
+function restoreInput(e, hint) {
+ var thisInput = sourceElement(e);
+ if (thisInput.value == "") {
+ thisInput.value = hint;
+ thisInput.className = "emptyfield";
+ }
+}
+
+/*
+ * sourceElement: Cross-browser function for determining the source element of
+ * an event.
+ *
+ * e: event triggering this call.
+ */
+function sourceElement(e) {
+ if (Prototype.Browser.IE) {
+ return window.event.srcElement;
+ } else {
+ var node = e.target;
+ while(node.nodeType != 1)
+ node = node.parentNode;
+ return node;
+ }
+}
Modified: trunk/mashup/java/modules/www/search.jsp
==============================================================================
--- trunk/mashup/java/modules/www/search.jsp (original)
+++ trunk/mashup/java/modules/www/search.jsp Fri Feb 29 14:46:23 2008
@@ -72,7 +72,7 @@
}
String searchFor = request.getParameter("for");
- if (searchFor == null) {
+ if (searchFor == null || searchFor.equals("(anything)")) {
searchFor = "";
} else {
// strip "%", since they are a special character in our world
@@ -554,9 +554,10 @@
/>
</td>
<td>
- <input type="text" name="for" size="50"
- value="<%= searchFor == null ? "" : searchFor %>"
- />
+ <input id="searchMashups_for" type="text" name="for" size="50"
+ value="<%= searchFor == null ? "(anything)" : searchFor %>"
+ onfocus="prepareInput(event)"
onblur="restoreInput(event,'(anything)')" class="emptyfield" />
+ <script type="text/javascript">initInput('searchMashups_for',
'(anything)');</script>
<div class="search-include">
Include:
@@ -615,9 +616,10 @@
/>
</td>
<td>
- <input type="text" name="for" value="<%= searchFor == null ? "" :
searchFor %>"
- size="50"/>
-
+ <input id="searchComments_for" type="text" name="for" size="50"
+ value="<%= searchFor == null ? "(anything)" : searchFor %>"
+ onfocus="prepareInput(event)"
onblur="restoreInput(event,'(anything)')" class="emptyfield" />
+ <script type="text/javascript">initInput('searchComments_for',
'(anything)');</script>
</td>
<td>
<input id="submit-comments" type="submit" value="Search"/>
Modified: trunk/mashup/java/modules/www/searchbox.jsp
==============================================================================
--- trunk/mashup/java/modules/www/searchbox.jsp (original)
+++ trunk/mashup/java/modules/www/searchbox.jsp Fri Feb 29 14:46:23 2008
@@ -25,7 +25,8 @@
<% } %>
</select>
<span> for </span>
- <input type="text" name="for" value=""/>
+ <input id="searchBox_for" type="text" name="for" value="(anything)"
onfocus="prepareInput(event)" onblur="restoreInput(event,'(anything)')"
class="emptyfield"/>
+ <script type="text/javascript">initInput('searchBox_for',
'(anything)');</script>
<span style="display:none">
<input type="checkbox" name="tags" value="true" checked="checked"/>
<input type="checkbox" name="titles" value="true"
checked="checked"/>
_______________________________________________
Mashup-dev mailing list
[email protected]
http://www.wso2.org/cgi-bin/mailman/listinfo/mashup-dev
