git.sur5r.net Git - i3/i3.github.io/blob - js/gallery.js

   1 // vim:ts=4:sw=4:expandtab
   2 // © 2011 Michael Stapelberg
   3 //
   4 // Redistribution and use in source and binary forms, with or without
   5 // modification, are permitted provided that the following conditions are met:
   6 //
   7 //     * Redistributions of source code must retain the above copyright
   8 //       notice, this list of conditions and the following disclaimer.
   9 //
  10 //     * Redistributions in binary form must reproduce the above copyright
  11 //       notice, this list of conditions and the following disclaimer in the
  12 //       documentation and/or other materials provided with the distribution.
  13 //
  14 //     * Neither the name of Michael Stapelberg nor the
  15 //       names of contributors may be used to endorse or promote products
  16 //       derived from this software without specific prior written permission.
  17 //
  18 // THIS SOFTWARE IS PROVIDED BY Michael Stapelberg ''AS IS'' AND ANY
  19 // EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  20 // WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21 // DISCLAIMED. IN NO EVENT SHALL Michael Stapelberg BE LIABLE FOR ANY
  22 // DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  23 // (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  24 // LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  25 // ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26 // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
  27 // SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28
  29 function initGallery() {
  30     $('.shot span').css('color', '#888');
  31
  32     $('#imgleft, #imgright').mouseover(function() {
  33         $(this).css('opacity', 0.9);
  34     });
  35
  36     $('#imgleft, #imgright').mouseout(function() {
  37         $(this).css('opacity', 0.7);
  38     });
  39
  40     $('.shot img').mouseover(function() {
  41         $(this).parent().parent().children('span').css('color', 'white');
  42     });
  43
  44     $('.shot img').mouseout(function() {
  45         $(this).parent().parent().children('span').css('color', '#888');
  46     });
  47
  48     // build an array of all images (full URLs)
  49     var images = [];
  50     var cnt = 0;
  51     $('.shot a').each(function(idx, element) {
  52         images[cnt++] = $(element).attr('href');
  53     });
  54
  55     // handlers for mousewheel scrolling
  56     // defined here because we need to enable it after the animation finished
  57     $(window).mousewheel(function(event, delta) {
  58         // if we are not in the slideshow mode, process the event as normal
  59         return (!$('#mask').is(':visible'));
  60     });
  61
  62     var wheelhandler = function(event, delta) {
  63         // if we are not in the slideshow mode, process the event as normal
  64         if (!$('#mask').is(':visible')) {
  65             return true;
  66         }
  67
  68         if (delta < 0) {
  69             // scroll down
  70             imgright();
  71             return false;
  72         } else if (delta > 0) {
  73             // scroll up
  74             imgleft();
  75             return false;
  76         }
  77     };
  78
  79     $(window).mousewheel(wheelhandler);
  80
  81     var loadimage = function(url, direction, fromhash) {
  82         // now load the image
  83         var img = new Image();
  84         img.src = url;
  85
  86         // position imgdesc
  87         $('#imgdesc').css({ 'width': $('body').width() - (2 * 64) - 4 + 'px' });
  88
  89         // get description
  90         var desc = $(".shot a[href='" + url + "']").parent().children('span').text();
  91         $('#imgdesc .description').text(desc);
  92
  93         // get filename
  94         var pos = url.lastIndexOf('/');
  95         var filename = (pos !== -1 ? url.substr(pos+1) : url);
  96         $('#imgdesc .filename').text(filename);
  97
  98         var loadcomplete = function() {
  99             var winW = $(window).width();
 100             var winH = $(window).height();
 101             var max_w = winW - (2 * 64);
 102             var max_h = winH - 48;
 103             var dims = {
 104                 'top': 0,
 105                 'left': 0,
 106                 'width': (img.width > max_w ? max_w : img.width),
 107                 'height': img.height
 108             };
 109             dims.height = (dims.width / img.width) * img.height;
 110             if (dims.height > max_h) {
 111                 dims.height = max_h;
 112                 dims.width = (dims.height / img.height) * img.width;
 113             }
 114             dims.top = (max_h - dims.height) / 2 + 2;
 115             dims.left = ((max_w - dims.width) / 2) + 64;
 116             $('#loading').hide();
 117             var element = $('<img>');
 118             element.attr({ 'src': url, 'width':dims.width });
 119             $('#maskinner').append(element);
 120             element.css({ 'z-index': 21, 'position': 'absolute', 'top':dims.top + 'px', 'left':dims.left + 'px' });
 121             if (direction !== undefined) {
 122                 // slide from right to left
 123                 if (direction === 'left') {
 124                     element.css({ 'left':winW + 'px' });
 125                     element.animate({ 'left': '-=' + (winW - dims.left) }, 'fast', function() {
 126                         $(window).mousewheel(wheelhandler);
 127                     });
 128                 } else {
 129                     element.css({ 'left':'-' + winW + 'px' });
 130                     element.animate({ 'left': '+=' + (winW + dims.left) }, 'fast', function() {
 131                         $(window).mousewheel(wheelhandler);
 132                     });
 133                 }
 134             }
 135             $('#maskinner').show();
 136
 137             $('#bigimg').show();
 138
 139             if (!fromhash && window.history.pushState) {
 140                 window.history.pushState(undefined, 'i3 screenshot: ' + url, "#" + url);
 141             }
 142         };
 143
 144         if (img.complete) {
 145             loadcomplete();
 146         } else {
 147             img.onload = loadcomplete;
 148         }
 149     };
 150
 151     // clicking anywhere outside the image will bring you back to the page
 152     var masks = $('#mask, #bigimg');
 153
 154     var endshow = function(fromhash) {
 155         masks.hide();
 156         $('#maskinner img').remove();
 157
 158         if (!fromhash && window.history.pushState) {
 159             window.history.pushState(undefined, 'i3 screenshots', '#');
 160         }
 161     };
 162
 163     masks.click(function() {
 164         endshow(false);
 165     });
 166     var showmask = function() {
 167         var winH = $(window).height();
 168         var maskHeight = $(document).height();
 169         var maskWidth = $(window).width();
 170
 171         var mask = $('#mask');
 172         mask.css({ 'width': maskWidth, 'height': maskHeight }).show();
 173     };
 174
 175     $('.shot img').click(function() {
 176         showmask();
 177
 178         var full = $(this).parent().attr('href');
 179         $('#loading').show();
 180
 181         loadimage(full, undefined, false);
 182
 183 // TODO: also preload the next image?
 184
 185         // don't follow the link
 186         return false;
 187     });
 188
 189     var imgright = function() {
 190         var idx = $.inArray($('#maskinner img').attr('src'), images);
 191         var next = images[idx+1];
 192
 193         if (next === undefined) {
 194             return false;
 195         }
 196
 197         $('#imgright').css('opacity', 1.0).animate({ opacity: 0.7 }, 500);
 198         // slide out the current image
 199         var winW = $(window).width();
 200         $('#loading').show();
 201         $('#maskinner img').animate({ 'left': '-=' + (winW - 64) }, 'fast', function() {
 202             $(this).remove();
 203         });
 204         loadimage(next, 'left', false);
 205
 206         // disable mousewheel handler during load (will be re-enabled after the animation)
 207         $(window).unmousewheel(wheelhandler);
 208
 209         return false;
 210     };
 211     $('#imgright').click(imgright);
 212
 213     var imgleft = function() {
 214         var idx = $.inArray($('#maskinner img').attr('src'), images);
 215         var prev = images[idx-1];
 216
 217         if (prev === undefined) {
 218             return false;
 219         }
 220
 221         $('#imgleft').css('opacity', 1.0).animate({ opacity: 0.7 }, 500);
 222         // slide out the current image
 223         var winW = $(window).width();
 224         $('#maskinner img').animate({ 'left': '+=' + winW }, 'fast', function() {
 225             $(this).remove();
 226         });
 227         loadimage(prev, 'right', false);
 228
 229         // disable mousewheel handler during load (will be re-enabled after the animation)
 230         $(window).unmousewheel(wheelhandler);
 231
 232         return false;
 233     };
 234     $('#imgleft').click(imgleft);
 235
 236     // setup key press handlers for the left/right arrow keys
 237     var keydown = function(e) {
 238         // if we are not in the slideshow mode, process the event as normal
 239         if (!$('#mask').is(':visible')) {
 240             return true;
 241         }
 242
 243         switch (e.keyCode) {
 244             // left arrow
 245             case 37:
 246                 imgleft();
 247                 break;
 248             // right arrow
 249             case 39:
 250                 imgright();
 251                 break;
 252             // escape
 253             case 27:
 254                 endshow(false);
 255                 break;
 256         }
 257     };
 258
 259     if ($.browser.mozilla) {
 260         $(document).keypress(keydown);
 261     } else {
 262         $(document).keydown(keydown);
 263     }
 264
 265     if (location.hash.length > 0) {
 266         var url = location.hash.substring(1);
 267         showmask();
 268         loadimage(url, undefined, true);
 269     }
 270
 271     $(window).hashchange(function() {
 272         if (location.hash.length === 0) {
 273             endshow(true);
 274             return;
 275         }
 276         var url = location.hash.substring(1);
 277         if (url.length === 0) {
 278             endshow(true);
 279         } else {
 280             showmask();
 281             loadimage(url, undefined, true);
 282         }
 283     });
 284 }