mirror of https://github.com/zulip/zulip.git
Created condense.js (with code taken from ui.js).
(imported from commit 72b27b48614a7c396170d46936646e52757e2743)
This commit is contained in:
parent
af3411cab8
commit
f8b71fa497
|
@ -0,0 +1,151 @@
|
|||
var condense = (function () {
|
||||
|
||||
var exports = {};
|
||||
|
||||
var _message_content_height_cache = new Dict();
|
||||
|
||||
function show_more_link(row) {
|
||||
row.find(".message_condenser").hide();
|
||||
row.find(".message_expander").show();
|
||||
}
|
||||
|
||||
function show_condense_link(row) {
|
||||
row.find(".message_expander").hide();
|
||||
row.find(".message_condenser").show();
|
||||
}
|
||||
|
||||
function condense_row(row) {
|
||||
var content = row.find(".message_content");
|
||||
content.addClass("condensed");
|
||||
show_more_link(row);
|
||||
}
|
||||
|
||||
function uncondense_row(row) {
|
||||
var content = row.find(".message_content");
|
||||
content.removeClass("condensed");
|
||||
show_condense_link(row);
|
||||
}
|
||||
|
||||
exports.uncollapse = function (row) {
|
||||
// Uncollapse a message, restoring the condensed message [More] or
|
||||
// [Condense] link if necessary.
|
||||
var message = current_msg_list.get(rows.id(row));
|
||||
var content = row.find(".message_content");
|
||||
message.collapsed = false;
|
||||
content.removeClass("collapsed");
|
||||
message_flags.send_collapsed([message], false);
|
||||
|
||||
if (message.condensed === true) {
|
||||
// This message was condensed by the user, so re-show the
|
||||
// [More] link.
|
||||
condense_row(row);
|
||||
} else if (message.condensed === false) {
|
||||
// This message was un-condensed by the user, so re-show the
|
||||
// [Condense] link.
|
||||
uncondense_row(row);
|
||||
} else if (content.hasClass("could-be-condensed")) {
|
||||
// By default, condense a long message.
|
||||
condense_row(row);
|
||||
} else {
|
||||
// This was a short message, no more need for a [More] link.
|
||||
row.find(".message_expander").hide();
|
||||
}
|
||||
};
|
||||
|
||||
exports.collapse = function (row) {
|
||||
// Collapse a message, hiding the condensed message [More] or
|
||||
// [Condense] link if necessary.
|
||||
var message = current_msg_list.get(rows.id(row));
|
||||
message.collapsed = true;
|
||||
message_flags.send_collapsed([message], true);
|
||||
row.find(".message_content").addClass("collapsed");
|
||||
show_more_link(row);
|
||||
};
|
||||
exports.clear_message_content_height_cache = function () {
|
||||
_message_content_height_cache = new Dict();
|
||||
};
|
||||
|
||||
exports.un_cache_message_content_height = function (message_id) {
|
||||
_message_content_height_cache.del(message_id);
|
||||
};
|
||||
|
||||
function get_message_height(elem, message_id) {
|
||||
if (_message_content_height_cache.has(message_id)) {
|
||||
return _message_content_height_cache.get(message_id);
|
||||
}
|
||||
|
||||
var height = elem.getBoundingClientRect().height;
|
||||
_message_content_height_cache.set(message_id, height);
|
||||
return height;
|
||||
}
|
||||
|
||||
exports.condense_and_collapse = function (elems) {
|
||||
var height_cutoff = viewport.height() * 0.65;
|
||||
|
||||
_.each(elems, function (elem) {
|
||||
var content = $(elem).find(".message_content");
|
||||
var message = current_msg_list.get(rows.id($(elem)));
|
||||
if (content !== undefined && message !== undefined) {
|
||||
var message_height = get_message_height(elem, message.id);
|
||||
var long_message = message_height > height_cutoff;
|
||||
if (long_message) {
|
||||
// All long messages are flagged as such.
|
||||
content.addClass("could-be-condensed");
|
||||
} else {
|
||||
content.removeClass("could-be-condensed");
|
||||
}
|
||||
|
||||
// If message.condensed is defined, then the user has manually
|
||||
// specified whether this message should be expanded or condensed.
|
||||
if (message.condensed === true) {
|
||||
condense_row($(elem));
|
||||
return;
|
||||
} else if (message.condensed === false) {
|
||||
uncondense_row($(elem));
|
||||
return;
|
||||
} else if (long_message) {
|
||||
// By default, condense a long message.
|
||||
condense_row($(elem));
|
||||
} else {
|
||||
content.removeClass('condensed');
|
||||
$(elem).find(".message_expander").hide();
|
||||
}
|
||||
|
||||
// Completely hide the message and replace it with a [More]
|
||||
// link if the user has collapsed it.
|
||||
if (message.collapsed) {
|
||||
content.addClass("collapsed");
|
||||
$(elem).find(".message_expander").show();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$(function () {
|
||||
$("#home").on("click", ".message_expander", function (e) {
|
||||
// Expanding a message can mean either uncollapsing or
|
||||
// uncondensing it.
|
||||
var row = $(this).closest(".message_row");
|
||||
var message = current_msg_list.get(rows.id(row));
|
||||
var content = row.find(".message_content");
|
||||
if (message.collapsed) {
|
||||
// Uncollapse.
|
||||
exports.uncollapse(row);
|
||||
} else if (content.hasClass("condensed")) {
|
||||
// Uncondense (show the full long message).
|
||||
message.condensed = false;
|
||||
content.removeClass("condensed");
|
||||
$(this).hide();
|
||||
row.find(".message_condenser").show();
|
||||
}
|
||||
});
|
||||
|
||||
$("#home").on("click", ".message_condenser", function (e) {
|
||||
var row = $(this).closest(".message_row");
|
||||
current_msg_list.get(rows.id(row)).condensed = true;
|
||||
condense_row(row);
|
||||
});
|
||||
});
|
||||
|
||||
return exports;
|
||||
}());
|
|
@ -368,7 +368,7 @@ MessageListView.prototype = {
|
|||
// getBoundingClientRect to work.
|
||||
// Also, the list must actually be visible.
|
||||
if (list === current_msg_list) {
|
||||
ui.condense_and_collapse(rendered_messages);
|
||||
condense.condense_and_collapse(rendered_messages);
|
||||
}
|
||||
|
||||
// Must happen after anything that changes the height of messages has
|
||||
|
|
|
@ -229,7 +229,7 @@ exports.update_messages = function update_messages(events) {
|
|||
msg.mentioned = event.flags.indexOf("mentioned") !== -1 ||
|
||||
event.flags.indexOf("wildcard_mentioned") !== -1;
|
||||
|
||||
ui.un_cache_message_content_height(msg.id);
|
||||
condense.un_cache_message_content_height(msg.id);
|
||||
|
||||
if (event.rendered_content !== undefined) {
|
||||
msg.content = event.rendered_content;
|
||||
|
|
|
@ -427,7 +427,7 @@ exports.deactivate = function () {
|
|||
$("#zfilt").removeClass('focused_table');
|
||||
$("#zhome").addClass('focused_table');
|
||||
current_msg_list = home_msg_list;
|
||||
ui.condense_and_collapse($("#zhome tr.message_row"));
|
||||
condense.condense_and_collapse($("#zhome tr.message_row"));
|
||||
|
||||
$('#search_query').val('');
|
||||
message_store.reset_load_more_status();
|
||||
|
|
|
@ -478,9 +478,9 @@ exports.register_click_handlers = function () {
|
|||
popovers.hide_actions_popover();
|
||||
|
||||
if (message.collapsed) {
|
||||
ui.uncollapse(row);
|
||||
condense.uncollapse(row);
|
||||
} else {
|
||||
ui.collapse(row);
|
||||
condense.collapse(row);
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
|
|
|
@ -237,7 +237,7 @@ exports.handler = function (e) {
|
|||
|
||||
if (new_width !== _old_width) {
|
||||
_old_width = new_width;
|
||||
ui.clear_message_content_height_cache();
|
||||
condense.clear_message_content_height_cache();
|
||||
}
|
||||
|
||||
popovers.hide_all();
|
||||
|
|
145
static/js/ui.js
145
static/js/ui.js
|
@ -529,64 +529,6 @@ exports.hide_loading_more_messages_indicator = function () {
|
|||
}
|
||||
};
|
||||
|
||||
function show_more_link(row) {
|
||||
row.find(".message_condenser").hide();
|
||||
row.find(".message_expander").show();
|
||||
}
|
||||
|
||||
function show_condense_link(row) {
|
||||
row.find(".message_expander").hide();
|
||||
row.find(".message_condenser").show();
|
||||
}
|
||||
|
||||
function condense(row) {
|
||||
var content = row.find(".message_content");
|
||||
content.addClass("condensed");
|
||||
show_more_link(row);
|
||||
}
|
||||
|
||||
function uncondense(row) {
|
||||
var content = row.find(".message_content");
|
||||
content.removeClass("condensed");
|
||||
show_condense_link(row);
|
||||
}
|
||||
|
||||
exports.uncollapse = function (row) {
|
||||
// Uncollapse a message, restoring the condensed message [More] or
|
||||
// [Condense] link if necessary.
|
||||
var message = current_msg_list.get(rows.id(row));
|
||||
var content = row.find(".message_content");
|
||||
message.collapsed = false;
|
||||
content.removeClass("collapsed");
|
||||
message_flags.send_collapsed([message], false);
|
||||
|
||||
if (message.condensed === true) {
|
||||
// This message was condensed by the user, so re-show the
|
||||
// [More] link.
|
||||
condense(row);
|
||||
} else if (message.condensed === false) {
|
||||
// This message was un-condensed by the user, so re-show the
|
||||
// [Condense] link.
|
||||
uncondense(row);
|
||||
} else if (content.hasClass("could-be-condensed")) {
|
||||
// By default, condense a long message.
|
||||
condense(row);
|
||||
} else {
|
||||
// This was a short message, no more need for a [More] link.
|
||||
row.find(".message_expander").hide();
|
||||
}
|
||||
};
|
||||
|
||||
exports.collapse = function (row) {
|
||||
// Collapse a message, hiding the condensed message [More] or
|
||||
// [Condense] link if necessary.
|
||||
var message = current_msg_list.get(rows.id(row));
|
||||
message.collapsed = true;
|
||||
message_flags.send_collapsed([message], true);
|
||||
row.find(".message_content").addClass("collapsed");
|
||||
show_more_link(row);
|
||||
};
|
||||
|
||||
/* EXPERIMENTS */
|
||||
|
||||
/* This method allows an advanced user to use the console
|
||||
|
@ -810,30 +752,6 @@ $(function () {
|
|||
toggle_star(rows.id($(this).closest(".message_row")));
|
||||
});
|
||||
|
||||
$("#home").on("click", ".message_expander", function (e) {
|
||||
// Expanding a message can mean either uncollapsing or
|
||||
// uncondensing it.
|
||||
var row = $(this).closest(".message_row");
|
||||
var message = current_msg_list.get(rows.id(row));
|
||||
var content = row.find(".message_content");
|
||||
if (message.collapsed) {
|
||||
// Uncollapse.
|
||||
ui.uncollapse(row);
|
||||
} else if (content.hasClass("condensed")) {
|
||||
// Uncondense (show the full long message).
|
||||
message.condensed = false;
|
||||
content.removeClass("condensed");
|
||||
$(this).hide();
|
||||
row.find(".message_condenser").show();
|
||||
}
|
||||
});
|
||||
|
||||
$("#home").on("click", ".message_condenser", function (e) {
|
||||
var row = $(this).closest(".message_row");
|
||||
current_msg_list.get(rows.id(row)).condensed = true;
|
||||
condense(row);
|
||||
});
|
||||
|
||||
function get_row_id_for_narrowing(narrow_link_elem) {
|
||||
var group = rows.get_closest_group(narrow_link_elem);
|
||||
var msg_id = rows.id_for_recipient_row(group);
|
||||
|
@ -1270,69 +1188,6 @@ exports.restore_compose_cursor = function () {
|
|||
.focus()
|
||||
.caret(saved_compose_cursor, saved_compose_cursor);
|
||||
};
|
||||
|
||||
var _message_content_height_cache = new Dict();
|
||||
|
||||
exports.clear_message_content_height_cache = function () {
|
||||
_message_content_height_cache = new Dict();
|
||||
};
|
||||
|
||||
exports.un_cache_message_content_height = function (message_id) {
|
||||
_message_content_height_cache.del(message_id);
|
||||
};
|
||||
|
||||
function get_message_height(elem, message_id) {
|
||||
if (_message_content_height_cache.has(message_id)) {
|
||||
return _message_content_height_cache.get(message_id);
|
||||
}
|
||||
|
||||
var height = elem.getBoundingClientRect().height;
|
||||
_message_content_height_cache.set(message_id, height);
|
||||
return height;
|
||||
}
|
||||
|
||||
exports.condense_and_collapse = function (elems) {
|
||||
var height_cutoff = viewport.height() * 0.65;
|
||||
|
||||
_.each(elems, function (elem) {
|
||||
var content = $(elem).find(".message_content");
|
||||
var message = current_msg_list.get(rows.id($(elem)));
|
||||
if (content !== undefined && message !== undefined) {
|
||||
var message_height = get_message_height(elem, message.id);
|
||||
var long_message = message_height > height_cutoff;
|
||||
if (long_message) {
|
||||
// All long messages are flagged as such.
|
||||
content.addClass("could-be-condensed");
|
||||
} else {
|
||||
content.removeClass("could-be-condensed");
|
||||
}
|
||||
|
||||
// If message.condensed is defined, then the user has manually
|
||||
// specified whether this message should be expanded or condensed.
|
||||
if (message.condensed === true) {
|
||||
condense($(elem));
|
||||
return;
|
||||
} else if (message.condensed === false) {
|
||||
uncondense($(elem));
|
||||
return;
|
||||
} else if (long_message) {
|
||||
// By default, condense a long message.
|
||||
condense($(elem));
|
||||
} else {
|
||||
content.removeClass('condensed');
|
||||
$(elem).find(".message_expander").hide();
|
||||
}
|
||||
|
||||
// Completely hide the message and replace it with a [More]
|
||||
// link if the user has collapsed it.
|
||||
if (message.collapsed) {
|
||||
content.addClass("collapsed");
|
||||
$(elem).find(".message_expander").show();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$(function () {
|
||||
// Workaround for Bootstrap issue #5900, which basically makes dropdowns
|
||||
// unclickable on mobile devices.
|
||||
|
|
|
@ -28,7 +28,7 @@ var globals =
|
|||
+ ' message_edit tab_bar emoji popovers navigate people settings alert_words_ui message_store'
|
||||
+ ' avatar feature_flags search_suggestion referral stream_color Dict'
|
||||
+ ' Filter summary admin stream_data muting WinChan muting_ui Socket channel'
|
||||
+ ' message_flags bot_data loading favicon resize scroll_bar'
|
||||
+ ' message_flags bot_data loading favicon resize scroll_bar condense'
|
||||
|
||||
// colorspace.js
|
||||
+ ' colorspace'
|
||||
|
|
|
@ -542,6 +542,7 @@ JS_SPECS = {
|
|||
'js/stream_data.js',
|
||||
'js/subs.js',
|
||||
'js/message_edit.js',
|
||||
'js/condense.js',
|
||||
'js/resize.js',
|
||||
'js/ui.js',
|
||||
'js/scroll_bar.js',
|
||||
|
|
Loading…
Reference in New Issue