Commit dbd40587 authored by Rafael Ostertag's avatar Rafael Ostertag
Browse files

qfq-bs.css.less: Tweaked less. Added new class for spinner. Changed display...

qfq-bs.css.less: Tweaked less. Added new class for spinner. Changed display type of input[type=file].
FileUpload.js: every callback will be called with the originating file input element as first parameter.
QfqForm.js: Add spinner on upload.
parent 6e527318
......@@ -62,15 +62,15 @@ if (!QfqNS) {
* @private
*/
n.FileUpload.prototype.setupOnChangeHandler = function () {
$(this.formSelector + " :file").on('change', this.handleFileUpload.bind(this));
$(this.formSelector + " :file").on('change', this.performFileUpload.bind(this));
};
/**
* @private
* @param event
*/
n.FileUpload.prototype.handleFileUpload = function (event) {
this.fileUploadStartCallbacks.call(event);
n.FileUpload.prototype.performFileUpload = function (event) {
this.fileUploadStartCallbacks.call(event.target);
var data = this.prepareData(event.target);
......@@ -82,8 +82,8 @@ if (!QfqNS) {
processData: false,
contentType: false
})
.done(this.ajaxSuccessHandler.bind(this))
.fail(this.ajaxErrorHandler.bind(this));
.done(this.ajaxSuccessHandler.bind(this, event.target))
.fail(this.ajaxErrorHandler.bind(this, event.target));
};
n.FileUpload.prototype.prepareData = function (htmlFileInput) {
......@@ -110,9 +110,9 @@ if (!QfqNS) {
* @param jqXHR
*/
n.FileUpload.prototype.ajaxSuccessHandler = function (data, textStatus, jqXHR) {
this.fileUploadSuccessCallbacks.call(data, textStatus);
this.fileUploadEndCallbacks.call(this);
n.FileUpload.prototype.ajaxSuccessHandler = function (uploadTriggeredBy, data, textStatus, jqXHR) {
this.fileUploadSuccessCallbacks.call(uploadTriggeredBy, data, textStatus);
this.fileUploadEndCallbacks.call(uploadTriggeredBy);
};
/**
......@@ -121,9 +121,9 @@ if (!QfqNS) {
* @param textStatus
* @param errorThrown
*/
n.FileUpload.prototype.ajaxErrorHandler = function (jqXHR, textStatus, errorThrown) {
this.fileUploadErrorCallbacks.call(textStatus, errorThrown);
this.fileUploadEndCallbacks.call(this);
n.FileUpload.prototype.ajaxErrorHandler = function (uploadTriggeredBy, jqXHR, textStatus, errorThrown) {
this.fileUploadErrorCallbacks.call(uploadTriggeredBy, textStatus, errorThrown);
this.fileUploadEndCallbacks.call(uploadTriggeredBy);
};
......
......@@ -38,6 +38,8 @@ if (!QfqNS) {
this.setupFormUpdateHandler();
this.fileUploader = new QfqNS.FileUpload('#' + this.formId, this.fileUploadTo, this.getSip());
this.fileUploader.addFileUploadStartHandler(this.startUploadHandler);
this.fileUploader.addFileUploadEndHandler(this.endUploadHandler);
};
n.QfqForm.prototype.setBsTabs = function (bsTabs) {
......@@ -527,6 +529,25 @@ if (!QfqNS) {
}
};
/**
* @private
* @param event
*/
n.QfqForm.prototype.startUploadHandler = function (triggeredBy) {
$(triggeredBy).after(
$('<i>').addClass('spinner')
);
};
/**
* @private
* @param event
*/
n.QfqForm.prototype.endUploadHandler = function (triggeredBy) {
var $siblings = $(triggeredBy).siblings();
$siblings.filter("i").remove();
};
/**
* Retrieve SIP as stored in hidden input field.
*
......
#qfqAlertContainer {
@spinner : url(data:image/gif;base64,R0lGODlhEAAQAKIAAP///9bW1szMzL29vXt7e3Nzc2ZmZv4BAiH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBwAHACwAAAAAEAAQAAADPAi6QRQrymJMkcwFatuLXOFt1bWEYBmNq6awGDCicUhjIYzBwTBAmc9CQBSkLJGiYKZi+EgdV60ZCwIjCQAh+QQFBwAHACwAAAYABgAIAAADE3gz1/LCwaYYbYTQYkxpnEdlRwIAIfkEBQcABwAsAAACAAYACAAAAxN4OqMnUKgoVzuEuGJMUZznZE4CACH5BAUHAAcALAIAAAAIAAYAAAMUeKozqyKKQ8iRohhTTjsa91DWkwAAIfkEBQcABwAsBgAAAAgABgAAAxR4RNddxhR3oDxjtHWEF9QHUtmRAAAh+QQFBwAHACwKAAIABgAIAAADFHhE12WmOCjbaviMgYUXzQc225EAACH5BAUHAAcALAoABgAGAAgAAAMTeEqkV8YUBaVjagwnulDel21KAgAh+QQFBwAHACwGAAoACAAGAAADFHiqRKvFmHLGOHGKLU47XPdYz5EAADs=);
@alert_container_id : #qfqAlertContainer;
@spinner_class : spinner;
@{alert_container_id} {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
.alert {
margin-bottom: 2px;
}
}
#qfqAlertContainer .alert {
margin-bottom: 2px;
i.@{spinner_class} {
display: inline-block;
background: @spinner no-repeat;
//height: image-height(@spinner);
//width: image-width(@spinner);
height: 16px;
width: 16px;
}
/*inline elements in horizontal mode are too much left*/
.form-horizontal .form-inline .form-group {
margin: 0;
}
.form-horizontal {
.form-inline {
.form-group {
margin: 0;
}
}
.form-inline .control-label {
font-weight: normal;
}
/* reduce unwished padding-top offset */
.checkbox {
padding-top: 0;
}
/* reduce unwished padding-top offset */
.form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline {
padding-top: 0;
.checkbox-inline {
padding-top: 0;
margin-top: -4px;
}
.radio {
padding-top: 0;
}
.radio-inline {
padding-top: 0;
margin-top: -4px;
}
input[type=file] {
display: inline;
}
}
/* checkbox, inline oriented, have a different unwished offset */
.form-horizontal .checkbox-inline, .form-horizontal .radio-inline {
margin-top: -4px;
}
\ No newline at end of file
.form-inline {
.control-label {
font-weight: normal;
}
}
......@@ -630,7 +630,7 @@
<label for="fileupload" class="control-label">File upload</label>
</div>
<div class="col-md-6">
<input id="fileupload" type="file" name="fileupload" class="form-control">
<input id="fileupload" type="file" name="fileupload">
</div>
<div class=" col-md-4">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment