466c3c6899
* ui: Allow text selection of clickable elements and their contents This commit disables a click on mousedown be removing the `href` attribute and moving it to a `data-href` attribute. On mouseup it will only move it back if there is no selection. This means that an anchor will only be followed on click _if_ there is no selection. This fixes the fact that whenever you select some copy within a clickable element it immediately throws you into the linked page when you release your mouse. Further notes: We use the `isCollapsed` property here which 'seems' to be classed as 'experimental' in one place where I researched it: https://developer.mozilla.org/en-US/docs/Web/API/Selection/isCollapsed Although in others it makes no mention of this 'experimental' e.g: - https://webplatform.github.io/docs/dom/Selection/isCollapsed/ - https://w3c.github.io/selection-api/#dom-selection-iscollapsed I may have gone a little overboard in feature detection for this, but I conscious of that fact that if `isCollapsed` doesn't exist at some point in the future (something that seems unlikely). The code here will have no effect on the UI. But I'd specifically like a second pair of eyes on that. * ui: Don't break right click, detects a secondary click on mousedown * ui: Put anchor selection capability behind an ENV var
37 lines
972 B
JavaScript
37 lines
972 B
JavaScript
const clickEvent = function($el) {
|
|
['mousedown', 'mouseup', 'click']
|
|
.map(function(type) {
|
|
return new MouseEvent(type, {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
view: window,
|
|
});
|
|
})
|
|
.forEach(function(event) {
|
|
$el.dispatchEvent(event);
|
|
});
|
|
};
|
|
export default function(closest, click = clickEvent) {
|
|
// TODO: Decide whether we should use `e` for ease
|
|
// or `target`/`el`
|
|
return function(e) {
|
|
// click on row functionality
|
|
// so if you click the actual row but not a link
|
|
// find the first link and fire that instead
|
|
const name = e.target.nodeName.toLowerCase();
|
|
switch (name) {
|
|
case 'input':
|
|
case 'label':
|
|
case 'a':
|
|
case 'button':
|
|
return;
|
|
}
|
|
// TODO: why should this be restricted to a tr
|
|
// closest should probably be relaced with a finder function
|
|
const $a = closest('tr', e.target).querySelector('a');
|
|
if ($a) {
|
|
click($a);
|
|
}
|
|
};
|
|
}
|