glowingbear-mainbox/index.html

317 lines
16 KiB
HTML
Raw Normal View History

2013-02-16 19:18:14 +01:00
<!DOCTYPE html>
<html ng-app="weechat" ng-cloak>
2013-02-16 18:49:20 +01:00
<head>
2013-10-09 17:53:25 +02:00
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title ng-bind-template="WeeChat {{ pageTitle}}"></title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
2013-10-06 12:34:41 +02:00
<link rel="shortcut icon" type="image/png" href="img/favicon.png" >
<link href="css/style.css" rel="stylesheet" media="screen">
2013-10-02 01:39:24 +02:00
<link href="css/glowingbear.css" rel="stylesheet" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-sanitize.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script type="text/javascript" src="js/localstorage.js"></script>
<script type="text/javascript" src="js/weechat.js"></script>
2013-10-27 00:44:48 +02:00
<script type="text/javascript" src="js/irc-utils.js"></script>
2013-02-16 19:18:14 +01:00
<script type="text/javascript" src="js/websockets.js"></script>
2013-10-08 02:42:19 +02:00
<script type="text/javascript" src="js/models.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/bindonce.js"></script>
<script type="text/javascript" src="js/favico-0.3.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
2013-02-16 18:49:20 +01:00
</head>
2013-10-11 16:24:25 +02:00
<body ng-controller="WeechatCtrl" ng-keydown="handleKeyPress($event)">
2013-10-09 17:53:25 +02:00
<div ng-hide="connected" class="container">
<h2>
2013-10-16 14:13:23 +02:00
<img alt="logo" src="img/favicon.png">
2013-10-09 17:53:25 +02:00
glowing bear
<small>
WeeChat web frontend
</small>
</h2>
2013-10-11 23:38:30 +02:00
<div class="alert alert-danger" ng-show="errorMessage">
<strong>Oh no!</strong> We cannot connect!
</div>
<div class="panel-group" id="accordion">
2013-10-22 13:26:35 +02:00
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Connection settings
</a>
</h4>
2013-02-16 19:18:14 +01:00
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<form class="form-signin" role="form">
<div class="form-group">
<label class="control-label" for="host">WeeChat relay hostname and port number</label>
<div class="input-group">
<input type="text" class="form-control monospace" id="host" ng-model="host" placeholder="Address">
<input type="text" class="form-control monospace" id="port" ng-model="port" placeholder="9001">
</div>
<div class="alert alert-danger" ng-show="passwordError">
Error wrong password
</div>
<label class="control-label" for="password">WeeChat relay password</label>
<input type="password" class="form-control monospace" id="password" ng-model="password" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox" class="checkbox" id="savepassword" ng-model="savepassword">
Save password in your browser
</label>
</div>
<div class="checkbox">
<label class="control-label " for="ssl">
<input type="checkbox" class="" id="ssl" ng-model="ssl">
Encryption. Read instructions for help
</label>
</div>
</div>
<div class="form-group">
<label class="control-label" for="port">Lines</label>
<input type="text" class="form-control monospace" id="lines" ng-model="lines" placeholder="40">
<p class="help-block">Enter number of lines to sync from WeeChat on connect</p>
</div>
2013-10-16 14:25:07 +02:00
<button class="btn btn-lg btn-primary" ng-click="connect()">Connect <i class="glyphicon glyphicon-chevron-right"></i></button>
</form>
</div>
</div>
</div>
2013-10-22 13:26:35 +02:00
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Usage instructions
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<h3>Configuring the relay</h3>
<div>To start using, please enable relay in your WeeChat client:
2013-10-26 08:36:06 +02:00
<pre>
/set relay.network.password yourpassword
/relay add weechat 9001
</pre>
<span class="label label-warning">WeeChat version 0.4.2 or higher is required.</span><br>
The communication goes directly between your browser and your weechat in clear text.
Connection settings are saved between sessions, including password, in your own browser.
<br>
<h3>Shortcuts</h3>
Glowing Bear has a few shortcuts:
<ul>
<li>ALT+n: Toggle nicklist</li>
<li>ALT+l: Focus on input bar</li>
<li>ALT-[0-9]: Focus on buffer</li>
<li>ALT-a: Focus on next buffer with activity</li>
</ul>
2013-10-22 13:26:35 +02:00
</div>
</div>
</div>
</div>
<div class="panel ">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Encryption instructions
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
If you check the encryption box, communication between browser and WeeChat will be encrypted.<br>
<strong>Note</strong>: Due to a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=594502">bug</a> encryption will not work in Firefox. You must also first visit the URL https://weechathost:relayport/ to accept the certificate</p>
If you want to use encrypted session you first have to set up the relay using SSL like this:
2013-10-26 08:36:06 +02:00
<pre>
$ mkdir -p ~/.weechat/ssl
$ cd ~/.weechat/ssl
$ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out relay.pem
</pre>
If WeeChat is already running, you can reload the certificate and private key with command:
2013-10-26 08:36:06 +02:00
<pre>
/relay sslcertkey
/relay add ssl.weechat 8000
</pre>
2013-10-21 15:51:05 +02:00
</div>
</div>
</div>
<div class="panel" ng-hide="isinstalled">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
Install app
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<p>If you have a very new Firefox you can install the frontend as an app. Click the button to install.</p>
<button class="btn btn-lg btn-primary" ng-click="install()">Install app <i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
</div>
</div>
</div>
2013-10-11 23:38:30 +02:00
</div>
</div>
2013-10-09 17:53:25 +02:00
<div class="content" ng-show="connected">
<div id="topbar" class="horizontal-line">
<div class="brand">
<img alt="brand" src="img/favicon.png" title="Connected to {{ host }}:{{ port}}">
2013-10-16 14:13:23 +02:00
</div>
<button ng-show="debugMode" ng-click="countWatchers()">Count Watchers</button>
2013-10-28 15:13:11 +01:00
<div class="title" ng-bind-html="activeBuffer().title | linky:'_blank'"></div>
<div class="actions pull-right vertical-line-left">
<div class="dropdown pull-left">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-cog"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right">
<li class="">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="onlyUnread">
Only show unread
</label>
</div>
</form>
</li>
2013-10-17 10:50:29 +02:00
<li class="">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="notimestamp">
Hide timestamps
</label>
</div>
</form>
</li>
<li class="">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="noembed">
Hide embedded content by default
2013-10-17 10:50:29 +02:00
</label>
</div>
</form>
</li>
<li class="">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="hotlistsync">
Sync hotlist with WeeChat
</label>
</div>
</form>
</li>
<li class="">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="nonicklist">
Hide nicklist
</label>
</div>
</form>
</li>
<li class="">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="orderbyserver">
Order channels by server
</label>
</div>
</form>
</li>
<li class="">
<form class="form-inline" role="form">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="debugMode">
Debug Mode
</label>
</div>
</form>
</li>
</ul>
</div>
2013-10-16 14:25:07 +02:00
<a ng-click="disconnect()">
<i class="glyphicon glyphicon-remove"></i>
</a>
</div>
2013-10-16 14:13:23 +02:00
</div>
2013-10-16 23:27:47 +02:00
<div id="sidebar" class="vertical-line">
2013-10-11 00:51:18 +02:00
<ul class="nav nav-pills nav-stacked">
<li class="bufferfilter">
<form role="form">
<input class="form-control monospace" type="text" id="bufferFilter" ng-model="search" ng-keydown="handleSearchBoxKey($event)" placeholder="Search">
</form>
</li>
<li class="buffer" ng-class="{'active': content.active }" ng-repeat="(key, content) in buffers | toArray | filter:{fullName:search} | filter:hasUnread | orderBy:predicate">
2013-10-11 00:51:18 +02:00
<a href="#" ng-click="setActiveBuffer(content.id)" title="{{ content.fullName }}">
<span class="badge pull-right" ng-hide="content.notification" ng-if="content.unread" ng-bind="content.unread"></span>
<span class="badge pull-right danger" ng-show="content.notification" ng-bind="content.notification"></span>
{{ content.indent(predicate) }}{{ content.shortName }}<span ng-hide="content.shortName">{{ content.fullName }}</span>
2013-10-11 00:51:18 +02:00
</a>
</li>
</ul>
</div>
<div id="bufferlines" class="monospace" ng-class="{'withnicklist': showNicklist}">
<div id="nicklist" ng-show="showNicklist" class="vertical-line-left">
<ul class="nicklistgroup list-unstyled" ng-repeat="group in activeBuffer().nicklist">
<li class="" ng-repeat="nick in group.nicks|orderBy:'name'" ng-click="openQuery(nick.name)">
<a ng-click="nickAction(nick)"><span ng-class="nick.prefixClasses">{{nick.prefix}}</span><span ng-class="nick.nameClasses">{{nick.name}}</span></a>
</li>
</ul>
</div>
2013-10-12 02:37:11 +02:00
<table>
<tbody bindonce ng-repeat="bufferline in (bufferlines = activeBuffer().lines)">
<tr class="bufferline">
<td bo-hide="notimestamp" class="time">
<span class="date" bo-class="{'repeated-time': bufferline.shortTime==bufferlines[$index-1].shortTime}">
<span class="cof-chat_time cob-chat_time coa-chat_time" bo-text="bufferline.date|date:'HH'"></span><span class="cof-chat_time_delimiters cob-chat_time_delimiters coa-chat_time_delimiters">:</span><span class="cof-chat_time cob-chat_time coa-chat_time" bo-text="bufferline.date|date:'mm'">{{ bufferline.date | date:'mm' }}</span>
2013-10-12 02:37:11 +02:00
</span>
</td>
<td class="prefix"><span bindonce ng-repeat="part in bufferline.prefix" bo-class="part.classes" bo-html="part.text"></span></td>
2013-10-12 11:49:14 +02:00
<td class="message">
<span bindonce ng-repeat="part in bufferline.content" class="text" bo-class="part.classes" bo-html="part.text|linky:'_blank'"></span>
2013-10-08 15:55:07 +02:00
<div bindonce ng-repeat="metadata in bufferline.metadata">
<div bo-show="metadata.visible">
<button class="btn btn-primary pull-right" bo-click="metadata.visible = false" bo-text="'Hide ' + metadata.name">Hide {{ metadata.name }}</button>
<div bo-html="metadata.content"></div>
2013-10-12 02:37:11 +02:00
</div>
<div bo-hide="metadata.visible">
<button class="btn pull-right" bo-class="{'btn-warning': metadata.nsfw, 'btn-primary': !metadata.nsfw}" ng-click="metadata.visible = true">Show {{ metadata.name }}</button>
2013-10-12 02:37:11 +02:00
</div>
</div>
</td>
</tr>
<tr class="readmarker" ng-if="activeBuffer().lastSeen==$index">
2013-10-12 20:44:40 +02:00
<td colspan="3">
<hr id="readmarker">
2013-10-12 20:44:40 +02:00
</td>
</tr>
2013-10-12 02:37:11 +02:00
</tbody>
</table>
</div>
2013-10-12 02:37:11 +02:00
<div class="push"></div>
</div>
<div id="footer" ng-show="connected">
<div class="navbar navbar-inverse navbar-fixed-bottom" ng-class="{'withnicklist': showNicklist}">
2013-10-27 21:41:27 +01:00
<div input-bar></div>
</div>
</body>
2013-02-16 18:49:20 +01:00
</html>