BookStack Code Mirror - bookstack/blob - resources/views/books/sort.blade.php

   1 @extends('simple-layout')
   2
   3 @section('body')
   4
   5     <div class="container">
   6
   7         <div class="my-s">
   8             @include('partials.breadcrumbs', ['crumbs' => [
   9                 $book,
  10                 $book->getUrl('/sort') => [
  11                     'text' => trans('entities.books_sort'),
  12                     'icon' => 'sort',
  13                 ]
  14             ]])
  15         </div>
  16
  17         <div class="grid left-focus gap-xl">
  18             <div>
  19                 <div class="card content-wrap">
  20                     <h1 class="list-heading mb-l">{{ trans('entities.books_sort') }}</h1>
  21                     <div id="sort-boxes">
  22                         @include('books.sort-box', ['book' => $book, 'bookChildren' => $bookChildren])
  23                     </div>
  24
  25                     <form action="{{ $book->getUrl('/sort') }}" method="POST">
  26                         {!! csrf_field() !!}
  27                         <input type="hidden" name="_method" value="PUT">
  28                         <input type="hidden" id="sort-tree-input" name="sort-tree">
  29                         <div class="list text-right">
  30                             <a href="{{ $book->getUrl() }}" class="button outline">{{ trans('common.cancel') }}</a>
  31                             <button class="button primary" type="submit">{{ trans('entities.books_sort_save') }}</button>
  32                         </div>
  33                     </form>
  34                 </div>
  35             </div>
  36
  37             <div>
  38                 <div class="card content-wrap">
  39                     <h2 class="list-heading mb-m">{{ trans('entities.books_sort_show_other') }}</h2>
  40
  41                     @include('components.entity-selector', ['name' => 'books_list', 'selectorSize' => 'compact', 'entityTypes' => 'book', 'entityPermission' => 'update', 'showAdd' => true])
  42
  43                 </div>
  44             </div>
  45         </div>
  46
  47     </div>
  48
  49 @stop
  50
  51 @section('scripts')
  52     <script src="{{ baseUrl("/libs/jquery-sortable/jquery-sortable.min.js") }}"></script>
  53     <script>
  54         $(document).ready(function() {
  55
  56             const $container = $('#sort-boxes');
  57
  58             // Sortable options
  59             const sortableOptions = {
  60                 group: 'serialization',
  61                 containerSelector: 'ul',
  62                 itemPath: '',
  63                 itemSelector: 'li',
  64                 onDrop: function ($item, container, _super) {
  65                     updateMapInput();
  66                     _super($item, container);
  67                 },
  68                 isValidTarget: function ($item, container) {
  69                     // Prevent nested chapters
  70                     return !($item.is('[data-type="chapter"]') && container.target.closest('li').attr('data-type') === 'chapter');
  71                 }
  72             };
  73
  74             // Create our sortable group
  75             let group = $('.sort-list').sortable(sortableOptions);
  76
  77             // Add book on selection confirm
  78             window.$events.listen('entity-select-confirm', function(entityInfo) {
  79                 const alreadyAdded = $container.find(`[data-type="book"][data-id="${entityInfo.id}"]`).length > 0;
  80                 if (alreadyAdded) return;
  81
  82                 const entitySortItemUrl = entityInfo.link + '/sort-item';
  83                 window.$http.get(entitySortItemUrl).then(resp => {
  84                     $container.append(resp.data);
  85                     group.sortable("destroy");
  86                     group = $('.sort-list').sortable(sortableOptions);
  87                 });
  88             });
  89
  90             /**
  91              * Update the input with our sort data.
  92              */
  93             function updateMapInput() {
  94                 const pageMap = buildEntityMap();
  95                 $('#sort-tree-input').val(JSON.stringify(pageMap));
  96             }
  97
  98             /**
  99              * Build up a mapping of entities with their ordering and nesting.
 100              * @returns {Array}
 101              */
 102             function buildEntityMap() {
 103                 const entityMap = [];
 104                 const $lists = $('.sort-list');
 105                 $lists.each(function(listIndex) {
 106                     const $list = $(this);
 107                     const bookId = $list.closest('[data-type="book"]').attr('data-id');
 108                     const $directChildren = $list.find('> [data-type="page"], > [data-type="chapter"]');
 109                     $directChildren.each(function(directChildIndex) {
 110                         const $childElem = $(this);
 111                         const type = $childElem.attr('data-type');
 112                         const parentChapter = false;
 113                         const childId = $childElem.attr('data-id');
 114
 115                         entityMap.push({
 116                             id: childId,
 117                             sort: directChildIndex,
 118                             parentChapter: parentChapter,
 119                             type: type,
 120                             book: bookId
 121                         });
 122
 123                         $childElem.find('[data-type="page"]').each(function(pageIndex) {
 124                             const $chapterChild = $(this);
 125                             entityMap.push({
 126                                 id: $chapterChild.attr('data-id'),
 127                                 sort: pageIndex,
 128                                 parentChapter: childId,
 129                                 type: 'page',
 130                                 book: bookId
 131                             });
 132                         });
 133
 134                     });
 135                 });
 136                 return entityMap;
 137             }
 138
 139
 140             // Auto sort control
 141             const sortOperations = {
 142                 name: function(a, b) {
 143                     const aName = a.getAttribute('data-name').trim().toLowerCase();
 144                     const bName = b.getAttribute('data-name').trim().toLowerCase();
 145                     return aName.localeCompare(bName);
 146                 },
 147                 created: function(a, b) {
 148                     const aTime = Number(a.getAttribute('data-created'));
 149                     const bTime = Number(b.getAttribute('data-created'));
 150                     return bTime - aTime;
 151                 },
 152                 updated: function(a, b) {
 153                     const aTime = Number(a.getAttribute('data-updated'));
 154                     const bTime = Number(b.getAttribute('data-updated'));
 155                     return bTime - aTime;
 156                 },
 157                 chaptersFirst: function(a, b) {
 158                     const aType = a.getAttribute('data-type');
 159                     const bType = b.getAttribute('data-type');
 160                     if (aType === bType) {
 161                         return 0;
 162                     }
 163                     return (aType === 'chapter' ? -1 : 1);
 164                 },
 165                 chaptersLast: function(a, b) {
 166                     const aType = a.getAttribute('data-type');
 167                     const bType = b.getAttribute('data-type');
 168                     if (aType === bType) {
 169                         return 0;
 170                     }
 171                     return (aType === 'chapter' ? 1 : -1);
 172                 },
 173             };
 174
 175             let lastSort = '';
 176             let reverse = false;
 177             const reversibleTypes = ['name', 'created', 'updated'];
 178
 179             $container.on('click', '.sort-box-options [data-sort]', function(event) {
 180                 event.preventDefault();
 181                 const $sortLists = $(this).closest('.sort-box').find('ul');
 182                 const sort = $(this).attr('data-sort');
 183
 184                 reverse = (lastSort === sort) ? !reverse : false;
 185                 let sortFunction = sortOperations[sort];
 186                 if (reverse && reversibleTypes.includes(sort)) {
 187                    sortFunction = function(a, b) {
 188                        return 0 - sortOperations[sort](a, b)
 189                    };
 190                 }
 191
 192                 $sortLists.each(function() {
 193                     const $list = $(this);
 194                     $list.children('li').sort(sortFunction).appendTo($list);
 195                 });
 196
 197                 lastSort = sort;
 198                 updateMapInput();
 199             });
 200
 201         });
 202     </script>
 203 @stop