From 84b16cfb3e4428c4b07dddd8e4c5aa1f2aa1b6d7 Mon Sep 17 00:00:00 2001 From: "Steinar H. Gunderson" Date: Mon, 31 Jul 2006 17:02:20 +0200 Subject: [PATCH] Add a new and very hip fullscreen interface; not exposed to the users just yet, but it's coming. --- next.png | Bin 0 -> 1504 bytes perl/Sesse/pr0n/Index.pm | 262 ++++++++++++++++++++------------------- perl/Sesse/pr0n/pr0n.pm | 4 + pr0n-fullscreen.css | 45 +++++++ pr0n-fullscreen.js | 219 ++++++++++++++++++++++++++++++++ previous.png | Bin 0 -> 1507 bytes 6 files changed, 404 insertions(+), 126 deletions(-) create mode 100644 next.png create mode 100644 pr0n-fullscreen.css create mode 100644 pr0n-fullscreen.js create mode 100644 previous.png diff --git a/next.png b/next.png new file mode 100644 index 0000000000000000000000000000000000000000..0b19641cbe672328cab1516bfea46db49170f277 GIT binary patch literal 1504 zcmV<61t0o}P)i!TQpq zl2XJLZBtFr5*uq$T}7nP<-wM6Db!0yDWRl3lt`e~TDfdNfoQ@-!mZd9MOBOQ%i}2-% z6G%u%0MGNUP!v_YHYR2(aWMh_US3}KIzJyTsH- zQ=+1xux8Dg$IsWt$HU#-9c}IHG{Z2)*Mfrs8HTB`+wBq&9{HzIQ&VxsWP)5ShrshY z)PaHL0@P~X7q!di^!j4}LIEtB&Hr<7DK2~3`{d+g`1<jg4&z2?@E#yId(Y zo2}=$K>(}*5Dma@Aw3fr8HrP;PT`=*gsWGtt_;y=E^5QV-m)|`U3ngRluoa&aXOvR z+tSnh3 zUOjU5>{;pmlGEvw^78T|on9}+>2y+TZ0zBeKG^?Fa=9G)_U*&2ojW1tI8Zcwczr@b z$%>ULX`(=8m7boCBRM&6b91Anr>8&i@$osQ(P%u00|9_Ug8@ZFMOeCYDFi{-r1JM~ z2?`2YK^zDGtOyUsH^s#W3k$=eM~}h-)an|8(U?RW2mq+nYUF?Q6*g|%h=&g!zAEti zPYDLYR^mVaz|+$cN3yf=ZfYu=PN%0J2;b@B<3DFvmLUoR0631r{{8#$>E69y7>1ge znfW3rI{FMnQ4~=ivr0=#!_k}^czSw5lB9HfeEhGgA|e(O2Lb>_qY;G#1yHF}n3XhNhBpDVRCZP zPpwv05ef37GM+fu?RMg(%~xqCN8Mn)i$$?EUlzrVS+x3`C=qg7E+fs)cv@H`KOValhbrZPJ_IwpvT z5lNCzQd)|#vNBK?hnb-}~K<1Wi_?>E-h*AbO|ulMxeXig4>Zrp&oyZiMULqjQ6tF@b`d!(VU z5oWU)cDo%M$2E=IzWt`vYIP8GA(oeyxi(tC@=f`cX#TrL+B3PtU}z(9u0X1hyN8DCjhiK60Sh@uFV6G6smM&s?c8a3F^E}$x+W`PdrSg}~&dzP)V`HQ9<^6eYbvceJ?Cb5_ zG@lUj86z?PU|BY|p}yWk>^O*~>01tmV^?QKN6A8^_P+p-(v`75w4j3k0000param('fullscreen')) && $apr->param('fullscreen') eq '1'); for my $s qw(thumbxres thumbyres xres yres start num all infobox rot sel) { my $val = $apr->param($s); @@ -102,142 +103,151 @@ sub handler { or dberror($r, "image enumeration"); # Print the page itself - Sesse::pr0n::Common::header($r, "$name [$event]"); - Sesse::pr0n::Templates::print_template($r, "date", { date => $date }); - - if (Sesse::pr0n::Overload::is_in_overload($r)) { - Sesse::pr0n::Templates::print_template($r, "overloadmode"); - } - - print_thumbsize($r, $event, \%settings, \%defsettings); - print_viewres($r, $event, \%settings, \%defsettings); - print_pagelimit($r, $event, \%settings, \%defsettings); - print_infobox($r, $event, \%settings, \%defsettings); - print_nextprev($r, $event, \%settings, \%defsettings); - print_selected($r, $event, \%settings, \%defsettings) if ($num_selected > 0); - - my $toclose = 0; - my $lastupl = ""; - - # Print out all thumbnails - if ($rot == 1) { - $r->print("
\n"); - + if ($fullscreen) { + $r->content_type("text/html; charset=utf-8"); + Sesse::pr0n::Templates::print_template($r, "fullscreen-header", { title => "$name [$event]" }); while (my $ref = $q->fetchrow_hashref()) { - my $imgsz = ""; - my $takenby = $ref->{'takenby'}; - if (defined($ref->{'day'})) { - $takenby .= ", " . $ref->{'day'}; - } - - if ($takenby ne $lastupl) { - $lastupl = $takenby; - Sesse::pr0n::Templates::print_template($r, "submittedby", { author => $lastupl }); - } - if ($ref->{'width'} != -1 && $ref->{'height'} != -1) { - my $width = $ref->{'width'}; - my $height = $ref->{'height'}; - - ($width, $height) = Sesse::pr0n::Common::scale_aspect($width, $height, $thumbxres, $thumbyres); - $imgsz = " width=\"$width\" height=\"$height\""; - } - - my $filename = $ref->{'filename'}; - my $uri = $filename; - if (defined($xres) && defined($yres) && $xres != -1) { - $uri = "${xres}x$yres/$infobox$filename"; - } elsif (defined($xres) && $xres == -1) { - $uri = "original/$infobox$filename"; - } - - $r->print("

\"\"$imgsz\n"); - $r->print(" 90 {'id'} . "-90\" />\n"); - $r->print(" 180 {'id'} . "-180\" />\n"); - $r->print(" 270 {'id'} . "-270\" />\n"); - $r->print("        " . - "     Del {'id'} . "\" />

\n"); + $r->print(" \"" . $ref->{'filename'} . "\",\n"); } - $r->print(" \n"); - $r->print("
\n"); - } elsif ($sel == 1) { - $r->print("
\n"); - $r->print(" \n"); - - while (my $ref = $q->fetchrow_hashref()) { - my $imgsz = ""; - my $takenby = $ref->{'takenby'}; - if (defined($ref->{'day'})) { - $takenby .= ", " . $ref->{'day'}; - } - - if ($takenby ne $lastupl) { - $lastupl = $takenby; - Sesse::pr0n::Templates::print_template($r, "submittedby", { author => $lastupl }); - } - if ($ref->{'width'} != -1 && $ref->{'height'} != -1) { - my $width = $ref->{'width'}; - my $height = $ref->{'height'}; - - ($width, $height) = Sesse::pr0n::Common::scale_aspect($width, $height, $thumbxres, $thumbyres); - $imgsz = " width=\"$width\" height=\"$height\""; - } - - my $filename = $ref->{'filename'}; - my $uri = $filename; - if (defined($xres) && defined($yres) && $xres != -1) { - $uri = "${xres}x$yres/$infobox$filename"; - } elsif (defined($xres) && $xres == -1) { - $uri = "original/$infobox$filename"; - } - - my $selected = $ref->{'selected'} ? ' checked="checked"' : ''; + Sesse::pr0n::Templates::print_template($r, "fullscreen-footer", { vhost => $r->get_server_name, event => $event, start => $settings{'start'} - 1 }); + } else { + Sesse::pr0n::Common::header($r, "$name [$event]"); + Sesse::pr0n::Templates::print_template($r, "date", { date => $date }); - $r->print("

\"\"$imgsz\n"); - $r->print(" {'id'} . "\"$selected />

\n"); + if (Sesse::pr0n::Overload::is_in_overload($r)) { + Sesse::pr0n::Templates::print_template($r, "overloadmode"); } - $r->print(" \n"); - $r->print("
\n"); - } else { - while (my $ref = $q->fetchrow_hashref()) { - my $imgsz = ""; - my $takenby = $ref->{'takenby'}; - if (defined($ref->{'day'})) { - $takenby .= ", " . $ref->{'day'}; - } - if ($takenby ne $lastupl) { - $r->print("

\n\n") if ($lastupl ne ""); - $lastupl = $takenby; - Sesse::pr0n::Templates::print_template($r, "submittedby", { author => $lastupl }); - $r->print("

\n"); + print_thumbsize($r, $event, \%settings, \%defsettings); + print_viewres($r, $event, \%settings, \%defsettings); + print_pagelimit($r, $event, \%settings, \%defsettings); + print_infobox($r, $event, \%settings, \%defsettings); + print_nextprev($r, $event, \%settings, \%defsettings); + print_selected($r, $event, \%settings, \%defsettings) if ($num_selected > 0); + + my $toclose = 0; + my $lastupl = ""; + + # Print out all thumbnails + if ($rot == 1) { + $r->print("

\n"); + + while (my $ref = $q->fetchrow_hashref()) { + my $imgsz = ""; + my $takenby = $ref->{'takenby'}; + if (defined($ref->{'day'})) { + $takenby .= ", " . $ref->{'day'}; + } + + if ($takenby ne $lastupl) { + $lastupl = $takenby; + Sesse::pr0n::Templates::print_template($r, "submittedby", { author => $lastupl }); + } + if ($ref->{'width'} != -1 && $ref->{'height'} != -1) { + my $width = $ref->{'width'}; + my $height = $ref->{'height'}; + + ($width, $height) = Sesse::pr0n::Common::scale_aspect($width, $height, $thumbxres, $thumbyres); + $imgsz = " width=\"$width\" height=\"$height\""; + } + + my $filename = $ref->{'filename'}; + my $uri = $filename; + if (defined($xres) && defined($yres) && $xres != -1) { + $uri = "${xres}x$yres/$infobox$filename"; + } elsif (defined($xres) && $xres == -1) { + $uri = "original/$infobox$filename"; + } + + $r->print("

\"\"$imgsz\n"); + $r->print(" 90 {'id'} . "-90\" />\n"); + $r->print(" 180 {'id'} . "-180\" />\n"); + $r->print(" 270 {'id'} . "-270\" />\n"); + $r->print("        " . + "     Del {'id'} . "\" />

\n"); } - if ($ref->{'width'} != -1 && $ref->{'height'} != -1) { - my $width = $ref->{'width'}; - my $height = $ref->{'height'}; - - ($width, $height) = Sesse::pr0n::Common::scale_aspect($width, $height, $thumbxres, $thumbyres); - $imgsz = " width=\"$width\" height=\"$height\""; + $r->print(" \n"); + $r->print("
\n"); + } elsif ($sel == 1) { + $r->print("
\n"); + $r->print(" \n"); + + while (my $ref = $q->fetchrow_hashref()) { + my $imgsz = ""; + my $takenby = $ref->{'takenby'}; + if (defined($ref->{'day'})) { + $takenby .= ", " . $ref->{'day'}; + } + + if ($takenby ne $lastupl) { + $lastupl = $takenby; + Sesse::pr0n::Templates::print_template($r, "submittedby", { author => $lastupl }); + } + if ($ref->{'width'} != -1 && $ref->{'height'} != -1) { + my $width = $ref->{'width'}; + my $height = $ref->{'height'}; + + ($width, $height) = Sesse::pr0n::Common::scale_aspect($width, $height, $thumbxres, $thumbyres); + $imgsz = " width=\"$width\" height=\"$height\""; + } + + my $filename = $ref->{'filename'}; + my $uri = $filename; + if (defined($xres) && defined($yres) && $xres != -1) { + $uri = "${xres}x$yres/$infobox$filename"; + } elsif (defined($xres) && $xres == -1) { + $uri = "original/$infobox$filename"; + } + + my $selected = $ref->{'selected'} ? ' checked="checked"' : ''; + + $r->print("

\"\"$imgsz\n"); + $r->print(" {'id'} . "\"$selected />

\n"); } - - my $filename = $ref->{'filename'}; - my $uri = $filename; - if (defined($xres) && defined($yres) && $xres != -1) { - $uri = "${xres}x$yres/$infobox$filename"; - } elsif (defined($xres) && $xres == -1) { - $uri = "original/$infobox$filename"; + $r->print(" \n"); + $r->print("
\n"); + } else { + while (my $ref = $q->fetchrow_hashref()) { + my $imgsz = ""; + my $takenby = $ref->{'takenby'}; + if (defined($ref->{'day'})) { + $takenby .= ", " . $ref->{'day'}; + } + + if ($takenby ne $lastupl) { + $r->print("

\n\n") if ($lastupl ne ""); + $lastupl = $takenby; + Sesse::pr0n::Templates::print_template($r, "submittedby", { author => $lastupl }); + $r->print("

\n"); + } + if ($ref->{'width'} != -1 && $ref->{'height'} != -1) { + my $width = $ref->{'width'}; + my $height = $ref->{'height'}; + + ($width, $height) = Sesse::pr0n::Common::scale_aspect($width, $height, $thumbxres, $thumbyres); + $imgsz = " width=\"$width\" height=\"$height\""; + } + + my $filename = $ref->{'filename'}; + my $uri = $filename; + if (defined($xres) && defined($yres) && $xres != -1) { + $uri = "${xres}x$yres/$infobox$filename"; + } elsif (defined($xres) && $xres == -1) { + $uri = "original/$infobox$filename"; + } + + $r->print(" \"\"$imgsz\n"); } - - $r->print(" \"\"$imgsz\n"); + $r->print("

\n"); } - $r->print("

\n"); - } - print_nextprev($r, $event, \%settings, \%defsettings); - Sesse::pr0n::Common::footer($r); + print_nextprev($r, $event, \%settings, \%defsettings); + Sesse::pr0n::Common::footer($r); + } return Apache2::Const::OK; } diff --git a/perl/Sesse/pr0n/pr0n.pm b/perl/Sesse/pr0n/pr0n.pm index 79bd3c8..487a01a 100644 --- a/perl/Sesse/pr0n/pr0n.pm +++ b/perl/Sesse/pr0n/pr0n.pm @@ -22,6 +22,10 @@ sub handler { $uri eq '/skoyen.css' || $uri eq '/blah.png' || $uri eq '/faq.html' || + $uri eq '/pr0n-fullscreen.css' || + $uri eq '/pr0n-fullscreen.js' || + $uri eq '/previous.png' || + $uri eq '/next.png' || $uri =~ m#^/usage/([a-zA-Z0-9_.]+)$#) { $uri =~ s#^/##; $r->content_type(Sesse::pr0n::Common::get_mimetype_from_filename($uri)); diff --git a/pr0n-fullscreen.css b/pr0n-fullscreen.css new file mode 100644 index 0000000..cde61ee --- /dev/null +++ b/pr0n-fullscreen.css @@ -0,0 +1,45 @@ +body { + background-color: black; + color: white; + margin: 0; + padding: 0; +} +.container { + text-align: center; +/* border: 1px solid red; */ +} +img { + vertical-align: middle; +} + +#previous { + position: absolute; + bottom: 0px; + left: 0px; + z-index: 1; +} +#next { + position: absolute; + bottom: 0px; + right: 0px; + z-index: 1; +} +#preload { + position: absolute; + left: -2px; + top: -2px; + width: 1px; + height: 1px; +} + +/* IE5/6 madness */ +html +{ + overflow: hidden; +} + +body +{ + height: 100%; + overflow: auto; +} diff --git a/pr0n-fullscreen.js b/pr0n-fullscreen.js new file mode 100644 index 0000000..f087a8f --- /dev/null +++ b/pr0n-fullscreen.js @@ -0,0 +1,219 @@ +function find_width() +{ + if (typeof(window.innerWidth) == 'number') { + // non-IE + return [window.innerWidth, window.innerHeight]; + } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { + // IE 6+ in 'standards compliant mode' + return [document.documentElement.clientWidth, document.documentElement.clientHeight - 42]; + } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { + // IE 4-compatible + return [document.body.clientWidth, document.body.clientHeight]; + } + return (null,null); +} + +/* + * pr0n can resize to any size we'd like, but we're much more likely + * to have this set of fixed-resolution screens cached, so to increase + * performance, we round down to the closest fit and use that. + */ +function reduce_to_fixed_width(size) +{ + var fixed_sizes = [ + [ 1280, 960 ], + [ 1024, 768 ], + [ 800, 600 ], + [ 640, 480 ], + [ 512, 384 ], + [ 320, 256 ], + [ 240, 192 ], + [ 120, 96 ], + [ 80, 64 ] + ]; + for (i = 0; i < fixed_sizes.length; ++i) { + if (size[0] >= fixed_sizes[i][0] && size[1] >= fixed_sizes[i][1]) + return fixed_sizes[i]; + } + return [ 80, 64 ]; +} + +function display_image(width, height, evt, filename, element_id) +{ + var url = "http://" + global_vhost + "/" + evt + "/" + width + "x" + height + "/" + filename; + var img = document.getElementById(element_id); + if (img != null) { + img.src = ""; + img.parentNode.removeChild(img); + } + + img = document.createElement("img"); + img.id = element_id; + img.alt = ""; + + if (img.src != url) { + img.src = url; + } + + var main = document.getElementById("main"); + main.appendChild(img); + + return img; +} + +function prepare_preload(img, width, height, evt, filename) +{ + // cancel any pending preload + var preload = document.getElementById("preload"); + if (preload != null) { + preload.src = ""; + preload.parentNode.removeChild(preload); + } + +// img.onload = function() { display_image(width, height, evt, filename, "preload"); } + img.onload = "display_image(" + width + "," + height + ",\"" + evt + "\",\"" + filename + "\",\"preload\");"; +} + +function relayout() +{ + var size = find_width(); + var adjusted_size = reduce_to_fixed_width(size); + + var img = display_image(adjusted_size[0], adjusted_size[1], global_evt, global_image_list[global_image_num], "image"); + if (can_go_next()) { + prepare_preload(img, adjusted_size[0], adjusted_size[1], global_evt, global_image_list[global_image_num + 1]); + } + + // center the image on-screen + var main = document.getElementById("main"); + main.style.position = "absolute"; + main.style.left = (size[0] - adjusted_size[0]) / 2 + "px"; + main.style.top = (size[1] - adjusted_size[1]) / 2 + "px"; + main.style.width = adjusted_size[0] + "px"; + main.style.height = adjusted_size[1] + "px"; + main.style.lineHeight = adjusted_size[1] + "px"; + if (document.all) { // IE-specific + main.style.fontSize = adjusted_size[1] + "px"; + } + + set_opacity("previous", can_go_previous() ? 0.7 : 0.1); + set_opacity("next", can_go_next() ? 0.7 : 0.1); +} + +function set_opacity(id, amount) +{ + var elem = document.getElementById(id); + if (typeof(elem.style.opacity) != 'undefined') { // W3C + elem.style.opacity = amount; + } else if (typeof(elem.style.mozOpacity) != 'undefined') { // older Mozilla + elem.style.mozOpacity = amount; + } else if (typeof(elem.style.filter) != 'undefined') { // IE + if (elem.style.filter.indexOf("alpha") == -1) { + // add an alpha filter if there isn't one already + if (elem.style.filter) { + elem.style.filter += " "; + } else { + elem.style.filter = ""; + } + elem.style.filter += "alpha(opacity=" + (amount*100.0) + ")"; + } else { + elem.filters.alpha.opacity = (amount * 100.0); + } + } else { // no alpha support + if (amount > 0.5) { + elem.style.visibility = "visible"; + elem.style.zorder = 1; + } else { + elem.style.visibility = "hidden"; + } + } +} + +function can_go_previous() +{ + return (global_image_num > 0); +} + +function go_previous() +{ + if (!can_go_previous()) + return; + + --global_image_num; + + var adjusted_size = reduce_to_fixed_width(find_width()); + + var img = display_image(adjusted_size[0], adjusted_size[1], global_evt, global_image_list[global_image_num], "image"); + if (can_go_previous()) { + set_opacity("previous", 0.7); + prepare_preload(img, adjusted_size[0], adjusted_size[1], global_evt, global_image_list[global_image_num - 1]); + } else { + set_opacity("previous", 0.1); + } + set_opacity("next", can_go_next() ? 0.7 : 0.1); +} + +function can_go_next() +{ + return (global_image_num < global_image_list.length - 1); +} + +function go_next() +{ + if (!can_go_next()) + return; + + ++global_image_num; + + var adjusted_size = reduce_to_fixed_width(find_width()); + + var img = display_image(adjusted_size[0], adjusted_size[1], global_evt, global_image_list[global_image_num], "image"); + if (can_go_next()) { + set_opacity("next", 0.7); + prepare_preload(img, adjusted_size[0], adjusted_size[1], global_evt, global_image_list[global_image_num + 1]); + } else { + set_opacity("next", 0.1); + } + set_opacity("previous", can_go_previous() ? 0.7 : 0.1); +} + +function key_down(which) +{ + if (which == 39) { // right + if (can_go_next()) { + set_opacity("next", 0.99); + } + } else if (which == 37) { // left + if (can_go_previous()) { + set_opacity("previous", 0.99); + } + } +} + +function key_up(which) { + if (which == 39) { // right + if (can_go_next()) { + set_opacity("next", 0.7); + go_next(); + } + } else if (which == 37) { // left + if (can_go_previous()) { + set_opacity("previous", 0.7); + go_previous(); + } + } +} + +// enable the horrible horrible IE PNG hack +function ie_png_hack() +{ + var vstr = navigator.appVersion.split("MSIE"); + var v = parseFloat(vstr[1]); + if (v >= 5.5 && v < 7.0 && document.body.filters) { + var next = document.getElementById("next"); + next.outerHTML = ""; + + var previous = document.getElementById("previous"); + previous.outerHTML = ""; + } +} diff --git a/previous.png b/previous.png new file mode 100644 index 0000000000000000000000000000000000000000..88ae8ffe0a758e200753df391d09e5d10914c1a2 GIT binary patch literal 1507 zcmV<91swW`P)q4d4J zzWuW;b90E;V&6W0y}aa}d%y3Td(J&KkH#F5sMT(aiHQm9@9$>>LGY+;$y|xZ&dDhY z2naamcDp0pZnxlR`%-TUP^;B+Y+T$)mSs!-c*T2T9F+TESvA`59T!? ztFp4*aJ$_NcDp?_K0Y473I%??a|csXQ(l?RD|(EgjYfvXP>%jKvjFGqfU zKIWQN5~5P6mc_)xT$pq?5>!ehYHDhboSZ!E7>c3}W@KiTcxe4JfMEdLvlf!2*QfJ5 ze|cm&KR>@0A63G_ zpbiW3s4E^md}IBuICAt){`Mp01_e1#baS-Ny-P-tjq6UT9D zlP`6!FWK!`GNrNVdU{%du?TD|ffsmk}po<*Gj z?60VR!C-(`kODwlT->tY;NbHd$0e%OY8*dy46(7X5EGKfsHmKUVPQY8EStDw@nU>Z zTPr#d03gw5H0SMhdsuF6F3x=R86qMgAVwtkpCDlvW_>_FfUUK)74L1^hR2T|i&IFS z#nL`#v*i&&?mp=0!IrIC(cRrG&d}=W>M}oh@?mj?vLkHZU;o3x9wA*oldW#H%I~XqrY+Qj%|Gt?3vZ8iK`Q`8pyz z9Bx4{baZsUZns0H)A?rBdJ#8o-mIo5s!#yj4ULVctg6EJ`1orNtyvd`EWQ3sp68n! z4u@hUSElv#_4xekS@1j$iNvF4RU3fYv$lBEWV-U;{{0MvLUHfzy?ZDwE*9k(?JpuU zng!VgL$fX;L&z~01e3`mJde7%Iw5n_Dj_XB{cWG@NBS9Ni0SLwAS0xaWm%M0RG_J; zNt}(badd+ z$Owis#}!NM~?=(ySmm8LTW{S z9b~my`S!N99Wt5hh&RKT#vIYx+uIrv5;7>4%X|9z`YfKd|2vJdRK_}uYjywt002ov JPDHLkV1jd8$EE-P literal 0 HcmV?d00001 -- 2.30.2