mirror/php-monstra
1
0
Fork 0
mirror of https://github.com/monstra-cms/monstra.git synced 2025-08-04 20:27:40 +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

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

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

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

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

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

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