From 6035304619bd2a3e15b233a22889f1b8bb6c20d2 Mon Sep 17 00:00:00 2001 From: Steve Howell Date: Wed, 28 Nov 2018 21:07:14 +0000 Subject: [PATCH] Extract color_data.js. This code is pretty distinct from all the color-picking UI, and we want to get it to 100% coverage and optimize it more. --- .eslintrc.json | 1 + .../{stream_color.js => color_data.js} | 6 +-- frontend_tests/node_tests/stream_data.js | 4 +- frontend_tests/node_tests/stream_events.js | 2 +- static/js/archive.js | 2 +- static/js/bundles/app.js | 1 + static/js/color_data.js | 42 +++++++++++++++++++ static/js/stream_color.js | 31 -------------- static/js/stream_data.js | 2 +- static/js/stream_events.js | 2 +- 10 files changed, 53 insertions(+), 40 deletions(-) rename frontend_tests/node_tests/{stream_color.js => color_data.js} (78%) create mode 100644 static/js/color_data.js diff --git a/.eslintrc.json b/.eslintrc.json index 51bc28404d..ec3b1cdd7a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -38,6 +38,7 @@ "buddy_list": false, "channel": false, "click_handlers": false, + "color_data": false, "colorspace": false, "common": false, "components": false, diff --git a/frontend_tests/node_tests/stream_color.js b/frontend_tests/node_tests/color_data.js similarity index 78% rename from frontend_tests/node_tests/stream_color.js rename to frontend_tests/node_tests/color_data.js index abdc709b73..f30ba54588 100644 --- a/frontend_tests/node_tests/stream_color.js +++ b/frontend_tests/node_tests/color_data.js @@ -1,6 +1,4 @@ -global.stub_out_jquery(); - -zrequire('stream_color'); +zrequire('color_data'); run_test('pick_color', () => { var used_colors = ["#76ce90", "#fae589"]; @@ -8,7 +6,7 @@ run_test('pick_color', () => { // Colors are assigned randomly, so this test is a little vague and brittle, // but we can verify a few things, like not reusing colors and making sure // the color has length 7. - var color = stream_color.pick_color(used_colors); + var color = color_data.pick_color(used_colors); assert.notEqual(color, "#76ce90"); assert.notEqual(color, "#fae589"); assert.equal(color.length, 7); diff --git a/frontend_tests/node_tests/stream_data.js b/frontend_tests/node_tests/stream_data.js index 2ef0d913be..4227368028 100644 --- a/frontend_tests/node_tests/stream_data.js +++ b/frontend_tests/node_tests/stream_data.js @@ -8,6 +8,8 @@ set_global('$', function () { set_global('blueslip', global.make_zblueslip()); +set_global('color_data', {}); + zrequire('util'); zrequire('hash_util'); zrequire('topic_data'); @@ -609,7 +611,7 @@ run_test('create_sub', () => { color: '#76ce90', }; - global.stream_color.pick_color = function () { + color_data.pick_color = function () { return '#bd86e5'; }; diff --git a/frontend_tests/node_tests/stream_events.js b/frontend_tests/node_tests/stream_events.js index 7b2581ede7..9a78f441cf 100644 --- a/frontend_tests/node_tests/stream_events.js +++ b/frontend_tests/node_tests/stream_events.js @@ -219,7 +219,7 @@ run_test('marked_subscribed', () => { // Test assigning generated color with_overrides(function (override) { frontend.color = undefined; - override('stream_color.pick_color', function () { + override('color_data.pick_color', function () { return 'green'; }); var warnings = 0; diff --git a/static/js/archive.js b/static/js/archive.js index deae61fb2c..64284af198 100644 --- a/static/js/archive.js +++ b/static/js/archive.js @@ -23,7 +23,7 @@ exports.initialize = function () { var recipient_and_topic = $('#display_recipient').html(); var stream_name = recipient_and_topic.split('-')[0]; var topic = recipient_and_topic.split('-')[1]; - var recipient_color = stream_color.pick_color([]); + var recipient_color = color_data.pick_color([]); current_message_group.message_containers = []; current_message_group.show_date_separator = false; current_message_group.display_recipient = stream_name; diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js index 59753c2ae5..42b649c2de 100644 --- a/static/js/bundles/app.js +++ b/static/js/bundles/app.js @@ -94,6 +94,7 @@ import "js/transmit.js"; import "js/zcommand.js"; import "js/compose.js"; import "js/upload.js"; +import "js/color_data.js"; import "js/stream_color.js"; import "js/stream_data.js"; import "js/topic_data.js"; diff --git a/static/js/color_data.js b/static/js/color_data.js new file mode 100644 index 0000000000..d0e2c05f7f --- /dev/null +++ b/static/js/color_data.js @@ -0,0 +1,42 @@ +var color_data = (function () { + +var exports = {}; + +// Auto-assigned colors should be from the default palette so it's easy to undo +// changes, so if that palette changes, change these colors. +var stream_assignment_colors = [ + "#76ce90", "#fae589", "#a6c7e5", "#e79ab5", + "#bfd56f", "#f4ae55", "#b0a5fd", "#addfe5", + "#f5ce6e", "#c2726a", "#94c849", "#bd86e5", + "#ee7e4a", "#a6dcbf", "#95a5fd", "#53a063", + "#9987e1", "#e4523d", "#c2c2c2", "#4f8de4", + "#c6a8ad", "#e7cc4d", "#c8bebf", "#a47462", +]; + +exports.pick_color = function (used_colors) { + var colors = _.shuffle(stream_assignment_colors); + var used_color_hash = {}; + + _.each(used_colors, function (color) { + used_color_hash[color] = true; + }); + + var color = _.find(colors, function (color) { + return !_.has(used_color_hash, color); + }); + + if (color) { + return color; + } + + // All available colors were used. + return colors[0]; +}; + +return exports; + +}()); +if (typeof module !== 'undefined') { + module.exports = color_data; +} +window.color_data = color_data; diff --git a/static/js/stream_color.js b/static/js/stream_color.js index 13e40f9230..f9ed60b973 100644 --- a/static/js/stream_color.js +++ b/static/js/stream_color.js @@ -3,41 +3,10 @@ var stream_color = (function () { var exports = {}; exports.default_color = "#c2c2c2"; -// Auto-assigned colors should be from the default palette so it's easy to undo -// changes, so if that palette changes, change these colors. -var stream_assignment_colors = [ - "#76ce90", "#fae589", "#a6c7e5", "#e79ab5", - "#bfd56f", "#f4ae55", "#b0a5fd", "#addfe5", - "#f5ce6e", "#c2726a", "#94c849", "#bd86e5", - "#ee7e4a", "#a6dcbf", "#95a5fd", "#53a063", - "#9987e1", "#e4523d", "#c2c2c2", "#4f8de4", - "#c6a8ad", "#e7cc4d", "#c8bebf", "#a47462", -]; // Classes which could be returned by get_color_class. exports.color_classes = 'dark_background'; -exports.pick_color = function (used_colors) { - var colors = _.shuffle(stream_assignment_colors); - var used_color_hash = {}; - - _.each(used_colors, function (color) { - used_color_hash[color] = true; - }); - - var color = _.find(colors, function (color) { - return !_.has(used_color_hash, color); - }); - - if (color) { - return color; - } - - // All available colors were used. - return colors[0]; -}; - - function update_table_stream_color(table, stream_name, color) { // This is ugly, but temporary, as the new design will make it // so that we only have color in the headers. diff --git a/static/js/stream_data.js b/static/js/stream_data.js index 977d7da7d1..d15f6b323f 100644 --- a/static/js/stream_data.js +++ b/static/js/stream_data.js @@ -465,7 +465,7 @@ exports.create_sub_from_server_data = function (stream_name, attrs) { if (!sub.color) { var used_colors = exports.get_colors(); - sub.color = stream_color.pick_color(used_colors); + sub.color = color_data.pick_color(used_colors); } exports.update_calculated_fields(sub); diff --git a/static/js/stream_events.js b/static/js/stream_events.js index b68d636dea..d05f2f73cc 100644 --- a/static/js/stream_events.js +++ b/static/js/stream_events.js @@ -4,7 +4,7 @@ var exports = {}; function get_color() { var used_colors = stream_data.get_colors(); - var color = stream_color.pick_color(used_colors); + var color = color_data.pick_color(used_colors); return color; }