git.sesse.net Git - pr0n/blob - files/pr0n-fullscreen.js

   1 var req;
   2
   3 function init_ajax()
   4 {
   5         req = false;
   6
   7         if (window.XMLHttpRequest) {
   8                 // Mozilla/Safari
   9                 try {
  10                         req = new XMLHttpRequest();
  11                 } catch(e) {
  12                         req = false;
  13                 }
  14         } else if (window.ActiveXObject) {
  15                 // IE/Windows
  16                 try {
  17                         req = new ActiveXObject("Msxml2.XMLHTTP");
  18                 } catch(e) {
  19                         try {
  20                                 req = new ActiveXObject("Microsoft.XMLHTTP");
  21                         } catch(e) {
  22                                 req = false;
  23                         }
  24                 }
  25         }
  26 }
  27
  28 function find_width()
  29 {
  30         if (typeof(window.innerWidth) == 'number') {
  31                 // non-IE
  32                 return [window.innerWidth, window.innerHeight];
  33         } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
  34                 // IE 6+ in 'standards compliant mode'
  35                 return [document.documentElement.clientWidth, document.documentElement.clientHeight];
  36         } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
  37                 // IE 4-compatible
  38                 return [document.body.clientWidth, document.body.clientHeight];
  39         }
  40         return [null,null];
  41 }
  42
  43 /*
  44  * pr0n can resize to any size we'd like, but we're much more likely
  45  * to have this set of fixed-resolution screens cached, so to increase
  46  * performance, we round down to the closest fit and use that.
  47  */
  48 function reduce_to_fixed_width(size)
  49 {
  50         var fixed_sizes = [
  51                 [ 1600, 1200 ],
  52                 [ 1400, 1050 ],
  53                 [ 1280, 960 ],
  54                 [ 1024, 768 ],
  55                 [ 800, 600 ],
  56                 [ 640, 480 ],
  57                 [ 512, 384 ],
  58                 [ 320, 256 ],
  59                 [ 240, 192 ],
  60                 [ 120, 96 ],
  61                 [ 80, 64 ]
  62         ];
  63         var i;
  64         for (i = 0; i < fixed_sizes.length; ++i) {
  65                 if (size[0] >= fixed_sizes[i][0] && size[1] >= fixed_sizes[i][1]) {
  66                         return fixed_sizes[i];
  67                 }
  68         }
  69         return [ 80, 64 ];
  70 }
  71
  72 function display_image(width, height, evt, filename, element_id)
  73 {
  74         var url = "http://" + global_vhost + "/" + evt + "/" + width + "x" + height + "/" + global_infobox + filename;
  75         var img = document.getElementById(element_id);
  76         if (img !== null) {
  77                 img.src = "data:";
  78                 img.parentNode.removeChild(img);
  79         }
  80
  81         img = document.createElement("img");
  82         img.id = element_id;
  83         img.alt = "";
  84
  85         if (img.src != url) {
  86                 img.src = url;
  87         }
  88
  89         var main = document.getElementById("iehack");
  90         main.appendChild(img);
  91
  92         return img;
  93 }
  94
  95 function prepare_preload(img, width, height, evt, filename)
  96 {
  97         // cancel any pending preload
  98         var preload = document.getElementById("preload");
  99         if (preload !== null) {
 100                 preload.src = "data:";
 101                 preload.parentNode.removeChild(preload);
 102         }
 103
 104         // grmf -- IE doesn't fire onload if the image was loaded from cache, so check for
 105         // completeness first; should at least be _somewhat_ better
 106         if (img.complete) {
 107                 display_image(width, height, evt, filename, "preload");
 108         } else {
 109                 img.onload = function() { display_image(width, height, evt, filename, "preload"); };
 110         }
 111 }
 112
 113 function can_go_next()
 114 {
 115         return (global_image_num < global_image_list.length - 1);
 116 }
 117
 118 function can_go_previous()
 119 {
 120         return (global_image_num > 0);
 121 }
 122
 123 function set_opacity(id, amount)
 124 {
 125         var elem = document.getElementById(id);
 126         if (typeof(elem.style.opacity) != 'undefined') {            // W3C
 127                 elem.style.opacity = amount;
 128         } else if (typeof(elem.style.mozOpacity) != 'undefined') {  // older Mozilla
 129                 elem.style.mozOpacity = amount;
 130         } else if (typeof(elem.style.filter) != 'undefined') {      // IE
 131                 if (elem.style.filter.indexOf("alpha") == -1) {
 132                         // add an alpha filter if there isn't one already
 133                         if (elem.style.filter) {
 134                                 elem.style.filter += " ";
 135                         } else {
 136                                 elem.style.filter = "";
 137                         }
 138                         elem.style.filter += "alpha(opacity=" + (amount*100.0) + ")";
 139                 } else {
 140                         // ugh? this seems to break in color index mode...
 141                         if (typeof(elem.filters) == 'unknown') {
 142                                 elem.style.filter = "alpha(opacity=" + (amount*100.0) + ")";
 143                         } else {
 144                                 elem.filters.alpha.opacity = (amount * 100.0);
 145                         }
 146                 }
 147         } else {                             // no alpha support
 148                 if (amount > 0.5) {
 149                         elem.style.visibility = "visible";
 150                         elem.style.zorder = 1;
 151                 } else {
 152                         elem.style.visibility = "hidden";
 153                 }
 154         }
 155 }
 156
 157 function relayout()
 158 {
 159         var size = find_width();
 160         var adjusted_size = reduce_to_fixed_width(size);
 161
 162         var img = display_image(adjusted_size[0], adjusted_size[1], global_image_list[global_image_num][0], global_image_list[global_image_num][1], "image");
 163         if (can_go_next()) {
 164                 prepare_preload(img, adjusted_size[0], adjusted_size[1], global_image_list[global_image_num + 1][0], global_image_list[global_image_num + 1]);
 165         }
 166
 167         // center the image on-screen
 168         var main = document.getElementById("main");
 169         main.style.position = "absolute";
 170         main.style.left = (size[0] - adjusted_size[0]) / 2 + "px";
 171         main.style.top = (size[1] - adjusted_size[1]) / 2 + "px";
 172         main.style.width = adjusted_size[0] + "px";
 173         main.style.height = adjusted_size[1] + "px";
 174         main.style.lineHeight = adjusted_size[1] + "px";
 175
 176         set_opacity("previous", can_go_previous() ? 0.7 : 0.1);
 177         set_opacity("next", can_go_next() ? 0.7 : 0.1);
 178         set_opacity("close", 0.7);
 179 }
 180
 181 function go_previous()
 182 {
 183         if (!can_go_previous()) {
 184                 return;
 185         }
 186
 187         --global_image_num;
 188
 189         var adjusted_size = reduce_to_fixed_width(find_width());
 190
 191         var img = display_image(adjusted_size[0], adjusted_size[1], global_image_list[global_image_num][0], global_image_list[global_image_num][1], "image");
 192         if (can_go_previous()) {
 193                 set_opacity("previous", 0.7);
 194                 prepare_preload(img, adjusted_size[0], adjusted_size[1], global_image_list[global_image_num - 1][0], global_image_list[global_image_num - 1][1]);
 195         } else {
 196                 set_opacity("previous", 0.1);
 197         }
 198         set_opacity("next", can_go_next() ? 0.7 : 0.1);
 199 }
 200
 201 function go_next()
 202 {
 203         if (!can_go_next()) {
 204                 return;
 205         }
 206
 207         ++global_image_num;
 208
 209         var adjusted_size = reduce_to_fixed_width(find_width());
 210
 211         var img = display_image(adjusted_size[0], adjusted_size[1], global_image_list[global_image_num][0], global_image_list[global_image_num][1], "image");
 212         if (can_go_next()) {
 213                 set_opacity("next", 0.7);
 214                 prepare_preload(img, adjusted_size[0], adjusted_size[1], global_image_list[global_image_num + 1][0], global_image_list[global_image_num + 1][1]);
 215         } else {
 216                 set_opacity("next", 0.1);
 217         }
 218         set_opacity("previous", can_go_previous() ? 0.7 : 0.1);
 219 }
 220
 221 function do_close()
 222 {
 223         window.location = global_return_url;
 224 }
 225
 226 function draw_text(msg)
 227 {
 228         // remove any text we might have left
 229         var text = document.getElementById("text");
 230         if (text !== null) {
 231                 text.parentNode.removeChild(text);
 232         }
 233
 234         text = document.createElement("p");
 235         text.id = "text";
 236         text.style.position = "absolute";
 237         text.style.color = "white";
 238         text.style.lineHeight = "24px";
 239         text.style.font = "24px verdana, arial, sans-serif";
 240         text.innerHTML = msg;
 241
 242         var main = document.getElementById("main");
 243         main.appendChild(text);
 244
 245         text.style.left = (main.clientWidth - text.clientWidth) / 2 + "px";
 246         text.style.top = (main.clientHeight - text.clientHeight) / 2 + "px";
 247 }
 248
 249 function fade_text(opacity)
 250 {
 251         set_opacity("text", opacity);
 252         if (opacity > 0.0) {
 253                 opacity -= 0.03;
 254                 if (opacity < 0.0) {
 255                         opacity = 0.0;
 256                 }
 257                 setTimeout("fade_text(" + opacity + ")", 30);
 258         } else {
 259                 var text = document.getElementById("text");
 260                 if (text !== null) {
 261                         text.parentNode.removeChild(text);
 262                 }
 263         }
 264 }
 265
 266 function select_image(evt, filename)
 267 {
 268         if (!req) {
 269                 return;
 270         }
 271
 272         draw_text("Selecting " + filename + "...");
 273
 274         req.open("POST", "http://" + global_vhost + "/select", false);
 275         req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 276         req.send("mode=single&event=" + evt + "&filename=" + filename);
 277
 278         setTimeout("fade_text(0.99)", 30);
 279 }
 280
 281 function key_down(which)
 282 {
 283         if (which == 39) {   // right
 284                 if (can_go_next()) {
 285                         set_opacity("next", 0.99);
 286                 }
 287         } else if (which == 37) {   // left
 288                 if (can_go_previous()) {
 289                         set_opacity("previous", 0.99);
 290                 }
 291         } else if (which == 27) {   // escape
 292                 set_opacity("close", 0.99);
 293         }
 294 }
 295
 296 function key_up(which) {
 297         if (which == 39) {   // right
 298                 if (can_go_next()) {
 299                         set_opacity("next", 0.7);
 300                         go_next();
 301                 }
 302         } else if (which == 37) {   // left
 303                 if (can_go_previous()) {
 304                         set_opacity("previous", 0.7);
 305                         go_previous();
 306                 }
 307         } else if (which == 27) {   // escape
 308                 set_opacity("close", 0.7);
 309                 do_close();
 310         } else if (which == 32 && global_select) {   // space
 311                 select_image(global_image_list[global_image_num][0], global_image_list[global_image_num][1]);
 312         }
 313 }
 314
 315 // enable the horrible horrible IE PNG hack
 316 function ie_png_hack()
 317 {
 318         var vstr = navigator.appVersion.split("MSIE");
 319         var v = parseFloat(vstr[1]);
 320         if (v >= 5.5 && v < 7.0 && document.body.filters) {
 321                 var next = document.getElementById("next");
 322                 next.outerHTML = "<span id=\"next\" style=\"display: inline-block; position: absolute; bottom: 0px; right: 0px; width: 50px; height: 50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + next.src + "')\" onmousedown=\"if (can_go_next()) set_opacity('next', 1.0)\" onmouseup=\"if (can_go_next()) { set_opacity('next', 0.7); go_next(); }\" onmouseout=\"if (can_go_next()) { set_opacity('next', 0.7); }\" />";
 323
 324                 var previous = document.getElementById("previous");
 325                 previous.outerHTML = "<span id=\"previous\" style=\"display: inline-block; position: absolute; bottom: 0px; right: 0px; width: 50px; height: 50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + previous.src + "')\" onmousedown=\"if (can_go_previous()) set_opacity('previous', 1.0)\" onmouseup=\"if (can_go_previous()) { set_opacity('previous', 0.7); go_previous(); }\" onmouseout=\"if (can_go_previous()) { set_opacity('previous', 0.7); }\" />";
 326
 327                 var close = document.getElementById("close");
 328                 close.outerHTML = "<span id=\"close\" style=\"display: inline-block; position: absolute; top: 0px; right: 0px; width: 50px; height: 50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + close.src + "')\" onmousedown=\"set_opacity('close', 1.0)\" onmouseup=\"set_opacity('close', 0.7); do_close();\" onmouseout=\"set_opacity('close', 0.7);\" />";
 329         }
 330 }