From: Steinar H. Gunderson Date: Sun, 2 Sep 2007 19:01:32 +0000 (+0200) Subject: Through a fun set of hacks for the whole family (it's amazing that this should X-Git-Url: https://git.sesse.net/?p=pr0n;a=commitdiff_plain;h=d98f904f68497ff0ad0eaf6bcbf19b07b25ffd57 Through a fun set of hacks for the whole family (it's amazing that this should be so hard), make the fullscreen background become a clickable link, for easy bookmarking, URL copying, etc. etc. etc.. --- diff --git a/files/pr0n-fullscreen.css b/files/pr0n-fullscreen.css index a61676c..8ea24bf 100644 --- a/files/pr0n-fullscreen.css +++ b/files/pr0n-fullscreen.css @@ -14,25 +14,39 @@ body { img, #text { vertical-align: middle; } +img { + z-index: 1; +} #previous { position: absolute; bottom: 0px; left: 0px; - z-index: 1; + z-index: 2; } #next { position: absolute; bottom: 0px; right: 0px; - z-index: 1; + z-index: 2; } #close { position: absolute; top: 0px; right: 0px; - z-index: 1; + z-index: 2; +} +#linkbg1, #linkbg2, #linkbg3 { + display: block; + position: absolute; + top: 0px; + right: 0px; + width: 100%; + height: 100%; + background-color: black; } +#linkbg2 { z-index: -1; } +#linkbg3 { z-index: -1; } #preload { position: absolute; diff --git a/files/pr0n-fullscreen.js b/files/pr0n-fullscreen.js index 1ec07e6..efacecc 100644 --- a/files/pr0n-fullscreen.js +++ b/files/pr0n-fullscreen.js @@ -100,12 +100,12 @@ function pick_image_size(screen_size, image_size) if (screen_size[0] >= width && screen_size[1] >= height) { // be sure _not_ to return a reference - return [ fixed_sizes[i][0], fixed_sizes[i][1] ]; + return [ fixed_sizes[i][0], fixed_sizes[i][1], width, height ]; } } return [ 80, 64 ]; } - + function display_image(width, height, evt, filename, element_id) { var url = "http://" + global_vhost + "/" + evt + "/" + width + "x" + height + "/" + global_infobox + filename; @@ -142,9 +142,17 @@ function display_image_num(num, element_id) } var img = display_image(adjusted_size[0], adjusted_size[1], global_image_list[num][0], global_image_list[num][1], element_id); + if (element_id == "image") { + // we want to shrink the box as much as possible if we know the true + // size of the image center_image(num); + + document.getElementById('linkbg1').href = global_bookmark_url_base + (num+1); + document.getElementById('linkbg2').href = global_bookmark_url_base + (num+1); + document.getElementById('linkbg3').href = global_bookmark_url_base + (num+1); } + return img; } @@ -213,32 +221,28 @@ function set_opacity(id, amount) function center_image(num) { var screen_size = find_width(); - var adjusted_size; + var width, height; if (global_image_list[num][2] == -1) { // no size information, use our pessimal guess - adjusted_size = max_image_size(screen_size); + var adjusted_size = max_image_size(screen_size); + width = adjusted_size[0]; + height = adjusted_size[1]; } else { - adjusted_size = pick_image_size(screen_size, [ global_image_list[num][2], global_image_list[num][3] ]); - } - - // crop the div to the screen - if (adjusted_size[0] > screen_size[0]) { - adjusted_size[0] = screen_size[0]; - } - if (adjusted_size[1] > screen_size[1]) { - adjusted_size[1] = screen_size[1]; + // use the exact information + var adjusted_size = pick_image_size(screen_size, [ global_image_list[num][2], global_image_list[num][3] ]); + width = adjusted_size[2]; + height = adjusted_size[3]; } // center the image on-screen var main = document.getElementById("main"); main.style.position = "absolute"; - main.style.left = (screen_size[0] - adjusted_size[0]) / 2 + "px"; - main.style.top = (screen_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"; - + main.style.left = (screen_size[0] - width) / 2 + "px"; + main.style.top = (screen_size[1] - height) / 2 + "px"; + main.style.width = width + "px"; + main.style.height = height + "px"; + main.style.lineHeight = height + "px"; } function relayout() @@ -247,8 +251,6 @@ function relayout() if (can_go_next()) { prepare_preload(img, global_image_num + 1); } - - center_image(global_image_num); set_opacity("previous", can_go_previous() ? 0.7 : 0.1); set_opacity("next", can_go_next() ? 0.7 : 0.1); diff --git a/perl/Sesse/pr0n/Index.pm b/perl/Sesse/pr0n/Index.pm index 8bd8aba..0fbd828 100644 --- a/perl/Sesse/pr0n/Index.pm +++ b/perl/Sesse/pr0n/Index.pm @@ -214,14 +214,27 @@ sub handler { my $returnurl = "http://" . $r->get_server_name . "/" . $event . "/" . Sesse::pr0n::Common::get_query_string(\%settings_no_fullscreen, \%defsettings); + + my %settings_bookmark = %settings; + $settings_bookmark{'start'} = $defsettings{'start'}; + my $bookmark_url_base = "http://" . $r->get_server_name . "/" . $event . "/" . + Sesse::pr0n::Common::get_query_string(\%settings_bookmark, \%defsettings); + + if ($bookmark_url_base =~ /\?/) { + $bookmark_url_base .= ';start='; + } else { + $bookmark_url_base .= '?start='; + } # *whistle* $returnurl =~ s/&/&/g; + $bookmark_url_base =~ s/&/&/g; Sesse::pr0n::Templates::print_template($r, "fullscreen-footer", { vhost => $r->get_server_name, start => $settings{'start'} - 1, returnurl => $returnurl, + bookmarkurlbase => $bookmark_url_base, sel => $settings{'sel'}, infobox => $infobox }); diff --git a/templates/default/fullscreen-footer b/templates/default/fullscreen-footer index 353f3d2..04ed5c1 100644 --- a/templates/default/fullscreen-footer +++ b/templates/default/fullscreen-footer @@ -2,6 +2,7 @@ var global_vhost = "%VHOST%"; var global_infobox = "%INFOBOX%"; var global_return_url = "%RETURNURL%"; +var global_bookmark_url_base = "%BOOKMARKURLBASE%"; var global_image_num = %START%; var global_select = %SEL%; // end generated @@ -10,7 +11,8 @@ var global_select = %SEL%;
-
+ +
<- -> x