Major progress for a11y sorting
This commit is contained in:
parent
acebd434c1
commit
7ac2a80e00
4 changed files with 48 additions and 20 deletions
|
@ -1,5 +1,5 @@
|
|||
<SortableGroupAccessible
|
||||
@models={{this.sortedItems}} as |groupHasFocus selectedIndex|>
|
||||
@models={{this.sortedItems}} as |groupHasFocus selectedIndex orderItemDown orderItemUp|>
|
||||
<SortableGroup
|
||||
@onChange={{action this.reorderMeals}}
|
||||
as |group|>
|
||||
|
@ -7,7 +7,9 @@
|
|||
<SortableItemAccessible
|
||||
@groupHasFocus={{groupHasFocus}}
|
||||
@currentIndex={{index}}
|
||||
@selectedIndex={{selectedIndex}}>
|
||||
@selectedIndex={{selectedIndex}}
|
||||
@orderItemDown={{orderItemDown}}
|
||||
@orderItemUp={{orderItemUp}}>
|
||||
<SortableItem
|
||||
@model={{meal}}
|
||||
@group={{group}}
|
||||
|
|
|
@ -7,5 +7,5 @@
|
|||
{{key-down this.preventDefault key='ArrowDown'}}
|
||||
tabindex="0"
|
||||
class="shadow-md bg-gray-200 outline-none border border-gray-400 focus:border-teal-400 focus:shadow-lg">
|
||||
{{yield this.groupHasFocus this.selectedIndex}}
|
||||
{{yield this.groupHasFocus this.selectedIndex (action 'orderItemDown') (action 'orderItemUp')}}
|
||||
</div>
|
||||
|
|
|
@ -28,5 +28,29 @@ export default class SortableGroupAccessibleComponent extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
@action
|
||||
async orderItemUp(index) {
|
||||
if (index - 1 < 0) return;
|
||||
|
||||
let item = this.args.models.objectAt(index);
|
||||
let prevItem = this.args.models.objectAt(index - 1);
|
||||
|
||||
item.listOrder = index - 1;
|
||||
prevItem.listOrder = index;
|
||||
this.selectedIndex = index - 1;
|
||||
}
|
||||
|
||||
@action
|
||||
async orderItemDown(index) {
|
||||
if (index + 1 >= this.args.models.length) return;
|
||||
|
||||
let item = this.args.models.objectAt(index);
|
||||
let nextItem = this.args.models.objectAt(index + 1);
|
||||
|
||||
item.listOrder = index + 1;
|
||||
nextItem.listOrder = index;
|
||||
this.selectedIndex = index + 1;
|
||||
}
|
||||
|
||||
preventDefault(evt) { evt.preventDefault(); }
|
||||
}
|
||||
|
|
|
@ -1,13 +1,14 @@
|
|||
<div
|
||||
class='relative border border-gray-400
|
||||
{{if (and @groupHasFocus (eq @currentIndex @selectedIndex)) 'border-orange-400'}}'>
|
||||
{{#if (and @groupHasFocus (eq @currentIndex @selectedIndex))}}
|
||||
{{#let (and @groupHasFocus (eq @currentIndex @selectedIndex)) as |active|}}
|
||||
<div class='relative border border-gray-400 {{if active 'border-orange-400'}}'>
|
||||
{{#if active}}
|
||||
<button
|
||||
{{on 'click' (fn @orderItemUp @currentIndex)}}
|
||||
role="button"
|
||||
class="text-gray-800 outline-none absolute left-0 top-0 p-2 m-4 bg-white rounded-lg border-2 border-gray-800 focus:border-teal-400 shadow-sm">
|
||||
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>
|
||||
</button>
|
||||
<button
|
||||
{{on 'click' (fn @orderItemDown @currentIndex)}}
|
||||
role="button"
|
||||
class="transform rotate-180 text-gray-800 outline-none absolute left-0 bottom-0 p-2 m-4 bg-white rounded-lg border-2 border-gray-800 focus:border-teal-400 shadow-sm">
|
||||
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>
|
||||
|
@ -15,3 +16,4 @@
|
|||
{{/if}}
|
||||
{{yield}}
|
||||
</div>
|
||||
{{/let}}
|
||||
|
|
Loading…
Add table
Reference in a new issue