<p>Drag a screenshot from your desktop onto a device to the right.</p>
</div>
<div class="layout-content-col span-10">
- <ul id="device-list"></ul>
+ <ul class="device-list primary"></ul>
+ <a href="#" id="archive-expando">Older devices</a>
+ <ul class="device-list archive"></ul>
</div>
</div>
text-transform: uppercase;
}
- #device-list {
+ .device-list {
padding: 0;
margin: 0;
}
- #device-list li {
+ .device-list li {
display: inline-block;
vertical-align: bottom;
margin: 0;
text-align: center;
}
- #device-list li .thumb-container {
+ .device-list li .thumb-container {
display: inline-block;
}
- #device-list li .thumb-container img {
+ .device-list li .thumb-container img {
margin-bottom: 8px;
opacity: 0.6;
transition: transform 0.2s, opacity 0.2s;
}
- #device-list li.drag-hover .thumb-container img {
+ .device-list li.drag-hover .thumb-container img {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
- #device-list li .device-details {
+ .device-list li .device-details {
font-size: 13px;
line-height: 16px;
color: #888;
}
- #device-list li .device-url {
+ .device-list li .device-url {
font-weight: bold;
}
+ #archive-expando {
+ display: block;
+ font-size: 13px;
+ font-weight: bold;
+ color: #333;
+ text-transform: uppercase;
+ margin-top: 16px;
+ padding-top: 16px;
+ padding-left: 28px;
+ border-top: 1px solid transparent;
+ background: transparent url({@docRoot}assets/images/styles/disclosure_down.png)
+ no-repeat scroll 0 8px;
+ }
+
+ #archive-expando.expanded {
+ background-image: url({@docRoot}assets/images/styles/disclosure_up.png);
+ border-top: 1px solid #ccc;
+ }
+
#output {
color: #f44;
font-style: italic;
// Global constants
var MSG_INVALID_INPUT_IMAGE = 'Invalid screenshot provided. Screenshots must be PNG files '
- + 'matching the target device\'s screen resolution in either portrait or landscape.';
+ + 'matching the target device\'s screen aspect ratio in either portrait or landscape.';
var MSG_NO_INPUT_IMAGE = 'Drag a screenshot (in PNG format) from your desktop onto a '
+ 'target device above.'
var MSG_GENERATING_IMAGE = 'Generating device art…';
// Device manifest.
var DEVICES = [
{
+ id: 'nexus_4',
+ title: 'Nexus 4',
+ url: 'http://www.google.com/nexus/4/',
+ physicalSize: 4.7,
+ physicalHeight: 5.23,
+ density: 'XHDPI',
+ landRes: ['shadow', 'back', 'fore'],
+ landOffset: [349,214],
+ portRes: ['shadow', 'back', 'fore'],
+ portOffset: [213,350],
+ portSize: [768,1280]
+ },
+ {
id: 'nexus_7',
title: 'Nexus 7',
- url: 'http://www.android.com/devices/detail/nexus-7',
+ url: 'http://www.google.com/nexus/7/',
physicalSize: 7,
physicalHeight: 7.81,
- density: 213,
+ density: '213dpi',
landRes: ['shadow', 'back', 'fore'],
- landOffset: [363,260],
+ landOffset: [315,270],
portRes: ['shadow', 'back', 'fore'],
- portOffset: [265,341],
- portSize: [800,1280],
+ portOffset: [264,311],
+ portSize: [800,1280]
+ },
+ {
+ id: 'nexus_10',
+ title: 'Nexus 10',
+ url: 'http://www.google.com/nexus/10/',
+ physicalSize: 10,
+ physicalHeight: 7,
+ actualResolution: [1600,2560],
+ density: 'XHDPI',
+ landRes: ['shadow', 'back', 'fore'],
+ landOffset: [227,217],
+ portRes: ['shadow', 'back', 'fore'],
+ portOffset: [217,223],
+ portSize: [800,1280]
},
{
id: 'xoom',
url: 'http://www.google.com/phone/detail/motorola-xoom',
physicalSize: 10,
physicalHeight: 6.61,
- density: 160,
+ density: 'MDPI',
landRes: ['shadow', 'back', 'fore'],
landOffset: [218,191],
portRes: ['shadow', 'back', 'fore'],
portOffset: [199,200],
portSize: [800,1280],
+ archived: true
},
{
id: 'galaxy_nexus',
url: 'http://www.android.com/devices/detail/galaxy-nexus',
physicalSize: 4.65,
physicalHeight: 5.33,
- density: 320,
+ density: 'XHDPI',
landRes: ['shadow', 'back', 'fore'],
landOffset: [371,199],
portRes: ['shadow', 'back', 'fore'],
portOffset: [216,353],
portSize: [720,1280],
+ archived: true
},
{
id: 'nexus_s',
url: 'http://www.google.com/phone/detail/nexus-s',
physicalSize: 4.0,
physicalHeight: 4.88,
- density: 240,
+ density: 'HDPI',
landRes: ['shadow', 'back', 'fore'],
landOffset: [247,135],
portRes: ['shadow', 'back', 'fore'],
portOffset: [134,247],
portSize: [480,800],
+ archived: true
}
];
$('#output').html(MSG_NO_INPUT_IMAGE);
$('#frame-customizations').hide();
+ $('.device-list.archive').hide();
$('#output-shadow, #output-glare').click(function() {
- createFrame(g_currentDevice, g_currentImage);
+ createFrame();
});
// Build device list.
$.each(DEVICES, function() {
+ var resolution = this.actualResolution || this.portSize;
+ var scaleFactorText = '';
+ if (resolution[0] != this.portSize[0]) {
+ scaleFactorText = '<br>' + (100 * (this.portSize[0] / resolution[0])).toFixed(0) +
+ '% size output';
+ } else {
+ scaleFactorText = '<br> ';
+ }
+
$('<li>')
.append($('<div>')
.addClass('thumb-container')
.html((this.url
? ('<a class="device-url" href="' + this.url + '">' + this.title + '</a>')
: this.title) +
- '<br>' + this.physicalSize + '" @ ' + this.density + 'dpi' +
- '<br>' + this.portSize[0] + 'x' + this.portSize[1]))
+ '<br>' + this.physicalSize + '" @ ' + this.density +
+ '<br>' + (resolution[0] + 'x' + resolution[1]) + scaleFactorText))
.data('deviceId', this.id)
- .appendTo('#device-list');
+ .appendTo(this.archived ? '.device-list.archive' : '.device-list.primary');
+ });
+
+ // Set up "older devices" expando.
+ $('#archive-expando').click(function() {
+ if ($(this).hasClass('expanded')) {
+ $(this).removeClass('expanded');
+ $('.device-list.archive').hide();
+ } else {
+ $(this).addClass('expanded');
+ $('.device-list.archive').show();
+ }
+ return false;
});
// Set up drag and drop.
- $('#device-list li')
+ $('.device-list li')
.live('dragover', function(evt) {
$(this).addClass('drag-hover');
evt.dataTransfer.dropEffect = 'link';
*/
function createFrame() {
var port;
- if (g_currentImage.naturalWidth == g_currentDevice.portSize[0] &&
- g_currentImage.naturalHeight == g_currentDevice.portSize[1]) {
- if (!g_currentDevice.portRes) {
- alert('No portrait frame is currently available for this device.');
- $('#output').html(MSG_NO_INPUT_IMAGE);
- return;
- }
+
+ var aspect1 = g_currentImage.naturalWidth / g_currentImage.naturalHeight;
+ var aspect2 = g_currentDevice.portSize[0] / g_currentDevice.portSize[1];
+
+ if (aspect1 == aspect2) {
port = true;
- } else if (g_currentImage.naturalWidth == g_currentDevice.portSize[1] &&
- g_currentImage.naturalHeight == g_currentDevice.portSize[0]) {
- if (!g_currentDevice.landRes) {
- alert('No landscape frame is currently available for this device.');
- $('#output').html(MSG_NO_INPUT_IMAGE);
- return;
- }
+ } else if (aspect1 == 1 / aspect2) {
port = false;
} else {
- alert('Screenshots for ' + g_currentDevice.title + ' must be ' +
- g_currentDevice.portSize[0] + 'x' + g_currentDevice.portSize[1] +
- ' or ' +
- g_currentDevice.portSize[1] + 'x' + g_currentDevice.portSize[0] + '.');
+ alert('The screenshot must have an aspect ratio of ' +
+ aspect2.toFixed(3) + ' or ' + (1 / aspect2).toFixed(3) +
+ ' (ideally ' + g_currentDevice.portSize[0] + 'x' + g_currentDevice.portSize[1] +
+ ' or ' + g_currentDevice.portSize[1] + 'x' + g_currentDevice.portSize[0] + ').');
$('#output').html(MSG_INVALID_INPUT_IMAGE);
return;
}
var width = resourceImages['back'].naturalWidth;
var height = resourceImages['back'].naturalHeight;
var offset = port ? g_currentDevice.portOffset : g_currentDevice.landOffset;
+ var size = port
+ ? g_currentDevice.portSize
+ : [g_currentDevice.portSize[1], g_currentDevice.portSize[0]];
var canvas = document.createElement('canvas');
canvas.width = width;
ctx.drawImage(resourceImages['shadow'], 0, 0);
}
ctx.drawImage(resourceImages['back'], 0, 0);
- ctx.drawImage(g_currentImage, offset[0], offset[1]);
+ ctx.fillStyle = '#000';
+ ctx.fillRect(offset[0], offset[1], size[0], size[1]);
+ ctx.drawImage(g_currentImage, offset[0], offset[1], size[0], size[1]);
if (resourceImages['fore'] && $('#output-glare').is(':checked')) {
ctx.drawImage(resourceImages['fore'], 0, 0);
}
OSDN Git Service
