--- a/server/src/remie/static/remie/css/style.css Fri Sep 18 13:04:51 2015 +0200
+++ b/server/src/remie/static/remie/css/style.css Thu Sep 17 11:58:01 2015 +0200
@@ -330,7 +330,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- width: 320px !important;
+ width: 270px !important;
display: inline-block !important;
margin: 0px !important;
font-size: 12px !important;
@@ -340,6 +340,8 @@
.Ldt-AnnotationsList-li p.Ldt-AnnotationsList-Title{
color: #848484;
font-weight: normal;
+ position: relative;
+ right: 40px;
}
.Ldt-AnnotationsList-li .Ldt-AnnotationsList-CreationDate{
float:left;
--- a/server/src/remie/static/remie/css/teacher.css Fri Sep 18 13:04:51 2015 +0200
+++ b/server/src/remie/static/remie/css/teacher.css Thu Sep 17 11:58:01 2015 +0200
@@ -23,6 +23,40 @@
margin-left: 0;
}
+.Ldt-AnnotationsList-DeleteButton {
+ position: relative;
+ top: 0px !important;
+}
+
+.Ldt-AnnotationsList-Screen{
+ background-color: #F3F7F8;
+}
+
+.Ldt-AnnotationsList-ScreenMain{
+ margin: 0px;
+ padding: 0px;
+}
+
+.Ldt-AnnotationsList-ul-ToDelete .Ldt-AnnotationsList-li{
+ background-color: white;
+}
+
+ul.Ldt-AnnotationsList-ul {
+ padding: 0px;
+ margin: 0px;
+}
+
+.Ldt-AnnotationsList-Close{
+ position: relative;
+ top: -45px;
+ left: 200px;
+}
+
+.Ldt-AnnotationsList-ScreenDelete{
+ margin-top: 15px;
+ padding-top: 15px;
+}
+
/* ----- Filter style ----- */
.Ldt-AnnotationsListWidget .Ldt-AnnotationsList-Filters{
--- a/server/src/remie/static/remie/metadataplayer/AnnotationsList.css Fri Sep 18 13:04:51 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/AnnotationsList.css Thu Sep 17 11:58:01 2015 +0200
@@ -45,11 +45,12 @@
margin: 4px 2px;
}
-ul.Ldt-AnnotationsList-ul {
+ul.Ldt-AnnotationsList-ul, ul.Ldt-AnnotationsList-ul-toDelete {
list-style: none;
- padding: 2px;
- margin: 0;
+ padding: 0px;
+ margin: 0px;
}
+
li.Ldt-AnnotationsList-li {
width: 100%;
clear: both;
@@ -73,6 +74,21 @@
max-height: 100%;
margin: 0 auto;
}
+
+.Ldt-AnnotationsList-DeleteButton {
+ margin: 0px;
+ float: right;
+ font-size: 20px;
+ position: relative;
+ top: -50px;
+ left: -5px;
+ color: #787878
+}
+.Ldt-AnnotationsList-DeleteButton:hover {
+ color: #f7268e;
+ cursor: pointer;
+}
+
.Ldt-AnnotationsList-Duration {
color: #f7268e;
float: right;
@@ -144,4 +160,26 @@
.Ldt-AnnotationsList-Play:hover {
background-position: 0 bottom;
+}
+
+.Ldt-AnnotationsList-ScreenMain{
+ margin: 0px;
+ padding: 0px;
+}
+
+.Ldt-AnnotationsList-ScreenDelete, .Ldt-AnnotationsList-ScreenSending,
+.Ldt-AnnotationsList-ScreenError, .Ldt-AnnotationsList-ScreenSuccess{
+ margin-top: 15px;
+ width: 100%
+ text-align: center;
+ vertical-align: middle;
+ font-size: 14px;
+ font-weight: bold;
+ color: #68273C;
+}
+
+a.Ldt-AnnotationsList-Close {
+ position: absolute; right: 2px;
+ display: inline-block; width: 17px; height: 17px; margin: 4px;
+ background: url(img/widget-control.png);
}
\ No newline at end of file
--- a/server/src/remie/static/remie/metadataplayer/AnnotationsList.js Fri Sep 18 13:04:51 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/AnnotationsList.js Thu Sep 17 11:58:01 2015 +0200
@@ -45,12 +45,18 @@
current_day_filter: true,
show_header : false,
custom_header : false,
- annotation_count_header : true,
+ annotations_count_header : true,
show_creation_date : false,
show_timecode : true,
/*
* Only annotation in the current segment will be displayed. Designed to work with the Segments Widget.
*/
+ allow_annotations_deletion: false,
+ /*
+ * URL to call when deleting annotation. Expects a mustache template with {{annotation_id}}, ex /api/anotations/{{annotation_id}}/
+ */
+ api_delete_endpoint : "",
+ api_delete_method: "DELETE",
filter_by_segments: false,
segment_filter: true,
segments_annotation_type: "chap",
@@ -85,6 +91,13 @@
header: "Annotations for this content",
segment_filter: "All cuttings",
latest_contributions: "Latest contributions",
+ close_widget: "Close",
+ confirm: "Confirm",
+ cancel: "Cancel",
+ annotation_deletion_delete: "You will delete this annotation : ",
+ annotation_deletion_sending: "Your deletion request is being sent ... ",
+ annotation_deletion_success: "The annotation has been deleted.",
+ annotation_deletion_error: "There was an error contacting the server. The annotation has not been deleted."
},
fr: {
voice_annotation: "Annotation Vocale",
@@ -93,6 +106,13 @@
header: "Annotations sur ce contenu",
segment_filter: "Tous les segments",
latest_contributions: "Dernières contributions",
+ close_widget: "Fermer",
+ confirm: "Confirmer",
+ cancel: "Annuler",
+ annotation_deletion_delete: "Vous allez supprimer cette annotation: ",
+ annotation_deletion_sending: "Votre demande de suppression est en cours d'envoi ... ",
+ annotation_deletion_success: "L'annotation a été supprimée.",
+ annotation_deletion_error: "Une erreur s'est produite en contactant le serveur. L'annotation n'a pas été supprimée."
}
};
@@ -102,30 +122,54 @@
+ '{{^custom_header}}{{l10n.header}}{{/custom_header}}'
+ '</p>{{/show_header}}'
+ '<div class="Ldt-AnnotationsListWidget">'
- + '{{#show_filters}}'
- + '<div class="Ldt-AnnotationsList-Filters">'
- + '{{#keyword_filter}}<input class="Ldt-AnnotationsList-filter-text" id="Ldt-AnnotationsList-keywordsFilter" type="text" value=""></input>{{/keyword_filter}}'
- + '{{#user_filter}}<select class="Ldt-AnnotationsList-filter-dropdown" id="Ldt-AnnotationsList-userFilter"><option selected value="">{{l10n.everyone}}</option></select>{{/user_filter}}'
- + '{{#date_filter}}<label class="Ldt-AnnotationsList-filter-date">Date: <input id="Ldt-AnnotationsList-dateFilter" type="text"></input></label>{{/date_filter}}'
- + '{{#segment_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-ignoreSegmentsFilter">{{l10n.segment_filter}}</label>{{/segment_filter}}'
- + '{{#latest_contributions_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-latestContributionsFilter">{{l10n.latest_contributions}}</label>{{/latest_contributions_filter}}'
- + '</div>'
- + '{{/show_filters}}'
- + '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
- + '<ul class="Ldt-AnnotationsList-ul">'
- + '</ul>'
+ + '<div class="Ldt-AnnotationsList-ScreenMain">'
+ + '{{#show_filters}}'
+ + '<div class="Ldt-AnnotationsList-Filters">'
+ + '{{#keyword_filter}}<input class="Ldt-AnnotationsList-filter-text" id="Ldt-AnnotationsList-keywordsFilter" type="text" value=""></input>{{/keyword_filter}}'
+ + '{{#user_filter}}<select class="Ldt-AnnotationsList-filter-dropdown" id="Ldt-AnnotationsList-userFilter"><option selected value="">{{l10n.everyone}}</option></select>{{/user_filter}}'
+ + '{{#date_filter}}<label class="Ldt-AnnotationsList-filter-date">Date: <input id="Ldt-AnnotationsList-dateFilter" type="text"></input></label>{{/date_filter}}'
+ + '{{#segment_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-ignoreSegmentsFilter">{{l10n.segment_filter}}</label>{{/segment_filter}}'
+ + '{{#latest_contributions_filter}}<label class="Ldt-AnnotationsList-filter-checkbox"><input type="checkbox" id="Ldt-AnnotationsList-latestContributionsFilter">{{l10n.latest_contributions}}</label>{{/latest_contributions_filter}}'
+ + '</div>'
+ + '{{/show_filters}}'
+ + '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
+ + '<ul class="Ldt-AnnotationsList-ul">'
+ + '</ul>'
+ + '</div>'
+ + '{{#allow_annotations_deletion}}'
+ + '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenDelete">'
+ + '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'
+ + '<ul class="Ldt-AnnotationsList-ul-ToDelete"></ul>'
+ + '{{l10n.annotation_deletion_delete}} <a class="Ldt-AnnotationsList-ConfirmDelete">{{l10n.confirm}}</a> <a class="Ldt-AnnotationsList-CancelDelete">{{l10n.cancel}}</a>'
+ + '</div>'
+ + '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSending">'
+ + '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'
+ + '{{l10n.annotation_deletion_sending}}'
+ + '</div>'
+ + '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenSuccess">'
+ + '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'
+ + '{{l10n.annotation_deletion_success}}'
+ + '</div>'
+ + '<div id="{{id}}" class="Ldt-AnnotationsList-Screen Ldt-AnnotationsList-ScreenError">'
+ + '<a title="{{l10n.close_widget}}" class="Ldt-AnnotationsList-Close" href="#"></a>'
+ + '{{l10n.annotation_deletion_error}}'
+ + '</div>'
+ + '{{/allow_annotations_deletion}}'
+ '</div>';
IriSP.Widgets.AnnotationsList.prototype.annotationTemplate =
'<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'
- + '<div class="Ldt-AnnotationsList-ThumbContainer">'
+ + '<div id="{{id}}" class="Ldt-AnnotationsList-ThumbContainer Ldt-AnnotationsList-Annotation-Screen Ldt-AnnotationsList-Annotation-ScreenMain">'
+ '<a href="{{url}}" draggable="true">'
+ '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
+ '</a>'
+ '</div>'
+ + '{{#allow_annotations_deletion}}'
+ + '<div id={{id}} class="Ldt-AnnotationsList-DeleteButton">✖</div>'
+ + '{{/allow_annotations_deletion}}'
+ '{{#show_timecode}}<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>{{/show_timecode}}'
+ '<h3 class="Ldt-AnnotationsList-Title" draggable="true">'
- + '<a href="{{url}}">{{{htitle}}}</a>'
+ + '<a {{#url}} href="{{url}}" {{/url}}>{{{htitle}}}</a>'
+ '</h3>'
+ '<p class="Ldt-AnnotationsList-Description">{{{hdescription}}}</p>'
+ '{{#created}}'
@@ -142,7 +186,7 @@
+ '{{/tags}}'
+ '</ul>'
+ '{{/tags.length}}'
- + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}'
+ + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-annotation-id="{{id}}">{{l10n.voice_annotation}}</div>{{/audio}}'
+ '</li>';
// obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project
@@ -162,6 +206,11 @@
}, this.metadata));
};
+IriSP.Widgets.AnnotationsList.prototype.showScreen = function(_screenName) {
+ this.$.find('.Ldt-AnnotationsList-Screen' + _screenName).show()
+ .siblings().hide();
+}
+
IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() {
var _currentTime = this.media.getCurrentTime();
var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime);
@@ -228,6 +277,10 @@
return (_currentSegments[0].begin <= _annotation_time && _currentSegments[0].end >= _annotation_time)
});
}
+ if(this.annotations_count_header && this.annotations_count != _list.length){
+ this.annotations_count = _list.length;
+ this.refreshHeader();
+ }
}
if (this.show_only_annotation_from_user){
_list = _list.filter(function(_annotation){
@@ -364,7 +417,8 @@
url : _url,
tags : _tags,
specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
- l10n: _this.l10n
+ l10n: _this.l10n,
+ allow_annotations_deletion: _this.allow_annotations_deletion
};
if (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null") {
_data.audio = true;
@@ -456,6 +510,8 @@
_$.html(IriSP.textFieldHtml(_$.text(), rx));
});
}
+
+ this.$.find(".Ldt-AnnotationsList-DeleteButton").click(_this.functionWrapper("onDeleteClick"))
}
if (this.ajax_url) {
@@ -471,6 +527,65 @@
return _list.length;
};
+IriSP.Widgets.AnnotationsList.prototype.onDeleteClick = function(event){
+
+ ann_id = event.target.id;
+ console.log(ann_id)
+ delete_preview_$ = this.$.find(".Ldt-AnnotationsList-ul-ToDelete");
+ delete_preview_$.html("");
+ _list = this.getWidgetAnnotations()
+ _list = _list.filter(function(_annotation){
+ return _annotation.id == ann_id
+ })
+ var _annotation = _list[0],
+ _title = "",
+ _this = this;
+ console.log(_annotation)
+ if (_annotation.creator) {
+ _title = _annotation.creator;
+ }
+ if (_annotation.title) {
+ var tempTitle = _annotation.title;
+ if( tempTitle.substr(0, _title.length + 1) == (_title + ":") ){
+ _title = "";
+ }
+ _title = _title + ( (_title=="") ? "" : ": ") + _annotation.title;
+ }
+ var _created = false;
+ if (this.show_creation_date) {
+ _created = _annotation.created.toLocaleDateString()+", "+_annotation.created.toLocaleTimeString();
+ }
+ var _data = {
+ id : _annotation.id,
+ media_id : _annotation.getMedia().id,
+ htitle : IriSP.textFieldHtml(_title),
+ hdescription : IriSP.textFieldHtml(_annotation.description),
+ begin : _annotation.begin.toString(),
+ end : _annotation.end.toString(),
+ created : _created,
+ show_timecode : this.show_timecode,
+ tags : false,
+ l10n: this.l10n,
+ allow_annotations_deletion: false
+ }
+ _html = Mustache.to_html(this.annotationTemplate, _data)
+ delete_preview_$.html(_html)
+
+ this.$.find(".Ldt-AnnotationsList-ConfirmDelete").click(function(){
+ _this.sendDelete(ann_id);
+ });
+
+ this.showScreen("Delete");
+}
+
+IriSP.Widgets.AnnotationsList.prototype.refreshHeader = function() {
+ var annotation_count_string = " (" + this.annotations_count +" annotations)";
+ this.$.find('.Ldt-AnnotationsList-header').html("");
+ this.$.find('.Ldt-AnnotationsList-header').html(
+ this.custom_header && typeof this.custom_header == "string"? this.custom_header + annotation_count_string : this.l10n.header + annotation_count_string
+ );
+}
+
IriSP.Widgets.AnnotationsList.prototype.hide = function() {
var _this = this;
if (this.visible){
@@ -478,6 +593,7 @@
this.widget_$.slideUp(function(){
_this.$.find('.Ldt-AnnotationsList-header').hide();
});
+ this.showScreen("Main")
}
}
@@ -486,6 +602,7 @@
this.visible = true;
this.$.find('.Ldt-AnnotationsList-header').show();
this.widget_$.slideDown();
+ this.showScreen("Main")
}
}
@@ -500,8 +617,37 @@
}
};
+IriSP.Widgets.AnnotationsList.prototype.revertToMainScreen = function(){
+ if (this.$.find(".Ldt-AnnotationsList-ScreenMain").is(":hidden")){
+ this.showScreen("Main");
+ }
+}
+
+IriSP.Widgets.AnnotationsList.prototype.sendDelete = function(id){
+ console.log("deleting "+id)
+ var _this = this,
+ _url = Mustache.to_html(this.api_delete_endpoint, {annotation_id: id})
+
+ IriSP.jQuery.ajax({
+ url: _url,
+ type: this.api_delete_method,
+ contentType: 'application/json',
+ success: function(_data) {
+ _this.showScreen('Success');
+ window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 2000));
+ _this.currentSource.getAnnotations().removeId(id);
+ _this.player.trigger("AnnotationsList.refresh");
+ },
+ error: function(_xhr, _error, _thrown) {
+ IriSP.log("Error when sending annotation", _thrown);
+ _this.showScreen('Error');
+ window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 2000));
+ }
+ });
+ this.showScreen('Sending');
+}
+
IriSP.Widgets.AnnotationsList.prototype.draw = function() {
-
this.jwplayers = {};
this.mashupMode = (this.media.elementType === "mashup");
@@ -581,14 +727,15 @@
_this.currentSource.getAnnotations().trigger("clear-search");
}
});
+
+ this.$.find(".Ldt-AnnotationsList-Close").click(function(){
+ _this.showScreen("Main");
+ })
+
this.source.getAnnotations().on("search-cleared", function() {
_this.throttledRefresh();
});
- if (this.show_filters){
-
- }
-
this.onMdpEvent("AnnotationsList.refresh", function() {
if (_this.ajax_url) {
if (_this.mashupMode) {
@@ -616,6 +763,10 @@
}, this.refresh_interval);
}
+ if (this.annotations_count_header){
+ this.annotations_count = false;
+ }
+
this.onMdpEvent("AnnotationsList.toggle","toggle");
this.onMdpEvent("AnnotationsList.hide", "hide");
this.onMdpEvent("AnnotationsList.show", "show");
@@ -633,9 +784,13 @@
this.throttledRefresh();
+ this.showScreen("Main");
+ this.$.find(".Ldt-AnnotationsList-CancelDelete").click(function(){
+ _this.showScreen("Main")
+ });
+
this.visible = true;
if (!this.start_visible){
this.hide();
}
-
};
--- a/server/src/remie/static/remie/metadataplayer/LdtPlayer-core.js Fri Sep 18 13:04:51 2015 +0200
+++ b/server/src/remie/static/remie/metadataplayer/LdtPlayer-core.js Thu Sep 17 11:58:01 2015 +0200
@@ -2462,15 +2462,24 @@
_this.player.trigger("widget-loaded");
}
+ if (this.pre_draw_callback){
+ onloadcallback = function(){
+ IriSP.jQuery.when(_this.pre_draw_callback()).done(onsourceloaded());
+ }
+ }
+ else {
+ onloadcallback = onsourceloaded;
+ }
+
if (this.metadata) {
/* Getting metadata */
this.source = player.loadMetadata(this.metadata);
/* Call draw when loaded */
- this.source.onLoad(onsourceloaded);
+ this.source.onLoad(onloadcallback);
} else {
if (this.source) {
- onsourceloaded();
+ onloadcallback();
}
}
--- a/server/src/remie/templates/remie/iframe_teacher.html Fri Sep 18 13:04:51 2015 +0200
+++ b/server/src/remie/templates/remie/iframe_teacher.html Thu Sep 17 11:58:01 2015 +0200
@@ -124,7 +124,7 @@
},{
type: "AnnotationsList",
container: "AnnotationsList_container",
- annotation_type: "user_{{current_user}}",
+ annotation_type: "user_",
filter_by_segments: true,
segments_annotation_type: "découpage",
show_creation_date: true,
@@ -137,9 +137,11 @@
start_visible: false,
newest_first: true,
tags: false,
+ allow_annotations_deletion: true,
+ api_delete_endpoint: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}{% templatetag openvariable %}annotation_id{% templatetag closevariable %}/"
},{
type: "LatestAnnotation",
- annotation_type: "user_{% if not group_mode %}{{current_user}}{% endif %}",
+ annotation_type: "user_",
container: "LatestAnnotation_container",
filter_by_segment: true,
starts_hidden: true,
@@ -147,7 +149,7 @@
segments_annotation_type: "découpage",
selectable_annotations: true,
copy_and_edit_button: true,
- show_header: true,
+ show_header: false,
},{
type: "CurrentSegmentInfobox",
annotation_type: "découpage",