Add Drag and Drop Installation with upload box for #14905 (#14924)

* Add drag & drop installation * Fix drag issue * Add more error message * Typo * CS * Style fix * Fix from review * Add return * Add `.` * Fix based on review * Add return url * Convert loading cover operation into object * MISC fixes * Fix indents * Add box uploader * CS * Styling * Move return val out * Moved token out
joomla · Mar 30, 2017 · e071996 · e071996
1 parent 17a717c
commit e071996
Show file tree

Hide file tree

Showing 7 changed files with 233 additions and 22 deletions.
diff --git a/administrator/components/com_installer/controllers/install.php b/administrator/components/com_installer/controllers/install.php
@@ -66,4 +66,25 @@ public function install()
 
 		$this->setRedirect($redirect_url);
 	}
+
+	/**
+	 * Install an extension from drag & drop ajax upload.
+	 *
+	 * @return  void
+	 *
+	 * @since   __DEPLOY_VERSION__
+	 */
+	public function ajax_upload()
+	{
+		$this->install();
+
+		$app = JFactory::getApplication();
+		$redirect = $this->redirect;
+
+		header('Content-Type: application/json');
+
+		echo new JResponseJson(array('redirect' => $redirect), $app->getUserState('com_installer.message'));
+
+		exit();
+	}
 }
diff --git a/administrator/components/com_installer/views/install/tmpl/default.php b/administrator/components/com_installer/views/install/tmpl/default.php
@@ -24,7 +24,7 @@
 		}
 		else
 		{
-			jQuery("#loading").css("display", "block");
+			JoomlaInstaller.showLoading();
 			
 			form.installtype.value = "url";
 			form.submit();
@@ -43,14 +43,26 @@
 	jQuery(document).ready(function($) {
 		var outerDiv = $("#installer-install");
 		
-		$("#loading")
-		.css("top", outerDiv.position().top - $(window).scrollTop())
-		.css("left", "0")
-		.css("width", "100%")
-		.css("height", "100%")
-		.css("display", "none")
-		.css("margin-top", "-10px");
+		JoomlaInstaller.getLoadingOverlay()
+			.css("top", outerDiv.position().top - $(window).scrollTop())
+			.css("left", "0")
+			.css("width", "100%")
+			.css("height", "100%")
+			.css("display", "none")
+			.css("margin-top", "-10px");
 	});
+	
+	var JoomlaInstaller = {
+		getLoadingOverlay: function () {
+			return jQuery("#loading");
+		},
+		showLoading: function () {
+			this.getLoadingOverlay().css("display", "block");
+		},
+		hideLoading: function () {
+			this.getLoadingOverlay().css("display", "none");
+		}
+	};
 	'
 );
 

diff --git a/administrator/language/en-GB/en-GB.plg_editors_tinymce.ini b/administrator/language/en-GB/en-GB.plg_editors_tinymce.ini
@@ -9,7 +9,7 @@ PLG_TINY_CONFIG_TEXTFILTER_ACL_DESC="If on, the text filter from the Joomla Glob
 PLG_TINY_CONFIG_TEXTFILTER_ACL_LABEL="Use Joomla Text Filter"
 PLG_TINY_ERR_CUSTOMCSSFILENOTPRESENT="The file name %s was entered in the TinyMCE Custom CSS field. This file could not be found in the default template folder. No styles are available."
 PLG_TINY_ERR_EDITORCSSFILENOTPRESENT="Could not find the file 'editor.css' in the template or templates/system folder. No styles are available."
-PLG_TINY_ERR_UNSUPPORTEDBROWSER="Drag and drop image upload is not available for your browser. Please consider using a fully HTML5 compatible browser"
+PLG_TINY_ERR_UNSUPPORTEDBROWSER="Drag and drop image upload is not available for your browser. Please consider using a fully HTML5 compatible browser."
 PLG_TINY_FIELD_ADVIMAGE_DESC="Turn on/off a more advanced image dialog."
 PLG_TINY_FIELD_ADVIMAGE_LABEL="Advanced Image"
 PLG_TINY_FIELD_ADVLIST_DESC="Turn on/off to enable to set number formats and bullet types in ordered and unordered lists."

diff --git a/administrator/language/en-GB/en-GB.plg_installer_packageinstaller.ini b/administrator/language/en-GB/en-GB.plg_installer_packageinstaller.ini
@@ -3,9 +3,11 @@
 ; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
 ; Note : All ini files need to be saved as UTF-8
 
+PLG_INSTALLER_PACKAGEINSTALLER_DRAG_FILE_HERE="Drag and drop file here to upload."
 PLG_INSTALLER_PACKAGEINSTALLER_EXTENSION_PACKAGE_FILE="Extension package file"
 PLG_INSTALLER_PACKAGEINSTALLER_NO_PACKAGE="Please select a package to upload"
 PLG_INSTALLER_PACKAGEINSTALLER_PLUGIN_XML_DESCRIPTION="This plugin allows you to install packages from your local computer."
+PLG_INSTALLER_PACKAGEINSTALLER_SELECT_FILE="Or browse for file"
 PLG_INSTALLER_PACKAGEINSTALLER_UPLOAD_INSTALL_JOOMLA_EXTENSION="Upload & Install Joomla Extension"
 PLG_INSTALLER_PACKAGEINSTALLER_UPLOAD_PACKAGE_FILE="Upload Package File"
 PLG_INSTALLER_PACKAGEINSTALLER_UPLOAD_AND_INSTALL="Upload & Install"
diff --git a/plugins/installer/folderinstaller/tmpl/default.php b/plugins/installer/folderinstaller/tmpl/default.php
@@ -25,7 +25,7 @@
 		}
 		else
 		{
-			jQuery("#loading").css("display", "block");
+			JoomlaInstaller.showLoading();
 			form.installtype.value = "folder"
 			form.submit();
 		}

diff --git a/plugins/installer/packageinstaller/tmpl/default.php b/plugins/installer/packageinstaller/tmpl/default.php
@@ -23,24 +23,200 @@
 		}
 		else
 		{
-			jQuery("#loading").css("display", "block");
+			JoomlaInstaller.showLoading();
 			form.installtype.value = "upload"
 			form.submit();
 		}
 	};
 ');
+
+// Drag and Drop installation scripts
+$token = JSession::getFormToken();
+$return = JFactory::getApplication()->input->getBase64('return');
+
+// Drag-drop installation
+JFactory::getDocument()->addScriptDeclaration(
+<<<JS
+	jQuery(document).ready(function($) {
+		
+		if (typeof FormData === 'undefined') {
+			$('#legacy-uploader').show();
+			$('#uploader-wrapper').hide();
+			return;
+		}
+
+		var dragZone  = $('#dragarea');
+		var fileInput = $('#install_package');
+		var button    = $('#select-file-button');
+		var url       = 'index.php?option=com_installer&task=install.ajax_upload';
+		var returnUrl = $('#installer-return').val();
+		var token     = $('#installer-token').val();
+
+		if (returnUrl) {
+			url += '&return=' + returnUrl;
+		}
+		
+		button.on('click', function(e) {
+			fileInput.click();
+		});
+		
+		fileInput.on('change', function (e) {
+			Joomla.submitbuttonpackage();
+		});
+
+		dragZone.on('dragenter', function(e) {
+			e.preventDefault();
+			e.stopPropagation();
+			
+			dragZone.addClass('hover');
+			
+			return false;
+		});
+
+		// Notify user when file is over the drop area
+		dragZone.on('dragover', function(e) {
+			e.preventDefault();
+			e.stopPropagation();
+
+			dragZone.addClass('hover');
+
+			return false;
+		});
+
+		dragZone.on('dragleave', function(e) {
+			e.preventDefault();
+			e.stopPropagation();
+			dragZone.removeClass('hover');
+
+			return false;
+		});
+
+		dragZone.on('drop', function(e) {
+			e.preventDefault();
+			e.stopPropagation();
+
+			dragZone.removeClass('hover');
+
+			var files = e.originalEvent.target.files || e.originalEvent.dataTransfer.files;
+
+			if (!files.length) {
+				return;
+			}
+
+			var file = files[0];
+
+			var data = new FormData;
+			data.append('install_package', file);
+			data.append('installtype', 'upload');
+			data.append(token, 1);
+
+			JoomlaInstaller.showLoading();
+			
+			$.ajax({
+				url: url,
+				data: data,
+				type: 'post',
+				processData: false,
+				cache: false,
+				contentType: false
+			}).done(function (res) {
+				if (res.success) {
+					if (res.data.redirect) {
+						location.href = res.data.redirect;
+					} else {
+						location.href = 'index.php?option=com_installer&view=install';
+					}
+				} else {
+					JoomlaInstaller.hideLoading();
+					alert(res.message);
+				}
+			}).error (function (error) {
+				JoomlaInstaller.hideLoading();
+				alert(error.statusText);
+			});
+		});
+	});
+JS
+);
+
+JFactory::getDocument()->addStyleDeclaration(
+<<<CSS
+	#dragarea {
+		background-color: #fafbfc;
+		border: 1px dashed #999;
+		box-sizing: border-box;
+		padding: 5% 0;
+		transition: all 0.2s ease 0s;
+		width: 100%;
+	}
+	
+	#dragarea p.lead {
+		color: #999;
+	}
+
+	#upload-icon {
+		font-size: 48px;
+		width: auto;
+		height: auto;
+		margin: 0;
+		line-height: 175%;
+		color: #999;
+		transition: all .2s;
+	}
+	
+	#dragarea.hover {
+		border-color: #666;
+		background-color: #eee;
+	}
+	
+	#dragarea.hover #upload-icon,
+	#dragarea p.lead {
+		color: #666;
+	}
+CSS
+);
+
+$maxSize = JFilesystemHelper::fileUploadMaxSize();
 ?>
 <legend><?php echo JText::_('PLG_INSTALLER_PACKAGEINSTALLER_UPLOAD_INSTALL_JOOMLA_EXTENSION'); ?></legend>
-<div class="control-group">
-	<label for="install_package" class="control-label"><?php echo JText::_('PLG_INSTALLER_PACKAGEINSTALLER_EXTENSION_PACKAGE_FILE'); ?></label>
-	<div class="controls">
-		<input class="input_box" id="install_package" name="install_package" type="file" size="57" /><br>
-		<?php $maxSize = JHtml::_('number.bytes', JUtility::getMaxUploadSize()); ?>
-		<?php echo JText::sprintf('JGLOBAL_MAXIMUM_UPLOAD_SIZE_LIMIT', $maxSize); ?>
+
+<div id="uploader-wrapper">
+	<div id="dragarea" class="">
+		<div id="dragarea-content" class="text-center">
+			<p>
+				<span id="upload-icon" class="icon-upload"></span>
+			</p>
+			<p class="lead">
+				<?php echo JText::_('PLG_INSTALLER_PACKAGEINSTALLER_DRAG_FILE_HERE'); ?>
+			</p>
+			<p>
+				<button id="select-file-button" type="button" class="btn btn-success">
+					<span class="icon-copy"></span>
+					<?php echo JText::_('PLG_INSTALLER_PACKAGEINSTALLER_SELECT_FILE'); ?>
+				</button>
+			</p>
+			<p>
+				<?php echo JText::sprintf('JGLOBAL_MAXIMUM_UPLOAD_SIZE_LIMIT', $maxSize); ?>
+			</p>
+		</div>
+
 	</div>
 </div>
-<div class="form-actions">
-	<button class="btn btn-primary" type="button" id="installbutton_package" onclick="Joomla.submitbuttonpackage()">
-		<?php echo JText::_('PLG_INSTALLER_PACKAGEINSTALLER_UPLOAD_AND_INSTALL'); ?>
-	</button>
+
+<div id="legacy-uploader" style="display: none;">
+	<div class="control-group">
+		<label for="install_package" class="control-label"><?php echo JText::_('PLG_INSTALLER_PACKAGEINSTALLER_EXTENSION_PACKAGE_FILE'); ?></label>
+		<div class="controls">
+			<input class="input_box" id="install_package" name="install_package" type="file" size="57" /><br>
+			<?php echo JText::sprintf('JGLOBAL_MAXIMUM_UPLOAD_SIZE_LIMIT', $maxSize); ?>
+		</div>
+	</div>
+	<div class="form-actions">
+		<button class="btn btn-primary" type="button" id="installbutton_package" onclick="Joomla.submitbuttonpackage()">
+			<?php echo JText::_('PLG_INSTALLER_PACKAGEINSTALLER_UPLOAD_AND_INSTALL'); ?>
+		</button>
+	</div>
+
+	<input id="installer-return" name="return" type="hidden" value="<?php echo $return; ?>" />
+	<input id="installer-token" name="return" type="hidden" value="<?php echo $token; ?>" />
 </div>
diff --git a/plugins/installer/urlinstaller/tmpl/default.php b/plugins/installer/urlinstaller/tmpl/default.php
@@ -22,7 +22,7 @@
 		}
 		else
 		{
-			jQuery("#loading").css("display", "block");
+			JoomlaInstaller.showLoading();
 			form.installtype.value = "url"
 			form.submit();
 		}