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 body {
  33         margin: 8px 1px;
  34 }
  35 @media (min-width: 403px) and (min-height: 266px) {
  36         li.large > figure {
  37                 grid-row: span 2;
  38                 grid-column: span 2;
  39         }
  40 }
  41 @media (min-width: 603px) and (min-height: 400px) {
  42         p + ul > li:first-child > figure {
  43                 grid-row: span 3;
  44                 grid-column: span 3;
  45         }
  46 }
  47
  48 figure:hover ~ ul figure,
  49 figure:hover ~ ul figcaption {
  50         background: #CCC;
  51         color: #000;
  52 }
  53 figure:hover ~ ul figcaption {
  54         background: rgba(255, 255, 255, .5);
  55 }
  56
  57 figure, figcaption {
  58         transition: all .5s ease-in;
  59 }
  60 li.parent:hover > figure > figcaption,
  61 figure:hover > figcaption {
  62         font-size: 175%;
  63         right: 50%;
  64         bottom: 50%;
  65         transform: translate(50%, 50%);
  66         margin-left: -60%; /* keep width */
  67 }
  68 </style>
  69 EOT
  70 });
  71
  72 if (exists $get{debug}) {
  73         say '<style>';
  74         include 'word-debug.css';
  75         say '</style>';
  76 }
  77 :>
  78 <h1>Words</h1>
  79
  80 <p>
  81 Under construction.
  82 Zie ook <a href="/dieren">dieren</a>.
  83 </p>
  84
  85 <:
  86 my $table = do $wordlist or die $@ // $!;
  87
  88 sub showimg {
  89         my ($name) = @_;
  90         my ($imgname) = $name =~ /^([\w -]+)/;
  91         $name =~ s/\w{4} [^aoeuiyc\W] [rl]?+ \K (?= [^aoeuiy\W] [rl]? [aoeuiy] \w)/&shy;/gx;
  92         $name =~ s{/(.*)}{ <small>($1)</small>}g;
  93         my $hidden = $name =~ s/\?$//;
  94         my $alt = $name;
  95         $name = "<q>$name</q>" if $name =~ s/\?$//;
  96         $name = "<figcaption>$name</figcaption>";
  97
  98         if ($imgname and -e (my $img = "data/word/en/$imgname.jpg")) {
  99                 $name .= sprintf '<img src="/%s" alt="%s" />', $img, $imgname;
 100         }
 101         return sprintf '<figure%s>%s</figure>', $hidden && !exists $get{v} && ' hidden', $name;
 102 }
 103
 104 sub printimgs {
 105         say '<ul>';
 106         for my $row (@_) {
 107                 my ($level, $mark, $title) = split /([a-z]*):/, $row, 2;
 108                 my @type;
 109                 push @type, 'parent' if defined $table->{$row};
 110                 push @type, 'large'  if $mark;
 111                 push @type, 'level'.($level || 0);
 112                 printf '<li%s>', @type ? sprintf ' class="%s"', join ' ', @type : '';
 113                 print showimg($title) if $level <= $limit;
 114                 printimgs(@{$_}) for $table->{$row} // ();
 115                 print '</li>';
 116         }
 117         say '</ul>';
 118 }
 119
 120 printimgs(@{$table->{''}});