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

@@ -142,8 +142,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

@@ -27,6 +27,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

@@ -59,13 +59,27 @@ 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'))},