fix storage and reset functionality for js and html challenge views
This commit is contained in:
@ -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();
|
||||
};
|
||||
|
@ -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();
|
||||
};
|
||||
|
@ -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');
|
||||
});
|
||||
|
@ -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
|
||||
},
|
||||
|
@ -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,
|
||||
|
@ -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
|
||||
|
@ -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)};
|
||||
|
@ -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
|
||||
|
Reference in New Issue
Block a user