Add copy functionality for SHA256 checksum and optimize display

Author: sy-records

include/layout.inc

@@ -504,6 +504,18 @@ function site_footer(array $config = []): void
     require __DIR__ . "/footer.inc";
 }
 
+function checksum_html(string $checksum, string $algorithm = 'sha256'): string
+{
+    $checksum = htmlspecialchars($checksum, ENT_QUOTES, 'UTF-8');
+    $algorithm = htmlspecialchars($algorithm, ENT_QUOTES, 'UTF-8');
+
+    if ($algorithm !== 'sha256') {
+        return '<span class="' . $algorithm . 'sum">' . $checksum . '</span>';
+    }
+
+    return '<span class="sha256-row"><span class="sha256">' . $checksum . '</span><button type="button" class="sha256-copy" data-copy-text="' . $checksum . '" aria-label="Copy sha256 checksum">Copy</button></span>';
+}
+
 function get_nav_items(): array {
   return [
     new NavItem(

include/version.inc

@@ -143,10 +143,7 @@ function show_source_releases()
                         echo '<span class="md5sum">', $rel['md5'], '</span>';
                     }
                     if (isset($rel['sha256'])) {
-                        echo '<span class="sha256-row">';
-                        echo '<span class="sha256">', $rel['sha256'], '</span>';
-                        echo '<button type="button" class="sha256-copy" data-copy-text="', $rel['sha256'], '" aria-label="Copy sha256 checksum">Copy</button>';
-                        echo '</span>';
+                        echo checksum_html($rel['sha256']);
                     }
                    ?>
                   <?php if (isset($rel['note']) && $rel['note']): ?>
@@ -168,20 +165,5 @@ function show_source_releases()
           </div>
         <?php endforeach; ?>
     <?php endforeach; /* major releases loop end */ ?>
-    <script>
-      document.addEventListener('click', function (event) {
-        var button = event.target.closest('.sha256-copy');
-        if (!button || !navigator.clipboard) {
-            return console.error('Clipboard API not available');
-        }
-
-        navigator.clipboard.writeText(button.dataset.copyText).then(function () {
-          button.textContent = 'Copied';
-          setTimeout(function () {
-            button.textContent = 'Copy';
-          }, 3000);
-        });
-      });
-    </script>
 <?php
 }

js/common.js

@@ -879,3 +879,18 @@ function applyTheme(theme) {
 }
 
 applyTheme(savedTheme)
+
+const downloads = document.querySelector('.downloads');
+downloads?.addEventListener('click', function (event) {
+  var button = event.target.closest('.sha256-copy');
+  if (!button || !navigator.clipboard) {
+    return;
+  }
+
+  navigator.clipboard.writeText(button.dataset.copyText).then(function () {
+    button.textContent = 'Copied';
+    setTimeout(function () {
+      button.textContent = 'Copy';
+    }, 1500);
+  });
+});

pre-release-builds.php

@@ -97,9 +97,8 @@
           <a href="<?php echo $file_info['path'] ?>"><?php echo "php-{$info['version']}.tar.{$file_type}"; ?></a>
           <span class="releasedate"><?php echo date('d M Y', strtotime($info['date'])); ?></span>
             <?php foreach ($QA_CHECKSUM_TYPES as $algo): ?>
-              <span class="<?php echo $algo; ?>">
               <?php if (isset($file_info[$algo]) && strlen($file_info[$algo])) : ?>
-                <?php echo $file_info[$algo]; ?>
+                <?php echo checksum_html($file_info[$algo], $algo); ?>
               <?php else: ?>
                 <em><small>No checksum value available</small></em>)&nbsp;
               <?php endif; ?>
@@ -189,7 +188,7 @@
       }
 
       if ($includeSha && $sha !== '') {
-        $parts[] = '<span class="sha256">' . htmlspecialchars($sha, ENT_QUOTES, 'UTF-8') . '</span>';
+        $parts[] = checksum_html($sha);
       }
 
       return '<li>' . implode(' ', $parts) . '</li>';
@@ -311,4 +310,3 @@
 
 <?php
 site_footer(['sidebar' => $SIDEBAR_DATA]);
-

releases/index.php

@@ -222,8 +222,7 @@ function mk_rel(int $major,
                 $linebreak = '';
                 foreach (['md5', 'sha256'] as $cs) {
                     if (isset($src[$cs])) {
-                        echo $linebreak;
-                        echo "<span class=\"{$cs}sum\">{$cs}: {$src[$cs]}</span>\n";
+                        echo $linebreak, checksum_html($src[$cs], $cs), "\n";
                         $linebreak = "<br/>";
                     }
                 }

styles/theme-base.css

@@ -789,23 +789,28 @@ fieldset {
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.content-box .md5sum:before {
+.content-box .md5sum:before,
+.downloads .md5sum:before {
     content: "md5: ";
     font-family: var(--font-family-sans-serif);
 }
-.content-box .sha256:before {
+.content-box .sha256:before,
+.downloads .sha256:before {
     content: "sha256: ";
     font-family: var(--font-family-sans-serif);
 }
-.content-box .sha256-row {
+.content-box .sha256-row,
+.downloads .sha256-row {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }
-.content-box .sha256-row .sha256 {
+.content-box .sha256-row .sha256,
+.downloads .sha256-row .sha256 {
     min-width: 0;
 }
-.content-box .sha256-copy {
+.content-box .sha256-copy,
+.downloads .sha256-copy {
     border: 1px solid var(--dark-blue-color);
     border-radius: 30px;
     background-color: var(--dark-blue-color);
@@ -819,7 +824,9 @@ fieldset {
     white-space: nowrap;
 }
 .content-box .sha256-copy:hover,
-.content-box .sha256-copy:focus {
+.content-box .sha256-copy:focus,
+.downloads .sha256-copy:hover,
+.downloads .sha256-copy:focus {
     border-color: var(--dark-magenta-color);
     background-color: var(--dark-magenta-color);
 }