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

   1 @extends('base')
   2
   3 @section('head')
   4     <script src="/libs/tinymce/tinymce.min.js"></script>
   5     <script src="/libs/jquery-sortable/jquery-sortable.min.js"></script>
   6 @stop
   7
   8 @section('content')
   9
  10     <div class="container">
  11         <h1>Sorting Pages & Chapters<span class="subheader">For {{ $book->name }}</span></h1>
  12         <div class="row">
  13             <div class="col-md-8" id="sort-boxes">
  14
  15                 @include('books/sort-box', ['book' => $book, 'bookChildren' => $bookChildren])
  16
  17             </div>
  18
  19             @if(count($books) > 1)
  20                 <div class="col-md-4">
  21                     <h3>Show Other Books</h3>
  22                     <div id="additional-books">
  23                     @foreach($books as $otherBook)
  24                         @if($otherBook->id !== $book->id)
  25                         <div>
  26                             <a href="/books/{{ $otherBook->slug }}/sort-item" class="text-book"><i class="zmdi zmdi-book"></i>{{ $otherBook->name }}</a>
  27                         </div>
  28                         @endif
  29                     @endforeach
  30                     </div>
  31                 </div>
  32             @endif
  33
  34         </div>
  35
  36         <form action="{{$book->getUrl()}}/sort" method="POST">
  37             {!! csrf_field() !!}
  38             <input type="hidden" name="_method" value="PUT">
  39             <input type="hidden" id="sort-tree-input" name="sort-tree">
  40             <div class="list">
  41                 <a href="{{$book->getUrl()}}" class="button muted">Cancel</a>
  42                 <button class="button pos" type="submit">Save Order</button>
  43             </div>
  44         </form>
  45
  46     </div>
  47
  48     <script>
  49         $(document).ready(function() {
  50
  51             var sortableOptions = {
  52                 group: 'serialization',
  53                 onDrop: function($item, container, _super) {
  54                     var pageMap = buildPageMap();
  55                     $('#sort-tree-input').val(JSON.stringify(pageMap));
  56                     _super($item, container);
  57                 },
  58                 isValidTarget: function  ($item, container) {
  59                     // Prevent nested chapters
  60                     return !($item.is('[data-type="chapter"]') && container.target.closest('li').attr('data-type') == 'chapter');
  61                 }
  62             };
  63
  64             var group = $('.sort-list').sortable(sortableOptions);
  65
  66             $('#additional-books').on('click', 'a', function(e) {
  67                 e.preventDefault();
  68                 var $link = $(this);
  69                 var url = $link.attr('href');
  70                 $.get(url, function(data) {
  71                     $('#sort-boxes').append(data);
  72                     group.sortable("destroy");
  73                     $('.sort-list').sortable(sortableOptions);
  74                 });
  75                 $link.remove();
  76             });
  77
  78             function buildPageMap() {
  79                 var pageMap = [];
  80                 var $lists = $('.sort-list');
  81                 $lists.each(function(listIndex) {
  82                     var list = $(this);
  83                     var bookId = list.closest('[data-type="book"]').attr('data-id');
  84                     var $childElements = list.find('[data-type="page"], [data-type="chapter"]');
  85                     $childElements.each(function(childIndex) {
  86                         var $childElem = $(this);
  87                         var type = $childElem.attr('data-type');
  88                         var parentChapter = false;
  89                         if(type === 'page' && $childElem.closest('[data-type="chapter"]').length === 1) {
  90                             parentChapter = $childElem.closest('[data-type="chapter"]').attr('data-id');
  91                         }
  92                         pageMap.push({
  93                             id: $childElem.attr('data-id'),
  94                             parentChapter: parentChapter,
  95                             type: type,
  96                             book: bookId
  97                         });
  98                     });
  99                 });
 100                 return pageMap;
 101             }
 102
 103         });
 104     </script>
 105 @stop