39860ae995
We'd rather 'play it safe' for our selection detection (which avoids following links if you have some text selected). This commit adds an additional check of 'more than 1 character' to the 'isSelected' check. This is based on the fact that it's far quicker to type the character so why would a user select on character? This therefore caters for any fairly large (in the scheme of things) incidential mouse moves whilst clicking a link. Overall this is probably overkill
64 lines
1.7 KiB
JavaScript
64 lines
1.7 KiB
JavaScript
import env from 'consul-ui/env';
|
|
|
|
const SECONDARY_BUTTON = 2;
|
|
const isSelecting = function(win = window) {
|
|
const selection = win.getSelection();
|
|
let selecting = false;
|
|
try {
|
|
selecting =
|
|
'isCollapsed' in selection && !selection.isCollapsed && selection.toString().length > 1;
|
|
} catch (e) {
|
|
// passthrough
|
|
}
|
|
return selecting;
|
|
};
|
|
export default {
|
|
name: 'selection',
|
|
initialize(container) {
|
|
if (env('CONSUL_UI_DISABLE_ANCHOR_SELECTION')) {
|
|
return;
|
|
}
|
|
const dom = container.lookup('service:dom');
|
|
const findAnchor = function(el) {
|
|
return el.tagName === 'A' ? el : dom.closest('a', el);
|
|
};
|
|
const mousedown = function(e) {
|
|
const $a = findAnchor(e.target);
|
|
if ($a) {
|
|
if (typeof e.button !== 'undefined' && e.button === SECONDARY_BUTTON) {
|
|
const dataHref = $a.dataset.href;
|
|
if (dataHref) {
|
|
$a.setAttribute('href', dataHref);
|
|
}
|
|
return;
|
|
}
|
|
const href = $a.getAttribute('href');
|
|
if (href) {
|
|
$a.dataset.href = href;
|
|
$a.removeAttribute('href');
|
|
}
|
|
}
|
|
};
|
|
const mouseup = function(e) {
|
|
const $a = findAnchor(e.target);
|
|
if ($a) {
|
|
const href = $a.dataset.href;
|
|
if (!isSelecting() && href) {
|
|
$a.setAttribute('href', href);
|
|
}
|
|
}
|
|
};
|
|
|
|
document.body.addEventListener('mousedown', mousedown);
|
|
document.body.addEventListener('mouseup', mouseup);
|
|
|
|
container.reopen({
|
|
willDestroy: function() {
|
|
document.body.removeEventListener('mousedown', mousedown);
|
|
document.body.removeEventListener('mouseup', mouseup);
|
|
return this._super(...arguments);
|
|
},
|
|
});
|
|
},
|
|
};
|