From b048cc390b5f000771f189d0a2ab577a69ce409a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= Date: Mon, 20 May 2013 23:31:17 +0200 Subject: [PATCH] Proper uploading incl. drag-n-drop for both local storage and SD card --- octoprint/static/css/octoprint.less | 127 +++++++++++++++++++++++++++ octoprint/static/js/ui.js | 129 +++++++++++++++++++++------- octoprint/templates/dialogs.jinja2 | 15 ++++ octoprint/templates/index.jinja2 | 30 ++++--- 4 files changed, 258 insertions(+), 43 deletions(-) diff --git a/octoprint/static/css/octoprint.less b/octoprint/static/css/octoprint.less index 2f8c258..29c0bb5 100644 --- a/octoprint/static/css/octoprint.less +++ b/octoprint/static/css/octoprint.less @@ -145,6 +145,9 @@ body { padding-right: 4px; } +.upload-buttons .btn { + margin-right: 0; +} /** Tables */ @@ -399,3 +402,127 @@ ul.dropdown-menu li a { 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; + } + } + } +} \ No newline at end of file diff --git a/octoprint/static/js/ui.js b/octoprint/static/js/ui.js index cd794d4..3765ee9 100644 --- a/octoprint/static/js/ui.js +++ b/octoprint/static/js/ui.js @@ -1885,43 +1885,103 @@ $(function() { //~~ 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({ dataType: "json", - done: function (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(""); - }, - 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 ..."); - } - } + dropZone: localTarget, + formData: {target: "local"}, + done: gcode_upload_done, + progressall: gcode_upload_progress }); - $("#gcode_upload_sd").fileupload({ - dataType: "json", - formData: {target: "sd"}, - done: function (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(""); - }, - 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 ..."); - } + if (CONFIG_SD_SUPPORT) { + $("#gcode_upload_sd").fileupload({ + dataType: "json", + dropZone: $("#drop_sd"), + formData: {target: "sd"}, + done: gcode_upload_done, + progressall: gcode_upload_progress + }); + } + + $(document).bind("dragover", function (e) { + var dropOverlay = $("#drop_overlay"); + var dropZone = $("#drop"); + var dropZoneLocal = $("#drop_locally"); + var dropZoneSd = $("#drop_sd"); + 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 @@ -2007,10 +2067,13 @@ $(function() { } // Fix input element click problem on login dialog - $('.dropdown input, .dropdown label').click(function(e) { + $(".dropdown input, .dropdown label").click(function(e) { e.stopPropagation(); }); + $(document).bind("drop dragover", function (e) { + e.preventDefault(); + }); } ); diff --git a/octoprint/templates/dialogs.jinja2 b/octoprint/templates/dialogs.jinja2 index 6c95967..b9244f0 100644 --- a/octoprint/templates/dialogs.jinja2 +++ b/octoprint/templates/dialogs.jinja2 @@ -17,6 +17,21 @@ +
+
+
+ {% if enableSdSupport %} +

Upload locally
+
+

Upload to SD
+
+ {% else %} +

Upload
+
+ {% endif %} +
+
+