client/src/index.html.tmpl

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   6 <base target="_blank">
   7
   8 <title> Kiwi IRC </title>
   9
  10 <link rel="shortcut icon" href="<%base_path%>/assets/img/favicon.ico">
  11
  12 <link rel="stylesheet" type="text/css" href="<%base_path%>/assets/css/style.css" />
  13 <link rel="stylesheet" type="text/css" href="<%base_path%>/assets/css/font-awesome.min.css" />
  14 <!--[if IE 7]>
  15 <link rel="stylesheet" type="text/css" href="/kiwi/assets/css/font-awesome-ie7.css" />
  16 <![endif]-->
  17 </head>
  18 <body>
  19
  20     <script type="text/html" id="tmpl_application">
  21         <div id="kiwi" class="theme_relaxed">
  22             <div class="toolbar">
  23                 <div class="app_tools">
  24                     <ul class="main">
  25                         <li class="settings"><i class="icon-cogs" title="Settings"></i></li>
  26                         <li><a href="https://kiwiirc.com/" target="_blank"><img src="<%base_path%>/assets/img/ico.png" alt="KiwiIRC" title="KiwiIRC" /></a></li>
  27                     </ul>
  28                 </div>
  29
  30                 <div class="tabs"></div>
  31
  32                 <div class="topic">
  33                     <div contenteditable="true"></div>
  34                 </div>
  35
  36                 <div class="status_message"></div>
  37             </div>
  38
  39             <div class="memberlists_resize_handle"></div>
  40
  41             <div class="panels">
  42                 <div class="panel_container container1"></div>
  43             </div>
  44
  45             <div class="memberlists disabled"></div>
  46
  47             <div class="controlbox">
  48                 <div class="input">
  49                     <span class="nick"> </span>
  50                     <div class="input_wrap"><textarea class="inp"></textarea></div>
  51                     <div class="input_tools"></div>
  52                 </div>
  53             </div>
  54         </div>
  55     </script>
  56
  57
  58     <script type="text/html" id="tmpl_channel_info">
  59         <div class="channel_info">
  60             <b class="channel_url"><a href=""></a></b>
  61
  62             <form>
  63                 <div class="control-group channel_info_modes">
  64                     <label>
  65                         <input type="checkbox" name="channel_mute" class="channel-mode" data-mode="m" />
  66                         Moderated chat
  67                     </label>
  68                     <label>
  69                         <input type="checkbox" name="channel_invite" class="channel-mode" data-mode="i" />
  70                         Invite only
  71                     </label>
  72                     <label>
  73                         <input type="checkbox" name="channel_topic" class="channel-mode" data-mode="t" />
  74                         Only operators can change the topic
  75                     </label>
  76                     <label>
  77                         <input type="checkbox" name="channel_external_messages" class="channel-mode" data-mode="n" />
  78                         Block messages from outside this channel
  79                     </label>
  80                 </div>
  81
  82                 <div class="control-group">
  83                     <label>
  84                         Password
  85                         <input type="text" name="channel_key" class="channel-mode" data-mode="k" />
  86                     </label>
  87                 </div>
  88
  89
  90                 <div class="control-group channel-banlist">
  91                     <button class="show_banlist">Show banlist</button> <span class="banlist-status"></span>
  92                     <table>
  93                         <thead>
  94                             <tr>
  95                                 <td>Bank Mask</td>
  96                                 <td>Added By</td>
  97                                 <td>Date Added</td>
  98                                 <td></td>
  99                             </tr>
 100                         </thead>
 101                         <tbody>
 102                         </tbody>
 103                     </table>
 104                 </div>
 105             </form>
 106         </div>
 107     </script>
 108
 109
 110     <script type="text/html" id="tmpl_userbox">
 111         <div class="userbox">
 112             <a class="close_menu if_op op"><i class="icon-star"></i><%= op %></a>
 113             <a class="close_menu if_op deop"><i class="icon-star-empty"></i><%= de_op %></a>
 114             <a class="close_menu if_op voice"><i class="icon-volume-up"></i><%= voice %></a>
 115             <a class="close_menu if_op devoice"><i class="icon-volume-off"></i><%= de_voice %></a>
 116             <a class="close_menu if_op kick"><i class="icon-remove"></i><%= kick %></a>
 117             <a class="close_menu if_op ban"><i class="icon-ban-circle"></i><%= ban %></a>
 118
 119             <a class="close_menu query"><i class="icon-comment"></i><%= message %></a>
 120             <a class="close_menu info"><i class="icon-info-sign"></i><%= info %></a>
 121             <a class="close_menu slap"><i class="icon-user-md"></i><%= slap %></a>
 122         </div>
 123     </script>
 124
 125     <script type="text/html" id="tmpl_nickchange">
 126         <form class="nickchange">
 127             <label for="nickchange"><%= new_nick %>:</label> <input type="text" mozactionhint="done" autocomplete="off" spellcheck="false"/> <button><%= change %></button> <a class="cancel"><%= cancel %></a>
 128         </form>
 129     </script>
 130
 131     <script type="text/html" id="tmpl_new_connection_info">
 132         <div style="margin:1em 20px;">
 133             <img src="<%base_path%>/assets/img/ico.png" alt="KiwiIRC Logo" title="Kiwi IRC" style="display:block; margin:0 auto;"/> <br />
 134             <p style="font-style:italic;">A <strong>hand-crafted IRC client</strong> that you can enjoy. Designed to be used <strong>easily</strong> and <strong>freely</strong>.</p>
 135
 136             <p style="font-size:0.9em;margin-top:2em;">Peek at the <a href="https://www.kiwiirc.com/">Kiwi IRC homepage</a> for more information or to find out how to embed it on your own website. Looking for source code? Try the <a href="http://github.com/prawnsalad/KiwiIRC/">GitHub</a> page. This network of people may not be associated with Kiwi IRC itself.</p>
 137         </div>
 138     </script>
 139
 140     <script type="text/html" id="tmpl_server_select">
 141         <div class="server_select">
 142
 143             <div class="side_panel" style="position:absolute;top:0px;left:320px;">
 144                 <div class="content" style="position:relative;width:300px;">
 145                 </div>
 146             </div>
 147
 148             <div class="server_details" style="position:relative;width:320px;">
 149                 <div class="status"><%= think_nick %></div>
 150
 151                 <form>
 152                     <div class="basic">
 153                         <table>
 154                             <tr class="nick">
 155                                 <td><label for="server_select_nick"><%= nickname %></label></td>
 156                                 <td><input type="text" class="nick" id="server_select_nick"></td>
 157                             </tr>
 158
 159                             <tr class="have_pass">
 160                                 <td colspan="2">
 161                                     <label for="server_select_show_pass"><%= have_password %></label> <input type="checkbox" id="server_select_show_pass" style="width:auto;" />
 162                                 </td>
 163                             </tr>
 164
 165                             <tr class="pass">
 166                                 <td><label for="server_select_password"><%= password %></label></td>
 167                                 <td><input type="password" class="password" id="server_select_password"></td>
 168                             </tr>
 169
 170                             <tr class="channel">
 171                                 <td><label for="server_select_channel"><%= channel %></label></td>
 172                                 <td>
 173                                     <div style="position:relative;">
 174                                         <input type="text" class="channel" id="server_select_channel">
 175                                         <i class="icon-key" title="<%= channel_key %>"></i>
 176                                     </div>
 177                                 </td>
 178                             </tr>
 179
 180                             <tr class="have_key">
 181                                 <td colspan="2">
 182                                     <label for="server_select_show_channel_key"><%= require_key %></label> <input type="checkbox" id="server_select_show_channel_key" style="width:auto;" />
 183                                 </td>
 184                             </tr>
 185
 186                             <tr class="key">
 187                                 <td><label for="server_select_channel_key"><%= key %></label></td>
 188                                 <td><input type="password" class="channel_key" id="server_select_channel_key"></td>
 189                             </tr>
 190
 191                             <tr class="start">
 192                                 <td></td>
 193                                 <td><button type="submit"><%= start %></button></td>
 194                             </tr>
 195                         </table>
 196
 197                         <a href="" onclick="return false;" class="show_more"><%= server_network %> <i class="icon-caret-down"></i></a>
 198                     </div>
 199
 200
 201                     <div class="more">
 202                         <table>
 203                             <tr class="server">
 204                                 <td><label for="server_select_server"><%= server %></label></td>
 205                                 <td><input type="text" class="server" id="server_select_server"></td>
 206                             <tr>
 207
 208                             <tr class="port">
 209                                 <td><label for="server_select_port"><%= port %></label></td>
 210                                 <td><input type="text" class="port" id="server_select_port"></td>
 211                             </tr>
 212
 213                             <tr class="ssl">
 214                                 <td><label for="server_select_ssl">SSL</label></td>
 215                                 <td><input type="checkbox" class="ssl" id="server_select_ssl"></td>
 216                             </tr>
 217                         </table>
 218                     </div>
 219                 </form>
 220
 221                 <a class="kiwi_logo" href="https://kiwiirc.com/" target="_blank">
 222                     <h1><span><%= powered_by %></span> <img src="<%base_path%>/assets/img/ico.png" alt="KiwiIRC Logo" title="Kiwi IRC" /></h1>
 223                 </a>
 224             </div>
 225         </div>
 226     </script>
 227
 228     <script type="text/html" id="tmpl_applet_settings">
 229         <div class="settings_container">
 230             <form>
 231                 <section>
 232                     <h6>Theme</h6>
 233                     <div class="control-group">
 234                         <div class="thumbnails">
 235                             <a class="thumbnail" data-setting="theme" data-value="relaxed" href="#">
 236                                 <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: #e7e7e7;"></div></div>
 237                                 <div class="caption"><u>Relaxed</u></div>
 238                             </a>
 239                             <a class="thumbnail" data-setting="theme" data-value="mini" href="#">
 240                                 <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: #fff;"></div></div>
 241                                 <div class="caption"><u>Mini</u></div>
 242                             </a>
 243                             <a class="thumbnail" data-setting="theme" data-value="cli" href="#">
 244                                 <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: #222;"></div></div>
 245                                 <div class="caption"><u>CLI</u></div>
 246                             </a>
 247                             <a class="thumbnail" data-setting="theme" data-value="basic" href="#">
 248                                 <div class="thumbnail_wrapper"><div class="theme_color" style="background-color: #e7e7e7;"></div></div>
 249                                 <div class="caption"><u>Basic</u></div>
 250                             </a>
 251                         </div>
 252                     </div>
 253                 </section>
 254
 255                 <section>
 256                     <h6>Channels</h6>
 257                     <div class="control-group">
 258                         <div class="radio">
 259                             <label>
 260                                 <input type="radio" name="channel_list_style" data-setting="channel_list_style" value="tabs">
 261                                 <%= tabs %>
 262                             </label>
 263                         </div>
 264                         <div class="radio">
 265                             <label>
 266                                 <input type="radio" name="channel_list_style" data-setting="channel_list_style" value="list">
 267                                 <%= list %><small class="text-muted">(<%= large_amounts_of_chans %>)</small>
 268                             </label>
 269                         </div>
 270                     </div>
 271                 </section>
 272
 273                 <section>
 274                     <h6>Chat window</h6>
 275                     <div class="control-group">
 276                         <div class="checkbox">
 277                             <label>
 278                                 <input data-setting="show_joins_parts" type="checkbox">
 279                                 <%= join_part %>
 280                             </label>
 281                         </div>
 282                         <div class="checkbox">
 283                             <label>
 284                                 <input data-setting="count_all_activity" type="checkbox">
 285                                 <%= count_all_activity %>
 286                             </label>
 287                         </div>
 288                         <div class="checkbox">
 289                             <label>
 290                                 <input data-setting="show_timestamps" type="checkbox">
 291                                 <%= timestamps %>
 292                             </label>
 293                         </div>
 294                         <div class="checkbox">
 295                             <label>
 296                                 <input data-setting="mute_sounds" type="checkbox">
 297                                 <%= mute %>
 298                             </label>
 299                         </div>
 300                         <div class="checkbox">
 301                             <label>
 302                                 <input data-setting="show_emoticons" type="checkbox">
 303                                 <%= emoticons %>
 304                             </label>
 305                         </div>
 306                         <label>
 307                             <input data-setting="scrollback" class="input-small" type="text" size="4" pattern="\d*">
 308                             <span><%= scroll_history %></span>
 309                         </label>
 310                     </div>
 311                 </section>
 312
 313                 <section class="language">
 314                     <h6>Language</h6>
 315                     <div class="control-group">
 316                         <select data-setting="locale">
 317                             <% _.forEach(languages, function(lang) { %>
 318                                 <option value="<%= lang.tag %>"><%= lang.language %></li>
 319                             <% }); %>
 320                         </select>
 321                         <br>
 322                         <small><%= locale_restart_needed %></small>
 323                     </div>
 324                 </section>
 325
 326                 <section class="protocol_handler">
 327                     <h6><%= default_client %></h6>
 328                     <div class="control-group">
 329                         <button class="register_protocol"><%= make_default %></button>
 330                         <br>
 331                         <small><%= default_note %></small>
 332                     </div>
 333                 </section>
 334
 335                 <section class="notification_enabler">
 336                     <h6><%= html5_notifications %></h6>
 337                     <div class="control-group">
 338                         <button class="enable_notifications"><%= enable_notifications %></button>
 339                     </div>
 340                 </section>
 341             </form>
 342         </div>
 343     </script>
 344
 345
 346     <script type="text/html" id="tmpl_channel_list">
 347         <div>
 348             <table style="margin:1em 2em;">
 349                 <thead style="font-weight: bold;">
 350                     <tr>
 351                         <td><%= channel_name %></td>
 352                         <td><%= users %></td>
 353                         <td style="padding-left: 2em;"><%= topic %></td>
 354                     </tr>
 355                 </thead>
 356                 <tbody style="vertical-align: top;">
 357                 </tbody>
 358             </table>
 359         </div>
 360     </script>
 361
 362
 363     <script type="text/html" id="tmpl_script_editor">
 364         <div style="height:100%;">
 365             <style>
 366                 #kiwi .script_editor .se_toolbar { padding: 10px 20px; }
 367                 #kiwi .script_editor .se_toolbar span.status { margin-left:2em; font-style:italic; }
 368                 #kiwi .script_editor .se_toolbar button { height:30px; padding:0 1em; }
 369                 #kiwi .script_editor .se_toolbar button i { font-size:1.2em; margin-left:3px; }
 370             </style>
 371             <div class="script_editor" style="height:100%; position:relative;">
 372                 <div class="se_toolbar"><button class="btn_save"><%= save %><i class="icon-save"></i></button><span class="status"></span></div>
 373                 <div class="editor" style="position:absolute;top:50px;bottom:0px;left:0px;right:0px;"></div>
 374             </div>
 375         </div>
 376     </script>
 377
 378
 379 <script src="<%base_path%>/assets/libs/jquery-1.10.2.min.js"></script>
 380 <script>
 381 /* Script loader (https://github.com/ded/script.js) */
 382 (function(a,b,c){typeof c["module"]!="undefined"&&c.module.exports?c.module.exports=b():typeof c["define"]!="undefined"&&c["define"]=="function"&&c.define.amd?define(a,b):c[a]=b()})("$script",function(){function p(a,b){for(var c=0,d=a.length;c<d;++c)if(!b(a[c]))return j;return 1}function q(a,b){p(a,function(a){return!b(a)})}function r(a,b,i){function o(a){return a.call?a():d[a]}function t(){if(!--n){d[m]=1,l&&l();for(var a in f)p(a.split("|"),o)&&!q(f[a],o)&&(f[a]=[])}}a=a[k]?a:[a];var j=b&&b.call,l=j?b:i,m=j?a.join(""):b,n=a.length;return setTimeout(function(){q(a,function(a){if(h[a])return m&&(e[m]=1),h[a]==2&&t();h[a]=1,m&&(e[m]=1),s(!c.test(a)&&g?g+a+".js":a,t)})},0),r}function s(c,d){var e=a.createElement("script"),f=j;e.onload=e.onerror=e[o]=function(){if(e[m]&&!/^c|loade/.test(e[m])||f)return;e.onload=e[o]=null,f=1,h[c]=2,d()},e.async=1,e.src=c,b.insertBefore(e,b.firstChild)}var a=document,b=a.getElementsByTagName("head")[0],c=/^https?:\/\//,d={},e={},f={},g,h={},i="string",j=!1,k="push",l="DOMContentLoaded",m="readyState",n="addEventListener",o="onreadystatechange";return!a[m]&&a[n]&&(a[n](l,function t(){a.removeEventListener(l,t,j),a[m]="complete"},j),a[m]="loading"),r.get=s,r.order=function(a,b,c){(function d(e){e=a.shift(),a.length?r(e,d):r(e,b,c)})()},r.path=function(a){g=a},r.ready=function(a,b,c){a=a[k]?a:[a];var e=[];return!q(a,function(a){d[a]||e[k](a)})&&p(a,function(a){return d[a]})?b():!function(a){f[a]=f[a]||[],f[a][k](b),c&&c(e)}(a.join("|")),r},r},this)
 383
 384
 385     // Avoid `console` errors in browsers that lack a console. (https://github.com/h5bp/html5-boilerplate)
 386     function normalizeConsole() {
 387         var method;
 388         var noop = function () {};
 389         var methods = [
 390             'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
 391             'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
 392             'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
 393             'timeStamp', 'trace', 'warn'
 394         ];
 395         var length = methods.length;
 396         var console = (window.console = window.console || {});
 397
 398         while (length--) {
 399             method = methods[length];
 400
 401             // Only stub undefined methods.
 402             if (!console[method]) {
 403                 console[method] = noop;
 404             }
 405         }
 406     };
 407
 408     function getQueryVariable(variable) {
 409         var query = window.location.search.substring(1);
 410         var vars = query.split('&');
 411         for (var i = 0; i < vars.length; i++) {
 412             var pair = vars[i].replace(/\+/g, '%20').split('=');
 413             if (decodeURIComponent(pair[0]) == variable) {
 414                 return decodeURIComponent(pair[1]);
 415             }
 416         }
 417     }
 418
 419     (function () {
 420         var base_path = '<%base_path%>', // Entry path for the kiwi application
 421             scripts = [],
 422             opts = {
 423                 container: $('body'),
 424                 base_path: base_path,
 425                 settings_path: base_path + '/assets/settings.json'
 426             };
 427
 428         normalizeConsole();
 429
 430         /**
 431          * Job bootup manager
 432          * Once all jobs have completed, call any registered completed functions
 433          */
 434         var jobs = new (function BootManager() {
 435             var completed_jobs = {  };
 436
 437             // Functions to call once all jobs have completed
 438             var completed_callbacks = [];
 439
 440
 441             function callCompletedFunctions(fn) {
 442                 $.each(completed_callbacks, function(idx, fn) {
 443                     fn();
 444                 });
 445
 446                 completed_callbacks = [];
 447             };
 448
 449
 450             this.finishJob = function(job_name) {
 451                 if (typeof completed_jobs[job_name] === 'undefined') {
 452                     return;
 453                 }
 454
 455                 completed_jobs[job_name] = true;
 456
 457                 // Check if all our jobs have completed
 458                 var all_jobs_completed = true;
 459                 $.each(completed_jobs, function(idx, completed) {
 460                     if (!completed) {
 461                         all_jobs_completed = false;
 462                         return false;
 463                     }
 464                 });
 465
 466                 if (all_jobs_completed) {
 467                     callCompletedFunctions();
 468                 }
 469             };
 470
 471
 472             this.onFinish = function(fn) {
 473                 completed_callbacks.push(fn);
 474             };
 475
 476
 477             this.registerJob = function(job_name) {
 478                 completed_jobs[job_name] = false;
 479             };
 480         })();
 481
 482
 483         // Run after all dependancies have been loaded
 484         jobs.onFinish(function startApp() {
 485             // Start the app
 486             kiwi.start(opts, function() {
 487                 // Load any plugins
 488                 if (opts.client_plugins && opts.client_plugins.length > 0) {
 489                     _.each(opts.client_plugins, function (plugin_url) {
 490                         kiwi.plugins.load(plugin_url);
 491                     });
 492                 }
 493             });
 494         });
 495
 496
 497         // Load each script
 498         jobs.registerJob('load_scripts');
 499         var cur_script = 0;
 500         function loadNextScript () {
 501             var to_load,
 502                 base = base_path + '/';
 503
 504             // Start the kiwi app if all scripts have been loaded
 505             if (cur_script === scripts.length) {
 506                 jobs.finishJob('load_scripts');
 507                 return;
 508             }
 509
 510             if (typeof scripts[cur_script] === 'string') {
 511                 to_load = base + scripts[cur_script];
 512             } else {
 513                 to_load = [];
 514                 for(var idx in scripts[cur_script]) {
 515                     to_load.push(base + scripts[cur_script][idx]);
 516                 }
 517             }
 518
 519             $script(to_load, loadNextScript);
 520
 521             cur_script++;
 522         }
 523
 524         // If we're not interested in debug libs, start loading production files
 525         if (!getQueryVariable('debug')) {
 526             scripts.push(['assets/libs/lodash.min.js']);
 527             scripts.push([
 528                 'assets/libs/backbone.min.js',
 529                 'assets/libs/jed.js'
 530             ]);
 531             scripts.push([
 532                 'assets/kiwi.min.js',
 533                 'assets/libs/engine.io.bundle.min.js'
 534             ]);
 535
 536             loadNextScript();
 537         }
 538
 539         // Load application settings
 540         jobs.registerJob('load_settings');
 541         $.getJSON(opts.settings_path, function (data) {
 542             opts.server_settings = data.server_settings;
 543             opts.client_plugins = data.client_plugins;
 544             opts.translations = data.translations;
 545             opts.locale = data.locale;
 546
 547             if (typeof data.kiwi_server !== 'undefined')
 548                 opts.kiwi_server = data.kiwi_server;
 549
 550             jobs.finishJob('load_settings');
 551
 552             // If debugging, grab the debug scripts and load them
 553             if (getQueryVariable('debug')) {
 554                 scripts = scripts.concat(data.scripts);
 555                 loadNextScript();
 556             }
 557         });
 558
 559         jobs.registerJob('window_load');
 560         window.onload = function() {
 561             jobs.finishJob('window_load');
 562         };
 563     })();
 564 </script>
 565 </body>
 566 </html>