fix(bundle): mirror source fixes in embedded userscript
Mirror the three source-level fixes in the embedded copies inside torn-attribute-tracker.user.js: 1. _wireHeaderDrag: add the .tat-header closest() guard so the bundle no longer steals focus from inputs/selects. 2. findAnchorElement: replace the narrow 'button[name="train"]' query with the priority-ordered candidate list and the gym-panel last- ditch fallback. 3. Inline anchor-error UX: add the anchorError state, include it in the snapshot, surface it via applyMode, render the note with the .tat-anchor-err class, and add the corresponding CSS rule. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -263,6 +263,7 @@
|
||||
.tat-modes button { flex: 1; padding: 4px; background: #2b2b2b; color: #ddd; border: 1px solid #555; font: inherit; font-size: 11px; cursor: pointer; }
|
||||
.tat-modes button.active { background: #444; border-color: #888; }
|
||||
.tat-warn { color: #c90; margin-top: 6px; font-size: 11px; }
|
||||
.tat-anchor-err { color: #c90; margin-top: 6px; font-size: 11px; }
|
||||
.tat-error { padding: 8px 0; color: #f88; }
|
||||
.tat-error button { margin-left: 8px; }
|
||||
`;
|
||||
@@ -343,6 +344,9 @@
|
||||
const self = this;
|
||||
this.root.addEventListener('mousedown', function (e) {
|
||||
if (self.mode !== 'free') return;
|
||||
// Only initiate drag from the header bar. This prevents stealing focus
|
||||
// from inputs, selects, and buttons inside the dialog body.
|
||||
if (!e.target.closest('.tat-header')) return;
|
||||
if (e.target.classList.contains('tat-close')) return;
|
||||
const rect = self.root.getBoundingClientRect();
|
||||
self.dragState = { dx: e.clientX - rect.left, dy: e.clientY - rect.top };
|
||||
@@ -399,7 +403,8 @@
|
||||
+ '<div class="tat-row"><span>Trains to go</span><span>≈ ' + tatFmtFull(est.trainsToGo) + '</span></div>'
|
||||
+ '<div class="tat-row"><span>ETA</span><span>' + (est.days > 0 ? '~ ' + tatFmtFull(est.days) + ' days (' + tatFmtDate(est.eta) + ')' : '—') + '</span></div>'
|
||||
+ '<div class="tat-modes">' + modes + '</div>'
|
||||
+ (s.warn ? '<div class="tat-warn">⚠ ' + tatEsc(s.warn) + '</div>' : '');
|
||||
+ (s.warn ? '<div class="tat-warn">⚠ ' + tatEsc(s.warn) + '</div>' : '')
|
||||
+ (s.anchorError ? '<div class="tat-anchor-err">⚠ ' + tatEsc(s.anchorError) + '</div>' : '');
|
||||
this.root.querySelector('.tat-close').onclick = function () { self.onClose && self.onClose(); };
|
||||
this.root.querySelector('[data-role="target"]').onchange = function (e) { self.onTargetChange && self.onTargetChange(e.target.value); };
|
||||
this.root.querySelector('[data-role="milestone"]').onchange = function (e) { const v = e.target.value; if (v !== '') self.onTargetChange && self.onTargetChange(Number(v)); };
|
||||
@@ -409,9 +414,34 @@
|
||||
|
||||
// ===== main.js (embedded) =====
|
||||
function findAnchorElement() {
|
||||
const btn = document.querySelector('button[name="train"], a[href*="train"]');
|
||||
if (!btn) return null;
|
||||
return btn.closest('form') || btn.parentElement;
|
||||
// Try several selectors in priority order. Torn's gym page structure
|
||||
// varies; we cast a wide net and return the first match.
|
||||
const candidates = [
|
||||
'form[action*="train"]',
|
||||
'form.train-form',
|
||||
'form[class*="train"]',
|
||||
'[class*="train-button"]',
|
||||
'button[class*="train"]',
|
||||
'a[class*="train"]',
|
||||
'button[name="train"]',
|
||||
'a[href*="train"]',
|
||||
];
|
||||
for (const sel of candidates) {
|
||||
const el = document.querySelector(sel);
|
||||
if (el) {
|
||||
// Prefer the form ancestor if the match is a button/link, since we
|
||||
// want to anchor above the whole form, not just the button.
|
||||
return el.closest('form') || el;
|
||||
}
|
||||
}
|
||||
// Last-ditch: any element inside the gym panel that looks like the
|
||||
// training form.
|
||||
const panel = document.querySelector('.gym, #gym, [class*="gym-"], [class*="Gym"]');
|
||||
if (panel) {
|
||||
const form = panel.querySelector('form');
|
||||
if (form) return form;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function start() {
|
||||
@@ -434,6 +464,7 @@
|
||||
let lastSnapshot = null;
|
||||
let lastAttr = null;
|
||||
let lastDelta = 0;
|
||||
let anchorError = null;
|
||||
|
||||
function snapshot() {
|
||||
const a = currentAttribute();
|
||||
@@ -444,6 +475,7 @@
|
||||
attr: a.attr, gym: a.gym, current: a.current,
|
||||
target: store.getTarget(a.attr), perTrain: lastDelta, summary: summary,
|
||||
warn: store._saveDisabled ? 'saving disabled this session' : null,
|
||||
anchorError: anchorError,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -462,9 +494,16 @@
|
||||
});
|
||||
ro.observe(el);
|
||||
}
|
||||
anchorError = null;
|
||||
return;
|
||||
}
|
||||
// Anchor selector missed — don't snap to default, just keep current
|
||||
// position and show a note.
|
||||
anchorError = "Couldn't find the training form on this page.";
|
||||
render();
|
||||
return;
|
||||
}
|
||||
anchorError = null;
|
||||
dialog.setMode('free');
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user