Proper uploading incl. drag-n-drop for both local storage and SD card
parent
039a17d923
commit
b048cc390b
|
@ -145,6 +145,9 @@ body {
|
||||||
padding-right: 4px;
|
padding-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.upload-buttons .btn {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/** Tables */
|
/** Tables */
|
||||||
|
|
||||||
|
@ -399,3 +402,127 @@ ul.dropdown-menu li a {
|
||||||
overflow: visible !important;
|
overflow: visible !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#drop_overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 10000;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&.in {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#drop_overlay_background {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #000000;
|
||||||
|
filter:alpha(opacity=50);
|
||||||
|
-moz-opacity:0.5;
|
||||||
|
-khtml-opacity: 0.5;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#drop_overlay_wrapper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding-top: 60px;
|
||||||
|
|
||||||
|
@dropzone_width: 400px;
|
||||||
|
@dropzone_height: 400px;
|
||||||
|
@dropzone_distance: 50px;
|
||||||
|
@dropzone_border: 2px;
|
||||||
|
|
||||||
|
#drop, #drop_background {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -1 * @dropzone_width / 2;
|
||||||
|
margin-top: -1 * @dropzone_height / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#drop_locally, #drop_locally_background {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -1 * @dropzone_width - @dropzone_distance / 2;
|
||||||
|
margin-top: -1 * @dropzone_height / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#drop_sd, #drop_sd_background {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: @dropzone_distance / 2;
|
||||||
|
margin-top: -1 * @dropzone_height / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropzone {
|
||||||
|
width: @dropzone_width + 2 * @dropzone_border;
|
||||||
|
height: @dropzone_height + 2 * @dropzone_border;
|
||||||
|
z-index: 10001;
|
||||||
|
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 30px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered {
|
||||||
|
display: table-cell;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: @dropzone_width;
|
||||||
|
height: @dropzone_height;
|
||||||
|
line-height: 40px;
|
||||||
|
|
||||||
|
filter:alpha(opacity=100);
|
||||||
|
-moz-opacity:1.0;
|
||||||
|
-khtml-opacity: 1.0;
|
||||||
|
opacity: 1.0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropzone_background {
|
||||||
|
width: @dropzone_width;
|
||||||
|
height: @dropzone_height;
|
||||||
|
border: 2px dashed #eeeeee;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
background-color: #000000;
|
||||||
|
filter:alpha(opacity=25);
|
||||||
|
-moz-opacity:0.25;
|
||||||
|
-khtml-opacity: 0.25;
|
||||||
|
opacity: 0.25;
|
||||||
|
|
||||||
|
&.hover {
|
||||||
|
background-color: #000000;
|
||||||
|
filter:alpha(opacity=50);
|
||||||
|
-moz-opacity:0.5;
|
||||||
|
-khtml-opacity: 0.5;
|
||||||
|
opacity: 0.5;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.fade {
|
||||||
|
-webkit-transition: all 0.3s ease-out;
|
||||||
|
-moz-transition: all 0.3s ease-out;
|
||||||
|
-ms-transition: all 0.3s ease-out;
|
||||||
|
-o-transition: all 0.3s ease-out;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1885,43 +1885,103 @@ $(function() {
|
||||||
|
|
||||||
//~~ Gcode upload
|
//~~ Gcode upload
|
||||||
|
|
||||||
|
function gcode_upload_done(e, data) {
|
||||||
|
gcodeFilesViewModel.fromResponse(data.result);
|
||||||
|
$("#gcode_upload_progress .bar").css("width", "0%");
|
||||||
|
$("#gcode_upload_progress").removeClass("progress-striped").removeClass("active");
|
||||||
|
$("#gcode_upload_progress .bar").text("");
|
||||||
|
}
|
||||||
|
|
||||||
|
function gcode_upload_progress(e, data) {
|
||||||
|
var progress = parseInt(data.loaded / data.total * 100, 10);
|
||||||
|
$("#gcode_upload_progress .bar").css("width", progress + "%");
|
||||||
|
$("#gcode_upload_progress .bar").text("Uploading ...");
|
||||||
|
if (progress >= 100) {
|
||||||
|
$("#gcode_upload_progress").addClass("progress-striped").addClass("active");
|
||||||
|
$("#gcode_upload_progress .bar").text("Saving ...");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var localTarget;
|
||||||
|
if (CONFIG_SD_SUPPORT) {
|
||||||
|
localTarget = $("#drop_locally");
|
||||||
|
} else {
|
||||||
|
localTarget = $("#drop");
|
||||||
|
}
|
||||||
|
|
||||||
$("#gcode_upload").fileupload({
|
$("#gcode_upload").fileupload({
|
||||||
dataType: "json",
|
dataType: "json",
|
||||||
done: function (e, data) {
|
dropZone: localTarget,
|
||||||
gcodeFilesViewModel.fromResponse(data.result);
|
formData: {target: "local"},
|
||||||
$("#gcode_upload_progress .bar").css("width", "0%");
|
done: gcode_upload_done,
|
||||||
$("#gcode_upload_progress").removeClass("progress-striped").removeClass("active");
|
progressall: gcode_upload_progress
|
||||||
$("#gcode_upload_progress .bar").text("");
|
|
||||||
},
|
|
||||||
progressall: function (e, data) {
|
|
||||||
var progress = parseInt(data.loaded / data.total * 100, 10);
|
|
||||||
$("#gcode_upload_progress .bar").css("width", progress + "%");
|
|
||||||
$("#gcode_upload_progress .bar").text("Uploading ...");
|
|
||||||
if (progress >= 100) {
|
|
||||||
$("#gcode_upload_progress").addClass("progress-striped").addClass("active");
|
|
||||||
$("#gcode_upload_progress .bar").text("Saving ...");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#gcode_upload_sd").fileupload({
|
if (CONFIG_SD_SUPPORT) {
|
||||||
dataType: "json",
|
$("#gcode_upload_sd").fileupload({
|
||||||
formData: {target: "sd"},
|
dataType: "json",
|
||||||
done: function (e, data) {
|
dropZone: $("#drop_sd"),
|
||||||
gcodeFilesViewModel.fromResponse(data.result);
|
formData: {target: "sd"},
|
||||||
$("#gcode_upload_progress .bar").css("width", "0%");
|
done: gcode_upload_done,
|
||||||
$("#gcode_upload_progress").removeClass("progress-striped").removeClass("active");
|
progressall: gcode_upload_progress
|
||||||
$("#gcode_upload_progress .bar").text("");
|
});
|
||||||
},
|
}
|
||||||
progressall: function (e, data) {
|
|
||||||
var progress = parseInt(data.loaded / data.total * 100, 10);
|
$(document).bind("dragover", function (e) {
|
||||||
$("#gcode_upload_progress .bar").css("width", progress + "%");
|
var dropOverlay = $("#drop_overlay");
|
||||||
$("#gcode_upload_progress .bar").text("Uploading ...");
|
var dropZone = $("#drop");
|
||||||
if (progress >= 100) {
|
var dropZoneLocal = $("#drop_locally");
|
||||||
$("#gcode_upload_progress").addClass("progress-striped").addClass("active");
|
var dropZoneSd = $("#drop_sd");
|
||||||
$("#gcode_upload_progress .bar").text("Saving ...");
|
var dropZoneBackground = $("#drop_background");
|
||||||
}
|
var dropZoneLocalBackground = $("#drop_locally_background");
|
||||||
|
var dropZoneSdBackground = $("#drop_sd_background");
|
||||||
|
var timeout = window.dropZoneTimeout;
|
||||||
|
|
||||||
|
if (!timeout) {
|
||||||
|
dropOverlay.addClass('in');
|
||||||
|
} else {
|
||||||
|
clearTimeout(timeout);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var foundLocal = false;
|
||||||
|
var foundSd = false;
|
||||||
|
var found = false
|
||||||
|
var node = e.target;
|
||||||
|
do {
|
||||||
|
if (dropZoneLocal && node === dropZoneLocal[0]) {
|
||||||
|
foundLocal = true;
|
||||||
|
break;
|
||||||
|
} else if (dropZoneSd && node === dropZoneSd[0]) {
|
||||||
|
foundSd = true;
|
||||||
|
break;
|
||||||
|
} else if (dropZone && node === dropZone[0]) {
|
||||||
|
found = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
node = node.parentNode;
|
||||||
|
} while (node != null);
|
||||||
|
|
||||||
|
if (foundLocal) {
|
||||||
|
dropZoneLocalBackground.addClass("hover");
|
||||||
|
dropZoneSdBackground.removeClass("hover");
|
||||||
|
} else if (foundSd) {
|
||||||
|
dropZoneSdBackground.addClass("hover");
|
||||||
|
dropZoneLocalBackground.removeClass("hover");
|
||||||
|
} else if (found) {
|
||||||
|
dropZoneBackground.addClass("hover");
|
||||||
|
} else {
|
||||||
|
if (dropZoneLocalBackground) dropZoneLocalBackground.removeClass("hover");
|
||||||
|
if (dropZoneSdBackground) dropZoneSdBackground.removeClass("hover");
|
||||||
|
if (dropZoneBackground) dropZoneBackground.removeClass("hover");
|
||||||
|
}
|
||||||
|
|
||||||
|
window.dropZoneTimeout = setTimeout(function () {
|
||||||
|
window.dropZoneTimeout = null;
|
||||||
|
dropOverlay.removeClass("in");
|
||||||
|
if (dropZoneLocal) dropZoneLocalBackground.removeClass("hover");
|
||||||
|
if (dropZoneSd) dropZoneSdBackground.removeClass("hover");
|
||||||
|
if (dropZone) dropZoneBackground.removeClass("hover");
|
||||||
|
}, 100);
|
||||||
});
|
});
|
||||||
|
|
||||||
//~~ Offline overlay
|
//~~ Offline overlay
|
||||||
|
@ -2007,10 +2067,13 @@ $(function() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fix input element click problem on login dialog
|
// Fix input element click problem on login dialog
|
||||||
$('.dropdown input, .dropdown label').click(function(e) {
|
$(".dropdown input, .dropdown label").click(function(e) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$(document).bind("drop dragover", function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -17,6 +17,21 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="drop_overlay">
|
||||||
|
<div id="drop_overlay_background"></div>
|
||||||
|
<div id="drop_overlay_wrapper">
|
||||||
|
{% if enableSdSupport %}
|
||||||
|
<div class="dropzone" id="drop_locally"><span class="centered"><i class="icon-upload-alt"></i><br>Upload locally</span></div>
|
||||||
|
<div class="dropzone_background" id="drop_locally_background"></div>
|
||||||
|
<div class="dropzone" id="drop_sd"><span class="centered"><i class="icon-upload-alt"></i><br>Upload to SD</span></div>
|
||||||
|
<div class="dropzone_background" id="drop_sd_background"></div>
|
||||||
|
{% else %}
|
||||||
|
<div class="dropzone" id="drop"><span class="centered"><i class="icon-upload-alt"></i><br>Upload</span></div>
|
||||||
|
<div class="dropzone_background" id="drop_background"></div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="confirmation_dialog" class="modal hide fade">
|
<div id="confirmation_dialog" class="modal hide fade">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">×</a>
|
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">×</a>
|
||||||
|
|
|
@ -182,16 +182,26 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: none;" data-bind="visible: loginState.isUser">
|
<div style="display: none;" data-bind="visible: loginState.isUser">
|
||||||
<span class="btn btn-primary btn-block fileinput-button" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
|
<div class="row-fluid upload-buttons">
|
||||||
<i class="icon-upload icon-white"></i>
|
{% if enableSdSupport %}
|
||||||
<span>Upload</span>
|
<button class="btn btn-primary fileinput-button span6" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
|
||||||
<input id="gcode_upload" type="file" name="gcode_file" class="fileinput-button" data-url="/ajax/gcodefiles/upload" data-bind="enable: loginState.isUser()">
|
<i class="icon-upload-alt icon-white"></i>
|
||||||
</span>
|
<span>Upload</span>
|
||||||
<span class="btn btn-primary btn-block fileinput-button" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
|
<input id="gcode_upload" type="file" name="gcode_file" class="fileinput-button" data-url="/ajax/gcodefiles/upload" data-bind="enable: loginState.isUser()">
|
||||||
<i class="icon-upload icon-white"></i>
|
</button>
|
||||||
<span>Upload to SD</span>
|
<button class="btn btn-primary fileinput-button span6" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
|
||||||
<input id="gcode_upload_sd" type="file" name="gcode_file" class="fileinput-button" data-url="/ajax/gcodefiles/upload" data-bind="enable: loginState.isUser()">
|
<i class="icon-upload-alt icon-white"></i>
|
||||||
</span>
|
<span>Upload to SD</span>
|
||||||
|
<input id="gcode_upload_sd" type="file" name="gcode_file" class="fileinput-button" data-url="/ajax/gcodefiles/upload" data-bind="enable: loginState.isUser()">
|
||||||
|
</button>
|
||||||
|
{% else %}
|
||||||
|
<button class="btn btn-primary fileinput-button span12" data-bind="css: {disabled: !$root.loginState.isUser()}" style="margin-bottom: 10px">
|
||||||
|
<i class="icon-upload-alt icon-white"></i>
|
||||||
|
<span>Upload</span>
|
||||||
|
<input id="gcode_upload" type="file" name="gcode_file" class="fileinput-button" data-url="/ajax/gcodefiles/upload" data-bind="enable: loginState.isUser()">
|
||||||
|
</button>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
<div id="gcode_upload_progress" class="progress" style="width: 100%;">
|
<div id="gcode_upload_progress" class="progress" style="width: 100%;">
|
||||||
<div class="bar" style="width: 0%"></div>
|
<div class="bar" style="width: 0%"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue