Add drag & drop installation

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();
+	}
 }

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");
+	    }
+	};
 	'
 );
 

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."

administrator/language/en-GB/en-GB.plg_installer_packageinstaller.ini

@@ -3,6 +3,9 @@
 ; 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_ERR_UNSUPPORTEDBROWSER="Drag and drop file upload is not available for your browser. Please consider using a fully HTML5 compatible browser."
+PLG_INSTALLER_PACKAGEINSTALLER_DRAG_FILE_HERE="Drag and drop file here to upload."
+PLG_INSTALLER_PACKAGEINSTALLER_DRAG_FILE_NOTICE="Browse for the file or drag and drop it here."
 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."

plugins/installer/folderinstaller/tmpl/default.php

@@ -25,7 +25,7 @@
 		}
 		else
 		{
-			jQuery("#loading").css("display", "block");
+			JoomlaInstaller.showLoading();
 			form.installtype.value = "folder"
 			form.submit();
 		}

plugins/installer/packageinstaller/tmpl/default.php

@@ -23,14 +23,159 @@
 		}
 		else
 		{
-			jQuery("#loading").css("display", "block");
+			JoomlaInstaller.showLoading();
 			form.installtype.value = "upload"
 			form.submit();
 		}
 	};
 ');
+
+// Drag and Drop installation scripts
+$token = JSession::getFormToken();
+$text = JText::_('PLG_INSTALLER_PACKAGEINSTALLER_DRAG_FILE_HERE');
+JText::script('PLG_INSTALLER_PACKAGEINSTALLER_DRAG_ERR_UNSUPPORTEDBROWSER');
+$return = JFactory::getApplication()->input->getBase64('return');
+
+// Drag-drop installation
+JFactory::getDocument()->addScriptDeclaration(
+<<<JS
+    jQuery(document).ready(function($) {
+        var dragZone   = $('body');
+        var tabContent = $('#package');
+        var cover      = $('<div id="dragarea" style="display: none;"></div>');
+        var url        = 'index.php?option=com_installer&task=install.ajax_upload';
+        var returnUrl  = '{$return}';
+
+        if (returnUrl) {
+            url += '&return=' + returnUrl;
+        }
+
+        // Create drag cover first
+        dragZone.append(cover);
+
+        dragZone.on('dragenter', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (!tabContent.hasClass('active')) {
+                return;
+            }
+
+            cover.fadeIn();
+
+            return false;
+        });
+
+        // Notify user when file is over the drop area
+        dragZone.on('dragover', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (!tabContent.hasClass('active')) {
+                return;
+            }
+
+            cover.fadeIn();
+
+            return false;
+        });
+
+        cover.on('dragleave', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            cover.fadeOut();
+
+            return false;
+        });
+
+        dragZone.on('drop', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (!tabContent.hasClass('active')) {
+                return;
+            }
+
+            if (typeof FormData === 'undefined') {
+                Joomla.renderMessages({'error': [Joomla.JText._("COM_INSTALLER_DRAG_ERR_UNSUPPORTEDBROWSER")]});
+                return;
+            }
+
+            cover.fadeOut();
+
+            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 {
+        display: block;
+        background: rgba(255, 255, 255, .8);
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0.8;
+        -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
+        filter: alpha(opacity = 80);
+        overflow: hidden;
+    }
+
+    #dragarea::before {
+        /* Use CSS to inject text since a child element will trigger dragleave event */
+        content: "{$text}";
+        width: 100%;
+        display: block;
+        font-size: 36px;
+        text-align: center;
+        position: absolute;
+        top: 50%;
+    }
+CSS
+);
 ?>
 <legend><?php echo JText::_('PLG_INSTALLER_PACKAGEINSTALLER_UPLOAD_INSTALL_JOOMLA_EXTENSION'); ?></legend>
+<p class="lead"><?php echo JText::_('PLG_INSTALLER_PACKAGEINSTALLER_DRAG_FILE_NOTICE'); ?></p>
 <div class="control-group">
 	<label for="install_package" class="control-label"><?php echo JText::_('PLG_INSTALLER_PACKAGEINSTALLER_EXTENSION_PACKAGE_FILE'); ?></label>
 	<div class="controls">

plugins/installer/urlinstaller/tmpl/default.php

@@ -22,7 +22,7 @@
 		}
 		else
 		{
-			jQuery("#loading").css("display", "block");
+			JoomlaInstaller.showLoading();
 			form.installtype.value = "url"
 			form.submit();
 		}