# HG changeset patch # User cavaliet # Date 1369913525 -7200 # Node ID 58f5d9d76fadd3e5db79cd895bf147f49f1d0e88 # Parent 4f0e84a8fff86745a62a572eb9ae625240ad1c9d add library content and data to a in image library diff -r 4f0e84a8fff8 -r 58f5d9d76fad src/metadatacomposer/static/metadatacomposer/css/style.css --- a/src/metadatacomposer/static/metadatacomposer/css/style.css Wed May 29 18:40:39 2013 +0200 +++ b/src/metadatacomposer/static/metadatacomposer/css/style.css Thu May 30 13:32:05 2013 +0200 @@ -22,6 +22,7 @@ .tab-behavior{text-align: center;} .tab-behavior li{display: inline-block; float: none;} td ul{margin-bottom: 0;} +.bibliotheque-image img{width: 140px; height: 140px;} .bibliotheque-image .span2:nth-child(4n+1), .bibliotheque-video .span2:nth-child(4n+1){clear: left;} .modal.popup{width: 970px; margin-left: -485px; height: 80%;} .popup .modal-body{max-height: none; background-color: #fff; height: 80%;} @@ -46,7 +47,7 @@ .chapter-widget table td{} .chapter-widget textarea:focus{height: 100px;} .chapitre-cut-wrap{position: relative; height: 50px; margin-bottom: 10px;} -.btn-cut-chapter{position: absolute;top: 20px;left: 11px;} +.btn-cut-chapter{position: absolute;top: 20px;left: 11px; width: 40px;} .indicateur-chapter, .indicateur-annotation{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;} @@ -99,6 +100,10 @@ .annotation-links-content .links-form:nth-child(n+2){border-top:1px solid; padding-top: 20px;} +td.list-chapter-tags, td.list-chapter-title, #list-annotations-rows > tr td:first-child{word-wrap: break-word; max-width: 75px;} +td.begin, td.duration, td.end{max-width: 40px;} + +td.image-slideshow-row img{width: 60px; height: 60px;} /* Tangle */ .time-tangle { color: #2c3e50; cursor: w-resize; position: relative; diff -r 4f0e84a8fff8 -r 58f5d9d76fad src/metadatacomposer/static/metadatacomposer/js/common.js --- a/src/metadatacomposer/static/metadatacomposer/js/common.js Wed May 29 18:40:39 2013 +0200 +++ b/src/metadatacomposer/static/metadatacomposer/js/common.js Thu May 30 13:32:05 2013 +0200 @@ -43,9 +43,6 @@ e.preventDefault(); var titleMedia = $(this).attr('data-title'), urlDelete = $(this).attr('href'); - console.log("coucou"); - console.log(titleMedia); - console.log($("#modal-confirm .modal-body").find('.titleMedia')); $("#modal-confirm #btn-delete-modal").attr('href', urlDelete).focus(); $("#modal-confirm .modal-body").find('.titleMedia').text(titleMedia); $("#modal-confirm").modal('show'); diff -r 4f0e84a8fff8 -r 58f5d9d76fad src/metadatacomposer/static/metadatacomposer/js/edition.js --- a/src/metadatacomposer/static/metadatacomposer/js/edition.js Wed May 29 18:40:39 2013 +0200 +++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js Thu May 30 13:32:05 2013 +0200 @@ -17,17 +17,23 @@ }; +//position de la video setCurrentTime +$(".indicateur-annotation").draggable({ + axis: "x", + containment: "parent", + drag: function(e, ui) { + var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".timeline-annotations").width() - 2 * ui.helper.width() ); + myMedia.setCurrentTime(t); + } +}); +$('.timeline-annotations').bind('click', function(e){ + var x = e.pageX - $(this).offset().left; + myMedia.setCurrentTime(myMedia.duration * x / $(this).width()); +}); myProject.onLoad(function() { - - - -//load Annotations -myProject.getAnnotationsByTypeTitle("annotations"); - - $(".project-title").text(myProject.title); myMedia = myProject.getCurrentMedia(); @@ -36,20 +42,36 @@ var _chapters = myProject.getAnnotationsByTypeTitle("chapitrage"); if(_chapters.length){ $.each(_chapters, function(k, v){ - var render = false; + v.color = getRandomColor(); + chapters.push(v); if((k+1) == _chapters.length){ - render = true; + renderChapter(); } - newChapter(v, render); + }); +} + +//load Annotations +var _annotations = myProject.getAnnotationsByTypeTitle("annotations"); +if(_annotations.length){ + $.each(_annotations, function(k, v){ + + v.color = getRandomColor(); + var type = v.content.mimetype.split('-'); + type = type[type.length-1] + v.type = type; + + annotations.push(v); + if((k+1) == _annotations.length){ + renderAnnotation(); + } + }); } - - //chargement des chapitres et annotations existants // loadInitChapters(); - loadInitAnnotation(); + //loadInitAnnotation(); IriSP.htmlPlayer( myMedia, @@ -164,21 +186,7 @@ //select on bibliotheque - //video - $('.popup').on('click', '.bibliotheque-video a', function(e){ - e.preventDefault(); - - var url = $(this).attr('href'); - currentAnnotation.content.url = url; - - $('.popup').modal('hide'); - $.get('template.html', function(templates){ - var videoWrap = $('#tab-'+global.idAnnotation).find('.annotation-video-content'), - tplVideo = $(templates).filter('#tpl-video-row').html(); - videoWrap.empty().append(tplVideo); - }); - - }); + //confirmation suppression @@ -245,6 +253,9 @@ function loadFormChapter(idChapter){ + + + currentChapter = _.find(chapters, function(c){ return c.id == idChapter; }); var chapterWrap = $('.chapter-widget-info'), indexChapter = _.indexOf(chapters, currentChapter), @@ -260,6 +271,8 @@ chapterWrap.empty().append(tpl); chapterWrap.find('.tag-it').tagit(tagitParam); }); + + myMedia.setCurrentTime(currentChapter.begin); } @@ -289,6 +302,9 @@ } }); +function getRandomColor(){ + return global.colors[(global.colorsIndex'+v.title+'').css({ - width : width, - backgroundColor : v.color - }).attr('id', v.id); - - chapterSegmentWrap.append(segment); + //segments + var width = Math.floor(v.getDuration() * wChapterSegmentWrap / myMedia.duration), + segment = $('
  • '+v.title+'
    • ').css({ + width : width, + backgroundColor : v.color + }).attr('id', v.id); + + chapterSegmentWrap.append(segment); - //liste - $.get('template.html', function(templates){ + //liste var tplChapterRow = $(templates).filter('#tpl-chapter-row').html(); tplChapterRow = Mustache.render(tplChapterRow, v); chapterList.append(tplChapterRow); - }); }); - } + }//renderChapter() //init function loadInitChapters(){//nouveau projet, 1 chapitre @@ -555,11 +566,24 @@ case 'video': if(viewType.content.url != ""){ + /* var videoWrap = $(tabContent).find('.annotation-video-content'), tplVideo = $(templates).filter('#tpl-video-row').html(); + tplVideo = Mustache.render(tplVideo, viewType.content); videoWrap.empty().append(tplVideo); + + + var videoWrap = $(tabContent).find(".video-container"), + src = viewType.content.url; + getVideoPlayer(src, videoWrap); +*/ + var videoWrap = $(tabContent).find('.annotation-video-content'); + renderVideoInfo(videoWrap, viewType.content); + } + + break; case 'text': var cledit = $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig)[0]; @@ -580,9 +604,17 @@ $(tabContent).find('.number-spin').spin(spinParam); $(tabContent).find('.ui-sortable').sortable({ + start: function (event, ui) { + $(ui.item).data("startindex", ui.item.index()); + }, stop : function(event, ui){ disabledBtnSortable($(this)); - } + }, + update : function(event, ui){ + var oldIndex = ui.item.data("startindex"), + newIndex = ui.item.index(); + currentAnnotation.content.images.move(oldIndex, newIndex); + }, }); var diaporama = $(tabContent).find('#diaporama-'+idAnnotation), images = viewType.content.images; @@ -653,18 +685,62 @@ $('#tab-list-annotation').tab('show'); } +//video + function renderVideoInfo(videoWrap, dataVideo){ + $.get('template.html', function(templates){ + var tplVideo = $(templates).filter('#tpl-video-row').html(); + tplVideo = Mustache.render(tplVideo, dataVideo); + + videoWrap.empty().append(tplVideo); + + videoWrap = videoWrap.find(".video-container"); + getVideoPlayer(dataVideo.url, videoWrap); + }); + } + $('.popup').on('click', '.bibliotheque-video a', function(e){ + e.preventDefault(); + + var url = $(this).attr('data-url'), + title = $(this).attr('data-title'), + description = $(this).attr('data-description'); + + currentAnnotation.content.url = url; + currentAnnotation.content.title = title; + currentAnnotation.content.description = description; + + $('.popup').modal('hide'); + + var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content'); + renderVideoInfo(videoWrap, currentAnnotation.content); +/* + $.get('template.html', function(templates){ + var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content'), + tplVideo = $(templates).filter('#tpl-video-row').html(); + tplVideo = Mustache.render(tplVideo, currentAnnotation.content); + videoWrap.empty().append(tplVideo); + + var videoWrap = videoWrap.find(".video-container"), + src = url; + getVideoPlayer(src, videoWrap); + }); +*/ + + }); + //diaporama //bibliotheque $('.popup').on('click', '.bibliotheque-image a', function(e){ e.preventDefault(); - var url = $(this).attr('href'), + var url = $(this).attr('data-url'), + title = $(this).attr('data-title'), + description = $(this).attr('data-description'), image = { id : currentAnnotation.id, url : url, - title : 'titre image', - description : 'description azerty' + title : title, + description : description }; currentAnnotation.content.images.push(image); @@ -686,6 +762,7 @@ $(document).on('click', '.ui-sortable .btn-sort', function(e){ e.preventDefault(); var row = $(this).parents('tr.row-image-diaporama'), + oldIndex = row.index(), listDiaporama = $(this).parents('.list-image-diaporama'); if($(this).hasClass('down')) @@ -693,9 +770,21 @@ else if($(this).hasClass('up')) row.insertBefore(row.prev()); + var newIndex = row.index(); + currentAnnotation.content.images.move(oldIndex, newIndex); + disabledBtnSortable(listDiaporama); }); + $('.tab-content').on('click','.btn-delete-image', function(e){ + e.preventDefault(); + var rowImage = $(this).parents('tr.row-image-diaporama'), + index = rowImage.index(); + + rowImage.remove(); + currentAnnotation.content.images.splice(index, 1); + }); + function disabledBtnSortable(listDiaporama){ listDiaporama.find('.btn-sort.disabled').removeClass('disabled'); listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled'); @@ -734,7 +823,7 @@ var urlLink = $(v).find('.url-link').val(), titleLink = $(v).find('.title-link').val(), link = { - uri : urlLink, + url : urlLink, title : titleLink }; links.push(link); @@ -901,6 +990,8 @@ }//getContentAnnotationByType + + //test //a = $(".wysiwyg").cleditor(wysiwygConfig); @@ -927,4 +1018,130 @@ e.preventDefault(); console.log(chapters.length + ' chapitres',chapters); }); -});//ready \ No newline at end of file +});//ready + +Array.prototype.move = function (old_index, new_index) { + if (new_index >= this.length) { + var k = new_index - this.length; + while ((k--) + 1) { + this.push(undefined); + } + } + this.splice(new_index, 0, this.splice(old_index, 1)[0]); + return this; // for testing purposes +}; + + +function getVideoPlayer(src, videoWrap){ + + var youtubeTemplate = _.template( + '' + ); + + var htmlTemplate = _.template( + '<<%- type %> width="<%- width %>" controls="true" autoplay="<%- autoplay %>" src="<%- src %>"/>' + ); + + var mediaW = 460, + mediaH = 345, + autoplay = false; + + + if (/^(https?:\/\/)?(www\.)?youtu\.?be/.test(src)) { + var urlparts = src.split(/[?&]/g), + ytid = "", + vtest = /^v=/; + urlparts.slice(1).forEach(function(p) { + if (/^v=/.test(p)) { + ytid = p.replace(vtest,""); + } + }); + if (!ytid) { + ytid = (urlparts[0].match(/[^\/]+$/) || [""])[0]; + } + videoWrap.html(youtubeTemplate({ + ytid: ytid, + width: mediaW, + height: mediaH, + autoplay: autoplay + })); + return; + } + + if (/^(https?:\/\/)?(www\.)?vimeo/.test(src)) { + $.ajax({ + url: "http://vimeo.com/api/oembed.json", + dataType: "jsonp", + data: { + width: mediaW, + height: mediaH, + url: src, + autoplay: autoplay, + color: "be4477", + portrait: false, + title: false, + byline: false + }, + success: function(data) { + videoWrap.html(data.html); + } + }); + return; + } + + if (/^(https?:\/\/)?(www\.)?dailymotion/.test(src)) { + $.ajax({ + url: "http://www.dailymotion.com/services/oembed", + dataType: "jsonp", + data: { + format: "json", + maxwidth: mediaW, + maxheight: mediaH, + url: src + }, + success: function(data) { + videoWrap.html(data.html); + } + }); + return; + } + + if (/^(https?:\/\/)?(www\.)?soundcloud\.com/.test(src)) { + $.ajax({ + url: "http://soundcloud.com/oembed", + dataType: "jsonp", + data: { + format: "js", + show_comments: false, + auto_play: autoplay, + show_artwork: false, + url: src, + color: "63be6c" + }, + success: function(data) { + videoWrap.html(data.html); + } + }); + return; + } + + var extension = (src.match(/\.([\d\w]+)$/) || ["",""])[1], + mimetype = 'video' + "/" + extension, + fallbacks = { "video/webm": "mp4", "video/mp4": "webm" }, + canPlay = document.createElement("video").canPlayType(mimetype); + + if (!canPlay) { + src = src.replace(/\.[\d\w]+$/,"." + fallbacks[mimetype]); + } + + console.log(mimetype, canPlay, src); + + videoWrap.html(htmlTemplate({ + type: 'video', + src: src, + width: mediaW, + height: mediaH, + autoplay: "" + autoplay + })); + +} \ No newline at end of file diff -r 4f0e84a8fff8 -r 58f5d9d76fad src/metadatacomposer/templates/metadatacomposer_modal_content.html --- a/src/metadatacomposer/templates/metadatacomposer_modal_content.html Wed May 29 18:40:39 2013 +0200 +++ b/src/metadatacomposer/templates/metadatacomposer_modal_content.html Thu May 30 13:32:05 2013 +0200 @@ -4,7 +4,7 @@
    diff -r 4f0e84a8fff8 -r 58f5d9d76fad src/metadatacomposer/templates/metadatacomposer_modal_content_library.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/metadatacomposer/templates/metadatacomposer_modal_content_library.html Thu May 30 13:32:05 2013 +0200 @@ -0,0 +1,13 @@ +{% load static %} +{% load thumbnail %} +
    +
    + +
    +
    + {% include 'partial/library_content_list.html' %} +
    +
    \ No newline at end of file diff -r 4f0e84a8fff8 -r 58f5d9d76fad src/metadatacomposer/templates/metadatacomposer_resource_list.html --- a/src/metadatacomposer/templates/metadatacomposer_resource_list.html Wed May 29 18:40:39 2013 +0200 +++ b/src/metadatacomposer/templates/metadatacomposer_resource_list.html Thu May 30 13:32:05 2013 +0200 @@ -125,5 +125,22 @@ } }); }); + $(document).on('click', 'a.content_pagination_library', 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) { + $("#content_list_container_library").html(data); + }, + error: function(jqXHR, textStatus, errorThrown) { + resp = $.parseJSON(jqXHR.responseText); + alert(resp.message); + } + }); + }); {% endblock %} diff -r 4f0e84a8fff8 -r 58f5d9d76fad src/metadatacomposer/templates/partial/library_content_list.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/metadatacomposer/templates/partial/library_content_list.html Thu May 30 13:32:05 2013 +0200 @@ -0,0 +1,41 @@ +{% load static %} +{% load i18n %} +{% load thumbnail %} +{% load front_tags %} +
    + {% for res in content_results %} +
    + + {% thumbnail res.content.image "140x140" crop="center" format="PNG" as im %}{% empty %}{% endthumbnail %} +
    {{ res.content.title }}
     +
    + {% endfor %} +
    + \ No newline at end of file diff -r 4f0e84a8fff8 -r 58f5d9d76fad src/metadatacomposer/templates/partial/library_image_list.html --- a/src/metadatacomposer/templates/partial/library_image_list.html Wed May 29 18:40:39 2013 +0200 +++ b/src/metadatacomposer/templates/partial/library_image_list.html Thu May 30 13:32:05 2013 +0200 @@ -5,8 +5,11 @@
    {% for i in image_results %}
    - {% thumbnail i.image_file "140x140" crop="center" format="PNG" as im %}{% empty %}{% endthumbnail %} -
    {{ i.title }}
    + + {% thumbnail i.image_file "140x140" crop="center" format="PNG" as im %}{% empty %}{% endthumbnail %} +
    {{ i.title }}
    {% endfor %}
    diff -r 4f0e84a8fff8 -r 58f5d9d76fad src/metadatacomposer/urls.py --- a/src/metadatacomposer/urls.py Wed May 29 18:40:39 2013 +0200 +++ b/src/metadatacomposer/urls.py Thu May 30 13:32:05 2013 +0200 @@ -4,7 +4,8 @@ MetadataComposerModalContent, MetadataComposerModalImage,\ MetadataComposerImagePagination, MetadataComposerModalImageLibrary,\ MetadataComposerRemoveImage, MetadataComposerRemoveContent,\ - MetadataComposerRemoveProject, MetadataComposerImage + MetadataComposerRemoveProject, MetadataComposerImage,\ + MetadataComposerModalContentLibrary urlpatterns = patterns('', url(r'^jsi18n/(?P\S+?)/$', 'django.views.i18n.javascript_catalog', name='jsi18n'), @@ -14,6 +15,7 @@ url(r'^(?P.*)/contentpage/$', MetadataComposerContentPagination.as_view(), name="composer_content_page"), url(r'^(?P.*)/modalcontent/(?P[\w-]+)/$', MetadataComposerModalContent.as_view(), name="composer_modal_content"), url(r'^(?P.*)/modalcontent/$', MetadataComposerModalContent.as_view(), name="composer_modal_content"), + url(r'^(?P.*)/modalcontentlibrary/$', MetadataComposerModalContentLibrary.as_view(), name="composer_modal_content_library"), url(r'^(?P.*)/modalimage/$', MetadataComposerModalImage.as_view(), name="composer_modal_image"), url(r'^(?P.*)/modalimagelibrary/$', MetadataComposerModalImageLibrary.as_view(), name="composer_modal_image_library"), url(r'^(?P.*)/removecontent/$', MetadataComposerRemoveContent.as_view(), name="composer_remove_content"), diff -r 4f0e84a8fff8 -r 58f5d9d76fad src/metadatacomposer/views.py --- a/src/metadatacomposer/views.py Wed May 29 18:40:39 2013 +0200 +++ b/src/metadatacomposer/views.py Thu May 30 13:32:05 2013 +0200 @@ -143,7 +143,10 @@ class MetadataComposerContentPagination(TemplateResponseMixin, MetadataComposerContextView): def get_template_names(self): - return "partial/resource_content_list.html" + if self.template_name and self.template_name!="": + return self.template_name + else: + return "partial/resource_content_list.html" @method_decorator(login_required) @method_decorator(never_cache) @@ -153,8 +156,14 @@ def get(self, request, branding="iri", **kwargs): self.branding = branding page = request.GET.get("page") or 1 + mode = request.GET.get("mode") or "resource" + select_media = False + if mode=="library": + self.template_name = "partial/library_content_list.html" + select_media = True + # Get current contents page and theirs projects - content_results = get_contents_and_projects(page, request.user) + content_results = get_contents_and_projects(page, request.user, select_media) context = self.get_context_dict(request) context.update({"content_results":content_results}) @@ -180,12 +189,16 @@ -def get_contents_and_projects(page, user): +def get_contents_and_projects(page, user, select_media=False): # We get the current's page contents # prefetch_related("project_set") is unfortunately useless because we have to filter the project queryset later - contents = Content.safe_objects.order_by('-update_date') - nb = getattr(settings, 'METADATACOMPOSER_ELEMENTS_PER_PAGE', 9) + if select_media: + contents = Content.safe_objects.select_related("media_obj").order_by('-update_date') + nb = 8 + else: + nb = getattr(settings, 'METADATACOMPOSER_ELEMENTS_PER_PAGE', 9) + contents = Content.safe_objects.order_by('-update_date') if page=="x": nb = contents.count() paginator = Paginator(contents, nb) @@ -198,6 +211,8 @@ results_object_list = [] for content in results.object_list: # We filter the content's projects with the user's ones + if select_media: + content.url = content.videopath.rstrip('/') + "/" + content.src projects = content.project_set.all().filter(owner=user) results_object_list.append({"content":content, "projects":projects}) @@ -306,10 +321,26 @@ -class MetadataComposerRemoveImage(View): +class MetadataComposerModalContentLibrary(TemplateResponseMixin, MetadataComposerContextView): def get_template_names(self): - return "metadatacomposer_modal_image_library.html" + return "metadatacomposer_modal_content_library.html" + + @method_decorator(login_required) + @method_decorator(never_cache) + def dispatch(self, *args, **kwargs): + return super(MetadataComposerModalContentLibrary, self).dispatch(*args, **kwargs) + + def get(self, request, branding="iri", **kwargs): + self.branding = branding + + context = self.get_context_dict(request) + context.update({"content_results":get_contents_and_projects(1, request.user, True)}) + return self.render_to_response(context) + + + +class MetadataComposerRemoveImage(View): @method_decorator(login_required) def get(self, request, branding="iri", **kwargs):