Adding 'loaded' event to kiwi.events
[KiwiIRC.git] / client / src / index.html.tmpl
index 3baaf5b91ae072b9a445bbcce484d134040bc961..1d796fc7c5b9b2836b1f31eb3dd8405b6bfbf5ab 100644 (file)
@@ -9,11 +9,8 @@
 \r
 <link rel="shortcut icon" href="<%base_path%>/assets/img/favicon.ico">\r
 \r
-<link rel="stylesheet" type="text/css" href="<%base_path%>/assets/css/style.css" />\r
+<link rel="stylesheet" type="text/css" href="<%base_path%>/assets/css/style.css?t=<%build_time%>" />\r
 <link rel="stylesheet" type="text/css" href="<%base_path%>/assets/css/font-awesome.min.css" />\r
-<!--[if IE 7]>\r
-<link rel="stylesheet" type="text/css" href="/kiwi/assets/css/font-awesome-ie7.css" />\r
-<![endif]-->\r
 </head>\r
 <body>\r
 \r
@@ -22,7 +19,8 @@
             <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 class="settings"><i class="fa fa-cogs" title="Settings"></i></li>\r
+                        <li class="startup"><i class="fa fa-home" title="Home"></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
             </div>\r
 \r
             <div class="right_bar disabled">\r
-                <div class="channel_tools">\r
-                    <i class="icon-info-sign channel_info" title="Channel Info"></i>\r
-                    <i class="icon-signout channel_part" ttle="Leave Channel"></i>\r
+                <div class="right-bar-toggle"><i class=""></i></div>\r
+                <div class="right-bar-content">\r
+                    <div class="channel_tools">\r
+                        <i class="fa fa-info-circle channel_info" title="Channel Info"></i>\r
+                        <i class="fa fa-sign-out channel_part" title="Leave Channel"></i>\r
+                        <i class="fa fa-angle-double-right right-bar-toggle-inner" title="Hide"></i>\r
+                    </div>\r
+                    <div class="memberlists"></div>\r
                 </div>\r
-                <div class="memberlists"></div>\r
             </div>\r
 \r
             <div class="controlbox">\r
 \r
 \r
                 <div class="control-group channel-banlist">\r
-                    <button class="show_banlist">Show banlist</button> <span class="banlist-status"></span>\r
+                    <button class="toggle_banlist">Toggle banlist</button> <span class="banlist-status"></span>\r
                     <table>\r
                         <thead>\r
                             <tr>\r
-                                <td>Bank Mask</td>\r
+                                <td>Ban Mask</td>\r
                                 <td>Added By</td>\r
                                 <td>Date Added</td>\r
                                 <td></td>\r
 \r
     <script type="text/html" id="tmpl_userbox">\r
         <div class="userbox">\r
-            <a class="close_menu if_op op"><i class="icon-star"></i><%= op %></a>\r
-            <a class="close_menu if_op deop"><i class="icon-star-empty"></i><%= de_op %></a>\r
-            <a class="close_menu if_op voice"><i class="icon-volume-up"></i><%= voice %></a>\r
-            <a class="close_menu if_op devoice"><i class="icon-volume-off"></i><%= de_voice %></a>\r
-            <a class="close_menu if_op kick"><i class="icon-remove"></i><%= kick %></a>\r
-            <a class="close_menu if_op ban"><i class="icon-ban-circle"></i><%= ban %></a>\r
-\r
-            <a class="close_menu query"><i class="icon-comment"></i><%= message %></a>\r
-            <a class="close_menu info"><i class="icon-info-sign"></i><%= info %></a>\r
-            <a class="close_menu slap"><i class="icon-user-md"></i><%= slap %></a>\r
+            <a class="close_menu if_op op"><i class="fa fa-star"></i><%= op %></a>\r
+            <a class="close_menu if_op deop"><i class="fa fa-star-o"></i><%= de_op %></a>\r
+            <a class="close_menu if_op voice"><i class="fa fa-volume-up"></i><%= voice %></a>\r
+            <a class="close_menu if_op devoice"><i class="fa fa-volume-off"></i><%= de_voice %></a>\r
+            <a class="close_menu if_op kick"><i class="fa fa-times"></i><%= kick %></a>\r
+            <a class="close_menu if_op ban"><i class="fa fa-ban"></i><%= ban %></a>\r
+\r
+            <a class="close_menu query"><i class="fa fa-comment"></i><%= message %></a>\r
+            <a class="close_menu info"><i class="fa fa-info-circle"></i><%= info %></a>\r
+            <a class="close_menu ignore"><label><i><input type="checkbox" /></i><%= ignore %></label></a>\r
         </div>\r
     </script>\r
 \r
                                 <td>\r
                                     <div style="position:relative;">\r
                                         <input type="text" class="channel" id="server_select_channel">\r
-                                        <i class="icon-key" title="<%= channel_key %>"></i>\r
+                                        <i class="fa fa-key" title="<%= channel_key %>"></i>\r
                                     </div>\r
                                 </td>\r
                             </tr>\r
                             </tr>\r
                         </table>\r
 \r
-                        <a href="" onclick="return false;" class="show_more"><%= server_network %> <i class="icon-caret-down"></i></a>\r
+                        <a href="" onclick="return false;" class="show_more"><%= server_network %> <i class="fa fa-caret-down"></i></a>\r
                     </div>\r
 \r
 \r
                                 <%= timestamps %>\r
                             </label>\r
                         </div>\r
+                        <div class="checkbox">\r
+                            <label>\r
+                                <input data-setting="use_24_hour_timestamps" type="checkbox">\r
+                                <%= timestamp_24 %>\r
+                            </label>\r
+                        </div>\r
                         <div class="checkbox">\r
                             <label>\r
                                 <input data-setting="mute_sounds" type="checkbox">\r
                     <h6>Language</h6>\r
                     <div class="control-group">\r
                         <select data-setting="locale">\r
+                            <option value=""></li>\r
                             <% _.forEach(languages, function(lang) { %>\r
                                 <option value="<%= lang.tag %>"><%= lang.language %></li>\r
                             <% }); %>\r
 \r
 \r
     <script type="text/html" id="tmpl_channel_list">\r
-        <div>\r
-            <table style="margin:1em 2em;">\r
+        <div class="applet_chanlist">\r
+            <table>\r
                 <thead style="font-weight: bold;">\r
                     <tr>\r
-                        <td><%= channel_name %></td>\r
-                        <td><%= users %></td>\r
+                        <td><a class="channel_name_title"><%= channel_name %></a></td>\r
+                        <td><a class="users_title"><%= users %></a></td>\r
                         <td style="padding-left: 2em;"><%= topic %></td>\r
                     </tr>\r
                 </thead>\r
                 #kiwi .script_editor .se_toolbar button i { font-size:1.2em; margin-left:3px; }\r
             </style>\r
             <div class="script_editor" style="height:100%; position:relative;">\r
-                <div class="se_toolbar"><button class="btn_save"><%= save %><i class="icon-save"></i></button><span class="status"></span></div>\r
+                <div class="se_toolbar"><button class="btn_save"><%= save %><i class="fa fa-floppy-o"></i></button><span class="status"></span></div>\r
                 <div class="editor" style="position:absolute;top:50px;bottom:0px;left:0px;right:0px;"></div>\r
             </div>\r
         </div>\r
         }\r
     }\r
 \r
-    (function () {\r
-        var base_path = '<%base_path%>', // Entry path for the kiwi application\r
-            scripts = [],\r
-            opts = {\r
-                container: $('body'),\r
-                base_path: base_path,\r
-                settings_path: base_path + '/assets/settings.json'\r
-            };\r
+    /**\r
+     * Get alerted when a group of jobs have been completed.\r
+     * Eg. .registerJob('job1'); .registerJob('job2');\r
+     *     .onFinish(function(){ alert('Jobs finished!'); });\r
+     *     .finishJob('job1');\r
+     *     .finishJob('job2');\r
+     */\r
+    function JobManager() {\r
+        var completed_jobs = {  };\r
 \r
-        normalizeConsole();\r
+        // Functions to call once all jobs have completed\r
+        var completed_callbacks = [];\r
 \r
-        /**\r
-         * Job bootup manager\r
-         * Once all jobs have completed, call any registered completed functions\r
-         */\r
-        var jobs = new (function BootManager() {\r
-            var completed_jobs = {  };\r
 \r
-            // Functions to call once all jobs have completed\r
-            var completed_callbacks = [];\r
+        function callCompletedFunctions(fn) {\r
+            $.each(completed_callbacks, function(idx, fn) {\r
+                fn();\r
+            });\r
 \r
+            completed_callbacks = [];\r
+        };\r
 \r
-            function callCompletedFunctions(fn) {\r
-                $.each(completed_callbacks, function(idx, fn) {\r
-                    fn();\r
-                });\r
 \r
-                completed_callbacks = [];\r
-            };\r
+        this.finishJob = function(job_name) {\r
+            if (typeof completed_jobs[job_name] === 'undefined') {\r
+                return;\r
+            }\r
 \r
+            completed_jobs[job_name] = true;\r
 \r
-            this.finishJob = function(job_name) {\r
-                if (typeof completed_jobs[job_name] === 'undefined') {\r
-                    return;\r
+            // Check if all our jobs have completed\r
+            var all_jobs_completed = true;\r
+            $.each(completed_jobs, function(idx, completed) {\r
+                if (!completed) {\r
+                    all_jobs_completed = false;\r
+                    return false;\r
                 }\r
+            });\r
 \r
-                completed_jobs[job_name] = true;\r
+            if (all_jobs_completed) {\r
+                callCompletedFunctions();\r
+            }\r
+        };\r
 \r
-                // Check if all our jobs have completed\r
-                var all_jobs_completed = true;\r
-                $.each(completed_jobs, function(idx, completed) {\r
-                    if (!completed) {\r
-                        all_jobs_completed = false;\r
-                        return false;\r
-                    }\r
-                });\r
 \r
-                if (all_jobs_completed) {\r
-                    callCompletedFunctions();\r
-                }\r
-            };\r
+        this.onFinish = function(fn) {\r
+            completed_callbacks.push(fn);\r
+        };\r
 \r
 \r
-            this.onFinish = function(fn) {\r
-                completed_callbacks.push(fn);\r
+        this.registerJob = function(job_name) {\r
+            completed_jobs[job_name] = false;\r
+        };\r
+    }\r
+\r
+    (function () {\r
+        var base_path = '<%base_path%>', // Entry path for the kiwi application\r
+            scripts = [],\r
+            opts = {\r
+                container: $('body'),\r
+                base_path: base_path,\r
+                settings_path: base_path + '/assets/settings.json'\r
             };\r
 \r
+        normalizeConsole();\r
 \r
-            this.registerJob = function(job_name) {\r
-                completed_jobs[job_name] = false;\r
-            };\r
-        })();\r
+        /**\r
+         * Job bootup manager\r
+         * Once all jobs have completed, call any registered completed functions\r
+         */\r
+        var jobs = new JobManager();\r
 \r
 \r
         // Run after all dependancies have been loaded\r
         jobs.onFinish(function startApp() {\r
-            // Start the app\r
-            kiwi.start(opts, function() {\r
-                // Load any plugins\r
+            // Kiwi IRC version this is built from\r
+            kiwi.build_version = '<%build_version%>';\r
+\r
+            // Start the app after loading plugins\r
+            kiwi.init(opts, function() {\r
                 if (opts.client_plugins && opts.client_plugins.length > 0) {\r
+\r
+                    // Wait until all plugins are loaded before starting the app\r
+                    kiwi.plugins.once('loaded', function() {\r
+                        kiwi.start();\r
+                    });\r
+\r
                     _.each(opts.client_plugins, function (plugin_url) {\r
                         kiwi.plugins.load(plugin_url);\r
                     });\r
+\r
+                } else {\r
+\r
+                    // No plugins were needed so start the app\r
+                    kiwi.start();\r
                 }\r
             });\r
         });\r
 \r
         // If we're not interested in debug libs, start loading production files\r
         if (!getQueryVariable('debug')) {\r
-            scripts.push(['assets/libs/lodash.min.js']);\r
+            scripts.push(['assets/libs/lodash.min.js?t=<%build_time%>']);\r
             scripts.push([\r
-                'assets/libs/backbone.min.js',\r
-                'assets/libs/jed.js'\r
+                'assets/libs/backbone.min.js?t=<%build_time%>',\r
+                'assets/libs/jed.js?t=<%build_time%>'\r
             ]);\r
             scripts.push([\r
-                'assets/kiwi.min.js',\r
-                'assets/libs/engine.io.bundle.min.js'\r
+                'assets/kiwi.min.js?t=<%build_time%>',\r
+                'assets/libs/engine.io.bundle.min.js?t=<%build_time%>'\r
             ]);\r
 \r
             loadNextScript();\r