From 5e39ccd642fb2b98cbd0c52bd0ffa407fb00c46c Mon Sep 17 00:00:00 2001 From: Tim Abbott Date: Fri, 10 Mar 2017 14:48:51 -0800 Subject: [PATCH] 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. --- .eslintrc.json | 2 +- static/js/compose.js | 2 +- static/js/compose_fade.js | 2 +- static/js/condense.js | 2 +- static/js/gear_menu.js | 6 ++--- static/js/message_edit.js | 6 ++--- static/js/message_list.js | 2 +- static/js/message_list_view.js | 13 ++++++----- .../js/{viewport.js => message_viewport.js} | 8 +++---- static/js/narrow.js | 2 +- static/js/navigate.js | 17 +++++++------- static/js/pointer.js | 8 +++---- static/js/popovers.js | 12 +++++----- static/js/resize.js | 8 +++---- static/js/settings.js | 4 ++-- static/js/subs.js | 6 ++--- static/js/tutorial.js | 2 +- static/js/ui.js | 22 +++++++++---------- static/js/unread_ui.js | 4 ++-- static/styles/media.css | 2 +- zproject/settings.py | 2 +- 21 files changed, 67 insertions(+), 65 deletions(-) rename static/js/{viewport.js => message_viewport.js} (98%) diff --git a/.eslintrc.json b/.eslintrc.json index 5bb22722e9..b556c687ec 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -55,7 +55,7 @@ "Socket": false, "channel": false, "components": false, - "viewport": false, + "message_viewport": false, "upload_widget": false, "avatar": false, "realm_icon": false, diff --git a/static/js/compose.js b/static/js/compose.js index d7eef53fe5..b21bd4c5ee 100644 --- a/static/js/compose.js +++ b/static/js/compose.js @@ -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); } } diff --git a/static/js/compose_fade.js b/static/js/compose_fade.js index 8d708d3b07..016ef59076 100644 --- a/static/js/compose_fade.js +++ b/static/js/compose_fade.js @@ -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; diff --git a/static/js/condense.js b/static/js/condense.js index 76aa460abe..fd59a5483c 100644 --- a/static/js/condense.js +++ b/static/js/condense.js @@ -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"); diff --git a/static/js/gear_menu.js b/static/js/gear_menu.js index 13a01783a6..2a5ae11ba4 100644 --- a/static/js/gear_menu.js +++ b/static/js/gear_menu.js @@ -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); } } }); diff --git a/static/js/message_edit.js b/static/js/message_edit.js index c14496a29f..9016eca183 100644 --- a/static/js/message_edit.js +++ b/static/js/message_edit.js @@ -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); } diff --git a/static/js/message_list.js b/static/js/message_list.js index 82d9f11891..49933c5099 100644 --- a/static/js/message_list.js +++ b/static/js/message_list.js @@ -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; diff --git a/static/js/message_list_view.js b/static/js/message_list_view.js index 1c143d568b..2d6cbfa8f2 100644 --- a/static/js/message_list_view.js +++ b/static/js/message_list_view.js @@ -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); } }, diff --git a/static/js/viewport.js b/static/js/message_viewport.js similarity index 98% rename from static/js/viewport.js rename to static/js/message_viewport.js index 7217ed44f0..e2c8c427d2 100644 --- a/static/js/viewport.js +++ b/static/js/message_viewport.js @@ -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; } diff --git a/static/js/narrow.js b/static/js/narrow.js index b9e7239a62..2960eb7164 100644 --- a/static/js/narrow.js +++ b/static/js/narrow.js @@ -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); } } } diff --git a/static/js/navigate.js b/static/js/navigate.js index 523edebab6..2ea12e365f 100644 --- a/static/js/navigate.js +++ b/static/js/navigate.js @@ -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); } }; diff --git a/static/js/pointer.js b/static/js/pointer.js index f431cd8de2..1dccaafe33 100644 --- a/static/js/pointer.js +++ b/static/js/pointer.js @@ -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); } diff --git a/static/js/popovers.js b/static/js/popovers.js index 52ad2c4eb4..caa55ba43c 100644 --- a/static/js/popovers.js +++ b/static/js/popovers.js @@ -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", diff --git a/static/js/resize.js b/static/js/resize.js index 5207ca1304..d512f2fe48 100644 --- a/static/js/resize.js +++ b/static/js/resize.js @@ -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"); diff --git a/static/js/settings.js b/static/js/settings.js index af4fe2d58c..bc2f41a7eb 100644 --- a/static/js/settings.js +++ b/static/js/settings.js @@ -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()); } diff --git a/static/js/subs.js b/static/js/subs.js index d0a594c794..93bca734e6 100644 --- a/static/js/subs.js +++ b/static/js/subs.js @@ -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); } } diff --git a/static/js/tutorial.js b/static/js/tutorial.js index ff9f29e315..09b82f2ad4 100644 --- a/static/js/tutorial.js +++ b/static/js/tutorial.js @@ -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()); diff --git a/static/js/ui.js b/static/js/ui.js index 5a39120f58..46ddc84daa 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -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(); })); diff --git a/static/js/unread_ui.js b/static/js/unread_ui.js index 155b62a905..a20e5ce83d 100644 --- a/static/js/unread_ui.js +++ b/static/js/unread_ui.js @@ -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)); } }; diff --git a/static/styles/media.css b/static/styles/media.css index e5c6eed954..2bb5cc7623 100644 --- a/static/styles/media.css +++ b/static/styles/media.css @@ -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 { diff --git a/zproject/settings.py b/zproject/settings.py index 8cdd8b8927..85e052ea2c 100644 --- a/zproject/settings.py +++ b/zproject/settings.py @@ -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',