1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
/**
* Created by robert on 9/17/15.
*/
(function() {
var problems,//this will the actual (sub)state machine
stateNameTag = 'stateName';
var divs = {};
divs['description'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#description)');//lets actually find the needed divs for later use
divs['code'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#code_editor)');
divs['console'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#console)');//named 'consoleDiv', because 'console' is already in use
divs['info'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#info)');
divs['description'].data(stateNameTag, 'description');
divs['code'].data(stateNameTag, 'code');
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
mouseDownEventFunction = function () {
problems.transition($(this).data(stateNameTag));
},
removeListenersFromDivs = function () {
$.each(divs, function (i, value) {
value.off(eventName, mouseDownEventFunction);
});
},
removeBlockClassesFromDivs = function () {
$.each(divs, function (i, value) {
value.removeClass('block');
});
},
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)
});
},
setTransitionsBetweenDivs = function (current) {
$.each(divs, function (key, value) {
if (current !== key) value.on(eventName, mouseDownEventFunction);
});
},
addClassesToDivs = function (divsWithClasses) {
$.each(divsWithClasses, function (divName, className) {
divs[divName].addClass(className);
});
},
substates = {
'description': {
'enter': function () {
removeBlockClassesFromDivs();
addClassesToDivs({
'description': 'block-focus',
'code': 'block-less-width',
'console': 'block-less-height',
'info': 'block-less-everything'
});
setTransitionsBetweenDivs('description');
},
'exit': function () {
removeChangedClassesFromDivs();
removeListenersFromDivs();
}
},
'code': {
'enter': function () {
removeBlockClassesFromDivs();
addClassesToDivs({
'description': 'block-less-width',
'code': 'block-focus',
'console': 'block-less-everything',
'info': 'block-less-height'
});
setTransitionsBetweenDivs('code');
},
'exit': function () {
removeChangedClassesFromDivs();
removeListenersFromDivs();
}
},
'info': {
'enter': function () {
removeBlockClassesFromDivs();
addClassesToDivs({
'description': 'block-less-everything',
'code': 'block-less-height',
'console': 'block-less-width',
'info': 'block-focus'
});
setTransitionsBetweenDivs('info');
},
'exit': function () {
removeChangedClassesFromDivs();
removeListenersFromDivs();
}
},
'console': {
'enter': function () {
removeBlockClassesFromDivs();
addClassesToDivs({
'description': 'block-less-height',
'code': 'block-less-everything',
'console': 'block-focus',
'info': 'block-less-width'
});
setTransitionsBetweenDivs('console');
},
'exit': function () {
removeChangedClassesFromDivs();
removeListenersFromDivs();
}
}
};
codeq.globalStateMachine.register('main', {
'enter': function () {
$('#screen_prolog').css('display', '');
problems = codeq.makeStateMachine(substates);
problems.transition(divs['description'].data(stateNameTag));
},
'exit': function () {
$('#screen_prolog').css('display', 'none');
problems.destroy();
}
});
})();
|
