<(common.inc.plp)><:
-my $wordlist = 'wordlist.eng.inc.pl';
+our $lang = $get{lang} || 'en';
+our $wordlistbase = "data/wordlist";
+
+if ($Request and $Request =~ m{\A([^/]+)}) {
+ my $page = "word/$1.plp";
+ utf8::downgrade($page); # unicode filename breaks contents encoding
+ if (-e $page) {
+ $wordlistbase .= ".$lang";
+ Include $page;
+ exit;
+ }
+}
+
+my $limit = $get{v} // (exists $get{v} ? 5 : 3);
+
Html({
title => 'words cheat sheet',
version => '1.0',
keywords => [qw'
language
'],
- data => [$wordlist],
- raw => <<'EOT',
+ data => ["$wordlistbase.inc.pl"],
+ raw => exists $get{q} ? <<'EOT' : undef,
<style>
-ul {
- display: flex;
- flex-wrap: wrap;
- align-items: end;
- margin: -1px;
-}
-li, ul ul {
- display: contents;
- height: 100%;
-}
-figure {
- flex: 200px;
- flex-grow: 1;
- max-width: 300px;
- overflow: hidden;
- padding: 1px;
-}
-figcaption > small {
- display: inline-block;
-}
-
-figure:hover ~ ul figure,
-figure:hover ~ ul figcaption {
- background: #CCC;
- color: #000;
-}
-figure:hover ~ ul figcaption {
- background: rgba(255, 255, 255, .5);
-}
-
-figure, figcaption {
- transition: all .5s ease-in;
+.gallery figure {
+ grid-row: span 1 !important;
+ grid-column: span 1 !important;
}
-li.parent:hover > figure > figcaption,
-figure:hover > figcaption {
- font-size: 175%;
+.gallery figcaption {
+ /* keep hover position */
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
- margin-left: -60%; /* keep width */
+ /* hide */
+ visibility: hidden;
+ font-size: 0 !important;
+}
+.gallery figure:active > figcaption {
+ visibility: visible;
+ font-size: 175% !important;
}
</style>
EOT
});
+if (exists $get{debug}) {
+ say '<style>';
+ include 'word-debug.css';
+ say '</style>';
+}
:>
<h1>Words</h1>
<p>
Under construction.
Zie ook <a href="/dieren">dieren</a>.
+<a href="?q">Omit translations</a> to test.
</p>
<:
-my $table = do $wordlist or die $@ // $!;
+my $table = Data($wordlistbase);
sub showimg {
- my ($name) = @_;
- my ($img) = $name =~ /^([\w -]+)/;
+ my ($id, $name) = @_;
+ my ($imgname) = $name =~ m{^([^/]+)};
$name =~ s/\w{4} [^aoeuiyc\W] [rl]?+ \K (?= [^aoeuiy\W] [rl]? [aoeuiy] \w)/­/gx;
- $name =~ s{/(.*)}{ <small>($1)</small>}g;
+ ($name, my @morenames) = split m{/}, $name;
+ $name =~ s{\( ([^/]+) \)}{<small>$1</small>}x;
+ $name .= " <small>($_)</small>" for @morenames;
my $hidden = $name =~ s/\?$//;
- my $alt = $name;
$name = "<q>$name</q>" if $name =~ s/\?$//;
+ $name = "<figcaption>$name</figcaption>";
- if ($img and -e ($img = "data/word/eng/$img.jpg")) {
- my $alt = -l $img && readlink($img) =~ s/\.jpg$//r;
- if ($alt) {
- $name .= " ($alt)";
- }
- else {
- $alt = $name;
- }
- $name = "<figcaption>$name</figcaption>";
- $name .= sprintf '<img src="/%s" alt="%s" />', $img, $alt;
- }
- elsif ($hidden) {
- $name = "<figcaption>$name?</figcaption>";
+ if ($id and -e (my $img = "data/word/32/$id.jpg")) {
+ $name .= sprintf '<img src="/%s" alt="%s" />', $img, $imgname;
}
return sprintf '<figure%s>%s</figure>', $hidden && !exists $get{v} && ' hidden', $name;
}
sub printimgs {
say '<ul>';
for my $row (@_) {
- printf '<li%s>', defined $table->{$row} && ' class="parent"';
- print showimg($row);
- printimgs(@{$_}) for $table->{$row} // ();
+ my ($id, $level, $title) = @{$row};
+ $id or die "empty reference"; # assertion to prevent loops
+ my @type;
+ push @type, 'parent' if defined $table->{$id};
+ push @type, 'large' if $level =~ s/c$//;
+ push @type, 'level'.($level || 0);
+ printf '<li%s>', @type ? sprintf ' class="%s"', join ' ', @type : '';
+ print showimg($id, $title) if $level <= $limit;
+ printimgs(@{$_}) for $table->{$id} // ();
print '</li>';
}
say '</ul>';
}
-printimgs(@{$table->{''}});
+say '<section class="gallery">';
+if (exists $get{q}) {
+ my @rows;
+ if ($Request) {
+ my @query = $Request;
+ while (@query) {
+ push @rows, grep { $_->[1] <= $limit } @query;
+ $_ = $_->[0] for @query;
+ @query = map {$_ ? @{$_} : ()} @{$table}{@query};
+ }
+ }
+ else {
+ @rows = map {ref ? @$_ : $_} values %{$table}; # flatten categories
+ }
+ @rows = sort { rand <=> .5 } @rows;
+ $table = {};
+ printimgs(@rows);
+}
+elsif ($Request and $Request =~ /^\d+$/) {
+ printimgs([$Request]);
+}
+else {
+ printimgs($table->{''}->[0]);
+}
+say '</section>';