Started work on manual image cropping

wagtail · Sep 8, 2014 · 807aa1e · 807aa1e
1 parent 9319667
commit 807aa1e
Show file tree

Hide file tree

Showing 15 changed files with 298 additions and 8 deletions.
diff --git a/wagtail/wagtailimages/admin_urls.py b/wagtail/wagtailimages/admin_urls.py
@@ -1,6 +1,6 @@
 from django.conf.urls import url
 
-from wagtail.wagtailimages.views import images, chooser, multiple
+from wagtail.wagtailimages.views import images, chooser, multiple, focal_point_chooser
 
 
 urlpatterns = [
@@ -20,4 +20,6 @@
     url(r'^chooser/(\d+)/$', chooser.image_chosen, name='wagtailimages_image_chosen'),
     url(r'^chooser/upload/$', chooser.chooser_upload, name='wagtailimages_chooser_upload'),
     url(r'^chooser/(\d+)/select_format/$', chooser.chooser_select_format, name='wagtailimages_chooser_select_format'),
+
+    url(r'focal_point_chooser/(\d+)/$', focal_point_chooser.chooser, name='wagtailimages_focal_point_chooser')
 ]
diff --git a/wagtail/wagtailimages/forms.py b/wagtail/wagtailimages/forms.py
@@ -12,12 +12,23 @@ def get_image_form():
         # set the 'file' widget to a FileInput rather than the default ClearableFileInput
         # so that when editing, we don't get the 'currently: ...' banner which is
         # a bit pointless here
-        widgets={'file': forms.FileInput()})
+        widgets={
+            'file': forms.FileInput(),
+            'focal_point_x': forms.HiddenInput(attrs={'class': 'focal_point_x'}),
+            'focal_point_y': forms.HiddenInput(attrs={'class': 'focal_point_y'}),
+            'focal_point_width': forms.HiddenInput(attrs={'class': 'focal_point_width'}),
+            'focal_point_height': forms.HiddenInput(attrs={'class': 'focal_point_height'}),
+        })
 
 
 def get_image_form_for_multi():
     # exclude the file widget
-    return modelform_factory(get_image_model(), exclude=('file',))
+    return modelform_factory(get_image_model(), exclude=('file',), widgets={
+        'focal_point_x': forms.HiddenInput(attrs={'class': 'focal_point_x'}),
+        'focal_point_y': forms.HiddenInput(attrs={'class': 'focal_point_y'}),
+        'focal_point_width': forms.HiddenInput(attrs={'class': 'focal_point_width'}),
+        'focal_point_height': forms.HiddenInput(attrs={'class': 'focal_point_height'}),
+    })
 
 
 class ImageInsertionForm(forms.Form):

diff --git a/wagtail/wagtailimages/models.py b/wagtail/wagtailimages/models.py
@@ -54,10 +54,10 @@ class AbstractImage(models.Model, TagSearchable):
 
     tags = TaggableManager(help_text=None, blank=True, verbose_name=_('Tags'))
 
-    focal_point_x = models.PositiveIntegerField(null=True, editable=False)
-    focal_point_y = models.PositiveIntegerField(null=True, editable=False)
-    focal_point_width = models.PositiveIntegerField(null=True, editable=False)
-    focal_point_height = models.PositiveIntegerField(null=True, editable=False)
+    focal_point_x = models.PositiveIntegerField(null=True, blank=True)
+    focal_point_y = models.PositiveIntegerField(null=True, blank=True)
+    focal_point_width = models.PositiveIntegerField(null=True, blank=True)
+    focal_point_height = models.PositiveIntegerField(null=True, blank=True)
 
     def get_usage(self):
         return get_object_usage(self)

diff --git a/wagtail/wagtailimages/static/wagtailimages/js/add-multiple.js b/wagtail/wagtailimages/static/wagtailimages/js/add-multiple.js
@@ -97,6 +97,10 @@ $(function(){
 
                 // run tagit enhancement
                 $('.tag_field input', itemElement).tagit(window.tagit_opts);
+
+                $('.focal-point-chooser', itemElement).each(function() {
+                    createFocalPointCooser($(this));
+                });
             } else {
                 itemElement.addClass('upload-failure');
                 $('.right .error_messages', itemElement).append(response.error_message);

diff --git a/wagtail/wagtailimages/static/wagtailimages/js/focal-point-chooser.js b/wagtail/wagtailimages/static/wagtailimages/js/focal-point-chooser.js
@@ -0,0 +1,52 @@
+function createFocalPointCooser($chooser) {
+    var $chosenText = $('.chosen-text', $chooser);
+    var $focalPointX = $('input.focal_point_x', $chooser);
+    var $focalPointY = $('input.focal_point_y', $chooser);
+    var $focalPointWidth = $('input.focal_point_width', $chooser);
+    var $focalPointHeight = $('input.focal_point_height', $chooser);
+    var chooserUrl = $chooser.data('chooserUrl');
+
+    $('.action-choose', $chooser).click(function() {
+        if (!$chooser.hasClass('blank')) {
+            window.focalPointChooserInitial = {
+                x: $focalPointX.val(),
+                y: $focalPointY.val(),
+                w: $focalPointWidth.val(),
+                h: $focalPointHeight.val(),
+            }
+        } else {
+            window.focalPointChooserInitial = undefined;
+        }
+
+        ModalWorkflow({
+            'url': chooserUrl,
+            'responses': {
+                'focalPointChosen': function(focalPointData) {
+                    $focalPointX.val(focalPointData.x);
+                    $focalPointY.val(focalPointData.y);
+                    $focalPointWidth.val(focalPointData.w);
+                    $focalPointHeight.val(focalPointData.h);
+
+                    $chosenText.text(focalPointData.x + ", " + focalPointData.y + " " + focalPointData.w + "x" + focalPointData.h);
+
+                    $chooser.removeClass('blank');
+                }
+            }
+        });
+    });
+
+    $('.action-clear', $chooser).click(function() {
+        $focalPointX.val('');
+        $focalPointY.val('');
+        $focalPointWidth.val('');
+        $focalPointHeight.val('');
+
+        $chooser.addClass('blank');
+    });
+}
+
+$(function() {
+    $('.focal-point-chooser').each(function() {
+        createFocalPointCooser($(this));
+    });
+});