Skip to content

Fullscreen button and UI Improvement #13

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

Open
yuntonyx wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fullscreen button and UI Improvement #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
41 changes: 41 additions & 0 deletions websheets.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,22 @@ div.CodeMirror-cursors {
font-weight: bold;
width: 100%;
font-size: 100%;
color: black;
border: 1px solid #a2a2a2;
border-radius: 2px;
cursor: pointer;
padding: 10px 5px;
background-color: #f8f6f6;
}

.wscontainer button:hover:enabled{
background-color: #eeeeee;
}

.wscontainer button:disabled{
color: #b9bcbe;
border: 1px solid #f8f6f6;
cursor: not-allowed;
}

code, pre, tt, .wscontainer .CodeMirror, .CodeMirror * {
Expand Down Expand Up @@ -275,3 +291,28 @@ background: linear-gradient(to right, #ffccee 49%,#ffffff 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffccee', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}

.wscontainer.ws-fullscreen{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
}

.wscontainer.ws-fullscreen .exercise-body{
padding: 0px 10px;
overflow: scroll;
overflow-x: hidden;
}

.wscontainer.ws-fullscreen .results-wrapper{
margin-top: 10px;
}

.wscontainer.ws-fullscreen table.buttonTable{
position: fixed;
bottom: 3px;
left: 0px;
z-index: 9999;
}
101 changes: 72 additions & 29 deletions websheets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,27 +131,34 @@ websheets.createAt = function(slug, data, containerdiv, preview) {
<div class="description"></div> \
<textarea class="code" name="code" ></textarea> \
<table class="buttonTable"><tbody><tr> \
<td style="width:33%"> \
<td style="width:25%"> \
<button class="noprint submitButton"> \
Submit \
</button> \
</td> \
<td style="width:33%"> \
<td style="width:25%"> \
<button class="noprint resetButton"> \
Start over \
</button> \
</td> \
<td style="width:33%"> \
<td style="width:25%"> \
<button class="noprint showrefButton"> \
View reference solution \
</button> \
<button style="display:none" class="noprint hiderefButton"> \
Go back to my solution \
</button> \
</td> \
<td style="width:25%"> \
<button class="noprint fullscreenButton"> \
Fullscreen \
</button> \
</td> \
</tbody></table> \
<div class="noprint results"></div> \
<div class="noprint after-results" style="display:none"></div> \
<div class="results-wrapper"> \
<div class="noprint results"></div> \
<div class="noprint after-results" style="display:none"></div> \
</div> \
</div> <!-- exercise-body --> \
</div> <!-- container -->';

Expand Down Expand Up @@ -206,6 +213,7 @@ websheets.Websheet = function(slug, data, div, preview) {
this.num_submissions = 0;
this.viewing_ref = false;
this.changing_viewing_ref = false;
this.fullscreen = false;
this.saved_chunks = undefined; // remember user code when viewing ref
this.load_data = undefined;
this.wse = undefined; // websheetEditor object
Expand Down Expand Up @@ -239,6 +247,24 @@ websheets.Websheet = function(slug, data, div, preview) {
$(this.div).find('.showrefButton').click( function(eventObject) {
this_ws.showRef();
});

$(this.div).find('.fullscreenButton').click( function(eventObject) {
if(this_ws.fullscreen){
this_ws.leaveFullScreen();
$(this_ws.div).find('.exercise-body').removeAttr('style');
}else{
this_ws.enterFullScreen();
var height = window.innerHeight - 80;
$(this_ws.div).find('.exercise-body').css('max-height', height);
}
});

$( window ).resize(function() {
if(this_ws.fullscreen){
var height = window.innerHeight - 80;
$(this_ws.div).find('.exercise-body').css('max-height', height);
}
});

if (data)
this.load_success(data); // avoid extra ajax
Expand Down Expand Up @@ -478,40 +504,43 @@ websheets.Websheet.prototype.submit = function() {
ajax_uid_intended: websheets.authinfo.username},
dataType: "json",
error: function(jqXHR, textStatus, errorThrown) {
$(this_ws.div).find(".submitButton").removeAttr("disabled");
$(this_ws.div).find(".submitButton").removeAttr("disabled");
$(this_ws.div).find(".results").html(
"Internal Ajax Error!!! Please contact course staff. <br>" +
"status: " + textStatus + "<br>" +
(textStatus == "parsererror" ? "" :
("error thrown: " + errorThrown + "<br>")) +
"response text:<br><pre>"
+ jqXHR.responseText + "</pre>");
+ jqXHR.responseText + "</pre>");
if(this_ws.fullscreen){
$(this_ws.div).find('.results-wrapper')[0].scrollIntoView()
}
},
success: function(data) {
if ('error_span' in data && data['error_span'] != '') {
$(this_ws.div).find(".submitButton").removeAttr("disabled");
$(this_ws.div).find(".submitButton").removeAttr("disabled");
$(this_ws.div).find(".results").html(data['error_span']);
return;
}

if (!this_ws.reference_sol && data.reference_sol) {
this_ws.reference_sol = data.reference_sol;
$(this_ws.div).find(".showrefButton").removeAttr("disabled");
$(this_ws.div).find(".showrefButton").html("View reference solution");
$(this_ws.div).find(".showrefButton").removeAttr("disabled");
$(this_ws.div).find(".showrefButton").html("View reference solution");
}

//console.log(data);
this_ws.num_submissions++;
//console.log(data);
this_ws.num_submissions++;
if (data.anon_reference_sol)
this_ws.anon_reference_sol = data.anon_reference_sol;
if (!this_ws.reference_sol && ["never", "infinity"].indexOf(this_ws.load_data.attempts_until_ref)==-1)
this_ws.updateTriesButton();
$(this_ws.div).find(".submitButton").removeAttr("disabled");
if (data.category == 'Passed' && !this_ws.viewing_ref) {
$(this_ws.div).addClass("passed");
$(this_ws.div).addClass("ever-passed");
}
var results = data.results;
$(this_ws.div).find(".submitButton").removeAttr("disabled");
if (data.category == 'Passed' && !this_ws.viewing_ref) {
$(this_ws.div).addClass("passed");
$(this_ws.div).addClass("ever-passed");
}
var results = data.results;
if (data.epilogue) {
$(this_ws.div).find(".after-results")
.html("<div class='epilogue'><div class='header'>Epilogue</div>"
Expand All @@ -529,6 +558,9 @@ websheets.Websheet.prototype.submit = function() {
//$("html, body").animate({
// scrollTop: $(document).height()
//}, "slow");
if(this_ws.fullscreen){
$(this_ws.div).find('.results-wrapper')[0].scrollIntoView()
}
}
});
};
Expand Down Expand Up @@ -567,6 +599,17 @@ websheets.Websheet.prototype.showRef = function() {
this.setting_viewing_ref = false;
}

websheets.Websheet.prototype.enterFullScreen = function(){
$(this.div).addClass("ws-fullscreen");
$(this.div).find(".fullscreenButton").text('Exit Fullscreen');
this.fullscreen = true;
}

websheets.Websheet.prototype.leaveFullScreen = function(){
$(this.div).removeClass("ws-fullscreen");
$(this.div).find(".fullscreenButton").text('Fullscreen');
this.fullscreen = false;
}

// WebsheetEditor pseudo-class is just for the CodeMirror interactions,
// not for the surrounding UI
Expand Down Expand Up @@ -862,18 +905,18 @@ websheets.WebsheetEditor = function(textarea_element, fragments, initial_snippet

var setUserAreas = function(data) {
for (var i=0; i<data.length; i++) {
var f = editable[i].find().from;
var t = editable[i].find().to;
var f = editable[i].find().from;
var t = editable[i].find().to;
// console.log(f, t);
if (data[i].indexOf("\n") != -1) {
f = f.line+f.ch==0 ? f : {line: f.line+1, ch: 0};
t = {line: t.line-1, ch: cm.getLine(t.line-1).length};
}
else {
f = {line: f.line, ch: f.ch+1};
t = {line: t.line, ch: t.ch-1};
}
cm.replaceRange(data[i].substring(1, data[i].length-1), f, t);
if (data[i].indexOf("\n") != -1) {
f = f.line+f.ch==0 ? f : {line: f.line+1, ch: 0};
t = {line: t.line-1, ch: cm.getLine(t.line-1).length};
}
else {
f = {line: f.line, ch: f.ch+1};
t = {line: t.line, ch: t.ch-1};
}
cm.replaceRange(data[i].substring(1, data[i].length-1), f, t);
}
}

Expand Down