8274625: Search field placeholder behavior
Reviewed-by: prappo
This commit is contained in:
parent
df125f680b
commit
cdf89304ea
@ -76,6 +76,7 @@ public class Navigation {
|
||||
private Content userHeader;
|
||||
private final String rowListTitle;
|
||||
private final Content searchLabel;
|
||||
private final String searchPlaceholder;
|
||||
private SubNavLinks subNavLinks;
|
||||
|
||||
public enum PageMode {
|
||||
@ -131,6 +132,7 @@ public class Navigation {
|
||||
this.links = new Links(path);
|
||||
this.rowListTitle = configuration.getDocResources().getText("doclet.Navigation");
|
||||
this.searchLabel = contents.getContent("doclet.search");
|
||||
this.searchPlaceholder = configuration.getDocResources().getText("doclet.search_placeholder");
|
||||
}
|
||||
|
||||
public Navigation setNavLinkModule(Content navLinkModule) {
|
||||
@ -595,10 +597,11 @@ public class Navigation {
|
||||
}
|
||||
|
||||
private void addSearch(Content tree) {
|
||||
String search = "search";
|
||||
String reset = "reset";
|
||||
HtmlTree inputText = HtmlTree.INPUT("text", HtmlIds.SEARCH_INPUT, search);
|
||||
HtmlTree inputReset = HtmlTree.INPUT(reset, HtmlIds.RESET_BUTTON, reset);
|
||||
HtmlTree inputText = HtmlTree.INPUT("text", HtmlIds.SEARCH_INPUT)
|
||||
.put(HtmlAttr.PLACEHOLDER, searchPlaceholder);
|
||||
HtmlTree inputReset = HtmlTree.INPUT(reset, HtmlIds.RESET_BUTTON)
|
||||
.put(HtmlAttr.VALUE, reset);
|
||||
HtmlTree searchDiv = HtmlTree.DIV(HtmlStyle.navListSearch,
|
||||
HtmlTree.LABEL(HtmlIds.SEARCH_INPUT.name(), searchLabel));
|
||||
searchDiv.add(inputText);
|
||||
|
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Copyright (c) 2010, 2019, Oracle and/or its affiliates. All rights reserved.
|
||||
* Copyright (c) 2010, 2021, Oracle and/or its affiliates. All rights reserved.
|
||||
* DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
|
||||
*
|
||||
* This code is free software; you can redistribute it and/or modify it
|
||||
@ -57,6 +57,7 @@ public enum HtmlAttr {
|
||||
ONCLICK,
|
||||
ONKEYDOWN,
|
||||
ONLOAD,
|
||||
PLACEHOLDER,
|
||||
REL,
|
||||
ROLE,
|
||||
ROWS,
|
||||
|
@ -520,20 +520,18 @@ public class HtmlTree extends Content {
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates an HTML {@code INPUT} element with the given id and initial value.
|
||||
* Creates an HTML {@code INPUT} element with the given id.
|
||||
* The element as marked as initially disabled.
|
||||
*
|
||||
* @param type the type of input
|
||||
* @param id the id
|
||||
* @param value the initial value
|
||||
* @return the element
|
||||
*/
|
||||
public static HtmlTree INPUT(String type, HtmlId id, String value) {
|
||||
public static HtmlTree INPUT(String type, HtmlId id) {
|
||||
return new HtmlTree(TagName.INPUT)
|
||||
.put(HtmlAttr.TYPE, type)
|
||||
.setId(id)
|
||||
.put(HtmlAttr.VALUE, value)
|
||||
.put(HtmlAttr.DISABLED, "disabled");
|
||||
.put(HtmlAttr.DISABLED, "");
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Copyright (c) 2015, 2020, Oracle and/or its affiliates. All rights reserved.
|
||||
* Copyright (c) 2015, 2021, Oracle and/or its affiliates. All rights reserved.
|
||||
* DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
|
||||
*
|
||||
* This code is free software; you can redistribute it and/or modify it
|
||||
@ -96,28 +96,16 @@ function createMatcher(pattern, flags) {
|
||||
var isCamelCase = /[A-Z]/.test(pattern);
|
||||
return new RegExp(pattern, flags + (isCamelCase ? "" : "i"));
|
||||
}
|
||||
var watermark = 'Search';
|
||||
$(function() {
|
||||
var search = $("#search-input");
|
||||
var reset = $("#reset-button");
|
||||
search.val('');
|
||||
search.prop("disabled", false);
|
||||
reset.prop("disabled", false);
|
||||
search.val(watermark).addClass('watermark');
|
||||
search.blur(function() {
|
||||
if ($(this).val().length === 0) {
|
||||
$(this).val(watermark).addClass('watermark');
|
||||
}
|
||||
});
|
||||
search.on('click keydown paste', function() {
|
||||
if ($(this).val() === watermark) {
|
||||
$(this).val('').removeClass('watermark');
|
||||
}
|
||||
});
|
||||
reset.click(function() {
|
||||
search.val('').focus();
|
||||
});
|
||||
search.focus()[0].setSelectionRange(0, 0);
|
||||
search.focus();
|
||||
});
|
||||
$.widget("custom.catcomplete", $.ui.autocomplete, {
|
||||
_create: function() {
|
||||
|
@ -223,6 +223,7 @@ doclet.Type=Type
|
||||
doclet.Modifier_and_Type=Modifier and Type
|
||||
doclet.Implementation=Implementation(s):
|
||||
doclet.search=SEARCH:
|
||||
doclet.search_placeholder=Search
|
||||
doclet.Field=Field
|
||||
doclet.Property=Property
|
||||
doclet.Constructor=Constructor
|
||||
|
@ -617,8 +617,9 @@ ul.ui-autocomplete li {
|
||||
top:10px;
|
||||
font-size:0;
|
||||
}
|
||||
.watermark {
|
||||
color:#545454;
|
||||
::placeholder {
|
||||
color:#909090;
|
||||
opacity: 1;
|
||||
}
|
||||
.search-tag-desc-result {
|
||||
font-style:italic;
|
||||
|
@ -137,8 +137,7 @@ public class CheckStylesheetClasses {
|
||||
// used in search.js; may be worth documenting in HtmlStyle
|
||||
removeAll(styleSheetNames, "result-highlight", "result-item",
|
||||
"search-tag-desc-result", "search-tag-holder-result",
|
||||
"ui-autocomplete", "ui-autocomplete-category",
|
||||
"watermark", "expanded");
|
||||
"ui-autocomplete", "ui-autocomplete-category", "expanded");
|
||||
|
||||
// snippet-related
|
||||
removeAll(styleSheetNames, "bold", "highlighted", "italic");
|
||||
|
@ -421,8 +421,8 @@ public class TestSearch extends JavadocTester {
|
||||
"<div class=\"nav-list-search\">",
|
||||
"""
|
||||
<label for="search-input">SEARCH:</label>
|
||||
<input type="text" id="search-input" value="search" disabled="disabled">
|
||||
<input type="reset" id="reset-button" value="reset" disabled="disabled">
|
||||
<input type="text" id="search-input" disabled placeholder="Search">
|
||||
<input type="reset" id="reset-button" disabled value="reset">
|
||||
""");
|
||||
checkOutput(fileName, true,
|
||||
"<div class=\"flex-box\">");
|
||||
@ -710,12 +710,6 @@ public class TestSearch extends JavadocTester {
|
||||
|
||||
checkOutput("search.js", true,
|
||||
"function searchIndexWithMatcher(indexArray, matcher, category, nameFunc) {",
|
||||
"""
|
||||
search.on('click keydown paste', function() {
|
||||
if ($(this).val() === watermark) {
|
||||
$(this).val('').removeClass('watermark');
|
||||
}
|
||||
});""",
|
||||
"""
|
||||
function getURLPrefix(ui) {
|
||||
var urlPrefix="";
|
||||
|
@ -191,8 +191,9 @@ public class TestStylesheet extends JavadocTester {
|
||||
font-size:0;
|
||||
}""",
|
||||
"""
|
||||
.watermark {
|
||||
color:#545454;
|
||||
::placeholder {
|
||||
color:#909090;
|
||||
opacity: 1;
|
||||
}""");
|
||||
|
||||
checkOutput("pkg/A.html", true,
|
||||
|
Loading…
Reference in New Issue
Block a user