# HG changeset patch # User cavaliet # Date 1369152067 -7200 # Node ID ff669687a0d24192dcc84c393d87d191bbab2b8c # Parent ab966883a458d0766813cef5c817117b369020e2 enhance image management. diff -r ab966883a458 -r ff669687a0d2 src/metadatacomposer/static/metadatacomposer/css/style.css --- 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; diff -r ab966883a458 -r ff669687a0d2 src/metadatacomposer/static/metadatacomposer/js/common.js --- 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 = ' Vidéo - '+modalTitleInfo; break; case 'image' : titleFront = ' 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 = $('

Êtes-vous sûr de vouloir supprimer '+titleMedia+' ?

'), 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'); diff -r ab966883a458 -r ff669687a0d2 src/metadatacomposer/static/metadatacomposer/js/edition.js --- 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 = $('
  • '+v.title+'
  • ').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 diff -r ab966883a458 -r ff669687a0d2 src/metadatacomposer/static/metadatacomposer/js/tangle.js --- /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 diff -r ab966883a458 -r ff669687a0d2 src/metadatacomposer/templates/metadatacomposer_home.html --- 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 @@

    Dernières images

    - +
    {% for i in images %} @@ -91,6 +95,13 @@
    + {% endblock %} {% block modal_divs %} {% endblock %} diff -r ab966883a458 -r ff669687a0d2 src/metadatacomposer/templates/metadatacomposer_modal_image.html --- 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 %}