8305958: Use links instead of buttons for auto-generated header links

Reviewed-by: jjg
This commit is contained in:
Hannes Wallnöfer 2023-05-25 07:30:03 +00:00
parent bfcae68ed1
commit 3f4abff59c
9 changed files with 68 additions and 42 deletions

View File

@ -299,6 +299,8 @@ public class HtmlDoclet extends AbstractDoclet {
f.copyResource(DocPaths.RESOURCES.resolve(DocPaths.JAVASCRIPT), true, true);
f = DocFile.createFileForOutput(configuration, DocPaths.CLIPBOARD_SVG);
f.copyResource(DocPaths.RESOURCES.resolve(DocPaths.CLIPBOARD_SVG), true, true);
f = DocFile.createFileForOutput(configuration, DocPaths.LINK_SVG);
f.copyResource(DocPaths.RESOURCES.resolve(DocPaths.LINK_SVG), true, true);
if (options.createIndex()) {
f = DocFile.createFileForOutput(configuration, DocPaths.SEARCH_JS);
f.copyResource(DOCLET_RESOURCES.resolve(DocPaths.SEARCH_JS_TEMPLATE), configuration.docResources);

View File

@ -31,9 +31,8 @@ const messages = {
loading: "##REPLACE:doclet.search.loading##",
searching: "##REPLACE:doclet.search.searching##",
redirecting: "##REPLACE:doclet.search.redirecting##",
copyToClipboard: "##REPLACE:doclet.Copy_to_clipboard##",
copyUrlToClipboard: "##REPLACE:doclet.Copy_url_to_clipboard##",
copiedToClipboard: "##REPLACE:doclet.Copied_to_clipboard##"
linkIcon: "##REPLACE:doclet.Link_icon##",
linkToSection: "##REPLACE:doclet.Link_to_section##"
}
const categories = {
modules: "##REPLACE:doclet.search.modules##",
@ -409,14 +408,13 @@ $(function() {
$("input#search-input").focus(collapse);
$("main").click(collapse);
$("section[id] > :header, :header[id], :header:has(a[id])").each(function(idx, el) {
// Create copy-to-clipboard buttons for headers with an associated id attribute
// Create anchor links for headers with an associated id attribute
var hdr = $(el);
var id = hdr.attr("id") || hdr.parent("section").attr("id") || hdr.children("a").attr("id");
if (id) {
hdr.append($("<button class='copy copy-header' onclick='copyUrl(this)' aria-label='"
+ messages.copyUrlToClipboard +"'> " + "<img src='" + pathtoroot + "copy.svg' alt='" +
messages.copyUrlToClipboard + "'> " + "<span data-copied='" + messages.copiedToClipboard +
"'>" + messages.copyToClipboard + "</span></button>"));
hdr.append(" <a href='#" + id + "' class='anchor-link' aria-label='" + messages.linkToSection
+ "'><img src='" + pathtoroot + "link.svg' alt='" + messages.linkIcon +"' tabindex='0'"
+ " width='16' height='16'></a>");
}
});
$(window).on("orientationchange", collapse).on("resize", function(e) {

View File

@ -1,5 +1,5 @@
#
# Copyright (c) 2010, 2022, Oracle and/or its affiliates. All rights reserved.
# Copyright (c) 2010, 2023, 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
@ -73,6 +73,8 @@ doclet.JavaScript_in_comment=JavaScript found in documentation comment.\n\
Use --allow-script-in-comments to allow use of JavaScript.
doclet.JavaScript_in_option=option {0} contains JavaScript.\n\
Use --allow-script-in-comments to allow use of JavaScript.
doclet.Link_icon=Link icon
doclet.Link_to_section=Link to this section
doclet.Packages=Packages
doclet.All_Packages=All Packages
doclet.Modules=Modules

View File

@ -0,0 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright (c) 2023, 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
under the terms of the GNU General Public License version 2 only, as
published by the Free Software Foundation. Oracle designates this
particular file as subject to the "Classpath" exception as provided
by Oracle in the LICENSE file that accompanied this code.
This code is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
version 2 for more details (a copy is included in the LICENSE file that
accompanied this code).
You should have received a copy of the GNU General Public License version
2 along with this work; if not, write to the Free Software Foundation,
Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
or visit www.oracle.com if you need additional information or have any
questions.
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="#505050">
<path d="M32 239.3c18.2 16.7 57.1 15.4 74.5-1.7l30.9-32c8.3-8.8 4.8-15.1.7-19.9-4.7-3-12-8.1-20.4.5l-29.4 29.6a29.4 29.4 0 0 1-39.4.9l-8-7c-8.8-9.4-11-28.3-.8-38.8l49.8-51.3c7.2-6.6 21.3-10 36.1-2.4 6.9 5.4 15.6 15.7 26 6.2 9.9-11.2 2.9-20.4-10-29.3-18.7-12.6-52-14.8-70.4 3.8L17 154.2c-20 20.2-11.3 58 1.7 71.5a69 69 0 0 0 13.2 13.6z"/>
<path d="M223.2 17.5c-18.4-16.6-57.3-15.3-74.6 2l-30.8 31.9c-8.3 9-4.8 15.2-.7 20 4.8 3 12.1 8 20.5-.6 4.8-5 29.3-29.6 29.3-29.6a29.4 29.4 0 0 1 39.4-1l8 6.8c8.8 9.5 11 28.3.9 38.9l-49.6 51.4c-7.2 6.7-21.3 10.1-36.1 2.6-7-5.4-15.7-15.7-26.1-6.2-9.8 11.2-2.8 20.4 10.2 29.3 18.7 12.5 52 14.7 70.3-4l54.4-56.5c20-20.3 11.2-58-1.9-71.5a69 69 0 0 0-13.2-13.5Z"/>
</svg>

View File

@ -204,25 +204,6 @@ function copySnippet(button) {
copyToClipboard(button.nextElementSibling.innerText);
switchCopyLabel(button, button.firstElementChild);
}
// Copy the link to the adjacent header to the clipboard
function copyUrl(button) {
var id;
var header = button.parentElement;
if (header.hasAttribute("id")) {
id = header.getAttribute("id");
} else if (header.parentElement.tagName === 'SECTION' && header.parentElement.hasAttribute("id")) {
id = header.parentElement.getAttribute("id");
} else if (header.firstElementChild && header.firstElementChild.tagName === "A"
&& header.firstElementChild.hasAttribute("id")) {
id = header.firstElementChild.getAttribute("id");
}
var url = document.location.href;
if (url.indexOf("#") > -1) {
url = url.substring(0, url.indexOf("#"));
}
copyToClipboard(url + "#" + id);
switchCopyLabel(button, button.lastElementChild);
}
function copyToClipboard(content) {
var textarea = document.createElement("textarea");
textarea.style.height = 0;

View File

@ -911,6 +911,25 @@ main a[href*="://"]:focus::after {
132-240 240 120 120 240-240 132 132V0z" fill="%23bb7a2a"/>\
</svg>');
}
/*
* Styles for header/section anchor links
*/
a.anchor-link {
opacity: 0;
transition: opacity 0.1s;
}
:hover > a.anchor-link {
opacity: 80%;
}
a.anchor-link:hover,
a.anchor-link:focus-visible,
a.anchor-link.visible {
opacity: 100%;
}
a.anchor-link > img {
width: 0.9em;
height: 0.9em;
}
/*
* Styles for copy-to-clipboard buttons
*/
@ -954,17 +973,6 @@ button.copy:focus-visible span,
button.copy.visible span {
opacity: 100%;
}
/* header/section copy button */
button.copy-header {
margin: 0 0.2em;
padding: 0 4px;
height: 1.16em;
opacity: 0;
}
button.copy-header img {
height: 0.88em;
top: 0.1em;
}
/* search page copy button */
button#page-search-copy {
margin-left: 0.4em;

View File

@ -1,5 +1,5 @@
/*
* Copyright (c) 1998, 2022, Oracle and/or its affiliates. All rights reserved.
* Copyright (c) 1998, 2023, 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
@ -97,6 +97,9 @@ public class DocPaths {
/** The name of the copy-to-clipboard icon file. */
public static final DocPath CLIPBOARD_SVG = DocPath.create("copy.svg");
/** The name of the link icon file. */
public static final DocPath LINK_SVG = DocPath.create("link.svg");
/** The name of the default jQuery javascript file. */
public static final DocPath JQUERY_JS = DocPath.create("jquery-3.6.1.min.js");

View File

@ -135,7 +135,7 @@ public class CheckStylesheetClasses {
removeAll(styleSheetNames, "borderless", "plain", "striped");
// used in search.js and search-page.js; may be worth documenting in HtmlStyle
removeAll(styleSheetNames, "result-highlight", "result-item", "copy-header",
removeAll(styleSheetNames, "result-highlight", "result-item", "anchor-link",
"search-tag-desc-result", "search-tag-holder-result", "page-search-header",
"ui-autocomplete", "ui-autocomplete-category", "ui-state-active", "expanded",
"search-result-link", "two-column-search-results", "ui-static-link",

View File

@ -1,5 +1,5 @@
/*
* Copyright (c) 2012, 2021, Oracle and/or its affiliates. All rights reserved.
* Copyright (c) 2012, 2023, 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
@ -201,6 +201,7 @@ class APITest {
"help-doc.html",
"index-all.html",
"index.html",
"link.svg",
"script-dir/jquery-3.6.1.min.js",
"script-dir/jquery-ui.min.js",
"script-dir/jquery-ui.min.css",