Application HTML as a template to delay HTML parsing/painting
authorDarren <darren@darrenwhitlen.com>
Sat, 26 Oct 2013 13:00:33 +0000 (14:00 +0100)
committerDarren <darren@darrenwhitlen.com>
Sat, 26 Oct 2013 13:00:33 +0000 (14:00 +0100)
client/assets/src/index.html.tmpl
client/assets/src/views/application.js

index a0940524caf6daed6aef7160195e7a98acbd726a..964d533b444c6144174d65ef39fbbb46db2513a3 100644 (file)
 <![endif]-->\r
 </head>\r
 <body>\r
-    <div id="kiwi" class="theme_relaxed">\r
-        <div class="toolbar">\r
-            <div class="app_tools">\r
-                <ul class="main">\r
-                    <li class="settings"><i class="icon-cogs" title="Settings"></i></li>\r
-                    <li><a href="https://kiwiirc.com/" target="_blank"><img src="<%base_path%>/assets/img/ico.png" alt="KiwiIRC" title="KiwiIRC" /></a></li>\r
-                </ul>\r
-            </div>\r
-\r
-            <div class="tabs"></div>\r
 \r
-            <div class="topic">\r
-                <div contenteditable="true"></div>\r
-            </div>\r
-\r
-            <div class="status_message"></div>\r
-        </div>\r
-\r
-        <div class="memberlists_resize_handle"></div>\r
+    <script type="text/html" id="tmpl_application">\r
+        <div id="kiwi" class="theme_relaxed">\r
+            <div class="toolbar">\r
+                <div class="app_tools">\r
+                    <ul class="main">\r
+                        <li class="settings"><i class="icon-cogs" title="Settings"></i></li>\r
+                        <li><a href="https://kiwiirc.com/" target="_blank"><img src="<%base_path%>/assets/img/ico.png" alt="KiwiIRC" title="KiwiIRC" /></a></li>\r
+                    </ul>\r
+                </div>\r
 \r
-        <div class="panels">\r
-            <div class="panel_container container1"></div>\r
-        </div>\r
+                <div class="tabs"></div>\r
 \r
-        <div class="memberlists disabled"></div>\r
+                <div class="topic">\r
+                    <div contenteditable="true"></div>\r
+                </div>\r
 \r
-        <div class="controlbox">\r
-            <div class="input">\r
-                <span class="nick"> </span>\r
-                <div class="input_wrap"><textarea class="inp"></textarea></div>\r
-                <div class="input_tools"></div>\r
+                <div class="status_message"></div>\r
             </div>\r
-        </div>\r
-    </div>\r
 \r
+            <div class="memberlists_resize_handle"></div>\r
 \r
+            <div class="panels">\r
+                <div class="panel_container container1"></div>\r
+            </div>\r
 \r
+            <div class="memberlists disabled"></div>\r
 \r
+            <div class="controlbox">\r
+                <div class="input">\r
+                    <span class="nick"> </span>\r
+                    <div class="input_wrap"><textarea class="inp"></textarea></div>\r
+                    <div class="input_tools"></div>\r
+                </div>\r
+            </div>\r
+        </div>\r
+    </script>\r
 \r
 \r
     <script type="text/html" id="tmpl_userbox">\r
         }\r
     }\r
 \r
-    window.onload = function () {\r
+    (function () {\r
         var base_path = '<%base_path%>', // Entry path for the kiwi application\r
             scripts = [],\r
             opts = {\r
-                container: $('#kiwi'),\r
+                container: $('body'),\r
                 base_path: base_path,\r
                 settings_path: base_path + '/assets/settings.json'\r
             };\r
                 loadNextScript();\r
             }\r
         });\r
-    };\r
+\r
+        jobs.registerJob('window_load');\r
+        window.onload = function() {\r
+            jobs.finishJob('window_load');\r
+        };\r
+    })();\r
 </script>\r
 </body>\r
 </html>\r
index be2ebbeb329d561e794008893998700402b926de..82563d92a49cc14fd5571adf9d38e5ee749fb822 100644 (file)
@@ -2,9 +2,11 @@ _kiwi.view.Application = Backbone.View.extend({
     initialize: function () {
         var that = this;
 
+        this.$el.append($('#tmpl_application').html().trim());
+
         $(window).resize(function() { that.doLayout.apply(that); });
         this.$el.find('.toolbar').resize(function() { that.doLayout.apply(that); });
-        $('#kiwi .controlbox').resize(function() { that.doLayout.apply(that); });
+        this.$el.find('.controlbox').resize(function() { that.doLayout.apply(that); });
 
         // Change the theme when the config is changed
         _kiwi.global.settings.on('change:theme', this.updateTheme, this);
@@ -16,6 +18,7 @@ _kiwi.view.Application = Backbone.View.extend({
         _kiwi.global.settings.on('change:show_timestamps', this.displayTimestamps, this);
         this.displayTimestamps(_kiwi.global.settings.get('show_timestamps'));
 
+        this.$el.appendTo($('body'));
         this.doLayout();
 
         $(document).keydown(this.setKeyFocus);
@@ -117,6 +120,10 @@ _kiwi.view.Application = Backbone.View.extend({
         var el_controlbox = $('#kiwi .controlbox');
         var el_resize_handle = $('#kiwi .memberlists_resize_handle');
 
+        if (!el_kiwi.is(':visible')) {
+            return;
+        }
+
         var css_heights = {
             top: el_toolbar.outerHeight(true),
             bottom: el_controlbox.outerHeight(true)