Permalink
Browse files

add progress bar, debug information, focus input on show

  • Loading branch information...
1 parent a5606d9 commit 3569a92a5cfee5cb5429c2500a7601ad4b43db6e Alex Warhawk committed Dec 27, 2012
Showing with 50 additions and 4 deletions.
  1. +4 −0 index.php
  2. +40 −3 js/fm.js
  3. +6 −1 tpl.html
View
@@ -1,5 +1,9 @@
<?php
+// enable debug
+ini_set('display_errors', 'On');
+error_reporting(E_ALL | E_STRICT);
+
class Fm {
private $base_path = 'content';
View
@@ -4,7 +4,7 @@ var BASE_PATH = 'content';
* Add a new message to the messagebox.
*/
function add_msg(msg, type) {
- $('div#msgbox').append(
+ $('div#msgbox').prepend(
$('<div />').addClass('alert').addClass(type).append(
'<a class="close" data-dismiss="alert">&times;</a>',
msg
@@ -26,6 +26,9 @@ function add_result(result) {
// add msg
add_msg(result.msg, (result.status == 'ok') ? 'alert-success' : 'alert-error');
+ // hide progressbar
+ $('div#progress').hide();
+
// reload fm
refresh();
}
@@ -43,20 +46,40 @@ function request(data, success, isFormData) {
cache: false,
dataType: 'json',
success: success,
- error: function (jqXHR, status) {err_msg(status, 'AJAX');}
+ error: function (jqXHR, status) {
+ err_msg(status, 'AJAX');
+ }
}
// set options for formdata
if (isFormData === true) {
options.contentType = false;
options.processData = false;
+
+ // progressbar on upload
+ options.xhr = function() {
+ var x = $.ajaxSettings.xhr();
+ if (x.upload)
+ x.upload.addEventListener('progress', progressBar, false);
+ return x;
+ }
}
// do request
$.ajax(options);
}
/**
+ * progress bar callback for upload
+ */
+function progressBar(event) {
+ var done = event.position || event.loaded;
+ var total = event.totalSize || event.total;
+ var per = ( Math.floor(done / total * 1000) / 10 ) + '%';
+ $('div#progress > div.bar').css('width', per).text(per);
+}
+
+/**
* Request folder content from server.
*/
function browse(path) {
@@ -249,13 +272,23 @@ function action_show_remove_modal(event) {
* Show 'upload-modal'.
*/
function action_show_upload_modal(event) {
+ // set fun
+ $('div#upload input#upload-fun').val('upload');
// set path
$('div#upload input#upload-path').val($('div#filemanager').data('path'));
// show modal
$('div#upload').modal('show');
}
+// focus field on shown event
+$('div#new').on('shown', function(event) {
+ $('div#new input#new-target').focus();
+});
+$('div#move').on('shown', function(event) {
+ $('div#move input#move-destination').focus();
+});
+
// register modal buttons
$('div#new a.submit').click(function(event) {
request(
@@ -290,9 +323,13 @@ $('div#upload a.submit').click(function(event) {
// submit form in background
request(
new FormData($('div#upload form')[0]),
- msgbox.add_result,
+ add_result,
true
);
+
+ // show progress bar
+ $('div#progress div.bar').css('width', 0);
+ $('div#progress').show();
});
// clear upload modal on hide
View
@@ -32,6 +32,11 @@
<li><i class="icon-remove"></i> Remove</li>
</ul>
+ <!-- progress bar -->
+ <div id="progress" class="progress progress-striped active hide">
+ <div class="bar"></div>
+ </div>
+
<!-- message box -->
<div id="msgbox"></div>
@@ -89,7 +94,7 @@
</div>
<div class="modal-body">
<form method="post" enctype="multipart/form-data">
- <input type="hidden" name="fun" value="upload" />
+ <input type="hidden" name="fun" id="upload-fun" />
<input type="hidden" name="path" id="upload-path" />
<input type="file" name="files[]" multiple /><br />
<small>You can select multiple files.</small>

0 comments on commit 3569a92

Please sign in to comment.