js: Convert static/js/hotspots.js to ES6 module.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

.eslintrc.json

@@ -142,7 +142,6 @@
                 "helpers": false,
                 "history": false,
                 "home_msg_list": false,
-                "hotspots": false,
                 "i18n": false,
                 "input_pill": false,
                 "jQuery": false,

frontend_tests/node_tests/dispatch.js

@@ -32,7 +32,8 @@ const composebox_typeahead = set_global("composebox_typeahead", {});
 set_global("current_msg_list", {});
 const emoji_picker = set_global("emoji_picker", {});
 set_global("home_msg_list", {});
-const hotspots = set_global("hotspots", {});
+const hotspots = {__esModule: true};
+rewiremock("../../static/js/hotspots").with(hotspots);
 const markdown = {__esModule: true};
 rewiremock("../../static/js/markdown").with(markdown);
 const message_edit = {__esModule: true};

frontend_tests/node_tests/hotkey.js

@@ -37,7 +37,7 @@ rewiremock("../../static/js/stream_popover").with({
 const emoji_picker = set_global("emoji_picker", {
     reactions_popped: () => false,
 });
-set_global("hotspots", {
+rewiremock("../../static/js/hotspots").with({
     is_open: () => false,
 });
 const gear_menu = {

frontend_tests/node_tests/ui_init.js

@@ -74,7 +74,7 @@ rewiremock("../../static/js/drafts").with({initialize() {}});
 set_global("emoji_picker", {initialize() {}});
 rewiremock("../../static/js/gear_menu").with({initialize() {}});
 rewiremock("../../static/js/hashchange").with({initialize() {}});
-set_global("hotspots", {initialize() {}});
+rewiremock("../../static/js/hotspots").with({initialize() {}});
 // Accesses home_msg_list, which is a lot of complexity to set up
 rewiremock("../../static/js/message_fetch").with({initialize() {}});
 rewiremock("../../static/js/message_scroll").with({initialize() {}});

static/js/bundles/app.js

@@ -33,7 +33,6 @@ import "../notifications";
 import "../message_events";
 import "../server_events";
 import "../zulip";
-import "../hotspots";
 import "../templates";
 import "../upload_widget";
 import "../avatar";

static/js/click_handlers.js

@@ -13,6 +13,7 @@ import * as compose from "./compose";
 import * as compose_state from "./compose_state";
 import * as hash_util from "./hash_util";
 import * as hashchange from "./hashchange";
+import * as hotspots from "./hotspots";
 import * as message_edit from "./message_edit";
 import * as message_edit_history from "./message_edit_history";
 import * as message_flags from "./message_flags";

static/js/global.d.ts

@@ -18,7 +18,6 @@ declare let emoji_picker: any;
 declare let favicon: any;
 declare let helpers: any;
 declare let home_msg_list: any;
-declare let hotspots: any;
 declare let i18n: any;
 declare let input_pill: any;
 declare let message_events: any;

static/js/hotkey.js

@@ -10,6 +10,7 @@ import * as drafts from "./drafts";
 import * as feedback_widget from "./feedback_widget";
 import * as gear_menu from "./gear_menu";
 import * as hashchange from "./hashchange";
+import * as hotspots from "./hotspots";
 import * as lightbox from "./lightbox";
 import * as list_util from "./list_util";
 import * as message_edit from "./message_edit";

static/js/hotspots.js

@@ -1,13 +1,11 @@
-"use strict";
+import _ from "lodash";
 
-const _ = require("lodash");
+import render_hotspot_icon from "../templates/hotspot_icon.hbs";
+import render_hotspot_overlay from "../templates/hotspot_overlay.hbs";
+import render_intro_reply_hotspot from "../templates/intro_reply_hotspot.hbs";
 
-const render_hotspot_icon = require("../templates/hotspot_icon.hbs");
+import * as channel from "./channel";
-const render_hotspot_overlay = require("../templates/hotspot_overlay.hbs");
+import * as popovers from "./popovers";
-const render_intro_reply_hotspot = require("../templates/intro_reply_hotspot.hbs");
-
-const channel = require("./channel");
-const popovers = require("./popovers");
 
 // popover orientations
 const TOP = "top";
@@ -67,7 +65,7 @@ const HOTSPOT_LOCATIONS = new Map([
 // popover illustration url(s)
 const WHALE = "/static/images/hotspots/whale.svg";
 
-exports.post_hotspot_as_read = function (hotspot_name) {
+export function post_hotspot_as_read(hotspot_name) {
     channel.post({
         url: "/json/users/me/hotspots",
         data: {hotspot: JSON.stringify(hotspot_name)},
@@ -75,7 +73,7 @@ exports.post_hotspot_as_read = function (hotspot_name) {
             blueslip.error(err.responseText);
         },
     });
-};
+}
 
 function place_icon(hotspot) {
     const element = $(hotspot.location.element);
@@ -250,11 +248,11 @@ function insert_hotspot_into_DOM(hotspot) {
     }, hotspot.delay * 1000);
 }
 
-exports.is_open = function () {
+export function is_open() {
     return $(".hotspot.overlay").hasClass("show");
-};
+}
 
-exports.close_hotspot_icon = function (elem) {
+export function close_hotspot_icon(elem) {
     $(elem).animate(
         {opacity: 0},
         {
@@ -264,7 +262,7 @@ exports.close_hotspot_icon = function (elem) {
             }.bind(elem),
         },
     );
-};
+}
 
 function close_read_hotspots(new_hotspots) {
     const unwanted_hotspots = _.difference(
@@ -273,20 +271,18 @@ function close_read_hotspots(new_hotspots) {
     );
 
     for (const hotspot_name of unwanted_hotspots) {
-        exports.close_hotspot_icon($(`#hotspot_${CSS.escape(hotspot_name)}_icon`));
+        close_hotspot_icon($(`#hotspot_${CSS.escape(hotspot_name)}_icon`));
     }
 }
 
-exports.load_new = function (new_hotspots) {
+export function load_new(new_hotspots) {
     close_read_hotspots(new_hotspots);
     for (const hotspot of new_hotspots) {
         hotspot.location = HOTSPOT_LOCATIONS.get(hotspot.name);
         insert_hotspot_into_DOM(hotspot);
     }
-};
+}
 
-exports.initialize = function () {
+export function initialize() {
-    exports.load_new(page_params.hotspots);
+    load_new(page_params.hotspots);
-};
+}
-
-window.hotspots = exports;

static/js/server_events_dispatch.js

@@ -6,6 +6,7 @@ import * as alert_words_ui from "./alert_words_ui";
 import * as attachments_ui from "./attachments_ui";
 import * as compose from "./compose";
 import * as compose_fade from "./compose_fade";
+import * as hotspots from "./hotspots";
 import * as markdown from "./markdown";
 import * as message_edit from "./message_edit";
 import * as message_flags from "./message_flags";

static/js/ui_init.js

@@ -20,6 +20,7 @@ const echo = require("./echo");
 const emojisets = require("./emojisets");
 const gear_menu = require("./gear_menu");
 const hashchange = require("./hashchange");
+const hotspots = require("./hotspots");
 const invite = require("./invite");
 const lightbox = require("./lightbox");
 const markdown = require("./markdown");