X-Git-Url: https://git.sesse.net/?p=pr0n;a=blobdiff_plain;f=files%2Fpr0n-fullscreen.js;h=95829951dfc8f0cd530b58ef102c76d95fba32f1;hp=1e2e8f0eec1615d8e6fe22716fd86c95bb82ee74;hb=167f5a678e37c8e3d55fcded24419848dfe7d83e;hpb=0737361d60ab3c2be28045ac522ce19722d2ffaf diff --git a/files/pr0n-fullscreen.js b/files/pr0n-fullscreen.js index 1e2e8f0..9582995 100644 --- a/files/pr0n-fullscreen.js +++ b/files/pr0n-fullscreen.js @@ -40,37 +40,92 @@ function find_width() return [null,null]; } +function parse_image_num(url, default_value) { + var url_array = (window.location.toString().split("#")); + if (url_array.length != 2) { + return default_value; + } + + var num = parseInt(url_array[1]); + if (num > 1 && num <= global_image_list.length) { // and then num != NaN + return (num - 1); + } else { + return default_value; + } +} + /* * 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], width, height ]; + } + } + 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) { - img.src = ""; + if (img !== null) { + img.src = "data:"; img.parentNode.removeChild(img); } @@ -82,50 +137,65 @@ function display_image(width, height, evt, filename, element_id) img.src = url; } - var main = document.getElementById("main"); + var main = document.getElementById("iehack"); main.appendChild(img); 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") { + // we want to shrink the box as much as possible if we know the true + // size of the image + center_image(num); + + // replace the anchor part (if any) with the image number + var baseurl = (window.location.toString().split("#"))[0]; + window.location = baseurl + "#" + (num+1); + } + + return img; +} + +function prepare_preload(img, num) { // cancel any pending preload var preload = document.getElementById("preload"); - if (preload != null) { - preload.src = ""; + if (preload !== null) { + preload.src = "data:"; preload.parentNode.removeChild(preload); } - - if (document.all) { // IE-specific - img.onload = "display_image(" + width + "," + height + ",\"" + evt + "\",\"" + filename + "\",\"preload\");"; + + // 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_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) @@ -144,8 +214,13 @@ function set_opacity(id, amount) elem.style.filter = ""; } elem.style.filter += "alpha(opacity=" + (amount*100.0) + ")"; - } else { - elem.filters.alpha.opacity = (amount * 100.0); + } else { + // ugh? this seems to break in color index mode... + if (typeof(elem.filters) == 'unknown') { + elem.style.filter = "alpha(opacity=" + (amount*100.0) + ")"; + } else { + elem.filters.alpha.opacity = (amount * 100.0); + } } } else { // no alpha support if (amount > 0.5) { @@ -157,54 +232,137 @@ function set_opacity(id, amount) } } -function can_go_previous() +function center_image(num) { - return (global_image_num > 0); + var screen_size = find_width(); + var width, height; + + if (global_image_list[num][2] == -1) { + // no size information, use our pessimal guess + var adjusted_size = max_image_size(screen_size); + width = adjusted_size[0]; + height = adjusted_size[1]; + } else { + // 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] - 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 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); + } - --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 @@ -234,67 +392,9 @@ function key_up(which) { } else if (which == 27) { // escape set_opacity("close", 0.7); do_close(); - } else if (which == 32) { // 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); + } else if (which == 32 && global_select) { // space + 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 @@ -308,5 +408,8 @@ function ie_png_hack() var previous = document.getElementById("previous"); previous.outerHTML = ""; + + var close = document.getElementById("close"); + close.outerHTML = ""; } }