Skip to content

Commit

Permalink
Drag and drop (#1016)
Browse files Browse the repository at this point in the history 
* Drag and drop initial, still some slight bugs to fix with styling

* bug fixes, ready for PR
  • Loading branch information
@jbman223 @devanshk
jbman223 authored and devanshk committed Jan 10, 2019
1 parent 63623fc commit d1b6755
Show file tree
Hide file tree
Showing 4 changed files with 166 additions and 15 deletions.
14 changes: 7 additions & 7 deletions app/assets/javascripts/assessments_show.coffee
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# On click to 'fake submit' it triggers a click even on file picker
# so that the user can pick the file
$('#handin_show_assessment #fake-submit').click (e)->
e.preventDefault()
$("#handin_show_assessment input[type='file']").trigger('click');
# $('#handin_show_assessment #fake-submit').click (e)->
# e.preventDefault()
# $("#handin_show_assessment input[type='file']").trigger('click');

# On file pick, we submit the form automatically
$("input[type='file']").change (e)->
$('#handin_show_assessment #new_submission').submit()
$("#handin_show_assessment input[type='file']").val("") # clear for re-selecting the same file
# # On file pick, we submit the form automatically
# $("input[type='file']").change (e)->
# $('#handin_show_assessment #new_submission').submit()
# $("#handin_show_assessment input[type='file']").val("") # clear for re-selecting the same file

28 changes: 28 additions & 0 deletions app/assets/stylesheets/style.css.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1147,3 +1147,31 @@ div.center {
.btn:hover {
background-color: rgba(140,0,0,0.95) !important;
}


.drag-drop-handin {
height: 120px;
border: 3px dashed grey;
border-radius: 10px;
cursor: pointer;
margin-top: 10px;
align-items: center;
justify-content: center;

-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}

.drag-drop-handin:hover {
background: rgba(0, 0, 0, 0.05);
}

#remove-handed-in {
color: grey;
cursor: pointer;
}
138 changes: 131 additions & 7 deletions app/views/assessments/_handin_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,141 @@
<p>* denotes required fields. The submission cannot be completed without filling out the required fields.</p>
<% end %>
<% end %>
<!-- Academic integrity checkbox -->
<% content_for :javascripts do %>
<script>
function dropHandler(e) {
e.preventDefault();
$(".drag-drop-handin").get(0).style = undefined;
handleFiles(e.dataTransfer.files);
}

function dragOverHandler(e) {
e.preventDefault();
}

function dragEnter(e) {
$(".drag-drop-handin").get(0).style = "background:rgba(0,0,0,0.05);";
}

function dragExit(e) {
$(".drag-drop-handin").get(0).style = undefined;
}

function clickDrag() {
$("#handin_show_assessment input[type='file']").trigger('click');
}

document.querySelector("#handin_show_assessment input[type='file']").addEventListener(
"change",
function (e) {
showFiles();
},
false
);

function handleFiles(fileList) {
if (fileList.length === 1) {
var fileSelector = $("#handin_show_assessment input[type='file']").get(0);
fileSelector.files = fileList;
showFiles();
} else {
// invalid number of files alert
}
}

function showFiles() {
var fileSelector = $("#handin_show_assessment input[type='file']").get(0);
var file = fileSelector.files[0];
console.log(file);
$("#handin-file-name").text(file.name);
$("#handin-modify-date").text(moment(file.lastModified).format("MMMM Do YYYY, h:mm a"));

var sOutput = file.size + " bytes";
for (var aMultiples = ["kb", "mb", "gb", "tb", "pb", "eb", "zb", "yb"], nMultiple = 0, nApprox = file.size / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = nApprox.toFixed(1) + " " + aMultiples[nMultiple];
}

$("#handin-size").text(sOutput);

if (file) {
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function (evt) {
var lines = evt.target.result;
var lineCount = lines.split("\n").length;
$("#handin-loc").text(lineCount);
}
reader.onerror = function (evt) {
$("#handin-text").hide();
}
}

$(".handin-row").hide();
$(".handedin-row").show();
enableSubmit();
}

$("#integrity_checkbox").change(function (e) {
enableSubmit();
});

$("#remove-handed-in").click(function (e) {
e.preventDefault();
var fileSelector = $("#handin_show_assessment input[type='file']").get(0);
fileSelector.value = null;
$(".handin-row").show();
$(".handedin-row").hide();
enableSubmit();
});

function enableSubmit() {
var checkbox = document.getElementById("integrity_checkbox");
var fileSelector = $("#handin_show_assessment input[type='file']").get(0);
if (fileSelector.files.length !== 1) {
$("#fake-submit").addClass("disabled");
} else if (!checkbox.checked) {
$("#fake-submit").addClass("disabled");
} else {
$("#fake-submit").removeClass("disabled");
}
}
</script>
<% end %>
<div class="row handin-row">
<div class="valign-wrapper drag-drop-handin" onclick="clickDrag();" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragenter="dragEnter(event);" ondragexit="dragExit(event);">
<p class="center-align" style="color:grey;" onclick="clickDrag();" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragenter="dragEnter(event);" ondragexit="dragExit(event);"><b>Drag a file here to hand in. Click to select a file.</b> <br /> <span style="font-size: 10px;">Files do not submit automatically.</span></p>
</div>
</div>

<div class="row handedin-row" style="display: none;margin-top: 10px;">
<div class="col s2 center-align">
<i class="material-icons" style="font-size: 5rem;">insert_drive_file</i>
</div>
<div class="col s8">
<p>
<b id="handin-file-name"></b><br />
Last modified: <span id="handin-modify-date"></span><br />
<span id="handin-text">
Lines of code: <span id="handin-loc">Calculating...</span><br />
</span>
File size: <span id="handin-size"></span><br />
</p>
</div>
<div class="col s1 right-align">
<i id="remove-handed-in" class="material-icons small">close</i>
</div>
</div>

<%= check_box_tag(:integrity_checkbox) %>
<%= label_tag(:integrity_checkbox, "I affirm that I have complied with this course's academic integrity policy as defined in the syllabus.") %>

<%= f.file_field :file %>
<div class="row" style="padding-top: 10px">
<div class="row" style="padding-top: 10px">
<div id = "submission_error" style = "color:red" class="col s6 m8 center-align"></div>
<% if @aud.past_due_at? then %>
<div class="col s6 m4 center-align"><%= f.submit("Submit Late", id:"fake-submit", class: "btn primary handin-btn", onclick: "setSubmitClicked()") %></div>
<% else %>
<div class="col s6 m4 center-align"><%= f.submit("Submit", id:"fake-submit", class: "btn primary handin-btn", onclick: "setSubmitClicked()") %></div>
<% if @aud.past_due_at? then %>
<div class="col s6 m4 center-align"><%= f.submit("Submit Late", id:"fake-submit", class: "btn primary handin-btn disabled") %></div>
<% else %>
<div class="col s6 m4 center-align"><%= f.submit("Submit", id:"fake-submit", class: "btn primary handin-btn disabled") %></div>
<% end %>
</div>
<div class="row">
Expand All @@ -71,7 +195,7 @@
<div class="smallText col s6 offset-s6 m4 offset-m8 center-align" style="padding-top: 6px">&nbsp;&nbsp;(<%= numSubmissions %> submissions left)</div>
<% else %>
<div class="smallText col s6 offset-s6 m4 offset-m8 center-align" style="padding-top: 6px">(&nbsp;&#x221e;&nbsp;&nbsp;submissions left)</div>
<% end %>
<% end %>
</div>
<% end %>
<% end %>
Expand Down
1 change: 0 additions & 1 deletion app/views/assessments/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,6 @@

<p class="valign-wrapper">
<i class="valign material-icons">today</i>&nbsp;&nbsp;Last day to handin:&nbsp;&nbsp;<b><span class="moment-date-time" data-format="MMMM Do YYYY, h:mm a"> <%= end_at_display(@aud.end_at false) %></span></b>

</p>

<% if @cud.instructor? and @assessment.exam? %>
Expand Down

0 comments on commit d1b6755

Please sign in to comment.