refactoring: use class attr to identify timerender date <span>.

The floating_recipient_bar is cloned from recipient_bar elements.
The cloning created elements in the DOM with duplicate id
attributes, specifically <span id="timerender{id}">, which
contains the date of the message stream. The timerender span
will now use class="timerender{id}" instead.

Fixes #4997.
Fixes #5128.
This commit is contained in:
David Coleman
2017-06-03 11:10:09 -07:00
committed by Tim Abbott
parent 01d303da3e
commit 13915740bb
3 changed files with 26 additions and 23 deletions

View File

@@ -648,7 +648,7 @@ function render(template_name, args) {
is_stream: true, is_stream: true,
message_ids: [1, 2], message_ids: [1, 2],
message_containers: messages, message_containers: messages,
show_date: '"<span id="timerender82">Jan&nbsp;07</span>"', show_date: '"<span class="timerender82">Jan&nbsp;07</span>"',
show_date_separator: true, show_date_separator: true,
subject: 'two messages', subject: 'two messages',
match_subject: '<span class="highlight">two</span> messages', match_subject: '<span class="highlight">two</span> messages',

View File

@@ -99,7 +99,7 @@ var timerender = require('js/timerender.js');
var actual = timerender.render_date(message_time, undefined, today); var actual = timerender.render_date(message_time, undefined, today);
assert.equal(expected_html, actual.html()); assert.equal(expected_html, actual.html());
assert.equal(attrs.get('title'), 'Friday, April 12, 2019'); assert.equal(attrs.get('title'), 'Friday, April 12, 2019');
assert.equal(attrs.get('id'), 'timerender0'); assert.equal(attrs.get('class'), 'timerender0');
}()); }());
(function test_render_date_renders_time_above_html() { (function test_render_date_renders_time_above_html() {

View File

@@ -113,50 +113,53 @@ function render_date_span(elem, rendered_time, rendered_time_above) {
// of this DOM node as HTML, so effectively a copy of the node. That's // of this DOM node as HTML, so effectively a copy of the node. That's
// okay since to update the time later we look up the node by its id.) // okay since to update the time later we look up the node by its id.)
exports.render_date = function (time, time_above, today) { exports.render_date = function (time, time_above, today) {
var id = "timerender" + next_timerender_id; var className = "timerender" + next_timerender_id;
next_timerender_id += 1; next_timerender_id += 1;
var rendered_time = exports.render_now(time, today); var rendered_time = exports.render_now(time, today);
var node = $("<span />").attr('id', id); var node = $("<span />").attr('class', className);
if (time_above !== undefined) { if (time_above !== undefined) {
var rendered_time_above = exports.render_now(time_above, today); var rendered_time_above = exports.render_now(time_above, today);
node = render_date_span(node, rendered_time, rendered_time_above); node = render_date_span(node, rendered_time, rendered_time_above);
} else { } else {
node = render_date_span(node, rendered_time); node = render_date_span(node, rendered_time);
} }
maybe_add_update_list_entry(rendered_time.needs_update, id, time, time_above); maybe_add_update_list_entry(rendered_time.needs_update, className, time, time_above);
return node; return node;
}; };
// This isn't expected to be called externally except manually for // This isn't expected to be called externally except manually for
// testing purposes. // testing purposes.
exports.update_timestamps = function () { exports.update_timestamps = function () {
var time = new XDate(); var now = new XDate();
if (time >= next_update) { if (now >= next_update) {
var to_process = update_list; var to_process = update_list;
update_list = []; update_list = [];
_.each(to_process, function (elem) { _.each(to_process, function (entry) {
var id = elem[0]; var className = entry[0];
var element = document.getElementById(id); var elements = $('.' + className);
// The element might not exist any more (because it // The element might not exist any more (because it
// was in the zfilt table, or because we added // was in the zfilt table, or because we added
// messages above it and re-collapsed). // messages above it and re-collapsed).
if (element !== null) { if (elements !== null) {
var time = elem[1]; _.each(elements, function (element) {
var time_above; var time = entry[1];
var rendered_time = exports.render_now(time); var time_above;
if (elem.length === 3) { var rendered_time = exports.render_now(time);
time_above = elem[2]; if (entry.length === 3) {
var rendered_time_above = exports.render_now(time_above); time_above = entry[2];
render_date_span($(element), rendered_time, rendered_time_above); var rendered_time_above = exports.render_now(time_above);
} else { render_date_span($(element), rendered_time, rendered_time_above);
render_date_span($(element), rendered_time); } else {
} render_date_span($(element), rendered_time);
maybe_add_update_list_entry(rendered_time.needs_update, id, time, time_above); }
maybe_add_update_list_entry(
rendered_time.needs_update, className, time, time_above);
});
} }
}); });
next_update = set_to_start_of_day(time.clone().addDays(1)); next_update = set_to_start_of_day(now.clone().addDays(1));
} }
}; };