Implemented screenshot page animation

[quandoparte] / www / screenshot-generator.js

diff --git a/www/screenshot-generator.js b/www/screenshot-generator.js
index 53b4add..7aec65e 100644 (file)
--- a/www/screenshot-generator.js
+++ b/www/screenshot-generator.js
@@ -5,6 +5,26 @@ var screenshots = {
        "screenshot-stationview-menu.png" : "The Station Departures Menu",
 };
 
+function dismiss_picture()
+{
+       var parent = this.parentNode;
+       parent.style.opacity = 0.0;
+       parent.style.visibility = 'hidden';
+       parent.display = 'none';
+}
+
+function present_picture()
+{
+       var display = document.getElementById('picture-display');
+       parent.display = 'block';
+       display.style.visibility = 'visible';
+       display.style.opacity = 1.0;
+       display.style.left = (window.width  - display.width) / 2;
+       display.style.top = (window.height  - display.height) / 2;
+       var picture = document.getElementById('picture-display-picture');
+       picture.setAttribute('src', this.getAttribute('src'));
+}
+
 function generate_div(value, index, array)
 {
        var screenshots = document.getElementById('screenshot-list');
@@ -14,8 +34,13 @@ function generate_div(value, index, array)
        var p1Element = document.createElement('div');
        var p2Element = p1Element.cloneNode(true);
        
-       var aElement = document.createElement('a');
-       aElement.setAttribute('href', index);
+       var aElement = document.createElement('img');
+       aElement.setAttribute('src', index);
+       if (aElement.addEventListener) {
+               aElement.addEventListener('click', present_picture, true);
+       } else if (aElement.attachEvent) {
+               aElement.attachEvent('onclick', show_picture);
+       }
 
        var imgElement = document.createElement('img');
        imgElement.setAttribute('src', index);
@@ -35,6 +60,13 @@ function build_screenshot_list()
 {
        for (var key in screenshots)
                generate_div(screenshots[key], key, screenshots);
+
+       var element = document.getElementById('picture-display-picture');
+       if (element.addEventListener) {
+               element.addEventListener('click', dismiss_picture, false);
+       } else if (element.attachEvent) {
+               window.attachEvent('onclick', dismiss_picture);
+       }
 }
 
 if (window.addEventListener) {
@@ -42,3 +74,5 @@ if (window.addEventListener) {
 } else if (window.attachEvent) {
        window.attachEvent('onload', build_screenshot_list);
 }
+
+