jquery.phototagging.js preview

forms.py

# forms.py

class PhotoTagForm(forms.ModelForm):
    class Meta:
        model = PhotoTag

    x = forms.IntegerField(widget=forms.HiddenInput())
    y = forms.IntegerField(widget=forms.HiddenInput())
    height = forms.IntegerField(widget=forms.HiddenInput())
    width = forms.IntegerField(widget=forms.HiddenInput())
    photo = forms.ModelChoiceField(Image, required=False, widget=forms.HiddenInput())

    def __init__(self, user, id, *args, **kwargs):
        super(PhotoTagForm, self).__init__(*args, **kwargs)
        self.user = user
        self.id = id
        self.fields['who'].queryset = self.fields['who'].queryset.filter(
            Q(id__in=[fs['friend'].id for fs in
                      Friendship.objects.friends_for_user(user)]))

    def clean_photo(self):
        self.cleaned_data['photo'] = Image.objects.get(id=self.id)
        return self.cleaned_data['photo']

jquery.phototagging.js

(function($){

    $.fn.photoTagger = function (id) {
        // For some reason IE barfs if the variable is called 'photo'
        photo_ = $(this);

        photo_.imgAreaSelect({
            enable: true,
            onSelectChange: showuserselect,
            x1: 0, y1: 0, x2: 100, y2: 100
        });

        $('#user_select_form_cancel').click(function(){
            photo_.imgAreaSelect({ hide: true, disable: true });
            $('#user_select_form').hide();
            return false;
        });
        $('#user_select_form_save').click(function(){
            photo_.imgAreaSelect({ hide: true, disable: true });
            $('#user_select_form').hide();
            $.post("/photos/addphototag/" + id + "/",
                {'x': $('#id_x').val(),
                    'y': $('#id_y').val(),
                    'height': $('#id_height').val(),
                    'width': $('#id_width').val(),
                    'who': $('#id_who').val()
                },
                function(){
                    photo_.photoTags(id);
                });
            return false;
        });
    };

    $.fn.photoTags = function (photo_id) {
        var photo = $(this);
        $.getJSON("/photos/phototags/" + photo_id, function(photo_tags){
            photo.imgNotes(photo_tags);
            populate_tagged_listing(photo_tags);
        });
    };

    function populate_tagged_listing(photo_tags) {
        $('#user_tag_listing_target').empty();
        $.each(photo_tags, function(photo_tag){
            var username = this.username;
            $('#user_tag_listing').show();
            var target = $('#user_tag_listing_target');
            if ( target.text() ) {
                target.append(', ');
            }
            target.append('<a href="/profiles/'+username+'/">'+username+'</a>');
        });
    }

    function showuserselect (image, area) {
        var imageOffset = $(image).offset();
        var form_left = imageOffset.left + parseInt(area.x1);
        var form_top = imageOffset.top + parseInt(area.y2) + 5;

        $('#user_select_form').css({ left: form_left + 'px', top: form_top + 'px'});

        $('#user_select_form').show();

        $('#user_select_form').css('z-index', 10000);

        $('#id_x').val(area.x1);
        $('#id_y').val(area.y1);
        $('#id_height').val(area.height);
        $('#id_width').val(area.width);
    };

})(jQuery);

models.py

class PhotoTag(models.Model):
    """
    A tag of a person in a photo.
    """
    who = models.ForeignKey(User, related_name="tagged_in_photos", blank=False, null=False)
    photo = models.ForeignKey(Image, related_name="photo_tags", blank=False, null=False)
    x = models.IntegerField()
    y = models.IntegerField()
    width = models.IntegerField()
    height = models.IntegerField()

views.py

def photo_tags(request, id):
    """
    Responds with JSON data detailing the current photo tags.
    """
    photo = get_object_or_404(Image, id=id)
    # @@@: test
    if not photo.is_public and request.user != photo.member:
        raise Http404

    photo_tags = []
    for photo_tag in photo.photo_tags.all():
        photo_tags.append({
            'x1': photo_tag.x,
            'y1': photo_tag.y,
            'width': photo_tag.width,
            'height': photo_tag.height,
            'note': photo_tag.who.get_profile().name,
            'username': photo_tag.who.username,
        })

    return HttpResponse(simplejson.dumps(photo_tags), mimetype="application/json")

def add_photo_tag(request, id):
    form = PhotoTagForm(request.user, id, request.POST)
    if form.is_valid():
        form.save()
        return HttpResponse('OK', mimetype='text/plain')