Updated shelf-sort to use sortablejs

This commit is contained in:
Dan Brown 2019-06-06 11:49:51 +01:00
parent f12a7540c9
commit 2eba8c611e
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
5 changed files with 35 additions and 37 deletions

7
package-lock.json generated
View file

@ -6264,6 +6264,13 @@
"integrity": "sha512-UDp0epjaZikuInoJA9rlEIJaSTQThabq0R9x7TqBdl0qGVFKKzo6glP6ubfzWBmV4iRIfbSOs2DV06s3B5h5tA==", "integrity": "sha512-UDp0epjaZikuInoJA9rlEIJaSTQThabq0R9x7TqBdl0qGVFKKzo6glP6ubfzWBmV4iRIfbSOs2DV06s3B5h5tA==",
"requires": { "requires": {
"sortablejs": "^1.9.0" "sortablejs": "^1.9.0"
},
"dependencies": {
"sortablejs": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.9.0.tgz",
"integrity": "sha512-Ot6bYJ6PoqPmpsqQYXjn1+RKrY2NWQvQt/o4jfd/UYwVWndyO5EPO8YHbnm5HIykf8ENsm4JUrdAvolPT86yYA=="
}
} }
}, },
"watchpack": { "watchpack": {

View file

@ -29,6 +29,7 @@
"jquery-sortable": "^0.9.13", "jquery-sortable": "^0.9.13",
"markdown-it": "^8.4.2", "markdown-it": "^8.4.2",
"markdown-it-task-lists": "^2.1.1", "markdown-it-task-lists": "^2.1.1",
"sortablejs": "^1.9.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vuedraggable": "^2.21.0" "vuedraggable": "^2.21.0"
}, },

View file

@ -1,25 +1,26 @@
import "jquery-sortable"; import Sortable from "sortablejs";
class ShelfSort { class ShelfSort {
constructor(elem) { constructor(elem) {
this.elem = elem; this.elem = elem;
this.sortGroup = this.initSortable();
this.input = document.getElementById('books-input'); this.input = document.getElementById('books-input');
this.shelfBooksList = elem.querySelector('[shelf-sort-assigned-books]');
this.initSortable();
this.setupListeners(); this.setupListeners();
} }
initSortable() { initSortable() {
const placeHolderContent = this.getPlaceholderHTML(); const scrollBoxes = this.elem.querySelectorAll('.scroll-box');
// TODO - Load sortable at this point for (let scrollBox of scrollBoxes) {
return $('.scroll-box').sortable({ new Sortable(scrollBox, {
group: 'shelf-books', group: 'shelf-books',
exclude: '.instruction,.scroll-box-placeholder', ghostClass: 'primary-background-light',
containerSelector: 'div.scroll-box', animation: 150,
itemSelector: '.scroll-box-item', onSort: this.onChange.bind(this),
placeholder: placeHolderContent, });
onDrop: this.onDrop.bind(this) }
});
} }
setupListeners() { setupListeners() {
@ -45,27 +46,11 @@ class ShelfSort {
this.onChange(); this.onChange();
} }
onDrop($item, container, _super) {
this.onChange();
_super($item, container);
}
onChange() { onChange() {
const data = this.sortGroup.sortable('serialize').get(); const shelfBookElems = Array.from(this.shelfBooksList.querySelectorAll('[data-id]'));
this.input.value = data[0].map(item => item.id).join(','); this.input.value = shelfBookElems.map(elem => elem.getAttribute('data-id')).join(',');
const instruction = this.elem.querySelector('.scroll-box-item.instruction');
instruction.parentNode.insertBefore(instruction, instruction.parentNode.children[0]);
} }
getPlaceholderHTML() {
const placeHolder = document.querySelector('.scroll-box-placeholder');
placeHolder.style.display = 'block';
const placeHolderContent = placeHolder.outerHTML;
placeHolder.style.display = 'none';
return placeHolderContent;
}
} }
export default ShelfSort; export default ShelfSort;

View file

@ -216,12 +216,23 @@ $btt-size: 40px;
.scroll-box-item { .scroll-box-item {
padding: $-xs $-m; padding: $-xs $-m;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
border-top: 1px solid #DDD;
margin-top: -1px;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
} }
} }
.scroll-box[data-instruction]:before {
content: attr(data-instruction);
padding: $-xs $-m;
border-bottom: 1px solid #DDD;
display: block;
font-size: 0.75rem;
color: #666;
}
.fullscreen { .fullscreen {
border:0; border:0;
position:fixed; position:fixed;

View file

@ -15,13 +15,7 @@
<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', ',') : '' }}">
<div class="scroll-box"> <div class="scroll-box" shelf-sort-assigned-books data-instruction="{{ trans('entities.shelves_drag_books') }}">
<div class="scroll-box-item text-small text-muted instruction">
{{ trans('entities.shelves_drag_books') }}
</div>
<div class="scroll-box-item scroll-box-placeholder" style="display: none;">
<a href="#" class="text-muted">@icon('book') ...</a>
</div>
@if (isset($shelfBooks) && count($shelfBooks) > 0) @if (isset($shelfBooks) && count($shelfBooks) > 0)
@foreach ($shelfBooks as $book) @foreach ($shelfBooks as $book)
<div data-id="{{ $book->id }}" class="scroll-box-item"> <div data-id="{{ $book->id }}" class="scroll-box-item">