word.plp

   1 <(common.inc.plp)><:
   2
   3 my $wordlist = 'wordlist.eng.inc.pl';
   4 my $limit = $get{v} // (exists $get{v} ? 4 : 3);
   5
   6 Html({
   7         title => 'words cheat sheet',
   8         version => '1.0',
   9         description => "Visual words",
  10         keywords => [qw'
  11                 language
  12         '],
  13         data => [$wordlist],
  14         raw => <<'EOT',
  15 <style>
  16 ul {
  17         display: grid;
  18         grid: auto-flow dense / repeat(auto-fit, minmax(200px, 1fr));
  19         grid-gap: 1px;
  20 }
  21 li, ul ul {
  22         display: contents;
  23 }
  24 figure {
  25         overflow: hidden;
  26         box-sizing: border-box;
  27 }
  28 figcaption > small {
  29         display: inline-block;
  30 }
  31
  32 li.large > figure {
  33         grid-row: span 2;
  34         grid-column: span 2;
  35 }
  36 @media (min-width: 600px) and (min-height: 400px) {
  37         p + ul > li:first-child > figure {
  38                 grid-row: span 3;
  39                 grid-column: span 3;
  40         }
  41 }
  42
  43 figure:hover ~ ul figure,
  44 figure:hover ~ ul figcaption {
  45         background: #CCC;
  46         color: #000;
  47 }
  48 figure:hover ~ ul figcaption {
  49         background: rgba(255, 255, 255, .5);
  50 }
  51
  52 figure, figcaption {
  53         transition: all .5s ease-in;
  54 }
  55 li.parent:hover > figure > figcaption,
  56 figure:hover > figcaption {
  57         font-size: 175%;
  58         right: 50%;
  59         bottom: 50%;
  60         transform: translate(50%, 50%);
  61         margin-left: -60%; /* keep width */
  62 }
  63 </style>
  64 EOT
  65 });
  66 :>
  67 <h1>Words</h1>
  68
  69 <p>
  70 Under construction.
  71 Zie ook <a href="/dieren">dieren</a>.
  72 </p>
  73
  74 <:
  75 my $table = do $wordlist or die $@ // $!;
  76
  77 sub showimg {
  78         my ($name) = @_;
  79         my ($imgname) = $name =~ /^([\w -]+)/;
  80         $name =~ s/\w{4} [^aoeuiyc\W] [rl]?+ \K (?= [^aoeuiy\W] [rl]? [aoeuiy] \w)/&shy;/gx;
  81         $name =~ s{/(.*)}{ <small>($1)</small>}g;
  82         my $hidden = $name =~ s/\?$//;
  83         my $alt = $name;
  84         $name = "<q>$name</q>" if $name =~ s/\?$//;
  85         $name = "<figcaption>$name</figcaption>";
  86
  87         if ($imgname and -e ($img = "data/word/eng/$imgname.jpg")) {
  88                 $name .= sprintf '<img src="/%s" alt="%s" />', $img, $imgname;
  89         }
  90         return sprintf '<figure%s>%s</figure>', $hidden && !exists $get{v} && ' hidden', $name;
  91 }
  92
  93 sub printimgs {
  94         say '<ul>';
  95         for my $row (@_) {
  96                 my ($level, $mark, $title) = split /([a-z]*):/, $row, 2;
  97                 my @type;
  98                 push @type, 'parent' if defined $table->{$row};
  99                 push @type, 'large'  if $mark;
 100                 push @type, 'level'.($level || 0);
 101                 printf '<li%s>', @type ? sprintf ' class="%s"', join ' ', @type : '';
 102                 print showimg($title) if $level <= $limit;
 103                 printimgs(@{$_}) for $table->{$row} // ();
 104                 print '</li>';
 105         }
 106         say '</ul>';
 107 }
 108
 109 printimgs(@{$table->{''}});