Got the tree view working

This commit is contained in:
Dan Brown 2015-07-20 22:05:26 +01:00
parent 52cf7e4483
commit da2ba4d9f3
13 changed files with 223 additions and 21 deletions

View File

@ -78,7 +78,9 @@ class BookController extends Controller
public function show($slug)
{
$book = $this->bookRepo->getBySlug($slug);
return view('books/show', ['book' => $book]);
$pageTree = $this->pageRepo->getTreeByBookId($book->id);
// dd($pageTree);
return view('books/show', ['book' => $book, 'pageTree' => $pageTree]);
}
/**

View File

@ -41,12 +41,14 @@ class PageController extends Controller
* Show the form for creating a new resource.
*
* @param $bookSlug
* @param bool $pageSlug
* @return Response
*/
public function create($bookSlug)
public function create($bookSlug, $pageSlug = false)
{
$book = $this->bookRepo->getBySlug($bookSlug);
return view('pages/create', ['book' => $book]);
$page = $pageSlug ? $this->pageRepo->getBySlug($pageSlug, $book->id) : false;
return view('pages/create', ['book' => $book, 'parentPage' => $page]);
}
/**
@ -61,7 +63,8 @@ class PageController extends Controller
$this->validate($request, [
'name' => 'required|string|max:255',
'html' => 'required|string',
'priority' => 'integer'
'priority' => 'integer',
'parent' => 'integer|exists:pages,id'
]);
$book = $this->bookRepo->getBySlug($bookSlug);
$page = $this->pageRepo->newFromInput($request->all());
@ -70,6 +73,11 @@ class PageController extends Controller
$slug .= '1';
}
$page->slug =$slug;
if($request->has('parent')) {
$page->page_id = $request->get('parent');
}
$page->book_id = $book->id;
$page->text = strip_tags($page->html);
$page->save();
@ -87,7 +95,8 @@ class PageController extends Controller
{
$book = $this->bookRepo->getBySlug($bookSlug);
$page = $this->pageRepo->getBySlug($pageSlug, $book->id);
return view('pages/show', ['page' => $page]);
$breadCrumbs = $this->pageRepo->getBreadCrumbs($page);
return view('pages/show', ['page' => $page, 'breadCrumbs' => $breadCrumbs, 'book' => $book]);
}
/**

View File

@ -25,6 +25,7 @@ Route::group(['prefix' => 'books'], function() {
Route::get('/{bookSlug}/page/create', 'PageController@create');
Route::post('/{bookSlug}/page', 'PageController@store');
Route::get('/{bookSlug}/{pageSlug}', 'PageController@show');
Route::get('/{bookSlug}/{pageSlug}/create', 'PageController@create');
Route::get('/{bookSlug}/{pageSlug}/edit', 'PageController@edit');
Route::put('/{bookSlug}/{pageSlug}', 'PageController@update');
});

View File

@ -8,13 +8,33 @@ class Page extends Model
{
protected $fillable = ['name', 'html', 'priority'];
protected $simpleAttributes = ['name', 'id', 'slug'];
public function toSimpleArray()
{
$array = array_intersect_key($this->toArray(), array_flip($this->simpleAttributes));
$array['url'] = $this->getUrl();
return $array;
}
public function book()
{
return $this->belongsTo('Oxbow\Book');
}
public function children()
{
return $this->hasMany('Oxbow\Page');
}
public function parent()
{
return $this->belongsTo('Oxbow\Page', 'page_id');
}
public function getUrl()
{
return '/books/' . $this->book->slug . '/' . $this->slug;
}
}

View File

@ -53,4 +53,11 @@ class BookRepo
$book->delete();
}
public function getTree($book)
{
$tree = $book->toArray();
$tree['pages'] = $this->pageRepo->getTreeByBookId($book->id);
return $tree;
}
}

View File

@ -59,4 +59,62 @@ class PageRepo
return $query->get();
}
public function getBreadCrumbs($page)
{
$tree = [];
$cPage = $page;
while($cPage->parent && $cPage->parent->id !== 0) {
$cPage = $cPage->parent;
$tree[] = $cPage;
}
return count($tree) > 0 ? array_reverse($tree) : false;
}
/**
* Creates a tree of child pages, Nested by their
* set parent pages.
* @param $bookId
* @param bool $currentPageId
* @return array
*/
public function getTreeByBookId($bookId, $currentPageId = false)
{
$topLevelPages = $this->getTopLevelPages($bookId);
$pageTree = [];
foreach($topLevelPages as $key => $topPage) {
$pageTree[$key] = $this->toArrayTree($topPage, $currentPageId);
}
return $pageTree;
}
/**
* Creates a page tree array with the supplied page
* as the parent of the tree.
* @param $page
* @param bool $currentPageId
* @return mixed
*/
private function toArrayTree($page, $currentPageId = false)
{
$cPage = $page->toSimpleArray();
$cPage['current'] = ($currentPageId !== false && $cPage['id'] === $currentPageId);
$cPage['pages'] = [];
foreach($page->children as $key => $childPage) {
$cPage['pages'][$key] = $this->toArrayTree($childPage);
}
$cPage['hasChildren'] = count($cPage['pages']) > 0;
return $cPage;
}
/**
* Gets the pages at the top of the page hierarchy.
* @param $bookId
*/
private function getTopLevelPages($bookId)
{
return $this->page->where('book_id', '=', $bookId)->where('page_id', '=', 0)->get();
}
}

View File

@ -199,4 +199,8 @@ ul {
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
}
.list > * {
display: block;
}

View File

@ -72,6 +72,9 @@ header .menu {
&.left {
float: left;
}
h1 {
margin-top: 0.2em;
}
}
.page-list {
@ -204,4 +207,65 @@ h1, h2, h3, h4, h5, h6 {
&:hover a.link-hook {
opacity: 1;
}
}
.breadcrumbs {
margin-top: $-s;
a, span {
color: #666;
font-size: 0.9em;
}
i {
padding-right: 4px;
}
span.sep {
color: #888;
padding: 0 $-xs;
}
}
.nested-page-list {
list-style: none;
margin-left: 0;
li {
border-top: 3px dotted #BBB;
padding: $-s 0;
user-select: none;
}
li:last-child {
border-bottom: 3px dotted #BBB;
}
.nested-page-list {
margin-top: $-xs;
display: none;
margin: $-xs 0 $-xs 9px;
font-size: $fs-m * 0.9;
border-left: 2px solid #EEE;
}
.nested-page-list li {
border: none;
padding-right: $-m;
padding-left: $-m;
&.expanded.has-children {
padding-bottom: 0;
}
}
i.arrow {
font-size: 0.8em;
padding: $-xs;
margin-top: -$-xs;
margin-bottom: -$-xs;
transform-origin: 50% 50%;
transition: transform ease-in-out 180ms;
cursor: pointer;
}
li.expanded {
> i.arrow {
transform: rotate(90deg);
}
>.nested-page-list {
display: block;
}
}
}

View File

@ -20,24 +20,24 @@
<h4 class="float">Pages</h4>
<a href="{{$book->getUrl() . '/page/create'}}" class="text-pos float right">+ New Page</a>
</div>
<div class="page-list">
@if(count($book->pages) > 0)
@foreach($book->pages as $page)
<a href="{{$page->getUrl()}}">{{$page->name}}</a>
@endforeach
@else
<p class="text-muted">This book has no pages</p>
@endif
</div>
<p>
</p>
@include('pages/page-tree-list', ['pageTree' => $pageTree])
</div>
</div>
<script>
$(function() {
$('.nested-page-list i.arrow').click(function() {
var list = $(this).closest('.nested-page-list');
var listItem = $(this).closest('li');
listItem.toggleClass('expanded');
});
});
</script>
@stop

View File

@ -9,6 +9,9 @@
@section('content')
<form action="{{$book->getUrl() . '/page'}}" method="POST">
@include('pages/form')
@if($parentPage)
<input type="hidden" name="parent" value="{{$parentPage->id}}">
@endif
</form>
@stop

View File

@ -8,7 +8,7 @@
{{ csrf_field() }}
<div class="title-input page-title">
@include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
@include('form/text', ['name' => 'name', 'placeholder' => 'Enter Page Title'])
</div>
<div class="edit-area">
@include('form/textarea', ['name' => 'html'])

View File

@ -0,0 +1,15 @@
<ul class="nested-page-list">
@foreach($pageTree as $subPage)
<li @if($subPage['hasChildren'])class="has-children"@endif>
@if($subPage['hasChildren'])
<i class="fa fa-chevron-right arrow"></i>
@endif
<a href="{{$subPage['url']}}">{{$subPage['name']}}</a>
@if($subPage['hasChildren'])
@include('pages/page-tree-list', ['pageTree' => $subPage['pages']])
@endif
</li>
@endforeach
</ul>

View File

@ -10,12 +10,32 @@
</div>
<div class="page-actions">
<h4>Actions</h4>
<a href="{{$page->getUrl() . '/edit'}}" class="muted"><i class="fa fa-pencil"></i>Edit this page</a>
<div class="list">
<a href="{{$page->getUrl() . '/edit'}}" class="muted"><i class="fa fa-pencil"></i>Edit this page</a>
<a href="{{$page->getUrl() . '/create'}}" class="muted"><i class="fa fa-file-o"></i>Create Sub-page</a>
</div>
</div>
</div>
<div class="page-content right col-md-9">
<div class="breadcrumbs">
<a href="{{$book->getUrl()}}"><i class="fa fa-book"></i>{{ $book->name }}</a>
@if($breadCrumbs)
@foreach($breadCrumbs as $parentPage)
<span class="sep">&gt;</span>
<a href="{{$parentPage->getUrl()}}">{{ $parentPage->name }}</a>
@endforeach
@endif
</div>
<h1>{{$page->name}}</h1>
@if(count($page->pages) > 0)
<h4 class="text-muted">Sub-pages</h4>
<div class="page-list">
@foreach($page->pages as $childPage)
<a href="{{ $childPage->getUrl() }}">{{ $childPage->name }}</a>
@endforeach
</div>
@endif
{!! $page->html !!}
</div>
</div>
@ -37,7 +57,6 @@
var pageNav = $('.page-nav-list');
var pageContent = $('.page-content');
var headers = pageContent.find('h1, h2, h3, h4, h5, h6');
var sortedHeaders = [];
headers.each(function() {
var header = $(this);
var tag = header.prop('tagName');