-
Notifications
You must be signed in to change notification settings - Fork 424
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add modifier to filter keyboard events. (#442)
* Add modifier to filter keyboard events. * Fixed that some keys were not working. * add ie support * added tests for filtering keyboard events * fix modifier position The modifier was in the wrong position. It should be before the target. * before: evt@global.modifier->... * after: evt.modifier@global->... * Remove support for ie11 * fix action.toString before:`${event}@${target}.${filter}->${identifier}#${methodName}` after: `${event}.${filter}@${target}->${identifier}#${methodName}` * Document added about keyboard event filters * support: Modifiable keymapping * add example: tabs(for modifier) * add docs of custom keymapping * fixed merge miss * fixed example * add modifier key(meta, ctrl, alt, shift) * add default keyMapping [a-z], [0-9] * Added documentation on composite filters * Update docs/reference/actions.md Co-authored-by: LB (Ben Johnston) <mail@lb.ee> * Update docs/reference/actions.md Co-authored-by: LB (Ben Johnston) <mail@lb.ee> * Update docs/reference/actions.md Co-authored-by: LB (Ben Johnston) <mail@lb.ee> * Update docs/reference/actions.md Co-authored-by: LB (Ben Johnston) <mail@lb.ee> * Update docs/reference/actions.md Co-authored-by: LB (Ben Johnston) <mail@lb.ee> * Update docs/reference/actions.md Co-authored-by: LB (Ben Johnston) <mail@lb.ee> * Update docs/reference/actions.md Co-authored-by: LB (Ben Johnston) <mail@lb.ee> * Update docs/reference/actions.md Co-authored-by: LB (Ben Johnston) <mail@lb.ee> * Update docs/reference/actions.md Co-authored-by: LB (Ben Johnston) <mail@lb.ee> * Update docs/reference/actions.md Co-authored-by: LB (Ben Johnston) <mail@lb.ee> * fixed sample code(The behavior of select all in listbox is ctrl+a) * Update docs/reference/actions.md Co-authored-by: LB (Ben Johnston) <mail@lb.ee> * lint --fix Co-authored-by: Takuya Nakajima [LIFULL] <nakajita@PCZ04304.local> Co-authored-by: LB (Ben Johnston) <mail@lb.ee>
- Loading branch information
1 parent
88b2641
commit f0af5bd
Showing
14 changed files
with
442 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import { Controller } from "@hotwired/stimulus" | ||
|
||
export default class extends Controller { | ||
static targets = [ "tab", "tabpanel" ] | ||
static classes = [ "current" ] | ||
static values = { index: { default: 0, type: Number } } | ||
|
||
next() { | ||
if (this.indexValue < this.lastIndex) { | ||
this.indexValue++ | ||
return | ||
} | ||
this.indexValue = 0 | ||
} | ||
|
||
previous() { | ||
if (this.indexValue > 0) { | ||
this.indexValue-- | ||
return | ||
} | ||
this.indexValue = this.lastIndex | ||
} | ||
|
||
open(evt) { | ||
this.indexValue = this.tabTargets.indexOf(evt.currentTarget) | ||
} | ||
|
||
get lastIndex() { | ||
return this.tabTargets.length - 1 | ||
} | ||
|
||
indexValueChanged(current, old) { | ||
let panels = this.tabpanelTargets | ||
let tabs = this.tabTargets | ||
|
||
if (old != null) { | ||
panels[old].classList.remove(...this.currentClasses) | ||
tabs[old].tabIndex = -1 | ||
} | ||
panels[current].classList.add(...this.currentClasses) | ||
tabs[current].tabIndex = 0 | ||
tabs[current].focus() | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<%- include("layout/head") %> | ||
|
||
<div data-controller="tabs" data-tabs-current-class="tabpanel--current" aria-label="example"> | ||
<p>This tabbed interface is operated by focusing on a button and pressing the left and right keys.</p> | ||
<div role="tablist"> | ||
<button | ||
id="tab1" | ||
role="tab" | ||
tabindex="0" | ||
data-action="keydown.left->tabs#previous keydown.right->tabs#next click->tabs#open" | ||
data-tabs-target="tab" | ||
aria-controls="panel1" | ||
>tab1</button> | ||
<button | ||
id="tab2" | ||
role="tab" | ||
tabindex="0" | ||
data-action="keydown.left->tabs#previous keydown.right->tabs#next click->tabs#open" | ||
data-tabs-target="tab" | ||
aria-controls="panel2" | ||
>tab2</button> | ||
</div> | ||
|
||
<div | ||
id="panel1" | ||
role="tabpanel" | ||
tabindex="0" | ||
data-tabs-target="tabpanel" | ||
class="tabpanel tabpanel--current" | ||
aria-labelledby="tab1" | ||
>🐵</div> | ||
<div | ||
id="panel2" | ||
role="tabpanel" | ||
tabindex="0" | ||
data-tabs-target="tabpanel" | ||
class="tabpanel" | ||
aria-labelledby="tab2" | ||
>🙈</div> | ||
</div> | ||
|
||
<%- include("layout/tail") %> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.