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

Move image cropping js out of template into separate js file. Use existing jquery.js rather than the one included with jcrop.

Browse source
This commit is contained in:
rjy7 2010-06-30 20:30:06 +00:00
parent 643ed3d53f
commit 681cc62c21
4 changed files with 39 additions and 6283 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/config/licenser/known_exceptions.txt
View file

@ -37,6 +37,8 @@ webapp/web/js/jquery.js
webapp/web/js/jquery-ui/*
webapp/web/js/jquery_plugins/*
webapp/web/js/imageUpload/cropImage.js
# From pajhome.org.uk
webapp/web/js/md5.js

33
webapp/web/js/imageUpload/cropImage.js Normal file
View file

@ -0,0 +1,33 @@
(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));

6242
webapp/web/js/jquery_plugins/jcrop/jquery-1.4.2.pack.js
View file

File diff suppressed because it is too large Load diff

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

@ -2,50 +2,13 @@
<#-- 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")}
${scripts.add("/js/jquery.js")}
${scripts.add("/js/jquery_plugins/jcrop/jquery.Jcrop.js")}
${scripts.add("/js/imageUpload/cropImage.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 -->
@ -54,7 +17,7 @@ ${stylesheets.addFromTheme("/jquery.Jcrop.css")}
<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>
<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 -->