Remove the need for having an HTML snippet in the body.

0c0a3f86 · JC Brand · c05c2ee9 · 0c0a3f86 · 0c0a3f86 · 0c0a3f86
Commit 0c0a3f86 authored May 13, 2014 by JC Brand
Hide whitespace changes
Inline Side-by-side

Showing with 25 additions and 43 deletions

converse.js converse.js +19 -27

docs/CHANGES.rst docs/CHANGES.rst +1 -0

docs/source/index.rst docs/source/index.rst +0 -7

index.html index.html +5 -9

No files found.
--- a/converse.js
+++ b/converse.js
@@ -2480,9 +2480,10 @@
        });

        this.ChatBoxViews = Backbone.View.extend({
-            el: '#conversejs',

            initialize: function () {
+                this.render();
+
                var views = {};
                this.get = function (id) { return views[id]; };
                this.set = function (id, view) { views[id] = view; };
@@ -2509,6 +2510,23 @@
                }, this);
            },

+            render: function () {
+                this.$el.html(converse.templates.trimmed_chats());
+            },
+
+            _ensureElement: function() {
+                if (!this.el) {
+                    var $el = $('#conversejs');
+                    if (!$el.length) {
+                        $el = $('<div id="conversejs">');
+                        $('body').append($el);
+                    }
+                    this.setElement($el, false);
+                } else {
+                    this.setElement(_.result(this, 'el'), false);
+                }
+            },
+
            trimOpenChats: function (view) {
                /* This method is called before a new chat box will be opened.
                 *
@@ -2964,32 +2982,6 @@
            }
        });

-        this.TrimmedChatBoxes = Backbone.View.extend({
-            /* A view for trimmed chat boxes and chat rooms.
-             * XXX: Add this view inside ChatBoxViews's $el (i.e. #conversejs)
-             */
-            tagName: 'div',
-            id: 'trimmed-chatboxes',
-            initialize: function () {
-                var views = {};
-                this.get = function (id) { return views[id]; };
-                this.set = function (id, view) { views[id] = view; };
-                this.getAll = function () { return views; };
-
-                this.$el.html(converse.templates.trimmed_chats());
-                this.model.on("add", function (item) {
-                    if (!item.get('trimmed')) {
-                        return;
-                    }
-                    this.show(item);
-                }, this);
-            },
-
-            show: function (item) {
-                this.$('.box-flyout').append(converse.templates.trim_chat());
-            }
-        });
-
        this.RosterView = Backbone.View.extend({
            tagName: 'dl',
            id: 'converse-roster',

--- a/docs/CHANGES.rst
+++ b/docs/CHANGES.rst
@@ -9,6 +9,7 @@ Changelog
    2. Configuration options for the chat toolbar have changed.
       Please refer to the `relevant documentation http://devbox:8890/docs/html/index.html#visible-toolbar-buttons`_.

+* No initial HTML markup is now needed in the document body for converse.js to work. [jcbrand]
 * All date handling is now done with moment.js. [jcbrand]
 * Add a new toolbar button for clearing chat messages. [jcbrand]
 * Chat boxes and rooms can now be resized vertically. [jcbrand]

--- a/docs/source/index.rst
+++ b/docs/source/index.rst
@@ -52,13 +52,6 @@ bottom of your page (after the closing *</body>* element).
        });
    });

-
-Finally, Converse.js requires a special snippet of HTML markup to be included in your page:
-
-::
-
-    <div id="conversejs"></div>
-
 The `index.html <https://github.com/jcbrand/converse.js/blob/master/index.html>`_ file inside the
 Converse.js repository serves as a nice usable example of this.


--- a/index.html
+++ b/index.html
@@ -13,6 +13,11 @@
    <link type="text/css" rel="stylesheet" media="screen" href="css/theme.css" />
    <link type="text/css" rel="stylesheet" media="screen" href="css/converse.css" />
    <script data-main="main" src="components/requirejs/require.js"></script>
+
+    <script src="../components/jquery/dist/jquery.min.js"></script>
+    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
+    <script src="js/init.js"></script>
 </head>

 <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
@@ -209,15 +214,6 @@
            </div>
        </div>
    </section>
-
-    <!-- Core JavaScript Files -->
-    <script src="../components/jquery/dist/jquery.min.js"></script>
-    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
-    <!-- Custom Theme JavaScript -->
-    <script src="js/init.js"></script>
-
-    <div id="conversejs"></div>
 </body>

 <script type="text/javascript">