mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
(core) Navigate hyperlinks in the same document without a page reload
Summary: Extract out function _onClickHyperlink Test Plan: Made a table, formatted column as hyperlink, added values including a link to another page in the document, another document, and an external website, clicked on all the links and only the first one didn't open a new tab. Reviewers: dsagal Reviewed By: dsagal Differential Revision: https://phab.getgrist.com/D2826
This commit is contained in:
parent
db91d31416
commit
3a586a5f6c
@ -5,6 +5,7 @@ import {colors, testId} from 'app/client/ui2018/cssVars';
|
||||
import {icon} from 'app/client/ui2018/icons';
|
||||
import {NTextBox} from 'app/client/widgets/NTextBox';
|
||||
import {dom, styled} from 'grainjs';
|
||||
import {urlState, UrlStateImpl} from "../models/gristUrlState";
|
||||
|
||||
/**
|
||||
* Creates a widget for displaying links. Links can entered directly or following a title.
|
||||
@ -25,6 +26,8 @@ export class HyperLinkTextBox extends NTextBox {
|
||||
dom('a',
|
||||
dom.attr('href', (use) => _constructUrl(use(value))),
|
||||
dom.attr('target', '_blank'),
|
||||
dom.on('click', (ev) =>
|
||||
_onClickHyperlink(ev, new URL(_constructUrl(value.peek())))),
|
||||
// As per Google and Mozilla recommendations to prevent opened links
|
||||
// from running on the same process as Grist:
|
||||
// https://developers.google.com/web/tools/lighthouse/audits/noopener
|
||||
@ -63,6 +66,26 @@ function _constructUrl(value: CellValue): string {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* If possible (i.e. if `url` points to somewhere in the current document)
|
||||
* use pushUrl to navigate without reloading or opening a new tab
|
||||
*/
|
||||
async function _onClickHyperlink(ev: MouseEvent, url: URL) {
|
||||
// Only override plain-vanilla clicks.
|
||||
if (ev.shiftKey || ev.metaKey || ev.ctrlKey || ev.altKey) { return; }
|
||||
|
||||
const oldOrigin = window.location.origin;
|
||||
const newOrigin = url.origin;
|
||||
if (oldOrigin !== newOrigin) { return; }
|
||||
|
||||
const urlStateImpl = new UrlStateImpl(window as any);
|
||||
const newUrlState = urlStateImpl.decodeUrl(url);
|
||||
if (urlStateImpl.needPageLoad(urlState().state.get(), newUrlState)) { return; }
|
||||
|
||||
ev.preventDefault();
|
||||
await urlState().pushUrl(newUrlState);
|
||||
}
|
||||
|
||||
const cssFieldClip = styled('div.field_clip', `
|
||||
color: var(--grist-actual-cell-color, ${colors.lightGreen});
|
||||
`);
|
||||
|
Loading…
Reference in New Issue
Block a user