74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import { tracked } from "@glimmer/tracking";
|
|
import { action } from "@ember/object";
|
|
import { next } from '@ember/runloop';
|
|
|
|
export default class SortableGroupAccessibleComponent extends Component {
|
|
@tracked selectedIndex = 0;
|
|
@tracked groupHasFocus = false;
|
|
|
|
uniqId = uuid();
|
|
|
|
get listElement() { return document.querySelector(`[data-id="${this.uniqId}"]`); }
|
|
|
|
@action
|
|
handleFocus() { this.groupHasFocus = true; }
|
|
|
|
@action
|
|
handleBlur({ target, relatedTarget }) {
|
|
if (!target.contains(relatedTarget)) this.groupHasFocus = false;
|
|
}
|
|
|
|
@action
|
|
handleArrowUp() {
|
|
if (this.selectedIndex > 0) {
|
|
this.selectedIndex -= 1;
|
|
}
|
|
}
|
|
|
|
@action
|
|
handleArrowDown() {
|
|
if (this.selectedIndex < this.args.models.length - 1) {
|
|
this.selectedIndex += 1;
|
|
}
|
|
}
|
|
|
|
@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;
|
|
|
|
next(this, function() {
|
|
this.listElement.querySelector('[data-action-up]').focus();
|
|
});
|
|
}
|
|
|
|
@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;
|
|
|
|
next(this, function() {
|
|
this.listElement.querySelector('[data-action-down]').focus();
|
|
});
|
|
}
|
|
|
|
preventDefault(evt) { evt.preventDefault(); }
|
|
}
|
|
|
|
// Thanks to jed https://gist.github.com/jed/982883
|
|
function uuid(a) {
|
|
return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,uuid)
|
|
}
|