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

Proof of concept - Image upload

Browse source
This commit is contained in:
j2blake 2013-04-26 23:50:17 -04:00
parent c59076a19a
commit bf2ed5c339
9 changed files with 248 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -21,20 +21,22 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/uploadImages.cs
</#macro>-->
<#assign i18n = i18n() >
<section id="photoCroppingContainer" role="region">
<h2>Photo Upload</h2>
<h2>${i18n.upload_heading}</h2>
<!-- This is the image we're attaching Jcrop to -->
<section id="photoCroppingPreview" role="region">
<p class="photoCroppingTitleBody">Your profile photo will look like the image below. </p>
<p class="photoCroppingTitleBody">${i18n.cropping_caption}</p>
<section class="photoCroppedPreview" role="region">
<img src="${imageUrl}" id="preview" alt="Image to be cropped"/>
<img src="${imageUrl}" id="preview" alt="${i18n.alt_image_to_crop}"/>
</section>
<section id="photoCroppingHowTo" role="region">
<p class="photoCroppingNote">To make adjustments, you can drag around and resize the photo to the right. When you are happy with your photo click the "Save Photo" button. </p>
<p class="photoCroppingNote">${i18n.cropping_note}</p>
<form id="cropImage" action="${formAction}" method="post" role="form">
<!-- Javascript will populate these values -->
@ -43,15 +45,15 @@ ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/uploadImages.cs
<input type="hidden" name="w" value="" />
<input type="hidden" name="h" value="" />
<input class="submit" type="submit" value="Save photo">
<input class="submit" type="submit" value="${i18n.submit_save}">
<span class="or"> or <a class="cancel" href="${cancelUrl}" title="cancel">Cancel</a></span>
<span class="or"> ${i18n.or} <a class="cancel" href="${cancelUrl}" title="${i18n.cancel_title}">${i18n.cancel_link}</a></span>
</form>
</section>
</section>
<section id="photoCropping" role="region">
<img src="${imageUrl}" id="cropbox" alt="Preview of photo cropped" />
<img src="${imageUrl}" id="cropbox" alt="${i18n.alt_preview_crop}" />
</section
</section>

26
webapp/web/templates/freemarker/body/imageUpload/imageUpload-newImage.ftl
View file

@ -7,29 +7,35 @@ ${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery.js"></
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/uploadImages.css" />')}
<#assign i18n = i18n() >
<section id="photoUploadContainer" role="region">
<h2>Photo Upload</h2>
<h2>${i18n.upload_heading}</h2>
<#if errorMessage??>
<section id="error-alert" role="alert"><img src="${urls.images}/iconAlert.png" alt="Error alert icon" />
<section id="error-alert" role="alert"><img src="${urls.images}/iconAlert.png" alt="${i18n.alt_error_alert}" />
<p>${errorMessage}</p>
</section>
</#if>
<section id="photoUploadDefaultImage" role="region">
<h3>Current Photo</h3>
<h3>${i18n.current_photo}</h3>
<img src="${thumbnailUrl}" width="115" height="115" alt="Individual photo" />
<img src="${thumbnailUrl}" width="115" height="115" alt="${i18n.alt_thumbnail_photo}" />
</section>
<form id="photoUploadForm" action="${formAction}" enctype="multipart/form-data" method="post" role="form">
<label>Upload a photo <span> (JPEG, GIF or PNG)</span></label>
<label>${i18n.upload_photo} <span>${i18n.photo_types}</span></label>
<input id="datafile" type="file" name="datafile" size="30" />
<p class="note">Maximum file size: ${maxFileSize} megabytes<br />
Minimum image dimensions: ${thumbnailWidth} x ${thumbnailHeight} pixels</p>
<input class="submit" type="submit" value="Upload photo"/>
<p class="note">${i18n.maximum_file_size(maxFileSize)}<br />
${i18n.minimum_image_dimensions(thumbnailWidth, thumbnailHeight)}</p>
<input class="submit" type="submit" value="${i18n.submit_upload}"/>
<span class="or"> or <a class="cancel" href="${cancelUrl}" title="cancel">Cancel</a></span>
<span class="or"> ${i18n.or} <a class="cancel" href="${cancelUrl}" title="${i18n.cancel_title}">${i18n.cancel_link}</a></span>
</form>
</section>
</section>
<script type="text/javascript">
i18n_confirmDelete = ${i18n.confirm_delete}
</script>

28
webapp/web/templates/freemarker/body/imageUpload/imageUpload-replaceImage.ftl
View file

@ -7,30 +7,36 @@ ${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery.js"></
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/uploadImages.css" />')}
<#assign i18n = i18n() >
<section id="photoUpload" role="region">
<h2>Photo Upload</h2>
<h2>${i18n.upload_heading}</h2>
<#if errorMessage??>
<section id="error-alert" role="alert"><img src="${urls.images}/iconAlert.png" alt="Error alert icon" />
<section id="error-alert" role="alert"><img src="${urls.images}/iconAlert.png" alt="${i18n.alt_error_alert}" />
<p>${errorMessage}</p>
</section>
</#if>
<section id="photoUploadDefaultImage" role="region">
<h3>Current Photo</h3>
<img src="${thumbnailUrl}" width="115" alt="Individual photo" />
<h3>${i18n.current_photo}</h3>
<img src="${thumbnailUrl}" width="115" alt="${i18n.alt_thumbnail_photo}" />
<a class="thumbnail" href="${deleteUrl}">Delete photo</a>
<a class="thumbnail" href="${deleteUrl}">${i18n.delete_link}</a>
</section>
<form id="photoUploadForm" action="${formAction}" enctype="multipart/form-data" method="post" role="form">
<label>Replace Photo <span> (JPEG, GIF or PNG)</span></label>
<label>${i18n.replace_photo} <span>${i18n.photo_types}</span></label>
<input type="file" name="datafile" size="30">
<p class="note">Maximum file size: ${maxFileSize} megabytes<br />
Minimum image dimensions: ${thumbnailWidth}x${thumbnailHeight} pixels</p>
<input class="submit" type="submit" value="Upload photo">
<p class="note">${i18n.maximum_file_size(maxFileSize)}<br />
${i18n.minimum_image_dimensions(thumbnailWidth, thumbnailHeight)}</p>
<input class="submit" type="submit" value="${i18n.submit_upload}">
<span class="or"> or <a class="cancel" href="${cancelUrl}" title="cancel">Cancel</a></span>
<span class="or"> ${i18n.or} <a class="cancel" href="${cancelUrl}" title="${i18n.cancel_title}">${i18n.cancel_link}</a></span>
</form>
</section>
</section>
<script type="text/javascript">
i18n_confirmDelete = "${i18n.confirm_delete}"
</script>

4
webapp/web/templates/freemarker/body/individual/individual-vitro.ftl
View file

@ -77,3 +77,7 @@ ${headScripts.add('<script type="text/javascript" src="${urls.base}/js/jquery_pl
${scripts.add('<script type="text/javascript" src="${urls.base}/js/imageUpload/imageUploadUtils.js"></script>',
'<script type="text/javascript" src="${urls.base}/js/individual/individualUriRdf.js"></script>')}
<script type="text/javascript">
i18n_confirmDelete = "${i18n().confirm_delete}"
</script>