From 654007b709d804767ab5be3bde3b134221a5b589 Mon Sep 17 00:00:00 2001 From: Tomas Bzatek Date: Sun, 3 Apr 2016 17:15:05 +0200 Subject: New 'fluid' theme Introducing a modern looking theme that changes gallery philosophy a bit. Instead of having thumbnails on an album page and photos on separate pages this new design brings emphasis on story telling. Viewer is advised to go through the whole album sequentially, bringing atmosphere to the whole set. All photos are loaded within a single page and keyboard navigation via left/right arrows is supposed to be used to switch the presentation mode on. Three photo sizes are supported now with the 'preview' size being the default. High resolution size has been introduced for 2560x1440 screens and larger. Note that this template uses code from 3rd parties, see CREDITS for details. I haven't been able to contact anyone behind the TheCodePlayer.com project so licensing of the breadcrumbs might be an issue. --- templates/fluid/scripts.js | 351 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 351 insertions(+) create mode 100644 templates/fluid/scripts.js (limited to 'templates/fluid/scripts.js') diff --git a/templates/fluid/scripts.js b/templates/fluid/scripts.js new file mode 100644 index 0000000..7c9bb97 --- /dev/null +++ b/templates/fluid/scripts.js @@ -0,0 +1,351 @@ + +/****************************** 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
+ * - 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(); -- cgit v1.2.3