CAMP/itf
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sanj 2012-11-20 16:22:34 +05:30
parent 26677493ee
commit 675f418b13
5 changed files with 143 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
itf/mediagallery/urls.py
View File

@ -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'),

34
itf/mediagallery/views.py
View File

@ -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

7
itf/static/js/upload/chunkupload.js
View File

@ -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
});
}

58
itf/static/js/upload/itfUpload.js
View File

@ -1,20 +1,21 @@
(function($) {
ItfFileUpload = function(file, Q) {
this.uploaded = false;
this.file = file;
this.Q = Q;
this.$li = this.getLi().appendTo(Q.$ul);
this.$li = this.getLi().prependTo('#photosContainer');
};
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);
Q.isUploading = true;
// this.$li = this.getLi().appendTo(that.Q.$elem);
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();
}

62
itf/templates/mediagallery/upload.html
View File

@ -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 %}