Skip to content

Commit

Permalink
Merge pull request #460 from art-institute-of-chicago/feature/digital…
Browse files Browse the repository at this point in the history
…-publicaiton-listing-page

Update publication landing to show basic heirarchy layout [PUB-206]
  • Loading branch information
nikhiltri committed Jul 12, 2024
2 parents e175aa3 + a495638 commit 90d6b5d
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 153 deletions.
73 changes: 2 additions & 71 deletions app/Presenters/Admin/DigitalPublicationPresenter.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,6 @@

class DigitalPublicationPresenter extends BasePresenter
{
/**
* Formatted specifically for `_o-accordion`.
*/
private $articlesForSidebar = [];

/**
* This is an associative array, keyed by article type.
* It will also have an `all` key, containing all articles.
Expand Down Expand Up @@ -69,73 +64,9 @@ protected function isDscStub()
return $this->entity->is_dsc_stub ? 'Yes' : 'No';
}

public function articlesForSidebar($currentArticle = null)
{
if (!$this->articlesForSidebar) {
foreach (DigitalPublicationArticleType::cases() as $type) {
if (!$this->hasArticles($type->value)) {
continue;
}

$this->articlesForSidebar[] = [
'title' => $type->name,
'active' => !isset($currentArticle) || $currentArticle->type === $type,
'blocks' => [
[
'type' => 'link-list',
'links' => $this
->getArticles($type->value)
->map(function ($article) use ($currentArticle) {
$sublabel = $article->type === DigitalPublicationArticleType::Contributions
? $article->showAuthors()
: null;
return [
'label' => $article->title_display ?? $article->title,
'sublabel' => $sublabel,
'href' => $article->present()->getArticleUrl($this->entity),
'active' => isset($currentArticle) && $article->id === $currentArticle->id,
];
}),
],
],
];
}
}

return $this->articlesForSidebar;
}

public function nestedArticlesForSidebar()
{
// Root articles will have no parent_id so let's start building from there

$articles = $this->entity->articles()->published()->ordered()->whereNull('parent_id')->get();

return $this->buildNestedArticlesArray($articles);
}

private function buildNestedArticlesArray($articles)
public function topLevelArticles()
{
$articlesList = [];

foreach ($articles as $article) {
// Build the article array for use on the FE

$articleArray = [
'title' => $article->title,
'url' => $article->present()->getArticleUrl($this->entity),
];

// Recursively build nested articles since children can have children

if ($article->children) {
$articleArray['items'] = $this->buildNestedArticlesArray($article->children);
}

$articlesList[] = $articleArray;
}

return $articlesList;
return $this->entity->articles()->published()->ordered()->whereNull('parent_id')->get();
}

public function headerTitle()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@
</div>

@php
$articlesForSidebar = $digitalPublication->present()->nestedArticlesForSidebar($digitalPublication);
$topLevelArticles = $digitalPublication->present()->topLevelArticles();
@endphp

@if (!empty($articlesForSidebar))
@if (!empty($topLevelArticles))
@component('components.organisms._o-table-of-contents')
@slot('variation', 'o-accordion--publication-sidebar')
@slot('titleFont', 'f-tag-2')
@slot('items', $articlesForSidebar)
@slot('items', $topLevelArticles)
@endcomponent
@endif
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<{{ $tag ?? 'li' }} class="m-listing m-listing--article{{ (isset($variation)) ? ' '.$variation : '' }}"{!! (isset($variation) and strrpos($variation, "--hero") > -1 and !$item->videoFront) ? ' data-behavior="blurMyBackground"' : '' !!}>
<a href="{!! route(($module ?? 'articles') .'.show', $item) !!}" class="m-listing__link"{!! (isset($gtmAttributes)) ? ' '.$gtmAttributes.'' : '' !!}>
<a href="{!! route(($module ?? 'articles') .'.show', ($routeParameters ?? $item)) !!}" class="m-listing__link"{!! (isset($gtmAttributes)) ? ' '.$gtmAttributes.'' : '' !!}>
@if (!isset($hideImage) || (isset($hideImage) && !($hideImage)))
<span class="m-listing__img{{ (isset($imgVariation)) ? ' '.$imgVariation : '' }}{{ ($item->videoFront) ? ' m-listing__img--video' : '' }}"{{ (isset($variation) and strrpos($variation, "--hero") > -1 and !$item->videoFront) ? ' data-blur-img' : '' }}>
@if (isset($image) || $item->imageFront('hero'))
Expand All @@ -14,7 +14,7 @@
@slot('settings', $imageSettings ?? '')
@slot('class', 'img-hero-mobile')
@endcomponent
@else
@else
@component('components.atoms._img')
@slot('image', $image ?? $item->imageFront('hero'))
@slot('settings', $imageSettings ?? '')
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="o-accordion{{ (isset($variation)) ? ' '.$variation : '' }}" data-behavior="accordion">
@foreach ($items as $item)
@if (count($item['items']) > 0)
@if (count($item->children) > 0)
<h3>
<button id="{{ StringHelpers::getUtf8Slug($item['title']) }}" class="o-accordion__trigger {{ $titleFont ?? 'f-list-3' }}" tabindex="0"{!! (isset($item['gtmAttributes'])) ? ' '.$item['gtmAttributes'].'' : '' !!} aria-expanded="{{ (isset($item['active']) and $item['active']) ? 'true' : 'false' }}">
{!! $item['title'] !!}
<button id="{{ StringHelpers::getUtf8Slug($item->title) }}" class="o-accordion__trigger {{ $titleFont ?? 'f-list-3' }}" tabindex="0"{!! (isset($item->gtmAttributes)) ? ' '.$item->gtmAttributes.'' : '' !!} aria-expanded="{{ (isset($item->active) and $item->active) ? 'true' : 'false' }}">
{!! $item->title !!}
<span class="o-accordion__trigger-icon">
<svg class="icon--plus"><use xlink:href="#icon--plus" /></svg>
<svg class="icon--minus"><use xlink:href="#icon--minus" /></svg>
Expand All @@ -12,15 +12,15 @@
</h3>
@else
<span class="m-link-list__item o-accordion__panel-content">
<a class="m-link-list__trigger f-secondary" href="{{ $item['url'] }}"{!! (isset($item['gtmAttributes'])) ? ' '.$item['gtmAttributes'].'' : '' !!}>
<span class="m-link-list__label">{!! $item['title'] !!}</span>
<a class="m-link-list__trigger f-secondary" href="{{ $item->url }}"{!! (isset($item->gtmAttributes)) ? ' '.$item->gtmAttributes.'' : '' !!}>
<span class="m-link-list__label">{!! $item->title !!}</span>
</a>
</span>
@endif
@if (count($item['items']) > 0)
<div id="panel_{{ StringHelpers::getUtf8Slug($item['title']) }}" class="o-accordion__panel" aria-labelledby="{{ StringHelpers::getUtf8Slug($item['title']) }}" aria-hidden="{{ (isset($item['active']) and $item['active']) ? 'false' : 'true' }}">
@if (count($item->children) > 0)
<div id="panel_{{ StringHelpers::getUtf8Slug($item->title) }}" class="o-accordion__panel" aria-labelledby="{{ StringHelpers::getUtf8Slug($item->title) }}" aria-hidden="{{ (isset($item->active) and $item->active) ? 'false' : 'true' }}">
{{-- In the same tune of the build nested articles we can just recursively call the same component to build the table of contents. --}}
@include('components.organisms._o-table-of-contents', ['items' => $item['items']])
@include('components.organisms._o-table-of-contents', ['items' => $item->children])
</div>
@endif
@endforeach
Expand Down
98 changes: 29 additions & 69 deletions resources/views/site/digitalPublicationDetail.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -41,83 +41,43 @@
</div>
@endif

@if ($item->present()->hasArticles(DigitalPublicationArticleType::Contributions->value))
@foreach ($item->present()->topLevelArticles() as $topLevelArticle)
@component('components.molecules._m-title-bar', [
'variation' => 'm-title-bar--compact m-title-bar--light',
])
{{ DigitalPublicationArticleType::Contributions->name }}
{!! $topLevelArticle->title !!}
@endcomponent

@component('components.organisms._o-grid-listing')
@slot('variation', 'o-grid-listing--journal')
@slot('cols_xsmall','1')
@slot('cols_small','2')
@slot('cols_medium','2')
@slot('cols_large','2')
@slot('cols_xlarge','2')
@foreach ($item->present()->getArticles(DigitalPublicationArticleType::Contributions->value) as $article)
@component('components.molecules._m-listing----publication')
@slot('variation', 'm-listing--journal')
@slot('href', $article->present()->getArticleUrl($item))
@slot('image', $article->imageFront('hero'))
@slot('type', $article->present()->label)
@slot('title', $article->present()->title)
@slot('title_display', $article->present()->title_display)
@slot('list_description', $article->present()->list_description)
@slot('author_display', $article->showAuthors())
@slot('imageSettings', array(
'fit' => 'crop',
'ratio' => '16:9',
'srcset' => array(200,400,600),
'sizes' => ImageHelpers::aic_imageSizes(array(
'xsmall' => '216px',
'small' => '216px',
'medium' => '18',
'large' => '13',
'xlarge' => '13',
)),
))
@endcomponent
@slot('variation', 'o-grid-listing--single-row o-grid-listing--scroll@xsmall o-grid-listing--scroll@small o-grid-listing--scroll@medium o-grid-listing--gridlines-cols')
@slot('cols_medium','3')
@slot('cols_large','4')
@slot('cols_xlarge','4')

@foreach ($topLevelArticle->children as $article)
@if ($loop->iteration <= 3)
@component('components.molecules._m-listing----article')
@slot('imgVariation','')
@slot('item', $article)
@slot('module', 'collection.publications.digital-publications-articles')
@slot('routeParameters', ['pubId' => $item->id, 'pubSlug' => $item->getSlug(), 'id' => $article->id])
@slot('imageSettings', array(
'fit' => 'crop',
'ratio' => '16:9',
'srcset' => array(200,400,600),
'sizes' => ImageHelpers::aic_imageSizes(array(
'xsmall' => '216px',
'small' => '216px',
'medium' => '18',
'large' => '13',
'xlarge' => '13',
)),
))
@endcomponent
@endif
@endforeach
@endcomponent
@endif

@if ($item->present()->hasArticles(DigitalPublicationArticleType::Works->value))
@component('components.molecules._m-title-bar', [
'variation' => 'm-title-bar--compact m-title-bar--light',
])
{{ DigitalPublicationArticleType::Works->name }}
@endcomponent

@component('components.organisms._o-grid-listing')
@slot('variation', 'o-grid-listing--journal')

@foreach ($item->present()->getArticles(DigitalPublicationArticleType::Works->value) as $article)
@component('components.molecules._m-listing----publication')
@slot('variation', 'm-listing--work')
@slot('href', $article->present()->getArticleUrl($item))
@slot('image', $article->imageFront('hero'))
@slot('type', $article->present()->label)
@slot('title', $article->present()->title)
@slot('title_display', $article->present()->title_display)
@slot('list_description', $article->present()->list_description)
@slot('author_display', $article->showAuthors())
@slot('imageSettings', array(
'fit' => 'crop',
'ratio' => '16:9',
'srcset' => array(200,400,600),
'sizes' => ImageHelpers::aic_imageSizes(array(
'xsmall' => '216px',
'small' => '216px',
'medium' => '18',
'large' => '13',
'xlarge' => '13',
)),
))
@endcomponent
@endforeach
@endcomponent
@endif
@endforeach

@if (isset($item->sponsor_display))
@component('components.molecules._m-title-bar', [
Expand Down

0 comments on commit 90d6b5d

Please sign in to comment.