fix storage and reset functionality for js and html challenge views

This commit is contained in:
Quincy Larson
2015-07-31 13:37:06 -07:00
parent f1b964a26d
commit 2547868854
8 changed files with 229 additions and 120 deletions

View File

@ -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();
};

View File

@ -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();
};

View File

@ -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');
});

View File

@ -121,7 +121,7 @@
"For example, if we created a variable <code>var firstName = \"Julie\"</code>, we could find out how long the string \"Julie\" is by using the <code>firstName.length</code> 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 <code>myfloat</code> 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
},

View File

@ -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,

View File

@ -36,6 +36,9 @@ block content
| &nbsp; 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
| &nbsp; Reset
label.btn.btn-success#trigger-help-modal
i.fa.fa-medkit
| &nbsp; Help

View File

@ -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)};

View File

@ -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