From befa9eaf450a0a0895ce7565f35ffde10ffc50e2 Mon Sep 17 00:00:00 2001 From: Tony Date: Wed, 18 Jan 2017 16:58:52 -0800 Subject: [PATCH] Fullscreen button and UI Improvement - Give the buttons a modern look - Add fullscreen feature --- websheets.css | 41 ++++++++++++++++++++ websheets.js | 101 +++++++++++++++++++++++++++++++++++--------------- 2 files changed, 113 insertions(+), 29 deletions(-) diff --git a/websheets.css b/websheets.css index f8c9b28..3f2c7a8 100644 --- a/websheets.css +++ b/websheets.css @@ -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 * { @@ -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; +} \ No newline at end of file diff --git a/websheets.js b/websheets.js index 7871ecb..f63a7ae 100644 --- a/websheets.js +++ b/websheets.js @@ -131,17 +131,17 @@ websheets.createAt = function(slug, data, containerdiv, preview) {
\ \ \ - \ - \ - \ + \
\ + \ \ \ + \ \ \ + \ \ @@ -149,9 +149,16 @@ websheets.createAt = function(slug, data, containerdiv, preview) { Go back to my solution \ \ \ + \ +
\ -
\ - \ +
\ +
\ + \ +
\ \ '; @@ -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 @@ -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 @@ -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.
" + "status: " + textStatus + "
" + (textStatus == "parsererror" ? "" : ("error thrown: " + errorThrown + "
")) + "response text:
" 
-               + jqXHR.responseText + "
"); + + jqXHR.responseText + ""); + 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("
Epilogue
" @@ -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() + } } }); }; @@ -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 @@ -862,18 +905,18 @@ websheets.WebsheetEditor = function(textarea_element, fragments, initial_snippet var setUserAreas = function(data) { for (var i=0; i