Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drag and drop #1016

Merged
merged 2 commits into from
Jan 10, 2019
Merged

Drag and drop #1016

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3e561ac
Drag and drop initial, still some slight bugs to fix with styling
jbman223 Nov 29, 2018
e661d88
bug fixes, ready for PR
jbman223 Nov 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions app/assets/javascripts/assessments_show.coffee
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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