From 5c87d98c0b3383c7ad63f0b69e36110b915e36c2 Mon Sep 17 00:00:00 2001 From: Robert Zorko Date: Tue, 22 Sep 2015 18:13:31 +0200 Subject: enabled buttons in the navigation header (at least buttons on the left side of the bar), renamed stateMachine to navigation --- js/codeq/language.js | 19 ++++++++- js/codeq/login.js | 10 +++++ js/codeq/navigation.js | 104 +++++++++++++++++++++++++++++++++++++++++++++++ js/codeq/problem.js | 23 +++++++++++ js/codeq/prolog.js | 15 ++++++- js/codeq/python.js | 15 ++++++- js/codeq/stateMachine.js | 32 --------------- 7 files changed, 183 insertions(+), 35 deletions(-) create mode 100644 js/codeq/navigation.js delete mode 100644 js/codeq/stateMachine.js (limited to 'js/codeq') diff --git a/js/codeq/language.js b/js/codeq/language.js index 2864098..d4b6ee4 100644 --- a/js/codeq/language.js +++ b/js/codeq/language.js @@ -5,14 +5,31 @@ (function(){ codeq.globalStateMachine.register('language',{ 'enter': function(){ - $("#screen_language").css('display', ''); $('#submit_language').on('click',function(){ codeq.globalStateMachine.transition('problem',$('#language').val()); + //var lan = $('#language').val(); + //codeq.activateState('problem',{'lan':lan}); }); + + $('#navigation-login').css('display', ''); + /*$('#navigation-login').on('click', function(){ + codeq.globalStateMachine.transition('login'); + //codeq.activateState('login'); + });*/ + $("#navigation-language").addClass("active"); + $('#navigation-language').css('display', ''); + + $("#screen_language").css('display', ''); }, 'exit' : function(){ $("#submit_language").off(); $("#screen_language").css('display', 'none'); + + $('#navigation-login').css('display', 'none'); + //$('#navigation-login').off(); + $('#navigation-language').css('display', 'none'); + $("#navigation-language").removeClass("active"); + $('#language').val("prolog");//reset to the default value } }); diff --git a/js/codeq/login.js b/js/codeq/login.js index 11a4900..bb92325 100644 --- a/js/codeq/login.js +++ b/js/codeq/login.js @@ -15,24 +15,34 @@ $('#disabled').css('cursor', ''); if (data.code !== 0) throw new Error('Login failed, code: ' + data.code + ', message: ' + data.message); codeq.globalStateMachine.transition('language'); + //codeq.activateState('language'); }) .fail(function (reason) { $('#disabled').css('display', 'none'); $('#disabled').css('cursor', ''); codeq.log.error('Login failed: ' + reason, reason); alert('Login request failed: ' + reason); + $('#disabled').css('display', 'none'); }) .done(); }; codeq.globalStateMachine.register('login',{ 'enter': function(){ $("#submit").on('click', loginFun); + + $("#navigation-login").addClass("active"); + $('#navigation-login').css('display', ''); + $("#screen_login").css('display', ''); $('#disabled').css('display', 'none'); }, 'exit' : function(){ $("#submit").off('click', loginFun); $("#screen_login").css('display', 'none'); + $("#password").val(''); + + $('#navigation-login').css('display', 'none'); + $("#navigation-login").removeClass("active"); } }); })(); \ No newline at end of file diff --git a/js/codeq/navigation.js b/js/codeq/navigation.js new file mode 100644 index 0000000..4445a3d --- /dev/null +++ b/js/codeq/navigation.js @@ -0,0 +1,104 @@ +/** + * Created by robert on 9/15/15. + */ +(function() { + 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 = newState; + currState.enter.apply(currState, Array.prototype.slice.apply(arguments, [1])); + }, + 'destroy': function () { + if (currState !== null) currState.exit(); + currState = null; + }, + 'register': function (name, state) { + if (name in def) codeq.log.error('The state ' + name + ' is already registered, overriding'); + def[name] = state; + } + } + }; + + + //the global state machine is a bit different - so it'll be implemented here + var makeGlobalStateMachine = function (def) { + var currState = null; + var stateChangeFun = function historyStateChangeHandler() { + var historyState = History.getState(); + codeq.globalStateMachine.actualTransition.apply(codeq.globalStateMachine, $.merge([historyState.data.state] ,historyState.data.params)); + }; + History.Adapter.bind(window, 'statechange', stateChangeFun); + //prepare the history state change listener + 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(History.getState().data.state === name) codeq.globalStateMachine.actualTransition.apply(codeq.globalStateMachine,Array.prototype.slice.apply(arguments, [0]));//special case which happens if the user refreshes while in the login screen (history state doesn't change because it goes from login to login and the above listener doesn't trigger) + try { + History.pushState({'state': name, 'params': Array.prototype.slice.apply(arguments, [1])}, null, '?s=' + name); + } + catch (e) { + codeq.log.error('init: History.pushState() failed for new state ' + name+'. Error:'+e); + } + }, + 'destroy': function () { + if (currState !== null) currState.exit(); + currState = null; + History.Adapter.unbind(window, 'statechange', stateChangeFun); + }, + 'register': function (name, state) { + if (name in def) codeq.log.error('The state ' + name + ' is already registered, overriding'); + def[name] = state; + }, + 'actualTransition': function (name) { + var newState = def[name];//if the newState is not the same as the old or if it doesn't exist at all is already checked at this point + if (currState) currState.exit(); + currState = newState; + currState.enter.apply(currState, Array.prototype.slice.apply(arguments, [1])); + } + } + }; + codeq.globalStateMachine = makeGlobalStateMachine({}); + + + //setup all the buttons in the banner + $('#navigation-login').on('click', function(e){ + codeq.globalStateMachine.transition('login'); + e.preventDefault();//prevent this since we'll trigger a page reload otherwise + }); + $('#navigation-language').on('click', function(e){ + codeq.globalStateMachine.transition('language'); + e.preventDefault(); + }); + $('#navigation-problem').on('click', function(e){ + codeq.globalStateMachine.transition('problem'); + e.preventDefault(); + }); + $('#navigation-python').on('click', function(e){ + codeq.globalStateMachine.transition('python'); + e.preventDefault(); + }); + $('#navigation-prolog').on('click', function(e){ + codeq.globalStateMachine.transition('prolog'); + e.preventDefault(); + }); +})(); \ No newline at end of file diff --git a/js/codeq/problem.js b/js/codeq/problem.js index 6debf6d..f19cbd4 100644 --- a/js/codeq/problem.js +++ b/js/codeq/problem.js @@ -7,10 +7,26 @@ */ (function(){ + var lastLanguage; codeq.globalStateMachine.register('problem',{ 'enter': function(language){ + if(language)lastLanguage = language; + else language = lastLanguage;//This happens when we hit this with the back button + $('#disabled').css('display', ''); $('#disabled').css('cursor', 'wait'); + + $('#navigation-login').css('display', ''); + /*$('#navigation-login').on('click', function(){ + codeq.globalStateMachine.transition('login'); + });*/ + $('#navigation-language').css('display', ''); + /*$('#navigation-language').on('click', function(){ + codeq.globalStateMachine.transition('language'); + });*/ + $("#navigation-problem").addClass("active"); + $('#navigation-problem').css('display', ''); + codeq.comms.send({'action': 'list_problems', 'language':language}) .then( function success(data) { @@ -99,6 +115,13 @@ $("#problem_group option").remove();//empty the selects $("#problems option").remove(); $("#screen_problem").css('display', 'none'); + + $('#navigation-login').css('display', 'none'); + //$('#navigation-login').off(); + $('#navigation-language').css('display', 'none'); + //$('#navigation-language').off(); + $('#navigation-problem').css('display', 'none'); + $("#navigation-problem").removeClass("active"); } }); })(); \ No newline at end of file diff --git a/js/codeq/prolog.js b/js/codeq/prolog.js index e339fea..d01cc54 100644 --- a/js/codeq/prolog.js +++ b/js/codeq/prolog.js @@ -67,6 +67,12 @@ var prologHandler; //created when we enter the prolog state and destroyed once we leave it codeq.globalStateMachine.register('prolog', { 'enter': function (data) { + $('#navigation-login').css('display', ''); + $('#navigation-language').css('display', ''); + $('#navigation-problem').css('display', ''); + $("#navigation-prolog").addClass("active"); + $('#navigation-prolog').css('display', ''); + 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); @@ -91,7 +97,13 @@ prologHandler = null; subScreens.destroy(); subScreens = null; - jqScreen.addClass('.block1'); + jqScreen.addClass('block1'); + + $('#navigation-login').css('display', 'none'); + $('#navigation-language').css('display', 'none'); + $('#navigation-problem').css('display', 'none'); + $("#navigation-prolog").removeClass("active"); + $('#navigation-prolog').css('display', 'none'); } }); @@ -327,6 +339,7 @@ return { destroy: function () { + $('#title').text('');//empty the title text jqAllButtons.off(); editor.off('change'); hinter.destroy(); diff --git a/js/codeq/python.js b/js/codeq/python.js index e5b59c2..66f0371 100644 --- a/js/codeq/python.js +++ b/js/codeq/python.js @@ -69,6 +69,12 @@ var pythonHandler; //created when we enter the python state and destroyed once we leave it codeq.globalStateMachine.register('python', { 'enter': function (data) { + $('#navigation-login').css('display', ''); + $('#navigation-language').css('display', ''); + $('#navigation-problem').css('display', ''); + $("#navigation-python").addClass("active"); + $('#navigation-python').css('display', ''); + 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); @@ -93,7 +99,13 @@ pythonHandler = null; subScreens.destroy(); subScreens = null; - jqScreen.addClass('.block1'); + jqScreen.addClass('block1'); + + $('#navigation-login').css('display', 'none'); + $('#navigation-language').css('display', 'none'); + $('#navigation-problem').css('display', 'none'); + $("#navigation-python").removeClass("active"); + $('#navigation-python').css('display', 'none'); } }); @@ -268,6 +280,7 @@ return { destroy: function () { + $('#title').text('');//empty the title text jqAllButtons.off(); editor.off('change'); codeq.comms.off('terminal_output'); // stop listening for the terminal events from server diff --git a/js/codeq/stateMachine.js b/js/codeq/stateMachine.js deleted file mode 100644 index dff89d5..0000000 --- a/js/codeq/stateMachine.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * Created by robert on 9/15/15. - */ - -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 = newState; - currState.enter.apply(currState,Array.prototype.slice.apply(arguments,[1])); - }, - 'destroy': function(){ - if(currState !== null) currState.exit(); - currState = null; - }, - 'register': function(name,state){ - if (name in def) codeq.log.error('The state ' + name + ' is already registered, overriding'); - def[name] = state; - } - } -}; -codeq.globalStateMachine = codeq.makeStateMachine({}); \ No newline at end of file -- cgit v1.2.1