web: Improve UX for copyCode animation

This commit introduces a new toast animation instead
of the previous modal that would have to be manually closed.
The new toast is less intrusive to the user's workflow
and closes by itself.

Fixes issue: 48950.

Signed-off-by: Apoorva Pendse <apoorvavpendse@gmail.com>

assets/scss/_custom.scss

@@ -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) {

data/i18n/en/en.toml

@@ -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"
 
@@ -600,6 +606,9 @@ other = "See Also"
 [subscribe_button]
 other = "Subscribe"
 
+[success_copy_to_clipboard]
+other = "Success"
+
 [synopsis_heading]
 other = "Synopsis"
 
@@ -618,6 +627,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"
 
@@ -639,7 +654,8 @@ other = "Versions"
 [warning]
 other = "Warning:"
 
+[warning_copy_to_clipboard]
+other = "Warning"
+
 [whatsnext_heading]
-other = "What's next"
-
-
+other = "What's next"

layouts/partials/hooks/body-end.html

@@ -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){
+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 -}}

layouts/partials/hooks/head-end.html

@@ -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 -}}