Use components instead of duplicating html everywhere

This commit is contained in:
Timothy Warren 2020-08-21 19:25:27 -04:00
parent b75a99a145
commit edb022be13
6 changed files with 132 additions and 273 deletions

View File

@ -33,61 +33,20 @@ use Aviat\AnimeClient\API\Kitsu;
<?php if ( ! (empty($data['media']['anime']) || empty($data['media']['manga']))): ?> <?php if ( ! (empty($data['media']['anime']) || empty($data['media']['manga']))): ?>
<h3>Media</h3> <h3>Media</h3>
<div class="tabs">
<?php if ( ! empty($data['media']['anime'])): ?>
<input checked="checked" type="radio" id="media-anime" name="media-tabs" />
<label for="media-anime">Anime</label>
<section class="media-wrap content"> <?= $component->tabs('character-media', $data['media'], static function ($media, $mediaType) use ($url, $component, $helper) {
<?php foreach ($data['media']['anime'] as $id => $anime): ?> $rendered = [];
<article class="media"> foreach ($media as $id => $item)
<?php {
$link = $url->generate('anime.details', ['id' => $anime['slug']]); $rendered[] = $component->media(
?> array_merge([$item['title']], $item['titles']),
<a href="<?= $link ?>"> $url->generate("{$mediaType}.details", ['id' => $item['slug']]),
<?= $helper->picture("images/anime/{$anime['id']}.webp") ?> $helper->picture("images/{$mediaType}/{$item['id']}.webp")
</a> );
<div class="name"> }
<a href="<?= $link ?>">
<?= $anime['title'] ?>
<?php foreach ($anime['titles'] as $title): ?>
<br />
<small><?= $title ?></small>
<?php endforeach ?>
</a>
</div>
</article>
<?php endforeach ?>
</section>
<?php endif ?>
<?php if ( ! empty($data['media']['manga'])): ?> return implode('', array_map('mb_trim', $rendered));
<input type="radio" id="media-manga" name="media-tabs" /> }, 'media-wrap content') ?>
<label for="media-manga">Manga</label>
<section class="media-wrap content">
<?php foreach ($data['media']['manga'] as $id => $manga): ?>
<article class="media">
<?php
$link = $url->generate('manga.details', ['id' => $manga['slug']]);
?>
<a href="<?= $link ?>">
<?= $helper->picture("images/manga/{$manga['id']}.webp") ?>
</a>
<div class="name">
<a href="<?= $link ?>">
<?= $manga['title'] ?>
<?php foreach ($manga['titles'] as $title): ?>
<br />
<small><?= $title ?></small>
<?php endforeach ?>
</a>
</div>
</article>
<?php endforeach ?>
</section>
<?php endif ?>
</div>
<?php endif ?> <?php endif ?>
<section> <section>

View File

@ -60,61 +60,34 @@
<?php if (count($data['characters']) > 0): ?> <?php if (count($data['characters']) > 0): ?>
<h2>Characters</h2> <h2>Characters</h2>
<div class="tabs"> <?= $component->tabs('manga-characters', $data['characters'], static function($list, $role) use ($component, $helper, $url) {
<?php $i = 0 ?> $rendered = [];
<?php foreach ($data['characters'] as $role => $list): ?> foreach ($list as $id => $char)
<input {
type="radio" name="character-role-tabs" $rendered[] = $component->character(
id="character-tabs<?= $i ?>" <?= $i === 0 ? 'checked' : '' ?> /> $char['name'],
<label for="character-tabs<?= $i ?>"><?= ucfirst($role) ?></label> $url->generate('character', ['slug' => $char['slug']]),
<section class="content media-wrap flex flex-wrap flex-justify-start"> $helper->picture("images/characters/{$id}.webp"),
<?php foreach ($list as $id => $char): ?> ($role !== 'main') ? 'small-character' : 'character'
<?php if ( ! empty($char['image']['original'])): ?> );
<article class="<?= $role === 'supporting' ? 'small-' : '' ?>character"> }
<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?>
<div class="name"> return implode('', array_map('mb_trim', $rendered));
<?= $helper->a($link, $char['name']); ?> }) ?>
</div>
<a href="<?= $link ?>">
<?= $helper->picture("images/characters/{$id}.webp") ?>
</a>
</article>
<?php endif ?>
<?php endforeach ?>
</section>
<?php $i++ ?>
<?php endforeach ?>
</div>
<?php endif ?> <?php endif ?>
<?php if (count($data['staff']) > 0): ?> <?php if (count($data['staff']) > 0): ?>
<h2>Staff</h2> <h2>Staff</h2>
<div class="vertical-tabs"> <?= $component->verticalTabs('manga-staff', $data['staff'],
<?php $i = 0 ?> fn($people) => implode('', array_map(
<?php foreach ($data['staff'] as $role => $people): ?> fn ($person) => $component->character(
<div class="tab"> $person['name'],
<input $url->generate('person', ['id' => $person['id'], 'slug' => $person['slug']]),
type="radio" name="staff-roles" id="staff-role<?= $i ?>" <?= $i === 0 ? 'checked' : '' ?> /> $helper->picture("images/people/{$person['id']}.webp")
<label for="staff-role<?= $i ?>"><?= $role ?></label> ),
<section class='content media-wrap flex flex-wrap flex-justify-start'> $people
<?php foreach ($people as $person): ?> ))
<article class='character person'> ) ?>
<?php $link = $url->generate('person', ['id' => $person['id'], 'slug' => $person['slug']]) ?>
<div class="name">
<a href="<?= $link ?>">
<?= $person['name'] ?>
</a>
</div>
<a href="<?= $link ?>">
<?= $helper->picture("images/people/{$person['id']}.webp") ?>
</a>
</article>
<?php endforeach ?>
</section>
</div>
<?php $i++ ?>
<?php endforeach ?>
</div>
<?php endif ?> <?php endif ?>
</main> </main>

View File

@ -1,67 +0,0 @@
<?php
use function Aviat\AnimeClient\getLocalImg;
use Aviat\AnimeClient\API\Kitsu;
?>
<h3>Voice Acting Roles</h3>
<div class="tabs">
<?php $i = 0; ?>
<?php foreach($data['characters'] as $role => $characterList): ?>
<input <?= $i === 0 ? 'checked="checked"' : '' ?> type="radio" name="character-type-tabs" id="character-type-<?= $i ?>" />
<label for="character-type-<?= $i ?>"><h5><?= ucfirst($role) ?></h5></label>
<section class="content">
<table class="borderless max-table">
<tr>
<th>Character</th>
<th>Series</th>
</tr>
<?php foreach ($characterList as $cid => $character): ?>
<tr>
<td>
<article class="character">
<?php
$link = $url->generate('character', ['slug' => $character['character']['slug']]);
?>
<a href="<?= $link ?>">
<?php $imgPath = ($character['character']['image'] === NULL)
? 'images/characters/empty.png'
: getLocalImg($character['character']['image']['original']);
echo $helper->picture($imgPath);
?>
<div class="name">
<?= $character['character']['canonicalName'] ?>
</div>
</a>
</article>
</td>
<td>
<section class="align-left media-wrap">
<?php foreach ($character['media'] as $sid => $series): ?>
<article class="media">
<?php
$link = $url->generate('anime.details', ['id' => $series['slug']]);
$titles = Kitsu::filterTitles($series);
?>
<a href="<?= $link ?>">
<?= $helper->picture("images/anime/{$sid}.webp") ?>
</a>
<div class="name">
<a href="<?= $link ?>">
<?= array_shift($titles) ?>
<?php foreach ($titles as $title): ?>
<br />
<small><?= $title ?></small>
<?php endforeach ?>
</a>
</div>
</article>
<?php endforeach ?>
</section>
</td>
</tr>
<?php endforeach; ?>
</table>
</section>
<?php $i++ ?>
<?php endforeach ?>
</div>

View File

@ -1,7 +1,6 @@
<?php <?php
use function Aviat\AnimeClient\getLocalImg;
use Aviat\AnimeClient\API\Kitsu; use Aviat\AnimeClient\API\Kitsu;
?> ?>
<main class="details fixed"> <main class="details fixed">
<section class="flex flex-no-wrap"> <section class="flex flex-no-wrap">
@ -16,6 +15,7 @@ use Aviat\AnimeClient\API\Kitsu;
<?php if ( ! empty($data['staff'])): ?> <?php if ( ! empty($data['staff'])): ?>
<section> <section>
<h3>Castings</h3> <h3>Castings</h3>
<div class="vertical-tabs"> <div class="vertical-tabs">
<?php $i = 0 ?> <?php $i = 0 ?>
<?php foreach ($data['staff'] as $role => $entries): ?> <?php foreach ($data['staff'] as $role => $entries): ?>
@ -25,30 +25,17 @@ use Aviat\AnimeClient\API\Kitsu;
<label for="staff-role<?= $i ?>"><?= $role ?></label> <label for="staff-role<?= $i ?>"><?= $role ?></label>
<?php foreach ($entries as $type => $casting): ?> <?php foreach ($entries as $type => $casting): ?>
<?php if ($type === 'characters') continue; ?> <?php if ($type === 'characters') continue; ?>
<?php if ( ! (empty($entries['manga']) || empty($entries['anime']))): ?> <?php if (isset($entries['manga'], $entries['anime'])): ?>
<h4><?= ucfirst($type) ?></h4> <h4><?= ucfirst($type) ?></h4>
<?php endif ?> <?php endif ?>
<section class="content"> <section class="content media-wrap flex flex-wrap flex-justify-start">
<?php foreach ($casting as $sid => $series): ?> <?php foreach ($casting as $sid => $series): ?>
<article class="media"> <?php $mediaType = in_array($type, ['anime', 'manga'], TRUE) ? $type : 'anime'; ?>
<?php <?= $component->media(
$mediaType = in_array($type, ['anime', 'manga'], TRUE) ? $type : 'anime'; Kitsu::filterTitles($series),
$link = $url->generate("{$mediaType}.details", ['id' => $series['slug']]); $url->generate("{$mediaType}.details", ['id' => $series['slug']]),
$titles = Kitsu::filterTitles($series); $helper->picture("images/{$type}/{$sid}.webp")
?> ) ?>
<a href="<?= $link ?>">
<?= $helper->picture("images/{$type}/{$sid}.webp") ?>
</a>
<div class="name">
<a href="<?= $link ?>">
<?= array_shift($titles) ?>
<?php foreach ($titles as $title): ?>
<br />
<small><?= $title ?></small>
<?php endforeach ?>
</a>
</div>
</article>
<?php endforeach; ?> <?php endforeach; ?>
</section> </section>
<?php endforeach ?> <?php endforeach ?>
@ -61,7 +48,51 @@ use Aviat\AnimeClient\API\Kitsu;
<?php if ( ! (empty($data['characters']['main']) || empty($data['characters']['supporting']))): ?> <?php if ( ! (empty($data['characters']['main']) || empty($data['characters']['supporting']))): ?>
<section> <section>
<?php include 'character-mapping.php' ?> <h3>Voice Acting Roles</h3>
<?= $component->tabs('voice-acting-roles', $data['characters'], static function ($characterList) use ($component, $helper, $url) {
$voiceRoles = [];
foreach ($characterList as $cid => $item):
$character = $component->character(
$item['character']['canonicalName'],
$url->generate('character', ['slug' => $item['character']['slug']]),
$helper->picture(getLocalImg($item['character']['image']['original']))
);
$medias = [];
foreach ($item['media'] as $sid => $series)
{
$medias[] = $component->media(
Kitsu::filterTitles($series),
$url->generate('anime.details', ['id' => $series['slug']]),
$helper->picture("images/anime/{$sid}.webp")
);
}
$media = implode('', array_map('mb_trim', $medias));
$voiceRoles[] = <<<HTML
<tr>
<td>{$character}</td>
<td>
<section class="align-left media-wrap">{$media}</section>
</td>
</tr>
HTML;
endforeach;
$roles = implode('', array_map('mb_trim', $voiceRoles));
return <<<HTML
<table class="borderless max-table">
<thead>
<tr>
<th>Character</th>
<th>Series</th>
</tr>
</thead>
<tbody>{$roles}</tbody>
</table>
HTML;
}) ?>
</section> </section>
<?php endif ?> <?php endif ?>
</main> </main>

View File

@ -28,9 +28,7 @@ $nestedPrefix = 'config';
/> />
<label for="settings-tab<?= $i ?>"><h3><?= $sectionMapping[$section] ?></h3></label> <label for="settings-tab<?= $i ?>"><h3><?= $sectionMapping[$section] ?></h3></label>
<section class="content"> <section class="content">
<?php require __DIR__ . '/_form.php' ?>
<?php if ($section === 'anilist'): ?> <?php if ($section === 'anilist'): ?>
<hr />
<?php $auth = $anilistModel->checkAuth(); ?> <?php $auth = $anilistModel->checkAuth(); ?>
<?php if (array_key_exists('errors', $auth)): ?> <?php if (array_key_exists('errors', $auth)): ?>
<p class="static-message error">Not Authorized.</p> <p class="static-message error">Not Authorized.</p>
@ -43,11 +41,15 @@ $nestedPrefix = 'config';
<p class="static-message info"> <p class="static-message info">
Linked to Anilist. Your access token will expire around <?= date('F j, Y, g:i a T', $expires) ?> Linked to Anilist. Your access token will expire around <?= date('F j, Y, g:i a T', $expires) ?>
</p> </p>
<?php require __DIR__ . '/_form.php' ?>
<?= $helper->a( <?= $helper->a(
$url->generate('anilist-redirect'), $url->generate('anilist-redirect'),
'Update Access Token' 'Update Access Token',
['class' => 'bracketed user-btn']
) ?> ) ?>
<?php endif ?> <?php endif ?>
<?php else: ?>
<?php require __DIR__ . '/_form.php' ?>
<?php endif ?> <?php endif ?>
</section> </section>
<?php $i++; ?> <?php $i++; ?>

View File

@ -57,79 +57,40 @@ use Aviat\AnimeClient\API\Kitsu;
<article> <article>
<?php if ( ! empty($data['favorites'])): ?> <?php if ( ! empty($data['favorites'])): ?>
<h3>Favorites</h3> <h3>Favorites</h3>
<div class="tabs"> <?= $component->tabs('user-favorites', $data['favorites'], static function ($items, $type) use ($component, $helper, $url) {
<?php $i = 0 ?> $rendered = [];
<?php if ( ! empty($data['favorites']['characters'])): ?> if ($type === 'characters')
<input type="radio" name="user-favorites" id="user-fav-chars" <?= $i === 0 ? 'checked' : '' ?> /> {
<label for="user-fav-chars">Characters</label> uasort($items, fn ($a, $b) => $a['canonicalName'] <=> $b['canonicalName']);
<section class="content full-width media-wrap"> }
<?php foreach($data['favorites']['characters'] as $id => $char): ?> else
<?php if ( ! empty($char['image']['original'])): ?> {
<article class="character"> uasort($items, fn ($a, $b) => Kitsu::filterTitles($a)[0] <=> Kitsu::filterTitles($b)[0]);
<?php $link = $url->generate('character', ['slug' => $char['slug']]) ?> }
<div class="name"><?= $helper->a($link, $char['canonicalName']); ?></div>
<a href="<?= $link ?>"> foreach ($items as $id => $item)
<?= $helper->picture("images/characters/{$char['id']}.webp") ?> {
</a> if ($type === 'characters')
</article> {
<?php endif ?> $rendered[] = $component->character(
<?php endforeach ?> $item['canonicalName'],
</section> $url->generate('character', ['slug', $item['slug']]),
<?php $i++; ?> $helper->picture("images/characters/{$item['id']}.webp")
<?php endif ?> );
<?php if ( ! empty($data['favorites']['anime'])): ?> }
<input type="radio" name="user-favorites" id="user-fav-anime" <?= $i === 0 ? 'checked' : '' ?> /> else
<label for="user-fav-anime">Anime</label> {
<section class="content full-width media-wrap"> $rendered[] = $component->media(
<?php foreach($data['favorites']['anime'] as $anime): ?> Kitsu::filterTitles($item),
<article class="media"> $url->generate("{$type}.details", ['id' => $item['slug']]),
<?php $helper->picture("images/{$type}/{$item['id']}.webp"),
$link = $url->generate('anime.details', ['id' => $anime['slug']]); );
$titles = Kitsu::filterTitles($anime); }
?> }
<a href="<?= $link ?>">
<?= $helper->picture("images/anime/{$anime['id']}.webp") ?> return implode('', array_map('mb_trim', $rendered));
</a>
<div class="name"> }, 'content full-width media-wrap') ?>
<a href="<?= $link ?>">
<?= array_shift($titles) ?>
<?php foreach ($titles as $title): ?>
<br /><small><?= $title ?></small>
<?php endforeach ?>
</a>
</div>
</article>
<?php endforeach ?>
</section>
<?php $i++; ?>
<?php endif ?>
<?php if ( ! empty($data['favorites']['manga'])): ?>
<input type="radio" name="user-favorites" id="user-fav-manga" <?= $i === 0 ? 'checked' : '' ?> />
<label for="user-fav-manga">Manga</label>
<section class="content full-width media-wrap">
<?php foreach($data['favorites']['manga'] as $manga): ?>
<article class="media">
<?php
$link = $url->generate('manga.details', ['id' => $manga['slug']]);
$titles = Kitsu::filterTitles($manga);
?>
<a href="<?= $link ?>">
<?= $helper->picture("images/manga/{$manga['id']}.webp") ?>
</a>
<div class="name">
<a href="<?= $link ?>">
<?= array_shift($titles) ?>
<?php foreach ($titles as $title): ?>
<br /><small><?= $title ?></small>
<?php endforeach ?>
</a>
</div>
</article>
<?php endforeach ?>
</section>
<?php $i++; ?>
<?php endif ?>
</div>
<?php endif ?> <?php endif ?>
</article> </article>
</section> </section>