media gallery: delete item, edit item, edit gallery title

itf/mediagallery/urls.py

@@ -3,6 +3,9 @@ from django.conf.urls.defaults import *
 urlpatterns = patterns('mediagallery.views',
     (r'^add/(?P<ctype_id>\d+)/(?P<object_id>\d+)', 'add'),
     (r'^edit/(?P<id>\d+)', 'edit'),
+    (r'^edit_title/(?P<id>\d+)', 'edit_title'),
+    (r'^delete_photo/(?P<id>\d+)', 'delete_photo'),
+    (r'^edit_photo/(?P<id>\d+)', 'edit_photo'),
     (r'^upload/', 'upload'),
     (r'^(?P<id>\d+)/chunk', 'chunk'),
 

itf/mediagallery/views.py

@@ -2,11 +2,12 @@
 from django.shortcuts import render_to_response, get_object_or_404
 from django.template import RequestContext
 from django.http import HttpResponse, HttpResponseRedirect
-from models import GalleryAlbum, Photo
+from models import GalleryAlbum, GalleryItem, Photo
 from django.contrib.contenttypes.models import ContentType
 from django.views.decorators.csrf import csrf_exempt
 from django import forms
 from ox.django.shortcuts import render_to_json_response
+from sorl.thumbnail import get_thumbnail
 
 def add(request, ctype_id, object_id):
     ctype = get_object_or_404(ContentType, pk=ctype_id)
@@ -33,6 +34,33 @@ def edit(request, id):
     return render_to_response("mediagallery/upload.html", context)
 
 
+def edit_title(request, id):
+    gallery = get_object_or_404(GalleryAlbum, pk=id)
+    title = request.GET.get("title", "")
+    if title.strip() == '':
+        return render_to_json_response({'error': 'Title is empty!'})
+    gallery.title = title
+    gallery.save()
+    return render_to_json_response({'success': 'true'})
+
+
+def edit_photo(request, id):
+    item = get_object_or_404(Photo, pk=id)
+    title = request.GET.get("title", "")
+    if title.strip() == '':
+        return render_to_json_response({'error': 'Title is empty!'})
+    item.title = title
+    item.save()
+    return render_to_json_response({'success': 'true'})
+ 
+
+#FIXME: check permissions
+def delete_photo(request, id):
+    item = get_object_or_404(Photo, pk=id)
+    item.delete()
+    return render_to_json_response({'success': 'true'})        
+
+
 @csrf_exempt
 def upload(request):
     if request.method == 'POST':
@@ -78,10 +106,10 @@ def chunk(request, id):
                 item.save()
                 response = {
                   'resultUrl': '/files/' + str(item.id),
-                  'fileId': item.id,
+                  'id': item.id,
                   'title': name,
                   #'type': item.type,
-                  #'thumbnail': item.get_thumb("100x100")
+                  'thumbnail': get_thumbnail(item.image, "100x100", crop="center").url
                 }
 
                 response['done'] = 1

itf/static/js/upload/chunkupload.js

@@ -32,6 +32,7 @@ function ChunkUploader(options) {
         retries = 0,
         request,
         that = {};
+        that.extra_data = options.extra_data;
 
     initUpload();
 
@@ -39,7 +40,8 @@ function ChunkUploader(options) {
         options.callback({
           status: that.status,
           progress: that.progress,
-          responseText: that.responseText
+          responseText: that.responseText,
+          extra: that.extra_data
         });
     }
 
@@ -101,7 +103,8 @@ function ChunkUploader(options) {
         that.progress = p;
         options.progress({
             progress: that.progress,
-            status: that.status
+            status: that.status,
+            extra: that.extra_data
         });
     }
 

itf/static/js/upload/itfUpload.js

@@ -1,20 +1,21 @@
 (function($) {
 
 ItfFileUpload = function(file, Q) {
+    this.uploaded = false;
     this.file = file;
     this.Q = Q;
-
+    this.$li = this.getLi().prependTo('#photosContainer');    
-    this.$li = this.getLi().appendTo(Q.$ul);    
 };
 
+
 ItfFileUpload.prototype.upload = function() {
     var that = this;
     var Q = that.Q;
     var fil = this.file;
 //  console.log("uploading", fil);
     var data = Q.getData(fil);
-//  var $li = this.getLi(no);
+//    this.$li = this.getLi().appendTo(that.Q.$elem);
-    Q.isUploading = true;
+    this.Q.isUploading = true;
     var url = Q.options.addURL;
     this.showProgress();
 //  $('#progressbar').show();
@@ -23,26 +24,50 @@ ItfFileUpload.prototype.upload = function() {
         'file': fil,
         'url': url,
         'data': data,
+        'extra_data': that,
         'callback': function(response) {
             var data = JSON.parse(response.responseText);
       //console.log("data", data);
             if (data.resultUrl) {
                 that.markDone(data);              
             } else {
-                that.$elem.find("progressStatus").html(response.status);
+                that.$li.find(".progressStatus").html(response.status);
             }
-    },
+        },
-    'progress': that.doProgress
+        'progress': that.doProgress
-  });
+    });
+};
+
+ItfFileUpload.prototype.markDone = function(data) {
+    var that = this;
+    //console.log(data);
+    //alert("hi");
+    this.uploaded = true;
+    //var d = JSON.parse(data.responseText);
+    this.$li.removeClass("uploadFileItem").addClass("photoContainer").empty();
+    var $img = $('<img />').attr("src", data.thumbnail).appendTo(that.$li);
+    var $title = $('<input />').addClass("photoTitle").val(data.title).appendTo(that.$li);
+    var $delete = $('<span />').addClass("deleteItem").text("X").appendTo(that.$li);
+    var $id = $('<input />').attr("hidden", "hidden").addClass("photoId").val(data.id).appendTo(that.$li);
+    this.Q.uploadNext();
 };
 
 
 ItfFileUpload.prototype.showProgress = function() {
-    this.Q.$elem.find(".fileProgress").show();
+    var that = this;
+    //console.log(that);
+    this.$li.find(".fileProgress").show();
 };
 
 ItfFileUpload.prototype.doProgress = function(progress) {
-    console.log(progress);
+//    console.log(progress);
+//    var that = this;
+//    console.log(that);
+//    console.log(progress);
+//    GLOB = progress;
+    var widthPercent = progress.progress * 100;
+    progress.extra.$li.find(".progressBar").css({'width': widthPercent + "%"});
+    //progress.extra.$li.find(".progressBar").text(progress.progress);
 };
 
 ItfFileUpload.prototype.getLi = function() {
@@ -67,11 +92,24 @@ ItfUploadQueue = function(options, $elem) {
     this.$ul = $("<ul />").addClass("uploadFileList").appendTo($elem);
 };
 
+ItfUploadQueue.prototype.uploadNext = function() {
+    for (var i=0; i<this.files.length; i++) {
+        if (this.files[i].uploaded === false) {
+            this.files[i].upload();
+            return;
+        }
+    }        
+    this.isUploading = false;
+    return;
+};
+
+
 ItfUploadQueue.prototype.addFile = function(f) {
     var that = this;
     var fileUpload = new ItfFileUpload(f, that);
     this.files.push(fileUpload);
 //    this.addToList(f);
+//    var no = this.len() - 1;
     if (!this.isUploading) {
         fileUpload.upload();
     }

itf/templates/mediagallery/upload.html

@@ -6,18 +6,67 @@
     <script src="/static/js/upload/chunkupload.js"></script>
     <script src="/static/js/upload/itfUpload.js"></script>
     <script>
+GALLERY_ID = {{ gallery.id }};
 $(function() {
-    $('#uploadImages').uploadQueue({'addURL': '/mediagallery/upload/', 'id': {{ gallery.id }} });
+    $('#uploadImages').uploadQueue({'addURL': '/mediagallery/upload/', 'id': GALLERY_ID });
     //var itfQ = ItfUploadQueue({'addURL': '/mediagallery/upload/'}, $('#uploadImages'));
+
+    $('#uploadImages').delegate(".deleteItem", "click", function(e) {
+        if (!confirm("Are you sure you wish to delete this image?")) {
+            return false;
+        }
+        var $this = $(e.target);
+        //console.log($this);
+        var id = $this.parents('.photoContainer').find('.photoId').val();
+        var url = "/mediagallery/delete_photo/" + id;
+
+        $.get(url, {}, function(response) {
+            //alert("hi");
+        });
+        $this.parents('.photoContainer').fadeOut(); 
+    });
+
+    $('#uploadImages').delegate(".photoTitle", "blur", function(e) {
+        var $this = $(e.target);
+        //alert($this.val());
+        var title = $this.val();
+        var id = $this.parents('.photoContainer').find('.photoId').val();
+        var url = "/mediagallery/edit_photo/" + id;
+        $.get(url, {'title': title}, function(response) {
+
+        });
+    });
+
+    $('.galleryTitle').blur(function() {
+        var title = $(this).val();
+        var url = "/mediagallery/edit_title/" + GALLERY_ID;
+        $.get(url, {'title': title}, function(response) {
+            
+        });
+    });
+
+    
 });
 
+
     </script>
     <style>
 #uploadImages {
     min-width: 400px;
     min-height: 300px;
+    max-width: 50%;
     background: #f00;
 }
+
+.progressBar {
+    height: 10px;
+    background: #00f;
+}
+
+.deleteItem {
+    font-weight: bold;
+    cursor: pointer;
+}
     </style>
 {% endblock %}
 
@@ -27,19 +76,20 @@ $(function() {
     <div id="uploadImages">
         <input type="file" id="uploadImageFiles" multiple />
         
-        <div id="photosContainer">
+        <ul id="photosContainer">
             {% for photo in photos %}
-            <div class="photoContainer">
+            <li class="photoContainer">
                 {% if photo.image %}
                     {% thumbnail photo.image "100x100" crop="center" as thumb %}
                     <img src="{{ thumb.url }}" />
                     {% endthumbnail %}
-                    {% endif %}
+                {% endif %}
                 <input class="photoTitle" value="{{ photo.title }}" />
+                <span class="deleteItem">X</span>
                 <input type="hidden" class="photoId" value="{{ photo.id }}" />
-            </div>
+            </li>
             {% endfor %}
-        </div>
+        </ul>
     </div>
 
 {% endblock %}