mirror of https://github.com/reiseburo/offtopic
Introduce handlebars.js to clean up some of the front-end view generation
This commit is contained in:
parent
a66f508ea6
commit
d15f1adb5e
|
@ -2,3 +2,4 @@
|
||||||
<link rel="stylesheet" href="/css/bootstrap.min.css">
|
<link rel="stylesheet" href="/css/bootstrap.min.css">
|
||||||
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
|
<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
|
||||||
<script src="/js/bootstrap.min.js"></script>
|
<script src="/js/bootstrap.min.js"></script>
|
||||||
|
<script src="/js/handlebars.min-latest.js"></script>
|
||||||
|
|
|
@ -33,6 +33,20 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{=<% %>=}}
|
||||||
|
<script id="message-display-template" type="text/x-handlebars-template">
|
||||||
|
<div id="{{message_id}}" class="list-group-item message-container">
|
||||||
|
<code>{{topic}}:{{partition}}</code>
|
||||||
|
<span class="offset">(offset: {{offset}})</span>
|
||||||
|
<pre class="pre-scrollable message-raw">{{raw}}</pre>
|
||||||
|
<br/>
|
||||||
|
<div class="message-b64" id="{{message_id}}_b64" style="display: none;">
|
||||||
|
<pre class="pre-scrollable message-b64">{{b64}}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
<%={{ }}=%>
|
||||||
|
|
||||||
<script src="/js/ws.js"></script>
|
<script src="/js/ws.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
watchTopic("{{name}}");
|
watchTopic("{{name}}");
|
||||||
|
@ -57,4 +71,5 @@
|
||||||
watchTopic("{{name}}");
|
watchTopic("{{name}}");
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{{> footer}}
|
{{> footer}}
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,3 +1,5 @@
|
||||||
|
var messageDisplayTemplate = Handlebars.compile($('#message-display-template').html());
|
||||||
|
|
||||||
function watchTopic(name) {
|
function watchTopic(name) {
|
||||||
if (!window.WebSocket) {
|
if (!window.WebSocket) {
|
||||||
alert("This won't work in your browser. Try Chrome or a gooder version of Safari.");
|
alert("This won't work in your browser. Try Chrome or a gooder version of Safari.");
|
||||||
|
@ -15,13 +17,15 @@ function watchTopic(name) {
|
||||||
var data = $.parseJSON(event.data);
|
var data = $.parseJSON(event.data);
|
||||||
var messages = $('#messages');
|
var messages = $('#messages');
|
||||||
var el_id = Math.floor(Math.random() * 1000000);
|
var el_id = Math.floor(Math.random() * 1000000);
|
||||||
var el = ["<div id='" + el_id + "' class='list-group-item'>",
|
messages.prepend(messageDisplayTemplate({
|
||||||
"<code>" + data.topic + ":" + data.partition + "</code>",
|
message_id: el_id,
|
||||||
"<span class='offset'>(offset: " + data.offset + ")</span>",
|
topic: data.topic,
|
||||||
'<pre class="pre-scrollable message-raw">' + data.raw + '</pre>',
|
partition: data.partition,
|
||||||
"<br/><div class='message-b64' id='" + el_id + "_b64'",
|
offset: data.offset,
|
||||||
"style='display:none;'><pre>" + data.b64 + "</pre></div>"].join("\n");
|
raw: data.raw,
|
||||||
messages.prepend(el);
|
b64: data.b64
|
||||||
|
}));
|
||||||
|
|
||||||
$("#" + el_id).click(function(ev) {
|
$("#" + el_id).click(function(ev) {
|
||||||
$("#"+el_id+'_b64').toggle();
|
$("#"+el_id+'_b64').toggle();
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue