gaiety/sortable-recipes
1
0
Fork 0
Code Activity

Major progress for a11y sorting

Browse source
This commit is contained in:
Ava Wroten 2020-03-04 10:06:08 -06:00
parent acebd434c1
commit 7ac2a80e00
4 changed files with 48 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ember-ui/app/components/meal-list.hbs
View file

@ -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}}

2
ember-ui/app/components/sortable-group-accessible.hbs
View file

@ -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>

24
ember-ui/app/components/sortable-group-accessible.js
View file

@ -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(); }
}

36
ember-ui/app/components/sortable-item-accessible.hbs
View file

@ -1,17 +1,19 @@
<div
class='relative border border-gray-400
{{if (and @groupHasFocus (eq @currentIndex @selectedIndex)) 'border-orange-400'}}'>
{{#if (and @groupHasFocus (eq @currentIndex @selectedIndex))}}
<button
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
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>
</button>
{{/if}}
{{yield}}
</div>
{{#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>
</button>
{{/if}}
{{yield}}
</div>
{{/let}}