Configure MarkItUp editors from a script after document ready

Rather than using inline scripts, just apply some attributes to the
widget, so we can locate it later in the DOM.

This means jQuery doesn't have to be loaded before the MarkItUpWidget or
markitup_editor tag is rendered on a page, all scripts can be loaded in
the document foot.

Fixes: zsiciarz#25

README.rst

@@ -141,8 +141,7 @@ If you prefer to link CSS and Javascript from different locations, the
 ``markitup_media`` tag can be replaced with two separate tags,
 ``markitup_css`` and ``markitup_js``. ``markitup_js`` accepts a
 parameter to suppress jQuery inclusion, just like
-``markitup_media``. (Note that jQuery must be included in your
-template before the ``markitup_editor`` tag is used).
+``markitup_media``.
 
 Last, use the ``markitup_editor`` template tag to apply the MarkItUp!
 editor to a textarea in your page. It accepts one argument, the HTML

markitup/static/markitup/django-markitup.js

@@ -0,0 +1,31 @@
+'use strict';
+(function($) {
+  // Configure a MarkItUp editor on element
+  // Config comes from data attributes on config
+  function configure_markitup_editor(element, config) {
+    var preview_url = config.attr('data-preview-url');
+    var auto_preview = config.attr('data-auto-preview') == '1';
+    if (!element.hasClass("markItUpEditor")) {
+      if (preview_url) {
+        mySettings["previewParserPath"] = preview_url;
+      }
+      element.markItUp(mySettings);
+    }
+    if (auto_preview) {
+      $('a[title="Preview"]').trigger('mouseup');
+    }
+  };
+
+  $(function() {
+    $('.django-markitup-widget').each(function(index) {
+      var element = $(this);
+      configure_markitup_editor(element, element);
+    });
+
+    $('.django-markitup-editor-config').each(function(index) {
+      var config = $(this);
+      var element = $(config.attr('data-element'));
+      configure_markitup_editor(element, config);
+    });
+  });
+})(jQuery || django.jQuery);

markitup/templates/markitup/editor.html

@@ -1,12 +1,4 @@
-<script type="text/javascript">
-(function($) {
-$(document).ready(function() {
-  var element = $("#{{ textarea_id }}");
-  if(!element.hasClass("markItUpEditor")) {
-    {% if preview_url %}mySettings["previewParserPath"] = "{{ preview_url }}";{% endif %}
-    element.markItUp(mySettings);
-  }
-  {% if AUTO_PREVIEW %}$('a[title="Preview"]').trigger('mouseup');{% endif %}
-});
-})(jQuery);
-</script>
+<div class="django-markitup-editor-config" style="display: none"
+     data-element="#{{ textarea_id }}"
+     data-preview-url="{{ preview_url }}"
+     data-auto-preview="{{ AUTO_PREVIEW|yesno:"1,0" }}"></div>

markitup/templates/markitup/include_js.html

@@ -4,3 +4,4 @@
 <script type="text/javascript" src="{{ AJAXCSRF_JS }}"></script>
 <script type="text/javascript" src="{{ MARKITUP_JS }}"></script>
 <script type="text/javascript" src="{{ MARKITUP_SET }}/set.js"></script>
+<script type="text/javascript" src="{{ DJANGO_MARKITUP_JS }}"></script>

markitup/templatetags/markitup_tags.py

@@ -23,6 +23,7 @@ def _get_markitup_context():
         'MARKITUP_SKIN': absolute_url(settings.MARKITUP_SKIN).rstrip('/'),
         'MARKITUP_JS': absolute_url('markitup/jquery.markitup.js'),
         'AJAXCSRF_JS': absolute_url('markitup/ajax_csrf.js'),
+        'DJANGO_MARKITUP_JS': absolute_url('markitup/django-markitup.js'),
         }
     if settings.JQUERY_URL is not None:
         context['JQUERY_URL'] = absolute_url(settings.JQUERY_URL)

markitup/widgets.py

@@ -3,9 +3,7 @@
 import posixpath
 from django import forms
 from django.contrib.admin.widgets import AdminTextareaWidget
-from django.core.urlresolvers import NoReverseMatch, reverse
-from django.template.loader import render_to_string
-from django.utils.safestring import mark_safe
+from django.core.urlresolvers import NoReverseMatch, reverse_lazy
 from markitup import settings
 from markitup.util import absolute_url
 
@@ -55,36 +53,33 @@ def __init__(self, attrs=None,
         if auto_preview is None:
             auto_preview = settings.MARKITUP_AUTO_PREVIEW
         self.auto_preview = auto_preview
+
+        try:
+            preview_url = reverse_lazy('markitup_preview')
+        except NoReverseMatch:
+            preview_url = ""
+
+        attrs = attrs or {}
+        classes = attrs.get('class', '').split()
+        attrs['class'] = ' '.join(classes + ['django-markitup-widget'])
+        attrs['data-preview-url'] = preview_url
+        if auto_preview:
+            attrs['data-auto-preview'] = '1'
+
         super(MarkItUpWidget, self).__init__(attrs)
 
     def _media(self):
         js_media = [absolute_url(settings.JQUERY_URL)] if settings.JQUERY_URL is not None else []
         js_media = js_media + [absolute_url('markitup/ajax_csrf.js'),
                                absolute_url('markitup/jquery.markitup.js'),
-                               posixpath.join(self.miu_set, 'set.js')]
+                               posixpath.join(self.miu_set, 'set.js'),
+                               absolute_url('markitup/django-markitup.js')]
         return forms.Media(
             css={'screen': (posixpath.join(self.miu_skin, 'style.css'),
                             posixpath.join(self.miu_set, 'style.css'))},
             js=js_media)
     media = property(_media)
 
-    def render(self, name, value, attrs=None):
-        html = super(MarkItUpWidget, self).render(name, value, attrs)
-
-        final_attrs = self.build_attrs(attrs)
-
-        try:
-            preview_url = reverse('markitup_preview')
-        except NoReverseMatch:
-            preview_url = ""
-
-        html += render_to_string('markitup/editor.html',
-                                 {'textarea_id': final_attrs['id'],
-                                 'AUTO_PREVIEW': self.auto_preview,
-                                 'preview_url': preview_url})
-
-        return mark_safe(html)
-
 
 class AdminMarkItUpWidget(MarkItUpWidget, AdminTextareaWidget):
     """