summaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorAleš Smodiš <aless@guru.si>2015-09-21 17:45:31 +0200
committerAleš Smodiš <aless@guru.si>2015-09-21 17:45:31 +0200
commitcee672f22d516ecc73f84a3dbe01328883a2a47d (patch)
tree2f977f01c4619d2e422cbc8b498218cbe9972dc4 /js
parent86b478fc57f6eb8bc1addd07d4feb95c83f6792c (diff)
Refactoring: simplified python.js and prolog.js, removed all DOM IDs except for the top-level block #screen_prolog, made a copy of the latter into #screen_python so the two screens can now diverge.
Diffstat (limited to 'js')
-rw-r--r--js/codeq/prolog.js328
-rw-r--r--js/codeq/python.js270
-rw-r--r--js/codeq/stateMachine.js12
3 files changed, 189 insertions, 421 deletions
diff --git a/js/codeq/prolog.js b/js/codeq/prolog.js
index e411bc4..e339fea 100644
--- a/js/codeq/prolog.js
+++ b/js/codeq/prolog.js
@@ -5,221 +5,101 @@
*/
(function() {
- var subScreens,//this will the actual (sub)state machine
- stateNameTag = 'stateName';//a tag for data which is added to some html elements
-
- //get the divs which are the main elements being change on transitions between states in the sub-state machine
- var divs = {};
- divs['description'] = $('#description_outer_div');
- divs['code'] = $('#code_editor_outer_div');
- divs['console'] = $('#console_outer_div');
- divs['info'] = $('#info_outer_div');
-
- //these tags connect the div to their respective state in the sub-state machine
- divs['description'].data(stateNameTag, 'description');
- divs['code'].data(stateNameTag, 'code');
- divs['console'].data(stateNameTag, 'console');
- divs['info'].data(stateNameTag, 'info');
-
- var transitionEventName = 'mousedown',//event name of the event which will trigger the transition between these substates - the most common transition at least (there are some corner cases on the hint and test buttons -> see the code below)
- /**
- * the general function which should be called on the mousedown event to trigger the transition between states
- */
- mouseDownEventFunction = function () {
- subScreens.transition($(this).data(stateNameTag));
- },
- /**
- * removes the above function from the divs
- */
- removeListenersFromDivs = function () {
- $.each(divs, function (i, value) {
- value.off(transitionEventName, mouseDownEventFunction);
- });
- },
- /**
- * removes the 'block' class from all divs we need to change when we change the current state
- */
- removeBlockClassesFromDivs = function () {
- $.each(divs, function (i, value) {
- value.removeClass('block');
- });
- },
- /**
- * removes all those special classes from the divs, which are set when a new state is entered and it also adds the 'block' class back
- */
- removeChangedClassesFromDivs = function () {
- $.each(divs, function (i, value) {
- value.removeClass('block-focus block-less-width block-less-height block-less-everything').addClass('block');//these class names were chosen for the view where the screen is partitioned in 4 quarters (2 by 2)
- });
- },
- /**
- *
- * @param current the key of the state ('description','code','hint','console'), which is currently active, because it must not have a transition set
- */
- setTransitionsBetweenDivs = function (current) {
- $.each(divs, function (key, value) {
- if (current !== key) value.on(transitionEventName, mouseDownEventFunction);
- });
- },
- /**
- *
- * @param divsWithClasses a object where we have the keys of the divs object paired with the class name we want to assign to them e.g. :
- * {
- 'description': 'block-focus',
- 'code': 'block-less-width',
- 'console': 'block-less-height',
- 'info': 'block-less-everything'
- }
- */
- addClassesToDivs = function (divsWithClasses) {
- $.each(divsWithClasses, function (divName, className) {
- divs[divName].addClass(className);
- });
- },
- /**
- * the buttons (hint and test) will have to 'eat' the mousedown event to prevent some weird transitions.
- * Because a click on them won't trigger the transition to the code part, but will transition to the hints part.
- *
- * @param event
- */
- mouseDownEventIgnoreFun = function(event){
- event.stopPropagation();
- },
- /**
- * The transition from the buttons to the hints screen will be triggered with this function
- */
- clickListenerTransitionFun = function(){
- subScreens.transition(divs['info'].data(stateNameTag));
- },
- /**
- * add the above function to the buttons
- */
- addClickListenerTranstions = function(){
- $('#btn_code_plan').on('click',clickListenerTransitionFun);
- $('#btn_code_hint').on('click',clickListenerTransitionFun);
- $('#btn_code_test').on('click',clickListenerTransitionFun);
-
- $('#btn_code_plan').on(transitionEventName,mouseDownEventIgnoreFun);
- $('#btn_code_hint').on(transitionEventName,mouseDownEventIgnoreFun);
- $('#btn_code_test').on(transitionEventName,mouseDownEventIgnoreFun);
- },
- /**
- * and a function to remove it
- */
- removeClickListenerTransition = function(){
- $('#btn_code_plan').off('click',clickListenerTransitionFun);
- $('#btn_code_hint').off('click',clickListenerTransitionFun);
- $('#btn_code_test').off('click',clickListenerTransitionFun);
-
- $('#btn_code_plan').off(transitionEventName,mouseDownEventIgnoreFun);
- $('#btn_code_hint').off(transitionEventName,mouseDownEventIgnoreFun);
- $('#btn_code_test').off(transitionEventName,mouseDownEventIgnoreFun);
- },
+ var subScreens, //this will be the actual (sub)state machine
+ stateNameTag = 'stateName', //a tag for data which is added to some html elements
+ jqScreen = $('#screen_prolog'), // the screen container element
+ //quadrants
+ jqDescription = jqScreen.find('.block1'),
+ jqCode = jqScreen.find('.block2'),
+ jqConsole = jqScreen.find('.block3'),
+ jqInfo = jqScreen.find('.block4'),
+ jqAllQuadrants = jqDescription.add(jqCode).add(jqConsole).add(jqInfo), // all the quadrants
+ // buttons
+ jqBtnPlan = jqScreen.find('.btn-plan'),
+ jqBtnHint = jqScreen.find('.btn-hint'),
+ jqBtnTest = jqScreen.find('.btn-test'),
+ jqAllButtons = jqBtnPlan.add(jqBtnHint).add(jqBtnTest), // all the buttons
+ // misc
+ currentSubState = null,
+ transitionEventName = 'mousedown',//event name of the event which will trigger the transition between these substates - the most common transition at least (there are some corner cases on the hint and test buttons -> see the code below)
substates = {
'description': {
'enter': function () {
- removeBlockClassesFromDivs();
- addClassesToDivs({
- 'description': 'block-focus',
- 'code': 'block-less-width',
- 'console': 'block-less-height',
- 'info': 'block-less-everything'
- });
- setTransitionsBetweenDivs('description');
-
- //and set up the buttons
- addClickListenerTranstions();
+ currentSubState = 'block1';
+ jqScreen.addClass(currentSubState);
},
'exit': function () {
- removeChangedClassesFromDivs();
- removeListenersFromDivs();
- removeClickListenerTransition();
+ jqScreen.removeClass(currentSubState);
+ currentSubState = null;
}
},
'code': {
'enter': function () {
- removeBlockClassesFromDivs();
- addClassesToDivs({
- 'description': 'block-less-width',
- 'code': 'block-focus',
- 'console': 'block-less-everything',
- 'info': 'block-less-height'
- });
- setTransitionsBetweenDivs('code');
-
- //and set up the buttons
- addClickListenerTranstions();
+ currentSubState = 'block2';
+ jqScreen.addClass(currentSubState);
},
'exit': function () {
- removeChangedClassesFromDivs();
- removeListenersFromDivs();
- removeClickListenerTransition();
+ jqScreen.removeClass(currentSubState);
+ currentSubState = null;
}
},
'info': {
'enter': function () {
- removeBlockClassesFromDivs();
- addClassesToDivs({
- 'description': 'block-less-everything',
- 'code': 'block-less-height',
- 'console': 'block-less-width',
- 'info': 'block-focus'
- });
- setTransitionsBetweenDivs('info');
-
- //and set up the buttons
- addClickListenerTranstions();
+ currentSubState = 'block4';
+ jqScreen.addClass(currentSubState);
},
'exit': function () {
- removeChangedClassesFromDivs();
- removeListenersFromDivs();
- removeClickListenerTransition();
+ jqScreen.removeClass(currentSubState);
+ currentSubState = null;
}
},
'console': {
'enter': function () {
- removeBlockClassesFromDivs();
- addClassesToDivs({
- 'description': 'block-less-height',
- 'code': 'block-less-everything',
- 'console': 'block-focus',
- 'info': 'block-less-width'
- });
- setTransitionsBetweenDivs('console');
-
- //and set up the buttons
- addClickListenerTranstions();
+ currentSubState = 'block3';
+ jqScreen.addClass(currentSubState);
},
'exit': function () {
- removeChangedClassesFromDivs();
- removeListenersFromDivs();
- removeClickListenerTransition();
+ jqScreen.removeClass(currentSubState);
+ currentSubState = null;
}
}
};
- var prologHandler;//created when we enter the prolog state and destroyed once we leave it
+ var prologHandler; //created when we enter the prolog state and destroyed once we leave it
codeq.globalStateMachine.register('prolog', {
'enter': function (data) {
- $('#disabled').css('cursor', 'wait');
- $('#disabled').css('display', '');
- $('#screen_prolog').css('display', '');//we have to show the screen now so the code editor shopws its initial values correctly
- prologHandler = createPrologHandler(data.data)//codeq.createProgrammingLanguageHandler('prolog',data.data,codeq.makePrologTerminalHandler);
+ jqScreen.css('display', '');//we have to show the screen now so the code editor shows its initial values correctly
+ prologHandler = createPrologHandler(data.data);
subScreens = codeq.makeStateMachine(substates);
- subScreens.transition(divs['description'].data(stateNameTag));
- Q.delay(100).then(function(){
- $('div.col-lg-3.col-md-6.col-sm-12').addClass('transition');//for smooth animations - need to be delayed, because otherwise we get some weird "animations" while the page is loading
- }).done();
-
- $('#disabled').css('display', 'none');
+ subScreens.transition(jqDescription.data(stateNameTag));
+/* Q.delay(100).then(function(){
+ jqAllQuadrants.addClass('transition');//for smooth animations - need to be delayed, because otherwise we get some weird "animations" while the page is loading
+ }).done();*/
+ jqAllButtons.on(transitionEventName, function (event) {
+ subScreens.transition('info'); // set focus on the hints quadrant
+ event.stopPropagation(); // don't allow the event to go on and trigger further transition
+ });
+ jqAllQuadrants.on(transitionEventName, function () {
+ subScreens.transition($(this).data(stateNameTag));
+ });
},
'exit': function () {
- $('#screen_prolog').css('display', 'none');
- $('div.col-lg-3.col-md-6.col-sm-12').removeClass('transition');
+ jqAllButtons.off(); // unregister all event handlers
+ jqAllQuadrants.off();
+ jqScreen.css('display', 'none');
+// jqAllQuadrants.removeClass('transition');
prologHandler.destroy();
+ prologHandler = null;
subScreens.destroy();
+ subScreens = null;
+ jqScreen.addClass('.block1');
}
});
+ jqDescription.data(stateNameTag, 'description');
+ jqCode.data(stateNameTag, 'code');
+ jqConsole.data(stateNameTag, 'console');
+ jqInfo.data(stateNameTag, 'info');
+
// a constant
var firstCharacterPos = {'line': 0, 'ch': 0};
@@ -360,19 +240,19 @@
*/
createPrologHandler = function (info) {
var problem = info.problem,
- jqDescription = $('#description'),
- jqEditor = $('#code_editor'),
- jqConsole = $('#console'),
- jqHints = $('#info'),
+ jqDescriptionContent = jqDescription.find('.description'),
+ jqEditor = jqCode.find('.code_editor'),
+ jqTerminal = jqConsole.find('.console'),
+ jqHints = jqInfo.find('.hints'),
editor = CodeMirror(jqEditor[0], { cursorHeight: 0.85, lineNumbers: true, matchBrackets: true }),
activityHandler = makeActivityHandler(editor, problem.id),
- terminal = makePrologTerminalHandler(jqConsole, editor, problem.id, activityHandler),
+ terminal = makePrologTerminalHandler(jqTerminal, editor, problem.id, activityHandler),
hinter = codeq.makeHinter(jqHints, jqEditor, editor, problem.hint, problem.plan);
editor.setValue(info.solution);
$('#title').text(problem.slug);
- jqDescription.html(problem.description);
- $('#btn_code_plan').prop('disabled', (problem.plan || '').length == 0);
+ jqDescriptionContent.html(problem.description);
+ jqBtnPlan.prop('disabled', (problem.plan || '').length == 0);
editor.on('change', function (instance, changeObj) {
var doc = editor.getDoc(),
@@ -387,58 +267,57 @@
}
});
- $('#btn_code_plan').on('click', function () {
+ jqBtnPlan.on('click', function () {
if (!hinter.planNext()) {
- $('#btn_code_plan').prop('disabled', true);
- $('#btn_code_plan').blur();
+ jqBtnPlan.prop('disabled', true).blur();
}
});
- $('#btn_code_hint').on('click', function () {
+ jqBtnHint.on('click', function () {
terminal.append('hint.\n', 'input');
terminal.inputDisable();
var doc = editor.getDoc();
codeq.comms.sendHint({
- 'language': 'prolog',
- 'program': editor.getDoc().getValue(),
- 'problem_id': problem.id
- })
+ 'language': 'prolog',
+ 'program': editor.getDoc().getValue(),
+ 'problem_id': problem.id
+ })
.then(
- function hintSuccess(data) {
- if (data.code === 0)
- hinter.handle(data.hints);
- else
- terminal.append(data.message + '\n', 'error');
- },
- function hintFailed (error) {
- terminal.append(error + '\n', 'error');
- }
- )
+ function hintSuccess(data) {
+ if (data.code === 0)
+ hinter.handle(data.hints);
+ else
+ terminal.append(data.message + '\n', 'error');
+ },
+ function hintFailed (error) {
+ terminal.append(error + '\n', 'error');
+ }
+ )
.fin(function () {
terminal.inputEnable();
terminal.append('?- ', 'output');
})
.done();
});
- $('#btn_code_test').on('click', function () {
+ jqBtnTest.on('click', function () {
terminal.append('test.\n', 'input');
terminal.inputDisable();
var doc = editor.getDoc();
codeq.comms.sendTest({
- 'language': 'prolog',
- 'program': editor.getDoc().getValue(),
- 'problem_id': problem.id
- })
+ 'language': 'prolog',
+ 'program': editor.getDoc().getValue(),
+ 'problem_id': problem.id
+ })
.then(
- function testSuccess(data) {
- if (data.code === 0)
- hinter.handle(data.hints);
- else
- terminal.append(data.message + '\n', 'error');
- },
- function testFailed (error) {
- terminal.append(error + '\n', 'error');
- }
- )
+ function testSuccess(data) {
+ if (data.code === 0)
+ hinter.handle(data.hints);
+ else
+ terminal.append(data.message + '\n', 'error');
+ },
+ function testFailed (error) {
+ terminal.append(error + '\n', 'error');
+ }
+ )
.fin(function () {
terminal.inputEnable();
terminal.append('?- ', 'output');
@@ -448,17 +327,16 @@
return {
destroy: function () {
- $('#btn_code_hint').off('click');
- $('#btn_code_test').off('click');
+ jqAllButtons.off();
editor.off('change');
hinter.destroy();
terminal.destroy();
- jqDescription.empty();
+ jqDescriptionContent.empty();
jqEditor.empty(); // TODO: perhaps you do not want to "free" the editor, just empty it
- jqConsole.empty(); // TODO: the same with the console
- jqDescription = null;
+ jqTerminal.empty(); // TODO: the same with the console
+ jqDescriptionContent = null;
jqEditor = null;
- jqConsole = null;
+ jqTerminal = null;
jqHints = null;
}
};
diff --git a/js/codeq/python.js b/js/codeq/python.js
index c5f7df6..39077d8 100644
--- a/js/codeq/python.js
+++ b/js/codeq/python.js
@@ -7,219 +7,101 @@
*/
(function() {
- var subScreens,//this will the actual (sub)state machine
- stateNameTag = 'stateName';//a tag for data which is added to some html elements
-
- //get the divs which are the main elements being change on transitions between states in the sub-state machine
- var divs = {};
- divs['description'] = $('#description_outer_div');
- divs['code'] = $('#code_editor_outer_div');
- divs['console'] = $('#console_outer_div');
- divs['info'] = $('#info_outer_div');
-
- //these tags connect the div to their respective state in the sub-state machine
- divs['description'].data(stateNameTag, 'description');
- divs['code'].data(stateNameTag, 'code');
- divs['console'].data(stateNameTag, 'console');
- divs['info'].data(stateNameTag, 'info');
-
- var transitionEventName = 'mousedown',//event name of the event which will trigger the transition between these substates - the most common transition at least (there are some corner cases on the hint and test buttons -> see the code below)
- /**
- * the general function which should be called on the mousedown event to trigger the transition between states
- */
- mouseDownEventFunction = function () {
- subScreens.transition($(this).data(stateNameTag));
- },
- /**
- * removes the above function from the divs
- */
- removeListenersFromDivs = function () {
- $.each(divs, function (i, value) {
- value.off(transitionEventName, mouseDownEventFunction);
- });
- },
- /**
- * removes the 'block' class from all divs we need to change when we change the current state
- */
- removeBlockClassesFromDivs = function () {
- $.each(divs, function (i, value) {
- value.removeClass('block');
- });
- },
- /**
- * removes all those special classes from the divs, which are set when a new state is entered and it also adds the 'block' class back
- */
- removeChangedClassesFromDivs = function () {
- $.each(divs, function (i, value) {
- value.removeClass('block-focus block-less-width block-less-height block-less-everything').addClass('block');//these class names were chosen for the view where the screen is partitioned in 4 quarters (2 by 2)
- });
- },
- /**
- *
- * @param current the key of the state ('description','code','hint','console'), which is currently active, because it must not have a transition set
- */
- setTransitionsBetweenDivs = function (current) {
- $.each(divs, function (key, value) {
- if (current !== key) value.on(transitionEventName, mouseDownEventFunction);
- });
- },
- /**
- *
- * @param divsWithClasses a object where we have the keys of the divs object paired with the class name we want to assign to them e.g. :
- * {
- 'description': 'block-focus',
- 'code': 'block-less-width',
- 'console': 'block-less-height',
- 'info': 'block-less-everything'
- }
- */
- addClassesToDivs = function (divsWithClasses) {
- $.each(divsWithClasses, function (divName, className) {
- divs[divName].addClass(className);
- });
- },
- /**
- * the buttons (hint and test) will have to 'eat' the mousedown event to prevent some weird transitions.
- * Because a click on them won't trigger the transition to the code part, but will transition to the hints part.
- *
- * @param event
- */
- mouseDownEventIgnoreFun = function(event){
- event.stopPropagation();
- },
- /**
- * The transition from the buttons to the hints screen will be triggered with this function
- */
- clickListenerTransitionFun = function(){
- subScreens.transition(divs['info'].data(stateNameTag));
- },
- /**
- * add the above function to the buttons
- */
- addClickListenerTranstions = function(){
- $('#btn_code_plan').on('click',clickListenerTransitionFun);
- $('#btn_code_hint').on('click',clickListenerTransitionFun);
- $('#btn_code_test').on('click',clickListenerTransitionFun);
-
- $('#btn_code_plan').on(transitionEventName,mouseDownEventIgnoreFun);
- $('#btn_code_hint').on(transitionEventName,mouseDownEventIgnoreFun);
- $('#btn_code_test').on(transitionEventName,mouseDownEventIgnoreFun);
- },
- /**
- * and a function to remove it
- */
- removeClickListenerTransition = function(){
- $('#btn_code_plan').off('click',clickListenerTransitionFun);
- $('#btn_code_hint').off('click',clickListenerTransitionFun);
- $('#btn_code_test').off('click',clickListenerTransitionFun);
-
- $('#btn_code_plan').off(transitionEventName,mouseDownEventIgnoreFun);
- $('#btn_code_hint').off(transitionEventName,mouseDownEventIgnoreFun);
- $('#btn_code_test').off(transitionEventName,mouseDownEventIgnoreFun);
- },
+ var subScreens, //this will be the actual (sub)state machine
+ stateNameTag = 'stateName', //a tag for data which is added to some html elements
+ jqScreen = $('#screen_python'), // the screen container element
+ //quadrants
+ jqDescription = jqScreen.find('.block1'),
+ jqCode = jqScreen.find('.block2'),
+ jqConsole = jqScreen.find('.block3'),
+ jqInfo = jqScreen.find('.block4'),
+ jqAllQuadrants = jqDescription.add(jqCode).add(jqConsole).add(jqInfo), // all the quadrants
+ // buttons
+ jqBtnPlan = jqScreen.find('.btn-plan'),
+ jqBtnHint = jqScreen.find('.btn-hint'),
+ jqBtnTest = jqScreen.find('.btn-test'),
+ jqAllButtons = jqBtnPlan.add(jqBtnHint).add(jqBtnTest), // all the buttons
+ // misc
+ currentSubState = null,
+ transitionEventName = 'mousedown',//event name of the event which will trigger the transition between these substates - the most common transition at least (there are some corner cases on the hint and test buttons -> see the code below)
substates = {
'description': {
'enter': function () {
- removeBlockClassesFromDivs();
- addClassesToDivs({
- 'description': 'block-focus',
- 'code': 'block-less-width',
- 'console': 'block-less-height',
- 'info': 'block-less-everything'
- });
- setTransitionsBetweenDivs('description');
-
- //and set up the buttons
- addClickListenerTranstions();
+ currentSubState = 'block1';
+ jqScreen.addClass(currentSubState);
},
'exit': function () {
- removeChangedClassesFromDivs();
- removeListenersFromDivs();
- removeClickListenerTransition();
+ jqScreen.removeClass(currentSubState);
+ currentSubState = null;
}
},
'code': {
'enter': function () {
- removeBlockClassesFromDivs();
- addClassesToDivs({
- 'description': 'block-less-width',
- 'code': 'block-focus',
- 'console': 'block-less-everything',
- 'info': 'block-less-height'
- });
- setTransitionsBetweenDivs('code');
-
- //and set up the buttons
- addClickListenerTranstions();
+ currentSubState = 'block2';
+ jqScreen.addClass(currentSubState);
},
'exit': function () {
- removeChangedClassesFromDivs();
- removeListenersFromDivs();
- removeClickListenerTransition();
+ jqScreen.removeClass(currentSubState);
+ currentSubState = null;
}
},
'info': {
'enter': function () {
- removeBlockClassesFromDivs();
- addClassesToDivs({
- 'description': 'block-less-everything',
- 'code': 'block-less-height',
- 'console': 'block-less-width',
- 'info': 'block-focus'
- });
- setTransitionsBetweenDivs('info');
-
- //and set up the buttons
- addClickListenerTranstions();
+ currentSubState = 'block4';
+ jqScreen.addClass(currentSubState);
},
'exit': function () {
- removeChangedClassesFromDivs();
- removeListenersFromDivs();
- removeClickListenerTransition();
+ jqScreen.removeClass(currentSubState);
+ currentSubState = null;
}
},
'console': {
'enter': function () {
- removeBlockClassesFromDivs();
- addClassesToDivs({
- 'description': 'block-less-height',
- 'code': 'block-less-everything',
- 'console': 'block-focus',
- 'info': 'block-less-width'
- });
- setTransitionsBetweenDivs('console');
-
- //and set up the buttons
- addClickListenerTranstions();
+ currentSubState = 'block3';
+ jqScreen.addClass(currentSubState);
},
'exit': function () {
- removeChangedClassesFromDivs();
- removeListenersFromDivs();
- removeClickListenerTransition();
+ jqScreen.removeClass(currentSubState);
+ currentSubState = null;
}
}
};
- var pythonHandler;
+ var pythonHandler; //created when we enter the python state and destroyed once we leave it
codeq.globalStateMachine.register('python', {
'enter': function (data) {
- $('#disabled').css('display', '');
- $('#screen_prolog').css('display', '');//we have to show the screen now so the code editor shopws its initial values correctly
- pythonHandler = createPythonHandler(data.data);//codeq.createProgrammingLanguageHandler('prolog',data.data,codeq.makePythonTerminalHandler);
+ jqScreen.css('display', '');//we have to show the screen now so the code editor shows its initial values correctly
+ pythonHandler = createPythonHandler(data.data);
subScreens = codeq.makeStateMachine(substates);
- subScreens.transition(divs['description'].data(stateNameTag));
- Q.delay(100).then(function(){
- $('div.col-lg-3.col-md-6.col-sm-12').addClass('transition');
- }).done();
- $('#disabled').css('display', 'none');
+ subScreens.transition(jqDescription.data(stateNameTag));
+/* Q.delay(100).then(function(){
+ jqAllQuadrants.addClass('transition');//for smooth animations - need to be delayed, because otherwise we get some weird "animations" while the page is loading
+ }).done();*/
+ jqAllButtons.on(transitionEventName, function (event) {
+ subScreens.transition('info'); // set focus on the hints quadrant
+ event.stopPropagation(); // don't allow the event to go on and trigger further transition
+ });
+ jqAllQuadrants.on(transitionEventName, function () {
+ subScreens.transition($(this).data(stateNameTag));
+ });
},
'exit': function () {
- $('#screen_prolog').css('display', 'none');
- $('div.col-lg-3.col-md-6.col-sm-12').removeClass('transition');
+ jqAllButtons.off(); // unregister all event handlers
+ jqAllQuadrants.off();
+ jqScreen.css('display', 'none');
+// jqAllQuadrants.removeClass('transition');
pythonHandler.destroy();
+ pythonHandler = null;
subScreens.destroy();
+ subScreens = null;
+ jqScreen.addClass('.block1');
}
});
+ jqDescription.data(stateNameTag, 'description');
+ jqCode.data(stateNameTag, 'code');
+ jqConsole.data(stateNameTag, 'console');
+ jqInfo.data(stateNameTag, 'info');
+
// a constant
var firstCharacterPos = {'line': 0, 'ch': 0};
@@ -310,19 +192,19 @@
*/
var createPythonHandler = function (info) {
var problem = info.problem,
- jqDescription = $('#description'),
- jqEditor = $('#code_editor'),
- jqConsole = $('#console'),
- jqHints = $('#info'),
+ jqDescriptionContent = jqDescription.find('.description'),
+ jqEditor = jqCode.find('.code_editor'),
+ jqTerminal = jqConsole.find('.console'),
+ jqHints = jqInfo.find('.hints'),
editor = CodeMirror(jqEditor[0], { cursorHeight: 0.85, lineNumbers: true, matchBrackets: true, mode: 'python' }),
activityHandler = makeActivityHandler(editor, problem.id),
- terminal = makePythonTerminalHandler(jqConsole, editor, problem.id, activityHandler),
+ terminal = makePythonTerminalHandler(jqTerminal, editor, problem.id, activityHandler),
hinter = codeq.makeHinter(jqHints, jqEditor, editor, problem.hint, problem.plan);
editor.setValue(info.solution);
$('#title').text(problem.slug);
- jqDescription.html(problem.description);
- $('#btn_code_plan').prop('disabled', (problem.plan || '').length == 0);
+ jqDescriptionContent.html(problem.description);
+ jqBtnPlan.prop('disabled', (problem.plan || '').length == 0);
editor.on('change', function (instance, changeObj) {
var doc = editor.getDoc(),
@@ -337,13 +219,12 @@
}
});
- $('#btn_code_plan').on('click', function () {
+ jqBtnPlan.on('click', function () {
if (!hinter.planNext()) {
- $('#btn_code_plan').prop('disabled', true);
- $('#btn_code_plan').blur();
+ jqBtnPlan.prop('disabled', true).blur();
}
});
- $('#btn_code_hint').on('click', function () {
+ jqBtnHint.on('click', function () {
var doc = editor.getDoc();
codeq.comms.sendHint({
'language': 'python',
@@ -361,7 +242,7 @@
}
).done();
});
- $('#btn_code_test').on('click', function () {
+ jqBtnTest.on('click', function () {
var doc = editor.getDoc();
codeq.comms.sendTest({
'language': 'python',
@@ -387,17 +268,16 @@
return {
destroy: function () {
- $('#btn_code_hint').off('click');
- $('#btn_code_test').off('click');
+ jqAllButtons.off();
editor.off('change');
hinter.destroy();
terminal.destroy();
- jqDescription.empty();
+ jqDescriptionContent.empty();
jqEditor.empty(); // TODO: perhaps you do not want to "free" the editor, just empty it
- jqConsole.empty(); // TODO: the same with the console
- jqDescription = null;
+ jqTerminal.empty(); // TODO: the same with the console
+ jqDescriptionContent = null;
jqEditor = null;
- jqConsole = null;
+ jqTerminal = null;
jqHints = null;
}
};
diff --git a/js/codeq/stateMachine.js b/js/codeq/stateMachine.js
index cfb27e7..dff89d5 100644
--- a/js/codeq/stateMachine.js
+++ b/js/codeq/stateMachine.js
@@ -6,8 +6,17 @@ codeq.makeStateMachine = function(def){
var currState = null;
return {
'transition': function(name){
+ var newState = def[name];
+ if (!newState) {
+ codeq.log.error('Cannot transition to state ' + name + ': it is not defined');
+ return;
+ }
+ if (newState === currState) {
+ codeq.log.info('Will not transition between identical states: ' + name);
+ return;
+ }
if(currState !== null) currState.exit();
- currState = def[name];
+ currState = newState;
currState.enter.apply(currState,Array.prototype.slice.apply(arguments,[1]));
},
'destroy': function(){
@@ -15,6 +24,7 @@ codeq.makeStateMachine = function(def){
currState = null;
},
'register': function(name,state){
+ if (name in def) codeq.log.error('The state ' + name + ' is already registered, overriding');
def[name] = state;
}
}