lib/snapshot/page.html.erb in snapshot-0.4.12 vs lib/snapshot/page.html.erb in snapshot-0.4.13
- old
+ new
@@ -1,59 +1,205 @@
+<!DOCTYPE html>
<html>
<head>
+ <title>KrauseFx/snapshot</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-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.language {
-
+
}
.deviceName {
- padding-top: 20px;
+ display: block;
font-size: 30px;
+ padding-bottom: 24px;
+ padding-top: 45px;
}
.screenshot {
cursor: pointer;
border: 1px #EEE solid;
+ z-index: 0;
}
td {
text-align: center;
}
+ #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 />
+ <hr>
<table>
<% content.each do |device_name, screens| %>
- <th colspan="<%= screens.count %>">
- <h2 class="deviceName">
- <%= device_name %>
- </h2>
- </th>
<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>
<% screen_size = FastImage.size(File.join(SnapshotConfig.shared_instance.screenshots_path, screen_path)) %>
<% width = ((screen_size[0] / divide_size_by).round rescue 0) %>
<% width = [width, max_width].min %>
<% style = (width > 0 ? "width: #{width}px;" : '') %>
- <a href="<%= screen_path %>" target="_blank">
- <img class="screenshot"
- src="<%= screen_path %>",
- style="<%= style %>" />
+ <% 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 = '0px';
+ 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";
+ })
+
+ document.onkeypress = function(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
+ break;
+ }
+ };
+ </script>
</body>
-</head>
\ No newline at end of file
+</html>