X-Git-Url: https://git.sesse.net/?p=pr0n;a=blobdiff_plain;f=files%2Fpr0n-fullscreen.js;h=1ec07e6f917af2dd34b4d736046a9f7c2a55390c;hp=181a82cb1e0745bde78677c7c02ca5ab16b6c74f;hb=dc4da1c16efc1835e9d8b41d473abeeaefcc681b;hpb=8e147d49e7c7a81680bdf14f77c0d0e227aaa6c6 diff --git a/files/pr0n-fullscreen.js b/files/pr0n-fullscreen.js index 181a82c..1ec07e6 100644 --- a/files/pr0n-fullscreen.js +++ b/files/pr0n-fullscreen.js @@ -43,33 +43,74 @@ function find_width() /* * 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. + * performance, we round down to the closest fit and use that. This + * function is a pessimal estimate of what thumbnail size we can _always_ + * fit on the screen -- it's right if and only if all images are 4:3 + * (and landscape). If individual size information is available, use + * pick_image_size, below. */ -function reduce_to_fixed_width(size) +var fixed_sizes = [ + [ 1600, 1200 ], + [ 1400, 1050 ], + [ 1280, 960 ], + [ 1024, 768 ], + [ 800, 600 ], + [ 640, 480 ], + [ 512, 384 ], + [ 320, 256 ], + [ 240, 192 ], + [ 120, 96 ], + [ 80, 64 ] +]; +function max_image_size(screen_size) { - var fixed_sizes = [ - [ 1280, 960 ], - [ 1024, 768 ], - [ 800, 600 ], - [ 640, 480 ], - [ 512, 384 ], - [ 320, 256 ], - [ 240, 192 ], - [ 120, 96 ], - [ 80, 64 ] - ]; + var i; for (i = 0; i < fixed_sizes.length; ++i) { - if (size[0] >= fixed_sizes[i][0] && size[1] >= fixed_sizes[i][1]) + if (screen_size[0] >= fixed_sizes[i][0] && screen_size[1] >= fixed_sizes[i][1]) { return fixed_sizes[i]; + } + } + return [ 80, 64 ]; +} + +function pick_image_size(screen_size, image_size) +{ + var i; + for (i = 0; i < fixed_sizes.length; ++i) { + // this is a duplicate of pr0n's resizing code, hope for no floating-point + // inaccuracies :-) + var thumbxres = fixed_sizes[i][0]; + var thumbyres = fixed_sizes[i][1]; + var width = image_size[0]; + var height = image_size[1]; + + if (!(thumbxres >= width && thumbyres >= height)) { + var sfh = width / thumbxres; + var sfv = height / thumbyres; + if (sfh > sfv) { + width /= sfh; + height /= sfh; + } else { + width /= sfv; + height /= sfv; + } + width = Math.floor(width); + height = Math.floor(height); + } + + 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 [ 80, 64 ]; } function display_image(width, height, evt, filename, element_id) { - var url = "http://" + global_vhost + "/" + evt + "/" + width + "x" + height + "/" + filename; + var url = "http://" + global_vhost + "/" + evt + "/" + width + "x" + height + "/" + global_infobox + filename; var img = document.getElementById(element_id); - if (img != null) { + if (img !== null) { img.src = "data:"; img.parentNode.removeChild(img); } @@ -88,11 +129,30 @@ function display_image(width, height, evt, filename, element_id) return img; } -function prepare_preload(img, width, height, evt, filename) +function display_image_num(num, element_id) +{ + var screen_size = find_width(); + var adjusted_size; + + if (global_image_list[num][2] == -1) { + // no size information, use our pessimal guess + adjusted_size = max_image_size(screen_size); + } else { + adjusted_size = pick_image_size(screen_size, [ global_image_list[num][2], global_image_list[num][3] ]); + } + + 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") { + center_image(num); + } + return img; +} + +function prepare_preload(img, num) { // cancel any pending preload var preload = document.getElementById("preload"); - if (preload != null) { + if (preload !== null) { preload.src = "data:"; preload.parentNode.removeChild(preload); } @@ -100,34 +160,20 @@ function prepare_preload(img, width, height, evt, filename) // grmf -- IE doesn't fire onload if the image was loaded from cache, so check for // completeness first; should at least be _somewhat_ better if (img.complete) { - display_image(width, height, evt, filename, "preload"); + display_image_num(num, "preload"); } else { - img.onload = function() { display_image(width, height, evt, filename, "preload"); }; + img.onload = function() { display_image_num(num, "preload"); }; } } -function relayout() +function can_go_next() { - 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"; + return (global_image_num < global_image_list.length - 1); +} - set_opacity("previous", can_go_previous() ? 0.7 : 0.1); - set_opacity("next", can_go_next() ? 0.7 : 0.1); - set_opacity("close", 0.7); +function can_go_previous() +{ + return (global_image_num > 0); } function set_opacity(id, amount) @@ -164,54 +210,143 @@ function set_opacity(id, amount) } } -function can_go_previous() +function center_image(num) { - return (global_image_num > 0); + var screen_size = find_width(); + var adjusted_size; + + if (global_image_list[num][2] == -1) { + // no size information, use our pessimal guess + adjusted_size = max_image_size(screen_size); + } 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]; + } + + // 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"; + } -function go_previous() +function relayout() { - if (!can_go_previous()) - return; + var img = display_image_num(global_image_num, "image"); + if (can_go_next()) { + prepare_preload(img, global_image_num + 1); + } + + center_image(global_image_num); - --global_image_num; + set_opacity("previous", can_go_previous() ? 0.7 : 0.1); + set_opacity("next", can_go_next() ? 0.7 : 0.1); + set_opacity("close", 0.7); +} - var adjusted_size = reduce_to_fixed_width(find_width()); +function go_previous() +{ + if (!can_go_previous()) { + return; + } - var img = display_image(adjusted_size[0], adjusted_size[1], global_evt, global_image_list[global_image_num], "image"); + var img = display_image_num(--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]); + prepare_preload(img, 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()) + 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"); + var img = display_image_num(++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]); + prepare_preload(img, global_image_num + 1); } else { set_opacity("next", 0.1); } set_opacity("previous", can_go_previous() ? 0.7 : 0.1); } +function do_close() +{ + window.location = global_return_url; +} + +function draw_text(msg) +{ + // remove any text we might have left + var text = document.getElementById("text"); + if (text !== null) { + text.parentNode.removeChild(text); + } + + text = document.createElement("p"); + text.id = "text"; + text.style.position = "absolute"; + text.style.color = "white"; + text.style.lineHeight = "24px"; + text.style.font = "24px verdana, arial, sans-serif"; + text.innerHTML = msg; + + var main = document.getElementById("main"); + main.appendChild(text); + + text.style.left = (main.clientWidth - text.clientWidth) / 2 + "px"; + text.style.top = (main.clientHeight - text.clientHeight) / 2 + "px"; +} + +function fade_text(opacity) +{ + set_opacity("text", opacity); + if (opacity > 0.0) { + opacity -= 0.03; + if (opacity < 0.0) { + opacity = 0.0; + } + setTimeout("fade_text(" + opacity + ")", 30); + } else { + var text = document.getElementById("text"); + if (text !== null) { + text.parentNode.removeChild(text); + } + } +} + +function select_image(evt, filename) +{ + if (!req) { + return; + } + + draw_text("Selecting " + filename + "..."); + + req.open("POST", "http://" + global_vhost + "/select", false); + req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + req.send("mode=single&event=" + evt + "&filename=" + filename); + + setTimeout("fade_text(0.99)", 30); +} + function key_down(which) { if (which == 39) { // right @@ -242,66 +377,8 @@ function key_up(which) { set_opacity("close", 0.7); do_close(); } else if (which == 32 && global_select) { // space - select_image(global_image_list[global_image_num]); - } -} - -function select_image(filename) -{ - if (!req) - return; - - draw_text("Selecting " + filename + "..."); - - req.open("POST", "http://" + global_vhost + "/select", false); - req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); - req.send("mode=single&event=" + global_evt + "&filename=" + filename); - - setTimeout("fade_text(0.99)", 30); -} - -function fade_text(opacity) -{ - set_opacity("text", opacity); - if (opacity > 0.0) { - opacity -= 0.03; - if (opacity < 0.0) - opacity = 0.0; - setTimeout("fade_text(" + opacity + ")", 30); - } else { - var text = document.getElementById("text"); - if (text != null) { - text.parentNode.removeChild(text); - } - } -} - -function do_close() -{ - window.location = global_return_url; -} - -function draw_text(msg) -{ - // remove any text we might have left - var text = document.getElementById("text"); - if (text != null) { - text.parentNode.removeChild(text); + select_image(global_image_list[global_image_num][0], global_image_list[global_image_num][1]); } - - text = document.createElement("p"); - text.id = "text"; - text.style.position = "absolute"; - text.style.color = "white"; - text.style.lineHeight = "24px"; - text.style.font = "24px verdana, arial, sans-serif"; - text.innerHTML = msg; - - var main = document.getElementById("main"); - main.appendChild(text); - - text.style.left = (main.clientWidth - text.clientWidth) / 2 + "px"; - text.style.top = (main.clientHeight - text.clientHeight) / 2 + "px"; } // enable the horrible horrible IE PNG hack