screengrab/lib/screengrab/page.html.erb in fastlane-2.81.0.beta.20180212010003 vs screengrab/lib/screengrab/page.html.erb in fastlane-2.81.0.beta.20180213010002
- old
+ new
@@ -62,121 +62,103 @@
#imageInfo:hover {
z-index: 20;
}
</style>
</head>
- <body>
- <% divide_size_by = 5.0 %>
- <% max_width = 180 %>
- <% image_counter = 0 %>
+ <body><% 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><% image_counter += 1 %>
+ <a href="<%= screen_path %>" target="_blank" class="screenshotLink">
+ <img class="screenshot" src="<%= screen_path %>" style="width: 100%;" 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);
+ }
+ }
- <% @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');
+ for (index = 0; index < screenshotLink.length; ++index) {
+ screenshotLink[index].addEventListener('click', function(e) {
+ e.preventDefault();
- 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);
+ var img = e.target;
+ if (e.target.tagName == 'A') {
+ img = e.target.children[0];
}
- }
- for (index = 0; index < screenshotLink.length; ++index) {
- screenshotLink[index].addEventListener('click', function(e) {
- e.preventDefault();
+ // beautify
+ var tmpImg = new Image();
+ tmpImg.src = img.src;
+ imageDisplay.style.height = 'auto';
+ imageDisplay.style.width = 'auto';
+ 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';
+ }
- var img = e.target;
- if (e.target.tagName == 'A') {
- img = e.target.children[0];
- }
+ imageDisplay.src = img.src;
+ imageDisplay.alt = img.alt;
+ imageDisplay.dataset.counter = img.dataset.counter;
- // beautify
- var tmpImg = new Image();
- tmpImg.src = img.src;
- imageDisplay.style.height = 'auto';
- imageDisplay.style.width = 'auto';
- 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';
- }
+ imageInfo.innerHTML = '<h3>'+img.alt+'</h3>';
+ imageInfo.innerHTML += decodeURI(img.src.split("/").pop());
+ imageInfo.innerHTML += '<br />'+tmpImg.height+'×'+tmpImg.width+'px';
- imageDisplay.src = img.src;
- imageDisplay.alt = img.alt;
- imageDisplay.dataset.counter = img.dataset.counter;
+ overlay.style.display = "block";
+ });
+ }
- imageInfo.innerHTML = '<h3>'+img.alt+'</h3>';
- imageInfo.innerHTML += img.src.split("/").pop();
- imageInfo.innerHTML += '<br />'+tmpImg.height+'×'+tmpImg.width+'px';
+ imageDisplay.addEventListener('click', function(e) {
+ e.stopPropagation(); // !
- overlay.style.display = "block";
- });
- }
+ overlay.style.display = "none";
- imageDisplay.addEventListener('click', function(e) {
- e.stopPropagation(); // !
-
- overlay.style.display = "none";
-
- img_counter = parseInt(e.target.dataset.counter) + 1;
+ 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="'+img_counter+'"]').parentNode;
+ link = document.body.querySelector('img[data-counter="0"]').parentNode;
} catch (e) {
- try {
- link = document.body.querySelector('img[data-counter="0"]').parentNode;
- } catch (e) {
- return false;
- }
+ return false;
}
- doClick(link);
- });
+ }
+ doClick(link);
+ });
- overlay.addEventListener('click', function(e) {
- overlay.style.display = "none";
- })
+ overlay.addEventListener('click', function(e) {
+ overlay.style.display = "none";
+ })
function keyPressed(e) {
e = e || window.event;
var charCode = e.keyCode || e.which;
switch(charCode) {
@@ -201,8 +183,8 @@
doClick(imageDisplay);
break;
}
};
document.body.addEventListener('keydown', keyPressed);
- </script>
+ </script>
</body>
</html>