Improvements to URL generator UI

wagtail/wagtailimages/forms.py

@@ -1,5 +1,6 @@
 from django import forms
 from django.forms.models import modelform_factory
+from django.utils.translation import ugettext as _
 
 from wagtail.wagtailimages.models import get_image_model
 from wagtail.wagtailimages.formats import get_image_formats
@@ -24,3 +25,19 @@ class ImageInsertionForm(forms.Form):
         widget=forms.RadioSelect
     )
     alt_text = forms.CharField()
+
+
+class URLGeneratorForm(forms.Form):
+    filter_method = forms.ChoiceField(
+        label=_("Filter"),
+        choices=(
+            ('original', _("Original size")),
+            ('width', _("Resize to width")),
+            ('height', _("Resize to height")),
+            ('min', _("Resize to min")),
+            ('max', _("Resize to max")),
+            ('fill', _("Resize to fill")),
+        ),
+    )
+    width = forms.IntegerField(_("Width"), min_value=0)
+    height = forms.IntegerField(_("Height"), min_value=0)

wagtail/wagtailimages/static/wagtailimages/js/image-url-generator.js

@@ -1,19 +1,46 @@
 $(function() {
     $('.image-url-generator').each(function() {
         var $this = $(this);
-        var $filter = $this.find('input.filter');
+        var $form = $this.find('form');
+        var $filterMethodField = $form.find('select#id_filter_method');
+        var $widthField = $form.find('input#id_width');
+        var $heightField = $form.find('input#id_height');
         var $result = $this.find('div.result');
 
         var generatorUrl = $this.data('generatorUrl');
 
-        $filter.keyup(function() {
-            $.getJSON(generatorUrl.replace('__filterspec__', $filter.val()))
+        function formChangeHandler() {
+            var filterSpec = $filterMethodField.val();
+
+            if (filterSpec == 'original') {
+                $widthField.prop('disabled', true);
+                $heightField.prop('disabled', true);
+            } else if (filterSpec == 'width') {
+                $widthField.prop('disabled', false);
+                $heightField.prop('disabled', true);
+                filterSpec += '-' + $widthField.val();
+            } else if (filterSpec == 'height') {
+                $widthField.prop('disabled', true);
+                $heightField.prop('disabled', false);
+                filterSpec += '-' + $heightField.val();
+            } else if (filterSpec == 'min' || filterSpec == 'max' || filterSpec == 'fill') {
+                $widthField.prop('disabled', false);
+                $heightField.prop('disabled', false);
+                filterSpec += '-' + $widthField.val() + 'x' + $heightField.val();
+            }
+
+            // Fields with width and height
+            $.getJSON(generatorUrl.replace('__filterspec__', filterSpec))
                 .done(function(data) {
                     $result.text(data['url']);
                 })
                 .fail(function(data) {
                     $result.text(data.responseJSON['error']);
                 });
-        });
+        }
+
+        $form.change(formChangeHandler);
+        $form.keyup(formChangeHandler);
+        formChangeHandler();
     });
 });

wagtail/wagtailimages/templates/wagtailimages/images/_url_generator.html

@@ -1,8 +1,11 @@
 <div class="image-url-generator" data-generator-url="{% url 'wagtailimages_generate_url' image.id '__filterspec__' %}">
     <h3>URL generator</h3>
 
-    Filter spec:
-    <input type="text" class="filter">
+    <form>
+        {% for field in form %}
+            {% include "wagtailadmin/shared/field_as_li.html" %}
+        {% endfor %}
+    </form>
 
     URL:
     <div class="result"></div>

wagtail/wagtailimages/templates/wagtailimages/images/edit.html

@@ -39,8 +39,8 @@
                 </ul>
             </form>
 
-            {% if url_generator_enabled %}
-                {% include "wagtailimages/images/_url_generator.html" %}
+            {% if url_generator_form %}
+                {% include "wagtailimages/images/_url_generator.html" with form=url_generator_form %}
             {% endif %}
         </div>
         <div class="col5">

wagtail/wagtailimages/views/images.py

@@ -14,7 +14,7 @@ from wagtail.wagtailcore.models import Site
 from wagtail.wagtailadmin.forms import SearchForm
 
 from wagtail.wagtailimages.models import get_image_model
-from wagtail.wagtailimages.forms import get_image_form
+from wagtail.wagtailimages.forms import get_image_form, URLGeneratorForm
 from wagtail.wagtailimages.utils import parse_filter_spec, InvalidFilterSpecError, generate_signature
 
 
@@ -107,14 +107,18 @@ def edit(request, image_id):
     # Check if we should enable the frontend url generator
     try:
         reverse('wagtailimages_serve', args=('foo', '1', 'bar'))
-        url_generator_enabled = True
+        url_generator_form = URLGeneratorForm(initial={
+            'filter_method': 'original',
+            'width': image.width,
+            'height': image.height,
+        })
     except NoReverseMatch:
-        url_generator_enabled = False
+        url_generator_form = None
 
     return render(request, "wagtailimages/images/edit.html", {
         'image': image,
         'form': form,
-        'url_generator_enabled': url_generator_enabled,
+        'url_generator_form': url_generator_form,
     })