--- a/src/widgets/CurrentSegmentInfobox.js Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/CurrentSegmentInfobox.js Wed Sep 04 17:32:50 2024 +0200
@@ -1,334 +1,427 @@
/* Widget displays info on the current segment, with possibility of config for editing description and tags */
+// CurrentSegmentInfobox
+
+import currentSegmentInfoboxStyles from "./CurrentSegmentInfobox.module.css";
+import Mustache from "mustache";
+import _ from "lodash";
+
+const CurrentSegmentInfobox = function (ns) {
+ return class extends ns.Widgets.Widget {
+ constructor(player, config) {
+ super(player, config);
+ }
+
+ static defaults = {
+ annotation_type: "chap",
+ editable_segments: false,
+ empty_message: false,
+ project_id: false,
+ api_serializer: "ldt_annotate",
+ api_method: "PUT",
+ api_endpoint_template: "",
+ new_tag_button: true,
+ show_headers: false,
+ custom_edit_text: false,
+ empty_description_placeholder: false,
+ };
+
+ static template =
+ '<div class="Ldt-CurrentSegmentInfobox">' +
+ '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">' +
+ '{{#editable_segments}}<div class="Ldt-CurrentSegmentInfobox-EditButton">{{edit}}</div>{{/editable_segments}}' +
+ '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>' +
+ '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description">{{description}}</div>' +
+ '{{^description}}{{^tags.length}}{{#description_placeholder}}<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description-placeholder">{{description_placeholder}}</div>{{/description_placeholder}}{{/tags.length}}{{/description}}' +
+ '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">' +
+ "{{#tags.length}}" +
+ '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">' +
+ "{{#tags}}" +
+ "{{#.}}" +
+ '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' +
+ "<span>{{.}}</span>" +
+ "</li>" +
+ "{{/.}}" +
+ "{{/tags}}" +
+ "</ul>" +
+ "{{/tags.length}}" +
+ "</div>" +
+ "</div>" +
+ "</div>";
+
+ static editTemplate =
+ '<div class="Ldt-CurrentSegmentInfobox">' +
+ '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">' +
+ '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-FieldsHeader">{{fields_header}}</div>{{/headers}}' +
+ '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>' +
+ '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>' +
+ '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">' +
+ '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-TagsHeader">{{tags_header}}</div>{{/headers}}' +
+ "{{#new_tag_button}}" +
+ '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>' +
+ "{{/new_tag_button}}" +
+ "{{^new_tag_button}}" +
+ '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>' +
+ '<div class="Ldt-CurrentSegmentInfobox-CreateTagInput-Add">+</div>' +
+ "{{/new_tag_button}}" +
+ '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">' +
+ "{{#tags}}" +
+ "{{#.}}" +
+ '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' +
+ '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="{{.}}"></input>' +
+ '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">{{delete_tag}}</div>' +
+ "</li>" +
+ "{{/.}}" +
+ "{{/tags}}" +
+ "</ul>" +
+ "</div>" +
+ '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>' +
+ '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>' +
+ "</div>" +
+ "</div>";
-IriSP.Widgets.CurrentSegmentInfobox = function(player, config){
- IriSP.Widgets.Widget.call(this, player, config);
-};
+ static messages = {
+ fr: {
+ submit: "Soumettre",
+ cancel: "Annuler",
+ edit: "Editer",
+ new_tag: "Nouveau tag",
+ delete_tag: "Supprimer",
+ fields_header: "Commentaire associé à ce segment",
+ tags_header: "Mots-clés associés à ce segment",
+ empty: "Le player vidéo ne lit actuellement aucun segment",
+ },
+ en: {
+ submit: "Submit",
+ cancel: "Cancel",
+ edit: "Edit",
+ new_tag: "New tag",
+ delete_tag: "Delete tag",
+ fields_header: "Current segment content",
+ tags_header: "Current segment tags",
+ empty: "The player currently doesn't read any segment",
+ },
+ };
-IriSP.Widgets.CurrentSegmentInfobox.prototype = new IriSP.Widgets.Widget();
+ draw() {
+ var _this = this;
+ this.segments = this.getWidgetAnnotations();
+ this.renderTemplate();
+ this.currentSegment = false;
+ this.clearBox();
+ this.refresh();
+ this.onMediaEvent("timeupdate", "refresh");
+ this.onMediaEvent("settimerange", function (_timeRange) {
+ var _segmentBegin = _timeRange[0],
+ _segmentEnd = _timeRange[1],
+ _list = _this.segments.filter(function (_segment) {
+ return (
+ _segment.begin.milliseconds == _segmentBegin.milliseconds &&
+ _segment.end.milliseconds == _segmentEnd.milliseconds
+ );
+ });
+ if (_list.length > 0) {
+ _this.$.toggleClass("editing", false);
+ if (_this.currentSegment.id != _list[0].id) {
+ _this.currentSegment = _list[0];
+ _data = {
+ editable_segments: _this.editable_segments,
+ edit: _this.custom_edit_text
+ ? _this.custom_edit_text
+ : _this.l10n.edit,
+ title: _this.currentSegment.title,
+ description: _this.currentSegment.description,
+ description_placeholder: _this.empty_description_placeholder,
+ tags: _this.currentSegment.getTagTexts(),
+ };
+ _this.$.html(Mustache.render(_this.template, _data));
+ if (_this.editable_segments && _this.currentSegment) {
+ _this.$.find(".Ldt-CurrentSegmentInfobox").click(
+ _this.functionWrapper("enableEditMode")
+ );
+ }
+ }
+ }
+ });
+
+ if (this.editable_segments && this.currentSegment) {
+ this.$.find(".Ldt-CurrentSegmentInfobox").click(
+ _this.functionWrapper("enableEditMode")
+ );
+ }
+ }
+
+ enableEditMode() {
+ var _this = this;
+ if (this.currentSegment) {
+ _data = {
+ title: this.currentSegment.title,
+ description: this.currentSegment.description,
+ tags: this.currentSegment.getTagTexts(),
+ submit: this.l10n.submit,
+ cancel: this.l10n.cancel,
+ headers: this.show_headers,
+ tags_header: this.custom_tags_header
+ ? this.custom_tags_header
+ : this.l10n.tags_header,
+ fields_header: this.custom_fields_header
+ ? this.custom_fields_header
+ : this.l10n.fields_header,
+ new_tag: this.l10n.new_tag,
+ delete_tag: this.l10n.delete_tag,
+ new_tag_button: this.new_tag_button,
+ };
+ this.$.toggleClass("editing", true);
+ this.$.html(Mustache.render(this.editTemplate, _data));
+ this.$.find(".Ldt-CurrentSegmentInfobox-CancelButton").click(
+ this.functionWrapper("disableEditMode")
+ );
+ if (this.new_tag_button) {
+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(
+ this.functionWrapper("insertTagInput")
+ );
+ } else {
+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").keypress(
+ this.functionWrapper("insertTagInputKeypress")
+ );
+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput-Add").click(
+ this.functionWrapper("insertTagInputKeypress")
+ );
+ }
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(
+ this.functionWrapper("deleteTagInput")
+ );
+ this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click(
+ this.functionWrapper("onSubmit")
+ );
+ }
+ }
-IriSP.Widgets.CurrentSegmentInfobox.prototype.defaults = {
- annotation_type: "chap",
- editable_segments: false,
- empty_message: false,
- project_id: false,
- api_serializer: "ldt_annotate",
- api_method: "PUT",
- api_endpoint_template: "",
- new_tag_button: true,
- show_headers: false,
- custom_edit_text: false,
- empty_description_placeholder: false,
+ disableEditMode() {
+ if (this.currentSegment) {
+ _data = {
+ editable_segments: this.editable_segments,
+ edit: this.custom_edit_text ? this.custom_edit_text : this.l10n.edit,
+ title: this.currentSegment.title,
+ description: this.currentSegment.description,
+ description_placeholder: this.empty_description_placeholder,
+ tags: this.currentSegment.getTagTexts(),
+ };
+ this.$.toggleClass("editing", false);
+ this.$.html(Mustache.render(this.template, _data));
+ this.$.find(".Ldt-CurrentSegmentInfobox").click(
+ this.functionWrapper("enableEditMode")
+ );
+ }
+ }
+
+ insertTagInput() {
+ if (
+ !this.currentSegment.getTagTexts().length &&
+ !this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length
+ ) {
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend(
+ '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>'
+ );
+ }
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append(
+ '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' +
+ '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value=""></input>' +
+ '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">' +
+ this.l10n.delete_tag +
+ "</div>" +
+ "</li>"
+ );
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(
+ this.functionWrapper("deleteTagInput")
+ );
+ }
+
+ insertTagInputKeypress(event) {
+ var keycode = event.keyCode ? event.keyCode : event.which;
+ if (keycode == "13" || event.type == "click") {
+ if (
+ !this.currentSegment.getTagTexts().length &&
+ !this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length
+ ) {
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend(
+ '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>'
+ );
+ }
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append(
+ '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">' +
+ '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="' +
+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val() +
+ '"></input>' +
+ '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">' +
+ this.l10n.delete_tag +
+ "</div>" +
+ "</li>"
+ );
+ this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(
+ this.functionWrapper("deleteTagInput")
+ );
+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val("");
+ return false;
+ }
+ }
+
+ deleteTagInput(clickEvent) {
+ $(clickEvent.currentTarget).parent().remove();
+ }
+
+ onSubmit() {
+ new_tags_titles = this.$.find(
+ ".Ldt-CurrentSegmentInfobox-Tags-Li-Input"
+ ).map(function () {
+ if ($(this).val()) {
+ return $(this).val();
+ }
+ });
+ new_title = this.$.find(".Ldt-CurrentSegmentInfobox-TitleInput").val();
+ new_description = this.$.find(
+ ".Ldt-CurrentSegmentInfobox-DescriptionInput"
+ ).val();
+
+ var _this = this,
+ _exportedAnnotations = new ns.Model.List(
+ this.player.sourceManager
+ ) /* We create an Annotations List to send to the server */,
+ _export = this.player.sourceManager.newLocalSource({
+ serializer: ns.serializers[this.api_serializer],
+ }) /* We create a source object using a specific serializer for export */,
+ _annotation = new ns.Model.Annotation(
+ this.currentSegment.id,
+ _export
+ ); /* We create an annotation in the source with a generated ID (param. false) */
+
+ _annotation.setAnnotationType(this.currentSegment.getAnnotationType().id);
+ _annotation.setMedia(this.currentSegment.getMedia().id);
+ _annotation.setBegin(this.currentSegment.begin);
+ _annotation.setEnd(this.currentSegment.end);
+ _annotation.created = this.currentSegment.created;
+ _annotation.creator = this.currentSegment.creator;
+ _annotation.title = new_title; /* Title field */
+ _annotation.description = new_description; /* Description field */
+ var _tagIds = _(new_tags_titles).map(function (_title) {
+ var _tags = _this.source.getTags(true).searchByTitle(_title, true);
+ if (_tags.length) {
+ var _tag = _tags[0];
+ } else {
+ _tag = new ns.Model.Tag(_title.replace(/\W/g, "_"), _this.source);
+ _tag.title = _title;
+ _this.source.getTags().push(_tag);
+ }
+ return _tag.id;
+ }).value();
+ _annotation.setTags(_tagIds);
+ _annotation.project_id = this.project_id;
+
+ _exportedAnnotations.push(
+ _annotation
+ ); /* We add the annotation in the list to export */
+ _export.addList(
+ "annotation",
+ _exportedAnnotations
+ ); /* We add the list to the source object */
+
+ _url = Mustache.render(this.api_endpoint_template, {
+ annotation_id: this.currentSegment.id,
+ });
+
+ ns.jQuery.ajax({
+ url: _url,
+ type: this.api_method,
+ contentType: "application/json",
+ data: _export.serialize() /* Source is serialized */,
+ success: function (_data) {
+ _export
+ .getAnnotations()
+ .removeElement(
+ _annotation,
+ true
+ ); /* We delete the sent annotation to avoid redundancy */
+ _export.deSerialize(_data); /* Data deserialization */
+ _this.source.merge(
+ _export
+ ); /* We merge the deserialized data with the current source data */
+ _this.segments.forEach(function (_segment) {
+ if (_segment.id == _annotation.id) {
+ _this.segments.removeElement(_segment);
+ }
+ });
+ _this.segments.push(_annotation);
+ _this.currentSegment = _annotation;
+ _data = {
+ editable_segments: _this.editable_segments,
+ edit: _this.custom_edit_text
+ ? _this.custom_edit_text
+ : _this.l10n.edit,
+ title: _this.currentSegment.title,
+ description: _this.currentSegment.description,
+ description_placeholder: _this.empty_description_placeholder,
+ tags: _this.currentSegment.getTagTexts(),
+ };
+ _this.$.html(Mustache.render(_this.template, _data));
+ if (_this.editable_segments && _this.currentSegment) {
+ _this.$.find(".Ldt-CurrentSegmentInfobox").click(
+ _this.functionWrapper("enableEditMode")
+ );
+ }
+ _this.$.toggleClass("editing", false);
+ },
+ error: function (_xhr, _error, _thrown) {
+ ns.log("Error when sending annotation", _thrown);
+ _export.getAnnotations().removeElement(_annotation, true);
+ },
+ });
+ }
+
+ refresh() {
+ if (!this.media.getTimeRange()) {
+ var _currentTime = this.media.getCurrentTime();
+ var _list = this.segments.filter(function (_segment) {
+ return _segment.begin <= _currentTime && _segment.end >= _currentTime;
+ });
+
+ if (_list.length > 0) {
+ if (this.currentSegment.id != _list[0].id) {
+ this.currentSegment = _list[0];
+ _data = {
+ editable_segments: this.editable_segments,
+ edit: this.custom_edit_text
+ ? this.custom_edit_text
+ : this.l10n.edit,
+ title: this.currentSegment.title,
+ description: this.currentSegment.description,
+ description_placeholder: this.empty_description_placeholder,
+ tags: this.currentSegment.getTagTexts(),
+ };
+ this.$.html(Mustache.render(this.template, _data));
+ if (this.editable_segments && this.currentSegment) {
+ this.$.find(".Ldt-CurrentSegmentInfobox").click(
+ this.functionWrapper("enableEditMode")
+ );
+ }
+ }
+ } else {
+ this.currentSegment = false;
+ this.clearBox();
+ }
+ }
+ }
+
+ clearBox() {
+ var _empty_message = this.l10n.empty;
+ if (this.empty_message) {
+ _empty_message = this.empty_message;
+ }
+ this.$.find(".Ldt-CurrentSegmentInfobox").html(
+ "<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>" +
+ _empty_message +
+ "</div>"
+ );
+ }
+ };
};
-IriSP.Widgets.CurrentSegmentInfobox.prototype.template =
- '<div class="Ldt-CurrentSegmentInfobox">'
- + '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">'
- + '{{#editable_segments}}<div class="Ldt-CurrentSegmentInfobox-EditButton">{{edit}}</div>{{/editable_segments}}'
- + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Title">{{title}}</div>'
- + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description">{{description}}</div>'
- + '{{^description}}{{^tags.length}}{{#description_placeholder}}<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Description-placeholder">{{description_placeholder}}</div>{{/description_placeholder}}{{/tags.length}}{{/description}}'
- + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
- + '{{#tags.length}}'
- + '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
- + '{{#tags}}'
- + '{{#.}}'
- + '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
- + '<span>{{.}}</span>'
- + '</li>'
- + '{{/.}}'
- + '{{/tags}}'
- + '</ul>'
- + '{{/tags.length}}'
- + '</div>'
- + '</div>'
- + '</div>'
-
-IriSP.Widgets.CurrentSegmentInfobox.prototype.editTemplate =
- '<div class="Ldt-CurrentSegmentInfobox">'
- + '<div class="Ldt-CurrentSegmentInfobox-SelectedSegment">'
- + '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-FieldsHeader">{{fields_header}}</div>{{/headers}}'
- + '<input type="text" class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-TitleInput Ldt-CurrentSegmentInfobox-Title" value="{{title}}"></input>'
- + '<textarea class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-DescriptionInput Ldt-CurrentSegmentInfobox-Description">{{description}}</textarea>'
- + '<div class="Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-Tags">'
- + '{{#headers}}<div class="Ldt-CurrentSegmentInfobox-TagsHeader">{{tags_header}}</div>{{/headers}}'
- + '{{#new_tag_button}}'
- + '<div class="Ldt-CurrentSegmentInfobox-CreateTagButton">{{new_tag}}</div>'
- + '{{/new_tag_button}}'
- + '{{^new_tag_button}}'
- + '<input class="Ldt-CurrentSegmentInfobox-CreateTagInput" placeholder="{{new_tag}}"></input>'
- + '<div class="Ldt-CurrentSegmentInfobox-CreateTagInput-Add">+</div>'
- + '{{/new_tag_button}}'
- + '<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul">'
- + '{{#tags}}'
- + '{{#.}}'
- + '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
- + '<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="{{.}}"></input>'
- + '<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">{{delete_tag}}</div>'
- + '</li>'
- + '{{/.}}'
- + '{{/tags}}'
- + '</ul>'
- + '</div>'
- + '<div class="Ldt-CurrentSegmentInfobox-SubmitButton">{{submit}}</div>'
- + '<div class="Ldt-CurrentSegmentInfobox-CancelButton">{{cancel}}</div>'
- + '</div>'
- + '</div>'
-
-IriSP.Widgets.CurrentSegmentInfobox.prototype.messages = {
- fr : {
- submit : "Soumettre",
- cancel : "Annuler",
- edit : "Editer",
- new_tag : "Nouveau tag",
- delete_tag : "Supprimer",
- fields_header : "Commentaire associé à ce segment",
- tags_header : "Mots-clés associés à ce segment",
- empty : "Le player vidéo ne lit actuellement aucun segment"
- },
- en: {
- submit : "Submit",
- cancel : "Cancel",
- edit : "Edit",
- new_tag : "New tag",
- delete_tag : "Delete tag",
- fields_header : "Current segment content",
- tags_header : "Current segment tags",
- empty : "The player currently doesn't read any segment"
- }
-}
-
-IriSP.Widgets.CurrentSegmentInfobox.prototype.draw = function() {
- var _this = this;
- this.segments = this.getWidgetAnnotations();
- this.renderTemplate();
- this.currentSegment = false;
- this.clearBox();
- this.refresh();
- this.onMediaEvent("timeupdate", "refresh");
- this.onMediaEvent("settimerange", function(_timeRange){
- var _segmentBegin = _timeRange[0],
- _segmentEnd = _timeRange[1],
- _list = _this.segments.filter(function(_segment){
- return _segment.begin.milliseconds == _segmentBegin.milliseconds && _segment.end.milliseconds == _segmentEnd.milliseconds
- });
- if (_list.length >0){
- _this.$.toggleClass("editing", false);
- if (_this.currentSegment.id != _list[0].id){
- _this.currentSegment = _list[0];
- _data = {
- editable_segments: _this.editable_segments,
- edit: _this.custom_edit_text ? _this.custom_edit_text : _this.l10n.edit,
- title: _this.currentSegment.title,
- description : _this.currentSegment.description,
- description_placeholder : _this.empty_description_placeholder,
- tags : _this.currentSegment.getTagTexts()
- }
- _this.$.html(Mustache.to_html(_this.template, _data))
- if(_this.editable_segments&&_this.currentSegment){
- _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));
- }
- }
- }
- });
-
- if(this.editable_segments&&this.currentSegment){
- this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));
- }
-}
-
-IriSP.Widgets.CurrentSegmentInfobox.prototype.enableEditMode = function() {
- var _this = this;
- if(this.currentSegment){
- _data = {
- title: this.currentSegment.title,
- description : this.currentSegment.description,
- tags : this.currentSegment.getTagTexts(),
- submit : this.l10n.submit,
- cancel : this.l10n.cancel,
- headers : this.show_headers,
- tags_header : this.custom_tags_header ? this.custom_tags_header : this.l10n.tags_header,
- fields_header : this.custom_fields_header ? this.custom_fields_header : this.l10n.fields_header,
- new_tag : this.l10n.new_tag,
- delete_tag : this.l10n.delete_tag,
- new_tag_button : this.new_tag_button,
- }
- this.$.toggleClass("editing", true);
- this.$.html(Mustache.to_html(this.editTemplate, _data));
- this.$.find(".Ldt-CurrentSegmentInfobox-CancelButton").click(this.functionWrapper("disableEditMode"));
- if (this.new_tag_button){
- this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagButton").click(this.functionWrapper("insertTagInput"));
- } else {
- this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").keypress(this.functionWrapper("insertTagInputKeypress"));
- this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput-Add").click(this.functionWrapper("insertTagInputKeypress"));
- }
- this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
- this.$.find(".Ldt-CurrentSegmentInfobox-SubmitButton").click(this.functionWrapper("onSubmit"))
- }
-}
-
-IriSP.Widgets.CurrentSegmentInfobox.prototype.disableEditMode = function() {
- if(this.currentSegment){
- _data = {
- editable_segments: this.editable_segments,
- edit: this.custom_edit_text ? this.custom_edit_text : this.l10n.edit,
- title: this.currentSegment.title,
- description : this.currentSegment.description,
- description_placeholder : this.empty_description_placeholder,
- tags : this.currentSegment.getTagTexts()
- }
- this.$.toggleClass("editing", false);
- this.$.html(Mustache.to_html(this.template, _data));
- this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode"));
- }
-}
-
-IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInput = function() {
- if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){
- this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>')
- }
- this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append(
- '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
- +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value=""></input>'
- +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>'
- +'</li>');
- this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
-}
-
-IriSP.Widgets.CurrentSegmentInfobox.prototype.insertTagInputKeypress = function(event) {
- var keycode = (event.keyCode ? event.keyCode : event.which);
- if(keycode == '13' || event.type == 'click'){
- if((!this.currentSegment.getTagTexts().length)&&(!this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").length)){
- this.$.find(".Ldt-CurrentSegmentInfobox-Tags").prepend('<ul class="Ldt-CurrentSegmentInfobox-Tags-Ul"></ul>')
- }
- this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Ul").append(
- '<li class="Ldt-CurrentSegmentInfobox-Tags-Li">'
- +'<input type="text" class="Ldt-CurrentSegmentInfobox-Tags-Li-Input" value="'+ this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val() +'"></input>'
- +'<div class="Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton">'+this.l10n.delete_tag+'</div>'
- +'</li>');
- this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton").click(this.functionWrapper("deleteTagInput"));
- this.$.find(".Ldt-CurrentSegmentInfobox-CreateTagInput").val("");
- return false;
- }
-}
-
-IriSP.Widgets.CurrentSegmentInfobox.prototype.deleteTagInput = function(clickEvent) {
- $(clickEvent.currentTarget).parent().remove();
-}
-
-IriSP.Widgets.CurrentSegmentInfobox.prototype.onSubmit = function() {
- new_tags_titles = this.$.find(".Ldt-CurrentSegmentInfobox-Tags-Li-Input").map(function(){
- if($(this).val()){
- return $(this).val()
- }
- });
- new_title = this.$.find(".Ldt-CurrentSegmentInfobox-TitleInput").val()
- new_description = this.$.find(".Ldt-CurrentSegmentInfobox-DescriptionInput").val()
-
- var _this = this,
- _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* We create an Annotations List to send to the server */
- _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* We create a source object using a specific serializer for export */
- _annotation = new IriSP.Model.Annotation(this.currentSegment.id, _export); /* We create an annotation in the source with a generated ID (param. false) */
-
- _annotation.setAnnotationType(this.currentSegment.getAnnotationType().id);
- _annotation.setMedia(this.currentSegment.getMedia().id);
- _annotation.setBegin(this.currentSegment.begin);
- _annotation.setEnd(this.currentSegment.end);
- _annotation.created = this.currentSegment.created;
- _annotation.creator = this.currentSegment.creator;
- _annotation.title = new_title /* Title field */
- _annotation.description = new_description /* Description field */
- var _tagIds = IriSP._(new_tags_titles).map(function(_title) {
- var _tags = _this.source.getTags(true).searchByTitle(_title, true);
- if (_tags.length) {
- var _tag = _tags[0];
- }
- else {
- _tag = new IriSP.Model.Tag(_title.replace(/\W/g,'_'), _this.source);
- _tag.title = _title;
- _this.source.getTags().push(_tag);
- }
- return _tag.id;
- });
- _annotation.setTags(_tagIds);
- _annotation.project_id = this.project_id;
-
- _exportedAnnotations.push(_annotation); /* We add the annotation in the list to export */
- _export.addList("annotation",_exportedAnnotations); /* We add the list to the source object */
-
- _url = Mustache.to_html(this.api_endpoint_template, {annotation_id: this.currentSegment.id});
-
- IriSP.jQuery.ajax({
- url: _url,
- type: this.api_method,
- contentType: 'application/json',
- data: _export.serialize(), /* Source is serialized */
- success: function(_data) {
- _export.getAnnotations().removeElement(_annotation, true); /* We delete the sent annotation to avoid redundancy */
- _export.deSerialize(_data); /* Data deserialization */
- _this.source.merge(_export); /* We merge the deserialized data with the current source data */
- _this.segments.forEach(function(_segment){
- if (_segment.id == _annotation.id){
- _this.segments.removeElement(_segment)
- }
- })
- _this.segments.push(_annotation)
- _this.currentSegment = _annotation
- _data = {
- editable_segments: _this.editable_segments,
- edit: _this.custom_edit_text ? _this.custom_edit_text : _this.l10n.edit,
- title: _this.currentSegment.title,
- description : _this.currentSegment.description,
- description_placeholder : _this.empty_description_placeholder,
- tags : _this.currentSegment.getTagTexts()
- }
- _this.$.html(Mustache.to_html(_this.template, _data))
- if(_this.editable_segments&&_this.currentSegment){
- _this.$.find(".Ldt-CurrentSegmentInfobox").click(_this.functionWrapper("enableEditMode"));
- }
- _this.$.toggleClass("editing", false);
- },
- error: function(_xhr, _error, _thrown) {
- IriSP.log("Error when sending annotation", _thrown);
- _export.getAnnotations().removeElement(_annotation, true);
- }
- });
-}
-
-IriSP.Widgets.CurrentSegmentInfobox.prototype.refresh = function() {
- if(!this.media.getTimeRange()){
- var _currentTime = this.media.getCurrentTime();
- var _list = this.segments.filter(function(_segment){
- return (_segment.begin <= _currentTime && _segment.end >= _currentTime);
- })
-
- if (_list.length > 0){
- if (this.currentSegment.id != _list[0].id){
- this.currentSegment = _list[0];
- _data = {
- editable_segments: this.editable_segments,
- edit: this.custom_edit_text ? this.custom_edit_text : this.l10n.edit,
- title: this.currentSegment.title,
- description : this.currentSegment.description,
- description_placeholder : this.empty_description_placeholder,
- tags : this.currentSegment.getTagTexts()
- }
- this.$.html(Mustache.to_html(this.template, _data))
- if(this.editable_segments&&this.currentSegment){
- this.$.find(".Ldt-CurrentSegmentInfobox").click(this.functionWrapper("enableEditMode"));
- }
- }
- }
- else {
- this.currentSegment = false;
- this.clearBox();
- }
- }
-}
-
-IriSP.Widgets.CurrentSegmentInfobox.prototype.clearBox = function(){
- var _empty_message = this.l10n.empty
- if (this.empty_message) {
- _empty_message = this.empty_message
- }
- this.$.find(".Ldt-CurrentSegmentInfobox").html("<div class='Ldt-CurrentSegmentInfobox-Element Ldt-CurrentSegmentInfobox-NoSegment'>"+_empty_message+"</div>");
-}
\ No newline at end of file
+export { CurrentSegmentInfobox, currentSegmentInfoboxStyles };