summaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorRobert Zorko <robertz@gurucue.com>2015-09-18 11:17:13 +0200
committerRobert Zorko <robertz@gurucue.com>2015-09-18 11:17:13 +0200
commite31b714410968e20078ef9405bbe04c53a1efdc2 (patch)
treedcc370bc0ed9af4a72eaacdb74088465ef505337 /js
parent395f54581a44746cf91e5388b89c11f6ae9982ba (diff)
added another possible transition in the main app screen - the hint and test buttons will always transition to the 'hints' quarter
Diffstat (limited to 'js')
-rw-r--r--js/codeq/prolog.js57
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();
}
}
};