background.ts/conversation_view.ts modules, Whisper.View/ToastView in TS

js/views/banner_view.js

@@ -1,7 +1,7 @@
 // Copyright 2017-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* global Whisper */
+/* global Whisper, $ */
 
 // eslint-disable-next-line func-names
 (function () {
@@ -9,7 +9,7 @@
 
   Whisper.BannerView = Whisper.View.extend({
     className: 'banner',
-    templateName: 'banner',
+    template: () => $('#banner').html(),
     events: {
       'click .dismiss': 'onDismiss',
       'click .body': 'onClick',

js/views/clear_data_view.js

@@ -1,10 +1,7 @@
 // Copyright 2018-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* global i18n: false */
-/* global Whisper: false */
-
-/* eslint-disable no-new */
+/* global i18n, Whisper, $ */
 
 // eslint-disable-next-line func-names
 (function () {
@@ -16,7 +13,7 @@
     DELETING: 2,
   };
   window.Whisper.ClearDataView = Whisper.View.extend({
-    templateName: 'clear-data',
+    template: () => $('#clear-data').html(),
     className: 'full-screen-flow overlay',
     events: {
       'click .cancel': 'onCancel',

js/views/contact_list_view.js

@@ -1,8 +1,7 @@
 // Copyright 2015-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* global Whisper: false */
-/* global textsecure: false */
+/* global Whisper, textsecure, $ */
 
 // eslint-disable-next-line func-names
 (function () {
@@ -13,7 +12,7 @@
     itemView: Whisper.View.extend({
       tagName: 'div',
       className: 'contact',
-      templateName: 'contact',
+      template: () => $('#contact').html(),
       initialize(options) {
         this.ourNumber = textsecure.storage.user.getNumber();
         this.listenBack = options.listenBack;

js/views/debug_log_view.js

@@ -1,8 +1,7 @@
 // Copyright 2015-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* global i18n: false */
-/* global Whisper: false */
+/* global i18n, Whisper, $ */
 
 // eslint-disable-next-line func-names
 (function () {
@@ -31,7 +30,7 @@
   });
 
   Whisper.DebugLogLinkView = Whisper.View.extend({
-    templateName: 'debug-log-link',
+    template: () => $('#debug-log-link').html(),
     initialize(options) {
       this.url = options.url;
     },
@@ -66,7 +65,7 @@
    * edit them in their own editor. This is mostly a stopgap solution.
    */
   Whisper.DebugLogView = Whisper.View.extend({
-    templateName: 'debug-log',
+    template: () => $('#debug-log').html(),
     className: 'debug-log modal',
     initialize() {
       this.render();

js/views/group_member_list_view.js

@@ -1,16 +1,15 @@
 // Copyright 2015-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* global Whisper, i18n */
+/* global Whisper, i18n, $ */
 
 // eslint-disable-next-line func-names
 (function () {
   window.Whisper = window.Whisper || {};
 
-  // TODO: take a title string which could replace the 'members' header
   Whisper.GroupMemberList = Whisper.View.extend({
     className: 'group-member-list panel',
-    templateName: 'group-member-list',
+    template: () => $('#group-member-list').html(),
     initialize(options) {
       this.needVerify = options.needVerify;
 

js/views/identicon_svg_view.js

@@ -1,7 +1,7 @@
 // Copyright 2015-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* global Whisper, loadImage */
+/* global Whisper, loadImage, $ */
 
 // eslint-disable-next-line func-names
 (function () {
@@ -11,7 +11,7 @@
    * Render an avatar identicon to an svg for use in a notification.
    */
   Whisper.IdenticonSVGView = Whisper.View.extend({
-    templateName: 'identicon-svg',
+    template: () => $('#identicon-svg').html(),
     initialize(options) {
       this.render_attributes = options;
       this.render_attributes.color = COLORS[this.render_attributes.color];

js/views/inbox_view.js

@@ -5,7 +5,8 @@
   ConversationController,
   i18n,
   Whisper,
-  Signal
+  Signal,
+  $
 */
 
 // eslint-disable-next-line func-names
@@ -60,7 +61,7 @@
   });
 
   Whisper.AppLoadingScreen = Whisper.View.extend({
-    templateName: 'app-loading-screen',
+    template: () => $('#app-loading-screen').html(),
     className: 'app-loading-screen',
     updateProgress(count) {
       if (count > 0) {
@@ -74,7 +75,7 @@
   });
 
   Whisper.InboxView = Whisper.View.extend({
-    templateName: 'two-column',
+    template: () => $('#two-column').html(),
     className: 'inbox index',
     initialize(options = {}) {
       this.ready = false;

js/views/install_view.js

@@ -24,7 +24,7 @@
   const TOO_OLD = 409;
 
   Whisper.InstallView = Whisper.View.extend({
-    templateName: 'link-flow-template',
+    template: () => $('#link-flow-template').html(),
     className: 'main full-screen-flow',
     events: {
       'click .try-again': 'connect',

js/views/key_verification_view.js

@@ -1,9 +1,7 @@
 // Copyright 2015-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* global Backbone, Signal, Whisper */
-
-/* eslint-disable more/no-then */
+/* global Backbone, Signal, Whisper, $ */
 
 // eslint-disable-next-line func-names
 (function () {
@@ -11,7 +9,7 @@
 
   Whisper.KeyVerificationPanelView = Whisper.View.extend({
     className: 'panel',
-    templateName: 'key-verification',
+    template: () => $('#key-verification').html(),
     initialize(options) {
       this.render();
 

js/views/phone-input-view.js

@@ -1,7 +1,7 @@
 // Copyright 2015-2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* global libphonenumber, Whisper */
+/* global libphonenumber, Whisper, $ */
 
 // eslint-disable-next-line func-names
 (function () {
@@ -10,7 +10,7 @@
   Whisper.PhoneInputView = Whisper.View.extend({
     tagName: 'div',
     className: 'phone-input',
-    templateName: 'phone-number',
+    template: () => $('#phone-number').html(),
     initialize() {
       this.$('input.number').intlTelInput();
     },

js/views/recorder_view.js

@@ -11,7 +11,7 @@
 
   Whisper.RecorderView = Whisper.View.extend({
     className: 'recorder clearfix',
-    templateName: 'recorder',
+    template: () => $('#recorder').html(),
     initialize() {
       this.startTime = Date.now();
       this.interval = setInterval(this.updateTime.bind(this), 1000);

js/views/safety_number_change_dialog_view.js

@@ -1,14 +1,14 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-/* global Whisper, Signal */
+/* global Whisper, Signal, $ */
 
 // eslint-disable-next-line func-names
 (function () {
   window.Whisper = window.Whisper || {};
 
   Whisper.SafetyNumberChangeDialogView = Whisper.View.extend({
-    templateName: 'safety-number-change-dialog',
+    template: () => $('#safety-number-change-dialog').html(),
     initialize(options) {
       const dialog = new Whisper.ReactWrapperView({
         Component: window.Signal.Components.SafetyNumberChangeDialog,

js/views/settings_view.js

@@ -91,7 +91,7 @@
   });
   Whisper.SettingsView = Whisper.View.extend({
     className: 'settings modal expand',
-    templateName: 'settings',
+    template: () => $('#settings').html(),
     initialize() {
       this.render();
       new RadioButtonGroupView({
@@ -271,7 +271,7 @@
   });
 
   const SyncView = Whisper.View.extend({
-    templateName: 'syncSettings',
+    template: () => $('#syncSettings').html(),
     className: 'syncSettings',
     events: {
       'click .sync': 'sync',

js/views/standalone_registration_view.js

@@ -10,7 +10,7 @@
   window.Whisper = window.Whisper || {};
 
   Whisper.StandaloneRegistrationView = Whisper.View.extend({
-    templateName: 'standalone',
+    template: () => $('#standalone').html(),
     className: 'full-screen-flow',
     initialize() {
       window.readyForUpdates();

js/views/toast_view.js

@@ -1,40 +0,0 @@
-// Copyright 2015-2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-/* global Whisper, Mustache, _ */
-
-// eslint-disable-next-line func-names
-(function () {
-  window.Whisper = window.Whisper || {};
-
-  Whisper.ToastView = Whisper.View.extend({
-    className: 'toast',
-    templateName: 'toast',
-    initialize() {
-      this.$el.hide();
-      this.timeout = 2000;
-    },
-
-    close() {
-      this.$el.fadeOut(this.remove.bind(this));
-    },
-
-    render() {
-      this.$el.html(
-        Mustache.render(
-          _.result(this, 'template', ''),
-          _.result(this, 'render_attributes', '')
-        )
-      );
-      this.$el.attr('tabIndex', 0);
-      this.$el.show();
-      setTimeout(this.close.bind(this), this.timeout);
-    },
-  });
-
-  Whisper.ToastView.show = (View, el) => {
-    const toast = new View();
-    toast.$el.appendTo(el);
-    toast.render();
-  };
-})();

js/views/whisper_view.js

@@ -1,79 +0,0 @@
-// Copyright 2015-2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-/* global Whisper, Backbone, Mustache, _, $ */
-
-/*
- * Whisper.View
- *
- * This is the base for most of our views. The Backbone view is extended
- * with some conveniences:
- *
- * 1. Pre-parses all our mustache templates for performance.
- * https://github.com/janl/mustache.js#pre-parsing-and-caching-templates
- *
- * 2. Defines a default definition for render() which allows sub-classes
- * to simply specify a templateName and renderAttributes which are plugged
- * into Mustache.render
- *
- * 3. Makes all the templates available for rendering as partials.
- * https://github.com/janl/mustache.js#partials
- *
- * 4. Provides some common functionality, e.g. confirmation dialog
- *
- */
-
-// eslint-disable-next-line func-names
-(function () {
-  window.Whisper = window.Whisper || {};
-
-  Whisper.View = Backbone.View.extend(
-    {
-      constructor(...params) {
-        Backbone.View.call(this, ...params);
-        Mustache.parse(_.result(this, 'template'));
-      },
-      render_attributes() {
-        return _.result(this.model, 'attributes', {});
-      },
-      render_partials() {
-        return Whisper.View.Templates;
-      },
-      template() {
-        if (this.templateName) {
-          return Whisper.View.Templates[this.templateName];
-        }
-        return '';
-      },
-      render() {
-        const attrs = _.result(this, 'render_attributes', {});
-        const template = _.result(this, 'template', '');
-        const partials = _.result(this, 'render_partials', '');
-        this.$el.html(Mustache.render(template, attrs, partials));
-        return this;
-      },
-      confirm(message, okText) {
-        return new Promise((resolve, reject) => {
-          window.showConfirmationDialog({
-            message,
-            okText,
-            resolve,
-            reject,
-          });
-        });
-      },
-    },
-    {
-      // Class attributes
-      Templates: (() => {
-        const templates = {};
-        $('script[type="text/x-tmpl-mustache"]').each((i, el) => {
-          const $el = $(el);
-          const id = $el.attr('id');
-          templates[id] = $el.html();
-        });
-        return templates;
-      })(),
-    }
-  );
-})();