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

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