+
+
+ Click to reference a page element
+
+
@@ -173,6 +225,7 @@ app.get(['/widget.js', BASE + '/widget.js'], (req, res) => {
\`;
document.body.appendChild(overlay);
+ // ── Open / close ──────────────────────────────────────────────────────────
function openOverlay() { overlay.classList.add('open'); }
function closeOverlay() { overlay.classList.remove('open'); }
@@ -183,6 +236,7 @@ app.get(['/widget.js', BASE + '/widget.js'], (req, res) => {
overlay.addEventListener('click', function(e) { if (e.target === overlay) closeOverlay(); });
document.getElementById('_fb-hclose').addEventListener('click', closeOverlay);
+ // ── Tabs ──────────────────────────────────────────────────────────────────
var currentTab = 'new';
document.querySelectorAll('.fb-tab').forEach(function(btn) {
btn.addEventListener('click', function() {
@@ -195,6 +249,99 @@ app.get(['/widget.js', BASE + '/widget.js'], (req, res) => {
});
});
+ // ── Picker mode ───────────────────────────────────────────────────────────
+ var pickerActive = false;
+ var pickerHighlighted = null;
+ var capturedSnippet = '';
+
+ function getSelector(el) {
+ if (!el || el === document.body) return 'body';
+ var tag = el.tagName.toLowerCase();
+ var id = el.id ? '#' + el.id : '';
+ var cls = el.className && typeof el.className === 'string'
+ ? '.' + el.className.trim().split(/\\s+/).slice(0,2).join('.') : '';
+ return tag + id + cls;
+ }
+
+ function getSnippet(el) {
+ // Outer HTML truncated sensibly
+ var html = el.outerHTML || '';
+ if (html.length > 500) {
+ // Just show tag + attrs + content preview
+ var inner = (el.textContent || '').trim().slice(0, 120);
+ var m = html.match(/^(<[^>]+>)/);
+ html = (m ? m[1] : '<' + el.tagName.toLowerCase() + '>') + (inner ? '\\n ' + inner + '…' : '') + '\\n';
+ }
+ return html;
+ }
+
+ function activatePicker() {
+ pickerActive = true;
+ overlay.classList.remove('open');
+ shield.classList.add('active');
+ toast.classList.add('active');
+ }
+
+ function deactivatePicker(snippet) {
+ pickerActive = false;
+ shield.classList.remove('active');
+ toast.classList.remove('active');
+ if (pickerHighlighted) {
+ pickerHighlighted.classList.remove('_fb-hover-highlight');
+ pickerHighlighted = null;
+ }
+ overlay.classList.add('open');
+ if (snippet) {
+ capturedSnippet = snippet;
+ document.getElementById('_fb-snippet').textContent = snippet;
+ document.getElementById('_fb-snippet-wrap').style.display = '';
+ document.getElementById('_fb-pick-hint').textContent = '✓ Element captured — you can pick again';
+ // Append to description
+ var desc = document.getElementById('_fb-desc');
+ var tag = '\\n\\n**Picked element:**\\n\`\`\`html\\n' + snippet + '\\n\`\`\`';
+ if (!desc.value.includes(tag)) desc.value += tag;
+ }
+ }
+
+ document.getElementById('_fb-pick-btn').addEventListener('click', function() {
+ activatePicker();
+ });
+
+ // Mousemove on page during picker: highlight hovered element
+ document.addEventListener('mousemove', function(e) {
+ if (!pickerActive) return;
+ var el = document.elementFromPoint(e.clientX, e.clientY);
+ // Skip our own UI elements
+ if (!el || el.closest('#_fb-picker-shield') || el.closest('#_fb-picker-toast')) return;
+ if (pickerHighlighted && pickerHighlighted !== el) {
+ pickerHighlighted.classList.remove('_fb-hover-highlight');
+ }
+ pickerHighlighted = el;
+ el.classList.add('_fb-hover-highlight');
+ });
+
+ // Click during picker: capture element
+ shield.addEventListener('click', function(e) {
+ if (!pickerActive) return;
+ e.preventDefault(); e.stopPropagation();
+ // Find element underneath the shield
+ shield.style.display = 'none';
+ var el = document.elementFromPoint(e.clientX, e.clientY);
+ shield.style.display = '';
+ if (el && !el.closest('#_fb-picker-toast')) {
+ el.classList.remove('_fb-hover-highlight');
+ deactivatePicker(getSnippet(el));
+ } else {
+ deactivatePicker(null);
+ }
+ });
+
+ // Esc cancels picker
+ document.addEventListener('keydown', function(e) {
+ if (e.key === 'Escape' && pickerActive) deactivatePicker(null);
+ });
+
+ // ── Submit ────────────────────────────────────────────────────────────────
document.getElementById('_fb-submit').addEventListener('click', function() {
var title = document.getElementById('_fb-title').value.trim();
var body = document.getElementById('_fb-desc').value.trim();
@@ -211,6 +358,9 @@ app.get(['/widget.js', BASE + '/widget.js'], (req, res) => {
status.textContent='✓ Issue #' + d.issue_number + ' created!';
document.getElementById('_fb-title').value = '';
document.getElementById('_fb-desc').value = '';
+ document.getElementById('_fb-snippet-wrap').style.display = 'none';
+ document.getElementById('_fb-pick-hint').textContent = 'Click to reference a page element';
+ capturedSnippet = '';
btn.disabled = false;
setTimeout(function() { status.textContent=''; }, 3000);
} else {
@@ -219,6 +369,7 @@ app.get(['/widget.js', BASE + '/widget.js'], (req, res) => {
}).catch(function() { status.style.color='#f57c7c'; status.textContent='Network error.'; btn.disabled=false; });
});
+ // ── Open issues tab ───────────────────────────────────────────────────────
function loadIssues() {
var list = document.getElementById('_fb-issues-list');
list.innerHTML = '