Merge pull request #223 from asmecher/i988_single_file_uploader_2

pkp/pkp-lib#988 Streamline plupload controls
pkp · Feb 22, 2016 · 49091aa · 49091aa
2 parents d621eab + 254be72
commit 49091aa
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 36 deletions.
diff --git a/js/controllers/catalog/form/CatalogMetadataFormHandler.js b/js/controllers/catalog/form/CatalogMetadataFormHandler.js
@@ -42,6 +42,8 @@
 			$form.find('#attachPermissions').prop('checked', true);
 		}
 
+		this.coverImageMessage_ = options.coverImageMessage;
+
 		$('input[id^="copyrightHolder-"]', $form)
 				.keyup(this.callbackWrapper(this.checkAttachMetadata));
 		$('input[id^="copyrightYear-"]', $form)
@@ -53,6 +55,8 @@
 				$('#attachPermissions').prop('checked', true);
 			}
 		});
+
+		this.bind('fileUploaded', this.callbackWrapper(this.handleCoverImageUpload));
 	};
 	$.pkp.classes.Helper.inherits(
 			$.pkp.controllers.catalog.form.CatalogMetadataFormHandler,
@@ -72,6 +76,15 @@
 	$.pkp.controllers.catalog.form.CatalogMetadataFormHandler.prototype.
 			audienceValues_ = null;
 
+	/**
+	 * A message to display in place of the cover image when it has been
+	 * replaced.
+	 * @private
+	 * @type {String?}
+	 */
+	$.pkp.controllers.catalog.form.CatalogMetadataFormHandler.prototype.
+			coverImageMessage_ = null;
+
 
 	//
 	// Private methods
@@ -115,5 +128,24 @@
 	};
 
 
+	/**
+	 * Callback for when a new cover image is uploaded
+	 *
+	 * @param {Object} caller The original context in which the callback was called.
+	 * @param {Event} event The event triggered on caller.
+	 * @see $.pkp.controllers.form.FileUploadFormHandler.prototype.handleUploadResponse
+	 */
+	$.pkp.controllers.catalog.form.CatalogMetadataFormHandler.prototype.
+			handleCoverImageUpload = function(caller, event) {
+
+		var $coverImage = this.getHtmlElement().find('.currentCoverImage')
+			.addClass('changed');
+
+		$coverImage.find('img').remove();
+		$coverImage.find('.coverImageMessage').html(
+				/** @type {string} */ (this.coverImageMessage_));
+	};
+
+
 /** @param {jQuery} $ jQuery closure. */
 }(jQuery));
diff --git a/lib/pkp b/lib/pkp
diff --git a/locale/en_US/locale.xml b/locale/en_US/locale.xml
@@ -15,8 +15,8 @@
 	<!-- General monograph keys -->
 	<message key="monograph.audience">Audience</message>
 	<message key="monograph.coverImage">Cover Image</message>
-	<message key="monograph.coverImage.uploadInstructions">Make sure that the image height is not bigger than 150% of it's width, otherwise the carousel will not show the entire cover.</message>
 	<message key="monograph.currentCoverImage">Current Image</message>
+	<message key="monograph.currentCoverImageReload">Save your changes to view the new cover image.</message>
 	<message key="monograph.audience.rangeQualifier">Audience Range Qualifier</message>
 	<message key="monograph.audience.rangeFrom">Audience Range (from)</message>
 	<message key="monograph.audience.rangeTo">Audience Range (to)</message>

diff --git a/plugins/importexport/users/templates/index.tpl b/plugins/importexport/users/templates/index.tpl
@@ -48,7 +48,7 @@
 				<input type="hidden" name="temporaryFileId" id="temporaryFileId" value="" />
 				{fbvFormArea id="file"}
 					{fbvFormSection title="common.file"}
-						<div id="plupload"></div>
+						{include file="controllers/fileUploadContainer.tpl" id="plupload"}
 					{/fbvFormSection}
 				{/fbvFormArea}
 

diff --git a/templates/controllers/grid/settings/category/form/categoryForm.tpl b/templates/controllers/grid/settings/category/form/categoryForm.tpl
@@ -18,7 +18,12 @@
 				$uploader: $('#plupload'),
 				uploaderOptions: {ldelim}
 					uploadUrl: {url|json_encode op="uploadImage" escape=false},
-					baseUrl: {$baseUrl|json_encode}
+					baseUrl: {$baseUrl|json_encode},
+					filters: {ldelim}
+						mime_types : [
+							{ldelim} title : "Image files", extensions : "jpg,jpeg,png" {rdelim}
+						]
+					{rdelim}
 				{rdelim}
 			{rdelim}
 		);
@@ -28,19 +33,6 @@
 <form class="pkp_form" id="categoryForm" method="post" action="{url router=$smarty.const.ROUTE_COMPONENT component="grid.settings.category.CategoryCategoryGridHandler" op="updateCategory" categoryId=$categoryId}">
 	{include file="controllers/notification/inPlaceNotification.tpl" notificationId="categoryFormNotification"}
 
-	{fbvFormArea id="file"}
-		{fbvFormSection title="monograph.coverImage"}
-			<div id="plupload"></div>
-		{/fbvFormSection}
-	{/fbvFormArea}
-	{* Container for uploaded file *}
-	<input type="hidden" name="temporaryFileId" id="temporaryFileId" value="" />
-
-	{if $image}
-		{translate|assign:"altTitle" key="monograph.currentCoverImage"}
-		<img class="pkp_helpers_container_center" height="{$image.thumbnailHeight}" width="{$image.thumbnailWidth}" src="{url router=$smarty.const.ROUTE_PAGE page="catalog" op="thumbnail" type="category" id=$categoryId}" alt="{$altTitle|escape}" />
-	{/if}
-
 	{fbvFormArea id="categoryDetails"}
 
 		<h3>{translate key="grid.category.categoryDetails"}</h3>
@@ -53,6 +45,13 @@
 			{fbvElement type="select" id="parentId" from=$rootCategories selected=$parentId translate=false disabled=$cannotSelectChild}
 		{/fbvFormSection}
 
+		{fbvFormSection title="grid.category.path" required=true for="path"}
+			{fbvElement type="text" id="path" value=$path size=$smarty.const.SMALL maxlength="32"}
+			{url|assign:"sampleUrl" router=$smarty.const.ROUTE_PAGE page="catalog" op="category" path="path"}
+			{** FIXME: is this class instruct still the right one? **}
+			<span class="instruct">{translate key="grid.category.urlWillBe" sampleUrl=$sampleUrl}</span>
+		{/fbvFormSection}
+
 		{fbvFormSection title="grid.category.description" for="context"}
 			{fbvElement type="textarea" multilingual="true" id="description" value=$description rich=true}
 		{/fbvFormSection}
@@ -61,12 +60,18 @@
 			{fbvElement type="select" id="sortOption" from=$sortOptions selected=$sortOption translate=false}
 		{/fbvFormSection}
 
-		{fbvFormSection title="grid.category.path" required=true for="path"}
-			{fbvElement type="text" id="path" value=$path size=$smarty.const.SMALL maxlength="32"}
-			{url|assign:"sampleUrl" router=$smarty.const.ROUTE_PAGE page="catalog" op="category" path="path"}
-			{** FIXME: is this class instruct still the right one? **}
-			<span class="instruct">{translate key="grid.category.urlWillBe" sampleUrl=$sampleUrl}</span>
+		{fbvFormSection title="monograph.coverImage"}
+			{include file="controllers/fileUploadContainer.tpl" id="plupload"}
+			<input type="hidden" name="temporaryFileId" id="temporaryFileId" value="" />
 		{/fbvFormSection}
+
+		{if $image}
+			{fbvFormSection}
+				{translate|assign:"altTitle" key="monograph.currentCoverImage"}
+				<img class="pkp_helpers_container_center" height="{$image.thumbnailHeight}" width="{$image.thumbnailWidth}" src="{url router=$smarty.const.ROUTE_PAGE page="catalog" op="thumbnail" type="category" id=$categoryId}" alt="{$altTitle|escape}" />
+			{/fbvFormSection}
+		{/if}
+
 		{fbvFormButtons}
 
 	{/fbvFormArea}

diff --git a/templates/controllers/grid/settings/series/form/seriesForm.tpl b/templates/controllers/grid/settings/series/form/seriesForm.tpl
@@ -18,7 +18,12 @@
 				$uploader: $('#plupload'),
 				uploaderOptions: {ldelim}
 					uploadUrl: {url|json_encode op="uploadImage" escape=false},
-					baseUrl: {$baseUrl|json_encode}
+					baseUrl: {$baseUrl|json_encode},
+					filters: {ldelim}
+						mime_types : [
+							{ldelim} title : "Image files", extensions : "jpg,jpeg,png" {rdelim}
+						]
+					{rdelim}
 				{rdelim}
 			{rdelim}
 		);

diff --git a/templates/controllers/tab/catalogEntry/form/catalogMetadataFormFields.tpl b/templates/controllers/tab/catalogEntry/form/catalogMetadataFormFields.tpl
@@ -6,19 +6,26 @@
  * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
  *
  *}
+{capture assign="coverImageMessage"}{translate key="monograph.currentCoverImageReload"}{/capture}
 <script type="text/javascript">
 	$(function() {ldelim}
 		// Attach the form handler.
 		$('#catalogMetadataEntryForm').pkpHandler(
 			'$.pkp.controllers.catalog.form.CatalogMetadataFormHandler',
 			{ldelim}
 				trackFormChanges: true,
-				$uploader: $('#plupload_catalogMetadata'),
+				$uploader: $('#plupload'),
 				uploaderOptions: {ldelim}
 					uploadUrl: {url|json_encode router=$smarty.const.ROUTE_COMPONENT component="tab.catalogEntry.CatalogEntryTabHandler" op="uploadCoverImage" escape=false stageId=$stageId submissionId=$submissionId},
-					baseUrl: {$baseUrl|json_encode}
+					baseUrl: {$baseUrl|json_encode},
+					filters: {ldelim}
+						mime_types : [
+							{ldelim} title : "Image files", extensions : "jpg,jpeg,png" {rdelim}
+						]
+					{rdelim}
 				{rdelim},
-				arePermissionsAttached: {if $arePermissionsAttached}true{else}false{/if}
+				arePermissionsAttached: {if $arePermissionsAttached}true{else}false{/if},
+				coverImageMessage: "{$coverImageMessage|escape:"javascript"}"
 			{rdelim}
 		);
 	{rdelim});
@@ -51,12 +58,12 @@
 	{/fbvFormArea}
 
 	{fbvFormSection title="monograph.coverImage"}
-		<div class="pkp_help">{translate key="monograph.coverImage.uploadInstructions"}</div>
-		<div id="plupload_catalogMetadata" class="pkp_helpers_threeQuarter pkp_helpers_align_right"></div>
-		<div class="pkp_helpers_align_left">
+		<div class="currentCoverImage">
 			{capture assign="altTitle"}{translate key="monograph.currentCoverImage"}{/capture}
 			<img height="{$coverImage.thumbnailHeight}" width="{$coverImage.thumbnailWidth}" src="{url router=$smarty.const.ROUTE_COMPONENT component="submission.CoverHandler" op="thumbnail" submissionId=$submissionId random=$submissionId|uniqid}" alt="{$altTitle|escape}" />
+			<span class="coverImageMessage description"></span>
 		</div>
+		{include file="controllers/fileUploadContainer.tpl" id="plupload"}
 	{/fbvFormSection}
 
 	<input type="hidden" name="temporaryFileId" id="temporaryFileId" value="" />

diff --git a/templates/management/series.tpl b/templates/management/series.tpl
@@ -17,9 +17,4 @@
 <form class="pkp_form" id="seriesGridFormContainer">
 	{url|assign:seriesGridUrl router=$smarty.const.ROUTE_COMPONENT component="grid.settings.series.SeriesGridHandler" op="fetchGrid" escape=false}
 	{load_url_in_div id="seriesGridContainer" url=$seriesGridUrl}
-	{if !$hideClose}
-		<div class="pkp_helpers_align_right">
-			{fbvElement type="button" label="common.close" id="cancelFormButton"}
-		</div>
-	{/if}
 </form>
diff --git a/templates/management/settings/press.tpl b/templates/management/settings/press.tpl
@@ -29,8 +29,8 @@
 		<li><a name="contact" href="{url router=$smarty.const.ROUTE_COMPONENT component="tab.settings.PressSettingsTabHandler" op="showTab" tab="contact"}">{translate key="about.contact"}</a></li>
 		<li><a name="policies" href="{url router=$smarty.const.ROUTE_COMPONENT component="tab.settings.PressSettingsTabHandler" op="showTab" tab="policies"}">{translate key="about.policies"}</a></li>
 		<li><a name="guidelines" href="{url router=$smarty.const.ROUTE_COMPONENT component="tab.settings.PressSettingsTabHandler" op="showTab" tab="guidelines"}">{translate key="about.guidelines"}</a></li>
-		<li><a name="series" href="{url router=$smarty.const.ROUTE_COMPONENT component="tab.settings.PressSettingsTabHandler" op="showTab" tab="series" hideClose="true"}">{translate key="series.series"}</a></li>
-		<li><a name="categories" href="{url router=$smarty.const.ROUTE_COMPONENT component="tab.settings.PressSettingsTabHandler" op="showTab" tab="categories" hideClose="true"}">{translate key="grid.category.categories"}</a></li>
+		<li><a name="series" href="{url router=$smarty.const.ROUTE_COMPONENT component="tab.settings.PressSettingsTabHandler" op="showTab" tab="series"}">{translate key="series.series"}</a></li>
+		<li><a name="categories" href="{url router=$smarty.const.ROUTE_COMPONENT component="tab.settings.PressSettingsTabHandler" op="showTab" tab="categories"}">{translate key="grid.category.categories"}</a></li>
 		<li><a name="affiliationAndSupport" href="{url router=$smarty.const.ROUTE_COMPONENT component="tab.settings.PressSettingsTabHandler" op="showTab" tab="affiliationAndSupport"}">{translate key="manager.affiliationAndSupport"}</a></li>
 	</ul>
 </div>
+1 −1		classes/controllers/grid/users/reviewer/PKPReviewerGridHandler.inc.php
+0 −1		classes/controllers/tab/settings/SettingsTabHandler.inc.php
+10 −1		classes/mail/MailTemplate.inc.php
+13 −8		classes/mail/SubmissionMailTemplate.inc.php
+2 −0		classes/user/form/PublicProfileForm.inc.php
+70 −62		composer.lock
+1 −1		controllers/grid/users/reviewer/form/ReviewReminderForm.inc.php
+1 −1		controllers/grid/users/reviewer/form/ReviewerForm.inc.php
+4 −4		controllers/grid/users/reviewer/form/ThankReviewerForm.inc.php
+2 −1		controllers/grid/users/reviewer/form/UnassignReviewerForm.inc.php
+1 −1		controllers/grid/users/stageParticipant/PKPStageParticipantGridHandler.inc.php
+6 −2		controllers/tab/user/ProfileTabHandler.inc.php
+5 −1		controllers/wizard/fileUpload/PKPFileUploadWizardHandler.inc.php
+138 −38		js/controllers/UploaderHandler.js
+2 −3		js/controllers/form/FileUploadFormHandler.js
+32 −14		js/controllers/wizard/WizardHandler.js
+39 −3		js/controllers/wizard/fileUpload/FileUploadWizardHandler.js
+124 −52		js/controllers/wizard/fileUpload/form/FileUploadFormHandler.js
+4 −0		locale/en_US/common.xml
+1 −0		locale/en_US/grid.xml
+0 −76		plugins/importexport/users/templates/index.tpl
+5 −0		styles/controllers/modal.less
+84 −129		styles/controllers/plupload.less
+64 −5		templates/controllers/fileUploadContainer.tpl
+0 −58		templates/controllers/informationCenter/newFileUploadNoteForm.tpl
+0 −1		templates/controllers/notification/inPlaceNotificationContent.tpl
+7 −0		templates/controllers/tab/settings/form/newFileUploadForm.tpl
+6 −1		templates/controllers/tab/settings/form/newImageFileUploadForm.tpl
+1 −1		templates/controllers/wizard/fileUpload/form/fileUploadForm.tpl
+28 −14		templates/user/publicProfileForm.tpl
+1 −0		tests/PKPContentBaseTestCase.inc.php
+2 −4		tests/WebTestCase.inc.php
+1 −1		tools/buildjs.sh
+30 −5		tools/closure-externs.js