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
64 lines
1.5 KiB
JavaScript
64 lines
1.5 KiB
JavaScript
import domClickFirstAnchor from 'consul-ui/utils/dom/click-first-anchor';
|
|
import { module, test } from 'qunit';
|
|
|
|
module('Unit | Utility | dom/click first anchor');
|
|
|
|
test('it does nothing if the clicked element is generally a clickable thing', function(assert) {
|
|
const closest = function() {
|
|
return {
|
|
querySelector: function() {
|
|
assert.ok(false);
|
|
},
|
|
};
|
|
};
|
|
const click = domClickFirstAnchor(closest);
|
|
['INPUT', 'LABEL', 'A', 'Button'].forEach(function(item) {
|
|
const expected = null;
|
|
const actual = click({
|
|
target: {
|
|
nodeName: item,
|
|
},
|
|
});
|
|
assert.equal(actual, expected);
|
|
});
|
|
});
|
|
test("it does nothing if an anchor isn't found", function(assert) {
|
|
const closest = function() {
|
|
return {
|
|
querySelector: function() {
|
|
return null;
|
|
},
|
|
};
|
|
};
|
|
const click = domClickFirstAnchor(closest);
|
|
const expected = null;
|
|
const actual = click({
|
|
target: {
|
|
nodeName: 'DIV',
|
|
},
|
|
});
|
|
assert.equal(actual, expected);
|
|
});
|
|
test('it dispatches the result of `mouseup`, `mousedown`, `click` if an anchor is found', function(assert) {
|
|
assert.expect(3);
|
|
const expected = ['mousedown', 'mouseup', 'click'];
|
|
const closest = function() {
|
|
return {
|
|
querySelector: function() {
|
|
return {
|
|
dispatchEvent: function(ev) {
|
|
const actual = ev.type;
|
|
assert.equal(actual, expected.shift());
|
|
},
|
|
};
|
|
},
|
|
};
|
|
};
|
|
const click = domClickFirstAnchor(closest);
|
|
click({
|
|
target: {
|
|
nodeName: 'DIV',
|
|
},
|
|
});
|
|
});
|