From be2a1c28939783b68b4b9253da033523d9500233 Mon Sep 17 00:00:00 2001 From: Steve Howell Date: Thu, 13 Mar 2014 14:03:31 -0400 Subject: [PATCH] Move resizing code to resize.js. (imported from commit b6df0007307872751e1a4200af740076e08b5c11) --- static/js/activity.js | 2 +- static/js/compose.js | 6 +- static/js/hotkey.js | 2 +- static/js/message_store.js | 2 +- static/js/popovers.js | 4 +- static/js/referral.js | 10 +- static/js/resize.js | 265 ++++++++++++++++++++++++++++++++++ static/js/settings.js | 2 +- static/js/ui.js | 281 ++----------------------------------- static/js/zulip.js | 2 +- tools/jslint/check-all.js | 2 +- zproject/settings.py | 1 + 12 files changed, 295 insertions(+), 284 deletions(-) create mode 100644 static/js/resize.js diff --git a/static/js/activity.js b/static/js/activity.js index e6dbc37d82..404bdb873d 100644 --- a/static/js/activity.js +++ b/static/js/activity.js @@ -255,7 +255,7 @@ var update_users = _.throttle(actually_update_users, 5000); function actually_update_users_for_search() { actually_update_users(); - ui.resize_page_components(); + resize.resize_page_components(); } var update_users_for_search = _.throttle(actually_update_users_for_search, 50); diff --git a/static/js/compose.js b/static/js/compose.js index c437233b2f..dd836792a7 100644 --- a/static/js/compose.js +++ b/static/js/compose.js @@ -240,7 +240,7 @@ exports.start = function (msg_type, opts) { exports.decorate_stream_bar(opts.stream); $(document).trigger($.Event('compose_started.zulip', opts)); - ui.resize_bottom_whitespace(); + resize.resize_bottom_whitespace(); }; function abort_xhr () { @@ -266,7 +266,7 @@ exports.cancel = function () { } hide_box(); $("#compose_close").hide(); - ui.resize_bottom_whitespace(); + resize.resize_bottom_whitespace(); clear_box(); notifications.clear_compose_notifications(); abort_xhr(); @@ -483,7 +483,7 @@ function clear_compose_box() { clear_message_snapshot(); $("#compose-send-button").removeAttr('disabled'); $("#sending-indicator").hide(); - ui.resize_bottom_whitespace(); + resize.resize_bottom_whitespace(); } exports.send_message_success = function (local_id, message_id, start_time, locally_echoed) { diff --git a/static/js/hotkey.js b/static/js/hotkey.js index 1363c437d0..3c7175d881 100644 --- a/static/js/hotkey.js +++ b/static/js/hotkey.js @@ -350,7 +350,7 @@ $(document).keydown(function (e) { e.preventDefault(); } } - ui.resize_bottom_whitespace(); + resize.resize_bottom_whitespace(); }); $(document).keypress(function (e) { diff --git a/static/js/message_store.js b/static/js/message_store.js index 62fcc0ca12..2ecc1bfc3c 100644 --- a/static/js/message_store.js +++ b/static/js/message_store.js @@ -434,7 +434,7 @@ function get_old_messages_success(data, opts) { } process_result(data.messages, opts); - ui.resize_bottom_whitespace(); + resize.resize_bottom_whitespace(); } exports.load_old_messages = function load_old_messages(opts) { diff --git a/static/js/popovers.js b/static/js/popovers.js index ee4efdd7f5..aba21d318a 100644 --- a/static/js/popovers.js +++ b/static/js/popovers.js @@ -159,12 +159,12 @@ exports.hide_streamlist_sidebar = function () { exports.show_userlist_sidebar = function () { $(".app-main .column-right").addClass("expanded"); - ui.resize_page_components(); + resize.resize_page_components(); }; exports.show_streamlist_sidebar = function () { $(".app-main .column-left").addClass("expanded"); - ui.resize_page_components(); + resize.resize_page_components(); }; var current_stream_sidebar_elem; diff --git a/static/js/referral.js b/static/js/referral.js index e3e7e70356..f363dbca4b 100644 --- a/static/js/referral.js +++ b/static/js/referral.js @@ -60,7 +60,7 @@ exports.update_state = function (granted, used) { $("#share-the-love").show(); } - ui.resize_page_components(); + resize.resize_page_components(); }; function show_and_fade_elem(elem) { @@ -88,18 +88,18 @@ $(function () { exports.update_state(last_granted, last_used + 1); }, success: function () { - ui.resize_page_components(); + resize.resize_page_components(); }, showErrors: function () { this.defaultShowErrors(); - ui.resize_page_components(); + resize.resize_page_components(); } }); $("#referral-form input").on('blur', function (e) { if ($("#referral-form input").val() === '') { validator.resetForm(); - ui.resize_page_components(); + resize.resize_page_components(); } }); @@ -110,7 +110,7 @@ $(function () { $("#share-the-love-expand-collapse").click(function (e) { $("#share-the-love-contents").toggle(); $("#share-the-love-expand-collapse .toggle").toggleClass('icon-vector-caret-right icon-vector-caret-down'); - ui.resize_page_components(); + resize.resize_page_components(); e.stopPropagation(); }); diff --git a/static/js/resize.js b/static/js/resize.js new file mode 100644 index 0000000000..4f7176caaf --- /dev/null +++ b/static/js/resize.js @@ -0,0 +1,265 @@ +var resize = (function () { + +var exports = {}; + +var narrow_window = false; + +function confine_to_range(lo, val, hi) { + if (val < lo) { + return lo; + } + if (val > hi) { + return hi; + } + return val; +} + +function size_blocks(blocks, usable_height) { + var n = blocks.length; + + var sum_height = 0; + _.each(blocks, function (block) { + sum_height += block.real_height; + }); + + _.each(blocks, function (block) { + var ratio = block.real_height / sum_height; + ratio = confine_to_range(0.05, ratio, 0.85); + block.max_height = confine_to_range(40, usable_height * ratio, 1.2 * block.real_height); + }); +} + +function set_user_list_heights(res, usable_height, user_presences, group_pms) { + // Calculate these heights: + // res.user_presences_max_height + // res.group_pms_max_height + var blocks = [ + { + real_height: user_presences.prop('scrollHeight') + }, + { + real_height: group_pms.prop('scrollHeight') + } + ]; + + size_blocks(blocks, usable_height); + + res.user_presences_max_height = blocks[0].max_height; + res.group_pms_max_height = blocks[1].max_height; +} + +function get_new_heights() { + var res = {}; + var viewport_height = viewport.height(); + var top_navbar_height = $("#top_navbar").outerHeight(true); + var invite_user_link_height = $("#invite-user-link").outerHeight(true) || 0; + + res.bottom_whitespace_height = viewport_height * 0.4; + + res.main_div_min_height = viewport_height - top_navbar_height; + + res.bottom_sidebar_height = viewport_height - top_navbar_height - 40; + + res.right_sidebar_height = viewport_height - parseInt($("#right-sidebar").css("marginTop"), 10); + + res.stream_filters_max_height = + res.bottom_sidebar_height + - $("#global_filters").outerHeight(true) + - $("#streams_header").outerHeight(true) + - 10; // stream_filters margin-bottom + + if ($("#share-the-love").is(":visible")) { + res.stream_filters_max_height -= + $("#share-the-love").outerHeight(true) + + 20; // share-the-love margins + 10px of ?? + } + + // Don't let us crush the stream sidebar completely out of view + res.stream_filters_max_height = Math.max(40, res.stream_filters_max_height); + + // RIGHT SIDEBAR + var user_presences = $('#user_presences').expectOne(); + var group_pms = $('#group-pms').expectOne(); + + var usable_height = + res.right_sidebar_height + - $("#feedback_section").outerHeight(true) + - parseInt(user_presences.css("marginTop"),10) + - parseInt(user_presences.css("marginBottom"), 10) + - $("#userlist-header").outerHeight(true) + - $(".user-list-filter").outerHeight(true) + - invite_user_link_height + - parseInt(group_pms.css("marginTop"),10) + - parseInt(group_pms.css("marginBottom"), 10) + - $("#group-pm-header").outerHeight(true); + + // set these + // res.user_presences_max_height + // res.group_pms_max_height + set_user_list_heights( + res, + usable_height, + user_presences, + group_pms + ); + + return res; +} + +function left_userlist_get_new_heights() { + + var res = {}; + var viewport_height = viewport.height(); + var viewport_width = viewport.width(); + var top_navbar_height = $(".header").outerHeight(true); + + var stream_filters = $('#stream_filters').expectOne(); + var user_presences = $('#user_presences').expectOne(); + var group_pms = $('#group-pms').expectOne(); + + var stream_filters_real_height = stream_filters.prop("scrollHeight"); + var user_list_real_height = user_presences.prop("scrollHeight"); + var group_pms_real_height = group_pms.prop("scrollHeight"); + + res.bottom_whitespace_height = viewport_height * 0.4; + + res.main_div_min_height = viewport_height - top_navbar_height; + + res.bottom_sidebar_height = viewport_height + - parseInt($("#left-sidebar").css("marginTop"),10) + - parseInt($(".bottom_sidebar").css("marginTop"),10); + + + res.total_leftlist_height = res.bottom_sidebar_height + - $("#global_filters").outerHeight(true) + - $("#streams_header").outerHeight(true) + - $("#userlist-header").outerHeight(true) + - $(".user-list-filter").outerHeight(true) + - $("#group-pm-header").outerHeight(true) + - parseInt(stream_filters.css("marginBottom"),10) + - parseInt(user_presences.css("marginTop"), 10) + - parseInt(user_presences.css("marginBottom"), 10) + - parseInt(group_pms.css("marginTop"), 10) + - parseInt(group_pms.css("marginBottom"), 10) + - 15; + + var blocks = [ + { + real_height: stream_filters_real_height + }, + { + real_height: user_list_real_height + }, + { + real_height: group_pms_real_height + } + ]; + + size_blocks(blocks, res.total_leftlist_height); + + res.stream_filters_max_height = blocks[0].max_height; + res.user_presences_max_height = blocks[1].max_height; + res.group_pms_max_height = blocks[2].max_height; + + res.viewport_height = viewport_height; + res.viewport_width = viewport_width; + + return res; +} + +exports.resize_bottom_whitespace = function (h) { + if (page_params.autoscroll_forever) { + $("#bottom_whitespace").height($("#compose-container")[0].offsetHeight); + } else if (h !== undefined) { + $("#bottom_whitespace").height(h.bottom_whitespace_height); + } +}; + +exports.resize_page_components = function () { + var composebox = $("#compose"); + var floating_recipient_bar = $("#floating_recipient_bar"); + var desired_width; + if (ui.home_tab_obscured() === 'other_tab') { + desired_width = $("div.tab-pane.active").outerWidth(); + } else { + desired_width = $("#main_div").outerWidth(); + } + + var h; + var sidebar; + + if (feature_flags.left_side_userlist) { + var css_narrow_mode = viewport.is_narrow(); + + $("#top_navbar").removeClass("rightside-userlist"); + + if (css_narrow_mode && !narrow_window) { + // move stuff to the left sidebar (skinny mode) + narrow_window = true; + popovers.set_userlist_placement("left"); + sidebar = $(".bottom_sidebar").expectOne(); + sidebar.append($("#user-list").expectOne()); + sidebar.append($("#group-pm-list").expectOne()); + sidebar.append($("#share-the-love").expectOne()); + $("#user_presences").css("margin", "0px"); + $("#group-pms").css("margin", "0px"); + $("#userlist-toggle").css("display", "none"); + $("#invite-user-link").hide(); + } + else if (!css_narrow_mode && narrow_window) { + // move stuff to the right sidebar (wide mode) + narrow_window = false; + popovers.set_userlist_placement("right"); + sidebar = $("#right-sidebar").expectOne(); + sidebar.append($("#user-list").expectOne()); + sidebar.append($("#group-pm-list").expectOne()); + $("#user_presences").css("margin", ''); + $("#group-pms").css("margin", ''); + $("#userlist-toggle").css("display", ''); + $("#invite-user-link").show(); + } + } + + h = narrow_window ? left_userlist_get_new_heights() : get_new_heights(); + + exports.resize_bottom_whitespace(h); + $("#stream-filters-container").css('max-height', h.stream_filters_max_height); + $("#user_presences").css('max-height', h.user_presences_max_height); + $("#group-pms").css('max-height', h.group_pms_max_height); + + $('#stream-filters-container').perfectScrollbar('update'); +}; + +var _old_width = $(window).width(); + +exports.handler = function (e) { + var new_width = $(window).width(); + + if (new_width !== _old_width) { + _old_width = new_width; + ui.clear_message_content_height_cache(); + } + + popovers.hide_all(); + exports.resize_page_components(); + + // This function might run onReady (if we're in a narrow window), + // but before we've loaded in the messages; in that case, don't + // try to scroll to one. + if (current_msg_list.selected_id() !== -1) { + scroll_to_selected(); + } + + // When the screen resizes, it can make it so that messages are + // now on the page, so we need to update the notifications bar. + // We may want to do more here in terms of updating unread counts, + // but it's possible that resize events can happen as part of + // screen resolution changes, so we might want to wait for a more + // intentional action to say that the user has "read" a message. + var res = unread.get_counts(); + notifications_bar.update(res.home_unread_messages); +}; + +return exports; +}()); + diff --git a/static/js/settings.js b/static/js/settings.js index a6c8d95375..b52d1b3c62 100644 --- a/static/js/settings.js +++ b/static/js/settings.js @@ -664,7 +664,7 @@ exports.setup_page = function () { if (result.autoscroll_forever !== undefined) { page_params.autoscroll_forever = result.autoscroll_forever; - ui.resize_page_components(); + resize.resize_page_components(); } ui_settings_status.removeClass(status_classes) diff --git a/static/js/ui.js b/static/js/ui.js index 27a2aa382a..a9f8c2359d 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -3,7 +3,6 @@ var ui = (function () { var exports = {}; var actively_scrolling = false; -var narrow_window = false; exports.actively_scrolling = function () { return actively_scrolling; @@ -311,271 +310,7 @@ function need_skinny_mode() { } } -function confine_to_range(lo, val, hi) { - if (val < lo) { - return lo; - } - if (val > hi) { - return hi; - } - return val; -} -function size_blocks(blocks, usable_height) { - var n = blocks.length; - - var sum_height = 0; - _.each(blocks, function (block) { - sum_height += block.real_height; - }); - - _.each(blocks, function (block) { - var ratio = block.real_height / sum_height; - ratio = confine_to_range(0.05, ratio, 0.85); - block.max_height = confine_to_range(40, usable_height * ratio, 1.2 * block.real_height); - }); -} - -function set_user_list_heights(res, usable_height, user_presences, group_pms) { - // Calculate these heights: - // res.user_presences_max_height - // res.group_pms_max_height - var blocks = [ - { - real_height: user_presences.prop('scrollHeight') - }, - { - real_height: group_pms.prop('scrollHeight') - } - ]; - - size_blocks(blocks, usable_height); - - res.user_presences_max_height = blocks[0].max_height; - res.group_pms_max_height = blocks[1].max_height; -} - -function scrollbarWidth() { - $('body').prepend(''); - - var scrollwidth = $("#outertest").outerWidth() - $("#innertest").outerWidth(); - - $("#outertest").remove(); - - return scrollwidth; -} - -function get_new_heights() { - var res = {}; - var viewport_height = viewport.height(); - var top_navbar_height = $("#top_navbar").outerHeight(true); - var invite_user_link_height = $("#invite-user-link").outerHeight(true) || 0; - - res.bottom_whitespace_height = viewport_height * 0.4; - - res.main_div_min_height = viewport_height - top_navbar_height; - - res.bottom_sidebar_height = viewport_height - top_navbar_height - 40; - - res.right_sidebar_height = viewport_height - parseInt($("#right-sidebar").css("marginTop"), 10); - - res.stream_filters_max_height = - res.bottom_sidebar_height - - $("#global_filters").outerHeight(true) - - $("#streams_header").outerHeight(true) - - 10; // stream_filters margin-bottom - - if ($("#share-the-love").is(":visible")) { - res.stream_filters_max_height -= - $("#share-the-love").outerHeight(true) - + 20; // share-the-love margins + 10px of ?? - } - - // Don't let us crush the stream sidebar completely out of view - res.stream_filters_max_height = Math.max(40, res.stream_filters_max_height); - - // RIGHT SIDEBAR - var user_presences = $('#user_presences').expectOne(); - var group_pms = $('#group-pms').expectOne(); - - var usable_height = - res.right_sidebar_height - - $("#feedback_section").outerHeight(true) - - parseInt(user_presences.css("marginTop"),10) - - parseInt(user_presences.css("marginBottom"), 10) - - $("#userlist-header").outerHeight(true) - - $(".user-list-filter").outerHeight(true) - - invite_user_link_height - - parseInt(group_pms.css("marginTop"),10) - - parseInt(group_pms.css("marginBottom"), 10) - - $("#group-pm-header").outerHeight(true); - - // set these - // res.user_presences_max_height - // res.group_pms_max_height - set_user_list_heights( - res, - usable_height, - user_presences, - group_pms - ); - - return res; -} - -function left_userlist_get_new_heights() { - - var res = {}; - var viewport_height = viewport.height(); - var viewport_width = viewport.width(); - var top_navbar_height = $(".header").outerHeight(true); - - var stream_filters = $('#stream_filters').expectOne(); - var user_presences = $('#user_presences').expectOne(); - var group_pms = $('#group-pms').expectOne(); - - var stream_filters_real_height = stream_filters.prop("scrollHeight"); - var user_list_real_height = user_presences.prop("scrollHeight"); - var group_pms_real_height = group_pms.prop("scrollHeight"); - - res.bottom_whitespace_height = viewport_height * 0.4; - - res.main_div_min_height = viewport_height - top_navbar_height; - - res.bottom_sidebar_height = viewport_height - - parseInt($("#left-sidebar").css("marginTop"),10) - - parseInt($(".bottom_sidebar").css("marginTop"),10); - - - res.total_leftlist_height = res.bottom_sidebar_height - - $("#global_filters").outerHeight(true) - - $("#streams_header").outerHeight(true) - - $("#userlist-header").outerHeight(true) - - $(".user-list-filter").outerHeight(true) - - $("#group-pm-header").outerHeight(true) - - parseInt(stream_filters.css("marginBottom"),10) - - parseInt(user_presences.css("marginTop"), 10) - - parseInt(user_presences.css("marginBottom"), 10) - - parseInt(group_pms.css("marginTop"), 10) - - parseInt(group_pms.css("marginBottom"), 10) - - 15; - - var blocks = [ - { - real_height: stream_filters_real_height - }, - { - real_height: user_list_real_height - }, - { - real_height: group_pms_real_height - } - ]; - - size_blocks(blocks, res.total_leftlist_height); - - res.stream_filters_max_height = blocks[0].max_height; - res.user_presences_max_height = blocks[1].max_height; - res.group_pms_max_height = blocks[2].max_height; - - res.viewport_height = viewport_height; - res.viewport_width = viewport_width; - - return res; -} - -exports.resize_bottom_whitespace = function (h) { - if (page_params.autoscroll_forever) { - $("#bottom_whitespace").height($("#compose-container")[0].offsetHeight); - } else if (h !== undefined) { - $("#bottom_whitespace").height(h.bottom_whitespace_height); - } -}; - -exports.resize_page_components = function () { - var composebox = $("#compose"); - var floating_recipient_bar = $("#floating_recipient_bar"); - var desired_width; - if (exports.home_tab_obscured() === 'other_tab') { - desired_width = $("div.tab-pane.active").outerWidth(); - } else { - desired_width = $("#main_div").outerWidth(); - } - - var h; - var sidebar; - - if (feature_flags.left_side_userlist) { - var css_narrow_mode = viewport.is_narrow(); - - $("#top_navbar").removeClass("rightside-userlist"); - - if (css_narrow_mode && !narrow_window) { - // move stuff to the left sidebar (skinny mode) - narrow_window = true; - popovers.set_userlist_placement("left"); - sidebar = $(".bottom_sidebar").expectOne(); - sidebar.append($("#user-list").expectOne()); - sidebar.append($("#group-pm-list").expectOne()); - sidebar.append($("#share-the-love").expectOne()); - $("#user_presences").css("margin", "0px"); - $("#group-pms").css("margin", "0px"); - $("#userlist-toggle").css("display", "none"); - $("#invite-user-link").hide(); - } - else if (!css_narrow_mode && narrow_window) { - // move stuff to the right sidebar (wide mode) - narrow_window = false; - popovers.set_userlist_placement("right"); - sidebar = $("#right-sidebar").expectOne(); - sidebar.append($("#user-list").expectOne()); - sidebar.append($("#group-pm-list").expectOne()); - $("#user_presences").css("margin", ''); - $("#group-pms").css("margin", ''); - $("#userlist-toggle").css("display", ''); - $("#invite-user-link").show(); - } - } - - h = narrow_window ? left_userlist_get_new_heights() : get_new_heights(); - - exports.resize_bottom_whitespace(h); - $("#stream-filters-container").css('max-height', h.stream_filters_max_height); - $("#user_presences").css('max-height', h.user_presences_max_height); - $("#group-pms").css('max-height', h.group_pms_max_height); - - $('#stream-filters-container').perfectScrollbar('update'); -}; - -var _old_width = $(window).width(); - -function resizehandler(e) { - var new_width = $(window).width(); - - if (new_width !== _old_width) { - _old_width = new_width; - exports.clear_message_content_height_cache(); - } - - popovers.hide_all(); - exports.resize_page_components(); - - // This function might run onReady (if we're in a narrow window), - // but before we've loaded in the messages; in that case, don't - // try to scroll to one. - if (current_msg_list.selected_id() !== -1) { - scroll_to_selected(); - } - - // When the screen resizes, it can make it so that messages are - // now on the page, so we need to update the notifications bar. - // We may want to do more here in terms of updating unread counts, - // but it's possible that resize events can happen as part of - // screen resolution changes, so we might want to wait for a more - // intentional action to say that the user has "read" a message. - var res = unread.get_counts(); - notifications_bar.update(res.home_unread_messages); -} var is_floating_recipient_bar_showing = false; @@ -914,7 +649,7 @@ $(function () { // the tab to scroll normally. }); - $(window).resize($.throttle(50, resizehandler)); + $(window).resize($.throttle(50, resize.handler)); // Scrolling in modals, input boxes, and other elements that // explicitly scroll should not scroll the main view. Stop @@ -951,7 +686,7 @@ $(function () { }); $('#gear-menu a[data-toggle="tab"]').on('shown', function (e) { var target_tab = $(e.target).attr('href'); - exports.resize_bottom_whitespace(); + resize.resize_bottom_whitespace(); // Hide all our error messages when switching tabs $('.alert-error').hide(); $('.alert-success').hide(); @@ -1004,7 +739,7 @@ $(function () { // A little hackish, because it doesn't seem to totally get us the // exact right width for the floating_recipient_bar and compose // box, but, close enough for now. - resizehandler(); + resize.handler(); if (!feature_flags.left_side_userlist) { $("#navbar-buttons").addClass("right-userlist"); @@ -1629,6 +1364,16 @@ $(function () { }); }); +function scrollbarWidth() { + $('body').prepend(''); + + var scrollwidth = $("#outertest").outerWidth() - $("#innertest").outerWidth(); + + $("#outertest").remove(); + + return scrollwidth; +} + // Workaround for browsers with fixed scrollbars $(function () { diff --git a/static/js/zulip.js b/static/js/zulip.js index 5b1d1fd65d..957f10e9df 100644 --- a/static/js/zulip.js +++ b/static/js/zulip.js @@ -311,7 +311,7 @@ function process_loaded_for_unread(messages) { activity.update_huddles(); unread.process_loaded_messages(messages); unread.update_unread_counts(); - ui.resize_page_components(); + resize.resize_page_components(); } function main() { diff --git a/tools/jslint/check-all.js b/tools/jslint/check-all.js index 6dc7653f7c..785a903fe5 100644 --- a/tools/jslint/check-all.js +++ b/tools/jslint/check-all.js @@ -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' + + ' message_flags bot_data loading favicon resize' // colorspace.js + ' colorspace' diff --git a/zproject/settings.py b/zproject/settings.py index b21ced3852..c27c72359d 100644 --- a/zproject/settings.py +++ b/zproject/settings.py @@ -542,6 +542,7 @@ JS_SPECS = { 'js/stream_data.js', 'js/subs.js', 'js/message_edit.js', + 'js/resize.js', 'js/ui.js', 'js/popovers.js', 'js/typeahead_helper.js',