Lógica de atualização da timeline de configurações.

Adabriand Furtado
1 parent 9cf39373
Showing 14 changed files with 229 additions and 90 deletions Show diff stats
view/assets/css/main.css
view/assets/js/articulation.js
view/assets/js/configuration.js
view/assets/js/dynamic-selection-workflow.js
view/assets/js/movement.js
view/assets/js/orientation.js
view/assets/js/wikilibras.js
view/hand/articulacao/passo-1.html
view/hand/articulacao/passo-2.html
view/hand/configuracao/passo-1.html
view/hand/configuracao/passo-2.html
view/hand/movimento/passo-1.html
view/hand/orientacao/passo-1.html
view/hand/timeline.html
@@ -317,11 +317,11 @@ ul.rig.columns-4 li {
 	width: 20%;
 }
  
-#right-hand-moviment ul.rig.columns-2 li {
+.selection-panel-body[mainconfig=right-hand] ul.rig.columns-2 li {
 	width: 60%;
 }
  
-#left-hand-moviment ul.rig.columns-2 li {
+.selection-panel-body[mainconfig=left-hand] ul.rig.columns-2 li {
 	width: 60%;
 }
  
 (function(articulation, $, undefined) {
  
 	var server_host = "";
+	var selectedY = "";
  
 	function _updateASelector(container, ballSelector) {
 	    $(container + " .ball-selector.active").each(function() {
@@ -9,43 +10,57 @@
 	    		'/img/pa/A-Seletor.png" class="point-a-selector" alt=""></div>')
 	}
  
-	function _setupModuleZ(hand, y) {
-		if (typeof y == "undefined") return;
-		var articulation_z = "." + hand + "-articulation .module-z";
+	function _setupModuleZ(hand) {
+		if (typeof selectedY == "undefined" || selectedY == "") return;
+		
+		var base_id = ".selection-panel-body[mainConfig=right-hand][subConfig=articulacao][step=2]";
+		var articulation_z = base_id + " .module-z";
 		$(articulation_z + " .ball-selector").hide();
-		$(articulation_z + " .row-number-" + y + " .ball-selector").show();
+		$(articulation_z + " .row-number-" + selectedY + " .ball-selector").show();
  
 		var z = $(articulation_z).attr("data-z");
 		if (typeof z != "undefined") {
-			var ball_selector = $(articulation_z + " .row-number-" + y + " .ball-" + z);
+			var ball_selector = $(articulation_z + " .row-number-" + selectedY + " .ball-" + z);
 			_updateASelector(articulation_z, ball_selector);
 		}
 	}
  
-	function _setupBallSelector(hand) {
-		var articulation_x_y = "#" + hand + "-articulation-x-y .module-x-y"; 
+	function _setupBallSelectorXY(hand) {
+		var base_id = ".selection-panel-body[mainConfig=right-hand][subConfig=articulacao][step=1]";
+		var articulation_x_y = base_id + " .module-x-y"; 
 		$(articulation_x_y + " .ball-selector").off("click").on("click", function(a) {
 		    var b = $(a.target);
-		    if (!b.hasClass("ball-selector")) return;
+		    if (!b.hasClass("ball-selector")) {
+		    	dynworkflow.selectedConfig();
+		    	return;
+		    }
 		    var c = b.parent(".grid-row"),
 		        d = $(articulation_x_y),
 		        f = b.attr("data-x"),
 		        g = c.attr("data-y");
 		    d.attr("data-x", f), d.attr("data-y", g), _updateASelector(articulation_x_y, b)
-		    _setupModuleZ(hand, g);
+		    selectedY = g;
+		    _setupModuleZ(hand);
 		    //_updateParameterJSON(hand);
-		    dynworkflow.nextSubConfig();
+		    dynworkflow.selectedConfig();
 		});
-		var articulation_z = "#" + hand + "-articulation-z .module-z";
+	}
+	
+	function _setupBallSelectorZ(hand) {
+		var base_id = ".selection-panel-body[mainConfig=right-hand][subConfig=articulacao][step=2]";
+		var articulation_z = base_id + " .module-z";
 		$(articulation_z + " .ball-selector").off("click").on("click", function(a) {
 		    var b = $(a.target);
-		    if (!b.hasClass("ball-selector")) return;
+		    if (!b.hasClass("ball-selector")) {
+		    	dynworkflow.selectedConfig();
+		    	return;
+		    }
 		    var c = b.parent(".grid-row"),
 		        e = $(articulation_z),
 		        h = b.attr("data-z");
 		    b.attr("data-z") && e.attr("data-z", h), _updateASelector(articulation_z, b);
 		    //_updateParameterJSON(hand);
-		    dynworkflow.nextSubConfig();
+		    dynworkflow.selectedConfig();
 		});
 	}
  
@@ -74,9 +89,18 @@
 		return value;
 	}
  
-	articulation.setup = function(serverhost) {
+	articulation.setupModuleXY = function(serverhost) {
 		server_host = serverhost;
-		_setupBallSelector("right-hand");
-		_setupBallSelector("left-hand");
+		_setupBallSelectorXY("right-hand");
+		_setupBallSelectorXY("left-hand");
 	};
+	
+	articulation.setupModuleZ = function(serverhost) {
+		server_host = serverhost;
+		_setupBallSelectorZ("right-hand");
+		_setupBallSelectorZ("left-hand");
+		_setupModuleZ("right-hand");
+		_setupModuleZ("left-hand");
+	};
+	
 }(window.articulation = window.articulation || {}, jQuery));
 \ No newline at end of file
 (function(configuration, $, undefined) {
  
 	configuration.setupFingersGroup = function() {
-		$("#right-hand-fingers-position-group .selection-panel-option").off("click").on(
-				"click", function() {
-				    $("#right-hand-fingers-position-group .selection-panel-option[select=true]")
-				    .removeAttr("select");
-				    $(this).attr("select", true);
-				    dynworkflow.nextSubConfig();
+		var baseId = ".selection-panel-body[mainConfig=right-hand][subConfig=configuracao][step=1]";
+		$(baseId + " .selection-panel-option"
+				).off("click").on("click", function() {
+				    wikilibras.selectConfig(baseId, this);
+				    dynworkflow.selectedConfig();
 		});
 	};
  
 	configuration.setupFingersPosition = function() {
-		$("#right-hand-fingers-position .selection-panel-option").off("click").on(
+		var stepTwoBaseId = ".selection-panel-body[mainConfig=right-hand][subConfig=configuracao][step=2]";
+		$(stepTwoBaseId + " .selection-panel-option").off("click").on(
 				"click", function() {
-					dynworkflow.nextSubConfig();
+					wikilibras.selectConfig(stepTwoBaseId, this);
+					dynworkflow.selectedConfig();
 		});
  
-		var finger_group = $("#right-hand-fingers-position-group .selection-panel-option[select=true]").attr("group");
-		$("#right-hand-fingers-position .finger-group").hide();
-		$("#right-hand-fingers-position .finger-group[group=" + finger_group + "]").show();
+		var stepOneBaseId = ".selection-panel-body[mainConfig=right-hand][subConfig=configuracao][step=1]";
+		var finger_group = $(stepOneBaseId + " .selection-panel-option[select=true]").attr("group");
+		$(stepTwoBaseId + " .finger-group").hide();
+		$(stepTwoBaseId + " .finger-group[group=" + finger_group + "]").show();
 	}
  
 }(window.configuration = window.configuration || {}, jQuery));
 \ No newline at end of file
@@ -4,12 +4,13 @@
 	var baseUrl = "";
  
 	var mainConfig = "";
+	var preprocessedMainConfig = "";
 	var currentSubconfigParent = "";
 	var currentSubconfig = "";
 	var currentSubConfigName = "";
 	var currentStep = 0;
  
-	function _preprocessConfig(config) {
+	function _preprocessMainConfig(config) {
 		config = config.replace("right-hand", "hand");
 		config = config.replace("left-hand", "hand");
 		return config;
@@ -40,24 +41,49 @@
 	}
  
 	function _showCurrentSubconfig() {
-		_showSubconfiguration(currentSubConfigName, currentSubconfig[currentStep]);
+		_showSubconfiguration(mainConfig, currentSubConfigName, currentStep);
 	}
  
-	function _showSubconfiguration(subconfig, step) {
-		var step = typeof step == "undefined" ? "passo-1" : step;
+	function _isSubconfigurationPanelLoaded(mainConfig, subConfig, stepNumber) {
+		var stepNumber = stepNumber + 1;
+		return $(".selection-panel-body[mainConfig=" + mainConfig + "][subConfig=" + subConfig +
+				"][step=" +	stepNumber + "]").length > 0;
+	}
+	
+	function _showLoadedSubconfigurationPanel(mainConfig, subConfig, stepNumber) {
+		var stepNumber = stepNumber + 1;
+		return $(".selection-panel-body[mainConfig=" + mainConfig + "][subConfig=" + subConfig +
+				"][step=" +	stepNumber + "]").show();
+	}
+	
+	function _showSubconfiguration(mainConfig, subConfig, stepNumber) {
 		$(".selection-panel-body").hide();
-		dynengine.render(baseUrl, "/" + mainConfig + "/" + subconfig +
-				"/" + step + ".html", "#selection-panel", true);
+		
+		if (_isSubconfigurationPanelLoaded(mainConfig, subConfig, stepNumber)) {
+			_showLoadedSubconfigurationPanel(mainConfig, subConfig, stepNumber);
+		} else {
+			var step = currentSubconfig[stepNumber];
+			step = typeof step == "undefined" ? "passo-1" : step;
+			dynengine.render(baseUrl, "/" + preprocessedMainConfig + "/" + subConfig +
+					"/" + step + ".html", "#selection-panel", true);
+		}
+		
+		_selectTimelineIcon(mainConfig, subConfig, true);
 	}
  
 	dynworkflow.selectMainConfig = function(config) {
-		mainConfig = _preprocessConfig(config);
-		currentSubConfigName = _getFirstKey(jsonWF[mainConfig]);
-		currentSubconfig = jsonWF[mainConfig][currentSubConfigName];
-		currentSubconfigParent = jsonWF[mainConfig];
+		mainConfig = config;
+		preprocessedMainConfig = _preprocessMainConfig(mainConfig)
+		currentSubConfigName = _getFirstKey(jsonWF[preprocessedMainConfig]);
+		currentSubconfig = jsonWF[preprocessedMainConfig][currentSubConfigName];
+		currentSubconfigParent = jsonWF[preprocessedMainConfig];
 		currentStep = 0;
  
 		_showCurrentSubconfig();
+		
+		if (preprocessedMainConfig != "hand" || _isTimelineLoaded()) {
+			_setupTimeline();
+		}
 	}
  
 	dynworkflow.selectMovement = function(movement) {
@@ -68,24 +94,31 @@
 		currentStep = 0;
  
 		_showCurrentSubconfig();
+		_setupTimeline();
 	}
  
-	dynworkflow.selectSubConfig = function(config) {
-		currentSubConfigName = config;
+	function _selectSubConfig(subConfig) {
+		currentSubConfigName = subConfig;
 		currentSubconfig = currentSubconfigParent[currentSubConfigName];
 		currentStep = 0;
  
 		_showCurrentSubconfig();
 	}
  
+	dynworkflow.selectSubConfig = function(subConfig) {
+		_selectSubConfig(subConfig);
+	}
+	
 	dynworkflow.nextSubConfig = function() {
+		_nextSubConfig();
+	}
+	
+	function _nextSubConfig() {
 		currentStep = currentStep + 1;
-		
 		if (currentStep < currentSubconfig.length) {
 			_showCurrentSubconfig();
 		} else {
 			var nextSubConfig = _getNextSubConfig();
-			
 			if (nextSubConfig != -1) {
 				dynworkflow.selectSubConfig(nextSubConfig);
 			} else {
@@ -94,22 +127,95 @@
 		}
 	}
  
-	dynworkflow.setupTimeline = function() {
-		dynengine.render(baseUrl, "/" + mainConfig + "/timeline.html", "#selection-panel", false, function() {
-			$(".subconfiguration-options .icon_container").hide();
-
-			for (var name in currentSubconfigParent) {
-				$(".subconfiguration-options .icon_container[json_name=" + name + "]").show();
-			}
-			if (mainConfig == "hand") {
-				$(".subconfiguration-options .icon_container[json_name=movimento]").show();
-			}
-			
-			$(".subconfiguration-panel").show();
+	function _selectedConfig() {
+		if (currentStep == currentSubconfig.length - 1) {
+			_setupCheckIcon(mainConfig, currentSubConfigName);
+		}
+		_nextSubConfig();	
+	}
+	
+	dynworkflow.selectedConfig = function() {
+		_selectedConfig();
+	}
+	
+	function _selectTimelineIcon(mainConfig, subConfig) {
+		var icon_id = ".subconfiguration-panel[mainConfig=" + mainConfig +
+				  "] .icon_container[json_name=" + subConfig + "]";
+		
+		var previousSelected = $(".subconfiguration-panel[mainConfig=" + mainConfig 
+			+ "] .icon_container[select=true]").attr("json_name");
+		if (typeof previousSelected != "undefined") {
+			_deselectTimelineIcon(mainConfig, previousSelected);
+		}
+		
+		wikilibras.enableIconHover($(icon_id), true);
+		$(icon_id).attr("select", true);
+	}
+	
+	function _deselectTimelineIcon(mainConfig, subConfig) {
+		var icon_id = ".subconfiguration-panel[mainConfig=" + mainConfig +
+		  "] .icon_container[json_name=" + subConfig + "]";
+		
+		if ($(icon_id + "[complete=true]").length > 0) {
+			_setupCheckIcon(mainConfig, subConfig);
+		} else {
+			wikilibras.enableIconHover($(icon_id), false);
+			$(icon_id).attr("select", false);
+		}
+	}
+	
+	function _setupCheckIcon(mainConfig, subConfig) {
+		var icon_id = $(".subconfiguration-panel[mainConfig=" + mainConfig +
+				  "] .icon_container[json_name=" + subConfig + "]");
+		wikilibras.enableIconCheck(icon_id, true);
+		$(icon_id).attr("complete", true);
+		$(icon_id).attr("select", false);
+	}
+	
+	function _isTimelineLoaded() {
+		return $(".subconfiguration-panel[mainConfig=" + mainConfig + "]").length > 0;
+	}
+	
+	function _setupTimelineIcons(timelineBaseId) {
+		$(timelineBaseId + " .icon_container").hide();
+		
+		for (var name in currentSubconfigParent) {
+			$(timelineBaseId + " .icon_container[json_name=" + name + "]").show();
+		}
+		if (preprocessedMainConfig == "hand") {
+			$(timelineBaseId + " .icon_container[json_name=movimento]").show();
+			_setupCheckIcon(mainConfig, "movimento");
+			//TODO Refact
+			_selectTimelineIcon(mainConfig, "articulacao");
+		}
+		
+		$(timelineBaseId + " .icon_container").off("click").on("click",
+			     		function() {
+			     			var subConfig = $(this).attr("json_name");
+			     			_selectSubConfig(subConfig);
 		});
+		
+		$(timelineBaseId).show();
+	}
+	
+	function _setupTimeline() {
+		var timelineBaseId = ".subconfiguration-panel[mainConfig=" + mainConfig + "]";
+		if (_isTimelineLoaded()) {
+			$(timelineBaseId).show();
+		} else {
+			dynengine.render(baseUrl, "/" + preprocessedMainConfig +
+					"/timeline.html", "#selection-panel", false, function() {
+				_setupTimelineIcons(timelineBaseId);
+			});
+		}
+	}
+	
+	dynworkflow.setupTimeline = function() {
+		_setupTimeline();
 	}
  
 	dynworkflow.load = function() {
+		loadedPanel = {};
 		baseUrl = $('#server-url').data('url');
 		$.get(baseUrl + "/conf/selection-workflow-json", function(result) {
 			jsonWF = $.parseJSON(result);
 (function(movement, $, undefined) {
  
-	var base_url = "";
-
 	movement.setup = function(serverhost) {
-		base_url = serverhost;
-
-		$("#right-hand-moviment .selection-panel-option").off("click").on(
+		var baseId = ".selection-panel-body[mainConfig=right-hand][subConfig=movimento][step=1]";
+		$(baseId + " .selection-panel-option").off("click").on(
 				"click", function() {
+					wikilibras.selectConfig(baseId, this);
 					dynworkflow.selectMovement($(this).attr("value"));
-					dynworkflow.setupTimeline();
 		});
 	};
 }(window.movement = window.movement || {}, jQuery));
 \ No newline at end of file
 (function(orientation, $, undefined) {
  
 	orientation.setup = function() {
-		$("#right-hand-orientation .selection-panel-option").off("click").on(
+		var baseId = ".selection-panel-body[mainConfig=right-hand][subConfig=orientacao][step=1]";
+		$(baseId + " .selection-panel-option").off("click").on(
 				"click", function() {
-				    dynworkflow.nextSubConfig();
+					wikilibras.selectConfig(baseId, this);
+				    dynworkflow.selectedConfig();
 		});
 	};
  
@@ -62,23 +62,26 @@
   function _deselectIcon(iconName, parent) {
     _selectIcon(iconName, false, parent);
   }
-
-  function _setupCheckIcon(option, isCheck, panel) {
-    panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
-    var img = $(".icon_container[name=" + option + "]" + panel).find("img")
-    .first();
-    var check_img_url = base_url + "/img/" + option;
+  
+  function _enableIconCheck(container, isCheck) {
+    var img = $(container).find("img").first();
+    var check_img_url = base_url + "/img/" + $(container).attr("name");
  
     if (isCheck) {
       check_img_url += "-icon-check.png";
     } else {
       check_img_url += "-icon.png";
     }
-
     _changeImage(img, check_img_url);
-    $(".icon_container[name=" + option + "]" + panel).attr("complete", isCheck);
   }
  
+  function _setupCheckIcon(option, isCheck, panel) {
+    panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
+    var icon_id = ".icon_container[name=" + option + "]" + panel;
+    _enableIconCheck(icon_id, isCheck);
+    $(".icon_container[name=" + option + "]" + panel).attr("complete", isCheck);
+  }
+  
   function _isSelectingState() {
     return $("#configuration-panel .icon_container[select=true]").length > 0;
   }
@@ -494,16 +497,13 @@
     return $(el).attr("value");
   }
  
-  function _selectConfig(el) {
-    var current_config_id = $(".selection-panel-body").has(el).attr("id");
-    var current_config_name = $(".selection-panel-body").has(el).attr(
-    "name");
-    $("#" + current_config_id + " .selection-panel-option[select=true]")
+  function _selectConfig(parentId, el) {
+    $(parentId + " .selection-panel-option[select=true]")
     .removeAttr("select");
     $(el).attr("select", true);
  
-    var config_value = _readConfigValue(el, current_config_name);
-    _updateParameterJSON(current_config_name, config_value);
+    //var config_value = _readConfigValue(el, current_config_name);
+    //_updateParameterJSON(current_config_name, config_value);
   }
  
   function _setupSelectionPanel() {
@@ -683,6 +683,16 @@
 	  _hideSelectionPanel();
   }
  
+  wikilibras.selectConfig = function(parentId, el) {
+	  _selectConfig(parentId, el);
+  }
+  
+  wikilibras.enableIconHover = function(container, isHover) {
+	  _enableIconHover(container, isHover);
+  }
+  
+  wikilibras.enableIconCheck = function(container, isHover) {
+	  _enableIconCheck(container, isHover);
+  }
  
-
 }(window.wikilibras = window.wikilibras || {}, jQuery));
-<div id="right-hand-articulation-x-y" class="selection-panel-body">
+<div class="selection-panel-body" mainConfig="right-hand" subConfig="articulacao" step="1">
 	<div class="panel-header">
 		<h8>Onde é feito o sinal?</h8>
 	</div>
@@ -71,5 +71,5 @@
 	</div>
 </div>
 <script type="text/javascript">
-	articulation.setup("{{ server }}");
+	articulation.setupModuleXY("{{ server }}");
 </script>
 \ No newline at end of file
-<div id="right-hand-articulation-z" class="selection-panel-body">
+<div class="selection-panel-body" mainConfig="right-hand" subConfig="articulacao" step="2">
 	<div class="panel-header">
 		<h8>Escolha a distância entre a mão e o corpo</h8>
 	</div>
@@ -33,5 +33,5 @@
 	</div>
 </div>
 <script type="text/javascript">
-	articulation.setup("{{ server }}");
+	articulation.setupModuleZ("{{ server }}");
 </script>
 \ No newline at end of file
-<div id="right-hand-fingers-position-group" class="selection-panel-body">
+<div class="selection-panel-body" mainconfig="right-hand" subconfig="configuracao" step="1">
 	<div class="panel-header">
 		<h8>Escolha a posição mais parecida dos dedos</h8>
 	</div>
-<div id="right-hand-fingers-position" class="selection-panel-body">
+<div class="selection-panel-body" mainConfig="right-hand" subConfig="configuracao" step="2">
 	<div class="panel-header">
 		<h8>Escolha a posição dos dedos</h8>
 	</div>
-<div id="right-hand-moviment" class="selection-panel-body"
-	name="movimento">
+<div class="selection-panel-body" mainConfig="right-hand" subConfig="movimento" step="1">
 	<div class="panel-header">
 		<h8>Escolha o movimento mais parecido</h8>
 	</div>
-<div id="right-hand-orientation" class="selection-panel-body"
-	name="orientacao">
+<div class="selection-panel-body" mainConfig="right-hand" subConfig="orientacao" step="1">
 	<div class="panel-header">
 		<h8>Palma da mão</h8>
 	</div>
-<div class="subconfiguration-panel col-sm-12">
+<div class="subconfiguration-panel col-sm-12" mainConfig="right-hand">
   <div class="arrow icon_container col-sm-1" name="left-arrow">
     <img src="{{ server }}/img/left-arrow-icon.png" />
   </div>
...	...	@@ -317,11 +317,11 @@ ul.rig.columns-4 li {
317	317	width: 20%;
318	318	}
319	319
320		-#right-hand-moviment ul.rig.columns-2 li {
	320	+.selection-panel-body[mainconfig=right-hand] ul.rig.columns-2 li {
321	321	width: 60%;
322	322	}
323	323
324		-#left-hand-moviment ul.rig.columns-2 li {
	324	+.selection-panel-body[mainconfig=left-hand] ul.rig.columns-2 li {
325	325	width: 60%;
326	326	}
327	327
...	...
1	1	(function(articulation, $, undefined) {
2	2
3	3	var server_host = "";
	4	+ var selectedY = "";
4	5
5	6	function _updateASelector(container, ballSelector) {
6	7	$(container + " .ball-selector.active").each(function() {
...	...	@@ -9,43 +10,57 @@
9	10	'/img/pa/A-Seletor.png" class="point-a-selector" alt=""></div>')
10	11	}
11	12
12		- function _setupModuleZ(hand, y) {
13		- if (typeof y == "undefined") return;
14		- var articulation_z = "." + hand + "-articulation .module-z";
	13	+ function _setupModuleZ(hand) {
	14	+ if (typeof selectedY == "undefined" \|\| selectedY == "") return;
	15	+
	16	+ var base_id = ".selection-panel-body[mainConfig=right-hand][subConfig=articulacao][step=2]";
	17	+ var articulation_z = base_id + " .module-z";
15	18	$(articulation_z + " .ball-selector").hide();
16		- $(articulation_z + " .row-number-" + y + " .ball-selector").show();
	19	+ $(articulation_z + " .row-number-" + selectedY + " .ball-selector").show();
17	20
18	21	var z = $(articulation_z).attr("data-z");
19	22	if (typeof z != "undefined") {
20		- var ball_selector = $(articulation_z + " .row-number-" + y + " .ball-" + z);
	23	+ var ball_selector = $(articulation_z + " .row-number-" + selectedY + " .ball-" + z);
21	24	_updateASelector(articulation_z, ball_selector);
22	25	}
23	26	}
24	27
25		- function _setupBallSelector(hand) {
26		- var articulation_x_y = "#" + hand + "-articulation-x-y .module-x-y";
	28	+ function _setupBallSelectorXY(hand) {
	29	+ var base_id = ".selection-panel-body[mainConfig=right-hand][subConfig=articulacao][step=1]";
	30	+ var articulation_x_y = base_id + " .module-x-y";
27	31	$(articulation_x_y + " .ball-selector").off("click").on("click", function(a) {
28	32	var b = $(a.target);
29		- if (!b.hasClass("ball-selector")) return;
	33	+ if (!b.hasClass("ball-selector")) {
	34	+ dynworkflow.selectedConfig();
	35	+ return;
	36	+ }
30	37	var c = b.parent(".grid-row"),
31	38	d = $(articulation_x_y),
32	39	f = b.attr("data-x"),
33	40	g = c.attr("data-y");
34	41	d.attr("data-x", f), d.attr("data-y", g), _updateASelector(articulation_x_y, b)
35		- _setupModuleZ(hand, g);
	42	+ selectedY = g;
	43	+ _setupModuleZ(hand);
36	44	//_updateParameterJSON(hand);
37		- dynworkflow.nextSubConfig();
	45	+ dynworkflow.selectedConfig();
38	46	});
39		- var articulation_z = "#" + hand + "-articulation-z .module-z";
	47	+ }
	48	+
	49	+ function _setupBallSelectorZ(hand) {
	50	+ var base_id = ".selection-panel-body[mainConfig=right-hand][subConfig=articulacao][step=2]";
	51	+ var articulation_z = base_id + " .module-z";
40	52	$(articulation_z + " .ball-selector").off("click").on("click", function(a) {
41	53	var b = $(a.target);
42		- if (!b.hasClass("ball-selector")) return;
	54	+ if (!b.hasClass("ball-selector")) {
	55	+ dynworkflow.selectedConfig();
	56	+ return;
	57	+ }
43	58	var c = b.parent(".grid-row"),
44	59	e = $(articulation_z),
45	60	h = b.attr("data-z");
46	61	b.attr("data-z") && e.attr("data-z", h), _updateASelector(articulation_z, b);
47	62	//_updateParameterJSON(hand);
48		- dynworkflow.nextSubConfig();
	63	+ dynworkflow.selectedConfig();
49	64	});
50	65	}
51	66
...	...	@@ -74,9 +89,18 @@
74	89	return value;
75	90	}
76	91
77		- articulation.setup = function(serverhost) {
	92	+ articulation.setupModuleXY = function(serverhost) {
78	93	server_host = serverhost;
79		- _setupBallSelector("right-hand");
80		- _setupBallSelector("left-hand");
	94	+ _setupBallSelectorXY("right-hand");
	95	+ _setupBallSelectorXY("left-hand");
81	96	};
	97	+
	98	+ articulation.setupModuleZ = function(serverhost) {
	99	+ server_host = serverhost;
	100	+ _setupBallSelectorZ("right-hand");
	101	+ _setupBallSelectorZ("left-hand");
	102	+ _setupModuleZ("right-hand");
	103	+ _setupModuleZ("left-hand");
	104	+ };
	105	+
82	106	}(window.articulation = window.articulation \|\| {}, jQuery));
83	107	\ No newline at end of file
...	...
1	1	(function(configuration, $, undefined) {
2	2
3	3	configuration.setupFingersGroup = function() {
4		- $("#right-hand-fingers-position-group .selection-panel-option").off("click").on(
5		- "click", function() {
6		- $("#right-hand-fingers-position-group .selection-panel-option[select=true]")
7		- .removeAttr("select");
8		- $(this).attr("select", true);
9		- dynworkflow.nextSubConfig();
	4	+ var baseId = ".selection-panel-body[mainConfig=right-hand][subConfig=configuracao][step=1]";
	5	+ $(baseId + " .selection-panel-option"
	6	+ ).off("click").on("click", function() {
	7	+ wikilibras.selectConfig(baseId, this);
	8	+ dynworkflow.selectedConfig();
10	9	});
11	10	};
12	11
13	12	configuration.setupFingersPosition = function() {
14		- $("#right-hand-fingers-position .selection-panel-option").off("click").on(
	13	+ var stepTwoBaseId = ".selection-panel-body[mainConfig=right-hand][subConfig=configuracao][step=2]";
	14	+ $(stepTwoBaseId + " .selection-panel-option").off("click").on(
15	15	"click", function() {
16		- dynworkflow.nextSubConfig();
	16	+ wikilibras.selectConfig(stepTwoBaseId, this);
	17	+ dynworkflow.selectedConfig();
17	18	});
18	19
19		- var finger_group = $("#right-hand-fingers-position-group .selection-panel-option[select=true]").attr("group");
20		- $("#right-hand-fingers-position .finger-group").hide();
21		- $("#right-hand-fingers-position .finger-group[group=" + finger_group + "]").show();
	20	+ var stepOneBaseId = ".selection-panel-body[mainConfig=right-hand][subConfig=configuracao][step=1]";
	21	+ var finger_group = $(stepOneBaseId + " .selection-panel-option[select=true]").attr("group");
	22	+ $(stepTwoBaseId + " .finger-group").hide();
	23	+ $(stepTwoBaseId + " .finger-group[group=" + finger_group + "]").show();
22	24	}
23	25
24	26	}(window.configuration = window.configuration \|\| {}, jQuery));
25	27	\ No newline at end of file
...	...
...	...	@@ -4,12 +4,13 @@
4	4	var baseUrl = "";
5	5
6	6	var mainConfig = "";
	7	+ var preprocessedMainConfig = "";
7	8	var currentSubconfigParent = "";
8	9	var currentSubconfig = "";
9	10	var currentSubConfigName = "";
10	11	var currentStep = 0;
11	12
12		- function _preprocessConfig(config) {
	13	+ function _preprocessMainConfig(config) {
13	14	config = config.replace("right-hand", "hand");
14	15	config = config.replace("left-hand", "hand");
15	16	return config;
...	...	@@ -40,24 +41,49 @@
40	41	}
41	42
42	43	function _showCurrentSubconfig() {
43		- _showSubconfiguration(currentSubConfigName, currentSubconfig[currentStep]);
	44	+ _showSubconfiguration(mainConfig, currentSubConfigName, currentStep);
44	45	}
45	46
46		- function _showSubconfiguration(subconfig, step) {
47		- var step = typeof step == "undefined" ? "passo-1" : step;
	47	+ function _isSubconfigurationPanelLoaded(mainConfig, subConfig, stepNumber) {
	48	+ var stepNumber = stepNumber + 1;
	49	+ return $(".selection-panel-body[mainConfig=" + mainConfig + "][subConfig=" + subConfig +
	50	+ "][step=" + stepNumber + "]").length > 0;
	51	+ }
	52	+
	53	+ function _showLoadedSubconfigurationPanel(mainConfig, subConfig, stepNumber) {
	54	+ var stepNumber = stepNumber + 1;
	55	+ return $(".selection-panel-body[mainConfig=" + mainConfig + "][subConfig=" + subConfig +
	56	+ "][step=" + stepNumber + "]").show();
	57	+ }
	58	+
	59	+ function _showSubconfiguration(mainConfig, subConfig, stepNumber) {
48	60	$(".selection-panel-body").hide();
49		- dynengine.render(baseUrl, "/" + mainConfig + "/" + subconfig +
50		- "/" + step + ".html", "#selection-panel", true);
	61	+
	62	+ if (_isSubconfigurationPanelLoaded(mainConfig, subConfig, stepNumber)) {
	63	+ _showLoadedSubconfigurationPanel(mainConfig, subConfig, stepNumber);
	64	+ } else {
	65	+ var step = currentSubconfig[stepNumber];
	66	+ step = typeof step == "undefined" ? "passo-1" : step;
	67	+ dynengine.render(baseUrl, "/" + preprocessedMainConfig + "/" + subConfig +
	68	+ "/" + step + ".html", "#selection-panel", true);
	69	+ }
	70	+
	71	+ _selectTimelineIcon(mainConfig, subConfig, true);
51	72	}
52	73
53	74	dynworkflow.selectMainConfig = function(config) {
54		- mainConfig = _preprocessConfig(config);
55		- currentSubConfigName = _getFirstKey(jsonWF[mainConfig]);
56		- currentSubconfig = jsonWF[mainConfig][currentSubConfigName];
57		- currentSubconfigParent = jsonWF[mainConfig];
	75	+ mainConfig = config;
	76	+ preprocessedMainConfig = _preprocessMainConfig(mainConfig)
	77	+ currentSubConfigName = _getFirstKey(jsonWF[preprocessedMainConfig]);
	78	+ currentSubconfig = jsonWF[preprocessedMainConfig][currentSubConfigName];
	79	+ currentSubconfigParent = jsonWF[preprocessedMainConfig];
58	80	currentStep = 0;
59	81
60	82	_showCurrentSubconfig();
	83	+
	84	+ if (preprocessedMainConfig != "hand" \|\| _isTimelineLoaded()) {
	85	+ _setupTimeline();
	86	+ }
61	87	}
62	88
63	89	dynworkflow.selectMovement = function(movement) {
...	...	@@ -68,24 +94,31 @@
68	94	currentStep = 0;
69	95
70	96	_showCurrentSubconfig();
	97	+ _setupTimeline();
71	98	}
72	99
73		- dynworkflow.selectSubConfig = function(config) {
74		- currentSubConfigName = config;
	100	+ function _selectSubConfig(subConfig) {
	101	+ currentSubConfigName = subConfig;
75	102	currentSubconfig = currentSubconfigParent[currentSubConfigName];
76	103	currentStep = 0;
77	104
78	105	_showCurrentSubconfig();
79	106	}
80	107
	108	+ dynworkflow.selectSubConfig = function(subConfig) {
	109	+ _selectSubConfig(subConfig);
	110	+ }
	111	+
81	112	dynworkflow.nextSubConfig = function() {
	113	+ _nextSubConfig();
	114	+ }
	115	+
	116	+ function _nextSubConfig() {
82	117	currentStep = currentStep + 1;
83		-
84	118	if (currentStep < currentSubconfig.length) {
85	119	_showCurrentSubconfig();
86	120	} else {
87	121	var nextSubConfig = _getNextSubConfig();
88		-
89	122	if (nextSubConfig != -1) {
90	123	dynworkflow.selectSubConfig(nextSubConfig);
91	124	} else {
...	...	@@ -94,22 +127,95 @@
94	127	}
95	128	}
96	129
97		- dynworkflow.setupTimeline = function() {
98		- dynengine.render(baseUrl, "/" + mainConfig + "/timeline.html", "#selection-panel", false, function() {
99		- $(".subconfiguration-options .icon_container").hide();
100		-
101		- for (var name in currentSubconfigParent) {
102		- $(".subconfiguration-options .icon_container[json_name=" + name + "]").show();
103		- }
104		- if (mainConfig == "hand") {
105		- $(".subconfiguration-options .icon_container[json_name=movimento]").show();
106		- }
107		-
108		- $(".subconfiguration-panel").show();
	130	+ function _selectedConfig() {
	131	+ if (currentStep == currentSubconfig.length - 1) {
	132	+ _setupCheckIcon(mainConfig, currentSubConfigName);
	133	+ }
	134	+ _nextSubConfig();
	135	+ }
	136	+
	137	+ dynworkflow.selectedConfig = function() {
	138	+ _selectedConfig();
	139	+ }
	140	+
	141	+ function _selectTimelineIcon(mainConfig, subConfig) {
	142	+ var icon_id = ".subconfiguration-panel[mainConfig=" + mainConfig +
	143	+ "] .icon_container[json_name=" + subConfig + "]";
	144	+
	145	+ var previousSelected = $(".subconfiguration-panel[mainConfig=" + mainConfig
	146	+ + "] .icon_container[select=true]").attr("json_name");
	147	+ if (typeof previousSelected != "undefined") {
	148	+ _deselectTimelineIcon(mainConfig, previousSelected);
	149	+ }
	150	+
	151	+ wikilibras.enableIconHover($(icon_id), true);
	152	+ $(icon_id).attr("select", true);
	153	+ }
	154	+
	155	+ function _deselectTimelineIcon(mainConfig, subConfig) {
	156	+ var icon_id = ".subconfiguration-panel[mainConfig=" + mainConfig +
	157	+ "] .icon_container[json_name=" + subConfig + "]";
	158	+
	159	+ if ($(icon_id + "[complete=true]").length > 0) {
	160	+ _setupCheckIcon(mainConfig, subConfig);
	161	+ } else {
	162	+ wikilibras.enableIconHover($(icon_id), false);
	163	+ $(icon_id).attr("select", false);
	164	+ }
	165	+ }
	166	+
	167	+ function _setupCheckIcon(mainConfig, subConfig) {
	168	+ var icon_id = $(".subconfiguration-panel[mainConfig=" + mainConfig +
	169	+ "] .icon_container[json_name=" + subConfig + "]");
	170	+ wikilibras.enableIconCheck(icon_id, true);
	171	+ $(icon_id).attr("complete", true);
	172	+ $(icon_id).attr("select", false);
	173	+ }
	174	+
	175	+ function _isTimelineLoaded() {
	176	+ return $(".subconfiguration-panel[mainConfig=" + mainConfig + "]").length > 0;
	177	+ }
	178	+
	179	+ function _setupTimelineIcons(timelineBaseId) {
	180	+ $(timelineBaseId + " .icon_container").hide();
	181	+
	182	+ for (var name in currentSubconfigParent) {
	183	+ $(timelineBaseId + " .icon_container[json_name=" + name + "]").show();
	184	+ }
	185	+ if (preprocessedMainConfig == "hand") {
	186	+ $(timelineBaseId + " .icon_container[json_name=movimento]").show();
	187	+ _setupCheckIcon(mainConfig, "movimento");
	188	+ //TODO Refact
	189	+ _selectTimelineIcon(mainConfig, "articulacao");
	190	+ }
	191	+
	192	+ $(timelineBaseId + " .icon_container").off("click").on("click",
	193	+ function() {
	194	+ var subConfig = $(this).attr("json_name");
	195	+ _selectSubConfig(subConfig);
109	196	});
	197	+
	198	+ $(timelineBaseId).show();
	199	+ }
	200	+
	201	+ function _setupTimeline() {
	202	+ var timelineBaseId = ".subconfiguration-panel[mainConfig=" + mainConfig + "]";
	203	+ if (_isTimelineLoaded()) {
	204	+ $(timelineBaseId).show();
	205	+ } else {
	206	+ dynengine.render(baseUrl, "/" + preprocessedMainConfig +
	207	+ "/timeline.html", "#selection-panel", false, function() {
	208	+ _setupTimelineIcons(timelineBaseId);
	209	+ });
	210	+ }
	211	+ }
	212	+
	213	+ dynworkflow.setupTimeline = function() {
	214	+ _setupTimeline();
110	215	}
111	216
112	217	dynworkflow.load = function() {
	218	+ loadedPanel = {};
113	219	baseUrl = $('#server-url').data('url');
114	220	$.get(baseUrl + "/conf/selection-workflow-json", function(result) {
115	221	jsonWF = $.parseJSON(result);
...	...
1	1	(function(movement, $, undefined) {
2	2
3		- var base_url = "";
4		-
5	3	movement.setup = function(serverhost) {
6		- base_url = serverhost;
7		-
8		- $("#right-hand-moviment .selection-panel-option").off("click").on(
	4	+ var baseId = ".selection-panel-body[mainConfig=right-hand][subConfig=movimento][step=1]";
	5	+ $(baseId + " .selection-panel-option").off("click").on(
9	6	"click", function() {
	7	+ wikilibras.selectConfig(baseId, this);
10	8	dynworkflow.selectMovement($(this).attr("value"));
11		- dynworkflow.setupTimeline();
12	9	});
13	10	};
14	11	}(window.movement = window.movement \|\| {}, jQuery));
15	12	\ No newline at end of file
...	...
1	1	(function(orientation, $, undefined) {
2	2
3	3	orientation.setup = function() {
4		- $("#right-hand-orientation .selection-panel-option").off("click").on(
	4	+ var baseId = ".selection-panel-body[mainConfig=right-hand][subConfig=orientacao][step=1]";
	5	+ $(baseId + " .selection-panel-option").off("click").on(
5	6	"click", function() {
6		- dynworkflow.nextSubConfig();
	7	+ wikilibras.selectConfig(baseId, this);
	8	+ dynworkflow.selectedConfig();
7	9	});
8	10	};
9	11
...	...
...	...	@@ -62,23 +62,26 @@
62	62	function _deselectIcon(iconName, parent) {
63	63	_selectIcon(iconName, false, parent);
64	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;
	65	+
	66	+ function _enableIconCheck(container, isCheck) {
	67	+ var img = $(container).find("img").first();
	68	+ var check_img_url = base_url + "/img/" + $(container).attr("name");
71	69
72	70	if (isCheck) {
73	71	check_img_url += "-icon-check.png";
74	72	} else {
75	73	check_img_url += "-icon.png";
76	74	}
77		-
78	75	_changeImage(img, check_img_url);
79		- $(".icon_container[name=" + option + "]" + panel).attr("complete", isCheck);
80	76	}
81	77
	78	+ function _setupCheckIcon(option, isCheck, panel) {
	79	+ panel = typeof panel == "undefined" ? "" : "[panel=" + panel + "]";
	80	+ var icon_id = ".icon_container[name=" + option + "]" + panel;
	81	+ _enableIconCheck(icon_id, isCheck);
	82	+ $(".icon_container[name=" + option + "]" + panel).attr("complete", isCheck);
	83	+ }
	84	+
82	85	function _isSelectingState() {
83	86	return $("#configuration-panel .icon_container[select=true]").length > 0;
84	87	}
...	...	@@ -494,16 +497,13 @@
494	497	return $(el).attr("value");
495	498	}
496	499
497		- function _selectConfig(el) {
498		- var current_config_id = $(".selection-panel-body").has(el).attr("id");
499		- var current_config_name = $(".selection-panel-body").has(el).attr(
500		- "name");
501		- $("#" + current_config_id + " .selection-panel-option[select=true]")
	500	+ function _selectConfig(parentId, el) {
	501	+ $(parentId + " .selection-panel-option[select=true]")
502	502	.removeAttr("select");
503	503	$(el).attr("select", true);
504	504
505		- var config_value = _readConfigValue(el, current_config_name);
506		- _updateParameterJSON(current_config_name, config_value);
	505	+ //var config_value = _readConfigValue(el, current_config_name);
	506	+ //_updateParameterJSON(current_config_name, config_value);
507	507	}
508	508
509	509	function _setupSelectionPanel() {
...	...	@@ -683,6 +683,16 @@
683	683	_hideSelectionPanel();
684	684	}
685	685
	686	+ wikilibras.selectConfig = function(parentId, el) {
	687	+ _selectConfig(parentId, el);
	688	+ }
	689	+
	690	+ wikilibras.enableIconHover = function(container, isHover) {
	691	+ _enableIconHover(container, isHover);
	692	+ }
	693	+
	694	+ wikilibras.enableIconCheck = function(container, isHover) {
	695	+ _enableIconCheck(container, isHover);
	696	+ }
686	697
687		-
688	698	}(window.wikilibras = window.wikilibras \|\| {}, jQuery));
...	...
1		-<div id="right-hand-articulation-x-y" class="selection-panel-body">
	1	+<div class="selection-panel-body" mainConfig="right-hand" subConfig="articulacao" step="1">
2	2	<div class="panel-header">
3	3	<h8>Onde é feito o sinal?</h8>
4	4	</div>
...	...	@@ -71,5 +71,5 @@
71	71	</div>
72	72	</div>
73	73	<script type="text/javascript">
74		- articulation.setup("{{ server }}");
	74	+ articulation.setupModuleXY("{{ server }}");
75	75	</script>
76	76	\ No newline at end of file
...	...
1		-<div id="right-hand-articulation-z" class="selection-panel-body">
	1	+<div class="selection-panel-body" mainConfig="right-hand" subConfig="articulacao" step="2">
2	2	<div class="panel-header">
3	3	<h8>Escolha a distância entre a mão e o corpo</h8>
4	4	</div>
...	...	@@ -33,5 +33,5 @@
33	33	</div>
34	34	</div>
35	35	<script type="text/javascript">
36		- articulation.setup("{{ server }}");
	36	+ articulation.setupModuleZ("{{ server }}");
37	37	</script>
38	38	\ No newline at end of file
...	...
1		-<div id="right-hand-fingers-position-group" class="selection-panel-body">
	1	+<div class="selection-panel-body" mainconfig="right-hand" subconfig="configuracao" step="1">
2	2	<div class="panel-header">
3	3	<h8>Escolha a posição mais parecida dos dedos</h8>
4	4	</div>
...	...