word.plp

   1 <(common.inc.plp)><:
   2
   3 my $wordlist = 'wordlist.en.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 if (exists $get{debug}) {
  68         say '<style>';
  69         include 'word-debug.css';
  70         say '</style>';
  71 }
  72 :>
  73 <h1>Words</h1>
  74
  75 <p>
  76 Under construction.
  77 Zie ook <a href="/dieren">dieren</a>.
  78 </p>
  79
  80 <:
  81 my $table = do $wordlist or die $@ // $!;
  82
  83 sub showimg {
  84         my ($name) = @_;
  85         my ($imgname) = $name =~ /^([\w -]+)/;
  86         $name =~ s/\w{4} [^aoeuiyc\W] [rl]?+ \K (?= [^aoeuiy\W] [rl]? [aoeuiy] \w)/&shy;/gx;
  87         $name =~ s{/(.*)}{ <small>($1)</small>}g;
  88         my $hidden = $name =~ s/\?$//;
  89         my $alt = $name;
  90         $name = "<q>$name</q>" if $name =~ s/\?$//;
  91         $name = "<figcaption>$name</figcaption>";
  92
  93         if ($imgname and -e ($img = "data/word/en/$imgname.jpg")) {
  94                 $name .= sprintf '<img src="/%s" alt="%s" />', $img, $imgname;
  95         }
  96         return sprintf '<figure%s>%s</figure>', $hidden && !exists $get{v} && ' hidden', $name;
  97 }
  98
  99 sub printimgs {
 100         say '<ul>';
 101         for my $row (@_) {
 102                 my ($level, $mark, $title) = split /([a-z]*):/, $row, 2;
 103                 my @type;
 104                 push @type, 'parent' if defined $table->{$row};
 105                 push @type, 'large'  if $mark;
 106                 push @type, 'level'.($level || 0);
 107                 printf '<li%s>', @type ? sprintf ' class="%s"', join ' ', @type : '';
 108                 print showimg($title) if $level <= $limit;
 109                 printimgs(@{$_}) for $table->{$row} // ();
 110                 print '</li>';
 111         }
 112         say '</ul>';
 113 }
 114
 115 printimgs(@{$table->{''}});