From: Steinar H. Gunderson Date: Mon, 31 Jul 2006 15:02:20 +0000 (+0200) Subject: Add a new and very hip fullscreen interface; not exposed to the users just yet, X-Git-Url: https://git.sesse.net/?p=pr0n;a=commitdiff_plain;h=84b16cfb3e4428c4b07dddd8e4c5aa1f2aa1b6d7;ds=sidebyside Add a new and very hip fullscreen interface; not exposed to the users just yet, but it's coming. --- diff --git a/next.png b/next.png new file mode 100644 index 0000000..0b19641 Binary files /dev/null and b/next.png differ diff --git a/perl/Sesse/pr0n/Index.pm b/perl/Sesse/pr0n/Index.pm index 335dcd2..52766ab 100644 --- a/perl/Sesse/pr0n/Index.pm +++ b/perl/Sesse/pr0n/Index.pm @@ -50,6 +50,7 @@ sub handler { } my %settings = %defsettings; + my $fullscreen = (defined($apr->param('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 0000000..88ae8ff Binary files /dev/null and b/previous.png differ