mason/dhandler: Mark thumbnail images as loading lazily.
[tgal] / mason / dhandler
CommitLineData
6ac5dde2
MW
1%### -*-html-*-
2%###
3%### Main output for Trivial Gallery.
4%###
5%### (c) 2021 Mark Wooding
6%###
7%
8%###----- Licensing notice --------------------------------------------------
9%###
10%### This file is part of Trivial Gallery.
11%###
12%### Trivial Gallery is free software: you can redistribute it and/or modify
13%### it under the terms of the GNU Affero General Public License as
14%### published by the Free Software Foundation; either version 3 of the
15%### License, or (at your option) any later version.
16%###
17%### Trivial Gallery is distributed in the hope that it will be useful, but
18%### WITHOUT ANY WARRANTY; without even the implied warranty of
19%### MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
20%### Affero General Public License for more details.
21%###
22%### You should have received a copy of the GNU Affero General Public
23%### License along with Trivial Gallery. If not, see
24%### <https://www.gnu.org/licenses/>.
25%
26%###-------------------------------------------------------------------------
27<%def .html>\
28% $r->content_type("text/html; charset=\"utf-8\"");
29<!DOCTYPE html>
30<!--
31Trivial Gallery, copyright © 2021 Mark Wooding.
32Free software: you can redistribute it and/or modify it under the terms
33of the GNU Affero General Public License.
34-->
35<html>
36<head>
37 <meta name=viewport content="width=device-width initial-scale=1.0">
38 <script type="text/javascript" src="<% "$STATICURL/tgal.js" |u %>" defer></script>
39 <link rel=stylesheet type=text/css href="<% "$STATICURL/tgal.css" |u %>">
40<% $head %>\
41 <title><% $title %></title>
42</head>
43<body>
44<% $m->content %>
45</body>
46</html>\
47%
48<%args>
49 $title
50 $head => ""
51</%args>
52</%def>
53%
54%###-------------------------------------------------------------------------
55<%def .not-found>\
56<&| .html, title => "Not found" &>
57<h1>Not found</h1>
58Failed to find &lsquo;<% $path |h %>&rsquo;.
59</&>
60% return 404;
61%
62<%args>
63 $path
64</%args>
65</%def>
66%
67%###-------------------------------------------------------------------------
68<%def .contact>\
69<%perl>
70 unless ($r->path_info =~ m!/$!) {
71 $m->redirect(join_paths($SCRIPTURL, $path) . "/");
72 }
73 my $real = join_paths $IMGROOT, $path;
74 my $url = join_paths $SCRIPTURL, $path;
75 my ($dd, $ff, $ii) = listdir $real;
76 my $links = "";
77 my $uplink;
78 if ($path eq "" || $path eq "/") { $uplink = undef; }
79 else {
80 ($uplink = $path) =~ s![^/]*/$!!;
81 $links .= sprintf " <link rel=up href=\"%s\">\n",
82 urlencode "$SCRIPTURL/$uplink";
83 }
84 (my $nosl = $path) =~ s!/$!!;
85</%perl>
86%
87<&| .html, title => "Folder " . $m->interp->apply_escapes($nosl || "[top]", "h"),
88 head => $links &>
89<& .breadcrumbs, what => "Folder", path => $path &>
90%
91% my $note = contents "$IMGROOT/$path/.tgal-note.html";
92% if (defined $note) {
93<div class=note>
94<% $note %>
95</div>
96% }
97%
98% if (@$dd) {
99<h2>Subfolders</h2>
100<div class=gallery>
101% for my $d (@$dd) {
102% my ($ddd, $fff, $iii) = listdir $real . "/" . $d->name;
103% my $tn;
104% if ($iii) { $tn = join_paths $path, $d->name . "/" . $iii->name; }
105% else { $tn = undef; }
106 <& .thumbnail, target => $d->name . "/", img => $tn,
107 caption => $m->interp->apply_escapes($d->name, "h"),
108 comment => $d->comment &>\
109% }
110</div>
111% }
112%
113% if (@$ff) {
114<h2>Images</h2>
115<div class=gallery>
116% for my $f (@$ff) {
117 <& .thumbnail, target => $f->name, img => $path . $f->name,
118 caption => $m->interp->apply_escapes($f->name, "h"),
119 comment => $f->comment &>\
120% }
121</div>
122% }
123%
124<div class=fill></div>
125<& .footer, path => $path &>
126</&>
127%
128<%args>
129 $path
130</%args>
131</%def>
132%
133%###-------------------------------------------------------------------------
134<%def .image>\
135<%perl>
136 my ($dir, $base, $ext) = split_path $path;
137 my $real = join_paths $IMGROOT, $path;
138 my $url = join_paths $IMGURL, $path;
139 my $realdir = join_paths $IMGROOT, $dir;
140 my $urldir = join_paths $SCRIPTURL, $dir;
141 my ($dd, $ff, $ii) = listdir $realdir;
142 my $vw = scaled "view", $path;
143
144 my $fi = undef;
145 FILE: for (my $i = 0; $i < @$ff; $i++)
146 { if ($ff->[$i]->name eq "$base$ext") { $fi = $i; last FILE; } }
147 defined $fi or die "image not found in its folder?";
148 my $this = $ff->[$fi];
149
150 my %link;
151 $link{up} = "";
152 if ($fi != 0) {
153 $link{first} = $ff->[0]->name;
154 $link{prev} = $ff->[$fi - 1]->name;
155 }
156 if ($fi != @$ff - 1) {
157 $link{last} = $ff->[-1]->name;
158 $link{next} = $ff->[$fi + 1]->name;
159 }
160
161 my $links = "";
162 my $pre =
163 urlencode join_paths $SCRIPTURL, $dir;
164 for my $rel (qw{up first prev next last}) {
165 exists $link{$rel} and
166 $links .= sprintf " <link rel=%s href=\"%s\">\n",
167 $rel, urlencode "$pre/$link{$rel}";
168 }
169</%perl>
170%
171<&| .html, title => "Image " . $m->interp->apply_escapes($path, "h"),
172 head => $links &>
173<& .breadcrumbs, what => "Image", path => $path &>
174% if ($this->comment) {
175 <div class=comment>
176 <p><% $this->comment %>
177 </div>
178% }
179%
180<div class=viewnav>
181% if ($link{prev}) {
182 <div class=prev><a class=prev href="<% "$pre/$link{prev}" |u %>">&lsaquo;</a></div>
183% }
184 <a class=view href="<% $url |h %>">
185 <img src="<% $vw |h %>">
186 </a>
187% if ($link{next}) {
188 <div class=next><a class=next href="<% "$pre/$link{next}" |u %>">&rsaquo;</a></div>
189% }
190</div>
191%
192<div class=thumbstrip>
193% for my $f (@$ff) {
194 <& .thumbnail, target => $f->name, img => $dir . "/" . $f->name,
195 caption => $m->interp->apply_escapes($f->name, "h"),
196 focus => $f->name eq "$base$ext" &>\
197% }
198</div>
199<& .footer, path => $dir &>
200</&>
201%
202<%args>
203 $path
204</%args>
205</%def>
206%
207%###-------------------------------------------------------------------------
208<%def .breadcrumbs>\
209% $path =~ s!/$!!;
210% my @p = split m!/!, $path;
211% my $pp = "";
212% my $prev = undef;
213<h1><% $what %> \
214% if (!@p) {
215[top]
216% } else {
217<a href="<% $SCRIPTURL |u %>/">[top]</a>&thinsp;/&thinsp;\
218% STEP: for my $p (@p) {
219% if (defined $prev) {
220% $pp .= "$prev/";
221<a href="<% join_paths($SCRIPTURL, $pp) |u %>/">\
222<% $prev %></a>&thinsp;/&thinsp;\
223% }
224% $prev = $p;
225% }
226<% $prev %>\
227% }
228</h1>
229<%args>
230 $what
231 $path
232</%args>
233</%def>
234%
235%###-------------------------------------------------------------------------
236<%def .thumbnail>\
237% my $tn;
238% if (defined $img) { $tn = scaled "thumb", $img; }
239% else { $tn = "$STATICURL/folder.svg"; }
240% if ($focus) {
83bfcbc7 241 <figure class=thumb id=focusthumb>
2d66be5a 242 <img class=thumb load=lazy src="<% $tn |u %>">
83bfcbc7 243 <figcaption><span class=name><% $caption %></span></figcaption>
6ac5dde2 244% } else {
83bfcbc7 245 <figure class=thumb>
56340849 246 <a class=thumb href="<% $target |u %>">
2d66be5a 247 <img class=thumb load=lazy src="<% $tn |u %>">
83bfcbc7 248 <figcaption>
6ac5dde2
MW
249 <span class=name><% $caption %></span>
250% if (defined $comment) {
251 <span class=comment><% $comment %></span>
252% }
83bfcbc7 253 </figcaption>
6ac5dde2
MW
254 </a>
255% }
83bfcbc7 256 </figure>
6ac5dde2
MW
257%
258<%args>
259 $target
260 $img
261 $caption
262 $comment => undef
263 $focus => 0
264</%args>
265</%def>
266%
267%###-------------------------------------------------------------------------
268<%def .footer>\
269<%perl>
270</%perl>
271<div class=footer>
272 <div class=footitem>
273 <a href="https://www.gnu.org/licenses/agpl-3.0.en.html"><img class=licence src="<% "$STATICURL/agpl.png" |u %>"></a>
274 Trivial Gallery, copyright &copy; 2021 Mark Wooding.
275 Free software: you can modify it and/or redistribute it under the
276 terms of the
277 <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">GNU Affero
278 General Public License version 3</a>.
279 Browse or download
280 the <a href="https://git.distorted.org.uk/~mdw/tgal/">source code</a>.
281 </div>
282% my $user =
283% find_covering_file $IMGROOT, $path, ".tgal-footer.html";
284% if (defined $user) {
285 <div class=footitem>
286<% $user %>
287 </div>
288% }
289</div>
290<%args>
291 $path
292</%args>
293</%def>
294%
295%###-------------------------------------------------------------------------
296<%once>
297 use autodie;
298use Data::Dumper;
299 use File::stat;
300
301 use TrivGal;
302</%once>
303%
304<%init>
305 TrivGal->init;
306
307 my $path = $m->dhandler_arg;
308 my $st = stat "$IMGROOT/$path";
309 my $comp;
310 if (!$st) { $comp = ".not-found"; }
311 elsif (-d $st) { $comp = ".contact"; }
312 elsif (-f $st) { $comp = ".image"; }
313 else { $comp = ".not-found"; }
314 $m->comp($comp, path => $path);
315</%init>
316%
317%###----- That's all, folks -------------------------------------------------