diff --git a/media/css/main.css b/media/css/main.css
index dede2b90..4f4e007f 100644
--- a/media/css/main.css
+++ b/media/css/main.css
@@ -2001,10 +2001,53 @@ button.imagebutton {
position: relative;
}
+.pg-script-container pre.code {
+ padding-right: 4rem;
+ min-height: 3rem;
+ display: flex;
+ align-items: center;
+}
+
.pg-script-copy-btn {
position: absolute;
- top: 8px;
- right: 8px;
+ top: 0.5rem;
+ right: 0.5rem;
+ background: transparent;
+ border: none;
+ font-size: 1rem;
+ padding: 4px 6px;
+ cursor: pointer;
+ transition: color 0.2s;
+}
+
+.pg-script-copy-btn-root {
+ right: 2rem;
+}
+
+.pg-script-copy-btn i {
+ color: #555 !important;
+ margin: 0 !important;
+ transition: color 0.2s;
+}
+
+.pg-script-copy-btn:hover i {
+ color: #336791 !important;
+}
+
+.pg-script-copy-btn.copied i {
+ color: #28a745 !important;
+}
+
+[data-theme="dark"] .pg-script-copy-btn i {
+ color: #ccc !important;
+}
+
+[data-theme="dark"] .pg-script-copy-btn:hover i {
+ color: #fff !important;
+}
+
+[data-theme="dark"] .pg-script-copy-btn.copied i {
+ color: #7dff7d !important;
}
.nobr {
diff --git a/media/js/download.js b/media/js/download.js
index 60bc9f6e..03bb99b3 100644
--- a/media/js/download.js
+++ b/media/js/download.js
@@ -22,16 +22,31 @@ function setupHandlers() {
copyScript(this, 'script-box');
});
}
+ if (document.getElementById("copy-btn-root") && document.getElementById("script-box")) {
+ document.getElementById('copy-btn-root').addEventListener('click', function () {
+ copyScript(this, 'script-box', true);
+ });
+ }
if (document.getElementById("copy-btn2") && document.getElementById("script-box2")) {
document.getElementById('copy-btn2').addEventListener('click', function () {
copyScript(this, 'script-box2');
});
}
+ if (document.getElementById("copy-btn2-root") && document.getElementById("script-box2")) {
+ document.getElementById('copy-btn2-root').addEventListener('click', function () {
+ copyScript(this, 'script-box2', true);
+ });
+ }
if (document.getElementById("copy-btn3") && document.getElementById("script-box3")) {
document.getElementById('copy-btn3').addEventListener('click', function () {
copyScript(this, 'script-box3');
});
}
+ if (document.getElementById("copy-btn3-root") && document.getElementById("script-box3")) {
+ document.getElementById('copy-btn3-root').addEventListener('click', function () {
+ copyScript(this, 'script-box3', true);
+ });
+ }
}
document.addEventListener("DOMContentLoaded", setupHandlers);
diff --git a/media/js/main.js b/media/js/main.js
index 335efb2a..faa458d3 100644
--- a/media/js/main.js
+++ b/media/js/main.js
@@ -34,31 +34,37 @@ window.addEventListener("hashchange", shiftWindow);
/* Copy a script from an HTML element to the clipboard,
* removing comments and blank lines.
* Arguments:
- * trigger: The button calling the function, whose label will be updated
+ * trigger: The button calling the function, whose icon will be updated
* elem: The element containing the script to copy
+ * stripSudo: If true, remove 'sudo ' from the start of lines
*/
-function copyScript(trigger, elem) {
- var raw = document.getElementById(elem).innerHTML;
+function copyScript(trigger, elem, stripSudo = false) {
+ const raw = document.getElementById(elem).innerHTML;
// Create a scratch div to copy from
- var scratch = document.createElement("div");
+ const scratch = document.createElement("div");
document.body.appendChild(scratch);
// Copy the contents of the script box into the scratch div, removing
- // comments and blank lines
- var lines = raw.split("\n");
- var output = '';
- for (var l = 0; l < lines.length; l++) {
- if (lines[l][0] != '#' && lines[l].trim() != '')
- output += lines[l] + '
';
+ // comments and blank lines, and optionally stripping sudo
+ const lines = raw.split("\n");
+ let output = '';
+ for (let l = 0; l < lines.length; l++) {
+ if (lines[l][0] != '#' && lines[l].trim() != '') {
+ let line = lines[l];
+ if (stripSudo) {
+ line = line.replace(/^(\s*)sudo /, '$1');
+ }
+ output += line + '
';
+ }
}
scratch.innerHTML = output.trim();
// Perform the copy
if(document.body.createTextRange) {
// IE 11
- var range = document.body.createTextRange();
+ const range = document.body.createTextRange();
range.moveToElementText(scratch);
range.select();
document.execCommand("Copy");
@@ -66,8 +72,8 @@ function copyScript(trigger, elem) {
}
else if(window.getSelection) {
// Sane browsers
- var selection = window.getSelection();
- var range = document.createRange();
+ const selection = window.getSelection();
+ const range = document.createRange();
range.selectNodeContents(scratch);
selection.removeAllRanges();
selection.addRange(range);
@@ -79,11 +85,16 @@ function copyScript(trigger, elem) {
scratch.parentNode.removeChild(scratch);
// Indicate to the user that the script was copied
- var label = trigger.innerHTML;
- trigger.innerHTML = 'Copied!';
+ const icon = trigger.querySelector('i');
+ const originalClass = stripSudo ? 'fa-terminal' : 'fa-copy';
+ icon.classList.remove(originalClass);
+ icon.classList.add('fa-check');
+ trigger.classList.add('copied');
setTimeout(function() {
- trigger.innerHTML = label;
+ icon.classList.remove('fa-check');
+ icon.classList.add(originalClass);
+ trigger.classList.remove('copied');
}, 3000);
}
diff --git a/templates/downloads/js/yum.js b/templates/downloads/js/yum.js
index 30e7b51a..1ff54aed 100644
--- a/templates/downloads/js/yum.js
+++ b/templates/downloads/js/yum.js
@@ -151,6 +151,7 @@ function verChanged() {
if (!ver || ver === "-1") {
document.getElementById('copy-btn').style.display = 'none';
+ document.getElementById('copy-btn-root').style.display = 'none';
scriptBox.innerHTML = 'Select platform, architecture, and version above';
return;
}
@@ -184,6 +185,7 @@ function verChanged() {
}
document.getElementById('copy-btn').style.display = 'block';
+ document.getElementById('copy-btn-root').style.display = 'block';
}
/* Event handlers */
@@ -191,6 +193,9 @@ function setupHandlers() {
document.getElementById('copy-btn').addEventListener('click', function () {
copyScript(this, 'script-box');
});
+ document.getElementById('copy-btn-root').addEventListener('click', function () {
+ copyScript(this, 'script-box', true);
+ });
document.getElementById('version').addEventListener('change', verChanged);
document.getElementById('platform').addEventListener('change', platChanged);
document.getElementById('arch').addEventListener('change', archChanged);
diff --git a/templates/pages/download/linux/debian.html b/templates/pages/download/linux/debian.html
index a11e7a0f..7cf91d2a 100644
--- a/templates/pages/download/linux/debian.html
+++ b/templates/pages/download/linux/debian.html
@@ -58,7 +58,8 @@ Automated repository configuration:
sudo apt install -y postgresql-common sudo /usr/share/postgresql-common/pgdg/apt.postgresql.org.sh- + +
@@ -77,14 +78,16 @@ sudo sh -c "echo 'deb [signed-by=/usr/share/postgresql-common/pgdg/apt.postgresq # Update the package lists: sudo apt update - + + Install PostgreSQL: (replace "18" by the version you want)
sudo apt install postgresql-18- + +
diff --git a/templates/pages/download/linux/redhat.html b/templates/pages/download/linux/redhat.html index e352dccb..5a75d0c1 100644 --- a/templates/pages/download/linux/redhat.html +++ b/templates/pages/download/linux/redhat.html @@ -60,7 +60,8 @@ To use the PostgreSQL Yum Repository, follow these steps:
sudo apt install -y postgresql-common sudo /usr/share/postgresql-common/pgdg/apt.postgresql.org.sh- + +
@@ -76,14 +77,16 @@ sudo sh -c "echo 'deb [signed-by=/usr/share/postgresql-common/pgdg/apt.postgresq # Update the package lists: sudo apt update - + + Install PostgreSQL: (replace "18" by the version you want)
sudo apt install postgresql-18- + +