Use [backbone.vdomview](https://github.com/jcbrand/backbone.vdomview)

For the MUCJoinView and the LoginPanel
2017-11-10 21:20:13 +01:00 · 2017-11-10 21:20:13 +01:00 · cfd5dad9c5
commit cfd5dad9c5
parent ed4c393a9d
7 changed files with 54 additions and 58 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1054,6 +1054,17 @@
        }
      }
    },
+    "backbone.vdomview": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/backbone.vdomview/-/backbone.vdomview-0.0.1.tgz",
+      "integrity": "sha512-wmOKebp5tKLXFOWVmexDDST93BhmjbjTkssXit/6cmz1+eC3ryMR0azSxIIeJcXF66k3QDJLlgq3oFHmnTU4yw==",
+      "dev": true,
+      "requires": {
+        "backbone": "1.3.3",
+        "vdom-parser": "1.4.1",
+        "virtual-dom": "2.1.1"
+      }
+    },
    "balanced-match": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -40,6 +40,7 @@
    "backbone": "1.3.3",
    "backbone.browserStorage": "0.0.3",
    "backbone.overview": "0.0.3",
+    "backbone.vdomview": "0.0.1",
    "bootstrap": "^3.3.7",
    "bourbon": "^4.3.2",
    "clean-css-cli": "^4.0.10",
--- a/src/config.js
+++ b/src/config.js
@ -22,6 +22,7 @@ require.config({
        "backbone.browserStorage":  "node_modules/backbone.browserStorage/backbone.browserStorage",
        "backbone.noconflict":      "src/backbone.noconflict",
        "backbone.overview":        "node_modules/backbone.overview/backbone.overview",
+        "backbone.vdomview":        "node_modules/backbone.vdomview/backbone.vdomview",
        "emojione":                 "node_modules/emojione/lib/js/emojione",
        "es6-promise":              "node_modules/es6-promise/dist/es6-promise.auto",
        "eventemitter":             "node_modules/otr/build/dep/eventemitter",
--- a/src/converse-controlbox.js
+++ b/src/converse-controlbox.js
@ -456,7 +456,7 @@
                }
            });

-            _converse.LoginPanel = Backbone.View.extend({
+            _converse.LoginPanel = Backbone.VDOMView.extend({
                tagName: 'div',
                id: "converse-login-panel",
                className: 'controlbox-pane fade-in',
@ -470,14 +470,14 @@
                    this.listenTo(_converse.connfeedback, 'change', this.render);
                },

-                render () {
+                renderHTML () {
                    const connection_status = _converse.connfeedback.get('connection_status');
                    let feedback_class, pretty_status;
                    if (_.includes(REPORTABLE_STATUSES, connection_status)) {
                        pretty_status = PRETTY_CONNECTION_STATUS[connection_status];
                        feedback_class = CONNECTION_STATUS_CSS_CLASS[pretty_status];
                    }
-                    const html = tpl_login_panel(
+                    return tpl_login_panel(
                        _.extend(this.model.toJSON(), {
                            '__': __,
                            '_converse': _converse,
@ -495,14 +495,6 @@
                                                    __('Username') || __('user@domain'),
                        })
                    );
-                    const form = this.el.querySelector('form');
-                    if (_.isNull(form)) {
-                        this.el.innerHTML = html;
-                    } else {
-                        const patches = vdom.diff(vdom_parser(form), vdom_parser(html));
-                        vdom.patch(form, patches);
-                    }
-                    return this;
                },

                validate () {
--- a/src/converse-muc.js
+++ b/src/converse-muc.js
@ -15,8 +15,6 @@
            "form-utils",
            "converse-core",
            "lodash.fp",
-            "virtual-dom",
-            "vdom-parser",
            "tpl!chatarea",
            "tpl!chatroom",
            "tpl!chatroom_disconnect",
@ -38,15 +36,14 @@
            "tpl!spinner",
            "awesomplete",
            "converse-chatview",
-            "converse-disco"
+            "converse-disco",
+            "backbone.vdomview"
    ], factory);
 }(this, function (
            $,
            utils,
            converse,
            fp,
-            vdom,
-            vdom_parser,
            tpl_chatarea,
            tpl_chatroom,
            tpl_chatroom_disconnect,
@ -2378,13 +2375,13 @@
            });


-            _converse.MUCJoinForm = Backbone.View.extend({
+            _converse.MUCJoinForm = Backbone.VDOMView.extend({
                initialize () {
                    this.model.on('change:muc_domain', this.render, this);
                },

-                render () {
-                    const html = tpl_chatroom_join_form(_.assign(this.model.toJSON(), {
+                renderHTML () {
+                    return tpl_chatroom_join_form(_.assign(this.model.toJSON(), {
                        'server_input_type': _converse.hide_muc_server && 'hidden' || 'text',
                        'server_label_global_attr': _converse.hide_muc_server && ' hidden' || '',
                        'label_room_name': __('Room name'),
@ -2393,14 +2390,6 @@
                        'label_join': __('Join Room'),
                        'label_show_rooms': __('Show rooms')
                    }));
-                    const form = this.el.querySelector('form');
-                    if (_.isNull(form)) {
-                        this.el.innerHTML = html;
-                    } else {
-                        const patches = vdom.diff(vdom_parser(form), vdom_parser(html));
-                        vdom.patch(form, patches);
-                    }
-                    return this;
                }
            });

@ -2442,7 +2431,7 @@

                render () {
                    this.el.innerHTML = tpl_room_panel();
-                    this.join_form.setElement(this.el.querySelector('.chatroom-join-form'));
+                    this.join_form.setElement(this.el.querySelector('.add-chatroom'));
                    this.join_form.render();

                    this.renderTab();
--- a/src/templates/login_panel.html
+++ b/src/templates/login_panel.html
@ -1,31 +1,33 @@
-<form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
-    <legend>{{{o.__("Login")}}}</legend>
-    <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
-        <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
-        <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
-    </div>
-    {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
-        <span class="spinner centered"/>
-    {[ } else { ]}
-        {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
-            <label>{{{o.__("Jabber ID:")}}}</label>
-            <input autofocus required
-                   type="text"
-                   name="jid"
-                   placeholder="{{{o.placeholder_username}}}">
-            {[ if (o.authentication !== o.EXTERNAL) { ]}
-                <label>{{{o.__("Password:")}}}</label>
-                <input required
-                       type="password" name="password"
-                       placeholder="{{{o.__('password')}}}">
+<div id="converse-login-panel" class="controlbox-pane fade-in">
+    <form class="pure-form pure-form-stacked converse-form" id="converse-login" method="post">
+        <legend>{{{o.__("Login")}}}</legend>
+        <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
+            <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
+            <p class="feedback-message {[ if (!o.conn_feedback_message) { ]} hidden {[ } ]}">{{{o.conn_feedback_message}}}</p>
+        </div>
+        {[ if (o.auto_login || o._converse.CONNECTION_STATUS[o.connection_status] === 'CONNECTING') { ]}
+            <span class="spinner centered"/>
+        {[ } else { ]}
+            {[ if (o.authentication == o.LOGIN || o.authentication == o.EXTERNAL) { ]}
+                <label>{{{o.__("Jabber ID:")}}}</label>
+                <input autofocus required
+                    type="text"
+                    name="jid"
+                    placeholder="{{{o.placeholder_username}}}">
+                {[ if (o.authentication !== o.EXTERNAL) { ]}
+                    <label>{{{o.__("Password:")}}}</label>
+                    <input required
+                        type="password" name="password"
+                        placeholder="{{{o.__('password')}}}">
+                {[ } ]}
+                <input class="pure-button button-primary" type="submit" value="{{{o.__('Submit')}}}">
+            {[ } ]}
+            {[ if (o.authentication == o.ANONYMOUS) { ]}
+                <input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
+            {[ } ]}
+            {[ if (o.authentication == o.PREBIND) { ]}
+                <p>Disconnected.</p>
            {[ } ]}
-            <input class="pure-button button-primary" type="submit" value="{{{o.__('Submit')}}}">
        {[ } ]}
-        {[ if (o.authentication == o.ANONYMOUS) { ]}
-            <input class="pure-button button-primary login-anon" type="submit" value="{{{o.__('Click here to log in anonymously')}}}"/>
-        {[ } ]}
-        {[ if (o.authentication == o.PREBIND) { ]}
-            <p>Disconnected.</p>
-        {[ } ]}
-    {[ } ]}
-</form>
+    </form>
+</div>
--- a/src/templates/room_panel.html
+++ b/src/templates/room_panel.html
@ -1,4 +1,4 @@
-<span class="chatroom-join-form"></span>
+<form class="add-chatroom"></form>
 <div class="rooms-list-container">
    <dl id="available-chatrooms" class="rooms-list"></dl>
 </div>