Added ability to click books in shelf-sort

This commit is contained in:
Dan Brown 2018-09-16 16:59:01 +01:00
parent b89411c108
commit f455b317ec
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 33 additions and 3 deletions

View File

@ -5,6 +5,7 @@ class ShelfSort {
this.elem = elem; this.elem = elem;
this.sortGroup = this.initSortable(); this.sortGroup = this.initSortable();
this.input = document.getElementById('books-input'); this.input = document.getElementById('books-input');
this.setupListeners();
} }
initSortable() { initSortable() {
@ -21,10 +22,39 @@ class ShelfSort {
}); });
} }
setupListeners() {
this.elem.addEventListener('click', event => {
const sortItem = event.target.closest('.scroll-box-item:not(.instruction)');
if (sortItem) {
event.preventDefault();
this.sortItemClick(sortItem);
}
});
}
/**
* Called when a sort item is clicked.
* @param {Element} sortItem
*/
sortItemClick(sortItem) {
const lists = this.elem.querySelectorAll('.scroll-box');
const newList = Array.from(lists).filter(list => sortItem.parentElement !== list);
if (newList.length > 0) {
newList[0].appendChild(sortItem);
}
this.onChange();
}
onDrop($item, container, _super) { onDrop($item, container, _super) {
this.onChange();
_super($item, container);
}
onChange() {
const data = this.sortGroup.sortable('serialize').get(); const data = this.sortGroup.sortable('serialize').get();
this.input.value = data[0].map(item => item.id).join(','); this.input.value = data[0].map(item => item.id).join(',');
_super($item, container); const instruction = this.elem.querySelector('.scroll-box-item.instruction');
instruction.parentNode.insertBefore(instruction, instruction.parentNode.children[0]);
} }
getPlaceholderHTML() { getPlaceholderHTML() {

View File

@ -10,9 +10,9 @@
@include('form/textarea', ['name' => 'description']) @include('form/textarea', ['name' => 'description'])
</div> </div>
<div class="row"> <div shelf-sort class="row">
<div class="col-md-6"> <div class="col-md-6">
<div shelf-sort class="form-group"> <div class="form-group">
<label for="books">{{ trans('entities.shelves_books') }}</label> <label for="books">{{ trans('entities.shelves_books') }}</label>
<input type="hidden" id="books-input" name="books" <input type="hidden" id="books-input" name="books"
value="{{ isset($shelf) ? $shelf->books->implode('id', ',') : '' }}"> value="{{ isset($shelf) ? $shelf->books->implode('id', ',') : '' }}">