From c795052302064d118cfdf96c87664b6c7ebcb0e7 Mon Sep 17 00:00:00 2001
From: Avani Bhatt <avbhatt@redhat.com>
Date: Mon, 23 Jun 2025 21:05:03 +0100
Subject: [PATCH] Testing Edit this page along with  select and report feature

---
 .hintrc                                       |  20 +++
 layouts/_default/baseof.html                  |   3 +-
 .../partials/select-report-issue-hover.html   |  54 ++++++++
 .../partials/select-report-issue-popup.html   |  54 ++++++++
 layouts/partials/toc.html                     |  16 ++-
 static/js/select-report-issue-hover.js        | 125 ++++++++++++++++++
 static/js/select-report-issue-popup.js        | 112 ++++++++++++++++
 7 files changed, 380 insertions(+), 4 deletions(-)
 create mode 100644 .hintrc
 create mode 100644 layouts/partials/select-report-issue-hover.html
 create mode 100644 layouts/partials/select-report-issue-popup.html
 create mode 100644 static/js/select-report-issue-hover.js
 create mode 100644 static/js/select-report-issue-popup.js
diff --git a/.hintrc b/.hintrc
new file mode 100644
index 000000000..e30e55803
--- /dev/null
+++ b/.hintrc
@@ -0,0 +1,20 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "meta-viewport": "off",
+    "axe/text-alternatives": [
+      "default",
+      {
+        "document-title": "off"
+      }
+    ],
+    "axe/language": [
+      "default",
+      {
+        "html-has-lang": "off"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6e828cd91..4264f4184 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
     {{- partial "head.html" . -}}
-    <body>
+    <body{{ with .File }} data-github-file="{{ .Path }}"{{ end }}>
         <div class="pf-c-page">
         {{- partial "header.html" . -}}
         {{- block "main" . }}
@@ -9,6 +9,7 @@
         {{- end }}
         </div>
         <script src="{{ "js/codeblock.js"  | relURL }}"></script>
+        <script src="{{ "js/select-report-issue-popup.js"  | relURL }}"></script>
     </body>
     <!-- Uncomment when you have sorted out the feedback partials option
         <body>
diff --git a/layouts/partials/select-report-issue-hover.html b/layouts/partials/select-report-issue-hover.html
new file mode 100644
index 000000000..c4281b695
--- /dev/null
+++ b/layouts/partials/select-report-issue-hover.html
@@ -0,0 +1,54 @@
+// static/js/bug-reporter.js (or wherever you prefer to store static assets)
+
+document.addEventListener('mouseup', function() {
+    const selectedText = window.getSelection().toString().trim();
+
+    if (selectedText.length > 0) {
+        // You might want to add a small button or popup here instead of direct confirmation
+        // For simplicity, we'll keep the confirmation for now.
+
+        const currentPageUrl = window.location.href;
+        const githubFilePath = getGitHubFilePath(); // This will now be more accurate for Hugo
+
+        const issueTitle = `Bug Report: Issue on "${selectedText.substring(0, 50).replace(/\n/g, ' ')}..."`;
+        let issueBody = `
+**Description of the issue:**
+\`\`\`
+${selectedText}
+\`\`\`
+
+---
+**Context:**
+- **Page URL:** ${currentPageUrl}
+- **GitHub Source File:** ${githubFilePath}
+        `;
+
+        const encodedTitle = encodeURIComponent(issueTitle);
+        const encodedBody = encodeURIComponent(issueBody);
+
+        const githubRepo = 'validatedpatterns/docs'; // Your GitHub repository
+        const githubIssueUrl = `https://github.com/${githubRepo}/issues/new?title=${encodedTitle}&body=${encodedBody}`;
+
+        const confirmation = confirm("Do you want to report this as a bug on GitHub for the selected text?");
+        if (confirmation) {
+            window.open(githubIssueUrl, '_blank');
+        }
+    }
+});
+
+
+// Hugo-specific function to get the GitHub file path
+function getGitHubFilePath() {
+    // This assumes you've added a data-github-file attribute to your body or a container.
+    const bodyElement = document.querySelector('body');
+    if (bodyElement && bodyElement.dataset.githubFile) {
+        // Construct the full GitHub blob URL
+        // Assuming your source files are in the 'content' directory of your repo
+        // And you're using the 'main' branch
+        const repoBaseUrl = 'https://github.com/validatedpatterns/docs/blob/main/';
+        return repoBaseUrl + bodyElement.dataset.githubFile;
+    }
+
+    // Fallback if the data attribute isn't found (shouldn't happen with Hugo setup)
+    return "Could not determine source file automatically. Please specify if known.";
+}
\ No newline at end of file
diff --git a/layouts/partials/select-report-issue-popup.html b/layouts/partials/select-report-issue-popup.html
new file mode 100644
index 000000000..c4281b695
--- /dev/null
+++ b/layouts/partials/select-report-issue-popup.html
@@ -0,0 +1,54 @@
+// static/js/bug-reporter.js (or wherever you prefer to store static assets)
+
+document.addEventListener('mouseup', function() {
+    const selectedText = window.getSelection().toString().trim();
+
+    if (selectedText.length > 0) {
+        // You might want to add a small button or popup here instead of direct confirmation
+        // For simplicity, we'll keep the confirmation for now.
+
+        const currentPageUrl = window.location.href;
+        const githubFilePath = getGitHubFilePath(); // This will now be more accurate for Hugo
+
+        const issueTitle = `Bug Report: Issue on "${selectedText.substring(0, 50).replace(/\n/g, ' ')}..."`;
+        let issueBody = `
+**Description of the issue:**
+\`\`\`
+${selectedText}
+\`\`\`
+
+---
+**Context:**
+- **Page URL:** ${currentPageUrl}
+- **GitHub Source File:** ${githubFilePath}
+        `;
+
+        const encodedTitle = encodeURIComponent(issueTitle);
+        const encodedBody = encodeURIComponent(issueBody);
+
+        const githubRepo = 'validatedpatterns/docs'; // Your GitHub repository
+        const githubIssueUrl = `https://github.com/${githubRepo}/issues/new?title=${encodedTitle}&body=${encodedBody}`;
+
+        const confirmation = confirm("Do you want to report this as a bug on GitHub for the selected text?");
+        if (confirmation) {
+            window.open(githubIssueUrl, '_blank');
+        }
+    }
+});
+
+
+// Hugo-specific function to get the GitHub file path
+function getGitHubFilePath() {
+    // This assumes you've added a data-github-file attribute to your body or a container.
+    const bodyElement = document.querySelector('body');
+    if (bodyElement && bodyElement.dataset.githubFile) {
+        // Construct the full GitHub blob URL
+        // Assuming your source files are in the 'content' directory of your repo
+        // And you're using the 'main' branch
+        const repoBaseUrl = 'https://github.com/validatedpatterns/docs/blob/main/';
+        return repoBaseUrl + bodyElement.dataset.githubFile;
+    }
+
+    // Fallback if the data attribute isn't found (shouldn't happen with Hugo setup)
+    return "Could not determine source file automatically. Please specify if known.";
+}
\ No newline at end of file
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
index 7282b2036..385bd3eb5 100644
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@@ -1,9 +1,19 @@
 <aside class="pf-c-jump-links pf-m-vertical sticky pf-m-expandable pf-m-non-expandable-on-2xl" aria-label="Table of contents">
   <div class="pf-l-stack pf-m-gutter">
     <div class="pf-l-stack__item pf-u-text-align-right">
-      <a href="https://github.com/validatedpatterns/docs/commits/main/content/{{ .File.Path  }}"><span class="pf-c-icon pf-m-md" title="View page history"><span class="pf-c-icon__content"><i class="fa-solid fa-clock-rotate-left"></i></span></span></a>
-      <a href="https://issues.redhat.com/secure/CreateIssueDetails!init.jspa?pid=12325623&summary={{ .Title }}: %3C+Provide+a+brief+description+of+the+issue+%3E&issuetype=1&priority=10200&components=12365975&priority=10200&components=12365975&description=Link+to+page:+{{ .Permalink }}+%0A+%0A+%3C+Provide+a+detailed+description+of+the+issue+with+link+to+the+docs++%3E"><span class="pf-c-icon pf-m-md" title="File a documentation bug"><span class="pf-c-icon__content"><i class="fa-regular fa-bug"></i></span></span></a>
-    </div>
+    {{ with .File }}
+        {{ $githubRepo := "validatedpatterns/docs" }}
+        {{ $githubBranch := "main" }}
+        {{ $githubFilePath := .Path }}
+        <a href="https://github.com/{{ $githubRepo }}/edit/{{ $githubBranch }}/content/{{ $githubFilePath }}" target="_blank" rel="noopener noreferrer">
+            <span class="pf-c-icon pf-m-md" title="Edit this page">
+                <span class="pf-c-icon__content"><i class="fa-solid fa-pencil"></i></span>
+            </span>
+        </a>
+    {{ end }}
+    <a href="https://github.com/validatedpatterns/docs/commits/main/content/{{ .File.Path }}" target="_blank" rel="noopener noreferrer"><span class="pf-c-icon pf-m-md" title="View page history"><span class="pf-c-icon__content"><i class="fa-solid fa-clock-rotate-left"></i></span></span></a>
+    <a id="report-doc-bug-btn" href="https://jira.example.com/"><span class="pf-c-icon pf-m-md" title="File a documentation bug"><span class="pf-c-icon__content"><i class="fa-regular fa-bug"></i></span></span></a>
+</div>
     <div class="pf-l-stack__item">
       <div class="pf-c-jump-links__header">
         <div class="pf-c-jump-links__label">
diff --git a/static/js/select-report-issue-hover.js b/static/js/select-report-issue-hover.js
new file mode 100644
index 000000000..20f6c6469
--- /dev/null
+++ b/static/js/select-report-issue-hover.js
@@ -0,0 +1,125 @@
+// static/js/select-report-issue-hover.js
+
+let reportButton = null;
+let buttonTimeout = null;
+
+const BUTTON_FADE_DURATION_MS = 6000; // Button disappears after 4 seconds
+
+function removeReportButton() { //
+    if (reportButton && reportButton.parentNode) {
+        reportButton.parentNode.removeChild(reportButton);
+        reportButton = null;
+    }
+    if (buttonTimeout) {
+        clearTimeout(buttonTimeout);
+        buttonTimeout = null;
+    }
+}
+
+function showReportButton(x, y, selectedText) {
+    removeReportButton();
+
+    reportButton = document.createElement('button');
+    reportButton.id = 'bug-report-button';
+    reportButton.className = 'bug-report-button';
+    reportButton.innerHTML = 'Report Bug <i class="fa-solid fa-bug"></i>'; // Changed to fa-solid based on your HTML
+
+    // Set position to fixed and max z-index (still good practice)
+    reportButton.style.position = 'fixed';
+    reportButton.style.left = `${x}px`;
+    reportButton.style.top = `${y - 40}px`; // Adjust Y to place it above selection
+    reportButton.style.zIndex = '2147483647'; // Highest possible z-index
+
+    // Store selected text and other context data on the button
+    reportButton.dataset.selectedText = selectedText;
+    reportButton.dataset.currentPageUrl = window.location.href;
+    reportButton.dataset.githubFilePath = getGitHubFilePath();
+
+    // DO NOT attach a click listener directly to the button here.
+    // The click will be handled by the document listener below.
+
+    document.documentElement.appendChild(reportButton); // Append to HTML element for broadest context
+
+    // Start timeout to remove button if not clicked
+    buttonTimeout = setTimeout(removeReportButton, BUTTON_FADE_DURATION_MS);
+}
+
+function getGitHubFilePath() {
+    const bodyElement = document.querySelector('body');
+    if (bodyElement && bodyElement.dataset.githubFile) {
+        const repoBaseUrl = 'https://github.com/validatedpatterns/docs/blob/main/';
+        return repoBaseUrl + bodyElement.dataset.githubFile;
+    }
+    return "Could not determine source file automatically. Please specify if known.";
+}
+
+// --- NEW EVENT DELEGATION LOGIC ---
+
+// Listen for clicks on the entire document (or document.body)
+// This listener WILL always fire, even if an overlay is present.
+document.addEventListener('mouseup', function(event) { // <-- SET BREAKPOINT HERE (Around line 61 in the full code)
+    const selectedText = window.getSelection().toString().trim(); // <--- ALSO SET A BREAKPOINT ON THIS LINE
+    // ...
+});
+    // If a reportButton exists AND the click target is that button (or a child of it, like the icon)
+    // This uses `contains` to check if the click was *inside* the button's DOM subtree.
+    if (reportButton && reportButton.contains(event.target)) {
+        event.preventDefault(); // Prevent any default behavior (like text selection or link following)
+        event.stopPropagation(); // Stop the event from bubbling up further
+
+        console.log('BUG REPORT BUTTON CLICKED (via event delegation)!'); // For debugging
+
+        // Retrieve data from the button's dataset
+        const text = reportButton.dataset.selectedText;
+        const currentPageUrl = reportButton.dataset.currentPageUrl;
+        const githubFilePath = reportButton.dataset.githubFilePath;
+
+        const issueTitle = `Bug Report: Issue on "${text.substring(0, 50).replace(/\n/g, ' ')}..."`;
+        let issueBody = `
+**Description of the issue:**
+\`\`\`
+${text}
+\`\`\`
+
+---
+**Context:**
+- **Page URL:** ${currentPageUrl}
+- **GitHub Source File:** ${githubFilePath}
+        `;
+
+        const encodedTitle = encodeURIComponent(issueTitle);
+        const encodedBody = encodeURIComponent(issueBody);
+
+        const githubRepo = 'validatedpatterns/docs'; // Your GitHub repository
+        const githubIssueUrl = `https://github.com/${githubRepo}/issues/new?title=${encodedTitle}&body=${encodedBody}`;
+
+        window.open(githubIssueUrl, '_blank');
+        removeReportButton(); // Remove button after opening issue
+    } else {
+        // If the button exists but the click was NOT on it, remove it (equivalent to mousedown logic)
+        removeReportButton();
+    }
+});
+
+// Original mouseup listener (remains the same)
+document.addEventListener('mouseup', function(event) {
+    const selectedText = window.getSelection().toString().trim();
+
+    if (selectedText.length > 0) {//
+        const selection = window.getSelection(); //
+        if (selection.rangeCount > 0) { //
+            const range = selection.getRangeAt(0);
+            const rect = range.getBoundingClientRect();
+
+            const x = rect.left + window.scrollX + (rect.width / 2) - 50;
+            const y = rect.top + window.scrollY;
+
+            showReportButton(x, y, selectedText); //
+        }
+    } else {
+        removeReportButton(); //
+    }
+});
+
+// The previous mousedown listener is now essentially replaced by the first part of the new 'click' listener.
+// You can remove the old document.addEventListener('mousedown', ...) function if you still have it.
\ No newline at end of file
diff --git a/static/js/select-report-issue-popup.js b/static/js/select-report-issue-popup.js
new file mode 100644
index 000000000..7f3317829
--- /dev/null
+++ b/static/js/select-report-issue-popup.js
@@ -0,0 +1,112 @@
+// static/js/select-report-issue.js (or wherever you prefer to store static assets)
+
+document.addEventListener('mouseup', function() {
+    const selectedText = window.getSelection().toString().trim();
+
+    if (selectedText.length > 0) {
+        // You might want to add a small button or popup here instead of direct confirmation
+        // For simplicity, we'll keep the confirmation for now.
+
+        const currentPageUrl = window.location.href;
+        const githubFilePath = getGitHubFilePath(); // This will now be more accurate for Hugo
+
+        const issueTitle = `Bug Report: Issue on "${selectedText.substring(0, 50).replace(/\n/g, ' ')}..."`;
+        let issueBody = `
+**Description of the issue:**
+\`\`\`
+${selectedText}
+\`\`\`
+
+---
+**Context:**
+- **Page URL:** ${currentPageUrl}
+- **GitHub Source File:** ${githubFilePath}
+        `;
+
+        const encodedTitle = encodeURIComponent(issueTitle);
+        const encodedBody = encodeURIComponent(issueBody);
+
+        const githubRepo = 'validatedpatterns/docs'; // Your GitHub repository
+        const githubIssueUrl = `https://github.com/${githubRepo}/issues/new?title=${encodedTitle}&body=${encodedBody}`;
+
+        const confirmation = confirm("Do you want to create an issue on GitHub for the selected text?");
+        if (confirmation) {
+            window.open(githubIssueUrl, '_blank');
+        }
+    }
+});
+
+
+// Hugo-specific function to get the GitHub file path
+function getGitHubFilePath() {
+    // This assumes you've added a data-github-file attribute to your body or a container.
+    const bodyElement = document.querySelector('body');
+    if (bodyElement && bodyElement.dataset.githubFile) {
+        // Construct the full GitHub blob URL
+        // Assuming your source files are in the 'content' directory of your repo
+        // And you're using the 'main' branch
+        const repoBaseUrl = 'https://github.com/validatedpatterns/docs/blob/main/';
+        return repoBaseUrl + bodyElement.dataset.githubFile;
+    }
+
+    // Fallback if the data attribute isn't found (shouldn't happen with Hugo setup)
+    return "Could not determine source file automatically. Please specify if known.";
+}
+
+
+// --- Introducing DOMContentLoaded for the Jira Button Logic ---
+document.addEventListener('DOMContentLoaded', function() {
+    // Select the Jira bug button using its NEW ID
+    const jiraBugButton = document.getElementById('report-doc-bug-btn'); // <--- CHANGED THIS LINE
+
+    if (jiraBugButton) {
+        console.log("Jira bug button found!", jiraBugButton); // For debugging: confirm it's found
+        jiraBugButton.removeAttribute('href'); // Remove the original href
+
+        jiraBugButton.addEventListener('click', function(event) {
+            event.preventDefault();
+            event.stopPropagation();
+
+            let selectedText = window.getSelection().toString().trim();
+            if (selectedText.length === 0) {
+                selectedText = "No specific text was selected. Reporting a general page issue.";
+            }
+
+            const currentPageUrl = window.location.href;
+            const githubFilePath = getGitHubFilePath();
+
+            const issueTitle = `Documentation Bug Report: ${selectedText.substring(0, 70).replace(/\n/g, ' ')}...`;
+            let issueBody = `
+**Issue Description:**
+\`\`\`
+${selectedText}
+\`\`\`
+
+---
+**Context:**
+- **Page URL:** ${currentPageUrl}
+- **GitHub Source File:** ${githubFilePath}
+            `;
+
+            const encodedTitle = encodeURIComponent(issueTitle);
+            const encodedBody = encodeURIComponent(issueBody);
+
+            const githubRepo = 'validatedpatterns/docs';
+            const githubIssueUrl = `https://github.com/${githubRepo}/issues/new?title=${encodedTitle}&body=${encodedBody}`;
+
+            const confirmation = confirm("Do you want to report this as a documentation bug on GitHub?");
+            if (confirmation) {
+                window.open(githubIssueUrl, '_blank');
+            }
+        });
+    } else {
+        // This warning will now be more accurate if the ID is truly missing/typo'd
+        console.warn("Jira bug button (ID: 'report-doc-bug-btn') not found.");
+    }
+
+    // --- Cleanup for previous button (keep this) ---
+    const existingFloatingButton = document.getElementById('bug-report-button');
+    if (existingFloatingButton) {
+        existingFloatingButton.parentNode.removeChild(existingFloatingButton);
+    }
+});
\ No newline at end of file
