js: Rename viewport.js to message_viewport.js.

This fixes the mobile web experience for Chrome on iOS.

Apparently, Chrome-on-iOS silently has a `viewport` module that
overrides and user-defined module by that name, causing all of our
code that accesses the viewport module to not work on that platform.
We fix this by renaming it.
This commit is contained in:
Tim Abbott 2017-03-10 14:48:51 -08:00
parent b1f12133be
commit 5e39ccd642
21 changed files with 67 additions and 65 deletions

View File

@ -55,7 +55,7 @@
"Socket": false,
"channel": false,
"components": false,
"viewport": false,
"message_viewport": false,
"upload_widget": false,
"avatar": false,
"realm_icon": false,

View File

@ -81,7 +81,7 @@ function show_box(tabname, focus_area, opts) {
var cover = selected_row.offset().top + selected_row.height()
- $("#compose").offset().top;
if (cover > 0) {
viewport.user_initiated_animate_scroll(cover+5);
message_viewport.user_initiated_animate_scroll(cover+5);
}
}

View File

@ -63,7 +63,7 @@ function _fade_messages() {
var first_message;
var first_row;
var should_fade_group = false;
var visible_groups = viewport.visible_groups(false);
var visible_groups = message_viewport.visible_groups(false);
normal_display = false;

View File

@ -99,7 +99,7 @@ function get_message_height(elem, message_id) {
}
exports.condense_and_collapse = function (elems) {
var height_cutoff = viewport.height() * 0.65;
var height_cutoff = message_viewport.height() * 0.65;
_.each(elems, function (elem) {
var content = $(elem).find(".message_content");

View File

@ -14,7 +14,7 @@ exports.initialize = function () {
$('#gear-menu a[data-toggle="tab"]').on('show', function (e) {
// Save the position of our old tab away, before we switch
var old_tab = $(e.relatedTarget).attr('href');
scroll_positions[old_tab] = viewport.scrollTop();
scroll_positions[old_tab] = message_viewport.scrollTop();
});
$('#gear-menu a[data-toggle="tab"]').on('shown', function (e) {
var target_tab = $(e.target).attr('href');
@ -36,12 +36,12 @@ exports.initialize = function () {
// (we apparently have to do this after setting the hash,
// because otherwise that action may scroll us somewhere.)
if (scroll_positions.hasOwnProperty(target_tab)) {
viewport.scrollTop(scroll_positions[target_tab]);
message_viewport.scrollTop(scroll_positions[target_tab]);
} else {
if (target_tab === '#home') {
navigate.scroll_to_selected();
} else {
viewport.scrollTop(0);
message_viewport.scrollTop(0);
}
}
});

View File

@ -283,7 +283,7 @@ function edit_message(row, raw_content) {
var edit_top = message_edit_content[0].getBoundingClientRect().top;
var scroll_by = edit_top - content_top + 5 /* border and padding */;
edit_obj.scrolled_by = scroll_by;
viewport.scrollTop(viewport.scrollTop() + scroll_by);
message_viewport.scrollTop(message_viewport.scrollTop() + scroll_by);
if (feature_flags.propagate_topic_edits && message.local_id === undefined) {
var original_topic = message.subject;
@ -299,7 +299,7 @@ function start_edit_maintaining_scroll(row, content) {
var row_bottom = row.height() + row.offset().top;
var composebox_top = $("#compose").offset().top;
if (row_bottom > composebox_top) {
viewport.scrollTop(viewport.scrollTop() + row_bottom - composebox_top);
message_viewport.scrollTop(message_viewport.scrollTop() + row_bottom - composebox_top);
}
}
@ -347,7 +347,7 @@ exports.end = function (row) {
if (message !== undefined &&
currently_editing_messages[message.id] !== undefined) {
var scroll_by = currently_editing_messages[message.id].scrolled_by;
viewport.scrollTop(viewport.scrollTop() - scroll_by);
message_viewport.scrollTop(message_viewport.scrollTop() - scroll_by);
delete currently_editing_messages[message.id];
current_msg_list.hide_edit_message(row);
}

View File

@ -670,7 +670,7 @@ exports.all = new exports.MessageList(
// mousemove, then you will have to contend with the autoscroll
// itself generating mousemove events.
$(document).on('message_selected.zulip zuliphashchange.zulip mousewheel', function () {
viewport.stop_auto_scrolling();
message_viewport.stop_auto_scrolling();
});
return exports;

View File

@ -453,7 +453,7 @@ MessageListView.prototype = {
function restore_scroll_position() {
if (list === current_msg_list && orig_scrolltop_offset !== undefined) {
viewport.set_message_offset(orig_scrolltop_offset);
message_viewport.set_message_offset(orig_scrolltop_offset);
list.reselect_selected_id();
}
}
@ -651,14 +651,14 @@ MessageListView.prototype = {
}
var selected_row_offset = selected_row.offset().top;
var info = viewport.message_viewport_info();
var info = message_viewport.message_viewport_info();
var available_space_for_scroll = selected_row_offset - info.visible_top;
var rows_offset = rows.last_visible().offset().top - this.list.selected_row().offset().top;
// autoscroll_forever: if we've sent a message, move pointer at least that far.
if (page_params.autoscroll_forever && id_of_last_message_sent_by_us > -1 &&
rows_offset < (viewport.height())) {
rows_offset < (message_viewport.height())) {
this.list.select_id(id_of_last_message_sent_by_us, {from_rendering: true});
navigate.scroll_to_selected();
return;
@ -699,7 +699,7 @@ MessageListView.prototype = {
}
// Ok, we are finally ready to actually scroll.
viewport.system_initiated_animate_scroll(scroll_amount);
message_viewport.system_initiated_animate_scroll(scroll_amount);
},
@ -780,8 +780,9 @@ MessageListView.prototype = {
this.list.select_id(this.list.selected_id(), {use_closest: true});
}
// Must get this.list.selected_row() again since it is now a new DOM element
viewport.scrollTop(
viewport.scrollTop() + this.selected_row().offset().top - scrolltop_offset);
message_viewport.scrollTop(
message_viewport.scrollTop() +
this.selected_row().offset().top - scrolltop_offset);
}
},

View File

@ -1,4 +1,4 @@
var viewport = (function () {
var message_viewport = (function () {
var exports = {};
var jwindow;
@ -69,7 +69,7 @@ exports.is_below_visible_bottom = function (offset) {
exports.set_message_position = function (message_top, message_height, viewport_info, ratio) {
// message_top = offset of the top of a message that you are positioning
// message_height = height of the message that you are positioning
// viewport_info = result of calling viewport.message_viewport_info
// viewport_info = result of calling message_viewport.message_viewport_info
// ratio = fraction indicating how far down the screen the msg should be
var how_far_down_in_visible_page = viewport_info.visible_height * ratio;
@ -200,7 +200,7 @@ exports.scrollTop = function viewport_scrollTop(target_scrollTop) {
}
var ret = exports.message_pane.scrollTop(target_scrollTop);
var new_scrollTop = exports.message_pane.scrollTop();
var space_to_scroll = $("#bottom_whitespace").offset().top - viewport.height();
var space_to_scroll = $("#bottom_whitespace").offset().top - message_viewport.height();
// Check whether our scrollTop didn't move even though one could have scrolled down
if (space_to_scroll > 0 && target_scrollTop > 0 &&
@ -344,5 +344,5 @@ return exports;
}());
if (typeof module !== 'undefined') {
module.exports = viewport;
module.exports = message_viewport;
}

View File

@ -306,7 +306,7 @@ exports.activate = function (raw_operators, opts) {
// Scroll so that the selected message is in the same
// position in the viewport as it was prior to
// narrowing
viewport.set_message_offset(then_select_offset);
message_viewport.set_message_offset(then_select_offset);
}
}
}

View File

@ -10,7 +10,7 @@ function go_to_row(row) {
}
exports.up = function () {
viewport.last_movement_direction = -1;
message_viewport.last_movement_direction = -1;
var next_row = rows.prev_visible(current_msg_list.selected_row());
if (next_row.length !== 0) {
go_to_row(next_row);
@ -18,7 +18,7 @@ exports.up = function () {
};
exports.down = function (with_centering) {
viewport.last_movement_direction = 1;
message_viewport.last_movement_direction = 1;
var next_row = rows.next_visible(current_msg_list.selected_row());
if (next_row.length !== 0) {
go_to_row(next_row);
@ -30,13 +30,14 @@ exports.down = function (with_centering) {
// FIXME: this doesn't work for End because rows.last_visible()
// always returns a message.
var current_msg_table = rows.get_table(current_msg_list.table_name);
viewport.scrollTop(current_msg_table.outerHeight(true) - viewport.height() * 0.1);
message_viewport.scrollTop(current_msg_table.outerHeight(true) -
message_viewport.height() * 0.1);
unread_ui.mark_current_list_as_read();
}
};
exports.to_home = function () {
viewport.last_movement_direction = -1;
message_viewport.last_movement_direction = -1;
var next_row = rows.first_visible(current_msg_list.selected_row());
if (next_row.length !== 0) {
go_to_row(next_row);
@ -45,14 +46,14 @@ exports.to_home = function () {
exports.to_end = function () {
var next_id = current_msg_list.last().id;
viewport.last_movement_direction = 1;
message_viewport.last_movement_direction = 1;
current_msg_list.select_id(next_id, {then_scroll: true,
from_scroll: true});
unread_ui.mark_current_list_as_read();
};
exports.page_up = function () {
if (viewport.at_top() && !current_msg_list.empty()) {
if (message_viewport.at_top() && !current_msg_list.empty()) {
current_msg_list.select_id(current_msg_list.first().id, {then_scroll: false});
} else {
ui.page_up_the_right_amount();
@ -60,7 +61,7 @@ exports.page_up = function () {
};
exports.page_down = function () {
if (viewport.at_bottom() && !current_msg_list.empty()) {
if (message_viewport.at_bottom() && !current_msg_list.empty()) {
current_msg_list.select_id(current_msg_list.last().id, {then_scroll: false});
unread_ui.mark_current_list_as_read();
} else {
@ -104,7 +105,7 @@ exports.cycle_stream = function (direction) {
exports.scroll_to_selected = function () {
var selected_row = current_msg_list.selected_row();
if (selected_row && (selected_row.length !== 0)) {
viewport.recenter_view(selected_row);
message_viewport.recenter_view(selected_row);
}
};

View File

@ -76,7 +76,7 @@ exports.fast_forward_pointer = function () {
};
exports.keep_pointer_in_view = function () {
// See viewport.recenter_view() for related logic to keep the pointer onscreen.
// See message_viewport.recenter_view() for related logic to keep the pointer onscreen.
// This function mostly comes into place for mouse scrollers, and it
// keeps the pointer in view. For people who purely scroll with the
// mouse, the pointer is kind of meaningless to them, but keyboard
@ -89,12 +89,12 @@ exports.keep_pointer_in_view = function () {
return;
}
var info = viewport.message_viewport_info();
var info = message_viewport.message_viewport_info();
var top_threshold = info.visible_top + (1/10 * info.visible_height);
var bottom_threshold = info.visible_top + (9/10 * info.visible_height);
function message_is_far_enough_down() {
if (viewport.at_top()) {
if (message_viewport.at_top()) {
return true;
}
@ -120,7 +120,7 @@ exports.keep_pointer_in_view = function () {
}
function message_is_far_enough_up() {
return viewport.at_bottom() ||
return message_viewport.at_bottom() ||
(next_row.offset().top <= bottom_threshold);
}

View File

@ -71,9 +71,9 @@ function show_message_info_popover(element, id) {
narrowed: narrow.active(),
};
var ypos = elt.offset().top - viewport.scrollTop();
var ypos = elt.offset().top - message_viewport.scrollTop();
elt.popover({
placement: (ypos > (viewport.height() - 300)) ? 'top' : 'bottom',
placement: (ypos > (message_viewport.height() - 300)) ? 'top' : 'bottom',
title: templates.render('message_info_popover_title', args),
content: templates.render('message_info_popover_content', args),
trigger: "manual",
@ -126,8 +126,8 @@ exports.toggle_reactions_popover = function (element, id) {
var approx_popover_height = 400;
var approx_popover_width = 400;
var distance_from_bottom = viewport.height() - elt.offset().top;
var distance_from_right = viewport.width() - elt.offset().left;
var distance_from_bottom = message_viewport.height() - elt.offset().top;
var distance_from_right = message_viewport.width() - elt.offset().left;
var will_extend_beyond_bottom_of_viewport = distance_from_bottom < approx_popover_height;
var will_extend_beyond_top_of_viewport = elt.offset().top < approx_popover_height;
var will_extend_beyond_left_of_viewport = elt.offset().left < (approx_popover_width / 2);
@ -209,9 +209,9 @@ exports.toggle_actions_popover = function (element, id) {
narrowed: narrow.active(),
};
var ypos = elt.offset().top - viewport.scrollTop();
var ypos = elt.offset().top - message_viewport.scrollTop();
elt.popover({
placement: (ypos > (viewport.height() - 300)) ? 'top' : 'bottom',
placement: (ypos > (message_viewport.height() - 300)) ? 'top' : 'bottom',
title: "",
content: templates.render('actions_popover_content', args),
trigger: "manual",

View File

@ -48,7 +48,7 @@ function set_user_list_heights(res, usable_height, user_presences, group_pms) {
function get_new_heights() {
var res = {};
var viewport_height = viewport.height();
var viewport_height = message_viewport.height();
var top_navbar_height = $("#top_navbar").outerHeight(true);
var invite_user_link_height = $("#invite-user-link").outerHeight(true) || 0;
@ -107,8 +107,8 @@ function get_new_heights() {
function left_userlist_get_new_heights() {
var res = {};
var viewport_height = viewport.height();
var viewport_width = viewport.width();
var viewport_height = message_viewport.height();
var viewport_width = message_viewport.width();
var top_navbar_height = $(".header").outerHeight(true);
var stream_filters = $('#stream_filters').expectOne();
@ -185,7 +185,7 @@ exports.resize_page_components = function () {
var sidebar;
if (page_params.left_side_userlist) {
var css_narrow_mode = viewport.is_narrow();
var css_narrow_mode = message_viewport.is_narrow();
$("#top_navbar").removeClass("rightside-userlist");

View File

@ -315,14 +315,14 @@ function _setup_page() {
function settings_change_error(message, xhr) {
// Scroll to the top so the error message is visible.
// We would scroll anyway if we end up submitting the form.
viewport.scrollTop(0);
message_viewport.scrollTop(0);
ui.report_error(message, xhr, $('#account-settings-status').expectOne());
}
function settings_change_success(message) {
// Scroll to the top so the error message is visible.
// We would scroll anyway if we end up submitting the form.
viewport.scrollTop(0);
message_viewport.scrollTop(0);
ui.report_success(message, $('#account-settings-status').expectOne());
}

View File

@ -133,7 +133,7 @@ function update_in_home_view(sub, value) {
var saved_ypos;
// Save our current scroll position
if (ui.home_tab_obscured()) {
saved_ypos = viewport.scrollTop();
saved_ypos = message_viewport.scrollTop();
} else if (home_msg_list === current_msg_list &&
current_msg_list.selected_row().offset() !== null) {
msg_offset = current_msg_list.selected_row().offset().top;
@ -146,7 +146,7 @@ function update_in_home_view(sub, value) {
// Ensure we're still at the same scroll position
if (ui.home_tab_obscured()) {
viewport.scrollTop(saved_ypos);
message_viewport.scrollTop(saved_ypos);
} else if (home_msg_list === current_msg_list) {
// We pass use_closest to handle the case where the
// currently selected message is being hidden from the
@ -154,7 +154,7 @@ function update_in_home_view(sub, value) {
home_msg_list.select_id(home_msg_list.selected_id(),
{use_closest: true, empty_ok: true});
if (current_msg_list.selected_id() !== -1) {
viewport.set_message_offset(msg_offset);
message_viewport.set_message_offset(msg_offset);
}
}

View File

@ -254,7 +254,7 @@ function box(x, y, width, height) {
}
function message_groups_in_viewport() {
var vp = viewport.message_viewport_info();
var vp = message_viewport.message_viewport_info();
var top = vp.visible_top;
var height = vp.visible_height;
var last_group = rows.get_message_recipient_row(rows.last_visible());

View File

@ -44,7 +44,7 @@ function amount_to_paginate() {
// Some day we might have separate versions of this function
// for Page Up vs. Page Down, but for now it's the same
// strategy in either direction.
var info = viewport.message_viewport_info();
var info = message_viewport.message_viewport_info();
var page_size = info.visible_height;
// We don't want to page up a full page, because Zulip users
@ -77,13 +77,13 @@ exports.page_up_the_right_amount = function () {
// related adjustements, try to make those happen in the
// scroll handlers, not here.
var delta = amount_to_paginate();
viewport.scrollTop(viewport.scrollTop() - delta);
message_viewport.scrollTop(message_viewport.scrollTop() - delta);
};
exports.page_down_the_right_amount = function () {
// see also: page_up_the_right_amount
var delta = amount_to_paginate();
viewport.scrollTop(viewport.scrollTop() + delta);
message_viewport.scrollTop(message_viewport.scrollTop() + delta);
};
exports.replace_emoji_with_text = function (element) {
@ -396,19 +396,19 @@ $(function () {
// page, the pointer may still need to move.
if (delta > 0) {
if (viewport.at_top()) {
if (message_viewport.at_top()) {
navigate.up();
}
} else if (delta < 0) {
if (viewport.at_bottom()) {
if (message_viewport.at_bottom()) {
navigate.down();
}
}
viewport.last_movement_direction = delta;
message_viewport.last_movement_direction = delta;
});
viewport.message_pane.mousewheel(function (e, delta) {
message_viewport.message_pane.mousewheel(function (e, delta) {
// Ignore mousewheel events if a modal is visible. It's weird if the
// user can scroll the main view by wheeling over the grayed-out area.
// Similarly, ignore events on settings page etc.
@ -540,12 +540,12 @@ $(function () {
});
}
if (event.target_scroll_offset !== undefined) {
viewport.set_message_offset(event.target_scroll_offset);
message_viewport.set_message_offset(event.target_scroll_offset);
} else {
// Scroll to place the message within the current view;
// but if this is the initial placement of the pointer,
// just place it in the very center
viewport.recenter_view(row, {from_scroll: event.from_scroll,
message_viewport.recenter_view(row, {from_scroll: event.from_scroll,
force_center: event.previously_selected === -1});
}
}
@ -605,7 +605,7 @@ function scroll_finished() {
pointer.suppress_scroll_pointer_update = false;
}
floating_recipient_bar.update();
if (viewport.scrollTop() === 0 &&
if (message_viewport.scrollTop() === 0 &&
ui.have_scrolled_away_from_top) {
ui.have_scrolled_away_from_top = false;
message_store.load_more_messages(current_msg_list);
@ -632,7 +632,7 @@ function scroll_finish() {
var saved_compose_cursor = 0;
$(function () {
viewport.message_pane.scroll($.throttle(50, function () {
message_viewport.message_pane.scroll($.throttle(50, function () {
unread_ui.process_visible();
scroll_finish();
}));

View File

@ -135,11 +135,11 @@ exports.process_visible = function process_visible() {
}
if (feature_flags.mark_read_at_bottom) {
if (viewport.bottom_message_visible()) {
if (message_viewport.bottom_message_visible()) {
exports.mark_current_list_as_read();
}
} else {
exports.mark_messages_as_read(viewport.visible_messages(true));
exports.mark_messages_as_read(message_viewport.visible_messages(true));
}
};

View File

@ -3,7 +3,7 @@
display: none !important;
}
/* This max-width must be synced with viewport.is_narrow */
/* This max-width must be synced with message_viewport.is_narrow */
@media (max-width: 975px) {
.screen-full-show {

View File

@ -818,7 +818,7 @@ JS_SPECS = {
'js/unread_ui.js',
'js/muting.js',
'js/muting_ui.js',
'js/viewport.js',
'js/message_viewport.js',
'js/rows.js',
'js/people.js',
'js/unread.js',