add markdown editor where apropriate

hacklabr · Sep 27, 2013 · ff18070 · ff18070
1 parent 4a46adf
commit ff18070
Show file tree

Hide file tree

Showing 6 changed files with 582 additions and 13 deletions.
diff --git a/forum/static/js/question.js b/forum/static/js/question.js
@@ -1,7 +1,7 @@
 (function (angular) {
     "use strict";
 
-    var app = angular.module('answer', ['ngRoute', 'ngResource', "ngCookies"]);
+    var app = angular.module('answer', ['ngRoute', 'ngResource', "ngCookies", "ngSanitize"]);
 
     // Uses the csrftoken from the cookie
     app.run(function ($http, $cookies) {
@@ -17,11 +17,17 @@
                 controller: 'AnswerCtrl'});
     }]);
 
-    app.controller('AnswerCtrl', ['$scope', '$window', 'Answer',
-        function ($scope, $window, Answer) {
-            var questionId = parseInt($window.question_id);
+    app.controller('AnswerCtrl', ['$scope', '$sce', '$window', 'Answer',
+        function ($scope, $sce, $window, Answer) {
+            var questionId = parseInt($window.question_id, 10);
             var answer_text = $scope.new_answer_text;
-            $scope.new_answer = Answer.create({question: questionId, text: answer_text});
+            $scope.editor_enabled = true;
+            if ($scope.new_answer_text != undefined){
+                $scope.new_answer = Answer.create({question: questionId, text: answer_text});
+                $scope.answer_html_text = $sce.trustAsHtml($window.converter.makeHtml($scope.new_answer.text));
+                $scope.editor_enabled = false;
+                $('#editor').hide();
+            }
     }]);
 
     app.factory('Answer', function($resource){
@@ -52,4 +58,5 @@ $(document).ready(function() {
     var converter1 = Markdown.getSanitizingConverter();
     var editor1 = new Markdown.Editor(converter1);
     editor1.run();
+    window.converter = converter1;
 });
diff --git a/forum/static/js/question_create.js b/forum/static/js/question_create.js
@@ -0,0 +1,5 @@
+$(document).ready(function() {
+    var converter1 = Markdown.getSanitizingConverter();
+    var editor1 = new Markdown.Editor(converter1);
+    editor1.run();
+});
diff --git a/forum/templates/forum.html b/forum/templates/forum.html
@@ -1,6 +1,7 @@
 {% extends 'base.html' %}
 {% load i18n %}
 {% load staticfiles %}
+{% load forum_markdown %}
 {% block content %}
         <!-- CONTAINER -->
         <div id="course-forum">
@@ -65,7 +66,7 @@ <h1 class="top"><i class="icon-double-angle-right"></i>{{ course.name }}</h1>
                             </div>
                             <div class="question">
                                 <p><a href="{% url 'forum_question' question.slug %}">{{ question.title }}</a></p>
-                                <p class="description">{{ question.text }}[...]</p>
+                                <p class="description">{{ question.text|my_markdown }}[...]</p>
                             </div>
                             <div class="author">
                                 Pergunta feita em {{ question.timestamp|date }} por <a href="">{{ question.user.username }}</a>

diff --git a/forum/templates/question-create.html b/forum/templates/question-create.html
@@ -2,6 +2,7 @@
 {% load i18n %}
 {% load staticfiles %}
 {% block content %}
+<script type="text/javascript" src="{% static 'js/question_create.js' %}" charset="utf-8"></script>
         <!-- CONTAINER -->
         <div id="course-forum">
             <!-- HEADER -->
@@ -36,16 +37,21 @@ <h1 class="top"><i class="icon-double-angle-right"></i> {{ course.name }}</h1>
                 <div class="row">
                     <div class="col-sm-9 col-lg-9">
                         <!-- QUESTION FORM -->
+
                         <div class="row">
                           <form class="col-lg-12 col-sm-12" action="{% url 'forum_question_create' course.slug %}" method="post">
                             {% csrf_token %}
                             {{ form.non_field_errors }}
                             <div class="form-group">
                               <input id="id-title" name="title" type="text" class="form-control" placeholder="Qual é a sua dúvida?">
                             </div>
-                            <div class="form-group">
-                              <textarea id="id-text" name="text" class="form-control" rows="4" placeholder="Descrição da sua dúvida"></textarea>
+                            <div class="wmd-panel">
+                                <div id="wmd-button-bar"></div>
+                                <div class="form-group">
+                                  <textarea id="wmd-input" name="text" class="form-control" rows="4" placeholder="Descrição da sua dúvida"></textarea>
+                                </div>
                             </div>
+                            <div id="wmd-preview" class="wmd-panel wmd-preview"></div>
                             <div class="form-group bottom">
                               <div class="row">
                                 <div class="col-lg-8 col-sm-8">

diff --git a/forum/templates/question.html b/forum/templates/question.html
@@ -1,6 +1,7 @@
 {% extends 'base.html' %}
 {% load i18n %}
 {% load staticfiles %}
+{% load forum_markdown %}
 {% block content %}
 
 <script type="text/javascript" src="{% static 'js/question.js' %}" charset="utf-8"></script>
@@ -45,7 +46,7 @@ <h1 class="top"><i class="icon-double-angle-right"></i> {{ question.course.name
     <!-- MAIN CONTENT -->
     <section id="main-content" class="container">
         <div class="row">
-            <div class="col-sm-9 col-lg-9" ng-app="answer">
+            <div class="col-sm-9 col-lg-9" ng-app="answer" ng-controller="AnswerCtrl">
                 <!-- QUESTION -->
                 <article class="question">
                     <header>
@@ -65,7 +66,7 @@ <h1>{{ question.title }}</h1>
                             </div>
                         </div>
                         <div class="question-body col-sm-10 col-lg-10">
-                            <p>{{ question.text }}</p>
+                            <p>{{ question.text|my_markdown }}</p>
                         </div><!-- .question-body -->
                     </div>
                 </article>
@@ -101,7 +102,7 @@ <h1>{{ question.answers.count }} Respostas:</h1>
                             </div>
 
                             <div class="answer-body col-sm-10 col-lg-10">
-                                <p>{{ answer.text }}</p>
+                                <p>{{ answer.text|my_markdown }}</p>
                             </div><!-- .answer-body -->
                         </div>
                     </article>
@@ -125,7 +126,7 @@ <h1>{{ question.answers.count }} Respostas:</h1>
                             </div>
 
                             <div class="answer-body col-sm-10 col-lg-10">
-                                <p>{{ new_answer.text }}</p>
+                                <span ng-bind-html="answer_html_text" ></span>
                             </div><!-- .answer-body -->
                         </div>
                     </script>
@@ -135,7 +136,7 @@ <h1>{{ question.answers.count }} Respostas:</h1>
                 <!-- END NEW ANSWER -->
                 <!-- END ANSWERS -->
                 <!-- YOUR ANSWER -->
-                <section class="your-answer">
+                <section class="your-answer" ng-show="editor_enabled" id="editor">
                     <header>
                         <h1>Sua Resposta</h1>
                     </header>