litvinovg/vitro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NIHVIVO-161 First cut at Image Upload

Browse source
This commit is contained in:
jeb228 2010-06-30 13:44:33 +00:00
parent 0a649cf023
commit 020c60d9eb
8 changed files with 7571 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

5
webapp/web/templates/freemarker/body/imageUpload/bogus.ftl Normal file
View file

@ -0,0 +1,5 @@
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
<#-- We should have gone to the individual display page, but we're here. -->
<h2>This is so totally bogus.</h2>

76
webapp/web/templates/freemarker/body/imageUpload/cropImage.ftl Normal file
View file

@ -0,0 +1,76 @@
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
<#-- Crop the replacement main image for an Individual, to produce a thumbnail. -->
${scripts.add("/js/jquery-plugins/jcrop/jquery-1.4.2.pack.js")}
${scripts.add("/js/jquery-plugins/jcrop/jquery.Jcrop.js")}
${stylesheets.addFromTheme("/uploadImages.css")}
${stylesheets.addFromTheme("/jquery.Jcrop.css")}
<script language="Javascript">
(function($) {
$(window).load(function(){
var jcrop_api = $.Jcrop('#cropbox',{
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
var bounds = jcrop_api.getBounds();
var boundx = bounds[0];
var boundy = bounds[1];
function showPreview(coords)
{
if (parseInt(coords.w) > 0)
{
var rx = 115 / coords.w;
var ry = 115 / coords.h;
$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
};
});
}(jQuery));
</script>
<div id="photoCroppingContainer">
<h2>Photo Upload</h2>
<!-- This is the image we're attaching Jcrop to -->
<div id="photoCroppingPreview">
<h6>Current Photo </h6>
<p class="photoCroppingTitleBody">Your profile photo will look like the image below. </p>
<div style="width:115px;height:115px;overflow:hidden;border:1px solid green;"> <img src="${imageUrl}" id="preview" /> </div>
<div id="photoCroppingHowTo">
<p class="photoCroppingNote">To make adjustments, you can drag around and resize the blue square to the right. When you are happy with your photo click the “Save Photo” button. </p>
<form action="${formAction}" method="post">
<!-- Totally bogus -->
<input type="hidden" name="x" value="75">
<input type="hidden" name="y" value="50">
<input type="hidden" name="h" value="150">
<input type="hidden" name="w" value="150">
<input type="submit" value="Save photo">
or <a href="${cancelUrl}">Cancel</a>
</form>
</div>
</div>
<div id="photoCropping">
<img style="border:1px solid green;" src="${imageUrl}" id="cropbox" />
</div>
</div>

23
webapp/web/templates/freemarker/body/imageUpload/newImage.ftl Normal file
View file

@ -0,0 +1,23 @@
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
<#-- Upload a replacement main image for an Individual. -->
${stylesheets.addFromTheme("/uploadImages.css")}
<#if errorMessage??>
<h2>${errorMessage}</h2>
</#if>
<div id="photoUploadContainer">
<h2>Photo Upload</h2>
<div id="photoUploadDefaultImageContainer">
<h6>Current Photo</h6>
<img src="${thumbnailUrl}" width="115" height="115" /> </div>
<div id="photoUploadForm">
<form action="${formAction}" enctype="multipart/form-data" method="post">
<label>Upload photo <span> (JPEG, GIF or PNG. Max Size: 50 MB)</span></label>
<input type="file" name="datafile" size="30">
<input type="submit" value="Upload a photo"> or <a href="${cancelUrl}">Cancel</a>
</form>
</div>
</div>

24
webapp/web/templates/freemarker/body/imageUpload/replaceImage.ftl Normal file
View file

@ -0,0 +1,24 @@
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
<#-- Upload a replacement main image for an Individual. -->
${stylesheets.addFromTheme("/uploadImages.css")}
<#if errorMessage??>
<h2>${errorMessage}</h2>
</#if>
<div id="photoUploadContainer">
<h2>Photo Upload</h2>
<div id="photoUploadDefaultImageContainer">
<h6>Current Photo</h6>
<img src="${thumbnailUrl}" width="115" height="115" /> <br />
<a href="${deleteUrl}">Delete photo</a></div>
<div id="photoUploadForm">
<form action="${formAction}" enctype="multipart/form-data" method="post">
<label>Replace Photo <span> (JPEG, GIF or PNG. Max Size: 50 MB)</span></label>
<input type="file" name="datafile" size="30">
<input type="submit" value="Upload a photo"> or <a href="${cancelUrl}">Cancel</a>
</form>
</div>
</div>