webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-31 15:24:31 +03:00
Code Activity

Updated shelf-sort to use sortablejs

Browse Source
This commit is contained in:
Dan Brown
2019-06-06 11:49:51 +01:00
parent f12a7540c9
commit 2eba8c611e
5 changed files with 35 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
resources/assets/js/components/shelf-sort.js
View File

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

11
resources/assets/sass/styles.scss
View File

@ -216,12 +216,23 @@ $btt-size: 40px;
.scroll-box-item {
padding: $-xs $-m;
border-bottom: 1px solid #DDD;
border-top: 1px solid #DDD;
margin-top: -1px;
&:last-child {
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 {
border:0;
position:fixed;