Define spinner with a cfg object only once, then hide and show as needed.
Add a 'msg' parameter to the spinner function which adds a message to the spinner on show and a spinnerMsg() function which allows it to be changed while the spinner is showing.
This commit is contained in:
parent
f3e406dd5d
commit
66d9af42b6
|
@ -105,35 +105,45 @@ gui.updateState = function () {
|
||||||
$('#seq_cam_count_2').val(cpos).change();
|
$('#seq_cam_count_2').val(cpos).change();
|
||||||
$('#seq_proj_count_2').val(ppos).change();
|
$('#seq_proj_count_2').val(ppos).change();
|
||||||
};
|
};
|
||||||
gui.spinner = function (state) {
|
gui.spinnerCfg = {
|
||||||
var cfg = {
|
lines: 11, // The number of lines to draw
|
||||||
lines: 11, // The number of lines to draw
|
length: 15, // The length of each line
|
||||||
length: 15, // The length of each line
|
width: 7, // The line thickness
|
||||||
width: 7, // The line thickness
|
radius: 20, // The radius of the inner circle
|
||||||
radius: 20, // The radius of the inner circle
|
corners: 1, // Corner roundness (0..1)
|
||||||
corners: 1, // Corner roundness (0..1)
|
rotate: 0, // The rotation offset
|
||||||
rotate: 0, // The rotation offset
|
direction: 1, // 1: clockwise, -1: counterclockwise
|
||||||
direction: 1, // 1: clockwise, -1: counterclockwise
|
color: '#F2F2F1', // #rgb or #rrggbb or array of colors
|
||||||
color: '#F2F2F1', // #rgb or #rrggbb or array of colors
|
speed: 1, // Rounds per second
|
||||||
speed: 1, // Rounds per second
|
trail: 60, // Afterglow percentage
|
||||||
trail: 60, // Afterglow percentage
|
shadow: true, // Whether to render a shadow
|
||||||
shadow: true, // Whether to render a shadow
|
hwaccel: true, // Whether to use hardware acceleration
|
||||||
hwaccel: true, // Whether to use hardware acceleration
|
className: 'spinner', // The CSS class to assign to the spinner
|
||||||
className: 'spinner', // The CSS class to assign to the spinner
|
zIndex: 2e9, // The z-index (defaults to 2000000000)
|
||||||
zIndex: 2e9, // The z-index (defaults to 2000000000)
|
top: '50%', // Top position relative to parent
|
||||||
top: '50%', // Top position relative to parent
|
left: '50%' // Left position relative to parent
|
||||||
left: '50%' // Left position relative to parent
|
}
|
||||||
},
|
gui.spinner = function (state, msg = '') {
|
||||||
target,
|
var target,
|
||||||
spinner;
|
spinner;
|
||||||
if (state) {
|
if (msg !== '') {
|
||||||
target = document.getElementById('spinner');
|
gui.spinnerMsg(msg)
|
||||||
spinner = new Spinner(cfg).spin(target);
|
|
||||||
} else {
|
|
||||||
$('#spinner').hide();
|
|
||||||
$('#psinner').empty();
|
|
||||||
}
|
}
|
||||||
|
if (state && !$('#spinner').hasClass('created')) {
|
||||||
|
target = document.getElementById('spinner');
|
||||||
|
spinner = new Spinner(gui.spinnerCfg).spin(target);
|
||||||
|
$('#spinner').addClass('created');
|
||||||
|
} else if (state) {
|
||||||
|
$('#spinner').show();
|
||||||
|
} else if (!state) {
|
||||||
|
$('#spinner').hide();
|
||||||
|
gui.spinnerMsg('')
|
||||||
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
gui.spinnerMsg = function (msg) {
|
||||||
|
$('#spinnerMsg').text(msg)
|
||||||
|
}
|
||||||
gui.overlay = function (state) {
|
gui.overlay = function (state) {
|
||||||
if (state) {
|
if (state) {
|
||||||
$('#overlay').show();
|
$('#overlay').show();
|
||||||
|
|
Loading…
Reference in New Issue