diff options
| -rw-r--r-- | js/codeq/prolog.js | 57 |
1 files changed, 54 insertions, 3 deletions
diff --git a/js/codeq/prolog.js b/js/codeq/prolog.js index a663e06..6c53777 100644 --- a/js/codeq/prolog.js +++ b/js/codeq/prolog.js @@ -19,7 +19,7 @@ divs['console'].data(stateNameTag, 'console'); divs['info'].data(stateNameTag, 'info'); - var eventName = 'mousedown',//event name of the event which will trigger the transition between these substates + 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 */ @@ -31,7 +31,7 @@ */ removeListenersFromDivs = function () { $.each(divs, function (i, value) { - value.off(eventName, mouseDownEventFunction); + value.off(transitionEventName, mouseDownEventFunction); }); }, /** @@ -56,7 +56,7 @@ */ setTransitionsBetweenDivs = function (current) { $.each(divs, function (key, value) { - if (current !== key) value.on(eventName, mouseDownEventFunction); + if (current !== key) value.on(transitionEventName, mouseDownEventFunction); }); }, /** @@ -74,6 +74,41 @@ 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(){ + problems.transition(divs['info'].data(stateNameTag)); + }, + /** + * add the above function to the buttons + */ + addClickListenerTranstions = function(){ + $('#btn_code_hint').on('click',clickListenerTransitionFun); + $('#btn_code_test').on('click',clickListenerTransitionFun); + + $('#btn_code_hint').on(transitionEventName,mouseDownEventIgnoreFun); + $('#btn_code_test').on(transitionEventName,mouseDownEventIgnoreFun); + }, + /** + * and a function to remove it + */ + removeClickListenerTransition = function(){ + $('#btn_code_hint').off('click',clickListenerTransitionFun); + $('#btn_code_test').off('click',clickListenerTransitionFun); + + $('#btn_code_hint').off(transitionEventName,mouseDownEventIgnoreFun); + $('#btn_code_test').off(transitionEventName,mouseDownEventIgnoreFun); + }, substates = { 'description': { 'enter': function () { @@ -85,10 +120,14 @@ 'info': 'block-less-everything' }); setTransitionsBetweenDivs('description'); + + //and set up the buttons + addClickListenerTranstions(); }, 'exit': function () { removeChangedClassesFromDivs(); removeListenersFromDivs(); + removeClickListenerTransition(); } }, 'code': { @@ -101,10 +140,14 @@ 'info': 'block-less-height' }); setTransitionsBetweenDivs('code'); + + //and set up the buttons + addClickListenerTranstions(); }, 'exit': function () { removeChangedClassesFromDivs(); removeListenersFromDivs(); + removeClickListenerTransition(); } }, 'info': { @@ -117,10 +160,14 @@ 'info': 'block-focus' }); setTransitionsBetweenDivs('info'); + + //and set up the buttons + addClickListenerTranstions(); }, 'exit': function () { removeChangedClassesFromDivs(); removeListenersFromDivs(); + removeClickListenerTransition(); } }, 'console': { @@ -133,10 +180,14 @@ 'info': 'block-less-width' }); setTransitionsBetweenDivs('console'); + + //and set up the buttons + addClickListenerTranstions(); }, 'exit': function () { removeChangedClassesFromDivs(); removeListenersFromDivs(); + removeClickListenerTransition(); } } }; |