remove django-markdown and handle preview manually

accounts/templatetags/accounts_tags.py

@@ -10,3 +10,7 @@ register = template.Library()
 @register.inclusion_tag('accounts/tags/delete_modal.html')
 def delete_modal():
     return {}
+
+@register.inclusion_tag('accounts/tags/delete_modal_js.html')
+def delete_modal_js():
+    return {}

ponytracker/settings.py

@@ -48,7 +48,6 @@ INSTALLED_APPS = (
     'django.contrib.humanize',
     'django.contrib.sites',
 
-    'django_markdown',
     'bootstrap3_datetime',
     'bootstrap3',
     'colorful',

ponytracker/urls.py

@@ -4,8 +4,6 @@ from django.contrib import admin
 urlpatterns = patterns('',
     # django admin
     url(r'^django-admin/', include(admin.site.urls)),
-    # markdown preview
-    url(r'^markdown/', include('django_markdown.urls')),
     # tracker
     url(r'^', include('tracker.urls')),
     # permissions managment

requirements.txt

@@ -1,5 +1,5 @@
 django
-django-markdown
 django-colorful
 django-bootstrap3
 django-bootstrap3-datetimepicker
+markdown

static/js/jquery.cookie.js

@@ -0,0 +1,117 @@
+/*!
+ * jQuery Cookie Plugin v1.4.1
+ * https://github.com/carhartl/jquery-cookie
+ *
+ * Copyright 2013 Klaus Hartl
+ * Released under the MIT license
+ */
+(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		// AMD
+		define(['jquery'], factory);
+	} else if (typeof exports === 'object') {
+		// CommonJS
+		factory(require('jquery'));
+	} else {
+		// Browser globals
+		factory(jQuery);
+	}
+}(function ($) {
+
+	var pluses = /\+/g;
+
+	function encode(s) {
+		return config.raw ? s : encodeURIComponent(s);
+	}
+
+	function decode(s) {
+		return config.raw ? s : decodeURIComponent(s);
+	}
+
+	function stringifyCookieValue(value) {
+		return encode(config.json ? JSON.stringify(value) : String(value));
+	}
+
+	function parseCookieValue(s) {
+		if (s.indexOf('"') === 0) {
+			// This is a quoted cookie as according to RFC2068, unescape...
+			s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+		}
+
+		try {
+			// Replace server-side written pluses with spaces.
+			// If we can't decode the cookie, ignore it, it's unusable.
+			// If we can't parse the cookie, ignore it, it's unusable.
+			s = decodeURIComponent(s.replace(pluses, ' '));
+			return config.json ? JSON.parse(s) : s;
+		} catch(e) {}
+	}
+
+	function read(s, converter) {
+		var value = config.raw ? s : parseCookieValue(s);
+		return $.isFunction(converter) ? converter(value) : value;
+	}
+
+	var config = $.cookie = function (key, value, options) {
+
+		// Write
+
+		if (value !== undefined && !$.isFunction(value)) {
+			options = $.extend({}, config.defaults, options);
+
+			if (typeof options.expires === 'number') {
+				var days = options.expires, t = options.expires = new Date();
+				t.setTime(+t + days * 864e+5);
+			}
+
+			return (document.cookie = [
+				encode(key), '=', stringifyCookieValue(value),
+				options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+				options.path    ? '; path=' + options.path : '',
+				options.domain  ? '; domain=' + options.domain : '',
+				options.secure  ? '; secure' : ''
+			].join(''));
+		}
+
+		// Read
+
+		var result = key ? undefined : {};
+
+		// To prevent the for loop in the first place assign an empty array
+		// in case there are no cookies at all. Also prevents odd result when
+		// calling $.cookie().
+		var cookies = document.cookie ? document.cookie.split('; ') : [];
+
+		for (var i = 0, l = cookies.length; i < l; i++) {
+			var parts = cookies[i].split('=');
+			var name = decode(parts.shift());
+			var cookie = parts.join('=');
+
+			if (key && key === name) {
+				// If second argument (value) is a function it's a converter...
+				result = read(cookie, value);
+				break;
+			}
+
+			// Prevent storing a cookie that we couldn't decode.
+			if (!key && (cookie = read(cookie)) !== undefined) {
+				result[name] = cookie;
+			}
+		}
+
+		return result;
+	};
+
+	config.defaults = {};
+
+	$.removeCookie = function (key, options) {
+		if ($.cookie(key) === undefined) {
+			return false;
+		}
+
+		// Must not alter options, thus extending a fresh object...
+		$.cookie(key, '', $.extend({}, options, { expires: -1 }));
+		return !$.cookie(key);
+	};
+
+}));

templates/accounts/group_details.html

@@ -3,11 +3,6 @@
 {% load staticfiles %}
 {% load humanize %}
 {% load bootstrap3 %}
-{% load accounts_tags %}
-
-{% block css %}
-<link rel="stylesheet" href="{% static 'css/jquery-ui.css' %}">
-{% endblock %}
 
 {% block grouptab %} class="active"{% endblock %}
 
@@ -69,14 +64,14 @@
   </ul>
 </div>
 
-{% delete_modal %}
+{% endblock %}
 
-<script src="{% static 'js/jquery-ui.min.js' %}"></script>
+{% block js_end %}
+{{ block.super }}
 <script type="text/javascript">
 $('input[name="user"]').autocomplete({
   source: "{% url 'add-user-to-group' group.id %}"
 });
 </script>
 <script src="{% static 'js/accounts.js' %}"></script>
-
 {% endblock %}

templates/accounts/profile.html

@@ -1,6 +1,5 @@
 {% extends 'base.html' %}
 
-{% load django_markdown %}
 {% load bootstrap3 %}
 
 {% block profiletab %} class="active"{% endblock %}

templates/accounts/tags/delete_modal.html

@@ -1,5 +1,3 @@
-{% load staticfiles %}
-
 <div class="modal" id="confirm-delete" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog modal-sm">
     <div class="panel panel-danger">
@@ -17,5 +15,3 @@
     </div>
   </div>
 </div>
-
-<script src="{% static 'js/delete_modal.js' %}"></script>

templates/accounts/tags/delete_modal_js.html

@@ -0,0 +1,3 @@
+{% load staticfiles %}
+
+<script src="{% static 'js/delete_modal.js' %}"></script>

templates/accounts/team_details.html

@@ -3,11 +3,6 @@
 {% load staticfiles %}
 {% load humanize %}
 {% load bootstrap3 %}
-{% load accounts_tags %}
-
-{% block css %}
-<link rel="stylesheet" href="{% static 'css/jquery-ui.css' %}">
-{% endblock %}
 
 {% block teamtab %} class="active"{% endblock %}
 
@@ -94,9 +89,10 @@
   </div>
 </div>
 
-{% delete_modal %}
+{% endblock %}
 
-<script src="{% static 'js/jquery-ui.min.js' %}"></script>
+{% block js_end %}
+{{ block.super }}
 <script type="text/javascript">
 $('input[name="user"]').autocomplete({
   source: "{% url 'add-user-to-team' team.id %}"
@@ -107,5 +103,4 @@ $('input[name="group"]').autocomplete({
 </script>
 <script src="{% static 'js/accounts.js' %}"></script>
 <script src="{% static 'js/tabswitch.js' %}"></script>
-
 {% endblock %}

templates/accounts/user_details.html

@@ -3,11 +3,6 @@
 {% load staticfiles %}
 {% load humanize %}
 {% load bootstrap3 %}
-{% load accounts_tags %}
-
-{% block css %}
-<link rel="stylesheet" href="{% static 'css/jquery-ui.css' %}">
-{% endblock %}
 
 {% block usertab %} class="active"{% endblock %}
 
@@ -109,9 +104,10 @@
   </div>
 </div>
 
-{% delete_modal %}
+{% endblock %}
 
-<script src="{% static 'js/jquery-ui.min.js' %}"></script>
+{% block js_end %}
+{{ block.super }}
 <script type="text/javascript">
 $('input[name="group"]').autocomplete({
   source: "{% url 'add-group-to-user' user.id %}"
@@ -122,5 +118,4 @@ $('input[name="team"]').autocomplete({
 </script>
 <script src="{% static 'js/accounts.js' %}"></script>
 <script src="{% static 'js/tabswitch.js' %}"></script>
-
 {% endblock %}

templates/accounts/user_list.html

@@ -2,7 +2,6 @@
 
 {% load staticfiles %}
 {% load humanize %}
-{% load accounts_tags %}
 {% load bootstrap3 %}
 
 {% block usertab %} class="active"{% endblock %}
@@ -38,6 +37,4 @@
   {% endfor %}
 </ul>
 
-{% delete_modal %}
-
 {% endblock %}

templates/base.html

@@ -23,8 +23,6 @@
     <link href="{% static 'css/ponytracker.css' %}" rel="stylesheet">
     {% block css %}{% endblock %}
 
-    <script src="{% bootstrap_jquery_url %}"></script>
-    {% bootstrap_javascript %}
     {% block js %}{% endblock %}
 
     {% block media %}{% endblock %}
@@ -100,6 +98,8 @@
 
     </div> <!-- /container -->
 
+    <script src="{% bootstrap_jquery_url %}"></script>
+    {% bootstrap_javascript %}
     <script src="{% static 'js/ponytracker.js' %}"></script>
     {% block js_end %}{% endblock %}
   </body>

templates/base_admin.html

@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 
-{% load django_markdown %}
+{% load accounts_tags %}
 
 {% block admintab %} class="active"{% endblock %}
 
@@ -24,4 +24,11 @@
 
 {% block tabcontent %}{% endblock %}
 
+{% delete_modal %}
+
+{% endblock %}
+
+{% block js_end %}
+{{ block.super }}
+{% delete_modal_js %}
 {% endblock %}

templates/base_project.html

@@ -61,3 +61,8 @@
 {% delete_modal %}
 
 {% endblock %}
+
+{% block js_end %}
+{{ block.super }}
+{% delete_modal_js %}
+{% endblock %}

templates/permissions/global_perm_edit.html

@@ -1,6 +1,5 @@
 {% extends 'base_admin.html' %}
 
-{% load django_markdown %}
 {% load permissions_filters %}
 {% load bootstrap3 %}
 {% load staticfiles %}
@@ -50,5 +49,6 @@
 {% endblock %}
 
 {% block js_end %}
+{{ block.super }}
 <script src="{% static 'js/perm.js' %}"></script>
 {% endblock %}

templates/permissions/global_perm_list.html

@@ -1,7 +1,5 @@
 {% extends 'base_admin.html' %}
 
-{% load django_markdown %}
-{% load accounts_tags %}
 {% load permissions_filters %}
 {% load staticfiles %}
 
@@ -67,10 +65,9 @@
 </div>
 {% endif %}
 
-{% delete_modal %}
-
 {% endblock %}
 
 {% block js_end %}
+{{ block.super }}
 <script src="{% static 'js/perm.js' %}"></script>
 {% endblock %}

templates/permissions/project_perm_edit.html

@@ -1,6 +1,5 @@
 {% extends 'base_project.html' %}
 
-{% load django_markdown %}
 {% load permissions_filters %}
 {% load bootstrap3 %}
 {% load staticfiles %}
@@ -50,5 +49,6 @@
 {% endblock %}
 
 {% block js_end %}
+{{ block.super }}
 <script src="{% static 'js/perm.js' %}"></script>
 {% endblock %}

templates/permissions/project_perm_list.html

@@ -1,7 +1,5 @@
 {% extends 'base_project.html' %}
 
-{% load django_markdown %}
-{% load accounts_tags %}
 {% load permissions_filters %}
 {% load staticfiles %}
 
@@ -53,5 +51,6 @@
 {% endblock %}
 
 {% block js_end %}
+{{ block.super }}
 <script src="{% static 'js/perm.js' %}"></script>
 {% endblock %}

templates/tracker/comment_edit.html

@@ -1,10 +1,6 @@
 {% extends 'tracker/issue_base.html' %}
 
-{% load bootstrap3 %}
+{% load staticfiles %}
-
-{% block media %}
-{{ form.media }}
-{% endblock media %}
 
 {% block tabcontent %}
 
@@ -19,15 +15,37 @@
         {% endif %}
       </h1>
     </div>
-    <form action="" method="post" role="form">
+    <form method="post" role="form">
-      {% bootstrap_form form %}
       {% csrf_token %}
-      {% buttons %}
+      <ul class="nav nav-tabs" role="tablist">
-        <button type="submit" class="btn btn-primary">Submit</button>
+        <li class="active"><a href="#editor" role="tab" data-toggle="tab">Editor</a></li>
+        <li><a href="#preview" role="tab" data-toggle="tab">Preview</a></li>
+      </ul>
+      <div class="tab-content">
+        <div class="tab-pane active" id="editor" style="max-height: 220px;">
+          <div class="form-group">
+            <textarea style="width: 100%; height: 220px;" id="markdown-content" name="comment" required>{{ form.comment.value }}</textarea>
+          </div>
+        </div>
+        <div class="tab-pane well" id="preview" style="min-height: 200px; magin: 0;">
+          <div id="preview-content"></div>
+        </div>
+        <div class="form-group">
+          <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span> Submit</button>
           <a href="{% url 'show-issue' project.name issue.id %}" class="btn btn-default">Cancel</a>
-      {% endbuttons %}
+        </div>
+      </div>
     </form>
   </div>
 </div>
 
 {% endblock %}
+
+{% block js_end %}
+{{ block.super }}
+<script type="text/javascript">
+var markdown_preview_url = "{% url 'markdown' %}";
+</script>
+<script src="{% static 'js/jquery.cookie.js' %}"></script>
+<script src="{% static 'js/markdown-preview.js' %}"></script>
+{% endblock %}

templates/tracker/issue_details.html

@@ -1,8 +1,9 @@
 {% extends 'tracker/issue_base.html' %}
 
 {% load humanize %}
-{% load django_markdown %}
 {% load tracker_tags %}
+{% load tracker_filters %}
+{% load staticfiles %}
 
 {% block media %}
 {{ form.media }}
@@ -76,8 +77,18 @@
         {% if perm.create_comment %}
         <form action="{% url 'add-comment' project.name issue.id %}" method="post" role="form">
           {% csrf_token %}
+          <ul class="nav nav-tabs" role="tablist">
+            <li class="active"><a href="#editor" role="tab" data-toggle="tab">Editor</a></li>
+            <li><a href="#preview" role="tab" data-toggle="tab">Preview</a></li>
+          </ul>
+          <div class="tab-content">
+            <div class="tab-pane active" id="editor" style="max-height: 220px;">
               <div class="form-group">
-            {{ form.comment }}
+                <textarea style="width: 100%; height: 220px;" id="markdown-content" name="comment" required></textarea>
+              </div>
+            </div>
+            <div class="tab-pane well" id="preview" style="min-height: 200px; magin: 0;">
+              <div id="preview-content"></div>
             </div>
             <div class="text-center">
               {% if perm.manage_issue %}
@@ -86,10 +97,11 @@
               {% else %}
               <a href="{% url 'close-issue' project.name issue.id %}" class="btn btn-default"><span class="glyphicon glyphicon-ok-circle"></span> Close this issue</a>
               {% endif %}
-            {% endif %}
               <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span> Add a comment</button>
             </div>
+          </div>
         </form>
+        {% endif %}
         {% elif request.user.is_authenticated %}
         Sorry, you are not allowed to comment this issue.
         {% else %}
@@ -207,3 +219,12 @@
 </div>
 
 {% endblock %}
+
+{% block js_end %}
+{{ block.super }}
+<script type="text/javascript">
+var markdown_preview_url = "{% url 'markdown' %}";
+</script>
+<script src="{% static 'js/jquery.cookie.js' %}"></script>
+<script src="{% static 'js/markdown-preview.js' %}"></script>
+{% endblock %}

templates/tracker/issue_edit.html

@@ -1,10 +1,7 @@
 {% extends 'tracker/issue_base.html' %}
 
 {% load bootstrap3 %}
-
+{% load staticfiles %}
-{% block media %}
-{{ form.media }}
-{% endblock media %}
 
 {% block tabcontent %}
 
@@ -19,19 +16,42 @@
         {% endif %}
       </h1>
     </div>
-    <form action="" method="post" role="form">
+    <form method="post" role="form">
-      {% bootstrap_form form %}
       {% csrf_token %}
-      {% buttons %}
+      {% bootstrap_field form.title %}
+      <ul class="nav nav-tabs" role="tablist">
+        <li class="active"><a href="#editor" role="tab" data-toggle="tab">Editor</a></li>
+        <li><a href="#preview" role="tab" data-toggle="tab">Preview</a></li>
+      </ul>
+      <div class="tab-content">
+        <div class="tab-pane active" id="editor" style="max-height: 220px;">
+          <div class="form-group">
+            <textarea style="width: 100%; height: 220px;" id="markdown-content" name="description">{{ form.description.value }}</textarea>
+          </div>
+        </div>
+        <div class="tab-pane well" id="preview" style="min-height: 200px; magin: 0;">
+          <div id="preview-content"></div>
+        </div>
+        <div class="form-group">
           <button type="submit" class="btn btn-primary">Submit</button>
           {% if issue %}
           <a href="{% url 'show-issue' project.name issue.id %}" class="btn btn-default">Cancel</a>
           {% else %}
           <a href="{% url 'list-issue' project.name %}" class="btn btn-default">Cancel</a>
           {% endif %}
-      {% endbuttons %}
+        </div>
+      </div>
     </form>
   </div>
 </div>
 
 {% endblock %}
+
+{% block js_end %}
+{{ block.super }}
+<script type="text/javascript">
+var markdown_preview_url = "{% url 'markdown' %}";
+</script>
+<script src="{% static 'js/jquery.cookie.js' %}"></script>
+<script src="{% static 'js/markdown-preview.js' %}"></script>
+{% endblock %}

templates/tracker/project_list.html

@@ -1,7 +1,5 @@
 {% extends 'base.html' %}
 
-{% load django_markdown %}
-
 {% block content %}
 
 <div class="page-header">

templates/tracker/tags/issue_details.html

@@ -0,0 +1,26 @@
+<form action="{% url 'add-comment' project.name issue.id %}" method="post" role="form">
+  {% csrf_token %}
+  <ul class="nav nav-tabs" role="tablist">
+    <li class="active"><a href="#editor" role="tab" data-toggle="tab">Editor</a></li>
+    <li><a href="#preview" role="tab" data-toggle="tab">Preview</a></li>
+  </ul>
+  <div class="tab-content">
+    <div class="tab-pane active" id="editor" style="max-height: 220px;">
+      <div class="form-group">
+        <textarea style="width: 100%; height: 220px;" id="id_comment" name="comment" required></textarea>
+      </div>
+    </div>
+    <div class="tab-pane well" id="preview" style="min-height: 200px; magin: 0;">
+      <div id="preview-content"></div>
+    </div>
+    <div class="text-center">
+      {% if perm.manage_issue %}
+      {% if issue.closed %}
+      <a href="{% url 'reopen-issue' project.name issue.id %}" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> Reopen this issue</a>
+      {% else %}
+      <a href="{% url 'close-issue' project.name issue.id %}" class="btn btn-default"><span class="glyphicon glyphicon-ok-circle"></span> Close this issue</a>
+      {% endif %}
+      <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span> Add a comment</button>
+    </div>
+  </div>
+</form>

tracker/forms.py

@@ -1,7 +1,6 @@
 from django import forms
 
 from bootstrap3_datetime.widgets import DateTimePicker
-from django_markdown.widgets import MarkdownWidget
 
 from tracker.models import *
 
@@ -23,11 +22,11 @@ class ProjectForm(forms.ModelForm):
 
 class IssueForm(forms.Form):
     title = forms.CharField(max_length=128)
-    description = forms.CharField(widget=MarkdownWidget, required=False)
+    description = forms.CharField(widget=forms.Textarea, required=False)
 
 
 class CommentForm(forms.Form):
-    comment = forms.CharField(widget=MarkdownWidget)
+    comment = forms.CharField(widget=forms.Textarea)
 
 
 class LabelForm(forms.ModelForm):

tracker/static/js/markdown-preview.js

@@ -0,0 +1,25 @@
+var csrftoken = $.cookie('csrftoken');
+
+function csrfSafeMethod(method) {
+  // these HTTP methods do not require CSRF protection
+  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+}
+$.ajaxSetup({
+  beforeSend: function(xhr, settings) {
+    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
+      xhr.setRequestHeader("X-CSRFToken", csrftoken);
+    }
+  }
+});
+
+$('a[href="#preview"]').on("show.bs.tab", function (e) {
+  $('#preview-content').html('Loading preview...');
+  var comment = $('#markdown-content').val();
+  $.post(markdown_preview_url, {'data': comment})
+    .done(function(data, textStatus) {
+      $('#preview-content').html(data);
+    })
+    .fail(function () {
+      $('#preview-content').html('Sorry, an error occured.');
+    });
+})

tracker/templatetags/tracker_filters.py

@@ -0,0 +1,11 @@
+from django import template
+
+from tracker.utils import markdown_to_html
+
+
+register = template.Library()
+
+
+@register.filter
+def markdown(value):
+    return markdown_to_html(value)

tracker/urls.py

@@ -2,6 +2,7 @@ from django.conf.urls import url, include
 
 
 urlpatterns = [
+    url(r'^markdown/$', 'tracker.views.markdown_preview', name='markdown'),
     # Administration: redirect on first available admin page
     url(r'^admin/$', 'tracker.views.admin', name='admin'),
     # Settings

tracker/utils.py

@@ -0,0 +1,8 @@
+from django.utils.safestring import mark_safe
+
+from markdown import markdown
+
+
+def markdown_to_html(value):
+    # set extensions here if needed
+    return mark_safe(markdown(value, safe_mode='escape'))

tracker/views.py

@@ -5,7 +5,9 @@ from django.contrib.auth.decorators import login_required
 from django.views.decorators.http import require_http_methods
 from django.conf import settings
 from django.core.urlresolvers import reverse
+from django.http import HttpResponse
 
+from tracker.utils import markdown_to_html
 from tracker.forms import *
 from tracker.models import *
 from tracker.notifications import *
@@ -16,6 +18,16 @@ from permissions.decorators import project_perm_required
 import shlex
 
 
+####################
+# Markdown preview #
+####################
+
+@login_required
+def markdown_preview(request):
+    content = request.POST.get('data', '')
+    return HttpResponse(markdown_to_html(content))
+
+
 #########
 # Admin #
 #########