Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

cropping of images

  • Loading branch information...
commit dc285e0c8ea9eb06730d74be1e2767167ce6965a 1 parent b6f33fe
@ctide ctide authored
View
55 Apps/dashboardv3/dashboard-client.js
@@ -20,7 +20,9 @@ var express = require('express')
, profileImage = 'img/default-profile.png'
, path = require('path')
, fs = require('fs')
+ , im = require('imagemagick')
, page = ''
+ , cropping = {}
, oauthPopupSizes = {foursquare: {height: 540, width: 960},
github: {height: 1000, width: 1000},
twitter: {width: 630, height: 500},
@@ -143,17 +145,21 @@ var renderPublish = function(req, res) {
var submitPublish = function(req, res) {
if (req.form) {
req.form.complete(function(err, fields, files) {
+ if (fields['x']) {
+ cropping[fields.app] = true;
+ }
if (err) res.write(JSON.stringify(err.message));
- if (fields['new-file']) {
- var write = fs.createWriteStream(path.join(lconfig.lockerDir, githubapps[fields.app].srcdir, 'screenshot'));
- var uploadedFile = fs.createReadStream('tempScreenshot');
- write.once('open', function(fd) {
- require('util').pump(uploadedFile, write);
+ if (fields['new-file'] === 'true') {
+ fs.rename('tempScreenshot', path.join(lconfig.lockerDir, githubapps[fields.app].srcdir, 'screenshot'), function() {
+ cropImage(path.join(lconfig.lockerDir, githubapps[fields.app].srcdir, 'screenshot'), fields);
});
} else {
if (fields['app-screenshot-url']) {
- var write = fs.createWriteStream(path.join(lconfig.lockerDir, githubapps[fields.app].srcdir, 'screenshot'));
- request.get(fields['app-screenshot-url']).pipe(write);
+ request.get({uri: fields['app-screenshot-url'], encoding: 'binary'}, function(err, resp, body) {
+ fs.writeFile(path.join(lconfig.lockerDir, githubapps[fields.app].srcdir, 'screenshot'), body, 'binary', function() {
+ cropImage(path.join(lconfig.lockerDir, githubapps[fields.app].srcdir, 'screenshot'), fields);
+ });
+ });
}
}
fields.lastUpdated = Date.now();
@@ -174,6 +180,27 @@ var submitPublish = function(req, res) {
}
}
+var cropImage = function(file, fields) {
+ if (fields['x']) {
+ im.crop({
+ srcPath: file,
+ dstPath: file,
+ width: fields['w'],
+ height: fields['h'],
+ offset: {x: fields['x'], y: fields['y']}
+ }, function(err, stdout, stderr) {
+ im.resize({
+ srcData: file,
+ dstPath: file,
+ width: 200,
+ height: 200
+ }, function() {
+ cropping[fields.app] = false;
+ });
+ });
+ }
+}
+
var getAppsInfo = function(count, callback) {
locker.map(function(err, map) {
var result = [];
@@ -233,6 +260,9 @@ var renderYou = function(req, res) {
var renderScreenshot = function(req, res) {
if (githubapps[req.params.handle]) {
+ if (cropping[req.params.handle]) {
+ return res.sendfile(__dirname + '/static/img/loading6.gif');
+ }
path.exists(path.join(lconfig.lockerDir, githubapps[req.params.handle].srcdir, 'screenshot'), function(exists) {
if (exists) {
return res.sendfile(path.join(lconfig.lockerDir, githubapps[req.params.handle].srcdir, 'screenshot'));
@@ -241,7 +271,7 @@ var renderScreenshot = function(req, res) {
}
});
} else {
- res.sendfile(__dirname + '/static/img/rainbow.jpg');
+ res.sendfile(__dirname + '/static/img/batman.jpg');
}
};
@@ -253,11 +283,16 @@ var renderAllApps = function(req, res) {
getGithubApps(function(apps) {
res.render('iframe/allApps', {
layout: false,
- apps: apps
+ apps: apps,
+ cropping: cropping
});
});
};
+var croppingFinished = function(req, res) {
+ res.send(!cropping[req.params.app]);
+}
+
app.get('/clickapp/:app', clickApp);
app.get('/you', renderYou);
app.get('/', renderYou);
@@ -273,7 +308,7 @@ app.get('/screenshot/:handle', renderScreenshot);
app.post('/publishScreenshot', handleUpload);
app.get('/tempScreenshot', renderTempScreenshot);
-
+app.get('/finishedCropping/:app', croppingFinished);
var getGithubApps = function(callback) {
uistate.fetchState();
View
24 Apps/dashboardv3/static/css/style.css
@@ -236,11 +236,23 @@ aside {
.publish-list .preview {
position: relative;
- width: 200px;
- height: 200px;
+ width: 450px;
+ height: 450px;
border: solid 1px #999;
- line-height: 199px;
+ line-height: 450px;
text-align: center;
+ overflow: hidden;
+}
+
+.publish-list .preview.jcrop {
+ text-align: left;
+}
+
+.publish-list .jcrop-holder {
+ vertical-align: middle;
+ position: absolute !important;
+ top: 50%;
+ left: 50%;
}
.publish-list .preview p {
@@ -254,9 +266,9 @@ aside {
line-height: 20px;
}
-.publish-list .preview img {
- max-width: 200px;
- max-height: 200px;
+.publish-list .preview:not(.jcrop) img {
+ max-width: 450px;
+ max-height: 450px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
View
BIN  Apps/dashboardv3/static/css/vendor/Jcrop.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
35 Apps/dashboardv3/static/css/vendor/jquery.Jcrop.css
@@ -0,0 +1,35 @@
+/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
+.jcrop-holder { text-align: left; }
+
+.jcrop-vline, .jcrop-hline
+{
+ font-size: 0px;
+ position: absolute;
+ background: white url('Jcrop.gif') top left repeat;
+}
+.jcrop-vline { height: 100%; width: 1px !important; }
+.jcrop-hline { width: 100%; height: 1px !important; }
+.jcrop-vline.right { right: 0px; }
+.jcrop-hline.bottom { bottom: 0px; }
+.jcrop-handle {
+ font-size: 1px;
+ width: 7px !important;
+ height: 7px !important;
+ border: 1px #eee solid;
+ background-color: #333;
+}
+
+.jcrop-tracker { width: 100%; height: 100%; }
+
+.custom .jcrop-vline,
+.custom .jcrop-hline
+{
+ background: yellow;
+}
+.custom .jcrop-handle
+{
+ border-color: black;
+ background-color: #C7BB00;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+}
View
12 Apps/dashboardv3/static/js/allApps.js
@@ -11,6 +11,8 @@ $(document).ready(function() {
});
return false;
});
+
+ $('img[src="img/loading6.gif"]').each(poll);
});
var filterItems = function(type) {
@@ -21,3 +23,13 @@ var filterItems = function(type) {
$('.published').parents('li').fadeOut();
}
}
+
+var poll = function(ind, elem) {
+ $.get("finishedCropping/" + $(elem).data('app'), function(data) {
+ if (data) {
+ $(elem).attr('src', 'screenshot/' + $(elem).data('app'));
+ } else {
+ window.setTimeout(function() { poll(ind, elem); }, 200);
+ }
+ });
+}
View
36 Apps/dashboardv3/static/js/publish.js
@@ -1,3 +1,5 @@
+var jcrop_api, uploader;
+
$(document).ready(function() {
$('.rename-app').change(function() {
$('.app-name').toggle();
@@ -5,6 +7,10 @@ $(document).ready(function() {
});
$('.app').change(function() {
+ $('.preview').removeClass('jcrop');
+ $('.preview p').text('preview');
+ $('#x,#y,#w,#h').attr('value', '');
+ if (jcrop_api) { jcrop_api.destroy(); }
var self = $('.app>option:selected');
$('input[name=new-file]').attr('value', 'false');
$('textarea[name=app-description]').text(self.data('description'));
@@ -26,6 +32,8 @@ $(document).ready(function() {
$('.screenshot-url').blur(function() {
if ($(this).attr('value').length > 0) {
$('.preview img').attr('src', $('.screenshot-url').attr('value'));
+ $('input[name=new-file]').attr('value', 'false');
+ attachJcrop();
} else {
$('.preview img').attr('src', 'screenshot/' + $('.app>option:selected').data('handle'));
}
@@ -42,7 +50,7 @@ $(document).ready(function() {
window.parent.loadApp();
});
- var uploader = setupUploader();
+ setupUploader();
if (parent.iframeLoaded) {
parent.iframeLoaded();
@@ -59,8 +67,31 @@ var selectItem = function(id) {
$('.app').change();
}
+var attachJcrop = function() {
+ if (jcrop_api) { jcrop_api.destroy(); }
+ $('.preview p').text('crop');
+ $('.preview').addClass('jcrop');
+ $('.preview img').Jcrop({
+ aspectRatio: 1 / 1,
+ boxWidth: 450,
+ boxHeight: 450,
+ onSelect: updateCoords
+ },function(){
+ jcrop_api = this;
+ $('.jcrop-holder').css('margin-top', ($('.jcrop-holder').height() / 2) * -1);
+ $('.jcrop-holder').css('margin-left', ($('.jcrop-holder').width() / 2) * -1);
+ });
+}
+
+var updateCoords = function(c) {
+ $('#x').val(c.x);
+ $('#y').val(c.y);
+ $('#w').val(c.w);
+ $('#h').val(c.h);
+}
+
var setupUploader = function() {
- var uploader = new plupload.Uploader({
+ uploader = new plupload.Uploader({
runtimes : 'gears,html5,flash,silverlight,browserplus',
browse_button : 'appscreenshot',
container : 'container',
@@ -84,6 +115,7 @@ var setupUploader = function() {
$('.preview img').attr('src', 'tempScreenshot');
$('input[name=new-file]').attr('value', 'true');
$('.screenshot-url').attr('value', '');
+ attachJcrop();
});
return uploader;
View
40 Apps/dashboardv3/views/iframe/allApps.ejs
@@ -11,27 +11,29 @@
<ul class="apps-list">
<% for (var i = 0; i < apps.length; i++) { %>
<li>
- <div class="app-screenshot-container"><img src='<%= "screenshot/" + apps[i].handle %>' class="app-screenshot"></div>
- <div class="app-data">
- <div class="header">
- <p class="title"><%= apps[i].title %><span class="pipe">|</span>
- <% if (apps[i].published) { %>
- <span class="published">published</span><a id=<%= apps[i].handle %> class='publishLink' href="publish?app=<%= apps[i].handle %>"><button class="publish">update app</button></a>
- <% } else { %>
- <span class="drafts">draft</span><a id=<%= apps[i].handle %> class='publishLink' href="publish?app=<%= apps[i].handle %>"><button class="publish">publish app</button></a>
- <% } %>
- <p>last updated <%= apps[i].lastUpdated.getMonth() + "." + apps[i].lastUpdated.getDate() + "." + apps[i].lastUpdated.getFullYear() %></p>
- </div>
- <div class="divider"></div>
- <div class="content">
- <p class="description"><%= apps[i].desc %></p>
- <% if (apps[i].uses) { %>
- <p class="bold">Uses <%= apps[i].uses.join(', ') %></p>
- <% } %>
- <div class="authorship-history">Authorship History
- </div>
+ <div class="app-screenshot-container">
+ <img data-app="<%= apps[i].handle %>" src='<%= cropping[apps[i].handle] ? "img/loading6.gif" : "screenshot/" + apps[i].handle %>' class="app-screenshot">
+ </div>
+ <div class="app-data">
+ <div class="header">
+ <p class="title"><%= apps[i].title %><span class="pipe">|</span>
+ <% if (apps[i].published) { %>
+ <span class="published">published</span><a id=<%= apps[i].handle %> class='publishLink' href="publish?app=<%= apps[i].handle %>"><button class="publish">update app</button></a>
+ <% } else { %>
+ <span class="drafts">draft</span><a id=<%= apps[i].handle %> class='publishLink' href="publish?app=<%= apps[i].handle %>"><button class="publish">publish app</button></a>
+ <% } %>
+ <p>last updated <%= apps[i].lastUpdated.getMonth() + "." + apps[i].lastUpdated.getDate() + "." + apps[i].lastUpdated.getFullYear() %></p>
+ </div>
+ <div class="divider"></div>
+ <div class="content">
+ <p class="description"><%= apps[i].desc %></p>
+ <% if (apps[i].uses) { %>
+ <p class="bold">Uses <%= apps[i].uses.join(', ') %></p>
+ <% } %>
+ <div class="authorship-history">Authorship History
</div>
</div>
+ </div>
</li>
<% } %>
</ul>
View
5 Apps/dashboardv3/views/iframe/publish.ejs
@@ -6,12 +6,17 @@
<script src="js/publish.js"></script>
<script src="js/vendor/plupload.full.js"></script>
<script src="js/vendor/jquery.Jcrop.min.js"></script>
+ <link rel="stylesheet" href="css/vendor/jquery.Jcrop.css" />
</head>
<body>
<content class="body">
<form method="POST" action="publish" enctype="multipart/form-data">
<input type="hidden" name="app-publish" value="true">
<input type="hidden" name="new-file" value="false">
+ <input type="hidden" name="x" id="x">
+ <input type="hidden" name="y" id="y">
+ <input type="hidden" name="w" id="w">
+ <input type="hidden" name="h" id="h">
<ul class="publish-list">
<li><p>1. Choose an application to submit
<select name="app" class='app'>
View
2  package.json
@@ -49,6 +49,8 @@
"ini": "=1.0.1",
"uglify-js": "=1.1.1",
"connect-form": "0.2.1",
+ "imagemagick": "https://github.com/lpatters/node-imagemagick/tarball/master",
+
"hashish": "=0.0.4",
Please sign in to comment.
Something went wrong with that request. Please try again.