From 5bfc2de5f7a5df94ccd04cc47e91180955f9b06d Mon Sep 17 00:00:00 2001 From: Adabriand Furtado Date: Wed, 3 Feb 2016 01:56:03 -0300 Subject: [PATCH] Lógica de atualização da timeline de configurações. --- view/assets/css/main.css | 4 ++-- view/assets/js/articulation.js | 56 ++++++++++++++++++++++++++++++++++++++++---------------- view/assets/js/configuration.js | 24 +++++++++++++----------- view/assets/js/dynamic-selection-workflow.js | 158 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------- view/assets/js/movement.js | 9 +++------ view/assets/js/orientation.js | 6 ++++-- view/assets/js/wikilibras.js | 42 ++++++++++++++++++++++++++---------------- view/hand/articulacao/passo-1.html | 4 ++-- view/hand/articulacao/passo-2.html | 4 ++-- view/hand/configuracao/passo-1.html | 2 +- view/hand/configuracao/passo-2.html | 2 +- view/hand/movimento/passo-1.html | 3 +-- view/hand/orientacao/passo-1.html | 3 +-- view/hand/timeline.html | 2 +- 14 files changed, 229 insertions(+), 90 deletions(-) diff --git a/view/assets/css/main.css b/view/assets/css/main.css index 9bee760..7650c58 100644 --- a/view/assets/css/main.css +++ b/view/assets/css/main.css @@ -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%; } diff --git a/view/assets/js/articulation.js b/view/assets/js/articulation.js index 060d88a..38f97a2 100644 --- a/view/assets/js/articulation.js +++ b/view/assets/js/articulation.js @@ -1,6 +1,7 @@ (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="">') } - 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 diff --git a/view/assets/js/configuration.js b/view/assets/js/configuration.js index 5be6e8e..c62470a 100644 --- a/view/assets/js/configuration.js +++ b/view/assets/js/configuration.js @@ -1,24 +1,26 @@ (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 diff --git a/view/assets/js/dynamic-selection-workflow.js b/view/assets/js/dynamic-selection-workflow.js index 9c67a77..1f071a0 100644 --- a/view/assets/js/dynamic-selection-workflow.js +++ b/view/assets/js/dynamic-selection-workflow.js @@ -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); diff --git a/view/assets/js/movement.js b/view/assets/js/movement.js index 82d97ee..dc3b492 100644 --- a/view/assets/js/movement.js +++ b/view/assets/js/movement.js @@ -1,14 +1,11 @@ (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 diff --git a/view/assets/js/orientation.js b/view/assets/js/orientation.js index 70ebc68..fecc50e 100644 --- a/view/assets/js/orientation.js +++ b/view/assets/js/orientation.js @@ -1,9 +1,11 @@ (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(); }); }; diff --git a/view/assets/js/wikilibras.js b/view/assets/js/wikilibras.js index 20b79ef..255eee7 100644 --- a/view/assets/js/wikilibras.js +++ b/view/assets/js/wikilibras.js @@ -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)); diff --git a/view/hand/articulacao/passo-1.html b/view/hand/articulacao/passo-1.html index 9461ef7..25e8460 100644 --- a/view/hand/articulacao/passo-1.html +++ b/view/hand/articulacao/passo-1.html @@ -1,4 +1,4 @@ -
+
Onde é feito o sinal?
@@ -71,5 +71,5 @@
\ No newline at end of file diff --git a/view/hand/articulacao/passo-2.html b/view/hand/articulacao/passo-2.html index ad58c65..367fc9e 100644 --- a/view/hand/articulacao/passo-2.html +++ b/view/hand/articulacao/passo-2.html @@ -1,4 +1,4 @@ -
+
Escolha a distância entre a mão e o corpo
@@ -33,5 +33,5 @@
\ No newline at end of file diff --git a/view/hand/configuracao/passo-1.html b/view/hand/configuracao/passo-1.html index 50f4304..f1abb8c 100644 --- a/view/hand/configuracao/passo-1.html +++ b/view/hand/configuracao/passo-1.html @@ -1,4 +1,4 @@ -
+
Escolha a posição mais parecida dos dedos
diff --git a/view/hand/configuracao/passo-2.html b/view/hand/configuracao/passo-2.html index d5a8e7f..78e7737 100644 --- a/view/hand/configuracao/passo-2.html +++ b/view/hand/configuracao/passo-2.html @@ -1,4 +1,4 @@ -
+
Escolha a posição dos dedos
diff --git a/view/hand/movimento/passo-1.html b/view/hand/movimento/passo-1.html index dc9daef..086184e 100644 --- a/view/hand/movimento/passo-1.html +++ b/view/hand/movimento/passo-1.html @@ -1,5 +1,4 @@ -
+
Escolha o movimento mais parecido
diff --git a/view/hand/orientacao/passo-1.html b/view/hand/orientacao/passo-1.html index 8c19649..69a07c1 100644 --- a/view/hand/orientacao/passo-1.html +++ b/view/hand/orientacao/passo-1.html @@ -1,5 +1,4 @@ -
+
Palma da mão
diff --git a/view/hand/timeline.html b/view/hand/timeline.html index 51d8c6b..9f6354f 100644 --- a/view/hand/timeline.html +++ b/view/hand/timeline.html @@ -1,4 +1,4 @@ -
+
-- libgit2 0.21.2