mirror/php-monstra
1
0
Fork 0
mirror of https://github.com/monstra-cms/monstra.git synced 2025-07-31 18:30:20 +02:00
Code Issues Releases Wiki Activity

Uploading new plugins via the admin panel - fileuploader refactoring: drag&drop uploader multiple instances support #215

Browse Source
This commit is contained in:
metal_gvc
2014-02-14 17:21:18 +02:00
parent 1085953b3b
commit 7ca3946f8a
3 changed files with 40 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
plugins/box/filesmanager/js/fileuploader.js
View File

@@ -5,37 +5,44 @@ $.monstra.fileuploader = {
conf: {
uploadUrl: '',
csrf: '',
errorMsg: ''
errorMsg: '',
uploaderId: ''
},
_uploaderObj: null,
init: function(conf){
if (!conf.uploaderId) {
throw 'uploaderId not specified';
}
$.extend(this.conf, conf);
var area = $('#uploadArea');
area.on('dragenter', function(e){
this._uploaderObj = $('#'+ this.conf.uploaderId);
var area = this._uploaderObj.find('.upload-area');
area.off('dragenter.fuploader').on('dragenter.fuploader', function(e){
e.stopPropagation();
e.preventDefault();
$(this).addClass('upload-area-dragenter');
});
area.on('dragover', function(e){
area.off('dragover.fuploader').on('dragover.fuploader', function(e){
e.stopPropagation();
e.preventDefault();
});
area.on('drop', function(e){
area.off('drop.fuploader').on('drop.fuploader', function(e){
$(this).removeClass('upload-area-dragenter').removeClass('upload-area-dragover').addClass('upload-area-drop');
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;
$.monstra.fileuploader.uploadFileHandle(files, area);
});
$(document).on('dragover', function(e){
$(document).off('dragover.fuploader').on('dragover.fuploader', function(e){
e.stopPropagation();
e.preventDefault();
area.removeClass('upload-area-dragenter').removeClass('upload-area-drop').addClass('upload-area-dragover');
});
$(document).on('dragenter', function(e){
$(document).off('dragenter.fuploader').on('dragenter.fuploader', function(e){
e.stopPropagation();
e.preventDefault();
});
$(document).on('drop', function(e){
$(document).off('drop.fuploader').on('drop.fuploader', function(e){
e.stopPropagation();
e.preventDefault();
});
@@ -87,18 +94,18 @@ $.monstra.fileuploader = {
message : $.monstra.fileuploader.conf.errorMsg,
hideAfter: 3
});
$('#fuProgress').animate({ width: 0 }, 1);
$('#fuPlaceholder').show();
this._uploaderObj.find('.upload-progress').animate({ width: 0 }, 1);
this._uploaderObj.find('.upload-file-pholder').show();
}
});
},
setProgress: function(progress){
if (parseInt(progress) > 0) {
$('#fuPlaceholder').hide();
this._uploaderObj.find('.upload-file-pholder').hide();
}
var progressBarWidth = progress * $('#uploadArea').width() / 100;
$('#fuProgress').animate({ width: progressBarWidth }, 10);
var progressBarWidth = progress * this._uploaderObj.find('.upload-area').width() / 100;
this._uploaderObj.find('.upload-progress').animate({ width: progressBarWidth }, 10);
},
setFileNameSize: function(fname, fsize){
@@ -111,14 +118,14 @@ $.monstra.fileuploader = {
sizeStr = sizeKB.toFixed(2)+' KB';
}
$('#fileInfo').html(fname +' '+ sizeStr);
this._uploaderObj.find('.upload-file-info').html(fname +' '+ sizeStr);
}
};
$(document).ready(function(){
$val_fUploaderInit = $('#fUploaderInit').val();
if ($val_fUploaderInit !== undefined) {
$.monstra.fileuploader.init($.parseJSON($val_fUploaderInit));
$.monstra.fileuploader.init($.extend({}, {uploaderId:'DgDfileUploader'}, $.parseJSON($val_fUploaderInit)));
}
});

10
plugins/box/filesmanager/views/backend/index.view.php
View File

@@ -25,15 +25,17 @@
<a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
</div>
<div id="uploadArea" class="upload-area">
<div id="fuProgress" class="upload-progress"></div>
<div id="fuPlaceholder" class="upload-file-pholder"><?php echo __('Drop File Here', 'filesmanager'); ?></div>
<div id="DgDfileUploader">
<div class="upload-area">
<div class="upload-progress"></div>
<div class="upload-file-pholder"><?php echo __('Drop File Here', 'filesmanager'); ?></div>
</div>
<div id="fileInfo" class="upload-file-info"></div>
<div class="upload-file-info"></div>
<div class="btn btn-link file-size-max-upload">
<?php echo __('Maximum upload file size: :upload_max_filesize', 'pages', array(':upload_max_filesize' => $upload_max_filesize)); ?>
</div>
</div>
</div>
<div class="col-md-2">
<div class="pull-right">
<button class="btn btn-primary" data-toggle="modal" data-target="#createNewDirectory">

10
plugins/box/plugins/views/backend/index.view.php
View File

@@ -121,11 +121,13 @@
<span class="fileupload-preview"></span>
</div>
<div id="uploadArea" class="upload-area">
<div id="fuProgress" class="upload-progress"></div>
<div id="fuPlaceholder" class="upload-file-pholder"><?php echo __('Drop File Here', 'plugins'); ?></div>
<div id="DgDfileUploader">
<div class="upload-area">
<div class="upload-progress"></div>
<div class="upload-file-pholder"><?php echo __('Drop File Here', 'plugins'); ?></div>
</div>
<div class="upload-file-info"></div>
</div>
<div id="fileInfo" class="upload-file-info"></div>
</div>
</div>