Commits

mitar committed bf79863

Made body textedit field resizable.

Comments (0)

Files changed (6)

cmsplugin_markup/cms_plugins.py

+from django.conf import settings
+
 from django.utils.translation import ugettext as _
 from cms.plugin_base import CMSPluginBase
 from cms.plugin_pool import plugin_pool
     name = _('Markup')
     form = MarkupForm
     render_template = 'cmsplugin_markup/markup.html'
+    change_form_template = 'cmsplugin_markup/markup_plugin_change_form.html'
 
     def render(self, context, instance, placeholder):
         context.update({

cmsplugin_markup/forms.py

 from django.forms.models import ModelForm
+from django.forms import widgets
 from django import forms
 
 from cmsplugin_markup.models import MarkupField
     class Meta:
         model = MarkupField
         exclude = ('body_html',)
+        widgets = {
+            'body': widgets.Textarea(attrs={'class': 'django-resizable'}),
+        }
Add a comment to this file

cmsplugin_markup/static/cmsplugin_markup/grip.png

Added
New image

cmsplugin_markup/static/cmsplugin_markup/markup.css

+textarea.django-resizable {
+	width: 100%;
+}
+
+div.django-grip {
+	background: url("grip.png") no-repeat scroll center 1px #EEEEEE;
+	border-color: #DDDDDD;
+	border-right: 1px solid #DDDDDD;
+	border-style: solid;
+	border-width: 0 1px 1px;
+	cursor: s-resize;
+	height: 5px;
+	overflow: hidden;
+}

cmsplugin_markup/static/cmsplugin_markup/markup.js

+// Allow resizing <textarea> elements through a drag bar
+// Copied from Trac, http://trac.edgewall.org/
+
+jQuery(document).ready(function($) {
+  $('textarea.django-resizable').each(function() {
+    var textarea = $(this);
+    var offset = null;
+    
+    function beginDrag(e) {
+      offset = textarea.height() - e.pageY;
+      textarea.blur();
+      $(document).mousemove(dragging).mouseup(endDrag);
+      return false;
+    }
+    
+    function dragging(e) {
+      textarea.height(Math.max(32, offset + e.pageY) + 'px');
+	  parent.setiframeheight($('body').height() + 20, 11);
+      return false;
+    }
+    
+    function endDrag(e) {
+      textarea.focus();
+      $(document).unbind('mousemove', dragging).unbind('mouseup', endDrag);
+    }
+    
+    var grip = $('<div class="django-grip"/>').mousedown(beginDrag)[0];
+    textarea.wrap('<div class="django-resizable"><div></div></div>')
+            .parent().append(grip);
+    grip.style.marginLeft = (this.offsetLeft - grip.offsetLeft) + 'px';
+    grip.style.marginRight = (grip.offsetWidth - this.offsetWidth) +'px';
+  });
+});

cmsplugin_markup/templates/cmsplugin_markup/markup_plugin_change_form.html

+{% extends "admin/cms/page/plugin_change_form.html" %}
+	
+{% block extrahead %}{{ block.super }}
+<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 %}
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.