<!DOCTYPE html>
<html>
<head>
<title><%= @title %></title>
<meta charset="UTF-8">
<style type="text/css">
* {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.language {
}
.deviceName {
display: block;
font-size: 30px;
padding-bottom: 24px;
padding-top: 45px;
}
.screenshot {
cursor: pointer;
border: 1px #EEE solid;
z-index: 0;
}
th {
text-align: left;
}
td {
text-align: center;
min-width: 200px;
}
#overlay {
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.8);
z-index:5;
width:100%;
height:100%;
display:none;
cursor: zoom-out;
text-align: center;
}
#imageDisplay {
height: auto;
width: auto;
z-index: 10;
cursor: pointer;
}
#imageInfo {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
color: white;
margin: 20px;
padding: 10px;
position: absolute;
right: 0;
top: 0;
width: 250px;
z-index: -1;
}
#imageInfo:hover {
z-index: 20;
}
</style>
</head>
<body>
<% divide_size_by = 5.0 %>
<% max_width = 180 %>
<% image_counter = 0 %>
<% @data.each do |language, content| %>
<h1 class="language"><%= language %></h1>
<hr>
<table>
<% content.each do |device_name, screens| %>
<tr>
<th colspan="<%= screens.count %>">
<span class="deviceName"><%= device_name %></span>
</th>
</tr>
<tr>
<% screens.each do |screen_path| %>
<% next if screen_path.include?"_framed.png" %>
<td>
<% style = "width: 100%;" %>
<% image_counter += 1 %>
<a href="<%= screen_path %>" target="_blank" class="screenshotLink">
<img class="screenshot"
src="<%= screen_path %>"
style="<%= style %>"
alt="<%= language %> <%= device_name %>"
data-counter="<%= image_counter %>" />
</a>
</td>
<% end %>
</tr>
<% end %>
</table>
<% end %>
<div id="overlay">
<img id="imageDisplay" src="" alt="" />
<div id="imageInfo"></div>
</div>
<script type="text/javascript">
var overlay = document.getElementById('overlay');
var imageDisplay = document.getElementById('imageDisplay');
var imageInfo = document.getElementById('imageInfo');
var screenshotLink = document.getElementsByClassName('screenshotLink');
function doClick(el) {
if (document.createEvent) {
var evObj = document.createEvent('MouseEvents', true);
evObj.initMouseEvent("click", false, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evObj);
} else if (document.createEventObject) { //IE
var evObj = document.createEventObject();
el.fireEvent('onclick', evObj);
}
}
for (index = 0; index < screenshotLink.length; ++index) {
screenshotLink[index].addEventListener('click', function(e) {
e.preventDefault();
var img = e.target;
if (e.target.tagName == 'A') {
img = e.target.children[0];
}
// beautify
var tmpImg = new Image();
tmpImg.src = img.src;
imageDisplay.style.height = 'auto';
imageDisplay.style.width = 'auto';
imageDisplay.style.paddingTop = '20px';
if (window.innerHeight < tmpImg.height) {
imageDisplay.style.height = document.documentElement.clientHeight+'px';
} else if (window.innerWidth < tmpImg.width) {
imageDisplay.style.width = document.documentElement.clientWidth;+'px';
} else {
imageDisplay.style.paddingTop = parseInt((window.innerHeight - tmpImg.height) / 2)+'px';
}
imageDisplay.src = img.src;
imageDisplay.alt = img.alt;
imageDisplay.dataset.counter = img.dataset.counter;
imageInfo.innerHTML = '<h3>'+img.alt+'</h3>';
imageInfo.innerHTML += img.src.split("/").pop();
imageInfo.innerHTML += '<br />'+tmpImg.height+'×'+tmpImg.width+'px';
overlay.style.display = "block";
});
}
imageDisplay.addEventListener('click', function(e) {
e.stopPropagation(); // !
overlay.style.display = "none";
img_counter = parseInt(e.target.dataset.counter) + 1;
try {
link = document.body.querySelector('img[data-counter="'+img_counter+'"]').parentNode;
} catch (e) {
try {
link = document.body.querySelector('img[data-counter="0"]').parentNode;
} catch (e) {
return false;
}
}
doClick(link);
});
overlay.addEventListener('click', function(e) {
overlay.style.display = "none";
})
function keyPressed(e) {
e = e || window.event;
var charCode = e.keyCode || e.which;
switch(charCode) {
case 27: // Esc
overlay.style.display = "none";
break;
case 34: // right-arrow, Page Down, keypad right, ...
case 39:
case 54:
case 102:
e.preventDefault();
doClick(imageDisplay);
break;
case 33: // left-arrow, Page Up, keypad right, ...
case 37:
case 52:
case 100:
e.preventDefault();
document.getElementById('imageDisplay').dataset.counter -= 2; // hacky
doClick(imageDisplay);
break;
}
};
document.body.addEventListener('keydown', keyPressed);
</script>
</body>
</html>