From 70d444a8eb93cda92fcca7362c6917f2f7ef6ddd Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Wed, 14 Apr 2021 11:10:34 +0000 Subject: [PATCH] compose: Move to `hbs` file and append it to DOM on init. We move compose.html to compose.hbs file while keeping `#compose` still in `home.html` as a hanger where append rest of the elements. This will provide us with two benefits: * We could share common elements between message_edit_form and compose. * We can insert compose directly in any element. We may decide to do it for recent topics. --- frontend_tests/node_tests/compose.js | 8 ++ frontend_tests/node_tests/compose_video.js | 6 + static/js/compose.js | 10 ++ static/js/ui_init.js | 6 +- static/templates/compose.hbs | 124 ++++++++++++++++++++ templates/zerver/app/compose.html | 126 --------------------- templates/zerver/app/home.html | 3 +- zerver/tests/test_home.py | 4 +- zerver/views/home.py | 2 - 9 files changed, 157 insertions(+), 132 deletions(-) create mode 100644 static/templates/compose.hbs delete mode 100644 templates/zerver/app/compose.html diff --git a/frontend_tests/node_tests/compose.js b/frontend_tests/node_tests/compose.js index 5a06daf486..8cf7532197 100644 --- a/frontend_tests/node_tests/compose.js +++ b/frontend_tests/node_tests/compose.js @@ -1062,6 +1062,14 @@ test_ui("initialize", (override) => { }; }); + stub_templates((template_name, context) => { + assert.equal(template_name, "compose"); + assert.equal(context.embedded, false); + assert.equal(context.allow_file_upload, true); + assert.equal(context.giphy_api_available, true); + return "fake-compose-template"; + }); + compose.initialize(); assert(resize_watch_manual_resize_checked); diff --git a/frontend_tests/node_tests/compose_video.js b/frontend_tests/node_tests/compose_video.js index e278d03835..45faddc7ff 100644 --- a/frontend_tests/node_tests/compose_video.js +++ b/frontend_tests/node_tests/compose_video.js @@ -2,6 +2,7 @@ const {strict: assert} = require("assert"); +const {stub_templates} = require("../zjsunit/handlebars"); const {mock_cjs, mock_esm, set_global, zrequire} = require("../zjsunit/namespace"); const {run_test} = require("../zjsunit/test"); const $ = require("../zjsunit/zjquery"); @@ -71,6 +72,11 @@ test("videos", (override) => { override(upload, "feature_check", () => {}); stub_out_video_calls(); + + stub_templates((template_name) => { + assert.equal(template_name, "compose"); + return "fake-compose-template"; + }); compose.initialize(); (function test_no_provider_video_link_compose_clicked() { diff --git a/static/js/compose.js b/static/js/compose.js index ece926e013..a58a575970 100644 --- a/static/js/compose.js +++ b/static/js/compose.js @@ -1,6 +1,7 @@ import $ from "jquery"; import _ from "lodash"; +import render_compose from "../templates/compose.hbs"; import render_compose_all_everyone from "../templates/compose_all_everyone.hbs"; import render_compose_announce from "../templates/compose_announce.hbs"; import render_compose_invite_users from "../templates/compose_invite_users.hbs"; @@ -1098,6 +1099,15 @@ export function warn_if_mentioning_unsubscribed_user(mentioned) { } export function initialize() { + const $compose = $("#compose"); + $compose.append( + render_compose({ + embedded: $compose.attr("data-embedded") === "", + file_upload_enabled: page_params.max_file_upload_size_mib > 0, + giphy_api_available: page_params.giphy_api_key !== "", + }), + ); + $("#below-compose-content .video_link").toggle(compute_show_video_chat_button()); $( "#stream_message_recipient_stream,#stream_message_recipient_topic,#private_message_recipient", diff --git a/static/js/ui_init.js b/static/js/ui_init.js index 629b4a5abc..28149a8c7c 100644 --- a/static/js/ui_init.js +++ b/static/js/ui_init.js @@ -459,6 +459,11 @@ export function initialize_everything() { const user_status_params = pop_fields("user_status"); tippyjs.initialize(); + // We need to initialze compose early, because other modules' + // initialization expects `#compose` to be already present in the + // DOM, dating from when the compose area was part of the backend + // template. + compose.initialize(); message_lists.initialize(); alert_popup.initialize(); alert_words.initialize(alert_words_params); @@ -499,7 +504,6 @@ export function initialize_everything() { }); markdown.initialize(page_params.realm_linkifiers, markdown_config.get_helpers()); realm_playground.initialize(page_params.realm_playgrounds); - compose.initialize(); composebox_typeahead.initialize(); // Must happen after compose.initialize() search.initialize(); tutorial.initialize(); diff --git a/static/templates/compose.hbs b/static/templates/compose.hbs new file mode 100644 index 0000000000..1644248271 --- /dev/null +++ b/static/templates/compose.hbs @@ -0,0 +1,124 @@ +
+
+
+ × + +
+
+ + + {{t 'Drafts' }} + + {{t 'Saved as draft' }} + + + + + + + + {{#unless embedded }} + + + + {{/unless}} + + + +
+
+
+
+ × + +
+
+
+
+
+
+
+
+ +
+ {{ csrf_input }} +
+
+
+
+ + + + + + +
+
+
+
+ {{t 'To' }}: +
+
+
+
+
+
+
+
+
+
+
+ + +
+
+ + + {{#if file_upload_enabled }} + + {{/if}} + + + + + {{#if giphy_api_available }} + + + + {{/if}} + {{t 'Drafts' }} + {{t 'Help' }} + +
+ +
+
+
+
+
+
+
+
+
diff --git a/templates/zerver/app/compose.html b/templates/zerver/app/compose.html deleted file mode 100644 index 2dae109a88..0000000000 --- a/templates/zerver/app/compose.html +++ /dev/null @@ -1,126 +0,0 @@ -
-
-
-
- × - -
-
- - - {{ _('Drafts') }} - - {{ _('Saved as draft') }} - - - - - - - - {% if not embedded %} - - - - {% endif %} - - - -
-
-
-
- × - -
-
-
-
-
-
-
-
- -
- {{ csrf_input }} -
-
-
-
- - - - - - -
-
-
-
- {{ _('To') }}: -
-
-
-
-
-
-
-
-
-
-
- - -
-
- - - {% if max_file_upload_size_mib > 0 %} - - {% endif %} - - - - - {% if giphy_api_available %} - - - - {% endif %} - {{ _('Drafts') }} - {{ _('Help') }} - -
- -
-
-
-
-
-
-
-
-
-
diff --git a/templates/zerver/app/home.html b/templates/zerver/app/home.html index 5cef3f44f6..5a2a406572 100644 --- a/templates/zerver/app/home.html +++ b/templates/zerver/app/home.html @@ -156,7 +156,8 @@ {% include "zerver/app/message_history.html" %} {% include "zerver/app/delete_message.html" %} -{% include "zerver/app/compose.html" %} +
+