Download as
Browse Code »

Commit e0c12d9c0fdc2f9f046dfa4ef0862599b0bb50d9

Authored by Cassio Cabral
1 parent 0f26c3be
Exists in master and in 1 other branch dynamic

fix bugs and add show and hide listeners

Showing 5 changed files with 697 additions and 711 deletions   Show diff stats
view/assets/js/dynamic-loading-engine.js
  Diff comments   View file @e0c12d9
1 1 (function(dynengine, $, undefined) {
2 2 var setup = undefined;
3 3  
4   - function _setup() {
5   - setup = {
6   - 'mao_direita': {
7   - 'movimentos': {
8   - 'pontual': {
9   - 'timeline': [
10   - {
11   - 'ordem': 1,
12   - 'timeline_icon': 'a',
13   - 'templates': [
14   - {
15   - 'url': 'http://url.com',
16   - 'ordem': 1
17   - },
18   - {
19   - 'url': 'http://url2.com',
20   - 'ordem': 2
21   - }
22   - ]
23   - }
24   - ]
25   - },
26   - 'circular': {}
27   - }
28   - }
29   - };
30   - };
31   -
32 4 _preprocessHtml = function(data, url) {
33 5 return data.replace(/{{ server }}/g, url);
34 6 };
35 7  
36   - dynengine.render = function(serverUrl, templatePath, target) {
  8 + dynengine.render = function(serverUrl, templatePath, target, callback) {
37 9 var url = serverUrl + templatePath;
38 10 $.get(url, function(data) {
39 11 // TODO replace or append boolean
  12 + console.log('got: ' + url);
40 13 $(target).append(_preprocessHtml(data, serverUrl));
  14 + })
  15 + .done(function() {
  16 + callback && callback(); // call if defined
41 17 });
42 18 },
43 19  
... ... @@ -53,19 +29,18 @@
53 29  
54 30 $('#avatar-body-right-hand').bind('click', function() {
55 31 console.log('click avatar hand');
56   - $('#selection-panel').load(url + '/' + 'right-hand/movements.html', function () {
  32 + dynengine.render(url, '/right-hand/movements.html', '#selection-panel', function() {
57 33 $('.movimento-pontual').bind('click', function() {
58 34 console.log('movimento pontual');
59 35 dynengine.clean('#selection-panel');
60   - dynengine.render(url, '/right-hand/pontual/timeline.html', '#selection-panel');
61 36 dynengine.render(url, '/right-hand/pontual/passo-1.html', '#selection-panel');
62 37 dynengine.render(url, '/right-hand/pontual/passo-2.html', '#selection-panel');
63 38 dynengine.render(url, '/right-hand/pontual/passo-3.html', '#selection-panel');
64   -
  39 + dynengine.render(url, '/right-hand/pontual/timeline.html', '#selection-panel');
65 40 });
66 41 });
67   - });
68 42  
  43 + });
69 44  
70 45 };
71 46  
... ...
view/assets/js/wikilibras.js
  Diff comments   View file @e0c12d9
1 1 (function(wikilibras, $, undefined) {
2 2  
3   - var videos_url = "";
4   - var base_url = "";
5   - var server_backend_url = "";
6   - var api_url = "";
7   - var current_task_id = -1;
8   - var base_parameter_json = {};
9   - var moviment_parameter_json = {};
10   -
11   - function _getLoggedUser() {
12   - var pybossa_rembember_token = Cookies.get("remember_token");
13   - var splitted_token_id = pybossa_rembember_token.split("|");
14   - return splitted_token_id.length > 0 ? splitted_token_id[0]
15   - : "anonymous";
16   - }
17   -
18   - function _setupParameterJSON(sign_name) {
19   - base_parameter_json["userId"] = _getLoggedUser();
20   - base_parameter_json["sinal"] = sign_name;
21   - base_parameter_json["interpolacao"] = "normal";
22   - base_parameter_json["movimentos"] = [];
23   - moviment_parameter_json = {
24   - "facial" : {},
25   - "mao_direita" : {},
26   - "mao_esquerda" : {}
27   - };
28   - }
29   -
30   - function _loadTaskInfo(task) {
31   - current_task_id = task.id;
32   - var sign_name = task.info.sign_name;
33   - var ref_vid_link = videos_url + sign_name + "_REF.webm";
34   - $(".sign-label").text(sign_name);
35   - $(".ref-video").attr("src", ref_vid_link);
36   -
37   - _setupParameterJSON(task.info.sign_name);
38   - }
39   -
40   - function _changeImage(img, url) {
41   - img.attr("src", url);
42   - }
43   -
44   - function _enableIconHover(container, isHover) {
45   - var img = $(container).find("img").first();
46   - var hover_img_url = base_url + "/img/" + $(container).attr("name");
47   - if (isHover) {
48   - hover_img_url += "-icon-hover.png";
49   - } else {
50   - hover_img_url += "-icon.png";
51   - }
52   - _changeImage(img, hover_img_url);
53   - }
54   -
55   - function _selectIcon(iconName, isSelect, panel) {
56   - panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
57   - var icon_id = ".icon_container[name=" + iconName + "]" + panel;
58   - _enableIconHover(icon_id, isSelect);
59   - $(icon_id).attr("select", isSelect);
60   - }
61   -
62   - function _deselectIcon(iconName, parent) {
63   - _selectIcon(iconName, false, parent);
64   - }
65   -
66   - function _setupCheckIcon(option, isCheck, panel) {
67   - panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
68   - var img = $(".icon_container[name=" + option + "]" + panel).find("img")
69   - .first();
70   - var check_img_url = base_url + "/img/" + option;
71   -
72   - if (isCheck) {
73   - check_img_url += "-icon-check.png";
74   - } else {
75   - check_img_url += "-icon.png";
76   - }
77   -
78   - _changeImage(img, check_img_url);
79   - $(".icon_container[name=" + option + "]" + panel).attr("complete", isCheck);
80   - }
81   -
82   - function _isSelectingState() {
83   - return $("#configuration-panel .icon_container[select=true]").length > 0;
84   - }
85   -
86   - function _isConfigurationComplete(config) {
87   - var total_config = $("#" + config
88   - + "-subconfiguration-options .icon_container").length;
89   - var completed_config = $("#" + config
90   - + "-subconfiguration-options .icon_container[complete=true]").length;
91   - return total_config == completed_config;
92   - }
93   -
94   - function _canHover(el) {
95   - var incompleteConfig = typeof $(el).attr("complete") == "undefined"
96   - || $(el).attr("complete") == "false";
97   - return (!_isSelectingState() && incompleteConfig)
98   - || (typeof $(el).attr("select") == "undefined" && incompleteConfig);
99   - }
100   -
101   - function _getCurrentMainConfiguration() {
102   - return _isSelectingState() ? $(
103   - "#configuration-panel .icon_container[select=true]").attr(
104   - "name") : "";
105   - }
106   -
107   - function _addZoomInToAvatar(option, callback) {
108   - $("#avatar-default")
109   - .fadeOut(
110   - 500,
  3 + var videos_url = '';
  4 + var base_url = '';
  5 + var server_backend_url = '';
  6 + var api_url = '';
  7 + var current_task_id = -1;
  8 + var base_parameter_json = {};
  9 + var moviment_parameter_json = {};
  10 +
  11 + function _getLoggedUser() {
  12 + var pybossa_rembember_token = Cookies.get('remember_token');
  13 + var splitted_token_id = pybossa_rembember_token.split('|');
  14 + return splitted_token_id.length > 0 ? splitted_token_id[0]
  15 + : 'anonymous';
  16 + }
  17 +
  18 + function _setupParameterJSON(sign_name) {
  19 + base_parameter_json['userId'] = _getLoggedUser();
  20 + base_parameter_json['sinal'] = sign_name;
  21 + base_parameter_json['interpolacao'] = 'normal';
  22 + base_parameter_json['movimentos'] = [];
  23 + moviment_parameter_json = {
  24 + "facial": {},
  25 + "mao_direita": {},
  26 + "mao_esquerda": {}
  27 + };
  28 + }
  29 +
  30 + function _loadTaskInfo(task) {
  31 + current_task_id = task.id;
  32 + var sign_name = task.info.sign_name;
  33 + var ref_vid_link = videos_url + sign_name + "_REF.webm";
  34 + $(".sign-label").text(sign_name);
  35 + $(".ref-video").attr("src", ref_vid_link);
  36 +
  37 + _setupParameterJSON(task.info.sign_name);
  38 + }
  39 +
  40 + function _changeImage(img, url) {
  41 + img.attr("src", url);
  42 + }
  43 +
  44 + function _enableIconHover(container, isHover) {
  45 + var img = $(container).find("img").first();
  46 + var hover_img_url = base_url + "/img/" + $(container).attr("name");
  47 + if (isHover) {
  48 + hover_img_url += "-icon-hover.png";
  49 + } else {
  50 + hover_img_url += "-icon.png";
  51 + }
  52 + _changeImage(img, hover_img_url);
  53 + }
  54 +
  55 + function _selectIcon(iconName, isSelect, panel) {
  56 + panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
  57 + var icon_id = ".icon_container[name=" + iconName + "]" + panel;
  58 + _enableIconHover(icon_id, isSelect);
  59 + $(icon_id).attr("select", isSelect);
  60 + }
  61 +
  62 + function _deselectIcon(iconName, parent) {
  63 + _selectIcon(iconName, false, parent);
  64 + }
  65 +
  66 + function _setupCheckIcon(option, isCheck, panel) {
  67 + panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
  68 + var img = $(".icon_container[name=" + option + "]" + panel).find("img")
  69 + .first();
  70 + var check_img_url = base_url + "/img/" + option;
  71 +
  72 + if (isCheck) {
  73 + check_img_url += "-icon-check.png";
  74 + } else {
  75 + check_img_url += "-icon.png";
  76 + }
  77 +
  78 + _changeImage(img, check_img_url);
  79 + $(".icon_container[name=" + option + "]" + panel).attr("complete", isCheck);
  80 + }
  81 +
  82 + function _isSelectingState() {
  83 + return $("#configuration-panel .icon_container[select=true]").length > 0;
  84 + }
  85 +
  86 + function _isConfigurationComplete(config) {
  87 + var total_config = $("#" + config +
  88 + "-subconfiguration-options .icon_container").length;
  89 + var completed_config = $("#" + config +
  90 + "-subconfiguration-options .icon_container[complete=true]").length;
  91 + return total_config == completed_config;
  92 + }
  93 +
  94 + function _canHover(el) {
  95 + var incompleteConfig = typeof $(el).attr("complete") == "undefined" ||
  96 + $(el).attr("complete") == "false";
  97 + return (!_isSelectingState() && incompleteConfig) ||
  98 + (typeof $(el).attr("select") == "undefined" && incompleteConfig);
  99 + }
  100 +
  101 + function _getCurrentMainConfiguration() {
  102 + return _isSelectingState() ? $(
  103 + "#configuration-panel .icon_container[select=true]").attr(
  104 + "name") : "";
  105 + }
  106 +
  107 + function _addZoomInToAvatar(option, callback) {
  108 + $("#avatar-default")
  109 + .fadeOut(
  110 + 500,
111 111 function() {
112   - $("#avatar-container").removeClass("col-sm-7");
113   - $("#avatar-container").addClass("col-sm-5");
114   - $("#selection-container").removeClass("col-sm-2");
115   - $("#selection-container").addClass("col-sm-4");
116   - $("#avatar-container").removeClass(
117   - "avatar-container-zoom-out");
118   - $("#avatar-container").addClass(
119   - "avatar-container-zoom-in");
120   - $("#avatar-" + option).removeClass(
121   - "avatar-img-zoom-out");
122   - $("#avatar-" + option).fadeIn(
123   - 500,
  112 + $("#avatar-container").removeClass("col-sm-7");
  113 + $("#avatar-container").addClass("col-sm-5");
  114 + $("#selection-container").removeClass("col-sm-2");
  115 + $("#selection-container").addClass("col-sm-4");
  116 + $("#avatar-container").removeClass(
  117 + "avatar-container-zoom-out");
  118 + $("#avatar-container").addClass(
  119 + "avatar-container-zoom-in");
  120 + $("#avatar-" + option).removeClass(
  121 + "avatar-img-zoom-out");
  122 + $("#avatar-" + option).fadeIn(
  123 + 500,
124 124 function() {
125   - $("#avatar-" + option).addClass(
126   - "avatar-" + option
127   - + "-img-zoom-in");
128   - callback();
  125 + $("#avatar-" + option).addClass(
  126 + "avatar-" + option +
  127 + "-img-zoom-in");
  128 + callback();
129 129 });
130 130 });
131   - }
  131 + }
132 132  
133   - function _addZoomOutToAvatar(option, callback) {
134   - $("#avatar-" + option).fadeOut(
135   - 500,
  133 + function _addZoomOutToAvatar(option, callback) {
  134 + $("#avatar-" + option).fadeOut(
  135 + 500,
136 136 function() {
137   - $("#selection-container").removeClass("col-sm-4");
138   - $("#selection-container").addClass("col-sm-2");
139   - $("#avatar-container").removeClass("col-sm-5");
140   - $("#avatar-container").addClass("col-sm-7");
141   - $("#avatar-container").removeClass(
142   - "avatar-container-zoom-in");
143   - $("#avatar-container")
144   - .addClass("avatar-container-zoom-out");
145   - $("#avatar-default").fadeIn(
146   - 500,
  137 + $("#selection-container").removeClass("col-sm-4");
  138 + $("#selection-container").addClass("col-sm-2");
  139 + $("#avatar-container").removeClass("col-sm-5");
  140 + $("#avatar-container").addClass("col-sm-7");
  141 + $("#avatar-container").removeClass(
  142 + "avatar-container-zoom-in");
  143 + $("#avatar-container")
  144 + .addClass("avatar-container-zoom-out");
  145 + $("#avatar-default").fadeIn(
  146 + 500,
147 147 function() {
148   - $("#avatar-" + option).removeClass(
149   - "avatar-" + option + "-img-zoom-in");
150   - $("#avatar-" + option).addClass(
151   - "avatar-img-zoom-out");
152   - callback();
  148 + $("#avatar-" + option).removeClass(
  149 + "avatar-" + option + "-img-zoom-in");
  150 + $("#avatar-" + option).addClass(
  151 + "avatar-img-zoom-out");
  152 + callback();
153 153 });
154 154 });
155   - }
156   -
157   - function _clearPreviousSelection() {
158   - $(".selection-panel-body").hide();
159   - $(".subconfiguration-options").hide();
160   - $(".subconfiguration-panel").hide();
161   -
162   - if (_isSelectingState()) {
163   - var current_option = _getCurrentMainConfiguration();
164   - _selectIcon(current_option, false);
165   - if (_isConfigurationComplete(current_option)) {
166   - _setupCheckIcon(current_option, true);
167   - }
168   - $("#avatar-" + current_option).fadeOut(500);
169   - }
170   - }
171   -
172   - function _showSelectionPanel(option) {
173   - _clearPreviousSelection();
174   - _selectIcon(option, true);
175   - if (option == "facial") {
176   - _setupFacialSelectionPanel();
177   - } else {
178   - _setupHandSelectionPanel(option);
179   - }
180   - _setupGUIOnSelection(option);
181   - }
182   -
183   - function _hideSelectionPanel() {
184   - _setupCurrentSubConfiguration(true, false);
185   -
186   - var config = _getCurrentMainConfiguration();
187   - _deselectIcon(config);
188   - if (_isConfigurationComplete(config)) {
189   - _finishConfiguration(config);
190   - }
191   -
192   - _addZoomOutToAvatar(config, function() {
193   - $("#ready-button").fadeIn(300);
194   - $(".edit-container").fadeIn(300);
195   - });
196   - $("#selection-panel").fadeOut(300);
197   - }
198   -
199   - function _canRenderSignVideo() {
200   - return _isConfigurationComplete("facial")
201   - && (_isConfigurationComplete("right-hand") || _isConfigurationComplete("left-hand"));
202   - }
203   -
204   - function _finishConfiguration(config) {
205   - _setupCheckIcon(config, true);
206   - _setupCheckIcon("avatar-" + config, true);
207   - $("#" + config + "-edit .check-icon").show();
208   -
209   - if (_canRenderSignVideo()) {
210   - $("#ready-button").removeClass("disabled");
211   - }
212   - }
213   -
214   - function _unfinishConfiguration(config, panel) {
215   - _setupCheckIcon(config, false, panel);
216   - _setupCheckIcon("avatar-" + config, false, panel);
217   - $("#" + config + "-edit .check-icon").hide();
218   -
219   - if (!_canRenderSignVideo()) {
220   - $("#ready-button").addClass("disabled");
221   - }
222   - }
223   - ;
224   -
225   - // Subconfigurations
226   - function _getCurrentSubConfiguration() {
227   - var config = _getCurrentMainConfiguration();
228   - return $(
229   - "#"
230   - + config
231   - + "-subconfiguration-options .icon_container[select=true]")
232   - .attr("panel");
233   - }
234   -
235   - function _getNextSubConfiguration() {
236   - var config = _getCurrentMainConfiguration();
237   - return $(
238   - "#"
239   - + config
240   - + "-subconfiguration-options .icon_container[select=true]")
241   - .attr("next");
242   - }
243   -
244   - function _getPreviousSubConfiguration() {
245   - var config = _getCurrentMainConfiguration();
246   - return $(
247   - "#"
248   - + config
249   - + "-subconfiguration-options .icon_container[select=true]")
250   - .attr("previous");
251   - }
252   -
253   - function _setupCurrentSubConfiguration(onHide, onFinish) {
254   - var current_subconfig = _getCurrentSubConfiguration();
255   -
256   - if (!onHide) {
257   - _selectSubConfigurationIcon(current_subconfig, false);
258   - }
259   -
260   - // Add a check if the user finished a configuration
261   - if (onFinish && _hasSelectedAnOption(current_subconfig)) {
262   - _setupCheckSubConfigurationIcon(current_subconfig);
263   - }
264   -
265   - // Hide the current selection panel
266   - $("#" + current_subconfig).hide();
267   - }
268   -
269   - function _hasMultipleConfigurations(config) {
270   - return $("#" + config).is("[multiple-config]");
271   - }
272   -
273   - function _handleFingersPositionSubConfiguration(main_config) {
274   - var finger_group = $(
275   - "#"
276   - + main_config
277   - + "-fingers-position-1 .selection-panel-option[select=true]")
278   - .attr("group");
279   - $(".finger-group").hide();
280   - $(".finger-group[group=" + finger_group + "]").show();
281   - }
282   -
283   - function _setupMultipleConfiguration(config, selectEvent) {
284   - var sub_config_id = "#" + config + " [sub-config]";
285   - var has_active_config = $(sub_config_id).is(":visible");
286   -
287   - var main_config = _getCurrentMainConfiguration();
288   - var icon_name = _getSubConfigurationIconName(config);
289   - var icon_id = "#" + main_config
290   - + "-subconfiguration-options .icon_container[name=" + icon_name
291   - + "]";
292   - var sub_config = "";
293   -
294   - if (!has_active_config || !selectEvent) {
295   - sub_config = config + "-1";
296   - if (!$(icon_id).is("[tmp-next]")) {
297   - $(icon_id).attr("tmp-next", $(icon_id).attr("next"));
298   - $(icon_id).attr("next", config);
299   - }
300   - } else {
301   - sub_config = $(sub_config_id + ":visible").attr("next");
302   - }
303   - $(sub_config_id).hide();
304   -
305   - if (sub_config == "end") {
306   - var tmp_next = $(icon_id).attr("tmp-next");
307   - $(icon_id).removeAttr("tmp-next");
308   - $(icon_id).attr("next", tmp_next);
309   - config = tmp_next;
310   - if (_hasMultipleConfigurations(config)) {
311   - config = _setupMultipleConfiguration(config, selectEvent);
312   - }
313   - } else {
314   - if (sub_config.indexOf("fingers-position-2") != -1) {
315   - _handleFingersPositionSubConfiguration(main_config);
316   - }
317   - $("#" + sub_config).show();
318   - }
319   - return config;
320   - }
321   -
322   - function _getSubConfigurationIconName(subconfig) {
323   - subconfig = subconfig.replace("right-hand", "hand");
324   - subconfig = subconfig.replace("left-hand", "hand");
325   - return subconfig;
326   - }
327   -
328   - function _selectSubConfigurationIcon(subconfig, isSelect) {
329   - var iconName = _getSubConfigurationIconName(subconfig);
330   - _selectIcon(iconName, isSelect, subconfig);
331   - }
332   -
333   - function _setupCheckSubConfigurationIcon(subconfig) {
334   - var iconName = _getSubConfigurationIconName(subconfig);
335   - _setupCheckIcon(iconName, true, subconfig);
336   - }
337   -
338   - function _showSubConfiguration(next_config, selectEvent) {
339   - var current_config = _getCurrentSubConfiguration();
340   - var next_has_multiple_config = _hasMultipleConfigurations(next_config);
341   -
342   - if (current_config == next_config && !next_has_multiple_config)
343   - return;
344   -
345   - var onFinish = true;
346   - if (next_has_multiple_config) {
347   - next_config = _setupMultipleConfiguration(next_config, selectEvent);
348   - onFinish = next_config != current_config;
349   - }
350   -
351   - _setupCurrentSubConfiguration(false, onFinish);
352   -
353   - if (next_config != "end") {
354   - _selectSubConfigurationIcon(next_config, true);
355   - $("#" + next_config).show();
356   -
357   - var main_config = _getCurrentMainConfiguration();
358   - if (_isHandMovimentComplete(main_config)) {
359   - $(".subconfiguration-panel").fadeIn(300);
360   - }
361   - } else {
362   - _hideSelectionPanel();
363   - }
364   - }
365   -
366   - function _setupGUIOnSelection(option) {
367   - $("#ready-button").fadeOut(300);
368   - $(".edit-container").fadeOut(300);
369   - _addZoomInToAvatar(option, function() {
370   - $("#selection-panel").fadeIn(300);
371   - });
372   - }
373   -
374   - function _setupFacialSelectionPanel() {
375   - var previous_select = $("#facial-subconfiguration-options .icon_container[select=true]").length > 0;
376   - if (previous_select) {
377   - var subconfig = $(
378   - "#facial-subconfiguration-options .icon_container[select=true]")
379   - .attr("panel");
380   - $("#" + subconfig).fadeIn(300);
381   - } else {
382   - _selectIcon("facial-expression", true);
383   - $("#facial-expression").fadeIn(300);
384   - }
385   - $("#facial-subconfiguration-options").fadeIn(300);
386   - $(".subconfiguration-panel").fadeIn(300);
387   - }
388   -
389   - function _isHandMovimentComplete(main_config) {
390   - return $("#" + main_config
391   - + "-subconfiguration-options .icon_container[complete=true][name=hand-moviment]").length > 0;
392   - }
393   -
394   - function _setupHandSelectionPanel(option) {
395   - var previous_select = $("#" + option
396   - + "-subconfiguration-options .icon_container[select=true]").length > 0;
397   - if (previous_select) {
398   - var subconfig = $(
399   - "#"
400   - + option
401   - + "-subconfiguration-options .icon_container[select=true]")
402   - .attr("panel");
403   -
404   - if (_hasMultipleConfigurations(subconfig)) {
405   - $("#" + subconfig + "-1").show();
406   - }
407   - $("#" + subconfig).fadeIn(300);
408   - } else {
409   - _selectIcon("hand-moviment", true, option + "-moviment");
410   - $("#" + option + "-moviment").fadeIn(300);
411   - }
412   -
413   - $("#" + option + "-subconfiguration-options").fadeIn(300);
414   - if (_isHandMovimentComplete(option)) {
415   - $(".subconfiguration-panel").fadeIn(300);
416   - }
417   - }
418   -
419   - function _setupConfigurationPanel() {
420   - $(".icon_container").off("mouseover").on("mouseover", function() {
421   - if (_canHover(this)) {
422   - _enableIconHover(this, true);
423   - }
424   - });
425   - $(".icon_container").off("mouseout").on("mouseout", function() {
426   - if (_canHover(this)) {
427   - _enableIconHover(this, false);
428   - }
429   - });
430   - $(".config-panel-option").off("click").on("click", function() {
431   - _showSelectionPanel($(this).attr("panel"));
432   - });
433   - $("#minimize-icon-container").off("click").on("click", function() {
434   - $("#ref-video-container").hide();
435   - $("#minimize-icon-container").hide();
436   - $("#maximize-icon-container").show();
437   - });
438   - $("#maximize-icon-container").off("click").on("click", function() {
439   - $("#ref-video-container").show();
440   - $("#maximize-icon-container").hide();
441   - $("#minimize-icon-container").show();
442   - });
443   - }
444   -
445   - // Selection Panel
446   - function _hasSelectedAnOption(subconfig) {
447   - return $("#" + subconfig + " .selection-panel-option[select=true]").length > 0;
448   - }
449   -
450   - // JSON
451   - function _getFirstKey(json) {
452   - var first_key = undefined;
453   - for (first_key in json)
454   - ;
455   - return first_key;
456   - }
457   -
458   - function _updateParameterJSON(config, value) {
459   - if (typeof config == "undefined" || typeof value == "undefined")
460   - return;
461   -
462   - var current_main_config = _getCurrentMainConfiguration();
463   - current_main_config = current_main_config == "right-hand" ? "mao_direita"
464   - : current_main_config;
465   - current_main_config = current_main_config == "left-hand" ? "mao_esquerda"
466   - : current_main_config;
467   - value = !isNaN(value) ? parseInt(value) : value;
468   -
469   - if (config == "movimento") {
470   - var first_key = _getFirstKey(moviment_parameter_json[current_main_config]);
471   - if (typeof first_key == "undefined") {
472   - moviment_parameter_json[current_main_config][value] = {};
473   - } else if (first_key != value) {
474   - moviment_parameter_json[current_main_config][value] = moviment_parameter_json[current_main_config][first_key];
475   - delete moviment_parameter_json[current_main_config][first_key];
476   - }
477   - } else if (current_main_config.indexOf("mao") != -1) {
478   -
479   - var first_key = _getFirstKey(moviment_parameter_json[current_main_config]);
480   - if (typeof first_key == "undefined") {
481   - first_key = "placeholder";
482   - moviment_parameter_json[current_main_config][first_key] = {};
483   - }
484   - moviment_parameter_json[current_main_config][first_key][config] = value;
485   - } else {
486   - moviment_parameter_json[current_main_config][config] = value;
487   - }
488   - }
489   -
490   - function _readConfigValue(el, config_name) {
491   - if (typeof config_name == "undefined" || config_name == "articulacao") return;
492   -
493   - return $(el).attr("value");
494   - }
495   -
496   - function _selectConfig(el) {
497   - var current_config_id = $(".selection-panel-body").has(el).attr("id");
498   - var current_config_name = $(".selection-panel-body").has(el).attr(
499   - "name");
500   - $("#" + current_config_id + " .selection-panel-option[select=true]")
501   - .removeAttr("select");
502   - $(el).attr("select", true);
503   -
504   - var config_value = _readConfigValue(el, current_config_name);
505   - _updateParameterJSON(current_config_name, config_value);
506   - }
507   -
508   - function _setupSelectionPanel() {
509   - // $("#selection-panel .x").off("click").on("click", function() {
510   - // _hideSelectionPanel();
511   - // });
512   - // $(".selection-panel-body .selection-panel-option").off("click").on(
513   - // "click", function() {
514   - // _selectConfig(this);
515   - // var next = _getNextSubConfiguration();
516   - // _showSubConfiguration(next, true);
517   - // });
518   - // $(".subconfiguration-options .icon_container").off("click").on("click",
519   - // function() {
520   - // var subconfig = $(this).attr("panel");
521   - // _showSubConfiguration(subconfig, false);
522   - // });
523   - // $(".arrow[name=right-arrow]").off("click").on("click", function() {
524   - // var next = _getNextSubConfiguration();
525   - // _showSubConfiguration(next, false);
526   - // });
527   - // $(".arrow[name=left-arrow]").off("click").on("click", function() {
528   - // var previous = _getPreviousSubConfiguration();
529   - // _showSubConfiguration(previous, false);
530   - // });
531   - }
532   -
533   - // Render Screen
534   - function _submitParameterJSON(callback) {
535   - base_parameter_json["movimentos"] = [];
536   - base_parameter_json["movimentos"].push(moviment_parameter_json);
537   - console.log(base_parameter_json);
538   -
539   - $.ajax({
540   - type : "POST",
541   - url : api_url + "/sign",
542   - data : JSON.stringify(base_parameter_json),
543   - contentType : "application/json",
544   - success : function(response) {
545   - console.log(response);
546   - callback();
547   - },
548   - error : function(xhr, textStatus, error) {
549   - alert(xhr.responseText);
550   - }
551   - });
552   - }
553   -
554   - function _showRenderedAvatar() {
555   - var user_id = base_parameter_json["userId"];
556   - var sign_name = base_parameter_json["sinal"];
557   - var rendered_avatar_url = api_url + "/public/" + user_id + "/"
558   - + sign_name + ".webm";
559   - $("#render-avatar video").attr("src", rendered_avatar_url);
560   - $("#render-avatar").fadeIn(300);
561   - }
562   -
563   - function _setupRenderScreen() {
564   - $("#configuration-screen").hide();
565   - $("#render-avatar").hide();
566   - $("#render-screen").show();
567   - $("#render-loading").fadeIn(300);
568   - $("#finish-button").addClass("disabled");
569   - $("#render-ref video").prop("controls", false);
570   - $("#render-ref video").get(0).pause();
571   -
572   - _submitParameterJSON(function() {
573   - $("#render-loading").fadeOut(300);
574   - $("#render-ref video").prop("controls", true);
575   - $("#render-ref video").get(0).play();
576   - $("#finish-button").removeClass("disabled");
577   - _showRenderedAvatar();
578   - });
579   - }
580   -
581   - function _clearGUI() {
582   - $(".selection-panel-option").removeAttr("select");
583   - $(".icon_container").removeAttr("select");
584   - $(".icon_container[complete=true]").each(
  155 + }
  156 +
  157 + function _clearPreviousSelection() {
  158 + $(".selection-panel-body").hide();
  159 + $(".subconfiguration-options").hide();
  160 + $(".subconfiguration-panel").hide();
  161 +
  162 + if (_isSelectingState()) {
  163 + var current_option = _getCurrentMainConfiguration();
  164 + _selectIcon(current_option, false);
  165 + if (_isConfigurationComplete(current_option)) {
  166 + _setupCheckIcon(current_option, true);
  167 + }
  168 + $("#avatar-" + current_option).fadeOut(500);
  169 + }
  170 + }
  171 +
  172 + function _showSelectionPanel(option) {
  173 + _clearPreviousSelection();
  174 + _selectIcon(option, true);
  175 + if (option == "facial") {
  176 + _setupFacialSelectionPanel();
  177 + } else {
  178 + _setupHandSelectionPanel(option);
  179 + }
  180 + _setupGUIOnSelection(option);
  181 + }
  182 +
  183 + function _hideSelectionPanel() {
  184 + _setupCurrentSubConfiguration(true, false);
  185 +
  186 + var config = _getCurrentMainConfiguration();
  187 + _deselectIcon(config);
  188 + if (_isConfigurationComplete(config)) {
  189 + _finishConfiguration(config);
  190 + }
  191 +
  192 + _addZoomOutToAvatar(config, function() {
  193 + $("#ready-button").fadeIn(300);
  194 + $(".edit-container").fadeIn(300);
  195 + });
  196 + $("#selection-panel").fadeOut(300);
  197 + }
  198 +
  199 + function _canRenderSignVideo() {
  200 + return _isConfigurationComplete("facial") &&
  201 + (_isConfigurationComplete("right-hand") || _isConfigurationComplete("left-hand"));
  202 + }
  203 +
  204 + function _finishConfiguration(config) {
  205 + _setupCheckIcon(config, true);
  206 + _setupCheckIcon("avatar-" + config, true);
  207 + $("#" + config + "-edit .check-icon").show();
  208 +
  209 + if (_canRenderSignVideo()) {
  210 + $("#ready-button").removeClass("disabled");
  211 + }
  212 + }
  213 +
  214 + function _unfinishConfiguration(config, panel) {
  215 + _setupCheckIcon(config, false, panel);
  216 + _setupCheckIcon("avatar-" + config, false, panel);
  217 + $("#" + config + "-edit .check-icon").hide();
  218 +
  219 + if (!_canRenderSignVideo()) {
  220 + $("#ready-button").addClass("disabled");
  221 + }
  222 + }
  223 + ;
  224 +
  225 + // Subconfigurations
  226 + function _getCurrentSubConfiguration() {
  227 + var config = _getCurrentMainConfiguration();
  228 + return $(
  229 + "#" +
  230 + config +
  231 + "-subconfiguration-options .icon_container[select=true]")
  232 + .attr("panel");
  233 + }
  234 +
  235 + function _getNextSubConfiguration() {
  236 + var config = _getCurrentMainConfiguration();
  237 + return $(
  238 + "#" +
  239 + config +
  240 + "-subconfiguration-options .icon_container[select=true]")
  241 + .attr("next");
  242 + }
  243 +
  244 + function _getPreviousSubConfiguration() {
  245 + var config = _getCurrentMainConfiguration();
  246 + return $(
  247 + "#" +
  248 + config +
  249 + "-subconfiguration-options .icon_container[select=true]")
  250 + .attr("previous");
  251 + }
  252 +
  253 + function _setupCurrentSubConfiguration(onHide, onFinish) {
  254 + var current_subconfig = _getCurrentSubConfiguration();
  255 +
  256 + if (!onHide) {
  257 + _selectSubConfigurationIcon(current_subconfig, false);
  258 + }
  259 +
  260 + // Add a check if the user finished a configuration
  261 + if (onFinish && _hasSelectedAnOption(current_subconfig)) {
  262 + _setupCheckSubConfigurationIcon(current_subconfig);
  263 + }
  264 +
  265 + // Hide the current selection panel
  266 + $("#" + current_subconfig).hide();
  267 + }
  268 +
  269 + function _hasMultipleConfigurations(config) {
  270 + return $("#" + config).is("[multiple-config]");
  271 + }
  272 +
  273 + function _handleFingersPositionSubConfiguration(main_config) {
  274 + var finger_group = $(
  275 + "#" +
  276 + main_config +
  277 + "-fingers-position-1 .selection-panel-option[select=true]")
  278 + .attr("group");
  279 + $(".finger-group").hide();
  280 + $(".finger-group[group=" + finger_group + "]").show();
  281 + }
  282 +
  283 + function _setupMultipleConfiguration(config, selectEvent) {
  284 + var sub_config_id = "#" + config + " [sub-config]";
  285 + var has_active_config = $(sub_config_id).is(":visible");
  286 +
  287 + var main_config = _getCurrentMainConfiguration();
  288 + var icon_name = _getSubConfigurationIconName(config);
  289 + var icon_id = "#" + main_config +
  290 + "-subconfiguration-options .icon_container[name=" + icon_name +
  291 + "]";
  292 + var sub_config = "";
  293 +
  294 + if (!has_active_config || !selectEvent) {
  295 + sub_config = config + "-1";
  296 + if (!$(icon_id).is("[tmp-next]")) {
  297 + $(icon_id).attr("tmp-next", $(icon_id).attr("next"));
  298 + $(icon_id).attr("next", config);
  299 + }
  300 + } else {
  301 + sub_config = $(sub_config_id + ":visible").attr("next");
  302 + }
  303 + $(sub_config_id).hide();
  304 +
  305 + if (sub_config == "end") {
  306 + var tmp_next = $(icon_id).attr("tmp-next");
  307 + $(icon_id).removeAttr("tmp-next");
  308 + $(icon_id).attr("next", tmp_next);
  309 + config = tmp_next;
  310 + if (_hasMultipleConfigurations(config)) {
  311 + config = _setupMultipleConfiguration(config, selectEvent);
  312 + }
  313 + } else {
  314 + if (sub_config.indexOf("fingers-position-2") != -1) {
  315 + _handleFingersPositionSubConfiguration(main_config);
  316 + }
  317 + $("#" + sub_config).show();
  318 + }
  319 + return config;
  320 + }
  321 +
  322 + function _getSubConfigurationIconName(subconfig) {
  323 + subconfig = subconfig.replace("right-hand", "hand");
  324 + subconfig = subconfig.replace("left-hand", "hand");
  325 + return subconfig;
  326 + }
  327 +
  328 + function _selectSubConfigurationIcon(subconfig, isSelect) {
  329 + var iconName = _getSubConfigurationIconName(subconfig);
  330 + _selectIcon(iconName, isSelect, subconfig);
  331 + }
  332 +
  333 + function _setupCheckSubConfigurationIcon(subconfig) {
  334 + var iconName = _getSubConfigurationIconName(subconfig);
  335 + _setupCheckIcon(iconName, true, subconfig);
  336 + }
  337 +
  338 + function _showSubConfiguration(next_config, selectEvent) {
  339 + var current_config = _getCurrentSubConfiguration();
  340 + var next_has_multiple_config = _hasMultipleConfigurations(next_config);
  341 +
  342 + if (current_config == next_config && !next_has_multiple_config)
  343 + return;
  344 +
  345 + var onFinish = true;
  346 + if (next_has_multiple_config) {
  347 + next_config = _setupMultipleConfiguration(next_config, selectEvent);
  348 + onFinish = next_config != current_config;
  349 + }
  350 +
  351 + _setupCurrentSubConfiguration(false, onFinish);
  352 +
  353 + if (next_config != "end") {
  354 + _selectSubConfigurationIcon(next_config, true);
  355 + $("#" + next_config).show();
  356 +
  357 + var main_config = _getCurrentMainConfiguration();
  358 + if (_isHandMovimentComplete(main_config)) {
  359 + $(".subconfiguration-panel").fadeIn(300);
  360 + }
  361 + } else {
  362 + _hideSelectionPanel();
  363 + }
  364 + }
  365 +
  366 + function _setupGUIOnSelection(option) {
  367 + $("#ready-button").fadeOut(300);
  368 + $(".edit-container").fadeOut(300);
  369 + _addZoomInToAvatar(option, function() {
  370 + $("#selection-panel").fadeIn(300);
  371 + });
  372 + }
  373 +
  374 + function _setupFacialSelectionPanel() {
  375 + var previous_select = $("#facial-subconfiguration-options .icon_container[select=true]").length > 0;
  376 + if (previous_select) {
  377 + var subconfig = $(
  378 + "#facial-subconfiguration-options .icon_container[select=true]")
  379 + .attr("panel");
  380 + $("#" + subconfig).fadeIn(300);
  381 + } else {
  382 + _selectIcon("facial-expression", true);
  383 + $("#facial-expression").fadeIn(300);
  384 + }
  385 + $("#facial-subconfiguration-options").fadeIn(300);
  386 + $(".subconfiguration-panel").fadeIn(300);
  387 + }
  388 +
  389 + function _isHandMovimentComplete(main_config) {
  390 + return $("#" + main_config +
  391 + "-subconfiguration-options .icon_container[complete=true][name=hand-moviment]").length > 0;
  392 + }
  393 +
  394 + function _setupHandSelectionPanel(option) {
  395 + var previous_select = $("#" + option +
  396 + "-subconfiguration-options .icon_container[select=true]").length > 0;
  397 + if (previous_select) {
  398 + var subconfig = $(
  399 + "#" +
  400 + option +
  401 + "-subconfiguration-options .icon_container[select=true]")
  402 + .attr("panel");
  403 +
  404 + if (_hasMultipleConfigurations(subconfig)) {
  405 + $("#" + subconfig + "-1").show();
  406 + }
  407 + $("#" + subconfig).fadeIn(300);
  408 + } else {
  409 + _selectIcon("hand-moviment", true, option + "-moviment");
  410 + $("#" + option + "-moviment").fadeIn(300);
  411 + }
  412 +
  413 + $("#" + option + "-subconfiguration-options").fadeIn(300);
  414 + if (_isHandMovimentComplete(option)) {
  415 + $(".subconfiguration-panel").fadeIn(300);
  416 + }
  417 + }
  418 +
  419 + function _setupConfigurationPanel() {
  420 + $(".icon_container").off("mouseover").on("mouseover", function() {
  421 + if (_canHover(this)) {
  422 + _enableIconHover(this, true);
  423 + }
  424 + });
  425 + $(".icon_container").off("mouseout").on("mouseout", function() {
  426 + if (_canHover(this)) {
  427 + _enableIconHover(this, false);
  428 + }
  429 + });
  430 + $(".config-panel-option").off("click").on("click", function() {
  431 + _showSelectionPanel($(this).attr("panel"));
  432 + });
  433 + $("#minimize-icon-container").off("click").on("click", function() {
  434 + $("#ref-video-container").hide();
  435 + $("#minimize-icon-container").hide();
  436 + $("#maximize-icon-container").show();
  437 + });
  438 + $("#maximize-icon-container").off("click").on("click", function() {
  439 + $("#ref-video-container").show();
  440 + $("#maximize-icon-container").hide();
  441 + $("#minimize-icon-container").show();
  442 + });
  443 + }
  444 +
  445 + // Selection Panel
  446 + function _hasSelectedAnOption(subconfig) {
  447 + return $("#" + subconfig + " .selection-panel-option[select=true]").length > 0;
  448 + }
  449 +
  450 + // JSON
  451 + function _getFirstKey(json) {
  452 + var first_key = undefined;
  453 + for (first_key in json)
  454 + ;
  455 + return first_key;
  456 + }
  457 +
  458 + function _updateParameterJSON(config, value) {
  459 + if (typeof config == "undefined" || typeof value == "undefined")
  460 + return;
  461 +
  462 + var current_main_config = _getCurrentMainConfiguration();
  463 + current_main_config = current_main_config == "right-hand" ? "mao_direita"
  464 + : current_main_config;
  465 + current_main_config = current_main_config == "left-hand" ? "mao_esquerda"
  466 + : current_main_config;
  467 + value = !isNaN(value) ? parseInt(value) : value;
  468 +
  469 + if (config == "movimento") {
  470 + var first_key = _getFirstKey(moviment_parameter_json[current_main_config]);
  471 + if (typeof first_key == "undefined") {
  472 + moviment_parameter_json[current_main_config][value] = {};
  473 + } else if (first_key != value) {
  474 + moviment_parameter_json[current_main_config][value] = moviment_parameter_json[current_main_config][first_key];
  475 + delete moviment_parameter_json[current_main_config][first_key];
  476 + }
  477 + } else if (current_main_config.indexOf("mao") != -1) {
  478 +
  479 + var first_key = _getFirstKey(moviment_parameter_json[current_main_config]);
  480 + if (typeof first_key == "undefined") {
  481 + first_key = "placeholder";
  482 + moviment_parameter_json[current_main_config][first_key] = {};
  483 + }
  484 + moviment_parameter_json[current_main_config][first_key][config] = value;
  485 + } else {
  486 + moviment_parameter_json[current_main_config][config] = value;
  487 + }
  488 + }
  489 +
  490 + function _readConfigValue(el, config_name) {
  491 + if (typeof config_name == "undefined" || config_name == "articulacao") return;
  492 +
  493 + return $(el).attr("value");
  494 + }
  495 +
  496 + function _selectConfig(el) {
  497 + var current_config_id = $(".selection-panel-body").has(el).attr("id");
  498 + var current_config_name = $(".selection-panel-body").has(el).attr(
  499 + "name");
  500 + $("#" + current_config_id + " .selection-panel-option[select=true]")
  501 + .removeAttr("select");
  502 + $(el).attr("select", true);
  503 +
  504 + var config_value = _readConfigValue(el, current_config_name);
  505 + _updateParameterJSON(current_config_name, config_value);
  506 + }
  507 +
  508 + function _setupSelectionPanel() {
  509 + // $("#selection-panel .x").off("click").on("click", function() {
  510 + // _hideSelectionPanel();
  511 + // });
  512 + // $(".selection-panel-body .selection-panel-option").off("click").on(
  513 + // "click", function() {
  514 + // _selectConfig(this);
  515 + // var next = _getNextSubConfiguration();
  516 + // _showSubConfiguration(next, true);
  517 + // });
  518 + // $(".subconfiguration-options .icon_container").off("click").on("click",
  519 + // function() {
  520 + // var subconfig = $(this).attr("panel");
  521 + // _showSubConfiguration(subconfig, false);
  522 + // });
  523 + // $(".arrow[name=right-arrow]").off("click").on("click", function() {
  524 + // var next = _getNextSubConfiguration();
  525 + // _showSubConfiguration(next, false);
  526 + // });
  527 + // $(".arrow[name=left-arrow]").off("click").on("click", function() {
  528 + // var previous = _getPreviousSubConfiguration();
  529 + // _showSubConfiguration(previous, false);
  530 + // });
  531 + }
  532 +
  533 + // Render Screen
  534 + function _submitParameterJSON(callback) {
  535 + base_parameter_json["movimentos"] = [];
  536 + base_parameter_json["movimentos"].push(moviment_parameter_json);
  537 + console.log(base_parameter_json);
  538 +
  539 + $.ajax({
  540 + type: "POST",
  541 + url: api_url + "/sign",
  542 + data: JSON.stringify(base_parameter_json),
  543 + contentType: "application/json",
  544 + success: function(response) {
  545 + console.log(response);
  546 + callback();
  547 + },
  548 + error: function(xhr, textStatus, error) {
  549 + alert(xhr.responseText);
  550 + }
  551 + });
  552 + }
  553 +
  554 + function _showRenderedAvatar() {
  555 + var user_id = base_parameter_json["userId"];
  556 + var sign_name = base_parameter_json["sinal"];
  557 + var rendered_avatar_url = api_url + "/public/" + user_id + "/" +
  558 + sign_name + ".webm";
  559 + $("#render-avatar video").attr("src", rendered_avatar_url);
  560 + $("#render-avatar").fadeIn(300);
  561 + }
  562 +
  563 + function _setupRenderScreen() {
  564 + $("#configuration-screen").hide();
  565 + $("#render-avatar").hide();
  566 + $("#render-screen").show();
  567 + $("#render-loading").fadeIn(300);
  568 + $("#finish-button").addClass("disabled");
  569 + $("#render-ref video").prop("controls", false);
  570 + $("#render-ref video").get(0).pause();
  571 +
  572 + _submitParameterJSON(function() {
  573 + $("#render-loading").fadeOut(300);
  574 + $("#render-ref video").prop("controls", true);
  575 + $("#render-ref video").get(0).play();
  576 + $("#finish-button").removeClass("disabled");
  577 + _showRenderedAvatar();
  578 + });
  579 + }
  580 +
  581 + function _clearGUI() {
  582 + $(".selection-panel-option").removeAttr("select");
  583 + $(".icon_container").removeAttr("select");
  584 + $(".icon_container[complete=true]").each(
585 585 function() {
586   - _unfinishConfiguration($(this).attr("name"), $(this).attr(
587   - "panel"));
  586 + _unfinishConfiguration($(this).attr("name"), $(this).attr(
  587 + "panel"));
588 588 });
589   - }
590   -
591   - function _setupMainScreen(task, deferred) {
592   - $("#initial-screen").fadeIn(300);
593   - $("#start-button").off("click").on("click", function() {
594   - $("#initial-screen").hide();
595   - $("#configuration-screen").show();
596   - });
597   - $("#ready-button").off("click").on("click", function() {
598   - if ($(this).hasClass('disabled')) {
599   - event.preventDefault();
600   - return;
601   - }
602   - _setupRenderScreen();
603   - });
604   - $("#render-edit").off("click").on("click", function() {
605   - $("#render-screen").hide();
606   - $("#configuration-screen").show();
607   - });
608   - $("#finish-button").off("click").on("click", function() {
609   - if ($(this).hasClass('disabled')) {
610   - event.preventDefault();
611   - return;
612   - }
613   - $("#render-screen").hide();
614   - $("#thanks-screen").show();
615   - _saveAnswer(task, deferred)
616   - });
617   - }
618   -
619   - function _setupGUI(task, deferred) {
620   - _clearGUI();
621   - _setupConfigurationPanel();
622   - _setupSelectionPanel();
623   - _setupMainScreen(task, deferred);
624   -
625   - articulation.setup(base_url);
626   - }
627   -
628   - function _saveAnswer(task, deferred) {
629   - var answer = {}
630   - answer["status"] = "FINISHED";
631   - answer["parameter_json"] = base_parameter_json;
632   -
633   - /*pybossa.saveTask(task.id, answer).done(function() {
634   - setTimeout(function() {
635   - $("#thanks-screen").hide();
636   - deferred.resolve();
637   - }, 2500);
638   - });*/
639   -
640   - setTimeout(function() {
641   - $("#thanks-screen").hide();
642   - deferred.resolve();
643   - }, 2500);
644   - }
645   -
646   - function _showCompletedAllTaskMsg() {
647   - $("#completed-task-msg").hide();
648   - $("#completed-all-task-msg").show();
649   - $("#thanks-screen").fadeIn(300);
650   - }
651   -
652   - pybossa.presentTask(function(task, deferred) {
653   - if (!$.isEmptyObject(task) && current_task_id != task.id) {
654   - _loadTaskInfo(task);
655   - _setupGUI(task, deferred)
656   - $("#main-container").fadeIn(500);
657   - } else {
658   - _showCompletedAllTaskMsg();
659   - }
660   - });
661   -
662   - // Private methods
663   - function _run(projectname) {
664   - pybossa.run(projectname);
665   - }
666   -
667   - // Public methods
668   - wikilibras.run = function(serverhost, serverbackend, projectname, apihost) {
669   - base_url = serverhost;
670   - server_back_url = serverbackend;
671   - videos_url = base_url + "/videos/";
672   - api_url = apihost;
673   - _run(projectname);
674   - };
675   -
676   - wikilibras.updateParameterJSON = function(config, value) {
677   - _updateParameterJSON(config, value);
678   - }
  589 + }
  590 +
  591 + function _setupMainScreen(task, deferred) {
  592 + $("#initial-screen").fadeIn(300);
  593 + $("#start-button").off("click").on("click", function() {
  594 + $("#initial-screen").hide();
  595 + $("#configuration-screen").show();
  596 + dynengine.load();
  597 + console.log('dynengine loaded');
  598 + });
  599 + $("#ready-button").off("click").on("click", function() {
  600 + if ($(this).hasClass('disabled')) {
  601 + event.preventDefault();
  602 + return;
  603 + }
  604 + _setupRenderScreen();
  605 + });
  606 + $("#render-edit").off("click").on("click", function() {
  607 + $("#render-screen").hide();
  608 + $("#configuration-screen").show();
  609 + });
  610 + $("#finish-button").off("click").on("click", function() {
  611 + if ($(this).hasClass('disabled')) {
  612 + event.preventDefault();
  613 + return;
  614 + }
  615 + $("#render-screen").hide();
  616 + $("#thanks-screen").show();
  617 + _saveAnswer(task, deferred)
  618 + });
  619 + }
  620 +
  621 + function _setupGUI(task, deferred) {
  622 + _clearGUI();
  623 + _setupConfigurationPanel();
  624 + _setupSelectionPanel();
  625 + _setupMainScreen(task, deferred);
  626 +
  627 + articulation.setup(base_url);
  628 + }
  629 +
  630 + function _saveAnswer(task, deferred) {
  631 + var answer = {}
  632 + answer["status"] = "FINISHED";
  633 + answer["parameter_json"] = base_parameter_json;
  634 +
  635 + /*pybossa.saveTask(task.id, answer).done(function() {
  636 + setTimeout(function() {
  637 + $("#thanks-screen").hide();
  638 + deferred.resolve();
  639 + }, 2500);
  640 + });*/
  641 +
  642 + setTimeout(function() {
  643 + $("#thanks-screen").hide();
  644 + deferred.resolve();
  645 + }, 2500);
  646 + }
  647 +
  648 + function _showCompletedAllTaskMsg() {
  649 + $("#completed-task-msg").hide();
  650 + $("#completed-all-task-msg").show();
  651 + $("#thanks-screen").fadeIn(300);
  652 + }
  653 +
  654 + pybossa.presentTask(function(task, deferred) {
  655 + if (!$.isEmptyObject(task) && current_task_id != task.id) {
  656 + _loadTaskInfo(task);
  657 + _setupGUI(task, deferred)
  658 + $("#main-container").fadeIn(500);
  659 + } else {
  660 + _showCompletedAllTaskMsg();
  661 + }
  662 + });
  663 +
  664 + // Private methods
  665 + function _run(projectname) {
  666 + pybossa.run(projectname);
  667 + }
  668 +
  669 + // Public methods
  670 + wikilibras.run = function(serverhost, serverbackend, projectname, apihost) {
  671 + base_url = serverhost;
  672 + server_back_url = serverbackend;
  673 + videos_url = base_url + "/videos/";
  674 + api_url = apihost;
  675 + _run(projectname);
  676 + };
  677 +
  678 + wikilibras.updateParameterJSON = function(config, value) {
  679 + _updateParameterJSON(config, value);
  680 + }
679 681  
680 682 }(window.wikilibras = window.wikilibras || {}, jQuery));
... ...
view/right-hand/movements.html
  Diff comments   View file @e0c12d9
... ... @@ -5,26 +5,26 @@
5 5 </div>
6 6 <div class="selection-panel-inner-body">
7 7 <ul class="rig columns-2">
8   - <li><img class="box-panel-option selection-panel-option movimento-pontual"
  8 + <li class="movimento-pontual"><img class="box-panel-option selection-panel-option"
9 9 src="{{ server }}/img/mov/CALAR.gif" value="pontual" />Pontual</li>
10 10 <!--
11   - <li><video src="{{ server }}/{{ server }}/img/mov/PONTUAL.webm"
  11 + <li><video src="{{ server }}/img/mov/PONTUAL.webm"
12 12 preload="metadata" value="pontual"
13 13 class="box-panel-option selection-panel-option" autoplay loop>
14 14 <source type="video/webm">
15 15 </video> Pontual</li>
16 16 <li><img class="box-panel-option selection-panel-option"
17   - src="{{ server }}/{{ server }}/img/exf/0000.png" value="retilineo"/>Retilíneo</li>
  17 + src="{{ server }}/img/exf/0000.png" value="retilineo"/>Retilíneo</li>
18 18 <li><img class="box-panel-option selection-panel-option"
19   - src="{{ server }}/{{ server }}/img/exf/0000.png" value="circular"/>Circular</li>
  19 + src="{{ server }}/img/exf/0000.png" value="circular"/>Circular</li>
20 20 <li><img class="box-panel-option selection-panel-option"
21   - src="{{ server }}/{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li>
  21 + src="{{ server }}/img/exf/0000.png" value="semicircular"/>Semi-Circular</li>
22 22 <li><img class="box-panel-option selection-panel-option"
23   - src="{{ server }}/{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li>
  23 + src="{{ server }}/img/exf/0000.png" value="helicoidal"/>Espiral</li>
24 24 <li><img class="box-panel-option selection-panel-option"
25   - src="{{ server }}/{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li>
  25 + src="{{ server }}/img/exf/0000.png" value="senoidal"/>Curvas</li>
26 26 <li><img class="box-panel-option selection-panel-option"
27   - src="{{ server }}/{{ server }}/img/exf/0000.png" value="contato"/>Contato</li>
  27 + src="{{ server }}/img/exf/0000.png" value="contato"/>Contato</li>
28 28 -->
29 29 </ul>
30 30 </div>
... ...
view/right-hand/pontual/timeline.html
  Diff comments   View file @e0c12d9
1 1 <div class="subconfiguration-panel col-sm-12">
2 2 <div class="arrow icon_container col-sm-1" name="left-arrow">
3   - <img src="{{ server }}/{{ server }}/img/left-arrow-icon.png" />
  3 + <img src="{{ server }}/img/left-arrow-icon.png" />
4 4 </div>
5 5  
6 6 <div id="right-hand-subconfiguration-options"
... ... @@ -26,8 +26,8 @@
26 26 <img src="{{ server }}/img/hand-orientation-icon.png" />
27 27 </div>
28 28 </div>
29   -
  29 +
30 30 <div class="arrow icon_container col-sm-1" name="right-arrow">
31   - <img src="{{ server }}/{{ server }}/img/right-arrow-icon.png" />
  31 + <img src="{{ server }}/img/right-arrow-icon.png" />
32 32 </div>
33 33 </div>
... ...
view/template.html
  Diff comments   View file @e0c12d9
... ... @@ -113,7 +113,6 @@
113 113 <div class="x btn-default"></div>
114 114  
115 115 {{ facialConfig.selectionPanel() }}
116   - {% include 'hand-configuration.html' %}
117 116  
118 117 <div class="subconfiguration-panel col-sm-12">
119 118 <div class="arrow icon_container col-sm-1" name="left-arrow">
... ... @@ -199,6 +198,16 @@
199 198 <script type="text/javascript">
200 199 wikilibras.run("{{ server }}", "{{ server_backend }}", "{{ app_shortname }}", "{{ api_host }}");
201 200 $( document ).ready(function() {
202   - dynengine.load();
  201 + // Make it possible the elements trigger the show or hide event
  202 + (function ($) {
  203 + $.each(['show', 'hide'], function (i, ev) {
  204 + var el = $.fn[ev];
  205 + $.fn[ev] = function () {
  206 + this.trigger(ev);
  207 + el.apply(this, arguments);
  208 + return el;
  209 + };
  210 + });
  211 + })(jQuery);
203 212 });
204 213 </script>
... ...