mirror of
				https://github.com/zulip/zulip.git
				synced 2025-11-04 05:53:43 +00:00 
			
		
		
		
	Created stream_color.js.
This is a pure refactoring that mostly just moves code from subs.js to the new stream_color.js and updates module references accordingly. In order to prevent introducing some exports, update_stream_color was given an additional "sub" parameter and update_stream_sidebar_swatch_color was given an "id" parameter. Killed off unused initial_color_fetch var. (imported from commit b7644ce67f50d31fb46f564d758d661eea776aa6)
This commit is contained in:
		
				
					committed by
					
						
						Steve Howell
					
				
			
			
				
	
			
			
			
						parent
						
							2dfcd7876d
						
					
				
				
					commit
					e36fd929bc
				
			
							
								
								
									
										184
									
								
								static/js/stream_color.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										184
									
								
								static/js/stream_color.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,184 @@
 | 
			
		||||
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 pallete 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"];
 | 
			
		||||
 | 
			
		||||
// Clone stream_assignement_colors
 | 
			
		||||
var available_colors = stream_assignment_colors.slice(0);
 | 
			
		||||
 | 
			
		||||
// Classes which could be returned by get_color_class.
 | 
			
		||||
exports.color_classes = 'dark_background';
 | 
			
		||||
 | 
			
		||||
exports.pick_color = function () {
 | 
			
		||||
    if (available_colors.length === 0) {
 | 
			
		||||
        // We've used all the palette colors, so start re-using them.
 | 
			
		||||
        return stream_assignment_colors[exports.subscribed_streams().length
 | 
			
		||||
                                        % stream_assignment_colors.length];
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    return available_colors[0];
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
exports.mark_color_used = function (color) {
 | 
			
		||||
    var i;
 | 
			
		||||
    for (i = 0; i < available_colors.length; ++i) {
 | 
			
		||||
        if (available_colors[i] === color) {
 | 
			
		||||
            available_colors.splice(i, 1);
 | 
			
		||||
            return;
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
function update_table_stream_color(table, stream_name, color) {
 | 
			
		||||
    var color_class = exports.get_color_class(color);
 | 
			
		||||
    function fixup(elem) {
 | 
			
		||||
        elem.css("background-color", color)
 | 
			
		||||
            .removeClass(exports.color_classes)
 | 
			
		||||
            .addClass(color_class);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    var stream_labels = $("#floating_recipient_bar").add(table).find(".stream_label");
 | 
			
		||||
    _.each(stream_labels, function (label) {
 | 
			
		||||
        if ($(label).text() === stream_name) {
 | 
			
		||||
            fixup($(label).parent("td").parent("tr").prev("tr")
 | 
			
		||||
                          .nextUntil(".bookend_tr")
 | 
			
		||||
                          .children(".messagebox_colorblock,.message_header_colorblock"));
 | 
			
		||||
        }
 | 
			
		||||
    });
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function update_stream_sidebar_swatch_color(id, color) {
 | 
			
		||||
    $("#stream_sidebar_swatch_" + id).css('background-color', color);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function update_historical_message_color(stream_name, color) {
 | 
			
		||||
    update_table_stream_color($(".focused_table"), stream_name, color);
 | 
			
		||||
    if ($(".focused_table").attr("id") !== "#zhome") {
 | 
			
		||||
        update_table_stream_color($("#zhome"), stream_name, color);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
var stream_color_palette = [
 | 
			
		||||
    ['a47462', 'c2726a', 'e4523d', 'e7664d', 'ee7e4a', 'f4ae55'],
 | 
			
		||||
    ['76ce90', '53a063', '94c849', 'bfd56f', 'fae589', 'f5ce6e'],
 | 
			
		||||
    ['a6dcbf', 'addfe5', 'a6c7e5', '4f8de4', '95a5fd', 'b0a5fd'],
 | 
			
		||||
    ['c2c2c2', 'c8bebf', 'c6a8ad', 'e79ab5', 'bd86e5', '9987e1']
 | 
			
		||||
];
 | 
			
		||||
 | 
			
		||||
var subscriptions_table_colorpicker_options = {
 | 
			
		||||
    clickoutFiresChange: true,
 | 
			
		||||
    showPalette: true,
 | 
			
		||||
    palette: stream_color_palette
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
exports.set_colorpicker_color = function (colorpicker, color) {
 | 
			
		||||
    colorpicker.spectrum(_.extend(subscriptions_table_colorpicker_options,
 | 
			
		||||
                         {color: color}));
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
exports.update_stream_color = function (sub, stream_name, color, opts) {
 | 
			
		||||
    opts = _.defaults({}, opts, {update_historical: false});
 | 
			
		||||
    sub.color = color;
 | 
			
		||||
    var id = parseInt(sub.id, 10);
 | 
			
		||||
    // The swatch in the subscription row header.
 | 
			
		||||
    $("#subscription_" + id + " .color_swatch").css('background-color', color);
 | 
			
		||||
    // The swatch in the color picker.
 | 
			
		||||
    exports.set_colorpicker_color($("#subscription_" + id + " .colorpicker"), color);
 | 
			
		||||
 | 
			
		||||
    if (opts.update_historical) {
 | 
			
		||||
        update_historical_message_color(stream_name, color);
 | 
			
		||||
    }
 | 
			
		||||
    update_stream_sidebar_swatch_color(sub.id, color);
 | 
			
		||||
    tab_bar.colorize_tab_bar();
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
function picker_do_change_color (color) {
 | 
			
		||||
    var stream_name = $(this).attr('stream_name');
 | 
			
		||||
    var hex_color = color.toHexString();
 | 
			
		||||
    subs.set_color(stream_name, hex_color);
 | 
			
		||||
}
 | 
			
		||||
subscriptions_table_colorpicker_options.change = picker_do_change_color;
 | 
			
		||||
 | 
			
		||||
exports.sidebar_popover_colorpicker_options = {
 | 
			
		||||
    clickoutFiresChange: true,
 | 
			
		||||
    showPaletteOnly: true,
 | 
			
		||||
    showPalette: true,
 | 
			
		||||
    flat: true,
 | 
			
		||||
    palette: stream_color_palette,
 | 
			
		||||
    change: picker_do_change_color
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
exports.sidebar_popover_colorpicker_options_full = {
 | 
			
		||||
    clickoutFiresChange: true,
 | 
			
		||||
    showPalette: true,
 | 
			
		||||
    flat: true,
 | 
			
		||||
    cancelText: "",
 | 
			
		||||
    chooseText: "choose",
 | 
			
		||||
    palette: stream_color_palette,
 | 
			
		||||
    change: picker_do_change_color
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
var lightness_threshold;
 | 
			
		||||
$(function () {
 | 
			
		||||
    // sRGB color component for dark label text.
 | 
			
		||||
    // 0x33 to match the color #333333 set by Bootstrap.
 | 
			
		||||
    var label_color = 0x33;
 | 
			
		||||
    var lightness = colorspace.luminance_to_lightness(
 | 
			
		||||
        colorspace.sRGB_to_linear(label_color));
 | 
			
		||||
 | 
			
		||||
    // Compute midpoint lightness between that and white (100).
 | 
			
		||||
    lightness_threshold = (lightness + 100) / 2;
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
// From a background color (in format "#fff" or "#ffffff")
 | 
			
		||||
// pick a CSS class (or empty string) to determine the
 | 
			
		||||
// text label color etc.
 | 
			
		||||
//
 | 
			
		||||
// It would be better to work with an actual data structure
 | 
			
		||||
// rather than a hex string, but we have to deal with values
 | 
			
		||||
// already saved on the server, etc.
 | 
			
		||||
//
 | 
			
		||||
// This gets called on every message, so cache the results.
 | 
			
		||||
exports.get_color_class = _.memoize(function (color) {
 | 
			
		||||
    var match, i, lightness, channel = [0, 0, 0], mult = 1;
 | 
			
		||||
 | 
			
		||||
    match = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/.exec(color);
 | 
			
		||||
    if (!match) {
 | 
			
		||||
        // 3-digit shorthand; Spectrum gives this e.g. for pure black.
 | 
			
		||||
        // Multiply each digit by 16+1.
 | 
			
		||||
        mult = 17;
 | 
			
		||||
 | 
			
		||||
        match = /^#([\da-fA-F])([\da-fA-F])([\da-fA-F])$/.exec(color);
 | 
			
		||||
        if (!match) {
 | 
			
		||||
            // Can't understand color.
 | 
			
		||||
            return '';
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // CSS colors are specified in the sRGB color space.
 | 
			
		||||
    // Convert to linear intensity values.
 | 
			
		||||
    for (i=0; i<3; i++) {
 | 
			
		||||
        channel[i] = colorspace.sRGB_to_linear(mult * parseInt(match[i+1], 16));
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    // Compute perceived lightness as CIE L*.
 | 
			
		||||
    lightness = colorspace.luminance_to_lightness(
 | 
			
		||||
        colorspace.rgb_luminance(channel));
 | 
			
		||||
 | 
			
		||||
    // Determine if we're past the midpoint between the
 | 
			
		||||
    // dark and light label lightness.
 | 
			
		||||
    return (lightness < lightness_threshold) ? 'dark_background' : '';
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
return exports;
 | 
			
		||||
 | 
			
		||||
}());
 | 
			
		||||
		Reference in New Issue
	
	Block a user