path: root/templates/fluid/scripts.js

/******************************   EXIF TABLE   *********************************/

var exif_all_visible = false;

function set_exif_params (table, icon, visible) {
  if (visible) {
    table.style.display = 'block';
    icon.style.opacity = 1.0;
  } else {
    table.style.display = 'none';
    icon.style.opacity = 0.23;
  }
}

function toggle_exif_visibility (id) {
  var table = document.getElementById ('exif_table-' + id);
  var icon = document.getElementById ('exif_icon-' + id);
  set_exif_params (table, icon, icon.style.opacity != 1.0);
}

function toggle_exif_all_visibility () {
  exif_all_visible = !exif_all_visible;
  for (var i = 1; table = document.getElementById ("exif_table-" + i); i++) {
    var icon = document.getElementById ('exif_icon-' + i);
    set_exif_params (table, icon, exif_all_visible);
  }
}


/****************************   FULLSCREEN MODE   *****************************/

/*  https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode  */
/*  FIXME: scrollbar reset in Chromium 40  */
/*  TODO: retain stream mode if active  */
function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}


/******************************   PHOTOSTREAM   *******************************/

/*  PHOTOSTREAM - INSTRUCTIONS:
 *    -  photos should be embedded in <div id="photos">
 *    -  every photo should have id="photo-XXX" where XXX is index starting with 1
 *    -  total number of photos needs to be defined in the NUM_PHOTOS variable
 */

var current_idx = 0;   
var photostream_mode = false;
var scroll_timeout = 0;
var ignore_scroll_event = false;

var enable_animations = false;
var animation_duration = 175;  /* ms */
var animation_steps = 17;

   
   
/*  Portions of code taken from Prototype JavaScript framework
 *  Copyright (c) 2005-2008 Sam Stephenson
 *  Prototype is freely distributable under the terms of an MIT-style license.
 *  For details, see the Prototype web site: http://www.prototypejs.org/
 */

function hasClassName (element, className) {
  var elementClassName = element.className;
  return (elementClassName.length > 0 && (elementClassName == className ||
          new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName)));
}

function addClassName (element, className) {
  if (!hasClassName(element, className))
      element.className += (element.className ? ' ' : '') + className;
  return element;
}

function removeClassName (element, className) {
  element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ').replace(/^\s+/, '').replace(/\s+$/, '');
  return element;
}

function cumulativeOffset (element) {
  var valueT = 0, valueL = 0;
  do {
    valueT += element.offsetTop  || 0;
    valueL += element.offsetLeft || 0;
    element = element.offsetParent;
  } while (element);
  return [valueL, valueT];
}


/*  http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js  */
/*  http://matthewlein.com/experiments/easing.html  */
function fadein (el) {
  var op = 0.35;
  var t = 0;
  var handler = setInterval (function () {
    if (op >= 1.0)
      clearInterval (handler);
    el.style.opacity = op;
    op += 1.0 / animation_steps;
    t += animation_duration / animation_steps;
    var c = 1.0 / animation_steps;
    var d = animation_duration;
    var b = 0.0;
//    op += c - c * Math.cos(t/d * (Math.PI/2));   /*  easeInSine  */ 
//    op += c*(t/=d)*t + b;  /*  easeInQuad  */
    }, animation_duration / animation_steps);
}


function do_show_photo (do_show, id) {
  var elem = document.getElementById (id);
  if (! elem)
    return;

  if (do_show) {
    addClassName (elem, "photostream-force-show");
    if (enable_animations) {
      elem.style.opacity = 0.0;
      fadein (elem);
    } else {
      elem.style.opacity = 1.0;
    }
  } else {
    removeClassName (elem, "photostream-force-show");
    elem.style.opacity = 1.0;
  }
}

function start_photostream_mode () {
  photostream_mode = true;

  if (NUM_PHOTOS <= 0)
    return;

  var l = document.getElementsByClassName('photostream-hide');
  for (var i = 0; i < l.length; i++)
    addClassName (l[i], "photostream-force-hide");

  var elem = document.getElementById ("photostream-close");
  if (elem)
    removeClassName (elem, "photostream-force-hide");

  var elem = document.getElementById ("photostream-position-label");
  if (elem)
    removeClassName (elem, "photostream-force-hide");
}

function cancel_photostream_mode () {
  if (photostream_mode) {
    photostream_mode = false;
    do_show_photo (false);

    var l = document.getElementsByClassName('photostream-hide');
    for (var i = 0; i < l.length; i++)
      removeClassName (l[i], "photostream-force-hide");

    var elem = document.getElementById ("photostream-close");
    if (elem)
      addClassName (elem, "photostream-force-hide");

    var elem = document.getElementById ("photostream-position-label");
    if (elem)
      addClassName (elem, "photostream-force-hide");
  }
}

function update_position_label () {
  var elem = document.getElementById ("photostream-position-label");
  if (elem)
    elem.innerHTML = current_idx + " / " + NUM_PHOTOS;
}

function scroll_to_photo (elem) {
  var window_height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
  var off = cumulativeOffset (elem);

  off[1] += (elem.offsetHeight - window_height) / 2;
  /*  Dirty workaround to ignore subsequent onScroll events  */
  ignore_scroll_event = true;
  setTimeout (function () {ignore_scroll_event=false;}, 200);  
  window.scrollTo (off[0], off[1]);
}

function set_position (inc) {
  var idx;
  var elem;

  if (! photostream_mode)
    start_photostream_mode ();

  idx = current_idx + inc;
  if (idx < 1)
    idx = 1;
  if (idx > NUM_PHOTOS)
    idx = NUM_PHOTOS;

  elem = document.getElementById ("photo-" + idx);
  if (! elem)
    return;

  do_show_photo (false, "photo-" + current_idx);
  do_show_photo (false, "photo-" + current_idx + "-sep");
  do_show_photo (false, "photo-" + current_idx + "-ispc");

  scroll_to_photo (elem);
  do_show_photo (true, "photo-" + idx);
  do_show_photo (true, "photo-" + idx + "-sep");
  do_show_photo (true, "photo-" + idx + "-ispc");

  current_idx = idx;
  update_position_label ();
}

function check_position () {
  var win_pos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  var window_height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
  var elem;

  current_idx = 0;
  for (var i = 1; elem = document.getElementById ("photo-" + i); i++) {
    /*  Display the first photo when scrolled to the very top of the page  */
    if (i == 1 && elem.offsetTop > win_pos + window_height / 2 - elem.clientHeight / 2 + 4) {
      current_idx = 0;
      break;
    }
    if (elem.offsetTop > win_pos + window_height / 2)
      break;
    current_idx = i;
  }

  /*  Update size buttons' anchors  */
  var l = document.getElementsByClassName('size-button');
  for (var i = 0; i < l.length; i++) {
    l[i].href = l[i].href.replace(/(#.*)/, '');
    if (current_idx > 0)
      l[i].href += '#i' + current_idx;
  }
  update_position_label ();
}

function schedule_check_position () {
  clearTimeout (scroll_timeout);
  scroll_timeout = setTimeout (check_position, 100);
}


/*  Movement  */
function stop_event (event) {
  event.preventDefault ();
  event.stopPropagation ();
}

function onKeyEvent (event) {
  if (!event)
    event = window.event;
  if (!event)
    return;
  if (event.ctrlKey || event.altKey || event.metaKey)
    return;

  var c = event.which ? event.which : event.keyCode;

  switch (c) {
    case 32:   /*  Space  */
    case 39:   /*  Right arrow  */
      set_position (1);
      stop_event (event);
      break;
    case 8:    /*  Backspace  */
      if (photostream_mode) {
        set_position (-1);
        stop_event (event);
      }
      break;
    case 37:   /*  Left arrow  */
      set_position (-1);
      stop_event (event);
      break;
    case 27:    /*  Escape  */
      if (photostream_mode) {
        cancel_photostream_mode ();
        stop_event (event);
      }  
      schedule_check_position ();
      break;
    case 68:    /*  d  */
      toggle_exif_all_visibility ();
      onResize (null);
      break;
    case 65:    /*  a  */
      enable_animations = ! enable_animations;
      break;
    case 70:    /*  f  */
      toggleFullScreen();
      break;
  }
}

function onScroll (event) {
  if (ignore_scroll_event)
    return;
  if (photostream_mode) {
    cancel_photostream_mode ();
    stop_event (event);
  }
  schedule_check_position ();
}

function onResize (event) {
  if (photostream_mode) {
    var elem = document.getElementById ("photo-" + current_idx);
    if (! elem)
      return;
    scroll_to_photo (elem);
  }
}

function onLoad () {
  document.addEventListener ("keydown", onKeyEvent, false);
  window.addEventListener ("scroll", onScroll, false);
  window.addEventListener ("resize", onResize, false);
  schedule_check_position ();
}   

/*  this should perform initialization while the page is still loading  */
onLoad();