underscore and templates for activity. issue #51

averrin · Aug 19, 2013 · c389e08 · c389e08
1 parent 59e2bac
commit c389e08
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 38 deletions.
diff --git a/emergent/settings.py b/emergent/settings.py
@@ -104,6 +104,7 @@
 
 BOWER_INSTALLED_APPS = (
     'bootstrap',
+    'underscore',
 )
 
 AUTH_USER_MODEL = 'rpg.Hero'

diff --git a/static/js/activity.js b/static/js/activity.js
@@ -1,18 +1,41 @@
+function chat_send(editor){
+        $.post("/activity/send", {message: editor.exportFile()}, function(){
+            editor.importFile();
+        });
+}
+
 $(function(){
-var editor = new EpicEditor({
 
-theme: {
-    base: "http://"+location.host+'/static/epiceditor/themes/base/epiceditor.css',
-    preview: "http://"+location.host+'/static/epiceditor/themes/preview/preview-dark.css',
-    editor: "http://"+location.host+'/static/epiceditor/themes/editor/epic-dark.css'
-  },
-focusOnLoad: true
-}).load();
+    var chat_message = _.template("<div class='chat_message'><strong><a href='/users/<%= user %>'><%= user %></a></strong> (<%= now %>): <br> <%= message %></div>")
 
-$("#msg_form").on("submit", function(e){
-	e.preventDefault();
-	$.post("/activity/send", {message: editor.exportFile()}, function(){})
-	editor.importFile()
-	return false;
-})
+    var pusher = new Pusher('6bb5412badf09454aa87');
+        var channel = pusher.subscribe('activity');
+        channel.bind('my_event', function(data) {
+            console.log(data);
+            var now = new Date().toLocaleTimeString();
+            data.now = now;
+            $("#events").append(chat_message(data));
+        });
+
+    var editor = new EpicEditor({
+
+    theme: {
+        base: "http://"+location.host+'/static/epiceditor/themes/base/epiceditor.css',
+        preview: "http://"+location.host+'/static/epiceditor/themes/preview/preview-dark.css',
+        editor: "http://"+location.host+'/static/epiceditor/themes/editor/epic-dark.css'
+      },
+    focusOnLoad: true
+    }).load();
+
+    $("#msg_form").on("submit", function(e){
+        e.preventDefault();
+        chat_send(editor);        
+        return false;
+    });
+
+    //TODO: shortcut in editor
+    Mousetrap.bind(['ctrl+enter'], function(e) {
+        console.log("Ctrl + Enter");
+        chat_send(editor);
+    });
 });
diff --git a/static/js/main.js b/static/js/main.js
@@ -1,17 +1 @@
 $(".level_info").tooltip({placement: "bottom", html: true})
-
-var pusher = new Pusher('6bb5412badf09454aa87');
-    var channel = pusher.subscribe('activity');
-    channel.bind('my_event', function(data) {
-        console.log(data)
-        var now = new Date().toLocaleTimeString();
-        $("#events").append(data.user + ' (' + now + "): " + data.message + "<br>");
-        $("#msg_text").val("")
-    });
-
-$("#msg_form").on("submit", function(e){
-	e.preventDefault();
-	$.post("/activity/send", {message:$('#msg_text').val()}, function(){})
-	$('#msg_text').val('')
-	return false;
-})
diff --git a/templates/activity/stream.html b/templates/activity/stream.html
@@ -2,14 +2,21 @@
 {% load static %}
 
 {% block page %}
-<link rel="stylesheet" href="{% static 'chat.css' %}"> 
-
-<h3>Websocket test:</h3>
+    <link rel="stylesheet" href="{% static 'chat.css' %}"> 
+
     <form id="msg_form">
-	{% csrf_token %}
+        {% csrf_token %}
         <div id="epiceditor"></div>
-	<input type="submit" value="Send" class="btn btn-default" id="chat_send"></input>
+        <input type="submit" value="Send" class="btn btn-default" id="chat_send"></input>
     </form>
+
+    <h4>Messages</h4>
     <div id="events"></div>    
 
 {% endblock page %}
+
+{%  block js_includes %}
+    <script type="text/javascript" src="{% static 'epiceditor/js/epiceditor.min.js' %}"></script>
+    <script type="text/javascript" src="{% static 'js/vendor/mousetrap.min.js' %}"></script>
+    <script src="{% static 'js/activity.js' %}"></script>
+{% endblock js_includes %}
diff --git a/templates/base.html b/templates/base.html
@@ -60,14 +60,14 @@
     <script type="text/javascript" src='{% static 'jquery/jquery.js' %}'></script>
     <script type="text/javascript" src='{% static 'bootstrap/dist/js/bootstrap.js' %}'></script>
     <script type="text/javascript" src='{% static 'notify.js' %}'></script>
-    <script src="{% static 'epiceditor/js/epiceditor.min.js' %}"></script>
     <script type='text/javascript' src='http://js.pusher.com/2.1/pusher.min.js'></script>
+    <script type="text/javascript" src='{% static 'underscore/underscore.js' %}'></script>
 
     <script type="text/javascript" src='{% static 'js/init.js' %}'></script>
     <script type="text/javascript" src='{% static 'js/rpg.js' %}'></script>
     <script type="text/javascript" src='{% static 'js/main.js' %}'></script>
-
-    <script src="{% static 'js/activity.js' %}"></script>
+    
+    {%  block js_includes %}{% endblock js_includes %}
 
 
     <script>