diff --git a/package-lock.json b/package-lock.json
index eab4ce9b3..d6e30513e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3435,21 +3435,6 @@
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
},
- "jquery-sortable": {
- "version": "0.9.13",
- "resolved": "https://registry.npmjs.org/jquery-sortable/-/jquery-sortable-0.9.13.tgz",
- "integrity": "sha1-HL+2VQE6B0c3BXHwbiL1JKAP+6I=",
- "requires": {
- "jquery": "^2.1.2"
- },
- "dependencies": {
- "jquery": {
- "version": "2.2.4",
- "resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz",
- "integrity": "sha1-LInWiJterFIqfuoywUUhVZxsvwI="
- }
- }
- },
"js-base64": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
diff --git a/package.json b/package.json
index fb06afc83..0198f0ccc 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
"codemirror": "^5.47.0",
"dropzone": "^5.5.1",
"jquery": "^3.4.1",
- "jquery-sortable": "^0.9.13",
"markdown-it": "^8.4.2",
"markdown-it-task-lists": "^2.1.1",
"sortablejs": "^1.9.0",
diff --git a/public/libs/jquery-sortable/jquery-sortable.min.js b/public/libs/jquery-sortable/jquery-sortable.min.js
deleted file mode 100644
index 4b483e5e8..000000000
--- a/public/libs/jquery-sortable/jquery-sortable.min.js
+++ /dev/null
@@ -1,19 +0,0 @@
-!function(d,B,m,f){function v(a,b){var c=Math.max(0,a[0]-b[0],b[0]-a[1]),e=Math.max(0,a[2]-b[1],b[1]-a[3]);return c+e}function w(a,b,c,e){var k=a.length;e=e?"offset":"position";for(c=c||0;k--;){var g=a[k].el?a[k].el:d(a[k]),l=g[e]();l.left+=parseInt(g.css("margin-left"),10);l.top+=parseInt(g.css("margin-top"),10);b[k]=[l.left-c,l.left+g.outerWidth()+c,l.top-c,l.top+g.outerHeight()+c]}}function p(a,b){var c=b.offset();return{left:a.left-c.left,top:a.top-c.top}}function x(a,b,c){b=[b.left,b.top];c=
-c&&[c.left,c.top];for(var e,k=a.length,d=[];k--;)e=a[k],d[k]=[k,v(e,b),c&&v(e,c)];return d=d.sort(function(a,b){return b[1]-a[1]||b[2]-a[2]||b[0]-a[0]})}function q(a){this.options=d.extend({},n,a);this.containers=[];this.options.rootGroup||(this.scrollProxy=d.proxy(this.scroll,this),this.dragProxy=d.proxy(this.drag,this),this.dropProxy=d.proxy(this.drop,this),this.placeholder=d(this.options.placeholder),a.isValidTarget||(this.options.isValidTarget=f))}function t(a,b){this.el=a;this.options=d.extend({},
-z,b);this.group=q.get(this.options);this.rootGroup=this.options.rootGroup||this.group;this.handle=this.rootGroup.options.handle||this.rootGroup.options.itemSelector;var c=this.rootGroup.options.itemPath;this.target=c?this.el.find(c):this.el;this.target.on(r.start,this.handle,d.proxy(this.dragInit,this));this.options.drop&&this.group.containers.push(this)}var r,z={drag:!0,drop:!0,exclude:"",nested:!0,vertical:!0},n={afterMove:function(a,b,c){},containerPath:"",containerSelector:"ol, ul",distance:0,
-delay:0,handle:"",itemPath:"",itemSelector:"li",bodyClass:"dragging",draggedClass:"dragged",isValidTarget:function(a,b){return!0},onCancel:function(a,b,c,e){},onDrag:function(a,b,c,e){a.css(b)},onDragStart:function(a,b,c,e){a.css({height:a.outerHeight(),width:a.outerWidth()});a.addClass(b.group.options.draggedClass);d("body").addClass(b.group.options.bodyClass)},onDrop:function(a,b,c,e){a.removeClass(b.group.options.draggedClass).removeAttr("style");d("body").removeClass(b.group.options.bodyClass)},
-onMousedown:function(a,b,c){if(!c.target.nodeName.match(/^(input|select|textarea)$/i))return c.preventDefault(),!0},placeholderClass:"placeholder",placeholder:'<li class="placeholder"></li>',pullPlaceholder:!0,serialize:function(a,b,c){a=d.extend({},a.data());if(c)return[b];b[0]&&(a.children=b);delete a.subContainers;delete a.sortable;return a},tolerance:0},s={},y=0,A={left:0,top:0,bottom:0,right:0};r={start:"touchstart.sortable mousedown.sortable",drop:"touchend.sortable touchcancel.sortable mouseup.sortable",
-drag:"touchmove.sortable mousemove.sortable",scroll:"scroll.sortable"};q.get=function(a){s[a.group]||(a.group===f&&(a.group=y++),s[a.group]=new q(a));return s[a.group]};q.prototype={dragInit:function(a,b){this.$document=d(b.el[0].ownerDocument);var c=d(a.target).closest(this.options.itemSelector);c.length&&(this.item=c,this.itemContainer=b,!this.item.is(this.options.exclude)&&this.options.onMousedown(this.item,n.onMousedown,a)&&(this.setPointer(a),this.toggleListeners("on"),this.setupDelayTimer(),
-this.dragInitDone=!0))},drag:function(a){if(!this.dragging){if(!this.distanceMet(a)||!this.delayMet)return;this.options.onDragStart(this.item,this.itemContainer,n.onDragStart,a);this.item.before(this.placeholder);this.dragging=!0}this.setPointer(a);this.options.onDrag(this.item,p(this.pointer,this.item.offsetParent()),n.onDrag,a);a=this.getPointer(a);var b=this.sameResultBox,c=this.options.tolerance;(!b||b.top-c>a.top||b.bottom+c<a.top||b.left-c>a.left||b.right+c<a.left)&&!this.searchValidTarget()&&
-(this.placeholder.detach(),this.lastAppendedItem=f)},drop:function(a){this.toggleListeners("off");this.dragInitDone=!1;if(this.dragging){if(this.placeholder.closest("html")[0])this.placeholder.before(this.item).detach();else this.options.onCancel(this.item,this.itemContainer,n.onCancel,a);this.options.onDrop(this.item,this.getContainer(this.item),n.onDrop,a);this.clearDimensions();this.clearOffsetParent();this.lastAppendedItem=this.sameResultBox=f;this.dragging=!1}},searchValidTarget:function(a,b){a||
-(a=this.relativePointer||this.pointer,b=this.lastRelativePointer||this.lastPointer);for(var c=x(this.getContainerDimensions(),a,b),e=c.length;e--;){var d=c[e][0];if(!c[e][1]||this.options.pullPlaceholder)if(d=this.containers[d],!d.disabled){if(!this.$getOffsetParent()){var g=d.getItemOffsetParent();a=p(a,g);b=p(b,g)}if(d.searchValidTarget(a,b))return!0}}this.sameResultBox&&(this.sameResultBox=f)},movePlaceholder:function(a,b,c,e){var d=this.lastAppendedItem;if(e||!d||d[0]!==b[0])b[c](this.placeholder),
-this.lastAppendedItem=b,this.sameResultBox=e,this.options.afterMove(this.placeholder,a,b)},getContainerDimensions:function(){this.containerDimensions||w(this.containers,this.containerDimensions=[],this.options.tolerance,!this.$getOffsetParent());return this.containerDimensions},getContainer:function(a){return a.closest(this.options.containerSelector).data(m)},$getOffsetParent:function(){if(this.offsetParent===f){var a=this.containers.length-1,b=this.containers[a].getItemOffsetParent();if(!this.options.rootGroup)for(;a--;)if(b[0]!=
-this.containers[a].getItemOffsetParent()[0]){b=!1;break}this.offsetParent=b}return this.offsetParent},setPointer:function(a){a=this.getPointer(a);if(this.$getOffsetParent()){var b=p(a,this.$getOffsetParent());this.lastRelativePointer=this.relativePointer;this.relativePointer=b}this.lastPointer=this.pointer;this.pointer=a},distanceMet:function(a){a=this.getPointer(a);return Math.max(Math.abs(this.pointer.left-a.left),Math.abs(this.pointer.top-a.top))>=this.options.distance},getPointer:function(a){var b=
-a.originalEvent||a.originalEvent.touches&&a.originalEvent.touches[0];return{left:a.pageX||b.pageX,top:a.pageY||b.pageY}},setupDelayTimer:function(){var a=this;this.delayMet=!this.options.delay;this.delayMet||(clearTimeout(this._mouseDelayTimer),this._mouseDelayTimer=setTimeout(function(){a.delayMet=!0},this.options.delay))},scroll:function(a){this.clearDimensions();this.clearOffsetParent()},toggleListeners:function(a){var b=this;d.each(["drag","drop","scroll"],function(c,e){b.$document[a](r[e],b[e+
-"Proxy"])})},clearOffsetParent:function(){this.offsetParent=f},clearDimensions:function(){this.traverse(function(a){a._clearDimensions()})},traverse:function(a){a(this);for(var b=this.containers.length;b--;)this.containers[b].traverse(a)},_clearDimensions:function(){this.containerDimensions=f},_destroy:function(){s[this.options.group]=f}};t.prototype={dragInit:function(a){var b=this.rootGroup;!this.disabled&&!b.dragInitDone&&this.options.drag&&this.isValidDrag(a)&&b.dragInit(a,this)},isValidDrag:function(a){return 1==
-a.which||"touchstart"==a.type&&1==a.originalEvent.touches.length},searchValidTarget:function(a,b){var c=x(this.getItemDimensions(),a,b),e=c.length,d=this.rootGroup,g=!d.options.isValidTarget||d.options.isValidTarget(d.item,this);if(!e&&g)return d.movePlaceholder(this,this.target,"append"),!0;for(;e--;)if(d=c[e][0],!c[e][1]&&this.hasChildGroup(d)){if(this.getContainerGroup(d).searchValidTarget(a,b))return!0}else if(g)return this.movePlaceholder(d,a),!0},movePlaceholder:function(a,b){var c=d(this.items[a]),
-e=this.itemDimensions[a],k="after",g=c.outerWidth(),f=c.outerHeight(),h=c.offset(),h={left:h.left,right:h.left+g,top:h.top,bottom:h.top+f};this.options.vertical?b.top<=(e[2]+e[3])/2?(k="before",h.bottom-=f/2):h.top+=f/2:b.left<=(e[0]+e[1])/2?(k="before",h.right-=g/2):h.left+=g/2;this.hasChildGroup(a)&&(h=A);this.rootGroup.movePlaceholder(this,c,k,h)},getItemDimensions:function(){this.itemDimensions||(this.items=this.$getChildren(this.el,"item").filter(":not(."+this.group.options.placeholderClass+
-", ."+this.group.options.draggedClass+")").get(),w(this.items,this.itemDimensions=[],this.options.tolerance));return this.itemDimensions},getItemOffsetParent:function(){var a=this.el;return"relative"===a.css("position")||"absolute"===a.css("position")||"fixed"===a.css("position")?a:a.offsetParent()},hasChildGroup:function(a){return this.options.nested&&this.getContainerGroup(a)},getContainerGroup:function(a){var b=d.data(this.items[a],"subContainers");if(b===f){var c=this.$getChildren(this.items[a],
-"container"),b=!1;c[0]&&(b=d.extend({},this.options,{rootGroup:this.rootGroup,group:y++}),b=c[m](b).data(m).group);d.data(this.items[a],"subContainers",b)}return b},$getChildren:function(a,b){var c=this.rootGroup.options,e=c[b+"Path"],c=c[b+"Selector"];a=d(a);e&&(a=a.find(e));return a.children(c)},_serialize:function(a,b){var c=this,e=this.$getChildren(a,b?"item":"container").not(this.options.exclude).map(function(){return c._serialize(d(this),!b)}).get();return this.rootGroup.options.serialize(a,
-e,b)},traverse:function(a){d.each(this.items||[],function(b){(b=d.data(this,"subContainers"))&&b.traverse(a)});a(this)},_clearDimensions:function(){this.itemDimensions=f},_destroy:function(){var a=this;this.target.off(r.start,this.handle);this.el.removeData(m);this.options.drop&&(this.group.containers=d.grep(this.group.containers,function(b){return b!=a}));d.each(this.items||[],function(){d.removeData(this,"subContainers")})}};var u={enable:function(){this.traverse(function(a){a.disabled=!1})},disable:function(){this.traverse(function(a){a.disabled=
-!0})},serialize:function(){return this._serialize(this.el,!0)},refresh:function(){this.traverse(function(a){a._clearDimensions()})},destroy:function(){this.traverse(function(a){a._destroy()})}};d.extend(t.prototype,u);d.fn[m]=function(a){var b=Array.prototype.slice.call(arguments,1);return this.map(function(){var c=d(this),e=c.data(m);if(e&&u[a])return u[a].apply(e,b)||this;e||a!==f&&"object"!==typeof a||c.data(m,new t(c,a));return this})}}(jQuery,window,"sortable");
diff --git a/readme.md b/readme.md
index 940deb04c..012a6bda4 100644
--- a/readme.md
+++ b/readme.md
@@ -142,7 +142,7 @@ These are the great open-source projects used to help build BookStack:
* [CodeMirror](https://codemirror.net)
* [Vue.js](http://vuejs.org/)
* [Axios](https://github.com/mzabriskie/axios)
-* [jQuery Sortable](https://johnny.github.io/jquery-sortable/)
+* [Sortable](https://github.com/SortableJS/Sortable) & [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)
* [Google Material Icons](https://material.io/icons/)
* [Dropzone.js](http://www.dropzonejs.com/)
* [clipboard.js](https://clipboardjs.com/)
diff --git a/resources/assets/js/components/book-sort.js b/resources/assets/js/components/book-sort.js
new file mode 100644
index 000000000..da2b28d8e
--- /dev/null
+++ b/resources/assets/js/components/book-sort.js
@@ -0,0 +1,204 @@
+import Sortable from "sortablejs";
+
+// Auto sort control
+const sortOperations = {
+ name: function(a, b) {
+ const aName = a.getAttribute('data-name').trim().toLowerCase();
+ const bName = b.getAttribute('data-name').trim().toLowerCase();
+ return aName.localeCompare(bName);
+ },
+ created: function(a, b) {
+ const aTime = Number(a.getAttribute('data-created'));
+ const bTime = Number(b.getAttribute('data-created'));
+ return bTime - aTime;
+ },
+ updated: function(a, b) {
+ const aTime = Number(a.getAttribute('data-updated'));
+ const bTime = Number(b.getAttribute('data-updated'));
+ return bTime - aTime;
+ },
+ chaptersFirst: function(a, b) {
+ const aType = a.getAttribute('data-type');
+ const bType = b.getAttribute('data-type');
+ if (aType === bType) {
+ return 0;
+ }
+ return (aType === 'chapter' ? -1 : 1);
+ },
+ chaptersLast: function(a, b) {
+ const aType = a.getAttribute('data-type');
+ const bType = b.getAttribute('data-type');
+ if (aType === bType) {
+ return 0;
+ }
+ return (aType === 'chapter' ? 1 : -1);
+ },
+};
+
+class BookSort {
+
+ constructor(elem) {
+ this.elem = elem;
+ this.sortContainer = elem.querySelector('[book-sort-boxes]');
+ this.input = elem.querySelector('[book-sort-input]');
+
+ const initialSortBox = elem.querySelector('.sort-box');
+ this.setupBookSortable(initialSortBox);
+ this.setupSortPresets();
+
+ window.$events.listen('entity-select-confirm', this.bookSelect.bind(this));
+ }
+
+ /**
+ * Setup the handlers for the preset sort type buttons.
+ */
+ setupSortPresets() {
+ let lastSort = '';
+ let reverse = false;
+ const reversibleTypes = ['name', 'created', 'updated'];
+
+ this.sortContainer.addEventListener('click', event => {
+ const sortButton = event.target.closest('.sort-box-options [data-sort]');
+ if (!sortButton) return;
+
+ event.preventDefault();
+ const sortLists = sortButton.closest('.sort-box').querySelectorAll('ul');
+ const sort = sortButton.getAttribute('data-sort');
+
+ reverse = (lastSort === sort) ? !reverse : false;
+ let sortFunction = sortOperations[sort];
+ if (reverse && reversibleTypes.includes(sort)) {
+ sortFunction = function(a, b) {
+ return 0 - sortOperations[sort](a, b)
+ };
+ }
+
+ for (let list of sortLists) {
+ const directItems = Array.from(list.children).filter(child => child.matches('li'));
+ directItems.sort(sortFunction).forEach(sortedItem => {
+ list.appendChild(sortedItem);
+ });
+ }
+
+ lastSort = sort;
+ this.updateMapInput();
+ });
+ }
+
+ /**
+ * Handle book selection from the entity selector.
+ * @param {Object} entityInfo
+ */
+ bookSelect(entityInfo) {
+ const alreadyAdded = this.elem.querySelector(`[data-type="book"][data-id="${entityInfo.id}"]`) !== null;
+ if (alreadyAdded) return;
+
+ const entitySortItemUrl = entityInfo.link + '/sort-item';
+ window.$http.get(entitySortItemUrl).then(resp => {
+ const wrap = document.createElement('div');
+ wrap.innerHTML = resp.data;
+ const newBookContainer = wrap.children[0];
+ this.sortContainer.append(newBookContainer);
+ this.setupBookSortable(newBookContainer);
+ });
+ }
+
+ /**
+ * Setup the given book container element to have sortable items.
+ * @param {Element} bookContainer
+ */
+ setupBookSortable(bookContainer) {
+ const sortElems = [bookContainer.querySelector('.sort-list')];
+ sortElems.push(...bookContainer.querySelectorAll('.entity-list-item + ul'));
+
+ const bookGroupConfig = {
+ name: 'book',
+ pull: ['book', 'chapter'],
+ put: ['book', 'chapter'],
+ };
+
+ const chapterGroupConfig = {
+ name: 'chapter',
+ pull: ['book', 'chapter'],
+ put: function(toList, fromList, draggedElem) {
+ return draggedElem.getAttribute('data-type') === 'page';
+ }
+ };
+
+ for (let sortElem of sortElems) {
+ new Sortable(sortElem, {
+ group: sortElem.classList.contains('sort-list') ? bookGroupConfig : chapterGroupConfig,
+ animation: 150,
+ fallbackOnBody: true,
+ swapThreshold: 0.65,
+ onSort: this.updateMapInput.bind(this),
+ dragClass: 'bg-white',
+ ghostClass: 'primary-background-light',
+ });
+ }
+ }
+
+ /**
+ * Update the input with our sort data.
+ */
+ updateMapInput() {
+ const pageMap = this.buildEntityMap();
+ this.input.value = JSON.stringify(pageMap);
+ }
+
+ /**
+ * Build up a mapping of entities with their ordering and nesting.
+ * @returns {Array}
+ */
+ buildEntityMap() {
+ const entityMap = [];
+ const lists = this.elem.querySelectorAll('.sort-list');
+
+ for (let list of lists) {
+ const bookId = list.closest('[data-type="book"]').getAttribute('data-id');
+ const directChildren = Array.from(list.children)
+ .filter(elem => elem.matches('[data-type="page"], [data-type="chapter"]'));
+ for (let i = 0; i < directChildren.length; i++) {
+ this.addBookChildToMap(directChildren[i], i, bookId, entityMap);
+ }
+ }
+
+ return entityMap;
+ }
+
+ /**
+ * Parse a sort item and add it to a data-map array.
+ * Parses sub0items if existing also.
+ * @param {Element} childElem
+ * @param {Number} index
+ * @param {Number} bookId
+ * @param {Array} entityMap
+ */
+ addBookChildToMap(childElem, index, bookId, entityMap) {
+ const type = childElem.getAttribute('data-type');
+ const parentChapter = false;
+ const childId = childElem.getAttribute('data-id');
+
+ entityMap.push({
+ id: childId,
+ sort: index,
+ parentChapter: parentChapter,
+ type: type,
+ book: bookId
+ });
+
+ const subPages = childElem.querySelectorAll('[data-type="page"]');
+ for (let i = 0; i < subPages.length; i++) {
+ entityMap.push({
+ id: subPages[i].getAttribute('data-id'),
+ sort: i,
+ parentChapter: childId,
+ type: 'page',
+ book: bookId
+ });
+ }
+ }
+
+}
+
+export default BookSort;
\ No newline at end of file
diff --git a/resources/assets/js/components/index.js b/resources/assets/js/components/index.js
index bd7432b8d..b48ceb20d 100644
--- a/resources/assets/js/components/index.js
+++ b/resources/assets/js/components/index.js
@@ -24,6 +24,7 @@ import triLayout from "./tri-layout";
import breadcrumbListing from "./breadcrumb-listing";
import permissionsTable from "./permissions-table";
import customCheckbox from "./custom-checkbox";
+import bookSort from "./book-sort";
const componentMapping = {
'dropdown': dropdown,
@@ -52,6 +53,7 @@ const componentMapping = {
'breadcrumb-listing': breadcrumbListing,
'permissions-table': permissionsTable,
'custom-checkbox': customCheckbox,
+ 'book-sort': bookSort,
};
window.components = {};
diff --git a/resources/assets/sass/_colors.scss b/resources/assets/sass/_colors.scss
index 4dfc9d4c3..8f2de6c82 100644
--- a/resources/assets/sass/_colors.scss
+++ b/resources/assets/sass/_colors.scss
@@ -59,8 +59,11 @@
}
/*
- * Entity background colors
+ * Standard & Entity background colors
*/
+.bg-white {
+ background-color: #FFFFFF;
+}
.bg-book {
background-color: $color-book;
}
diff --git a/resources/views/books/sort.blade.php b/resources/views/books/sort.blade.php
index 23259a593..676e7112e 100644
--- a/resources/views/books/sort.blade.php
+++ b/resources/views/books/sort.blade.php
@@ -16,16 +16,16 @@
<div class="grid left-focus gap-xl">
<div>
- <div class="card content-wrap">
+ <div book-sort class="card content-wrap">
<h1 class="list-heading mb-l">{{ trans('entities.books_sort') }}</h1>
- <div id="sort-boxes">
+ <div book-sort-boxes>
@include('books.sort-box', ['book' => $book, 'bookChildren' => $bookChildren])
</div>
<form action="{{ $book->getUrl('/sort') }}" method="POST">
{!! csrf_field() !!}
<input type="hidden" name="_method" value="PUT">
- <input type="hidden" id="sort-tree-input" name="sort-tree">
+ <input book-sort-input type="hidden" name="sort-tree">
<div class="list text-right">
<a href="{{ $book->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
<button class="button primary" type="submit">{{ trans('entities.books_sort_save') }}</button>
@@ -47,157 +47,3 @@
</div>
@stop
-
-@section('scripts')
- <script src="{{ baseUrl("/libs/jquery-sortable/jquery-sortable.min.js") }}"></script>
- <script>
- $(document).ready(function() {
-
- const $container = $('#sort-boxes');
-
- // Sortable options
- const sortableOptions = {
- group: 'serialization',
- containerSelector: 'ul',
- itemPath: '',
- itemSelector: 'li',
- onDrop: function ($item, container, _super) {
- updateMapInput();
- _super($item, container);
- },
- isValidTarget: function ($item, container) {
- // Prevent nested chapters
- return !($item.is('[data-type="chapter"]') && container.target.closest('li').attr('data-type') === 'chapter');
- }
- };
-
- // Create our sortable group
- let group = $('.sort-list').sortable(sortableOptions);
-
- // Add book on selection confirm
- window.$events.listen('entity-select-confirm', function(entityInfo) {
- const alreadyAdded = $container.find(`[data-type="book"][data-id="${entityInfo.id}"]`).length > 0;
- if (alreadyAdded) return;
-
- const entitySortItemUrl = entityInfo.link + '/sort-item';
- window.$http.get(entitySortItemUrl).then(resp => {
- $container.append(resp.data);
- group.sortable("destroy");
- group = $('.sort-list').sortable(sortableOptions);
- });
- });
-
- /**
- * Update the input with our sort data.
- */
- function updateMapInput() {
- const pageMap = buildEntityMap();
- $('#sort-tree-input').val(JSON.stringify(pageMap));
- }
-
- /**
- * Build up a mapping of entities with their ordering and nesting.
- * @returns {Array}
- */
- function buildEntityMap() {
- const entityMap = [];
- const $lists = $('.sort-list');
- $lists.each(function(listIndex) {
- const $list = $(this);
- const bookId = $list.closest('[data-type="book"]').attr('data-id');
- const $directChildren = $list.find('> [data-type="page"], > [data-type="chapter"]');
- $directChildren.each(function(directChildIndex) {
- const $childElem = $(this);
- const type = $childElem.attr('data-type');
- const parentChapter = false;
- const childId = $childElem.attr('data-id');
-
- entityMap.push({
- id: childId,
- sort: directChildIndex,
- parentChapter: parentChapter,
- type: type,
- book: bookId
- });
-
- $childElem.find('[data-type="page"]').each(function(pageIndex) {
- const $chapterChild = $(this);
- entityMap.push({
- id: $chapterChild.attr('data-id'),
- sort: pageIndex,
- parentChapter: childId,
- type: 'page',
- book: bookId
- });
- });
-
- });
- });
- return entityMap;
- }
-
-
- // Auto sort control
- const sortOperations = {
- name: function(a, b) {
- const aName = a.getAttribute('data-name').trim().toLowerCase();
- const bName = b.getAttribute('data-name').trim().toLowerCase();
- return aName.localeCompare(bName);
- },
- created: function(a, b) {
- const aTime = Number(a.getAttribute('data-created'));
- const bTime = Number(b.getAttribute('data-created'));
- return bTime - aTime;
- },
- updated: function(a, b) {
- const aTime = Number(a.getAttribute('data-updated'));
- const bTime = Number(b.getAttribute('data-updated'));
- return bTime - aTime;
- },
- chaptersFirst: function(a, b) {
- const aType = a.getAttribute('data-type');
- const bType = b.getAttribute('data-type');
- if (aType === bType) {
- return 0;
- }
- return (aType === 'chapter' ? -1 : 1);
- },
- chaptersLast: function(a, b) {
- const aType = a.getAttribute('data-type');
- const bType = b.getAttribute('data-type');
- if (aType === bType) {
- return 0;
- }
- return (aType === 'chapter' ? 1 : -1);
- },
- };
-
- let lastSort = '';
- let reverse = false;
- const reversibleTypes = ['name', 'created', 'updated'];
-
- $container.on('click', '.sort-box-options [data-sort]', function(event) {
- event.preventDefault();
- const $sortLists = $(this).closest('.sort-box').find('ul');
- const sort = $(this).attr('data-sort');
-
- reverse = (lastSort === sort) ? !reverse : false;
- let sortFunction = sortOperations[sort];
- if (reverse && reversibleTypes.includes(sort)) {
- sortFunction = function(a, b) {
- return 0 - sortOperations[sort](a, b)
- };
- }
-
- $sortLists.each(function() {
- const $list = $(this);
- $list.children('li').sort(sortFunction).appendTo($list);
- });
-
- lastSort = sort;
- updateMapInput();
- });
-
- });
- </script>
-@stop