gaiety/sortable-recipes
1
0
Fork 0
Code Activity

Better blur handling

Browse source
This commit is contained in:
Ava Wroten 2020-03-05 10:13:57 -06:00
parent 05764b07c4
commit 450d8b4036
5 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,8 @@
<LinkTo @route="meal" @model={{@meal}} class="block bg-white border border-gray-400 focus:border-teal-500 focus:shadow-sm focus:bg-teal-100 outline-none" data-test-id="meal-link">
<LinkTo
{{on 'blur' @handleBlur}}
@route="meal"
@model={{@meal}}
class="block bg-white border border-gray-400 focus:border-teal-500 focus:shadow-sm focus:bg-teal-100 outline-none" data-test-id="meal-link">
<div class="max-w-sm w-full lg:max-w-full lg:flex">
<div class="h-48 lg:h-auto lg:w-48 flex-none">
<img src={{@meal.thumbnailUrl}} alt="" role="presentation" class="h-full w-full object-cover" data-test-id="meal-preview-image">

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

@ -1,5 +1,6 @@
<SortableGroupAccessible
@models={{this.sortedItems}} as |groupHasFocus selectedIndex orderItemDown orderItemUp|>
@models={{this.sortedItems}}
as |groupHasFocus selectedIndex orderItemDown orderItemUp handleBlur|>
<SortableGroup
@onChange={{action this.reorderMeals}}
as |group|>
@ -9,12 +10,16 @@
@currentIndex={{index}}
@selectedIndex={{selectedIndex}}
@orderItemDown={{orderItemDown}}
@orderItemUp={{orderItemUp}}>
@orderItemUp={{orderItemUp}}
@handleBlur={{handleBlur}}>
<SortableItem
@model={{meal}}
@group={{group}}
data-test-id="meal-item">
<MealItem @meal={{meal}} {{on "click" this.openMealDetails}} />
<MealItem
@meal={{meal}}
@handleBlur={{handleBlur}}
/>
</SortableItem>
</SortableItemAccessible>
{{/each}}

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

@ -8,5 +8,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 (action 'orderItemDown') (action 'orderItemUp')}}
{{yield this.groupHasFocus this.selectedIndex (action 'orderItemDown') (action 'orderItemUp') (action 'handleBlur')}}
</div>

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

@ -15,8 +15,8 @@ export default class SortableGroupAccessibleComponent extends Component {
handleFocus() { this.groupHasFocus = true; }
@action
handleBlur({ target, relatedTarget }) {
if (!target.contains(relatedTarget)) this.groupHasFocus = false;
handleBlur({ relatedTarget }) {
if (!this.listElement.contains(relatedTarget)) this.groupHasFocus = false;
}
@action

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

@ -3,6 +3,7 @@
{{#if active}}
<button
{{on 'click' (fn @orderItemUp @currentIndex)}}
{{on 'blur' @handleBlur}}
data-action-up
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">
@ -10,6 +11,7 @@
</button>
<button
{{on 'click' (fn @orderItemDown @currentIndex)}}
{{on 'blur' @handleBlur}}
data-action-down
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">