From 254786885442b07c0069391a786f130cf5dc5c6b Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Fri, 31 Jul 2015 13:37:06 -0700 Subject: [PATCH] fix storage and reset functionality for js and html challenge views --- .../coursewaresHCJQFramework_0.1.9.js | 100 +++++++++ .../coursewaresJSFramework_0.0.6.js | 204 +++++++++--------- public/js/main_0.0.3.js | 10 + seed/challenges/basic-javascript.json | 11 +- seed/challenges/jquery-ajax-and-json.json | 2 +- server/views/coursewares/showHTML.jade | 3 + server/views/coursewares/showJS.jade | 9 - server/views/partials/challenge-modals.jade | 10 + 8 files changed, 229 insertions(+), 120 deletions(-) diff --git a/public/js/lib/coursewares/coursewaresHCJQFramework_0.1.9.js b/public/js/lib/coursewares/coursewaresHCJQFramework_0.1.9.js index 2940b20b15..2b89f012f5 100644 --- a/public/js/lib/coursewares/coursewaresHCJQFramework_0.1.9.js +++ b/public/js/lib/coursewares/coursewaresHCJQFramework_0.1.9.js @@ -77,6 +77,7 @@ function updatePreview() { preview.open(); $('#testSuite').empty(); preview.write(libraryIncludes + editor.getValue() + iFrameScript); + codeStorage.updateStorage(); preview.close(); } @@ -163,3 +164,102 @@ function showCompletion() { } }); } + +/* + Local Storage Update System By Andrew Cay(Resto) + codeStorage: singleton object that contains properties and methods related to + dealing with the localStorage system. + The keys work off of the variable challenge_name to make unique identifiers per bonfire + + Two extra functionalities: + Added anonymous version checking system incase of future updates to the system + Added keyup listener to editor(myCodeMirror) so the last update has been saved to storage + */ +var codeStorage = { + version: 0.01, + keyVersion:"saveVersion", + keyValue: null,//where the value of the editor is saved + updateWait: 2000,// 2 seconds + updateTimeoutId: null, + eventArray: []//for firing saves +}; +// Returns true if the editor code was saved since last key press (use this if you want to make a "saved" notification somewhere") +codeStorage.hasSaved = function(){ + return ( updateTimeoutId === null ); +}; +codeStorage.onSave = function(func){ + codeStorage.eventArray.push(func); +}; +codeStorage.setSaveKey = function(key){ + codeStorage.keyValue = key + 'Val'; +}; +codeStorage.getEditorValue = function(){ + return ('' + localStorage.getItem(codeStorage.keyValue)); +}; + +codeStorage.isAlive = function() { + var val = this.getEditorValue() + return val !== 'null' && + val !== 'undefined' && + (val && val.length > 0); +} +codeStorage.updateStorage = function(){ + if(typeof(Storage) !== undefined) { + var value = editor.getValue(); + localStorage.setItem(codeStorage.keyValue, value); + } else { + var debugging = false; + if( debugging ){ + console.log('no web storage'); + } + } + codeStorage.updateTimeoutId = null; + codeStorage.eventArray.forEach(function(func){ + func(); + }); +}; +//Update Version +(function(){ + var savedVersion = localStorage.getItem('saveVersion'); + if( savedVersion === null ){ + localStorage.setItem(codeStorage.keyVersion, codeStorage.version);//just write current version + }else{ + if( savedVersion !== codeStorage.version ){ + //Update version + } + } +})(); + + + +///Set everything up one page +/// Update local save when editor has changed +codeStorage.setSaveKey(challenge_Name); +editor.on('keyup', function(){ + window.clearTimeout(codeStorage.updateTimeoutId); + codeStorage.updateTimeoutId = window.setTimeout(codeStorage.updateStorage, codeStorage.updateWait); +}); + +var editorValue; + + +var challengeSeed = challengeSeed || null; +var tests = tests || []; + + +var allSeeds = ''; +(function() { + challengeSeed.forEach(function(elem) { + allSeeds += elem + '\n'; + }); +})(); + +editorValue = (codeStorage.isAlive())? codeStorage.getEditorValue() : allSeeds; + +editor.setValue(editorValue); + +var resetEditor = function resetEditor() { + editor.setValue(allSeeds); + updatePreview(); + codeStorage.updateStorage(); +}; diff --git a/public/js/lib/coursewares/coursewaresJSFramework_0.0.6.js b/public/js/lib/coursewares/coursewaresJSFramework_0.0.6.js index ae7237ef5d..31ab3ab7a4 100644 --- a/public/js/lib/coursewares/coursewaresJSFramework_0.0.6.js +++ b/public/js/lib/coursewares/coursewaresJSFramework_0.0.6.js @@ -1,7 +1,3 @@ -$(document).ready(function() { - $('#reset-button').on('click', resetEditor); -}); - var widgets = []; var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("codeEditor"), { lineNumbers: true, @@ -44,92 +40,11 @@ editor.setOption("extraKeys", { }); -/* - Local Storage Update System By Andrew Cay(Resto) - codeStorage: singleton object that contains properties and methods related to - dealing with the localStorage system. - The keys work off of the variable challenge_name to make unique identifiers per bonfire - - Two extra functionalities: - Added anonymous version checking system incase of future updates to the system - Added keyup listener to editor(myCodeMirror) so the last update has been saved to storage -*/ -var codeStorage = { - version: 0.01, - keyVersion:"saveVersion", - keyValue: null,//where the value of the editor is saved - updateWait: 2000,// 2 seconds - updateTimeoutId: null, - eventArray: []//for firing saves -}; -// Returns true if the editor code was saved since last key press (use this if you want to make a "saved" notification somewhere") -codeStorage.hasSaved = function(){ - return ( updateTimeoutId === null ); -}; -codeStorage.onSave = function(func){ - codeStorage.eventArray.push(func); -}; -codeStorage.setSaveKey = function(key){ - codeStorage.keyValue = key + 'Val'; -}; -codeStorage.getEditorValue = function(){ - return ('' + localStorage.getItem(codeStorage.keyValue)); -}; - -codeStorage.isAlive = function() { - var val = this.getEditorValue() - return val !== 'null' && - val !== 'undefined' && - (val && val.length > 0); -} -codeStorage.updateStorage = function(){ - if(typeof(Storage) !== undefined) { - var value = editor.getValue(); - localStorage.setItem(codeStorage.keyValue, value); - } else { - var debugging = false; - if( debugging ){ - console.log('no web storage'); - } - } - codeStorage.updateTimeoutId = null; - codeStorage.eventArray.forEach(function(func){ - func(); - }); -}; -//Update Version -(function(){ - var savedVersion = localStorage.getItem('saveVersion'); - if( savedVersion === null ){ - localStorage.setItem(codeStorage.keyVersion, codeStorage.version);//just write current version - }else{ - if( savedVersion !== codeStorage.version ){ - //Update version - } - } -})(); - - - -///Set everything up one page -/// Update local save when editor has changed -codeStorage.setSaveKey(challenge_Name); -editor.on('keyup', function(){ - window.clearTimeout(codeStorage.updateTimeoutId); - codeStorage.updateTimeoutId = window.setTimeout(codeStorage.updateStorage, codeStorage.updateWait); -}); - - var attempts = 0; if (attempts) { attempts = 0; } -var resetEditor = function resetEditor() { - editor.setValue(allSeeds); - codeStorage.updateStorage(); - -}; var codeOutput = CodeMirror.fromTextArea(document.getElementById("codeOutput"), { lineNumbers: false, @@ -152,24 +67,6 @@ var after = editor.charCoords({ if (info.top + info.clientHeight < after) editor.scrollTo(null, after - info.clientHeight + 3); -var editorValue; - - -var challengeSeed = challengeSeed || null; -var tests = tests || []; - - -var allSeeds = ''; -(function() { - challengeSeed.forEach(function(elem) { - allSeeds += elem + '\n'; - }); -})(); - -editorValue = (codeStorage.isAlive())? codeStorage.getEditorValue() : allSeeds; - -myCodeMirror.setValue(editorValue); - function doLinting() { editor.operation(function() { for (var i = 0; i < widgets.length; ++i) @@ -191,7 +88,7 @@ function doLinting() { })); } }); -}; +} $('#submitButton').on('click', function() { bonfireExecute(); @@ -368,3 +265,102 @@ function showCompletion() { ); } + + +/* + Local Storage Update System By Andrew Cay(Resto) + codeStorage: singleton object that contains properties and methods related to + dealing with the localStorage system. + The keys work off of the variable challenge_name to make unique identifiers per bonfire + + Two extra functionalities: + Added anonymous version checking system incase of future updates to the system + Added keyup listener to editor(myCodeMirror) so the last update has been saved to storage + */ +var codeStorage = { + version: 0.01, + keyVersion:"saveVersion", + keyValue: null,//where the value of the editor is saved + updateWait: 2000,// 2 seconds + updateTimeoutId: null, + eventArray: []//for firing saves +}; +// Returns true if the editor code was saved since last key press (use this if you want to make a "saved" notification somewhere") +codeStorage.hasSaved = function(){ + return ( updateTimeoutId === null ); +}; +codeStorage.onSave = function(func){ + codeStorage.eventArray.push(func); +}; +codeStorage.setSaveKey = function(key){ + codeStorage.keyValue = key + 'Val'; +}; +codeStorage.getEditorValue = function(){ + return ('' + localStorage.getItem(codeStorage.keyValue)); +}; + +codeStorage.isAlive = function() { + var val = this.getEditorValue() + return val !== 'null' && + val !== 'undefined' && + (val && val.length > 0); +} +codeStorage.updateStorage = function(){ + if(typeof(Storage) !== undefined) { + var value = editor.getValue(); + localStorage.setItem(codeStorage.keyValue, value); + } else { + var debugging = false; + if( debugging ){ + console.log('no web storage'); + } + } + codeStorage.updateTimeoutId = null; + codeStorage.eventArray.forEach(function(func){ + func(); + }); +}; +//Update Version +(function(){ + var savedVersion = localStorage.getItem('saveVersion'); + if( savedVersion === null ){ + localStorage.setItem(codeStorage.keyVersion, codeStorage.version);//just write current version + }else{ + if( savedVersion !== codeStorage.version ){ + //Update version + } + } +})(); + + + +///Set everything up one page +/// Update local save when editor has changed +codeStorage.setSaveKey(challenge_Name); +editor.on('keyup', function(){ + window.clearTimeout(codeStorage.updateTimeoutId); + codeStorage.updateTimeoutId = window.setTimeout(codeStorage.updateStorage, codeStorage.updateWait); +}); + +var editorValue; + + +var challengeSeed = challengeSeed || null; +var tests = tests || []; + + +var allSeeds = ''; +(function() { + challengeSeed.forEach(function(elem) { + allSeeds += elem + '\n'; + }); +})(); + +editorValue = (codeStorage.isAlive())? codeStorage.getEditorValue() : allSeeds; + +myCodeMirror.setValue(editorValue); + +var resetEditor = function resetEditor() { + editor.setValue(allSeeds); + codeStorage.updateStorage(); +}; diff --git a/public/js/main_0.0.3.js b/public/js/main_0.0.3.js index 70454bfc48..10eede5075 100644 --- a/public/js/main_0.0.3.js +++ b/public/js/main_0.0.3.js @@ -4,6 +4,12 @@ $(document).ready(function() { ga('send', 'event', 'Challenge', 'load', challengeName); } + $(document).ready(function() { + if ($('#reset-button').html() != undefined) { + $('#reset-button').on('click', resetEditor); + } + }); + var CSRF_HEADER = 'X-CSRF-Token'; var setCSRFToken = function(securityToken) { @@ -146,6 +152,10 @@ $(document).ready(function() { $('#pair-modal').modal('show'); }); + $('#trigger-reset-modal').on('click', function() { + $('#reset-modal').modal('show'); + }); + $('#trigger-help-modal').on('click', function() { $('#help-modal').modal('show'); }); diff --git a/seed/challenges/basic-javascript.json b/seed/challenges/basic-javascript.json index 27a1d2e779..aea6a75989 100644 --- a/seed/challenges/basic-javascript.json +++ b/seed/challenges/basic-javascript.json @@ -121,7 +121,7 @@ "For example, if we created a variable var firstName = \"Julie\", we could find out how long the string \"Julie\" is by using the firstName.length property." ], "tests": [ - "(function(){if(typeof(lastNameLength) != 'undefined' && typeof(lastNameLength) == 'number' && lastNameLength == 4){return(true);}else{return(false);}})(), 'lastNameLength should be equal to four')()" + "assert((function(){if(typeof(lastNameLength) != 'undefined' && typeof(lastNameLength) == 'number' && lastNameLength == 4){return(true);}else{return(false);}})(), 'lastNameLength should be equal to four')" ], "challengeSeed": [ "var firstName = \"Madeline\";", @@ -368,20 +368,19 @@ "description": [ "", "in JavaScript we can can work with decimal numbers", - "These decal numbers are known as floats.", - "Let's create a float now called myFloat and give it a value" + "Let's create a variable myfloat and give it a decimal value." ], "tests": [ - "assert((function(){if(typeof(myFloat) != 'undefined' && typeof(myFloat) == 'number' && editor.getValue().match(/\\./g).length >=2){return(true);}else{return(false);}})(), 'myFloat should be a decimal point number');" + "assert((function(){if(typeof(myDecimal) != 'undefined' && typeof(myDecimal) == 'number' && editor.getValue().match(/\\./g).length >=2){return(true);}else{return(false);}})(), 'myFloat should be a decimal point number');" ], "challengeSeed": [ - "//var ourFloat = 5.7", + "//var ourDecimal = 5.7", "//Create a number with a decimal point here called myFloat", "", "", "", "", - "if(typeof(myFloat) != 'undefined'){(function(z){return(z);})(myFloat);}" + "(function(){if(typeof(myDecimal) != 'undefined'){return(myDecimal);}})();" ], "challengeType": 1 }, diff --git a/seed/challenges/jquery-ajax-and-json.json b/seed/challenges/jquery-ajax-and-json.json index 78b7db9449..aaaca56c96 100644 --- a/seed/challenges/jquery-ajax-and-json.json +++ b/seed/challenges/jquery-ajax-and-json.json @@ -763,7 +763,7 @@ }, { - "id": "bad87fee1348bd9aecc08826", + "id": "bad84fee1348bd9aecc08826", "name": "Waypoint: Read Data from an Element Using jQuery", "dashedName": "Waypoint-read-data-from-an-element-using-jquery", "difficulty": 3.17, diff --git a/server/views/coursewares/showHTML.jade b/server/views/coursewares/showHTML.jade index 1e19c647c8..26ae70c991 100644 --- a/server/views/coursewares/showHTML.jade +++ b/server/views/coursewares/showHTML.jade @@ -36,6 +36,9 @@ block content |   Go to my next challenge (ctrl + enter) .button-spacer .btn-group.input-group.btn-group-justified + label.btn.btn-success#trigger-reset-modal + i.fa.fa-refresh + |   Reset label.btn.btn-success#trigger-help-modal i.fa.fa-medkit |   Help diff --git a/server/views/coursewares/showJS.jade b/server/views/coursewares/showJS.jade index 5c7d86f10d..866c5e4fd1 100644 --- a/server/views/coursewares/showJS.jade +++ b/server/views/coursewares/showJS.jade @@ -88,15 +88,6 @@ block content = phrase else a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress - #reset-modal.modal(tabindex='-1') - .modal-dialog.animated.fadeInUp.fast-animation - .modal-content - .modal-header.challenge-list-header Clear your code? - a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × - .modal-body - h3 This will restore your code editor to its original state. - a.btn.btn-lg.btn-info.btn-block#reset-button(href='#', data-dismiss='modal', aria-hidden='true') Clear my code - a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Cancel include ../partials/challenge-modals script. var MDNlinks = !{JSON.stringify(MDNlinks)}; diff --git a/server/views/partials/challenge-modals.jade b/server/views/partials/challenge-modals.jade index f1d210b30a..0cf6584bd4 100644 --- a/server/views/partials/challenge-modals.jade +++ b/server/views/partials/challenge-modals.jade @@ -36,3 +36,13 @@ h3 This will take you to our help room. a.btn.btn-lg.btn-primary.btn-block(href='https://gitter.im/FreeCodeCamp/LetsPair', data-dismiss='modal', aria-hidden='true' target='_blank') Take me to the help room a.btn.btn-lg.btn-info.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Cancel + +#reset-modal.modal(tabindex='-1') + .modal-dialog.animated.fadeInUp.fast-animation + .modal-content + .modal-header.challenge-list-header Clear your code? + a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × + .modal-body + h3 This will restore your code editor to its original state. + a.btn.btn-lg.btn-info.btn-block#reset-button(href='#', data-dismiss='modal', aria-hidden='true') Clear my code + a.btn.btn-lg.btn-primary.btn-block(href='#', data-dismiss='modal', aria-hidden='true') Cancel