Merge pull request #48958 from apoorvapendse/main

web: Improve UX for copyCode animation
pull/48258/head
Kubernetes Prow Robot 2025-01-13 02:38:32 -08:00 committed by GitHub
commit e628bdf427
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 71 additions and 14 deletions

File diff suppressed because one or more lines are too long

2
assets/js/toastr-2.1.4.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -1947,7 +1947,9 @@ body.td-search #search {
.code-sample > .copy-code-icon {
cursor: pointer;
text-align: right;
display: flex;
gap:1rem;
justify-content: right;
padding: 0.2rem;
}
@ -1955,6 +1957,14 @@ body.td-search #search {
margin-top: 0;
margin-bottom: 0;
}
#toast-container > *{
background: $primary;
}
.toast-success {
background-color: $primary !important;
color: #ffffff !important;
}
// handle main page features on narrow viewports
@media screen and (max-width: 768px) {

View File

@ -18,6 +18,9 @@ other = "Show More Posts..."
[banner_acknowledgement]
other = "Hide this notice"
[browser_clipboard_support_warning]
other = "Sorry, your browser doesn't support copying this example to your clipboard."
[case_study_prefix]
other = "Case study:"
@ -158,6 +161,9 @@ other = "Environment variables"
[error_404_were_you_looking_for]
other = "Were you looking for:"
[error_copy_to_clipboard]
other = "Error"
[examples_heading]
other = "Examples"
@ -603,6 +609,9 @@ other = "Toggle section navigation"
[subscribe_button]
other = "Subscribe"
[success_copy_to_clipboard]
other = "Success"
[synopsis_heading]
other = "Synopsis"
@ -621,6 +630,12 @@ other = """<p>Items on this page refer to third party products or projects that
[thirdparty_message_vendor]
other = """Items on this page refer to vendors external to Kubernetes. The Kubernetes project authors aren't responsible for those third-party products or projects. To add a vendor, product or project to this list, read the <a href="/docs/contribute/style/content-guide/#third-party-content">content guide</a> before submitting a change. <a href="#third-party-content-disclaimer">More information.</a>"""
[toast_failure_copycode]
other="Failed to copy to clipboard: "
[toast_success_copycode]
other = "Copied to clipboard: "
[translated_by]
other = "Translated By"
@ -642,7 +657,8 @@ other = "Versions"
[warning]
other = "Warning:"
[warning_copy_to_clipboard]
other = "Warning"
[whatsnext_heading]
other = "What's next"

View File

@ -6,29 +6,54 @@
{{ end }}
{{/* copy-and-paste helper for codenew shortcode */}}
{{- if or (.HasShortcode "code_sample") (.HasShortcode "code") (.HasShortcode "codenew") -}}
{{- $toastrJs := resources.Get "js/toastr-2.1.4.min.js" | minify | fingerprint -}}
{{- if hugo.IsProduction -}}
{{- $sweetAlert := resources.Get "js/sweetalert-2.1.2.min.js" | minify | fingerprint -}}
<script async src="{{ $sweetAlert.RelPermalink }}" integrity="{{ $sweetAlert.Data.Integrity }}" crossorigin="anonymous"></script>
<script async src="{{ $toastrJs.RelPermalink }}"></script>
{{- else -}}
{{- $sweetAlert := resources.Get "js/sweetalert-2.1.2.min.js" -}}
<script async src="{{ $sweetAlert.RelPermalink }}"></script>
<script async src="{{ $toastrJs.RelPermalink }}"></script>
{{- end -}}
<script type="text/javascript">
function copyCode(elem) {
if (document.getElementById(elem)) {
if (navigator.clipboard) {
navigator.clipboard.writeText(document.getElementById(elem).textContent).then(
function () {
swal("Copied to clipboard: ",elem);
toastr.options = {
closeButton: true,
progressBar: true,
positionClass: "toast-bottom-center",
timeOut: 2000,
preventDuplicates: true,
newestOnTop: true
};
toastr.success("{{i18n "toast_success_copycode"}}" + elem, "{{i18n "success_copy_to_clipboard"}}");
},
function () {
swal("Oh, no…","Failed to copy to clipboard: ",elem);
},
toastr.options = {
closeButton: true,
progressBar: true,
positionClass: "toast-bottom-center",
timeOut: 2000,
preventDuplicates: true,
newestOnTop: true
};
toastr.error("{{i18n "toast_failure_copycode"}}" + elem, "{{i18n "error_copy_to_clipboard"}}");
}
);
} else {
swal("Oh, no…","Sorry, your browser doesn't support copying this example to your clipboard.");
toastr.options = {
closeButton: true,
progressBar: true,
positionClass: "toast-bottom-center",
timeOut: 2000,
preventDuplicates: true,
newestOnTop: true
};
toastr.warning("{{i18n "browser_clipboard_support_warning"}}", "{{i18n "warning_copy_to_clipboard"}}");
}
}
}
</script>
{{- end -}}

View File

@ -61,3 +61,7 @@
{{- $bannerDismissJs := resources.Get "js/banner-dismiss.js" -}}
<script defer src="{{ $bannerDismissJs.RelPermalink }}"></script>
{{- end -}}
{{- if or (.HasShortcode "code_sample") (.HasShortcode "code") (.HasShortcode "codenew") -}}
<link rel="stylesheet" href="/css/toastr-2.1.4.min.css">
{{- end -}}

1
static/css/toastr-2.1.4.min.css vendored Normal file

File diff suppressed because one or more lines are too long