intro => $intro,
altlink => 'Zie ook <a href="/dieren/uitgebreid">verdergezochte verbanden</a>' .
' of het <a href="/dieren/beknopt">beknopte overzicht</a>.',
+ prefix => qr/^(?!#)\+?/, # no # optional +
+ colfilter => 0,
},
uitgebreid => {
title => 'uitgebreid dieren',
intro => "$intro.. en dergelijke.",
altlink => 'Zie het <a href="/dieren">populaire overzicht</a> voor minder.',
- prefix => '#',
+ prefix => qr/.*?[#]|^[#+]*/, # after optional # or +
secrets => 1,
},
beknopt => {
title => 'beknopt dieren',
intro => "een aantal $intro",
altlink => 'Zie het <a href="/dieren">populaire overzicht</a> voor meer.',
+ prefix => qr/^\+/, # only +
+ colfilter => 1,
},
);
Html({
title => $pageinfo->{title}.' cheat sheet',
- version => '1.0',
+ version => '1.2',
+ lang => 'nl',
description => "Tabeloverzicht met afbeeldingen van $pageinfo->{intro}",
keywords => [qw'
dier beest naam naamgeving woord taal nederlands gerelateerd
relatie vernoemd vernoeming combinatie samenstelling voorvoegsel onverwant
land zee lucht animals dutch language
'],
- raw => <<'EOT',
+ image => 'dieren.jpg',
+ raw => <<"EOT",
<style>
-table {
- width: 100%;
-}
-th {
- width: 1%; /* min-content */
-}
-td {
- width: 15%; /* 1fr */
- vertical-align: bottom;
-}
figure[hidden] {
+ opacity: 0; /* secret */
transition: opacity 1s 0s;
- display: inline;
- opacity: 0;
+ display: block;
}
figure[hidden]:hover {
opacity: 1;
+ transition-delay: 1s;
+}
+figure[hidden]:hover > figcaption {
transition-delay: 2s;
}
+
+\@media (max-width: 60em) {
+ td, th {
+ font-size: 50%;
+ }
+ figcaption small {
+ display: none;
+ }
+ th:first-child {
+ display: none;
+ }
+}
</style>
EOT
});
:>
-<h1>Dierennamen <small>(Dutch animal names)</small></h1>
+<h1>Dierennamen <small lang=en>(Dutch animal names)</small></h1>
<p>
<:
</p>
<:
-my @table = qw(
- >: origineel: zee-: meer_water: land/aardig: anders: #:
- >hond: hond zeehond waterhond?? prairiehond vleerhond #rodehond
- >kat: kat zeekat meerkat cat_325? vliegende_kat #tijgerkat
- #>haas: haas zeehaas waterhaas koolhaas? ossenhaas? #buidelhaas
- >muis: muis zeemuis waterspitsmuis aardmuis vleermuis #computermuis
- >rat: rat zeerat waterrat woestijnrat buidelrat #beverrat
- >egel: egel zee-egel wateregel? aardegel?? mierenegel #
- >varken: varken zeevarken waterzwijn aardvarken stekelvarken #
- >koe: koe zeekoe meerkoetje aardekoe?? koedoe #haiku?
- >paard: paard zeepaardje nijlpaard aardpaard?? luipaard #tijgerpaard
- #>hoorn: eenhoorn zeehoorn zee-eenhoorn? bergahorn neushoorn #eekhoorn
- #>bra: bra(ssière)? zebra - - cobra #sabra
- #>olifant: olifant zeeolifant olifantsvis kamerolifant? - #olifantsoor
- >beer: beer zeebeer waterbeertje ijsbeer wasbeer #neusbeer
- >leeuw: leeuw zeeleeuw waterleeuw?? aardleeuw?? mierenleeuw #
- >wolf: wolf zeewolf waterwolf?? aardwolf korenwolf #buidelwolf
- >haan: haan zeehaan waterhaan rotshaan sprinkhaan #wilde_haan??
- #>pad: pad zebrapad? waterpad? landpad schildpad #paddenstoel
- #>draak: draak zeedraak waterdraak - komododraak #
- #>vlo: vlo zeevlo watervlo aardvlo - #vlok?
- #>mot: mot marmot watermot bergamot - #
- #>bij: bij - waterbij aardbei moerbei hommelbij
-);
-
-@table = qw(
- >hond zeehond prairiehond
- >kat zeekat meerkat
- >muis zeemuis vleermuis
- >egel zee-egel mierenegel
- >varken zeevarken stekelvarken
- >koe zeekoe meerkoetje
- >paard zeepaardje nijlpaard
- >olifant zeeolifant olifantsvis
- >beer zeebeer wasbeer
- >leeuw zeeleeuw mierenleeuw
- >wolf zeewolf korenwolf
- >haan zeehaan sprinkhaan
- >mot marmot bergamot
-) if $Request eq 'beknopt';
+my $table = Data('dieren');
if (exists $get{r}) {
use List::MoreUtils qw( part );
- my @trans = (part { state $col; /^#?>/ ? ($col = 0) : ++$col } @table);
- @table = ();
+ my @trans = (part { state $col; /^#?>/ ? ($col = 0) : ++$col } @{$table});
+ $table = [];
for (@trans) {
unshift @$_, '?:' if $_->[0] !~ /:$/;
$_->[0] =~ s/^#?\K>?/>>/;
for (@$_) {
- push @table, s/^#?\K>/$1/r;
+ push @$table, s/^#?\K>/$1/r;
}
}
}
-say '<table>';
-while (my $name = shift @table) {
- if ($name =~ s/^#// and !$pageinfo->{prefix}) {
- while ($name = shift @table) {
- last if $name =~ m/^>/;
- }
- $name or next;
- }
- if ($name =~ s/^>//) {
- # leading dash starts a new row
- say '</tr>' if $name;
- print "<tr>";
+for my $prefix ($pageinfo->{prefix}) {
+ for my $col ($pageinfo->{colfilter} // ()) {
+ @{$table} = grep { $_->[$col] =~ $prefix } @{$table};
}
- $name =~ s/^-$//;
- my ($img) = $name =~ /^([\w-]+)/;
- $name =~ y/_/ /;
- if ($name =~ s/:$//) {
- # trailing colon indicates header text
- print "<th>$name</th>";
- next;
- }
- print '<td>';
- my $hidden = $name =~ s/\?$//;
- my $alt = $name;
- $name = "<q>$name</q>" if $name =~ s/\?$//;
+ $_ = [ grep { s/$prefix// } @{$_} ] for @{$table};
+}
- printf '<figure%s>', $hidden && !$pageinfo->{secrets} && ' hidden';
- if ($img and -e ($img = "data/dieren/$img.jpg")) {
- my $alt = -l $img && readlink($img) =~ s/\.jpg$//r;
- if ($alt) {
- $name .= " ($alt)";
+say '<table class="gallery">';
+for my $row (@{$table}) {
+ print '<tr>';
+ for my $name (@{$row}) {
+ my $hidden = $name =~ s/^\?//;
+ $name =~ s/#.*//; # ignore prefixed part
+ $name =~ s/^-$//;
+ my ($img) = $name =~ /([\w-]+)/;
+ $name =~ y/_/ /;
+ if ($name =~ s/:$//) {
+ # trailing colon indicates header text
+ print "<th>$name</th>";
+ next;
+ }
+ print '<td>';
+ my $alt = $1 if $name =~ s/=(.*)//;
+ $name = "<q>$name</q>" if $name =~ s/\?$//;
+ $name .= " <small>($alt)</small>" if $alt;
+
+ printf '<figure%s>', $hidden && !$pageinfo->{secrets} && ' hidden';
+ if ($img and -e ($img = lc "data/dieren/$img.jpg")) {
+ printf '<img src="/%s"', $img;
+ printf ' alt="%s"', $alt || $name;
+ print ' />';
+ print "<figcaption>$name</figcaption>";
+ }
+ elsif ($hidden) {
+ printf '<figcaption>%s</figcaption>', "$name?";
}
else {
- $alt = $name;
+ print $name;
}
- print "<figcaption>$name</figcaption>";
- printf '<img src="/%s"', $img;
- printf ' alt="%s"', $alt;
- print ' />';
- }
- elsif ($hidden) {
- printf '<figcaption>%s</figcaption>', "$name?";
- }
- else {
- print $name;
+ print '</figure>';
+ print '</td>';
}
- print '</figure>';
- print '</td>';
+ say '</tr>';
}
-say '</tr></table>';
+say '</table>';
git.shiar.nl / sheet.git / blobdiff