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

   1 @extends('base')
   2
   3 @section('head')
   4     <script src="{{ baseUrl("/libs/jquery-sortable/jquery-sortable.min.js") }}"></script>
   5 @stop
   6
   7 @section('content')
   8
   9     <div class="faded-small toolbar">
  10         <div class="container">
  11             <div class="row">
  12                 <div class="col-sm-12 faded">
  13                     @include('books._breadcrumbs', ['book' => $book])
  14                 </div>
  15             </div>
  16         </div>
  17     </div>
  18
  19     <div class="container" ng-non-bindable>
  20         <h1>{{ trans('entities.books_sort') }}</h1>
  21         <div class="row">
  22             <div class="col-md-8" id="sort-boxes">
  23
  24                 @include('books/sort-box', ['book' => $book, 'bookChildren' => $bookChildren])
  25
  26             </div>
  27
  28             @if(count($books) > 1)
  29                 <div class="col-md-4">
  30                     <h3>{{ trans('entities.books_sort_show_other') }}</h3>
  31                     <div id="additional-books">
  32                     @foreach($books as $otherBook)
  33                         @if($otherBook->id !== $book->id)
  34                         <div>
  35                             <a href="{{ $otherBook->getUrl('/sort-item') }}" class="text-book"><i class="zmdi zmdi-book"></i>{{ $otherBook->name }}</a>
  36                         </div>
  37                         @endif
  38                     @endforeach
  39                     </div>
  40                 </div>
  41             @endif
  42
  43         </div>
  44
  45         <form action="{{ $book->getUrl('/sort') }}" method="POST">
  46             {!! csrf_field() !!}
  47             <input type="hidden" name="_method" value="PUT">
  48             <input type="hidden" id="sort-tree-input" name="sort-tree">
  49             <div class="list">
  50                 <a href="{{ $book->getUrl() }}" class="button muted">{{ trans('common.cancel') }}</a>
  51                 <button class="button pos" type="submit">{{ trans('entities.books_sort_save') }}</button>
  52             </div>
  53         </form>
  54
  55     </div>
  56
  57     <script>
  58         $(document).ready(function() {
  59
  60             var sortableOptions = {
  61                 group: 'serialization',
  62                 onDrop: function($item, container, _super) {
  63                     var pageMap = buildEntityMap();
  64                     $('#sort-tree-input').val(JSON.stringify(pageMap));
  65                     _super($item, container);
  66                 },
  67                 isValidTarget: function  ($item, container) {
  68                     // Prevent nested chapters
  69                     return !($item.is('[data-type="chapter"]') && container.target.closest('li').attr('data-type') == 'chapter');
  70                 }
  71             };
  72
  73             var group = $('.sort-list').sortable(sortableOptions);
  74
  75             $('#additional-books').on('click', 'a', function(e) {
  76                 e.preventDefault();
  77                 var $link = $(this);
  78                 var url = $link.attr('href');
  79                 $.get(url, function(data) {
  80                     $('#sort-boxes').append(data);
  81                     group.sortable("destroy");
  82                     $('.sort-list').sortable(sortableOptions);
  83                 });
  84                 $link.remove();
  85             });
  86
  87             /**
  88              * Build up a mapping of entities with their ordering and nesting.
  89              * @returns {Array}
  90              */
  91             function buildEntityMap() {
  92                 var entityMap = [];
  93                 var $lists = $('.sort-list');
  94                 $lists.each(function(listIndex) {
  95                     var list = $(this);
  96                     var bookId = list.closest('[data-type="book"]').attr('data-id');
  97                     var $directChildren = list.find('> [data-type="page"], > [data-type="chapter"]');
  98                     $directChildren.each(function(directChildIndex) {
  99                         var $childElem = $(this);
 100                         var type = $childElem.attr('data-type');
 101                         var parentChapter = false;
 102                         var childId = $childElem.attr('data-id');
 103                         entityMap.push({
 104                             id: childId,
 105                             sort: directChildIndex,
 106                             parentChapter: parentChapter,
 107                             type: type,
 108                             book: bookId
 109                         });
 110                         $chapterChildren = $childElem.find('[data-type="page"]').each(function(pageIndex) {
 111                             var $chapterChild = $(this);
 112                             entityMap.push({
 113                                 id: $chapterChild.attr('data-id'),
 114                                 sort: pageIndex,
 115                                 parentChapter: childId,
 116                                 type: 'page',
 117                                 book: bookId
 118                             });
 119                         });
 120                     });
 121                 });
 122                 return entityMap;
 123             }
 124
 125         });
 126     </script>
 127 @stop