Skip to content

Commit

Permalink
feat(ui5-link, ui5-breadcrumbs): add modifiers keys to click event (#…
Browse files Browse the repository at this point in the history 
…5228)
  • Loading branch information
@nnaydenow
nnaydenow authored Jun 1, 2022
1 parent edcdd24 commit 379cc7b
Show file tree
Hide file tree
Showing 7 changed files with 271 additions and 22 deletions.
2 changes: 1 addition & 1 deletion packages/main/src/Breadcrumbs.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
id="{{this._id}}-link-wrapper">

<ui5-link
@click="{{../_onLinkPress}}"
@ui5-click="{{../_onLinkPress}}"
href="{{this.href}}"
target="{{this.target}}"
id="{{this._id}}-link"
Expand Down
16 changes: 13 additions & 3 deletions packages/main/src/Breadcrumbs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,11 +124,19 @@ const metadata = {
* @event sap.ui.webcomponents.main.Breadcrumbs#item-click
* @allowPreventDefault
* @param {HTMLElement} item The clicked item.
* @param {Boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
* @param {Boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
* @param {Boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
* @param {Boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
* @public
*/
"item-click": {
detail: {
item: { type: HTMLElement },
altKey: { type: Boolean },
ctrlKey: { type: Boolean },
metaKey: { type: Boolean },
shiftKey: { type: Boolean },
},
},
},
Expand Down Expand Up @@ -391,15 +399,17 @@ class Breadcrumbs extends UI5Element {
const link = event.target,
items = this.getSlottedNodes("items"),
item = items.find(x => `${x._id}-link` === link.id);
if (!this.fireEvent("item-click", { item }, true)) {

if (!this.fireEvent("item-click", { item, ...event.detail }, true)) {
event.preventDefault();
}
}

_onLabelPress() {
_onLabelPress(event) {
const items = this.getSlottedNodes("items"),
item = items[items.length - 1];
this.fireEvent("item-click", { item });

this.fireEvent("item-click", { item, ...event.detail });
}

_onOverflowListItemSelect(event) {
Expand Down
49 changes: 37 additions & 12 deletions packages/main/src/Link.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,9 +206,20 @@ const metadata = {
*
* @event
* @public
* @native
* @allowPreventDefault
* @param {Boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
* @param {Boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
* @param {Boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
* @param {Boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
*/
click: {},
click: {
detail: {
altKey: { type: Boolean },
ctrlKey: { type: Boolean },
metaKey: { type: Boolean },
shiftKey: { type: Boolean },
},
},
},
};

Expand Down Expand Up @@ -331,7 +342,25 @@ class Link extends UI5Element {
}

_onclick(event) {
const {
altKey,
ctrlKey,
metaKey,
shiftKey,
} = event;

event.isMarked = "link";

const executeEvent = this.fireEvent("click", {
altKey,
ctrlKey,
metaKey,
shiftKey,
}, true);

if (!executeEvent) {
event.preventDefault();
}
}

_onfocusin(event) {
Expand All @@ -345,12 +374,7 @@ class Link extends UI5Element {

_onkeydown(event) {
if (isEnter(event)) {
event.preventDefault();
const executeEvent = this.fireEvent("click", null, true);

if (executeEvent) {
this.href && window.open(this.href, this.target);
}
this._onclick(event);
} else if (isSpace(event)) {
event.preventDefault();
}
Expand All @@ -364,11 +388,12 @@ class Link extends UI5Element {
return;
}

event.preventDefault();
this._onclick(event);

if (this.href && !event.defaultPrevented) {
const customEvent = new MouseEvent("click");

const executeEvent = this.fireEvent("click", null, true);
if (executeEvent) {
this.href && window.open(this.href, this.target);
this.getDomRef().dispatchEvent(customEvent);
}
}
}
Expand Down
16 changes: 15 additions & 1 deletion packages/main/test/pages/Breadcrumbs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,8 +178,22 @@ <h2>Empty Breadcrumbs with Location only</h2>

var breadcrumbsPreventDefault = document.querySelector("#breadcrumbsPreventDefault");
breadcrumbsPreventDefault.addEventListener("ui5-item-click", (event) => {
let keyText ='';

if(event.detail.ctrlKey) {
keyText += 'CTRL:';
}
if(event.detail.altKey) {
keyText += 'ALT:';
}
if(event.detail.shiftKey) {
keyText += 'SHIFT:';
}
if(event.detail.metaKey) {
keyText += 'META:';
}
event.preventDefault();
result.innerText = event.detail.item.innerText;
result.innerText = keyText + event.detail.item.innerText;
});

extendSizeBtn.addEventListener("click", () => resizeContainer(true));
Expand Down
37 changes: 32 additions & 5 deletions packages/main/test/pages/Link.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,12 @@ <h2>Link opens a dialog</h2>
</ui5-dialog>
</section>

<section class="group">
<h2>Link with prevent default and modifiers</h2>
<ui5-link id="modifierLink">Link 1</ui5-link>
<span id="modifierResult"></span>
</section>

<script>
var disLink = document.querySelector("#disabled-link");
var link = document.querySelector("#link");
Expand All @@ -126,34 +132,36 @@ <h2>Link opens a dialog</h2>
var signInLink = document.getElementById("signInLink");
var singInDialog = document.getElementById("signInDialog");
var closeSignInDialogButton = document.getElementById("closeDialogButton");
var modifierLink = document.getElementById("modifierLink");
var modifierResult = document.getElementById("modifierResult");

[link, disLink].forEach(function(element) {
element.addEventListener("click", function(event) {
element.addEventListener("ui5-click", function(event) {
input.value = parseInt(input.value) + 1;
});
});

signInLink.addEventListener("click", function(event) {
signInLink.addEventListener("ui5-click", function(event) {
singInDialog.show();
});

signInLink.accessibilityAttributes = {
hasPopup: "Dialog"
};

closeSignInDialogButton.addEventListener("click", function(event) {
closeSignInDialogButton.addEventListener("ui5-click", function(event) {
singInDialog.close();
});

linkClickPreventDefault.addEventListener("click", function(event) {
linkClickPreventDefault.addEventListener("ui5-click", function(event) {
event.preventDefault();
});

collapseExpandLink.accessibilityAttributes = {
expanded: "true"
};

collapseExpandLink.addEventListener("click", function(event) {
collapseExpandLink.addEventListener("ui5-click", function(event) {
collapseExpandLink.accessibilityAttributes = {
expanded: collapseExpandLink.accessibilityAttributes["expanded"] === "true" ? "false" : "true"
};
Expand All @@ -163,6 +171,25 @@ <h2>Link opens a dialog</h2>
collapsibleText.style["-webkit-box-orient"] = collapsibleText.style["-webkit-box-orient"] === "vertical" ? "" : "vertical";
collapsibleText.style["overflow"] = collapsibleText.style["overflow"] === "hidden" ? "" : "hidden";
});

modifierLink.addEventListener("ui5-click", (event) => {
let keyText ='';

if(event.detail.ctrlKey) {
keyText += 'CTRL:';
}
if(event.detail.altKey) {
keyText += 'ALT:';
}
if(event.detail.shiftKey) {
keyText += 'SHIFT:';
}
if(event.detail.metaKey) {
keyText += 'META:';
}
event.preventDefault();
modifierResult.innerText = keyText + event.target.innerText;
});
</script>
</body>

Expand Down
122 changes: 122 additions & 0 deletions packages/main/test/specs/Breadcrumbs.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
const assert = require("chai").assert;
const PORT = require("./_port.js");
const KEYS = {
SHIFT: '\uE008',
CTRL: '\uE009',
ALT: '\uE00A',
META: '\uE03D',
ENTER: '\uE007',
}

describe("Breadcrumbs general interaction", () => {
before(async () => {
Expand Down Expand Up @@ -233,4 +240,119 @@ describe("Breadcrumbs general interaction", () => {
assert.strictEqual(await eventResult.getText(), await link.getText(), "label for pressed link is correct");
});

it("passes special keys pressed while item clicked", async () => {
// CTRL key is skipped since there is default browser behavior where popover is opened.
const breadcrumbs = await browser.$("#breadcrumbsPreventDefault"),
link = (await breadcrumbs.shadow$$("ui5-link"))[1];
let eventResult;

// Setup for META Key
await browser.performActions([{
type: 'key',
id: 'keyboard1',
actions: [{ type: 'keyDown', value: KEYS.META }],
}]);
// Action
await link.click();
await browser.releaseActions();
// Check
eventResult = await browser.$("#result");
assert.strictEqual(await eventResult.getText(), 'META:' + await link.getText(), "label for pressed link is correct");

// Setup for ALT Key
await browser.performActions([{
type: 'key',
id: 'keyboard2',
actions: [{ type: 'keyDown', value: KEYS.ALT }],
}]);
// Action
await link.click();
await browser.releaseActions();
// Check
eventResult = await browser.$("#result");
assert.strictEqual(await eventResult.getText(), 'ALT:' + await link.getText(), "label for pressed link is correct");

// Setup for SHIFT Key
await browser.performActions([{
type: 'key',
id: 'keyboard3',
actions: [{ type: 'keyDown', value: KEYS.SHIFT }],
}]);
// Action
await link.click();
await browser.releaseActions();
// Check
eventResult = await browser.$("#result");
assert.strictEqual(await eventResult.getText(), 'SHIFT:' + await link.getText(), "label for pressed link is correct");
});

it("passes special keys pressed while item pressed with keyboard", async () => {
const breadcrumbs = await browser.$("#breadcrumbsPreventDefault"),
link = (await breadcrumbs.shadow$$("ui5-link"))[1];

// Setup for META Key
await browser.performActions([{
type: 'key',
id: 'keyboard1',
actions: [
{ type: 'keyDown', value: KEYS.META },
{ type: 'keyDown', value: KEYS.ENTER }
],
}]);
// Action
await link.click();
await browser.releaseActions();
// Check
eventResult = await browser.$("#result");
assert.strictEqual(await eventResult.getText(), 'META:' + await link.getText(), "label for pressed link is correct");

// Setup for ALT Key
await browser.performActions([{
type: 'key',
id: 'keyboard2',
actions: [
{ type: 'keyDown', value: KEYS.ALT },
{ type: 'keyDown', value: KEYS.ENTER }
],
}]);
// Action
await link.click();
await browser.releaseActions();
// Check
eventResult = await browser.$("#result");
assert.strictEqual(await eventResult.getText(), 'ALT:' + await link.getText(), "label for pressed link is correct");

// Setup for SHIFT Key
await browser.performActions([{
type: 'key',
id: 'keyboard3',
actions: [
{ type: 'keyDown', value: KEYS.SHIFT },
{ type: 'keyDown', value: KEYS.ENTER }
],
}]);
// Action
await link.click();
await browser.releaseActions();
// Check
eventResult = await browser.$("#result");
assert.strictEqual(await eventResult.getText(), 'SHIFT:' + await link.getText(), "label for pressed link is correct");

// Setup for CTRL Key
await browser.performActions([{
type: 'key',
id: 'keyboard3',
actions: [
{ type: 'keyDown', value: KEYS.CTRL },
{ type: 'keyDown', value: KEYS.ENTER }
],
}]);
// Action
await link.click();
await browser.releaseActions();
// Check
eventResult = await browser.$("#result");
assert.strictEqual(await eventResult.getText(), 'CTRL:' + await link.getText(), "label for pressed link is correct");
});

});
Loading

0 comments on commit 379cc7b

Please sign in to comment.