enhance image management.
--- a/src/metadatacomposer/static/metadatacomposer/css/style.css Tue May 21 17:41:57 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/css/style.css Tue May 21 18:01:07 2013 +0200
@@ -36,7 +36,7 @@
.project-title-editor{line-height: 28px; }
.project-title-editor-form{margin: 0;}
.project-action a:last-child{margin-right: 20px;}
-.chapter-widget-info{background-color:#e74c3c; padding: 10px 0; margin-bottom: 20px;}
+.chapter-widget-info{}
.chapter-widget form{ margin: 0;}
.chapter-widget input, .form-info-general-annotation input, .form-info-general-annotation textarea{width: 196px; max-width: 196px; }
.chapter-widget textarea{width: 426px; max-width: 426px; min-width: 426px; height: 20px;
@@ -44,16 +44,16 @@
-moz-transition: height .3s ease;
transition: height .3s ease;
}
+.form-chapter-edit{padding-top: 10px;}
.chapter-widget-info table{margin: 0; padding-top: 40px; }
.chapter-widget table td{}
.chapter-widget textarea:focus{height: 100px;}
-.chapitre-cut-wrap{position: relative; height: 60px;}
-.btn-cut-chapter{position: absolute;bottom: 0;left: 11px;}
-.indicateur-chapter{z-index:100; left:10px; width: 1px; height: 100%;background-color: #e74c3c; position: absolute;}
-.chapter-segments {width: 100%; height: 20px; background-color: #856; margin: 0;}
-.chapter-segments li{ width:50%; background-color: #f1c40f;float: left; list-style: none; line-height: 20px; height: 20px; text-align: center;}
-.chapter-segments li:last-child{background-color: #27ae60;}
-.list-chapter-wrap{background-color: #3498db;}
+.chapitre-cut-wrap{position: relative; height: 50px; margin-bottom: 10px;}
+.btn-cut-chapter{position: absolute;top: 20px;left: 11px;}
+.indicateur-chapter{z-index:100; left:10px; width: 1px; height: 100%;background-color: #000; position: absolute;}
+.chapter-segments {width: 100%; height: 20px; margin: 0;}
+.chapter-segments li{cursor:pointer; float: left; list-style: none; line-height: 20px; height: 20px; text-align: center; overflow: hidden;}
+.list-chapter-wrap{}
.list-chapter-wrap h4{padding: 10px; border-bottom: 1px solid; margin-bottom: 10px;}
.add-annotation-wrap, form.form-info-general-annotation{padding: 10px 0; background-color: #1abc9c;}
.add-annotation-wrap strong{padding-left: 10px;}
@@ -81,6 +81,9 @@
.input-image-url{display: none;}
.timeline-annotation-widget{width: 460px;height: 40px;background-color: #ecf0f1; position: relative;}
.timeline-annotation-widget .annotation{width: 10px; height: 10px; background-color: #c0392b; position: absolute; top:15px;}
+ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;
+-moz-border-radius: 0px;
+border-radius: 0px;}
.loader {
background: url(../img/loader.gif) center no-repeat;
background-size: 25px 25px;
--- a/src/metadatacomposer/static/metadatacomposer/js/common.js Tue May 21 17:41:57 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/common.js Tue May 21 18:01:07 2013 +0200
@@ -6,24 +6,28 @@
//open modal
$(document).on('click', 'a.open-modal', function(e){
+ console.log("ntm 1");
e.preventDefault();
+ console.log("ntm 2");
var modalRemote = $(this).attr('href'),
typeMedia = $(this).attr('data-type-media'),
modalTitleInfo = $(this).attr('data-title'),
hideBibliotheque = $(this).hasAttr('data-hide-bibliotheque') ? true : false,
titleFront;
-
+ console.log("ntm 3");
switch(typeMedia){
case 'video' : titleFront = '<i class="icon-film"></i> Vidéo - '+modalTitleInfo; break;
case 'image' : titleFront = '<i class="icon-picture"></i> Image - '+modalTitleInfo; break;
}
$('#modal-template .modal-header h3').html(titleFront);
+ console.log("ntm 4");
$("#modal-template .modal-body").load(modalRemote, function() {
$("#modal-template").modal("show");
if(hideBibliotheque)
$("#modal-template").find(".bibliotheque-link").hide();
});
+ console.log("ntm 5");
});
@@ -44,11 +48,15 @@
var titleMedia = $(this).attr('data-title'),
textModal = $('<p>Êtes-vous sûr de vouloir supprimer <strong>'+titleMedia+'</strong> ?</p>'),
eltDelete = $(this).attr('href');
- $("#modal-confirm #btn-delete-modal").attr('data-id-elt-delete', eltDelete);
+ $("#modal-confirm #btn-delete-modal").attr('data-id-elt-delete', eltDelete).focus();
$("#modal-confirm .modal-body").empty().append(textModal);
$("#modal-confirm").modal('show');
});
+ $("#modal-confirm").on('shown', function() {
+ $("#modal-confirm #btn-delete-modal").focus()
+ });
+
$("#modal-confirm").on('click', '#btn-delete-modal', function(e){
e.preventDefault();
var idEltDelete = $(this).attr('data-id-elt-delete');
--- a/src/metadatacomposer/static/metadatacomposer/js/edition.js Tue May 21 17:41:57 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js Tue May 21 18:01:07 2013 +0200
@@ -2,9 +2,14 @@
var global = {
diaporama : null,
- idAnnotation : null
+ idAnnotation : null,
+ colors : ['#f39c12', '#2ecc71', '#3498db', '#9b59b6',
+ '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1',
+ '#16a085', '#27ae60', '#2980b9', '#8e44ad', '#2c3e50',
+ '#f39c12', '#d35400', '#c0392b', '#bdc3c7', '#7f8c8d']
},
-chapitres = [],
+currentChapter = null,
+chapters = [],
annotations = [];
myProject.onLoad(function() {
@@ -13,6 +18,8 @@
myMedia = myProject.getCurrentMedia();
+ loadChapters();
+
IriSP.htmlPlayer(
myMedia,
$(".main-video"),
@@ -27,8 +34,8 @@
myMedia.on("timeupdate", function(t) {
//curseur chapitre
- var pos = $(".chapitre-cut-wrap").width() * t / myMedia.duration,
- wContainer = $('.chapitre-cut-wrap').width(),
+ var wContainer = $('.chapitre-cut-wrap').width() - 1,
+ pos = wContainer * t / myMedia.duration,
btnCutChapter = $('.btn-cut-chapter'),
wBtnCutChapter = btnCutChapter.outerWidth();
@@ -38,7 +45,27 @@
}else{
btnCutChapter.css("left",pos);
}
-
+
+ /*
+ //chapitre edit
+ var formChapter = $('.form-chapter-edit'),
+ inputBeginChapter = formChapter.find('input[name=begin]'),
+ inputDurationChapter = formChapter.find('input[name=duration]'),
+ inputEndChapter = formChapter.find('input[name=end]'),
+ viewBeginChapter = formChapter.find('.begin'),
+ viewDurationChapter = formChapter.find('.duration'),
+ viewEndChapter = formChapter.find('.end'),
+ timeBegin = 0,
+ timeEnd = t.milliseconds,
+ timeDuration = timeEnd - timeBegin;
+
+ inputBeginChapter.val(timeBegin);
+ inputEndChapter.val(timeEnd);
+ inputDurationChapter.val(timeDuration);
+ viewBeginChapter.html(millisecondsToString(timeBegin));
+ viewDurationChapter.html(millisecondsToString(timeDuration));
+ viewEndChapter.html(millisecondsToString(timeEnd));
+ */
});//timeupdate
});//myProject.onLoad
@@ -55,13 +82,15 @@
if(idAnnotation !== undefined){
global.idAnnotation = idAnnotation;
}
- })
+ });
+
//edition image
$('.popup').on('change', '#media-type-select', function(e){
var typeImage = $(this).val();
$('.input-image-url, .input-image-upload').hide();
$('.input-image-'+typeImage).show();
});
+
//bibliotheque
//video
$('.popup').on('click', '.bibliotheque-video a', function(e){
@@ -82,16 +111,16 @@
$('.popup').modal('hide');
});
- $(document).on('click','.btn-delete', function(e){
+ $(document).on('click','.btn-delete-annotation', function(e){
e.preventDefault();
//si c'est une annotation et que la tab est ouverte, on la ferme
var type = $(this).attr('data-type');
- if(type == 'annotation'){
- var idAnnotation = $(this).attr('data-id');
- $('a[href=#annotation-'+idAnnotation+']').closest('li').remove();
- $('.tab-content #annotation'+idAnnotation).remove();
- $('#tab-list-annotation').tab('show');
- }
+
+ var idAnnotation = $(this).attr('data-id');
+ $('a[href=#annotation-'+idAnnotation+']').closest('li').remove();
+ $('.tab-content #annotation'+idAnnotation).remove();
+ $('#tab-list-annotation').tab('show');
+
});
//confirmation suppression
@@ -131,39 +160,200 @@
});
//--chapter
- $('.list-chapter-wrap').on('click', '.edit-chapter', function(e){
+
+//edit
+ $('.list-chapter-wrap').on('click', '.btn-edit-chapter', function(e){
e.preventDefault();
- var viewChapter = {
- titre : 'titre du chapitre',
- tags : 'tag 1, tag 2, tag 3',
- description : 'lorem ipsum'
+ var idChapter = $(this).attr('data-chapter-id');
+ loadFormChapter(idChapter);
+ currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
+ });
+
+ $('.chapter-segments').on('click', 'li', function(){
+ var idChapter = $(this).attr('id');
+ loadFormChapter(idChapter);
+ });
+
+ $('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){
+ var name = $(this).attr('name'),
+ value = $(this).val();
+ currentChapter[name] = value;
+ if(name == 'title'){
+ var idChapter = $(this).parents('form').attr('data-chapter-id');
+ $('.chapter-segments').find('#'+idChapter).text(value);
+ $('#row-list-chapter-'+idChapter).find('td:first').text(value);
}
-
+ });
+
+ function onTagItChange(e, ui) {
+ var idChapter = $(this).parents('form').attr('data-chapter-id'),
+ value = $('input[name=tags]').val();
+ currentChapter.tags = value;
+ $('#row-list-chapter-'+idChapter).find('.list-chapter-tags').text(value);
+ }
+
+ var tagitParam = {
+ afterTagRemoved : onTagItChange,
+ afterTagAdded : onTagItChange
+ }
+
+ function loadFormChapter(idChapter){
+ var chapterData = _.find(chapters, function(c){ return c.id == idChapter; }),
+ chapterWrap = $('.chapter-widget-info');
+
+ currentChapter = chapterData;
+
$.get('template.html', function(templates){
var tpl = $(templates).filter('#tpl-chapter-edit').html();
- var tpl = Mustache.render(tpl, viewChapter);
- $('.form-chapter-edit').empty().append(tpl);
+ tpl = Mustache.render(tpl, chapterData);
+ chapterWrap.empty().append(tpl);
+ chapterWrap.find('.tag-it').tagit(tagitParam);
});
- });
- //nouveau chapitre
+ }
+
+
+//supprimer
+$('.list-chapter-wrap').on('click', '.btn-delete-chapter', function(e){
+ e.preventDefault();
+
+ if(chapters.length == 1){alert('Le projet doit contenir au moins un chapitre.'); return;}
+ var idChapter = $(this).attr('data-chapter-id'),
+ chapter = _.find(chapters, function(c){ return c.id == idChapter; }),
+ indexChapter = _.indexOf(chapters, chapter),
+ chapterModify;
+ if(indexChapter == 0){
+ chapterModify = chapters[1];
+ chapterModify.begin = 0;
+ chapterModify.duration = chapterModify.end;
+ }else{
+ chapterModify = chapters[indexChapter-1];
+ chapterModify.end = chapter.end;
+ chapterModify.duration = chapterModify.end - chapterModify.begin;
+ }
+ chapters = _(chapters).reject(function(c) { return c.id == idChapter; });
+ renderChapter();
+ //si le formulaire est visible
+ if($('#form-chapter-edit-'+idChapter).length){
+ $('#form-chapter-edit-'+idChapter).remove();
+ }
+});
+
+//nouveau chapitre
$('.chapter-widget').on('click', '.btn-cut-chapter', function(e){
e.preventDefault();
var uniqId = 'id' + (new Date()).getTime();
- $.get('template.html', function(templates){
- var viewChapterRow = {
- id : uniqId
- };
- var tpl = $(templates).filter('#tpl-chapter-row').html();
- var tpl = Mustache.render(tpl, viewChapterRow);
- $('.list-chapter-rows-wrap').append(tpl);
+
+ var title = 'New',
+ tags = 'tag',
+ begin = myMedia.currentTime.milliseconds,
+ end = organizeNewChapter(begin),
+ duration = end - begin,
+ description = '',
+ id = uniqId;
+
+ var dataChapter = {
+ title : title,
+ tags : tags,
+ begin : begin,
+ duration : duration,
+ end : end,
+ description : description,
+ color : global.colors[chapters.length],
+ id : uniqId
+ };
+
+ chapters.push(dataChapter);
+ renderChapter();
+ loadFormChapter(id);
+ });
+
+ function organizeNewChapter(beginNew){
+
+ var returnEnd;
+ $.each(chapters, function(k, v){
+ var begin = v.begin,
+ end = v.end;
+ if(beginNew>=begin && beginNew<=end){
+ v.end = beginNew;
+ v.duration = v.end - v.begin;
+ returnEnd = end;
+ }
});
- });
-
- function addChapter(data){
-
+ return returnEnd;
}
+ function renderChapter(){
+ var chapterSegmentWrap = $('.chapter-segments'),
+ wChapterSegmentWrap = chapterSegmentWrap.width(),
+ chapterList = $('.list-chapter-rows-wrap');
+
+ chapters = _.sortBy(chapters, function(c){
+ return c.begin;
+ });
+
+ chapterSegmentWrap.empty();
+ chapterList.empty();
+
+ $.each(chapters, function(k, v){
+
+ //segments
+ color = global.colors[k],
+ width = Math.floor(v.duration * wChapterSegmentWrap / myMedia.duration.milliseconds),
+ segment = $('<li>'+v.title+'</li>').css({
+ width : width,
+ backgroundColor : v.color
+ }).attr('id', v.id);
+
+ chapterSegmentWrap.append(segment);
+
+ //liste
+ $.get('template.html', function(templates){
+
+ v.beginString = millisecondsToString(v.begin);
+ v.durationString = millisecondsToString(v.duration);
+ v.endString = millisecondsToString(v.end);
+
+ var tplChapterRow = $(templates).filter('#tpl-chapter-row').html();
+ tplChapterRow = Mustache.render(tplChapterRow, v);
+ chapterList.append(tplChapterRow);
+
+ });
+ });
+ }
+
+//init
+ function loadChapters(){//nouveau projet, 1 chapitre
+
+ var uniqId = 'id' + (new Date()).getTime();
+
+ var title = 'chapitre 1',
+ tags = 'tag1,tag2',
+ begin = 0,
+ duration = myMedia.duration.milliseconds,
+ end = myMedia.duration.milliseconds,
+ description = 'description du chapitre 1',
+ id = uniqId;
+
+ var dataChapter = {
+ title : title,
+ tags : tags,
+ begin : begin,
+ duration : duration,
+ end : end,
+ description : description,
+ color : global.colors[chapters.length],
+ id : id
+ };
+
+ chapters.push(dataChapter);
+ renderChapter();
+ }
+
+
+
+
+
//edit annotation
$('#list-annotations').on('click', 'a.btn-edit-annotation', function(e){
e.preventDefault();
@@ -410,4 +600,6 @@
$('#annotation-tab a:last-child').tab('show');
+$(".tag-it").tagit();
+
});//ready
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/metadatacomposer/static/metadatacomposer/js/tangle.js Tue May 21 18:01:07 2013 +0200
@@ -0,0 +1,62 @@
+/* Tangles */
+ var tangleMsPerPixel = 100,
+ activeTangle,
+ tangleStartX,
+ tangleStartVal,
+ tangleHasMoved;
+
+ $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){
+ // $(".time-tangle").mousedown(function(evt) {
+
+ activeTangle = $(this);
+ activeTangle.addClass("active");
+ tangleStartVal = +activeTangle.attr("data-milliseconds");
+ tangleStartX = evt.pageX;
+ tangleHasMoved = false;
+ $(this).siblings(".time-tangle").addClass("deactivate");
+ return false;
+ });
+ $(document)
+ .mousemove(function(evt) {
+ if (activeTangle) {
+ tangleHasMoved = true;
+ var newval = new IriSP.Model.Time(tangleMsPerPixel * (evt.pageX - tangleStartX) + tangleStartVal);
+ activeTangle.trigger("valuechange", newval);
+ return false;
+ }
+ })
+ .mouseup(function() {
+ if (activeTangle) {
+ activeTangle.text(activeTangle.text().replace(/\.\d+$/,''));
+ $(".time-tangle").removeClass("active deactivate");
+ activeTangle = undefined;
+ }
+ });
+
+ $(".tangle-start")
+ .mouseup(function(evt) {
+ if (!tangleHasMoved && currentMedia && currentSegment) {
+ currentMedia.setCurrentTime(currentSegment.begin);
+ }
+ })
+ .on("valuechange", function(evt, val) {
+ if (currentMedia && currentSegment) {
+ currentSegment.setBegin(val);
+ }
+ });
+ $(".tangle-end")
+ .mouseup(function(evt) {
+ if (!tangleHasMoved && currentMedia && currentSegment) {
+ currentMedia.setCurrentTime(currentSegment.end);
+ }
+ })
+ .on("valuechange", function(evt, val) {
+ if (currentMedia && currentSegment) {
+ currentSegment.setEnd(val);
+ }
+ });
+ $(".tangle-duration").on("valuechange", function(evt, val) {
+ if (currentMedia && currentSegment) {
+ currentSegment.setDuration(val);
+ }
+ });
\ No newline at end of file
--- a/src/metadatacomposer/templates/metadatacomposer_home.html Tue May 21 17:41:57 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_home.html Tue May 21 18:01:07 2013 +0200
@@ -61,7 +61,11 @@
<article class="container">
<div class="row article-title">
<h3 class="span8"><i class="icon-picture"></i> Dernières images</h3>
- <div class="span4 wrap-btn-add"><a class="btn btn-success" href="#">Ajouter une image <i class="icon-plus-sign"></i></a></div>
+ <div class="span4 wrap-btn-add">
+ <a data-type-media="image" data-title="Ajouter une image" class="btn btn-success open-modal"
+ href="{% url composer_modal_image branding=branding %}" data-hide-bibliotheque>
+ Ajouter une image <i class="icon-plus-sign"></i></a>
+ </div>
</div>
<div class="row">
{% for i in images %}
@@ -91,6 +95,13 @@
</section>
<footer></footer>
</div><!-- wrap -->
+ <div id="modal-template" class="modal hide fade popup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+ <h3></h3>
+ </div>
+ <div class="modal-body"></div>
+ </div>
{% endblock %}
{% block modal_divs %}
{% endblock %}
--- a/src/metadatacomposer/templates/metadatacomposer_modal_image.html Tue May 21 17:41:57 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_modal_image.html Tue May 21 18:01:07 2013 +0200
@@ -1,4 +1,5 @@
-{% load static %}
+{% load static %}
+{% load thumbnail %}
<div class="row">
<div class="span3">
<ul class="modal-menu">
@@ -9,19 +10,20 @@
<div class="span8 offset1 popup-content">
<h4>Informations et source de l'image</h4>
<form class="form-horizontal" action="{% url composer_modal_image branding=branding %}" enctype="multipart/form-data" method="post">{% csrf_token %}
- {% for error in form.errors.name %}
+ {% if image_pk %}<input type="hidden" value="{{ image_pk }}" name="image_pk">{% endif %}
+ {% for error in form.errors %}
<span class="error">{{ error }}</span>
{% endfor %}
<div class="control-group">
<label class="control-label" for="media-title">Titre :</label>
<div class="controls">
- <input type="text" name="title" id="id_title" placeholder="Titre de l'image.." maxlength="1024"/>
+ <input type="text" name="title" id="id_title" placeholder="Titre de l'image..." maxlength="1024" value="{{ form.title.value|default_if_none:'' }}"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="media-description">Description :</label>
<div class="controls">
- <textarea name="description" id="id_description"></textarea>
+ <textarea name="description" id="id_description">{{ form.description.value|default_if_none:"" }}</textarea>
</div>
</div>
<!--div class="control-group">
@@ -45,6 +47,12 @@
<div class="controls">
<input type="file" name="image_file" id="id_image_file"/>
<a href="#" class="btn btn-previsualisation" class="btn"><i class="icon-eye-open"></i> Prévisualiser</a>
+ {% if form.image_file.value %}
+ <p>Image actuelle :</p>
+ {% thumbnail form.image_file.value "100" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}
+ {% endif %}
+ <br/>
+
</div>
</div>
<div class="control-group">
--- a/src/metadatacomposer/templates/metadatacomposer_resource_list.html Tue May 21 17:41:57 2013 +0200
+++ b/src/metadatacomposer/templates/metadatacomposer_resource_list.html Tue May 21 18:01:07 2013 +0200
@@ -24,66 +24,8 @@
</a>
</div>
</div>
-
- <table class="table table-striped">
- <thead>
- <tr>
- <th>Aperçu</th>
- <th>Titre</th>
- <th>Projets associés</th>
- <th>Date de modification</th>
- <th>Actions</th>
- </tr>
- </thead>
- <tbody class="liste">
- <tr id="row-list-ressources-image-id1">
- <td><img src="{% static 'metadatacomposer/img/60x60.gif' %}" alt=""></td>
- <td>Titre de l'image qwerty</td>
- <td>
- <ul>
- <li><a href="">Titre du projet azerty</a></li>
- <li><a href="">Titre du projet azerty</a></li>
- <li><a href="">Titre du projet azerty</a></li>
- </ul>
- </td>
- <td>14/03/2014</td>
- <td>
- <a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="{% url composer_modal_image branding=branding %}"><i class="icon-pencil"></i></a>
- <a class="btn btn-delete" data-title="Titre du média" href="#row-list-ressources-image-id1">
- <i class="icon-remove"></i>
- </a>
- </td>
- </tr>
- <tr id="row-list-ressources-image-id2">
- <td><img src="{% static 'metadatacomposer/img/60x60.gif' %}" alt=""></td>
- <td>Titre de l'image azerty</td>
- <td>
- <ul>
- <li><a href="">Titre du projet azerty</a></li>
- <li><a href="">Titre du projet azerty</a></li>
- <li><a href="">Titre du projet azerty</a></li>
- </ul>
- </td>
- <td>14/03/2014</td>
- <td>
- <a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="{% url composer_modal_image branding=branding %}"><i class="icon-pencil"></i></a>
- <a class="btn btn-delete" data-title="Titre du média" href="#row-list-ressources-image-id2">
- <i class="icon-remove"></i>
- </a>
- </td>
- </tr>
- </tbody>
- </table>
- <div class="pagination">
- <ul>
- <li class="disabled"><a href="#">Prev</a></li>
- <li class="active"><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- <li><a href="#">5</a></li>
- <li><a href="#">Next</a></li>
- </ul>
+ <div id="image_list_container">
+ {% include 'partial/resource_image_list.html' %}
</div>
</article>
@@ -148,5 +90,22 @@
}
});
});
+ $(document).on('click', 'a.image_pagination', function(e){
+ e.preventDefault();e.stopPropagation();
+ var url = $(this).attr('href');
+ $(this).addClass("loader");
+ $.ajax({
+ url: url,
+ cache: false,
+ type: 'GET',
+ success: function(data, status, request) {
+ $("#image_list_container").html(data);
+ },
+ error: function(jqXHR, textStatus, errorThrown) {
+ resp = $.parseJSON(jqXHR.responseText);
+ alert(resp.message);
+ }
+ });
+ });
</script>
{% endblock %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/metadatacomposer/templates/partial/resource_image_list.html Tue May 21 18:01:07 2013 +0200
@@ -0,0 +1,61 @@
+{% load static %}
+{% load i18n %}
+{% load thumbnail %}
+{% load front_tags %}
+ <table class="table table-striped">
+ <thead>
+ <tr>
+ <th>Aperçu</th>
+ <th>Titre</th>
+ <th>Projets associés</th>
+ <th>Date de modification</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody class="liste">
+ {% for res in image_results %}
+ <tr id="row-list-ressources-image-id1">
+ <td>{% thumbnail res.image_file "60x60" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}<img src="{% static 'metadatacomposer/img/60x60.gif' %}" width="60px" height="60px" />{% endthumbnail %}</td>
+ <td>{{ res.title }}</td>
+ <td>
+ <!--ul>
+ <li><a href="">Titre du projet azerty</a></li>
+ </ul-->
+ </td>
+ <td>{{ res.modification_date|date:"Y/m/d" }}</td>
+ <td>
+ <a data-type-media="image" data-title="Modifier une image" class="btn open-modal" href="{% url composer_modal_image branding=branding %}?image={{ res.pk }}"><i class="icon-pencil"></i></a>
+ <a class="btn btn-delete" data-title="Titre du média" href="#row-list-ressources-image-id1">
+ <i class="icon-remove"></i>
+ </a>
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ <div class="pagination">
+ <ul>
+ {% if image_results.has_previous %}
+ <li><a href="{% url composer_image_page branding=branding %}?page={{ image_results.previous_page_number }}" class="image_pagination">{% trans "Previous" %}</a></li>
+ {% else %}
+ <li class="disabled"><a>{% trans "Previous" %}</a></li>
+ {% endif %}
+ {% if image_results.paginator.num_pages > 1 %}
+ {% for i in image_results.paginator.num_pages|get_range %}
+ {% if i|add:'1' == image_results.number %}
+ <li class="active"><a href="#">{{i|add:'1'}}</a></li>
+ {% else %}
+ <li><a href="{% url composer_image_page branding=branding %}?page={{i|add:'1'}}" class="image_pagination">{{i|add:'1'}}</a></li>
+ {% endif %}
+ {% endfor %}
+ {% endif %}
+ {% if image_results.has_next %}
+ <li><a href="{% url composer_image_page branding=branding %}?page={{ image_results.next_page_number }}" class="image_pagination">{% trans "Next" %}</a></li>
+ {% else %}
+ <li class="disabled"><a>{% trans "Next" %}</a></li>
+ {% endif %}
+ {% if image_results.paginator.num_pages > 1 %}
+ <li><a href="{% url composer_image_page branding=branding %}?page=x" class="image_pagination">({% trans "All" %})</a></li>
+ {% endif %}
+ </ul>
+ </div>
\ No newline at end of file
--- a/src/metadatacomposer/urls.py Tue May 21 17:41:57 2013 +0200
+++ b/src/metadatacomposer/urls.py Tue May 21 18:01:07 2013 +0200
@@ -1,12 +1,14 @@
from django.conf.urls.defaults import patterns, url
from metadatacomposer.views import MetadataComposerHome, MetadataComposerProjectList,\
MetadataComposerResourceList, MetadataComposerContentPagination,\
- MetadataComposerModalVideo, MetadataComposerModalImage
+ MetadataComposerModalVideo, MetadataComposerModalImage,\
+ MetadataComposerImagePagination
urlpatterns = patterns('',
url(r'^jsi18n/(?P<packages>\S+?)/$', 'django.views.i18n.javascript_catalog', name='jsi18n'),
url(r'^(?P<branding>.*)/projectlist/$', MetadataComposerProjectList.as_view(), name="composer_project_list"),
url(r'^(?P<branding>.*)/resourcelist/$', MetadataComposerResourceList.as_view(), name="composer_resource_list"),
+ url(r'^(?P<branding>.*)/imagepage/$', MetadataComposerImagePagination.as_view(), name="composer_image_page"),
url(r'^(?P<branding>.*)/contentpage/$', MetadataComposerContentPagination.as_view(), name="composer_content_page"),
url(r'^(?P<branding>.*)/modalvideo/$', MetadataComposerModalVideo.as_view(), name="composer_modal_video"),
url(r'^(?P<branding>.*)/modalimage/$', MetadataComposerModalImage.as_view(), name="composer_modal_image"),
--- a/src/metadatacomposer/views.py Tue May 21 17:41:57 2013 +0200
+++ b/src/metadatacomposer/views.py Tue May 21 18:01:07 2013 +0200
@@ -40,7 +40,6 @@
projects = Project.safe_objects.filter(owner=request.user).order_by('-modification_date')[:6]
images = Image.objects.order_by('-modification_date')[:6]
- logger.debug(images)
contents = Content.safe_objects.order_by('-update_date')[:6]
context = self.get_context_dict(request)
@@ -91,12 +90,34 @@
def get(self, request, branding="iri", **kwargs):
self.branding = branding
+ # We get the first page of images
+ image_results = get_images(1)
# We get the first contents page and theirs projects
content_results = get_contents_and_projects(1, request.user)
- # We get the first page of images
context = self.get_context_dict(request)
- context.update({"content_results":content_results})
+ context.update({"image_results":image_results, "content_results":content_results})
+ return self.render_to_response(context)
+
+
+
+class MetadataComposerImagePagination(TemplateResponseMixin, MetadataComposerContextView):
+
+ def get_template_names(self):
+ return "partial/resource_image_list.html"
+
+ @method_decorator(login_required)
+ def dispatch(self, *args, **kwargs):
+ return super(MetadataComposerImagePagination, self).dispatch(*args, **kwargs)
+
+ def get(self, request, branding="iri", **kwargs):
+ self.branding = branding
+ page = request.GET.get("page") or 1
+ # Get current contents page and theirs projects
+ image_results = get_images(page)
+
+ context = self.get_context_dict(request)
+ context.update({"image_results":image_results})
return self.render_to_response(context)
@@ -122,6 +143,24 @@
+def get_images(page):
+
+ # We get the current's page images
+ images = Image.objects.order_by('-modification_date')
+ #nb = getattr(settings, 'METADATACOMPOSER_ELEMENTS_PER_PAGE', 9)
+ nb = 2
+ if page=="x":
+ nb = images.count()
+ paginator = Paginator(images, nb)
+ try:
+ results = paginator.page(page)
+ except (EmptyPage, InvalidPage):
+ results = paginator.page(paginator.num_pages)
+
+ return results
+
+
+
def get_contents_and_projects(page, user):
# We get the current's page contents
@@ -175,33 +214,34 @@
def get(self, request, branding="iri", **kwargs):
self.branding = branding
+ image_pk = request.GET.get("image") or None
# Add form
- form = ImageUploadModelForm()
+ if image_pk:
+ form = ImageUploadModelForm(instance=Image.objects.get(pk=image_pk))
+ else:
+ form = ImageUploadModelForm()
context = self.get_context_dict(request)
- context.update({"form":form})
+ context.update({"form":form, "image_pk":image_pk})
return self.render_to_response(context)
def post(self, request, branding="iri", **kwargs):
self.branding = branding
# Check form
- form = ImageUploadModelForm(request.POST, request.FILES)
- logger.debug("COUCOU 1")
- logger.debug(form)
- logger.debug(form.is_valid())
+ if 'image_pk' in request.POST:
+ form = ImageUploadModelForm(request.POST, request.FILES, instance=Image.objects.get(pk=request.POST['image_pk']))
+ else:
+ form = ImageUploadModelForm(request.POST, request.FILES)
if form.is_valid():
- logger.debug("COUCOU 2")
# If an image id was in the form, we update the existing image
- if 'image_pk' in request.POST:
- form = ImageUploadModelForm(request.POST, request.FILES, instance=Image.objects.get(pk=request.POST['image_pk']))
form.save()
+ return redirect(request.META['HTTP_REFERER'])
else:
- logger.debug("COUCOU 3")
context = self.get_context_dict(request)
context.update({"form":form})
- return redirect(request.META['HTTP_REFERER'])
+ return redirect("composer_modal_image", branding=branding)