Bot:Gadget-figureSource.js: Difference between revisions
Content deleted Content added
Viewer: ink page border + coral box anchored to the page frame (wide-window drift fix) |
Viewer bar: doc name IS the back link, page label between prev/next, uniform 14px, no bar rule; responsive canvas + percent box |
||
Line 387:
var pdf = new PdfDoc(mirrorUrl(doc));
var page = fig ? fig.page : parseInt(q.get('page') || '1', 10);
// The document name IS the back link (no separate "← back"),
// and the page label sits BETWEEN prev and next (user design).
root.innerHTML =
'<div class="fig-viewer-bar"><
'
'<button class="fig-prev">‹ prev</button>' +
'<
'<button class="fig-next">next ›</button></span></div>' +
'<div class="fig-stage"><div class="fig-page">' +
'<canvas></canvas><div class="fig-box"></div></div></div>';
Line 405 ⟶ 408:
var box = root.querySelector('.fig-box');
if (fig && fig.page === page) {
// PERCENT coordinates: the canvas is responsive
// (max-width:100%), so px offsets computed at
// render scale would drift the moment CSS scales
// the bitmap — percentages track the displayed
// size for free.
var s = pg.viewport.scale;
var W = pg.canvas.width, H = pg.canvas.height;
box.style.display = 'block';
box.style.left = ((fig.rect[0] * s - 3) / W * 100) + '
box.style.top = ((fig.rect[1] * s - 3) / H * 100) + '
box.style.width = (((fig.rect[2] - fig.rect[0]) * s + 6) / W * 100) + '
box.style.height = (((fig.rect[3] - fig.rect[1]) * s + 6) / H * 100) + '
box.scrollIntoView({ block: 'center' });
} else {
Line 462 ⟶ 471:
'.fig-popover .fig-foot{display:flex;justify-content:space-between;' +
'margin-top:8px;font-size:12px;color:#555}' +
// one explicit size for every bar item — name, page label, buttons —
// so nothing inherits a divergent size from the surrounding skin
'.fig-viewer-bar{display:flex;gap:14px;align-items:center;' +
'padding:8px 0;
'.fig-viewer-bar
'.fig-controls{display:flex;gap:10px;align-items:center;' +
'margin-left:auto}' +
'.fig-viewer-bar button{font:inherit;font-size:14px;background:#fff;' +
'border:1px solid #0d0d0d;padding:2px 12px;cursor:pointer}' +
'.fig-stage{overflow:auto;text-align:center}' +
Line 474 ⟶ 488:
'.fig-page{position:relative;display:inline-block;' +
'border:1px solid #0d0d0d;background:#fff}' +
// responsive page: never wider than the column, so the right border
'.fig-page canvas{display:block}' +▼
// stays visible and no horizontal scrollbar (the house dark
// scrollbar was the "thick dark line" under the page)
▲ '.fig-page canvas{display:block;max-width:100%;height:auto}' +
'.fig-box{position:absolute;display:none;border:3px solid ' + coral +
';pointer-events:none}');
| |||