diff --git a/app/assets/javascripts/global.js b/app/assets/javascripts/global.js index c207691..4fb54a1 100644 --- a/app/assets/javascripts/global.js +++ b/app/assets/javascripts/global.js @@ -24,8 +24,16 @@ global.html.id = { }; // Tree size options -global.html.id.tree_width = "width"; -global.html.id.tree_height = "height"; +global.html.id.tree_width = "width"; +global.html.id.tree_height = "height"; global.html.id.tree_padding = "padding"; +// Label options +global.html.id.inner_labels_show = "show-inner-labels"; +global.html.id.inner_labels_size = "inner-label-size"; +global.html.id.inner_labels_color = "inner-label-color"; +global.html.id.inner_labels_font = "inner-label-font"; +// TODO this ID matches the leaf label font ID for helvetica +global.html.id.inner_labels_font_helvetica = "helvetica"; + global.ZERO_REPLACEMENT_VAL = 1e-5; diff --git a/app/assets/javascripts/viewer.js b/app/assets/javascripts/viewer.js index c2cd2c6..c58d5b9 100644 --- a/app/assets/javascripts/viewer.js +++ b/app/assets/javascripts/viewer.js @@ -40,6 +40,10 @@ var viewer = { } }; +viewer.defaults.inner_labels_size = 12; +viewer.defaults.inner_labels_color = "#000000"; +viewer.defaults.inner_labels_font = "Helvetica"; + var MAPPING_CHANGED, TREE_CHANGED; @@ -228,8 +232,8 @@ var ID_LEAF_LABEL_COLOR = "leaf-label-color", VAL_LEAF_LABEL_FONT, VAL_LEAF_LABEL_PADDING, VAL_LEAF_LABEL_ALIGN; -var ID_INNER_LABEL_COLOR = "inner-label-color", - ID_INNER_LABEL_FONT = "inner-label-font", + +var ID_INNER_LABEL_FONT = "inner-label-font", VAL_INNER_LABEL_COLOR, VAL_INNER_LABEL_FONT; @@ -290,7 +294,7 @@ var MAX_BOOTSTRAP_VAL = 1e9; var defaults = { "leaf_label_color": "#000000", - "leaf_label_font": "Helvetica", + "leaf_label_font": viewer.defaults.inner_labels_font, "leaf_label_size": 16, "leaf_label_padding": 0, "leaf_label_padding_min": 0, @@ -909,7 +913,7 @@ function lalala(tree_input_param, mapping_input_param) { // adjust_tree(); // }); - listener("show-inner-labels", "change", function () { + listener(global.html.id.inner_labels_show, "change", function () { utils__set_status_msg_to_rendering(); setTimeout(function () { @@ -917,7 +921,7 @@ function lalala(tree_input_param, mapping_input_param) { utils__set_status_msg_to_done(); }, TIMEOUT); }); - listener("inner-label-size", "change", function () { + listener(global.html.id.inner_labels_size, "change", function () { utils__set_status_msg_to_rendering(); setTimeout(function () { @@ -1004,7 +1008,7 @@ function lalala(tree_input_param, mapping_input_param) { utils__set_status_msg_to_done(); }, TIMEOUT); }); - listener(ID_INNER_LABEL_COLOR, "change", function () { + listener(global.html.id.inner_labels_color, "change", function () { utils__set_status_msg_to_rendering(); setTimeout(function () { @@ -1342,7 +1346,7 @@ function lalala(tree_input_param, mapping_input_param) { VAL_LEAF_LABEL_COLOR = jq(ID_LEAF_LABEL_COLOR).val(); VAL_LEAF_LABEL_FONT = jq(ID_LEAF_LABEL_FONT).val(); - VAL_INNER_LABEL_COLOR = jq(ID_INNER_LABEL_COLOR).val(); + VAL_INNER_LABEL_COLOR = jq(global.html.id.inner_labels_color).val(); VAL_INNER_LABEL_FONT = jq(ID_INNER_LABEL_FONT).val(); DEFAULT_BRANCH_COLOR = document.getElementById("branch-color").value; @@ -1430,7 +1434,7 @@ function lalala(tree_input_param, mapping_input_param) { } - INNER_LABEL_SIZE = parseInt(document.getElementById("inner-label-size").value); + INNER_LABEL_SIZE = parseInt(document.getElementById(global.html.id.inner_labels_size).value); LEAF_LABEL_SIZE = parseInt(document.getElementById("leaf-label-size").value); VAL_LEAF_LABEL_PADDING = validate_leaf_label_padding_input(ID_LEAF_LABEL_PADDING); @@ -1482,7 +1486,7 @@ function lalala(tree_input_param, mapping_input_param) { else { LABEL_ROTATION = parseInt(document.getElementById("label-rotation").value); } - SHOW_INNER_LABELS = document.getElementById("show-inner-labels").checked; + SHOW_INNER_LABELS = document.getElementById(global.html.id.inner_labels_show).checked; SHOW_LEAF_LABELS = document.getElementById("show-leaf-labels").checked; // Show or hide align tip labels TODO also account for bars here @@ -1522,10 +1526,10 @@ function lalala(tree_input_param, mapping_input_param) { } if (SHOW_INNER_LABELS) { - document.getElementById("inner-label-size").removeAttribute("disabled"); + document.getElementById(global.html.id.inner_labels_size).removeAttribute("disabled"); } else { - document.getElementById("inner-label-size").setAttribute("disabled", ""); + document.getElementById(global.html.id.inner_labels_size).setAttribute("disabled", ""); } // Set the height to match the width @@ -3343,7 +3347,7 @@ function reset_all_to_defaults() { // $("#" + global.html.id.tree_width).attr("min", 3).attr("max", 55).attr("step", 1).val(7); $("#" + global.html.id.tree_width).val(viewer.defaults.radial.width); $("#" + global.html.id.tree_height).prop("disabled", true).val(viewer.defaults.radial.height); - $("#padding").val(0.05); + $("#" + global.html.id.tree_padding).val(viewer.defaults.tree_padding); $("#" + global.html.id.tree_rotation).val(viewer.defaults.tree_rotation); jq(global.html.id.tree_layout).val(global.html.id.tree_layout_radial); @@ -3359,8 +3363,8 @@ function reset_all_to_defaults() { $("#scale-bar-offset-weight").val(1); // Label options - uncheck("show-inner-labels"); - $("#inner-label-size").val(12); + uncheck(global.html.id.inner_labels_show); + $("#" + global.html.id.inner_labels_size).val(viewer.defaults.inner_labels_size); check("show-leaf-labels"); $("#leaf-label-size").val(16); @@ -3371,10 +3375,10 @@ function reset_all_to_defaults() { $("#label-rotation").val(0); jq(ID_LEAF_LABEL_COLOR).val("#000000"); - jq(ID_LEAF_LABEL_FONT).val("Helvetica"); + jq(ID_LEAF_LABEL_FONT).val(viewer.defaults.inner_labels_font); - jq(ID_INNER_LABEL_COLOR).val("#000000"); - jq(ID_INNER_LABEL_FONT).val("Helvetica"); + jq(global.html.id.inner_labels_color).val(viewer.defaults.inner_labels_color); + jq(ID_INNER_LABEL_FONT).val(viewer.defaults.inner_labels_font); // Dot options uncheck(ID_SHOW_INNER_DOTS); diff --git a/app/views/layouts/_options_panel.html.slim b/app/views/layouts/_options_panel.html.slim index 880b08a..87196f0 100644 --- a/app/views/layouts/_options_panel.html.slim +++ b/app/views/layouts/_options_panel.html.slim @@ -75,7 +75,7 @@ input id="show-inner-labels" type="checkbox" name="label-show" .small-12.medium-12.large-6.columns label for="inner-label-size" Inner label size - input id="inner-label-size" type="range" min="1" max="48" value="12" class="slider width-100" + input id="inner-label-size" type="range" min="1" max="48" class="slider width-100" .row .small-12.medium-12.large-6.columns diff --git a/spec/javascripts/viewer_spec.js b/spec/javascripts/viewer_spec.js index 635cb4b..52e914d 100644 --- a/spec/javascripts/viewer_spec.js +++ b/spec/javascripts/viewer_spec.js @@ -73,10 +73,40 @@ describe("viewer", function () { it("sets default tree padding", function () { expect( - parseInt($("#" + global.html.id.tree_padding).val()) + parseFloat($("#" + global.html.id.tree_padding).val()) ).to.equal(viewer.defaults.tree_padding); }); }); + + describe("label options", function () { + it("unchecks show leaf labels", function () { + expect( + $("#" + global.html.id.inner_labels_show).prop("checked") + ).to.be.false; + }); + + it("sets inner label default size", function () { + expect( + parseInt($("#" + global.html.id.inner_labels_size).val()) + ).to.equal(viewer.defaults.inner_labels_size); + }); + + it("sets inner label default color", function () { + expect( + $("#" + global.html.id.inner_labels_color).val() + ).to.equal(viewer.defaults.inner_labels_color); + }); + + it("sets the inner label default font", function () { + expect( + $("#" + global.html.id.inner_labels_font).val() + ).to.equal(viewer.defaults.inner_labels_font); + + expect( + $("#" + global.html.id.inner_labels_font_helvetica).prop("selected") + ).to.be.true; + }); + }); }); }); });