Commits

mitar committed a362a89

Added XHR markup previewing when editing.

Comments (0)

Files changed (4)

cmsplugin_markup/cms_plugins.py

 from django.conf import settings
 
+from django import http
+from django import shortcuts
+from django.contrib import admin
+
+from cms.models import pluginmodel
+
+from cmsplugin_markup.utils import markup
+
 from django.utils.translation import ugettext as _
 from cms.plugin_base import CMSPluginBase
 from cms.plugin_pool import plugin_pool
             })
         return context
 
+    def get_plugin_urls(self):
+        from django.conf.urls.defaults import patterns, url
+
+        urls = super(MarkupPlugin, self).get_plugin_urls()
+        preview_urls = patterns('',
+            url(r'^preview/$', admin.site.admin_view(self.preview), name='markup_preview'),
+        )
+
+        return preview_urls + urls
+
+    def preview(self, request):
+        if request.method != 'POST':
+            return http.HttpResponseNotAllowed(['POST'])
+        
+        if not shortcuts.get_object_or_404(pluginmodel.CMSPlugin, pk=request.POST.get('plugin_id')).placeholder.has_change_permission(request):
+            raise http.Http404
+        
+        return http.HttpResponse(markup.markup_parser(request.POST.get('text'), request.POST.get('markup')))
+
 plugin_pool.register_plugin(MarkupPlugin)

cmsplugin_markup/static/cmsplugin_markup/markup.js

+// Automatic preview through XHR
+// Based on Trac version, http://trac.edgewall.org/
+
+(function($) {
+  // Enable automatic previewing to <textarea> elements.
+  //
+  // Arguments:
+  //  - `href`: URL to be called for fetching the preview data.
+  //  - `args`: arguments to be passed with the XHR.
+  //  - `update`: the function that is called with the preview results. It
+  //              is called with the textarea, the text that was rendered and
+  //              the rendered text.
+  $.fn.autoPreview = function(href, args, update) {
+    if (auto_preview_timeout <= 0)
+      return this;
+    var timeout = auto_preview_timeout * 1000;
+    return this.each(function() {
+      var timer = null;
+      var updating = false;
+      var textarea = this;
+      var data = {};
+      for (var key in args)
+        data[key] = args[key];
+      data["text"] = textarea.value;
+      
+      // Request a preview through XHR
+      function request() {
+        var text = textarea.value;
+        if (!updating && (text != data["text"])) {
+          updating = true;
+          data["text"] = text;
+          $.ajax({
+            type: "POST", url: href, data: data, dataType: "html",
+            success: function(data) {
+              updating = false;
+              update(textarea, text, data);
+              if (textarea.value != text)
+                timer = setTimeout(request, timeout);
+            },
+            error: function(req, err, exc) {
+              updating = false;
+            }
+          });
+        }
+      }
+      
+      // Trigger a request after the given timeout
+      function trigger() {
+        if (!updating) {
+          if (timer)
+            clearTimeout(timer);
+          timer = setTimeout(request, timeout);
+        }
+        return true;
+      }
+      
+      $(this).keydown(trigger).keypress(trigger).blur(request);
+    });
+  }
+})(jQuery);
+
+(function ($){
+  $(document).ready(function(){
+      $.fn.cmsPatchCSRF();
+  });
+})(jQuery);
+
+jQuery(document).ready(function($) {
+  // Only if preview exists
+  $('#plugin-preview').each(function() {
+    var preview = $(this);
+    $('#id_body').autoPreview(auto_preview_url, {
+        'markup': $('#id_markup').val(),
+		'plugin_id': plugin_id
+      },
+      function (textarea, text, data) {
+        preview.html(data);
+        parent.setiframeheight($('body').height() + 20, 11);
+      });
+  });
+});
+
 // Allow resizing <textarea> elements through a drag bar
 // Copied from Trac, http://trac.edgewall.org/
 
     
     function dragging(e) {
       textarea.height(Math.max(32, offset + e.pageY) + 'px');
-	  parent.setiframeheight($('body').height() + 20, 11);
+      parent.setiframeheight($('body').height() + 20, 11);
       return false;
     }
     

cmsplugin_markup/templates/cmsplugin_markup/markup_plugin_change_form.html

 {% extends "admin/cms/page/plugin_change_form.html" %}
-	
+
+{% block top %}
+{% if preview %}
+<div id="plugin-preview">
+{{ block.super }}
+</div>
+{% endif %}
+{% endblock %}
+
 {% block extrahead %}{{ block.super }}
+<script type="text/javascript" src="{{ CMS_MEDIA_URL }}js/csrf.js"></script>
+<script type="text/javascript">
+/* <![CDATA[ */
+var plugin_id = '{{ object_id|escapejs }}';
+var auto_preview_timeout = 2.0;{% url admin:markup_preview as auto_preview_url %}
+var auto_preview_url = '{{ auto_preview_url|escapejs }}';
+/* ]]> */
+</script>
 <script type="text/javascript" src="{{ STATIC_URL|default:MEDIA_URL }}cmsplugin_markup/markup.js"></script>
 <link rel="stylesheet" type="text/css" href="{{ STATIC_URL|default:MEDIA_URL }}cmsplugin_markup/markup.css" />
 {% endblock %}

cmsplugin_markup/utils/markup.py

     markup_objects = get_list_of_markup_objects(settings.CMS_MARKUP_OPTIONS)
     obj = markup_objects[parser_identifier]()
 
-    return markup_objects[parser_identifier]().parse(value)
+    return obj.parse(value)
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.