From 5c7f819e0a74704c6e53826e0e584c404b23e38e Mon Sep 17 00:00:00 2001 From: Ryan Moore Date: Thu, 28 Feb 2019 16:25:08 -0500 Subject: [PATCH] Add test and refactor --- app/assets/javascripts/global.js | 8 +++ app/assets/javascripts/viewer.js | 68 ++++++++++++---------- app/views/layouts/_options_panel.html.slim | 6 +- spec/javascripts/viewer_spec.js | 44 +++++++++++++- 4 files changed, 90 insertions(+), 36 deletions(-) diff --git a/app/assets/javascripts/global.js b/app/assets/javascripts/global.js index ef200d5..cdbf894 100644 --- a/app/assets/javascripts/global.js +++ b/app/assets/javascripts/global.js @@ -68,5 +68,13 @@ global.html.id.leaf_dots_align = "align-leaf-dots"; global.html.id.leaf_dots_color = "leaf-dot-color"; global.html.id.leaf_dots_size = "leaf-dot-size"; +// Bars option +global.html.id.bars_show = "show-bars"; +global.html.id.bars_color = "bar-color"; +global.html.id.bars_height = "bar-height"; +global.html.id.bars_width = "bar-width"; +global.html.id.bars_padding = "bar-padding"; +global.html.id.bars_align = "align-bars"; +global.html.id.bars_axis_show = "show-bar-start-axis"; global.ZERO_REPLACEMENT_VAL = 1e-5; diff --git a/app/assets/javascripts/viewer.js b/app/assets/javascripts/viewer.js index b42af35..1a24038 100644 --- a/app/assets/javascripts/viewer.js +++ b/app/assets/javascripts/viewer.js @@ -76,7 +76,16 @@ viewer.defaults.inner_dots_size = 5; viewer.defaults.leaf_dots_show = false; viewer.defaults.leaf_dots_align = viewer.defaults.tip_decorations_align; viewer.defaults.leaf_dots_color = "#000000"; -viewer.defaults.leaf_dots_size = 5; +viewer.defaults.leaf_dots_size = 5; + +// Bars defaults +viewer.defaults.bars_show = false; +viewer.defaults.bars_axis_show = false; +viewer.defaults.bars_padding = 10; +viewer.defaults.bars_height = 100; +viewer.defaults.bars_width = 10; +viewer.defaults.bars_align = false; +viewer.defaults.bar_color = "#000000"; var MAPPING_CHANGED, TREE_CHANGED; @@ -268,17 +277,12 @@ var ID_INNER_LABEL_FONT = "inner-label-font", VAL_INNER_LABEL_FONT; // Bar option IDs -var ID_BAR_SHOW = "show-bars", - VAL_BAR_SHOW, - ID_BAR_COLOR = "bar-color", +var VAL_BAR_SHOW, VAL_BAR_COLOR, - ID_BAR_HEIGHT = "bar-height", VAL_BAR_HEIGHT, - ID_BAR_WIDTH = "bar-width", VAL_BAR_WIDTH, - ID_BAR_PADDING = "bar-padding", - VAL_BAR_PADDING, - ID_BAR_ALIGN = "align-bars"; + VAL_BAR_PADDING; + var ID_BAR_SHOW_START_AXIS = "show-bar-start-axis", VAL_BAR_SHOW_START_AXIS; @@ -1168,12 +1172,12 @@ function lalala(tree_input_param, mapping_input_param) { }); // Bar listeners /////////////////////////////////////////////// - listener(ID_BAR_SHOW, "change", function () { + listener(global.html.id.bars_show, "change", function () { utils__set_status_msg_to_rendering(); setTimeout(function () { // First, activate the align tip decorations opts if you are turning bars on. If you do it here, as soon as bars are added, everything lines up, but the user can still turn it off later. - if (is_checked(ID_BAR_SHOW)) { + if (is_checked(global.html.id.bars_show)) { // Check to see if there are any bar columns in the metadata file. If not, we want to warnt he user that they should add some. // TODO might be nice to lock all the bar opts if there aren't any in a mapping file if (!check_for_bar_options()) { @@ -1194,7 +1198,7 @@ function lalala(tree_input_param, mapping_input_param) { utils__set_status_msg_to_done(); }, TIMEOUT); }); - listener(ID_BAR_SHOW_START_AXIS, "change", function () { + listener(global.html.id.bars_axis_show, "change", function () { utils__set_status_msg_to_rendering(); setTimeout(function () { @@ -1208,18 +1212,18 @@ function lalala(tree_input_param, mapping_input_param) { utils__set_status_msg_to_done(); }, TIMEOUT); }); - listener(ID_BAR_ALIGN, "change", function () { + listener(global.html.id.bars_align, "change", function () { utils__set_status_msg_to_rendering(); setTimeout(function () { // First sync all the align buttons. - sync_align_buttons_and_vals(is_checked(ID_BAR_ALIGN), false); + sync_align_buttons_and_vals(is_checked(global.html.id.bars_align), false); // Then do the rest of the actions. leaf_label_align_listener_actions(); }, TIMEOUT); }); - listener(ID_BAR_PADDING, "change", function () { + listener(global.html.id.bars_padding, "change", function () { utils__set_status_msg_to_rendering(); validate_bar_padding_input(); @@ -1235,7 +1239,7 @@ function lalala(tree_input_param, mapping_input_param) { utils__set_status_msg_to_done(); }, TIMEOUT); }); - listener(ID_BAR_COLOR, "change", function () { + listener(global.html.id.bars_color, "change", function () { utils__set_status_msg_to_rendering(); setTimeout(function () { @@ -1243,7 +1247,7 @@ function lalala(tree_input_param, mapping_input_param) { utils__set_status_msg_to_done(); }, TIMEOUT); }); - listener(ID_BAR_HEIGHT, "change", function () { + listener(global.html.id.bars_height, "change", function () { utils__set_status_msg_to_rendering(); setTimeout(function () { @@ -1257,7 +1261,7 @@ function lalala(tree_input_param, mapping_input_param) { utils__set_status_msg_to_done(); }, TIMEOUT); }); - listener(ID_BAR_WIDTH, "change", function () { + listener(global.html.id.bars_width, "change", function () { utils__set_status_msg_to_rendering(); setTimeout(function () { @@ -1402,12 +1406,12 @@ function lalala(tree_input_param, mapping_input_param) { document.getElementById("save-png").removeAttribute("disabled"); // Bars - VAL_BAR_SHOW = document.getElementById(ID_BAR_SHOW).checked; - VAL_BAR_SHOW_START_AXIS = is_checked(ID_BAR_SHOW_START_AXIS); - VAL_BAR_PADDING = validate_bar_padding_input(ID_BAR_PADDING); - VAL_BAR_WIDTH = jq(ID_BAR_WIDTH).val(); - VAL_BAR_HEIGHT = jq(ID_BAR_HEIGHT).val(); - VAL_BAR_COLOR = jq(ID_BAR_COLOR).val(); + VAL_BAR_SHOW = document.getElementById(global.html.id.bars_show).checked; + VAL_BAR_SHOW_START_AXIS = is_checked(global.html.id.bars_axis_show); + VAL_BAR_PADDING = validate_bar_padding_input(global.html.id.bars_padding); + VAL_BAR_WIDTH = jq(global.html.id.bars_width).val(); + VAL_BAR_HEIGHT = jq(global.html.id.bars_height).val(); + VAL_BAR_COLOR = jq(global.html.id.bars_color).val(); // Dots VAL_SHOW_INNER_DOTS = jq(global.html.id.inner_dots_show).val(); @@ -3418,12 +3422,12 @@ function reset_all_to_defaults() { jq(global.html.id.inner_dots_color).val(viewer.defaults.inner_dots_color); // Bar options - uncheck(ID_BAR_SHOW); - uncheck(ID_BAR_SHOW_START_AXIS); - jq(ID_BAR_COLOR).val(defaults.bar_color); - jq(ID_BAR_HEIGHT).val(defaults.bar_height); - jq(ID_BAR_WIDTH).val(defaults.bar_width); - jq(ID_BAR_PADDING).val(defaults.bar_padding); + jq(global.html.id.bars_show).prop("checked", viewer.defaults.bars_show); + jq(global.html.id.bars_axis_show).prop("checked", viewer.defaults.bars_axis_show); + jq(global.html.id.bars_color).val(viewer.defaults.bar_color); + jq(global.html.id.bars_height).val(viewer.defaults.bars_height); + jq(global.html.id.bars_width).val(viewer.defaults.bars_width); + jq(global.html.id.bars_padding).val(viewer.defaults.bars_padding); // Branch options $("#branch-color").val("#000000"); @@ -3768,11 +3772,11 @@ function set_and_validate_bootstrap_cutoff_input() { var sync_align_buttons_and_vals = function (checked, disabled) { jq(global.html.id.leaf_labels_align).prop("checked", checked); jq(global.html.id.leaf_dots_align).prop("checked", checked); - jq(ID_BAR_ALIGN).prop("checked", checked); + jq(global.html.id.bars_align).prop("checked", checked); jq(global.html.id.leaf_labels_align).prop("disabled", disabled); jq(global.html.id.leaf_dots_align).prop("disabled", disabled); - jq(ID_BAR_ALIGN).prop("disabled", disabled); + jq(global.html.id.bars_align).prop("disabled", disabled); // Make sure the val variable is also set so that everything is sync'd. VAL_LEAF_LABEL_ALIGN = checked; diff --git a/app/views/layouts/_options_panel.html.slim b/app/views/layouts/_options_panel.html.slim index 6a46f51..0bee26d 100644 --- a/app/views/layouts/_options_panel.html.slim +++ b/app/views/layouts/_options_panel.html.slim @@ -200,14 +200,14 @@ .row .small-12.columns label for="bar-padding" Bar padding - input id="bar-padding" type="text" value="10" + input id="bar-padding" type="text" .row .small-12.medium-12.large-6.columns label for="bar-height" Max bar height - input id="bar-height" type="range" min="1" max="200" value="100" class="slider width-100" + input id="bar-height" type="range" min="1" max="200" class="slider width-100" .small-12.medium-12.large-6.columns label for="bar-width" Bar width - input id="bar-width" type="range" min="1" max="50" value="10" class="slider width-100" + input id="bar-width" type="range" min="1" max="50" class="slider width-100" li class="accordion-item" data-accordion-item="" a href="#" class="accordion-title" Branch options diff --git a/spec/javascripts/viewer_spec.js b/spec/javascripts/viewer_spec.js index 04d4a0e..0278b1d 100644 --- a/spec/javascripts/viewer_spec.js +++ b/spec/javascripts/viewer_spec.js @@ -254,7 +254,49 @@ describe("viewer", function () { }); }); - describe("bar options"); // START HERE + describe("bar options", function () { + it("sets show bars default", function () { + expect( + $("#" + global.html.id.bars_show).prop("checked") + ).to.eq(viewer.defaults.bars_show); + }); + + it("sets show bar axis default", function () { + expect( + $("#" + global.html.id.bars_axis_show).prop("checked") + ).to.eq(viewer.defaults.bars_axis_show); + }); + + it("sets align bars default", function () { + expect( + $("#" + global.html.id.bars_align).prop("checked") + ).to.eq(viewer.defaults.bars_align); + }); + + it("sets default bar and axis color", function () { + expect( + $("#" + global.html.id.bars_color).val() + ).to.equal(viewer.defaults.bar_color); + }); + + it("sets default bar padding", function () { + expect( + parseFloat($("#" + global.html.id.bars_padding).val()) + ).to.eq(viewer.defaults.bars_padding); + }); + + it("sets default bar height", function () { + expect( + parseFloat($("#" + global.html.id.bars_height).val()) + ).to.eq(viewer.defaults.bars_height); + }); + + it("sets default bar width", function () { + expect( + parseFloat($("#" + global.html.id.bars_width).val()) + ).to.eq(viewer.defaults.bars_width); + }); + }); }); }); });