Skip to content

Commit

Permalink
Add box uploader
Browse files Browse the repository at this point in the history
  • Loading branch information
@asika32764
asika32764 committed Mar 27, 2017
1 parent 58ccc98 commit 430527b
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 65 deletions.
3 changes: 1 addition & 2 deletions administrator/language/en-GB/en-GB.plg_installer_packageinstaller.ini
View file
Expand Up @@ -3,12 +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_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."
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"
154 changes: 91 additions & 63 deletions plugins/installer/packageinstaller/tmpl/default.php
View file
Expand Up @@ -32,36 +32,42 @@

// 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 (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 = '{$return}';
if (returnUrl) {
url += '&return=' + returnUrl;
}
// Create drag cover first
dragZone.append(cover);
button.on('click', function(e) {
fileInput.click();
});
fileInput.on('change', function (e) {
Joomla.submitbuttonpackage();
});
dragZone.on('dragenter', function(e) {
e.preventDefault();
e.stopPropagation();
if (!tabContent.hasClass('active')) {
return;
}
cover.fadeIn();
dragZone.addClass('hover');
return false;
});
Expand All @@ -71,19 +77,15 @@
e.preventDefault();
e.stopPropagation();
if (!tabContent.hasClass('active')) {
return;
}
cover.fadeIn();
dragZone.addClass('hover');
return false;
});
cover.on('dragleave', function(e) {
dragZone.on('dragleave', function(e) {
e.preventDefault();
e.stopPropagation();
cover.fadeOut();
dragZone.removeClass('hover');
return false;
});
Expand All @@ -92,16 +94,7 @@
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();
dragZone.removeClass('hover');
var files = e.originalEvent.target.files || e.originalEvent.dataTransfer.files;
Expand Down Expand Up @@ -148,44 +141,79 @@
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;
padding: 5% 0;
/*height: 300px;*/
border: 2px dashed #999;
transition: all .2s;
/*display: table-cell;*/
/*vertical-align: middle;*/
}
#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%;
#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>
<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">
<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>
</div>

0 comments on commit 430527b

Please sign in to comment.