1+ // static/js/select-report-issue-hover.js
2+
3+ let reportButton = null ;
4+ let buttonTimeout = null ;
5+
6+ const BUTTON_FADE_DURATION_MS = 6000 ; // Button disappears after 4 seconds
7+
8+ function removeReportButton ( ) { //
9+ if ( reportButton && reportButton . parentNode ) {
10+ reportButton . parentNode . removeChild ( reportButton ) ;
11+ reportButton = null ;
12+ }
13+ if ( buttonTimeout ) {
14+ clearTimeout ( buttonTimeout ) ;
15+ buttonTimeout = null ;
16+ }
17+ }
18+
19+ function showReportButton ( x , y , selectedText ) {
20+ removeReportButton ( ) ;
21+
22+ reportButton = document . createElement ( 'button' ) ;
23+ reportButton . id = 'bug-report-button' ;
24+ reportButton . className = 'bug-report-button' ;
25+ reportButton . innerHTML = 'Report Bug <i class="fa-solid fa-bug"></i>' ; // Changed to fa-solid based on your HTML
26+
27+ // Set position to fixed and max z-index (still good practice)
28+ reportButton . style . position = 'fixed' ;
29+ reportButton . style . left = `${ x } ;
30+ reportButton . style . top = `${ y - 40 } ; // Adjust Y to place it above selection
31+ reportButton . style . zIndex = '2147483647' ; // Highest possible z-index
32+
33+ // Store selected text and other context data on the button
34+ reportButton . dataset . selectedText = selectedText ;
35+ reportButton . dataset . currentPageUrl = window . location . href ;
36+ reportButton . dataset . githubFilePath = getGitHubFilePath ( ) ;
37+
38+ // DO NOT attach a click listener directly to the button here.
39+ // The click will be handled by the document listener below.
40+
41+ document . documentElement . appendChild ( reportButton ) ; // Append to HTML element for broadest context
42+
43+ // Start timeout to remove button if not clicked
44+ buttonTimeout = setTimeout ( removeReportButton , BUTTON_FADE_DURATION_MS ) ;
45+ }
46+
47+ function getGitHubFilePath ( ) {
48+ const bodyElement = document . querySelector ( 'body' ) ;
49+ if ( bodyElement && bodyElement . dataset . githubFile ) {
50+ const repoBaseUrl = 'https://github.com/validatedpatterns/docs/blob/main/' ;
51+ return repoBaseUrl + bodyElement . dataset . githubFile ;
52+ }
53+ return "Could not determine source file automatically. Please specify if known." ;
54+ }
55+
56+ // --- NEW EVENT DELEGATION LOGIC ---
57+
58+ // Listen for clicks on the entire document (or document.body)
59+ // This listener WILL always fire, even if an overlay is present.
60+ document . addEventListener ( 'mouseup' , function ( event ) { // <-- SET BREAKPOINT HERE (Around line 61 in the full code)
61+ const selectedText = window . getSelection ( ) . toString ( ) . trim ( ) ; // <--- ALSO SET A BREAKPOINT ON THIS LINE
62+ // ...
63+ } ) ;
64+ // If a reportButton exists AND the click target is that button (or a child of it, like the icon)
65+ // This uses `contains` to check if the click was *inside* the button's DOM subtree.
66+ if ( reportButton && reportButton . contains ( event . target ) ) {
67+ event . preventDefault ( ) ; // Prevent any default behavior (like text selection or link following)
68+ event . stopPropagation ( ) ; // Stop the event from bubbling up further
69+
70+ console . log ( 'BUG REPORT BUTTON CLICKED (via event delegation)!' ) ; // For debugging
71+
72+ // Retrieve data from the button's dataset
73+ const text = reportButton . dataset . selectedText ;
74+ const currentPageUrl = reportButton . dataset . currentPageUrl ;
75+ const githubFilePath = reportButton . dataset . githubFilePath ;
76+
77+ const issueTitle = `Bug Report: Issue on "${ text . substring ( 0 , 50 ) . replace ( / \n / g, ' ' ) } ;
78+ let issueBody = `
79+ **Description of the issue:**
80+ \`\`\`
81+ ${ text }
82+ \`\`\`
83+
84+ ---
85+ **Context:**
86+ - **Page URL:** ${ currentPageUrl }
87+ - **GitHub Source File:** ${ githubFilePath }
88+ ` ;
89+
90+ const encodedTitle = encodeURIComponent ( issueTitle ) ;
91+ const encodedBody = encodeURIComponent ( issueBody ) ;
92+
93+ const githubRepo = 'validatedpatterns/docs' ; // Your GitHub repository
94+ const githubIssueUrl = `https://github.com/${ githubRepo } ${ encodedTitle } ${ encodedBody } ;
95+
96+ window . open ( githubIssueUrl , '_blank' ) ;
97+ removeReportButton ( ) ; // Remove button after opening issue
98+ } else {
99+ // If the button exists but the click was NOT on it, remove it (equivalent to mousedown logic)
100+ removeReportButton ( ) ;
101+ }
102+ } ) ;
103+
104+ // Original mouseup listener (remains the same)
105+ document . addEventListener ( 'mouseup' , function ( event ) {
106+ const selectedText = window . getSelection ( ) . toString ( ) . trim ( ) ;
107+
108+ if ( selectedText . length > 0 ) { //
109+ const selection = window . getSelection ( ) ; //
110+ if ( selection . rangeCount > 0 ) { //
111+ const range = selection . getRangeAt ( 0 ) ;
112+ const rect = range . getBoundingClientRect ( ) ;
113+
114+ const x = rect . left + window . scrollX + ( rect . width / 2 ) - 50 ;
115+ const y = rect . top + window . scrollY ;
116+
117+ showReportButton ( x , y , selectedText ) ; //
118+ }
119+ } else {
120+ removeReportButton ( ) ; //
121+ }
122+ } ) ;
123+
124+ // The previous mousedown listener is now essentially replaced by the first part of the new 'click' listener.
125+ // You can remove the old document.addEventListener('mousedown', ...) function if you still have it.
0 commit comments